- CSS2

Tasarımın altındaki yazı:

CSS Kodu

h1#title{display: none;}
h2#title span {display: none;}
div.header{display: none;}
li.nav_element{list-style-type: none;}
li.nav_element{display: none;}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}#main {
height: 550px;
width: 779px;
float: left;
}
.blueheader {
height: 7px;
width: 779px;
float: left;
background-color: #00AAD6;
}
.header {
height: 141px;
width: 779px;
float: left;
background-color: #E5E3E6;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #00AAD6;
}
.maincontent {
height: 389px;
width: 779px;
float: left;
}
.maninavigation {
width: 136px;
float: left;
background-color: #FFFFFF;
}
.text {
height: 389px;
width: 440px;
float: left;
background-color: #E8E8E8;
}
.flashcontent {
height: 389px;
width: 198px;
float: left;
background-color: #FFFFFF;
padding: 4px;
}
.navlink1 a {
width: 131px;
float: left;
background-image: url(http://www.entheosweb.com/free-downloads/CSS_templates/CSS3/images/bluebutton.jpg);
background-repeat: no-repeat;
padding: 5px;
background-color: #FFFFFF;
background-position: center center;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #E8E8E8;
text-decoration: none;
height: 15px;
}
.navlink1 a:hover{
width: 131px;
float: left;
background-image: url(http://www.entheosweb.com/free-downloads/CSS_templates/CSS3/images/bluebutton2.jpg);
background-repeat: no-repeat;
color: #000000;
padding: 5px;
height: 15px;
}
.companyname {
float: right;
background-color: #E5E3E6;
padding: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 23px;
font-weight: bolder;
color: #00AAD6;
margin: 10px;
text-align: center;
}
.welcome {
float: none;
background-color: #E8E8E8;
padding: 4px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bolder;
color: #00AAD6;
margin: 10px;
text-align: center;
border: 1px solid #01A9D6;
}
.innertext {
float: left;
background-color: #E8E8E8;
padding: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #00AAD6;
margin: 5px;
text-align: left;
line-height: 18px;
background-position: center;
}
.familypicture {
height: 80px;
width: 136px;
float: left;
text-align: center;
background-position: center center;
}
.familypictureblank {
height: 30px;
width: 136px;
float: left;
text-align: center;
background-position: center center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 30px;
color: #01A9D6;
font-weight: bold;
}
.familypictureblank2 {
height: 20px;
width: 136px;
float: left;
text-align: center;
background-position: center center;
}
.description {
float: left;
background-color: #E8E8E8;
padding: 4px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #00AAD6;
margin: 10px;
text-align: center;
line-height: 18px;
background-position: center center;
width: 150px;
}
#footer {
float: left;
background-color: #01A9D6;
text-align: left;
height: 12px;
width: 769px;
padding-left: 10px;
}
.bluemain {
width: 50%;
float: right;
}
.navlink2 a {
width: 50px;
float: right;
background-repeat: no-repeat;
padding: 5px;
background-position: center center;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #E8E8E8;
text-decoration: none;
height: 15px;
}
.navlink2 a:hover {
width: 50px;
float: right;
color: #000000;
padding: 5px;
height: 15px;
}
.imageheader {
height: 141px;
width: 250px;
float: left;
background-color: #E8E8E8;
}
.imageheader2 {
height: 141px;
width: 250px;
float: left;
text-align: center;
background-position: center;
}
.link a{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
text-decoration: none;
}
.link a:hover{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
text-decoration: none;
}
.link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
}
.photogallery {
height: 389px;
width: 198px;
float: left;
background-color: #FFFFFF;
}

kırmızı desenli

Tasarımın üzerindeki yazı:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Another Rambling Soul Template</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrap">
<div id="header">
<h1><a href="#">YourSiteName.com </a><span class="desc">Another Free Blog Template</span></h1>
<div id="topnav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<div id="contents">
<div id="sidebar">
<h2>Categories</h2>
<ul>
<li><a href="#">Categories</a></li>
<li><a href="#">Pellentesque</a></li>
<li><a href="#">Fusce Ut Sem</a></li>
<li><a href="#">Fermentum Eget</a></li>
<li><a href="#">Tristique</a>  </li>
</ul>
<h2>Recent Posts </h2>
<ul>
<li><a href="#">Categories</a></li>
<li><a href="#">Pellentesque</a></li>
<li><a href="#">Fusce Ut Sem</a></li>
<li><a href="#">Fermentum Eget</a></li>
<li><a href="#">Tristique</a>  </li>
</ul>
<h2>Recent Comments </h2>
<ul>
<li><a href="#">Categories</a></li>
<li><a href="#">Pellentesque</a></li>
<li><a href="#">Fusce Ut Sem</a></li>
<li><a href="#">Fermentum Eget</a></li>
<li><a href="#">Tristique</a>  </li>
</ul>
<h2>Links</h2>
<ul>
<li><a href="#">Categories</a></li>
<li><a href="#">Pellentesque</a></li>
<li><a href="#">Fusce Ut Sem</a></li>
<li><a href="#">Fermentum Eget</a></li>
<li><a href="#">Tristique</a>  </li>
</ul>
<h2>Blogroll</h2>
<ul>
<li><a href="#">Categories</a></li>
<li><a href="#">Pellentesque</a></li>
<li><a href="#">Fusce Ut Sem</a></li>
<li><a href="#">Fermentum Eget</a></li>
<li><a href="#">Tristique</a>  </li>
</ul>
<h2>Meta</h2>
<ul>
<li><a href="http://www.ramblingsoul.com">Rambling Soul </a></li>
<li><a href="#">Valid XHTML 1.0 </a></li>
<li><a href="#">WAI</a></li>
<li><a href="http://www.opendesigns.org">Open Designs </a></li>
</ul>
<p>&nbsp;</p>
</div>

Tasarımın altındaki yazı:

CSS Kodu

