bs-css - Photoshopar

Photoshopar

Tasarımın resimlerini buradan indirebilirsiniz.Daha sonra Css Kısmına yapıştırabilirsiniz.
Tasarım Üstü

Tasarım Altı

<p></p> 		   			 			<div id="sample1" class="boxed"> 				<h2>Sample One</h2> 				<ul> 					<li><a href="#" _fcksavedurl="#">Ut semper vestibulum est</a></li> 					<li><a href="#" _fcksavedurl="#">Vestibulum luctus venenatis dui</a></li> 					<li><a href="#" _fcksavedurl="#">Etiam malesuada rutrum enim</a></li> 					<li><a href="#" _fcksavedurl="#">Aenean elementum facilisis ligula</a></li> 					<li><a href="#" _fcksavedurl="#">Ut tincidunt elit vitae augue</a></li> 					<li><a href="#" _fcksavedurl="#">Sed quis odio sagittis leo vehicula</a></li> 				</ul> 			</div> 			 			<div id="sample2" class="boxed"> 				<h2>Sample Two</h2> 				<p>Quisque dictum integer nisl risus, sagittis convallis, rutrum id, and nibh:<p></p> 				<ul> 					<li><a href="#" _fcksavedurl="#">Integer rutrum nisl in mi</a></li> 					<li><a href="#" _fcksavedurl="#">Etiam malesuada rutrum enim</a></li> 					<li><a href="#" _fcksavedurl="#">Aenean elementum facilisis ligula</a></li> 				</ul> 			</div> 			 		 		 		<div id="sidebar"> 			<ul> 				<li id="submenu"> 					<h2>Other Links</h2> 					<menu><li><a href="#" _fcksavedurl="#"><img src="../../Belgelerim/Mt2_Hunter/1.gif" _fcksavedurl="../../Belgelerim/Mt2_Hunter/1.gif" alt=" " width="23" height="17" />Semper vestibulum</a> 					  <div align="justify" class="boxed" id="sample"></div> 					  </li> 					  <li><a href="#" _fcksavedurl="#">Vestibulum luctus</a></li> 					  <li><a href="#" _fcksavedurl="#">Integer rutrum</a></li> 					  <li><a href="#" _fcksavedurl="#">Etiam malesuada</a></li> 					  <li><a href="#" _fcksavedurl="#">Elementum facilisis</a></li> 					  <li><a href="#" _fcksavedurl="#">Ut tincidunt</a></li> 					  <li><a href="#" _fcksavedurl="#">Odio sagittis</a></li> 					</menu>				</li> 				 				<li id="news"> 					<h2>News & Updates</h2> 					<ul> 						<li> 							<h3>25th May</h3> 							<p><a href="#" _fcksavedurl="#">Pellentesque quis elit non lectus gravida blandit…</a><p></p> 						</li> 						<li> 							<h3>23rd May</h3> 							<p><a href="#" _fcksavedurl="#">Lorem ipsum dolor sit amet, consectetuer adipiscing…</a><p></p> 						</li> 						<li> 							<h3>21st May</h3> 							<p><a href="#" _fcksavedurl="#">Phasellus nec erat sit amet nibh pellentesque congue…</a><p></p> 						</li> 						<li> 							<h3>17th May</h3> 							<p><a href="#" _fcksavedurl="#">Maecenas vitae orci vitae tellus feugiat eleifend…</a><p></p> 						</li> 					</ul> 				</li> 				 			</ul> 	  </div> 		 		<div style="clear: both; height: 1px"></div> 	 	 	<div id="footer"> 		<p id="legal">Copyright © 2007 The Gathering. All Rights Reserved. Designed by <a href="http://www.freecsstemplates.org/" _fcksavedurl="http://www.freecsstemplates.org/">Free CSS Templates</a>.<p></p> 		<p id="links"><a href="#" _fcksavedurl="#">Privacy Policy</a> | <a href="#" _fcksavedurl="#">Terms of Use</a><p></p> 	</div>