h1#title{display: none;}
h2#title span {display: none;}
div.header{display: none;}
li.nav_element{list-style-type: none;}
li.nav_element{display: none;}
body {
background-image: url(http://ramblingsoul.com/preview/rs9/images/bg.png);
background-repeat: repeat;
background-color: #6B0808;
margin: 0px;
padding: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
background-attachment: fixed;
}
#wrap {
background-image: url(http://ramblingsoul.com/preview/rs9/images/pagebg.png);
background-repeat: repeat-y;
width: 782px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 0px;
}
#wrap #header {
background-image: url(http://ramblingsoul.com/preview/rs9/images/header.png);
background-repeat: no-repeat;
height: 209px;
}
#wrap #header h1 {
margin: 0px;
display: block;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 28px;
font-weight: normal;
color: #F3E3C8;
width: 450px;
padding-top: 50px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 30px;
}
#wrap #header .desc {
display: block;
font-size: 12px;
font-style: italic;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
#wrap #header #topnav {
display: block;
margin-left: 525px;
margin-right: 35px;
margin-top: 15px;
}
#wrap #header #topnav ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#wrap #header #topnav li {
height: 20px;
display: block;
margin-top: 0px;
margin-bottom: 0px;
text-align: center;
padding-top: 5px;
padding-right: 10px;
padding-left: 10px;
list-style-type: none;
margin-right: auto;
margin-left: auto;
text-transform: uppercase;
}
#wrap #contents #left .postheading {
display: block;
margin: 0px;
padding: 0px;
}
#wrap #contents #left .postheading h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
font-size: 25px;
padding-top: 15px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
color: #B7412C;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 91px;
display: block;
}
#wrap #contents #left .postheading .headspacer {
clear: left;
margin: 0px;
padding: 0px;
font-size: 1px;
}
#wrap #contents #left .postheading .postinfo {
font-size: 10px;
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 91px;
display: block;
padding: 0px;
}
#wrap #contents #left .postheading .cal .date {
display: block;
font-size: 31px;
padding-top: 15px;
text-align: center;
padding-right: 4px;
padding-left: 4px;
color: #0099CC;
margin: 0px;
line-height: 32px;
}
#wrap #contents #left ul {
list-style-type: none;
margin: 15px;
}
#wrap #contents #left li {
margin-bottom: 5px;
padding: 2px;
display: block;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #CC6600;
}
#wrap #contents #sidebar ul {
margin: 0px;
list-style-type: none;
display: block;
background-image: url(http://ramblingsoul.com/preview/rs9/images/sidemenuhvr.png);
background-position: bottom;
background-repeat: no-repeat;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 15px;
padding-left: 0px;
}
#wrap #contents #sidebar li {
height: 22px;
display: block;
}
#wrap #contents #sidebar a {
color: #993300;
text-decoration: none;
display: block;
height: 18px;
padding-top: 4px;
padding-left: 5px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #FBF5EB;
}
#wrap #contents #sidebar h2 {
font-size: 16px;
padding: 5px;
display: block;
background-image: url(http://ramblingsoul.com/preview/rs9/images/sidemenuhvr.png);
background-repeat: no-repeat;
background-position: center bottom;
text-transform: uppercase;
color: #993300;
font-family: Arial, Helvetica, sans-serif;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 0px;
}
#wrap #contents .clear {
clear: both;
}
#wrap #contents #left .postheading .cal .month {
font-size: 9px;
display: block;
padding-top: 11px;
padding-left: 4px;
padding-right: 10px;
color: #BB412D;
font-style: normal;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}
#wrap #contents #left .postheading h1 a {
color: #B7412C;
text-decoration: none;
}
#wrap #contents #left .postheading .cal {
background-image: url(http://ramblingsoul.com/preview/rs9/images/datecal.png);
background-repeat: no-repeat;
height: 71px;
width: 69px;
display: block;
float: left;
padding: 10px;
}
#wrap #contents {
margin-top: 10px;
margin-bottom: 0px;
padding-top: 15px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;
}
#wrap #header #topnav a {
color: #CC6600;
text-decoration: none;
font-weight: bold;
}
#wrap #contents #sidebar {
width: 211px;
float: right;
padding-right: 25px;
padding-left: 25px;
}#wrap #contents #left {
margin-top: 0px;
margin-right: 270px;
margin-bottom: 0px;
margin-left: 0px;
padding-left: 15px;
}
#wrap #contents #left p {
line-height: 20px;
}
#wrap #header #topnav a:visited,active {
color: #CC6600;
text-decoration: none;
font-weight: bold;
}
#wrap #header #topnav a:hover {
color: #F3E3C8;
text-decoration: none;
font-weight: bold;
}
#wrap #contents #left .postheading h1 a:visited,active {
color: #B7412C;
text-decoration: none;
}
#wrap #contents #left .postheading h1 a:hover {
color: #000000;
text-decoration: none;
background-color: #F8F0E2;
}
#wrap #contents #left .postbottom {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 15px;
margin-left: 0px;
background-image: url(http://ramblingsoul.com/preview/rs9/images/postinfobg.png);
background-repeat: no-repeat;
background-position: center bottom;
height: 45px;
padding-top: 25px;
text-align: center;
}
#wrap #contents #left h2 {
font-size: 18px;
color: #996633;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
}
#wrap #contents #left blockquote {
background-color: #F7EEDD;
padding-left: 15px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 15px;
border-left-width: 5px;
border-left-style: solid;
border-left-color: #FF9966;
font-style: italic;
font-family: Georgia, "Times New Roman", Times, serif;
padding-top: 1px;
padding-bottom: 1px;
}
#wrap #contents #left blockquote  p {
line-height: 20px;
margin: 0px;
}
#wrap #contents #left a {
color: #B7412C;
text-decoration: underline;
}
#wrap #contents #left a:visited,active {
color: #B7412C;
text-decoration: underline;
}
#wrap #contents #left a:hover {
color: #000000;
text-decoration: none;
background-color: #FAF2E6;
}
#wrap #contents #sidebar a:visited,active {
color: #993300;
text-decoration: none;
display: block;
height: 18px;
padding-top: 4px;
padding-left: 5px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #FBF5EB;
}
#wrap #contents #sidebar a:hover {
color: #000000;
text-decoration: underline;
display: block;
height: 18px;
padding-top: 4px;
padding-left: 5px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #FBF5EB;
}
#footer span {
margin-left:35px;
}
#footer {
background-image: url(http://ramblingsoul.com/preview/rs9/images/footerbg.png);
height: 40px;
padding-top: 30px;
background-position: 0px 0px;
float: none;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
color: #F3E3C8;
font-size: 10px;
width: 782px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#footer a {
color: #FFFFFF;
}
#footer a:visited,active {
color: #FFFFFF;
}
#footer a:hover {
color: #FFFFFF;
text-decoration: none;
}
#wrap #header h1 a {
color: #F3E3C8;
text-decoration: none;
}
#wrap #header h1 a:visited,active {
color: #F3E3C8;
text-decoration: none;
}
#wrap #header h1 a:hover {
color: #FFFFFF;
text-decoration: none;
}

ftdwood

Tasarımın üzerindeki yazı:

</head>
<body>
<div id="main">

<div id="header">
<div id="logo">
<a href="#">ftdwood</a>
<h3><a href="#">Small Company Slogan Goes Here</a></h3>
</div>
</div>