Css

* { 	margin: 0; 	padding: 0; }  body { 	background: #0A0A0A url(images/img1.jpg); 	font-family: Arial, Helvetica, sans-serif; 	font-size: 13px; 	color: #666666; }  h1, h2, h3 { 	color: #CCCCCC; }  h1 { }  h2 { }  h3 { }  p, blockquote, ul, ol { 	margin-bottom: 20px; 	line-height: 1.6em; }  p { }  blockquote { }  ul { }  ol { }  a { 	border-bottom: 1px dotted #652A17; 	text-decoration: none; 	color: #652A17; }  a:hover { 	border: none; 	color: #FF0000; }  /* Wrapper */  #wrapper { 	background: url(images/img2.jpg) repeat-x; }  /* Header */  #header { 	width: 750px; 	height: 181px; 	margin: 0 auto; 	padding: 0 0 0 0; 	background: url(images/img3.jpg); }  #header h1, #header h2 { 	float: left; }  #header h1 { 	padding: 150px 0 0 20px; 	letter-spacing: 3px; 	font-size: 136%; }  #header h2 { 	padding: 153px 0 0 6px; 	letter-spacing: 2px; 	font-size: 107%; }  #header a { 	border: none; 	text-transform: uppercase; 	text-decoration: none; 	color: #000000; }  /* Menu */  #menu { 	width: 750px; 	height: 50px; 	margin: 0 auto; 	background: url(images/img4.jpg) no-repeat; }  #menu ul { 	margin: 0; 	padding: 0; 	list-style: none; 	line-height: normal; }  #menu li { 	display: inline; }  #menu a { 	display: block; 	float: left; 	height: 20px; 	padding: 10px 20px 0 20px; 	border: none; 	border-right: 1px solid #110F09; 	font-size: 85%; 	font-weight: bold; 	color: #F4D1C5; }  #menu a:hover { 	color: #FFFFFF; }  /* Page */  #page { 	width: 750px; 	margin: 0 auto; 	background: url(images/img7.jpg) repeat-y 220px 0px; }  /* Content */  #content { 	float: right; 	width: 489px; 	padding-right: 20px; }  #content h1, #content h2, #content h3 { 	margin-bottom: 20px; }  #content h1 { 	font-size: 136%; }  #content h2 { 	font-size: 107%; }  #content h3 { 	font: 92%; }  #content ul, #content ol { 	list-style-position: inside; }  #content .boxed { 	float: left; 	width: 46%; 	padding-right: 2%; }  #content .boxed h2 { 	padding: 5px 0; 	background: url(images/img5.jpg) repeat-x left bottom; }  /* Welcome */  #welcome { }  /* Sample1 */  #sample { }  /* Sample2 */  #sample2 { }  /* Sidebar */  #sidebar { 	float: left; 	width: 180px; 	padding-left: 20px; }  #sidebar ul { 	margin: 0; 	padding: 0; 	list-style: none; 	line-height: normal; }  #sidebar li { 	margin-bottom: 1px; }  #sidebar li ul { }  #sidebar li li { 	margin: 0; 	padding: 7px 20px; 	background: url(images/img5.jpg) repeat-x left bottom; }  #sidebar h2 { 	padding: 5px 20px; 	background: url(images/img6.jpg); 	border-bottom: 1px solid #1C1C1C; 	font-size: 100%; }  #sidebar h3 { 	font-size: 77%; }  #sidebar p { 	margin: 0; 	line-height: normal; }  #sidebar a { 	border: none; }  /* Submenu */  #submenu { }  /* News */  #news { }  #news a { 	font-size: 85%; }  /* Footer */  #footer { 	width: 750px; 	height: 50px; 	margin: 0 auto; 	padding: 30px 0 0 0; 	background: url(images/img4.jpg) no-repeat; }  #footer p { 	margin: 0; 	text-align: center; 	font-size: 77%; }