<div id="content">
<div id="buttons">
<a href="index.html" class="but"  title="">Home</a>
<a href="blog.html" class="but" title="">Blog</a>
<a href="gallery.html"  class="but" title="">Gallery</a>
<a href="about_us.html"  class="but" title="">About us</a>
<a href="contact_us.html" class="but" title="">Contact us</a>
</div>
<div class="top_img">
<div class="scrollable">
<div class="items">
<div class="item">
<div class="header1"></div>
</div> 
<div class="item">
<div class="header2"></div>
</div> 
<div class="item">
<div class="header3"></div>
</div> 
<div class="item">
<div class="header4"></div>
</div> 
</div> 
</div> 
</div>
<div class="circl_all">
<div class="navi"></div> 
</div>
<div class="yellow_top">
<div class="yellow_bot">
<div class="box_home_bg">
<div class="box_home bg_grad">
<img src="http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/img11.gif" class="img_l"  alt="" />
<div style="height:4px"></div>
<h1> Lorem ipsum dolor. </h1>
<div style="height:3px; clear:both"></div>
<b>Sit amet, consectetur adipiscing elit. </b><br />
Sed enim ante, faucibus in pharetra et, condimentum non lorem. Vestibulum tempor ligula est. Nulla tellus mi, sodales tincidunt ultrices vehicula, mattis vel justo. Sed in nisl leo, sit amet ornare enim.
<div style="height:25px">
<a href="#" class="read">read more</a>
</div>
</div>
<div class="float_left" style="width: 15px; height: 10px;"></div>
<div class=" box_home bg_grad">
<img src="http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/img12.gif" class="img_l"   alt="" />
<div style="height:4px"></div>
<h1>Vestibulum vel lacus. </h1>
<div style="height:3px; clear:both"></div>
<b>Interdum non id massa.</b><br />
Nulla mollis, magna quis feugiat faucibus, risus lorem lacinia justo, et adipiscing tortor lacus in nunc. Duis in tellus vel ipsum bibendum gravida. Nunc eget mi id risus tempor rhoncus.
<div style="height:25px">
<a href="#" class="read">read more</a>
</div>
</div>
<div class="float_left" style="width: 15px; height: 10px;"></div>
<div class=" box_home bg_grad">
<img src="http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/img13.gif" class="img_l"  alt="" />
<div style="height:4px"></div>
<h1>Cras aliquam quam. </h1>
<div style="height:3px; clear:both"></div>
<b>Accumsan eu lobortis urna mollis.</b><br />
Sed a tellus orci, a luctus enim. Aliquam congue nisi quis felis porttitor vestibulum. Nam eget metus dui, eu consectetur urna. Donec sed mauris quis nisl iaculis ullamcorper.
<div style="height:25px">
<a href="#" class="read">read more</a>
</div>
</div>
<div style="clear: both"></div>
</div>
<div style=" height: 30px;"></div>
<div class="bg_grad">
<h1>Praesent ipsum neque</h1>
<div style=" height: 3px;"></div>
<b>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</b><br />
Aenean sed suscipit risus. Nam nisl sapien, gravida non rhoncus sed, sodales nec leo. Vestibulum bibendum ante sit amet libero scelerisque elementum. Mauris at magna odio, vitae sagittis dui. Pellentesque vehicula, ante ac egestas elementum, ante ante volutpat lorem, sed imperdiet quam mi a velit. Sed non scelerisque nibh. Fusce venenatis lobortis nunc, vitae laoreet mi ultricies at.
<div style="height:30px">
<a href="#" class="read">read more</a>
</div>

Tasarımın altındaki yazı:

</div>
<div style=" height: 30px;"></div>

<div id="bottom">
<div class="b_col1 col_bg">
<h2>Services</h2>
<ul>
<li><a href="#">Service Number 1</a></li>
<li><a href="#">Service Number 2</a></li>
<li><a href="#">Service Number 3</a></li>
<li><a href="#">Service Number 4</a></li>
<li><a href="#">Service Number 5</a></li>
<li><a href="#">Service Number 6</a></li>
</ul>
</div>
<div class="b_col2 col_bg">
<h2>Contact Information</h2>
1234 SomeStreet<br />
Brooklyn, NY 11201<br />
Phone:  1(234) 567 8910<br />
Fax: 1(234) 567 8910<br />
E-mail: companyname@yahoo.com
</div>
<div class="b_col3 col_bg">
<h2>Follow Us</h2>
<ul>
<li><img src="http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/fu_i1.png" class=" fu_i" alt="" /><a href="#">Subscribe to Blog</a></li>
<li><img src="http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/fu_i2.png" class=" fu_i" alt="" /><a href="#">Be a fan on Facebook</a></li>
<li><img src="http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/fu_i3.png" class=" fu_i" alt="" /><a href="#">RSS Feed</a></li>
<li><img src="http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/fu_i4.png" class=" fu_i" alt="" /><a href="#">Follow us on Twitter</a></li>
</ul>
</div>
<div style="clear: both; height:40px"></div>
</div>

</div>
</div>
<div style="clear: both; height: 1px;"></div>
</div>


<div id="footer">
Copyright  2011. Designed by <a href="http://www.flashtemplatesdesign.com/" title="Free Flash Templates">Free Flash Templates</a><br />
<a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a> | <a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional"><abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" title="This page validates as CSS"><abbr title="Cascading Style Sheets">CSS</abbr></a>
</div>

</div>
</body>
</html>

CSS Kodu

h1#title{display: none;}
h2#title span {display: none;}
div.header{display: none;}
li.nav_element{list-style-type: none;}
li.nav_element{display: none;}
/*
Design by FlashTemplatesDesign.com
http://www.flashtemplatesdesign.com/
Released for free under a Creative Commons Attribution 3.0 License
*/
*
{
border: 0;
margin: 0;
}
img
{
border: 0px;
}
body{
font: 12px Arial, Helvetica, sans-serif;
color: #000000;
background: url(http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/bg.jpg) center top repeat-x #6E2E00;
line-height: 16px;
}
#main {
width: 852px;
margin: 0px auto;
background:url(http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/main.jpg) right top no-repeat;}
#header {
height: 98px;
}
#logo {
padding: 33px 0px 0px 0px;
}
#logo a {
text-decoration: none;
font-size: 14px;
font-weight:bold;
color: #FBFA8B;
}
#logo H3 a{
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-align: left;
}
#buttons{
text-align:center;
height: 44px;
margin-left: 0px;
background: #405203;
padding-left: 0px;
border-bottom: 1px solid #000000;
}
#buttons a {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: 100;
display: block;
float: left;
text-decoration: none;
color: #000000;
text-align: center;
padding-top: 12px;
height: 30px;
width: 170px;
background: url(http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/but.jpg) 0px 0px no-repeat;
}
.but {
}
#buttons a:hover {
text-decoration: none;
background: url(http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/but_hover.jpg) left top  no-repeat;
}
#content{
background: #FBFA8B;
padding: 0px 0px 0px 0px;
border: 1px solid #000000;
}
.top_img {
height: 274px;
background:url(http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/top.jpg) left top no-repeat;
border-bottom: 1px solid #000000;}
.circl_all {
height: 30px;
padding: 3px 0px 3px 0px;
vertical-align:top;
border-bottom: 1px solid #000000;
background: #743209;}
.circl { background: url(http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/circl.gif) left top no-repeat;
height: 30px;
width: 30px;
margin: 0px 10px 0px 0px;
float:right; }
.circl:hover {
background:url(http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/circl_hov.gif) left top no-repeat; }
.yellow_top { background: url(http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/cont_top.jpg) left top no-repeat;}
.yellow_bot { background: url(http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/cont_bot.jpg) right bottom no-repeat;
padding: 14px 14px 0px 14px;}
.box_home {
float: left;
width: 236px;
}
.bg_grad {background: url(http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/box_home.png) top repeat-x;
padding: 14px 14px 0px 14px;}
.box_home_bg {
padding: 0px 0px 0px 0px;
}
.text { padding: 14px 14px 14px 14px;}
.float_left {float:left;}
.razd_v { background:url(http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/i_razd.gif) left 15px repeat-x;
height: 30px;
clear: both;}
#left{
width: 265px;
float: left;
color:#000000;
margin-left: 0px;
padding: 0px 0px 0px 0px;
}
.img_l {	float:left;
margin: 0px 10px 5px 0px;
}
.img_r {	float: right;
margin: 0px 0px 0px 15px;
}
H1{
font-family: Arial, Helvetica, sans-serif;
font-size:18px;
font-weight: 100;
color: #ffffff;
text-align: left;
padding: 0px 0px 0px 0px;
line-height: 20px;
}
.h1_left { padding: 5px 0px 7px 0px;
border-bottom: 2px solid #37BCA1;
color: #20262D;}
H2{
font-family: Arial, Helvetica, sans-serif;
font-size:18px;
font-weight: bold;
color: #ffffff;
text-align: left;
padding: 0px 0px 0px 0px;
line-height: 20px;
}
.read{
display:block;
float:right;
height: 22px;
width: 70px;
text-align: center;
padding: 3px 0px 0px 0px;
text-decoration: underline;
font-size:12px;
color: #743209;
font-weight: bold;
background: url(http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/read.png) left top no-repeat;
}
.read:hover {
font-size:12px;
text-decoration: none;
}
#right{
float: right;
width: 589px;
margin-right: 0px;
}
.span_dat {
color: #002380;
text-decoration: underline;}
#bottom {
width: 100%;
background:url(http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/bottom.jpg) left top no-repeat ;
color:#000000;
padding: 0px 0px 0px 0px;
}
#bottom h2{
font-family: Arial, Helvetica, sans-serif;
padding: 18px 0px 15px 0px;
font-size: 18px;
text-align: left;
color: #ffffff;
font-weight: 100;
line-height: 20px;
}
.b_col1 {
float: left;
margin-left: 0px;
background:url(http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/razd_bot.gif) bottom repeat-x;
}
.b_col2 {
float: left;
margin-left: 15px;
line-height: 25px;
background:url(http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/razd_bot.gif) bottom repeat-x;
}
.b_col3 {
float: left;
margin-left: 15px;
text-align: left;
}
.col_bg { background: url(http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/col_bg.png) top repeat-x;
width: 209px;
padding: 0px 17px 0px 38px;
}
.b_col3 ul {
list-style:none;
padding: 0px 0px 0px 0px;}
.b_col3 li {
padding: 8px 0px 2px 0px;
background: none;
}
.b_col3 li a {
color:#000000;
text-decoration: none;
}
.b_col3 li a:hover {
text-decoration: underline;
}
.fu_i {
padding: 0px 14px 0px 0px;
vertical-align: middle ;
}
.b_col1 ul {
list-style:none;
padding: 0px 0px 0px 0px;}
.b_col1 li {
padding: 8px 0px 0px 20px;
background: url(http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/fish2.gif) 0px 14px no-repeat;
}
.b_col1 ul a:hover {
text-decoration:underline;
}
.b_col1 ul a {
color:#000000;
text-decoration:none;
font-weight: 100;}
#footer{
height: 60px;
font-size: 12px;
color: #ffffff;
text-align: center;
padding: 20px 0px 0px 0px;
background: url(http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/footer.jpg) 0px 15px no-repeat;
}
#footer a{
color: #ffffff;
font-size: 12px;
text-decoration: none;
}
#footer a:hover{
color: #ffffff;
font-size: 12px;
text-decoration: underline;
}
/*
scroll styles here
*/
.item { width: 850px; height:274px;}
.item img {float:left;}
.item h2 { border:none; margin-bottom:15px;}
.scrollable { position:relative; overflow:hidden; width: 850px; height: 274px;}
.scrollable .items { width:20000em; position:absolute;}
.scrollable .items div { float:left;}
.scrollable .items .item { overflow:hidden;}
.scrollable .items .item p { line-height:16px;}
.navi { width:auto; height:20px; float:right; margin: 0px 0; padding-right: 20px;}
.navi a { width: 30px; cursor:pointer; height: 30px; float:left; margin:0 0 0 3px; background:url(images/circl.gif) no-repeat scroll right top; display:block; font-size:1px;}
.navi a:hover, .navi a.active { background-position:left top; margin:0 0 0 3px;  background:url(images/circl_hov.gif) no-repeat scroll right top}
.header1
{
width: 850px; height: 274px;
background: url(http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/top.jpg) no-repeat;
}
.header2
{
width: 850px; height: 274px;
background: url(http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/top2.jpg) no-repeat;
}
.header3
{
width: 850px; height: 274px;
background: url(http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/top3.jpg) no-repeat;
}
.header4
{
width: 850px; height: 274px;
background: url(http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/top4.jpg) no-repeat;
}
/* ------------------------------------------------------------------------
DO NOT CHANGE
------------------------------------------------------------------------- */
div.pp_overlay {background: #000;display: none;left: 0;position: absolute;top: 0;width: 100%;z-index: 9500;}
div.pp_pic_holder {display: none;position: absolute;width: 100px;z-index: 10000;}

ftdwood

Tasarımın üzerindeki yazı:

</head>
<body>
<div id="main">

<div id="header">
<div id="logo">
<a href="#">ftdwood</a>
<h3><a href="#">Small Company Slogan Goes Here</a></h3>
</div>
</div>


<div id="content">
<div id="buttons">
<a href="index.html" class="but"  title="">Home</a>
<a href="blog.html" class="but" title="">Blog</a>
<a href="gallery.html"  class="but" title="">Gallery</a>
<a href="about_us.html"  class="but" title="">About us</a>
<a href="contact_us.html" class="but" title="">Contact us</a>
</div>
<div class="top_img">
<div class="scrollable">
<div class="items">
<div class="item">
<div class="header1"></div>
</div> 
<div class="item">
<div class="header2"></div>
</div> 
<div class="item">
<div class="header3"></div>
</div> 
<div class="item">
<div class="header4"></div>
</div> 
</div> 
</div> 
</div>
<div class="circl_all">
<div class="navi"></div> 
</div>
<div class="yellow_top">
<div class="yellow_bot">
<div class="box_home_bg">
<div class="box_home bg_grad">
<img src="http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/img11.gif" class="img_l"  alt="" />
<div style="height:4px"></div>
<h1> Lorem ipsum dolor. </h1>
<div style="height:3px; clear:both"></div>
<b>Sit amet, consectetur adipiscing elit. </b><br />
Sed enim ante, faucibus in pharetra et, condimentum non lorem. Vestibulum tempor ligula est. Nulla tellus mi, sodales tincidunt ultrices vehicula, mattis vel justo. Sed in nisl leo, sit amet ornare enim.
<div style="height:25px">
<a href="#" class="read">read more</a>
</div>
</div>
<div class="float_left" style="width: 15px; height: 10px;"></div>
<div class=" box_home bg_grad">
<img src="http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/img12.gif" class="img_l"   alt="" />
<div style="height:4px"></div>
<h1>Vestibulum vel lacus. </h1>
<div style="height:3px; clear:both"></div>
<b>Interdum non id massa.</b><br />
Nulla mollis, magna quis feugiat faucibus, risus lorem lacinia justo, et adipiscing tortor lacus in nunc. Duis in tellus vel ipsum bibendum gravida. Nunc eget mi id risus tempor rhoncus.
<div style="height:25px">
<a href="#" class="read">read more</a>
</div>
</div>
<div class="float_left" style="width: 15px; height: 10px;"></div>
<div class=" box_home bg_grad">
<img src="http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/img13.gif" class="img_l"  alt="" />
<div style="height:4px"></div>
<h1>Cras aliquam quam. </h1>
<div style="height:3px; clear:both"></div>
<b>Accumsan eu lobortis urna mollis.</b><br />
Sed a tellus orci, a luctus enim. Aliquam congue nisi quis felis porttitor vestibulum. Nam eget metus dui, eu consectetur urna. Donec sed mauris quis nisl iaculis ullamcorper.
<div style="height:25px">
<a href="#" class="read">read more</a>
</div>
</div>
<div style="clear: both"></div>
</div>
<div style=" height: 30px;"></div>
<div class="bg_grad">
<h1>Praesent ipsum neque</h1>
<div style=" height: 3px;"></div>
<b>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</b><br />
Aenean sed suscipit risus. Nam nisl sapien, gravida non rhoncus sed, sodales nec leo. Vestibulum bibendum ante sit amet libero scelerisque elementum. Mauris at magna odio, vitae sagittis dui. Pellentesque vehicula, ante ac egestas elementum, ante ante volutpat lorem, sed imperdiet quam mi a velit. Sed non scelerisque nibh. Fusce venenatis lobortis nunc, vitae laoreet mi ultricies at.
<div style="height:30px">
<a href="#" class="read">read more</a>
</div>

Tasarımın altındaki yazı:

</div>
<div style=" height: 30px;"></div>

<div id="bottom">
<div class="b_col1 col_bg">
<h2>Services</h2>
<ul>
<li><a href="#">Service Number 1</a></li>
<li><a href="#">Service Number 2</a></li>
<li><a href="#">Service Number 3</a></li>
<li><a href="#">Service Number 4</a></li>
<li><a href="#">Service Number 5</a></li>
<li><a href="#">Service Number 6</a></li>
</ul>
</div>
<div class="b_col2 col_bg">
<h2>Contact Information</h2>
1234 SomeStreet<br />
Brooklyn, NY 11201<br />
Phone:  1(234) 567 8910<br />
Fax: 1(234) 567 8910<br />
E-mail: companyname@yahoo.com
</div>
<div class="b_col3 col_bg">
<h2>Follow Us</h2>
<ul>
<li><img src="http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/fu_i1.png" class=" fu_i" alt="" /><a href="#">Subscribe to Blog</a></li>
<li><img src="http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/fu_i2.png" class=" fu_i" alt="" /><a href="#">Be a fan on Facebook</a></li>
<li><img src="http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/fu_i3.png" class=" fu_i" alt="" /><a href="#">RSS Feed</a></li>
<li><img src="http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/fu_i4.png" class=" fu_i" alt="" /><a href="#">Follow us on Twitter</a></li>
</ul>
</div>
<div style="clear: both; height:40px"></div>
</div>

</div>
</div>
<div style="clear: both; height: 1px;"></div>
</div>


<div id="footer">
Copyright  2011. Designed by <a href="http://www.flashtemplatesdesign.com/" title="Free Flash Templates">Free Flash Templates</a><br />
<a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a> | <a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional"><abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" title="This page validates as CSS"><abbr title="Cascading Style Sheets">CSS</abbr></a>
</div>

</div>
</body>
</html>

CSS Kodu

h1#title{display: none;}
h2#title span {display: none;}
div.header{display: none;}
li.nav_element{list-style-type: none;}
li.nav_element{display: none;}
/*
Design by FlashTemplatesDesign.com
http://www.flashtemplatesdesign.com/
Released for free under a Creative Commons Attribution 3.0 License
*/
*
{
border: 0;
margin: 0;
}
img
{
border: 0px;
}
body{
font: 12px Arial, Helvetica, sans-serif;
color: #000000;
background: url(http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/bg.jpg) center top repeat-x #6E2E00;
line-height: 16px;
}
#main {
width: 852px;
margin: 0px auto;
background:url(http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/main.jpg) right top no-repeat;}
#header {
height: 98px;
}
#logo {
padding: 33px 0px 0px 0px;
}
#logo a {
text-decoration: none;
font-size: 14px;
font-weight:bold;
color: #FBFA8B;
}
#logo H3 a{
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-align: left;
}
#buttons{
text-align:center;
height: 44px;
margin-left: 0px;
background: #405203;
padding-left: 0px;
border-bottom: 1px solid #000000;
}
#buttons a {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: 100;
display: block;
float: left;
text-decoration: none;
color: #000000;
text-align: center;
padding-top: 12px;
height: 30px;
width: 170px;
background: url(http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/but.jpg) 0px 0px no-repeat;
}
.but {
}
#buttons a:hover {
text-decoration: none;
background: url(http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/but_hover.jpg) left top  no-repeat;
}
#content{
background: #FBFA8B;
padding: 0px 0px 0px 0px;
border: 1px solid #000000;
}
.top_img {
height: 274px;
background:url(http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/top.jpg) left top no-repeat;
border-bottom: 1px solid #000000;}
.circl_all {
height: 30px;
padding: 3px 0px 3px 0px;
vertical-align:top;
border-bottom: 1px solid #000000;
background: #743209;}
.circl { background: url(http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/circl.gif) left top no-repeat;
height: 30px;
width: 30px;
margin: 0px 10px 0px 0px;
float:right; }
.circl:hover {
background:url(http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/circl_hov.gif) left top no-repeat; }
.yellow_top { background: url(http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/cont_top.jpg) left top no-repeat;}
.yellow_bot { background: url(http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/cont_bot.jpg) right bottom no-repeat;
padding: 14px 14px 0px 14px;}
.box_home {
float: left;
width: 236px;
}
.bg_grad {background: url(http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/box_home.png) top repeat-x;
padding: 14px 14px 0px 14px;}
.box_home_bg {
padding: 0px 0px 0px 0px;
}
.text { padding: 14px 14px 14px 14px;}
.float_left {float:left;}
.razd_v { background:url(http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/i_razd.gif) left 15px repeat-x;
height: 30px;
clear: both;}
#left{
width: 265px;
float: left;
color:#000000;
margin-left: 0px;
padding: 0px 0px 0px 0px;
}
.img_l {	float:left;
margin: 0px 10px 5px 0px;
}
.img_r {	float: right;
margin: 0px 0px 0px 15px;
}
H1{
font-family: Arial, Helvetica, sans-serif;
font-size:18px;
font-weight: 100;
color: #ffffff;
text-align: left;
padding: 0px 0px 0px 0px;
line-height: 20px;
}
.h1_left { padding: 5px 0px 7px 0px;
border-bottom: 2px solid #37BCA1;
color: #20262D;}
H2{
font-family: Arial, Helvetica, sans-serif;
font-size:18px;
font-weight: bold;
color: #ffffff;
text-align: left;
padding: 0px 0px 0px 0px;
line-height: 20px;
}
.read{
display:block;
float:right;
height: 22px;
width: 70px;
text-align: center;
padding: 3px 0px 0px 0px;
text-decoration: underline;
font-size:12px;
color: #743209;
font-weight: bold;
background: url(http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/read.png) left top no-repeat;
}
.read:hover {
font-size:12px;
text-decoration: none;
}
#right{
float: right;
width: 589px;
margin-right: 0px;
}
.span_dat {
color: #002380;
text-decoration: underline;}
#bottom {
width: 100%;
background:url(http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/bottom.jpg) left top no-repeat ;
color:#000000;
padding: 0px 0px 0px 0px;
}
#bottom h2{
font-family: Arial, Helvetica, sans-serif;
padding: 18px 0px 15px 0px;
font-size: 18px;
text-align: left;
color: #ffffff;
font-weight: 100;
line-height: 20px;
}
.b_col1 {
float: left;
margin-left: 0px;
background:url(http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/razd_bot.gif) bottom repeat-x;
}
.b_col2 {
float: left;
margin-left: 15px;
line-height: 25px;
background:url(http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/razd_bot.gif) bottom repeat-x;
}
.b_col3 {
float: left;
margin-left: 15px;
text-align: left;
}
.col_bg { background: url(http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/col_bg.png) top repeat-x;
width: 209px;
padding: 0px 17px 0px 38px;
}
.b_col3 ul {
list-style:none;
padding: 0px 0px 0px 0px;}
.b_col3 li {
padding: 8px 0px 2px 0px;
background: none;
}
.b_col3 li a {
color:#000000;
text-decoration: none;
}
.b_col3 li a:hover {
text-decoration: underline;
}
.fu_i {
padding: 0px 14px 0px 0px;
vertical-align: middle ;
}
.b_col1 ul {
list-style:none;
padding: 0px 0px 0px 0px;}
.b_col1 li {
padding: 8px 0px 0px 20px;
background: url(http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/fish2.gif) 0px 14px no-repeat;
}
.b_col1 ul a:hover {
text-decoration:underline;
}
.b_col1 ul a {
color:#000000;
text-decoration:none;
font-weight: 100;}
#footer{
height: 60px;
font-size: 12px;
color: #ffffff;
text-align: center;
padding: 20px 0px 0px 0px;
background: url(http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/footer.jpg) 0px 15px no-repeat;
}
#footer a{
color: #ffffff;
font-size: 12px;
text-decoration: none;
}
#footer a:hover{
color: #ffffff;
font-size: 12px;
text-decoration: underline;
}
/*
scroll styles here
*/
.item { width: 850px; height:274px;}
.item img {float:left;}
.item h2 { border:none; margin-bottom:15px;}
.scrollable { position:relative; overflow:hidden; width: 850px; height: 274px;}
.scrollable .items { width:20000em; position:absolute;}
.scrollable .items div { float:left;}
.scrollable .items .item { overflow:hidden;}
.scrollable .items .item p { line-height:16px;}
.navi { width:auto; height:20px; float:right; margin: 0px 0; padding-right: 20px;}
.navi a { width: 30px; cursor:pointer; height: 30px; float:left; margin:0 0 0 3px; background:url(images/circl.gif) no-repeat scroll right top; display:block; font-size:1px;}
.navi a:hover, .navi a.active { background-position:left top; margin:0 0 0 3px;  background:url(images/circl_hov.gif) no-repeat scroll right top}
.header1
{
width: 850px; height: 274px;
background: url(http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/top.jpg) no-repeat;
}
.header2
{
width: 850px; height: 274px;
background: url(http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/top2.jpg) no-repeat;
}
.header3
{
width: 850px; height: 274px;
background: url(http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/top3.jpg) no-repeat;
}
.header4
{
width: 850px; height: 274px;
background: url(http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/top4.jpg) no-repeat;
}
/* ------------------------------------------------------------------------
DO NOT CHANGE
------------------------------------------------------------------------- */
div.pp_overlay {background: #000;display: none;left: 0;position: absolute;top: 0;width: 100%;z-index: 9500;}
div.pp_pic_holder {display: none;position: absolute;width: 100px;z-index: 10000;}

Business templates css

Tasarımın üzerindeki yazı:

<div id="wrapper">

<div id="header">
<div class="logo">
<h1 id="lineone">Free <span>CSS</span> Template</h1>
<h2 id="linetwo">by:<a href="http://www.getcsstemplates.com">business website templates</a></h2>
</div>
<div id="banner">
<h3>468x60 Banner Here</h3>
</div>
</div>


<div id="navigation">
<ul>
<li><a href="http://www.thinkhost.com/?p=14bc3c6f">Web Hosting</a></li>
<li><a href="http://www.getcsstemplates.com">Css Templates</a></li>
<li><a href="http://web20templates.blogspot.com">Web 2.0 Templates</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
<li><a href="#">Link Five</a></li>
</ul>
</div>


<div id="leftcolumn">
<div class="leftnav">
<ul>
<li><a href="http://www.getcsstemplates.com">Free Css Templates</a></li>
<li><a href="http://www.freelayouts.com" title="#">Free Layouts </a></li>
<li><a href="http://www.opendesigns.org">Open Designs </a></li>
<li><a href="http://www.oswd.org">OSWD</a></li>
<li><a href="http://www.openwebdesign.org">Open Web Design</a></li>
<li><a href="http://www.toxictemplates.com">Toxic Templates</a></li>
</ul>
</div>
<div class="clear"></div>
<div class="news">
<h3>News And Events </h3>
<h4>Jan.06.08.</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl. Morbi eget ...              <a href="#">read more</a>  </p>
<h4>Jan.03.08.</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl. Morbi eget ...              <a href="#">read more</a>   </p>
</div>
<div class="clear"></div>
<div class="newsbottom"> </div>
<br/><br/>
<center><a href='http://www.thinkhost.com?p=14bc3c6f&amp;b=77e8f3e6' target="_blank"><img src='https://secure.thinkhost.net/affiliates/apn/scripts/sb.php?p=14bc3c6f&amp;b=77e8f3e6' alt="" title=""></a></center>
</div>


<div class="righttop"></div>
<div id="rightcolumn"><h1>Lorem ipsum dolor sit amet</h1>

Tasarımın altındaki yazı:

<span class="inset"><strong>250x250 sponsored ad here</strong></span>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl. Morbi eget felis. Vestibulum feugiat lectus ut magna. Ut interdum ipsum nec metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; <a href="#">Ut eget augue</a> in velit elementum bibendum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl. Morbi eget felis. Vestibulum feugiat lectus ut magna. Ut interdum ipsum nec metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut eget augue in velit elementum bibendum. Duis sem urna, dictum ac, vehicula in, luctus eget, lectus. Aliquam erat volutpat. Nulla facilisi. Mauris elementum eros a purus aliquam rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam laoreet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. In pharetra lorem a tortor. Phasellus volutpat euismod tellus. Nulla facilisi.</p>
<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl. Morbi eget felis. Vestibulum feugiat lectus ut magna. Ut interdum ipsum nec metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; <a href="#">Ut eget augue</a> in velit elementum bibendum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl. Morbi eget felis. Vestibulum feugiat lectus ut magna. Ut interdum ipsum nec metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut eget augue in velit elementum bibendum. Duis sem urna, dictum ac, vehicula in, luctus eget, lectus.</p>
<div class="adunit">
<h3>468x60 Banner here</h3>
</div>
</div>
<div class="rightbottom"></div>


<div id="footer">
<p><a href="http://validator.w3.org/">Valid CSS</a> :: <a href="http://validator.w3.org/">Valid XHTML</a><br/>
Copyright &copy; 2008 by yourcompany.com :: Designed by: <a href="http://www.getcsstemplates.com" title="free css templates">GET FREE CSS TEMPLATES</a><br/>
<a href="http://www.getcsstemplates.com/free_css_templates/free-css-templates-66.html">free css templates</a> :: <a href="http://moneyearnersonline.blogspot.com">make money online</a> :: <a href="#">link three</a> :: <a href="#">link four</a> :: <a href="#">link five</a></p>
</div>

</div>

</body>
</html>

CSS Kodu
(Style tagleri olmadan yazınız):

h1#title{display: none;}
h2#title span {display: none;}
div.header{display: none;}
li.nav_element{list-style-type: none;}
li.nav_element{display: none;}
* {
padding : 0;
margin : 0;
}
body {
font : 85% "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size : 13px;
background-image : url(https://img.webme.com/pic/b/biristanbulmasali/bgg.jpg);
background-repeat : repeat-x;
}
p {
color : #787878;
}
h1 {
font-size : 1.6em;
}
h2 {
font-size : 1.4em;
}
h3 {
font-size : 1.2em;
}
a {
color : #99cccc;
text-decoration : none;
}
a:hover {
color : #003366;
text-decoration : underline;
}
img {
border: 3px #99cccc solid;}
#wrapper {
margin : 0 auto;
width : 822px;
}
#header {
color : #333;
width : 820px;
float : left;
padding : 0 0 0 0;
height : 200px;
margin : 0 0 0 0;
background-image : url(https://img.webme.com/pic/b/biristanbulmasali/header.jpg);
background-repeat : no-repeat;
}
.logo h1#lineone {
font-size : 1.7em;
font-weight : lighter;
padding-top : 90px;
padding-left : 25px;
color : #003366;
border : none;
top : 0;
left : 14px;
letter-spacing : -1px;
}
.logo h1#lineone span {
color : #99cccc;
}
.logo h2#linetwo {
padding-left : 25px;
font-size : 0.9em;
text-transform : none;
top : 25px;
left : 14px;
color : #99cccc;
}
.logo a {
color : #99cccc;
text-decoration : none;
}
#header h3 {
margin-left : 320px;
margin-top : -60px;
}
#navigation {
float : left;
width : 820px;
color : #333;
padding : 10px 0 10px 0;
margin : -40px 0 0 15px;
}
#navigation ul {
list-style-type : none;
text-align : center;
}
#navigation li {
display : inline;
}
#navigation a {
float : left;
width : 122px;
text-decoration : none;
color : #003366;
padding : 5px;
}
#navigation a:hover {
color : #82aeaf;
}
#leftcolumn {
color : #333;
margin : 0 0 0 10px;
padding : 0 0 10px 0;
height : 350px;
width : 210px;
float : left;
}
.leftnav ul {
list-style : none;
}
.leftnav li {
margin : 0 0 2px 0;
}
.leftnav li a {
display : block;
width : 199px;
height : 40px;
line-height : 30px;
background : url(https://img.webme.com/pic/b/biristanbulmasali/nav.jpg) no-repeat left top;
text-indent : 10px;
color : #99cccc;
text-decoration : none;
font-weight : bold;
padding-top : 5px;
}
.leftnav li a:active, .leftnav li a:visited, .leftnav li a:hover {
background-position : right top;
color : #003366;
font-weight : 800;
}
.news {
background-image : url(https://img.webme.com/pic/b/biristanbulmasali/leftboxtop.jpg);
background-repeat : no-repeat;
margin-top : 25px;
width : 200px;
min-height : 100px;
}
.newsbottom {
height : 15px;
background-image : url(https://img.webme.com/pic/b/biristanbulmasali/leftboxbottom.jpg);
background-repeat : no-repeat;
}
.news h3 {
color : #336698;
font-family : verdana;
font-size : 1em;
margin-left : 10px;
margin-right : 10px;
margin-top : 4px;
padding-top : 20px;
padding-bottom : 5px;
padding-left : 5px;
}
.news h4 {
font-family : verdana;
font-size : 0.9em;
padding-top : 10px;
padding-left : 15px;
padding-bottom : 5px;
color : #46df32;
margin-left : 10px;
}
.news p {
font-family : verdana;
font-size : 0.75em;
padding-left : 15px;
padding-bottom : 5px;
margin-left : 10px;
margin-right : 10px;
text-align : justify;
padding-right : 20px;
background-color : #eff6ff;
}
.news a {
padding-right : 10px;
}
#rightcolumn {
float : right;
color : #333;
margin : 0 10px 0 0;
padding : 0 0 0 0;
min-height : 350px;
width : 578px;
display : inline;
border-left : 5px solid #99cccc;
border-right : 5px solid #99cccc;
}
#rightcolumn h1 {
margin : 0 5px 0 5px;
padding : 0 0 0 5px;
color : #99cccc;
background-color : #003366;
}
#rightcolumn h2 {
margin : 10px 5px 0 5px;
padding : 0 0 0 5px;
color : #99cccc;
background-color : #003366;
}
#rightcolumn p {
padding : 10px 5px 0 5px;
text-align : justify;
font-size : 1.1em;
}
.inset {
float : right;
width : 250px;
height : 250px;
padding : 10px;
margin : 10px 5px 5px 5px;
color : inherit;
font-size : 85%;
background-image : url(https://img.webme.com/pic/b/biristanbulmasali/adbg.jpg);
background-repeat : no-repeat;
}
.adunit {
width : 478px;
height : 70px;
margin : 10px auto;
background-image : url(https://img.webme.com/pic/b/biristanbulmasali/468au.jpg);
background-repeat : no-repeat;
}
.adunit h3 {
padding-left : 15px;
padding-top : 5px;
}
.righttop {
float : right;
color : #333;
margin : 0 0 0 0;
padding : 0 0 0 0;
height : 15px;
width : 598px;
display : inline;
background-image : url(https://img.webme.com/pic/b/biristanbulmasali/rcbg.jpg);
background-repeat : no-repeat;
background-position : 0 0;
}
.rightbottom {
float : right;
color : #333;
margin : 0 0 0 0;
padding : 0 0 0 0;
height : 11px;
width : 598px;
display : inline;
background-image : url(https://img.webme.com/pic/b/biristanbulmasali/rcbgb.jpg);
background-repeat : no-repeat;
background-position : 0 0;
}
#footer {
width : 598px;
height : 70px;
float : right;
clear : both;
color : #333;
margin : 10px 0 10px 0;
padding : 0 0 0 0;
background-image : url(https://img.webme.com/pic/b/biristanbulmasali/footer.jpg);
background-repeat : no-repeat;
}
#footer p {
text-align : center;
padding-top : 10px;
font-size : 80%;
}

TURUNCU TRAVEL

Tasarımın üzerindeki yazı:

</head>
<body>
<div id="templatemo_container">

<div id="templatemo_header">
<div id="templatemo_menu">
<ul>
<li><a href="#" class="current">Homepage</a></li>
<li><a href="#" target="_parent">Services</a></li>
<li><a href="#">Photo Gallery</a></li>
<li><a href="#">Company</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#" target="_parent">Services</a></li>
<li><a href="#">Photo Gallery</a></li>
<li><a href="#">Company</a></li>
<li><a href="#">Contact Us</a></li>					<li><a href="#" target="_parent">Services</a></li>
<li><a href="#">Photo Gallery</a></li>
<li><a href="#">Company</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div class="templatemo_section">
<h1>W3C Validators</h1>
<p>
<a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0 Transitional" width="88" height="31" border="0" /></a>
<a href="http://jigsaw.w3.org/css-validator/check/referer"><img style="border:0;width:88px;height:31px" alt="Valid CSS"
src="http://jigsaw.w3.org/css-validator/images/vcss-blue" /></a>
</p>
</div>
</div>
<div id="templatemo_right_col">
<div class="templatemo_post_area">
<h1>HOŞ GELDİNİZ</h1>

Tasarımın altındaki yazı:

</div>
</div>
<div id="templatemo_right_col">
<div class="templatemo_post_area">
</div>
<div class="templatemo_gallery">
<div class="templatemo_title">
Photo Gallery
</div>
<a href="http://linkver"><img alt="" style="width: 100px; height: 88px" src="http://t3.gstatic.com/images?q=tbn:ANd9GcQiIc1Gl_zh3qmyTUjhMxgqUaNNX1nzJxcldO3RknSy_5OrPC0aTQ" /></a>&nbsp;<a href="http://linkver"><img style="width: 103px; height: 88px" alt="" src="http://t2.gstatic.com/images?q=tbn:ANd9GcQ8sZKrubyNYWi8xAsYVxPdnlyT7AD1J9OsZ4aB4XFXDsV6SV5zlw" /></a>&nbsp;<a href="http://linkver"><img style="width: 98px; height: 88px" alt="" src="http://t3.gstatic.com/images?q=tbn:ANd9GcRySTWrjfJhtIU_c5xdteLaXO-1-z_vz7SqbmVZK9N67BnGkjC0" /></a>&nbsp;<a href="http://linkver"><img style="width: 98px; height: 88px" alt="" src="http://t3.gstatic.com/images?q=tbn:ANd9GcSKvrE2tuXUYfz7V1-Yu5hCEx_QVCb7TfmqNm7wSqMaz8oyokUn8A" /></a>
</div>
</div>
</div>
</div>
<div class="cleaner"></div>
<div id="templatemo_footer">Copyright © 2048 <a href="#">Your Company Name</a> | <a href="http://www.iwebsitetemplate.com" target="_parent">Website Templates</a> by <a href="http://www.templatemo.com" target="_parent">Free CSS Templates</a></div>
<div class="cleaner"></div>
</div>
</div>

</body>
</html>

CSS Kodu
(Style tagleri olmadan yazınız):

h1#title{display: none;}
h2#title span {display: none;}
div.header{display: none;}
li.nav_element{list-style-type: none;}
li.nav_element{display: none;}
/*
CSS Credit: http://www.templatemo.com
*/
html {
background: url(http://www.templatemo.com/templates/templatemo_119_fruit/images/templatemo_bg.jpg) #faf8e1 repeat-x;
}
body {
margin: 0;
padding:0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 1.5em;
width: 100%;
display: table;
}
a:link, a:visited {	color: #f26521; text-decoration:none; }
a:active, a:hover { color: #f26521; text-decoration: underline; }
#templatemo_container {
width: 755px;
margin: auto;
}
#templatemo_header {
width: 755px;
height: 395px;
background: url(https://img.webme.com/pic/b/biristanbulmasali/templatemo_header.jpg) no-repeat;
}
#templatemo_menu {
float: left;
width: 152px;
margin: 200px 0 0 30px;
padding: 0;
}
#templatemo_menu ul {
float: right;
list-style: none;
margin: 0;
padding: 0;
}
#templatemo_menu li a {
display: block;
width: 122px;
height: 21px;
color: #aba000;
background: url(http://www.templatemo.com/templates/templatemo_119_fruit/images/templatemo_menu.jpg) no-repeat;
font-family: Tahoma;
font-size: 13px;
margin: 0 0 10px 0;
padding: 2px 0 0 30px;
}
#templatemo_menu li a:hover, #templatemo_menu li .current {
background: url(http://www.templatemo.com/templates/templatemo_119_fruit/images/templatemo_menu_current.jpg) no-repeat;
color: #fff;
text-decoration: none;
}
#templatemo_header #templatemo_slogan {
float:right;
width: 210px;
margin: 150px 70px 0 0;
padding: 0;
}
#templatemo_slogan span.slogan_text_1 {
float: left;
width: 100%;
font-family: Arial;
font-size: 24px;
color: #fff;
margin: 0 0 10px 0;
padding: 0;
}
#templatemo_sologan span.slogan_text_2 {
float: left;
width: 100%;
font-family: Arial;
font-size: 24px;
color: #fff;
margin: 0 0 0 30px;
padding: 0;
}
#templatemo_content_area {
margin: 0;
padding: 0;
}
#templatemo_left_col {
float: left;
margin: 0;
padding: 0;
width: 180px;
}
#templatemo_left_col .templatemo_section {
margin: 10px 0 0 0;
padding: 0 10px;
width: 160px;
}
.templatemo_section h1 {
margin: 0 0 10px 0;
padding: 0;
color: #f7941c;
font-family: Arial;
font-size: 14px;
}
.templatemo_section h2 {
margin: 10px 0 0 0;
padding: 0;
color: #8dc63f;
font-family: Arial;
font-size: 12px;
}
.templatemo_section p {
margin: 5px 0 0 0;
padding: 0 0 5px 0;
color: #000;
font-family: Arial;
font-size: 12px;
text-align: justify;
border-bottom: dotted 1px #000;
}
#templatemo_right_col {
float: right;
margin: 0;
padding: 0;
width: 565px;
}
#templatemo_right_col .templatemo_post_area {
width:565px;
margin: 10px 0 0 0;
padding: 0;
}
.templatemo_post_area h1 {
margin: 0 0 10px 0;
padding: 0;
color: #588526;
font-family: Arial;
font-size: 14px;
}
.templatemo_post_area p {
margin: 0 0 10px 0;
padding: 0;
color: #588526;
font-family: Arial;
font-size: 12px;
text-align: justify;
}
.templatemo_post_area img {
float: right;
margin: 0 0 10px 10px;
padding: 0;
}
#templatemo_right_col .templatemo_gallery {
width: 565px;
margin: 10px 0 0 0;
padding: 0;
}
.templatemo_gallery .templatemo_title {
width: 560px;
background: #177b2f;
font-family: Arial;
font-size: 15px;
font-weight: bold;
color: #fff;
margin: 0;
padding: 5px 0 5px 5px;
}
.templatemo_gallery .templatemo_picture {
margin: 10px 0 0 0;
padding: 0;
}
.templatemo_picture .highslide-gallery img {
float: left;
margin: 0 16px 10px 0;
padding: 0;
}
.highslide-gallery img.left {
margin: 0 20px 10px 10px;
padding: 0;
}
.highslide-gallery img.right {
margin: 0 0 10px 0;
padding: 0;
}
#templatemo_content_area #templatemo_footer {
background-color: #f5989d;
border: 1px solid #E76D71;
color: #000;
font-family: Arial;
font-size: 12px;
text-align: center;
margin: 10px 0;
padding: 5px 0;
}
#templatemo_footer a {
color: #000;
text-decoration: underline;
}
#templatemo_footer a:hover {
color: #990000;
text-decoration: none;
}
.cleaner {
clear: both;
height: 0;
margin: 0;
padding: 0;
}