ftdsunset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>FlashTemplatesDesign.com free CSS template</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type='text/css'>
/*
Design by Metamorphosis Design
http://www.metamorphozis.com
Released for free under a Creative Commons Attribution 2.5 License
*/
*{
margin: 0px;
padding: 0px;
}
img{
padding: 0px;
border: none;
}
a{
color: #ffffff;
font-weight: bold;
text-decoration: none;
}
a:hover {
text-decoration: none;
color: #d17b02;
}
h1{
font: 18px Arial, Helvetica, sans-serif;
color: #666666;
font-weight: normal;
text-align: center;
padding: 0px 25px 10px 25px;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 18px;
color: #666666;
background: #000000 url(ftdsunset-images/bg.jpg) no-repeat top center fixed;
}
.clear{
clear: both;
}
#wrap{
width: 1050px;
margin: 0 auto;
}
#menu{
width: 1050px;
height: 66px;
background: url(ftdsunset-images/menu_bg.png);
}
#menu ul{
padding-left: 0px;
list-style: none;
padding: 0px 0px 0px 0px;
margin: 0 auto;
width: 771px;
}
#menu ul li{
display: inline;
}
#menu ul li a{
font: 24px Arial, Helvetica, sans-serif;
color: #ffffff;
font-weight: normal;
text-decoration: none;
text-align: center;
display: block;
float: left;
width: 154px;
height: 61px;
line-height: 61px;
}
#menu ul li a:hover, #menu ul li .active{
background: url(ftdsunset-images/active.png) center;
}
#top_padding{
height: 30px;
}
/*
content
*/
#content_top{
background: url(ftdsunset-images/content_top.png) top left;
height: 25px;
}
#content_bottom{
background: url(ftdsunset-images/content_bottom.png) top left;
height: 24px;
}
#content_bg_repeat{
background: url(ftdsunset-images/content_bg_repeat.png) left repeat-y;
padding: 0px 24px 0px 25px;
}
/*
content box 1
*/
#content_box1{
padding-bottom: 25px;
}
#column1, #column2, #column3{
float:left;
width: 319px;
}
#column1 p, #column2 p, #column3 p{
padding: 25px 11px 0px 11px;
}
#column2{
margin: 0px 21px 0px 22px;
}
/*
content box 2
*/
#content_box2{
background: url(ftdsunset-images/content_box2_bg.png) left repeat-y;
}
#content_box2_top{
background: url(ftdsunset-images/content_box2_top.png) left top no-repeat;
}
#content_box2_bottom{
background: url(ftdsunset-images/content_box2_bottom.png) left bottom no-repeat;
min-height: 40px;
padding: 18px 17px 12px 17px;
}
#content_box2 h1{
text-align: left;
padding-left: 0px;
}
#column1_box2{
float: left;
width: 319px;
margin-right: 41px;
}
#column2_box2{
float: left;
width: 302px;
margin-right: 41px;
}
#column3_box2{
float: left;
width: 261px;
}
.read{
text-align: right;
padding: 10px 10px 0px 0px;
}
.read a{
color: #ff0000;
font-weight: normal;
}
#column2_box2 ul{
padding-left: 0px;
list-style: none;
}
#column2_box2 ul li a{
display: block;
background: url(ftdsunset-images/ls.gif) no-repeat left center;
padding-left: 24px;
margin-bottom: 5px;
color: #666666;
font-weight: normal;
}
#column2_box2 ul li a:hover{
color: #ffffff;
}
/*
footer top
*/
#footer_top{
width: 841px;
margin: 0 auto;
background: url(ftdsunset-images/footer_top_border.png) no-repeat bottom;
padding-top: 23px;
}
#footer_top h2{
font: 18px Arial, Helvetica, sans-serif;
color: #000000;
font-weight: normal;
padding-bottom: 5px;
padding-left: 25px;
}
#footer_top a{
color: #000000;
font-weight: bold;
}
#footer_top a:hover{
color: #ffffff;
}
#footer_top p{
color: #000000;
}
#footer_column1, #footer_column2, #footer_column3{
width: 226px;
float: left;
}
.footer_text{
background: url(ftdsunset-images/footer_top_border.png) no-repeat top left;
width: 226px;
padding: 10px 0px 10px 0px;
}
#footer_column2{
padding: 0px 87px 0px 75px;
}
.foot_pad{
padding-left: 45px;
padding-top: 10px;
}
.link1{
background: url(ftdsunset-images/link1.png) no-repeat 0px 2px;
padding-left: 30px;
min-height: 18px;
padding-bottom: 10px;
}
.link2{
background: url(ftdsunset-images/link2.png) no-repeat 0px 2px;
padding-left: 30px;
min-height: 18px;
padding-bottom: 10px;
}
.link3{
background: url(ftdsunset-images/link3.png) no-repeat 0px 2px;
padding-left: 30px;
min-height: 18px;
padding-bottom: 10px;
}
.link4{
background: url(ftdsunset-images/link4.png) no-repeat 0px 2px;
padding-left: 30px;
min-height: 18px;
padding-bottom: 10px;
}
.ls{
list-style: none;
padding-left: 0px;
}
.ls li{
background: url(ftdsunset-images/ls.gif) no-repeat 0px 6px;
margin-bottom: 8px;
padding-left: 15px;
}
/*
footer bottom
*/
#footer_bot{
text-align: center;
padding: 50px 0px 50px 0px;
}
#footer_bot a, #footer_bot p{
color: #000000;
font-weight: normal;
}
</style>
</head>
<body>
<div id="wrap">
<div id="menu">
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div id="top_padding"></div>
<div id="content_top"></div>
<div id="content_bg_repeat">
<div id="content_box1">
<div id="column1">
<h1>Aenean vulputate venenatis leo ac semper</h1>
<img src="ftdsunset-images/img3.jpg" alt="" title="" /><br />
<p>Sed velit augue, tristique eu adipiscing id, rhoncus a arcu. Fusce auctor ligula non dui feugiat quis cursus sapien posuere. Aenean vulputate venenatis leo ac semper. Suspendisse potenti.</p>
</div>
<div id="column2">
<h1>Sed velit augue, tristique eu adipiscing id, rhoncus a arcu.</h1>
<img src="ftdsunset-images/img2.jpg" alt="" title="" /><br />
<p>Vestibulum dui eros, dictum nec egestas sed, lacinia eu arcu. Sed velit augue, tristique eu adipiscing id, rhoncus a arcu. Fusce auctor ligula non dui feugiat quis cursus sapien posuere. Aenean vulputate venenatis </p>
</div>
<div id="column3">
<h1>Mauris nibh ante, mattis in consectetur</h1>
<img src="ftdsunset-images/img1.jpg" alt="" title="" /><br />
<p>Praesent neque tortor, egestas ac venenatis eget, feugiat eu ipsum. Vestibulum dui eros, dictum nec egestas sed, lacinia eu arcu. Sed velit augue, tristique eu adipiscing id, rhoncus a arcu. Fusce auctor ligula </p>
</div>
<div class="clear"></div>
</div>
<div id="content_box2">
<div id="content_box2_top">
<div id="content_box2_bottom">
<h1>Aenean vulputate venenatis leo ac semper. Aliquam erat volutpat. Lorem ipsum dolor sit amet.</h1>
<div id="column_box2">
<div id="column1_box2">
<img src="ftdsunset-images/img4.jpg" alt="" title="" />
</div>
<div id="column2_box2">
<ul>
<li><a href="#">Praesent neque tortor, egestas ac venenatis</a></li>
<li><a href="#">Vestibulum dui eros, dictum nec egestas sed,</a></li>
<li><a href="#">Sed velit augue, tristique eu adipiscing id,</a></li>
<li><a href="#">Fusce auctor ligula non dui feugiat quis</a></li>
<li><a href="#">Aenean vulputate venenatis leo ac semper.</a></li>
</ul>
</div>
<div id="column3_box2">
Vestibulum dui eros, dictum nec egestas sed, lacinia eu arcu. Sed velit augue, tristique eu adipiscing id, rhoncus a arcu. Fusce auctor ligula non dui feugiat quis cursus sapien posuere. Aenean vulputate venenatis leo ac
<div class="read"><a href="#">read more...</a></div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
</div>
<div id="content_bottom"></div>
<div id="footer_top">
<div id="footer_column1">
<h2>Recent posts</h2>
<div class="footer_text">
<p><a href="#">Suspendisse rutrum interdum lacinia.</a>
Suspendisse tempus aliquet elit sit amet pellentesque. Donec iaculis pulvinar mauris, ac vulputate justo pretium quis. </p>
<br />
<p><a href="#">Quisque luctus, mi ornare malesuada</a>
Suspendisse tempus aliquet elit sit amet pellentesque. Donec iaculis pulvinar </p>
</div>
</div>
<div id="footer_column2">
<h2>Share with Others</h2>
<div class="footer_text">
<div class="foot_pad">
<div class="link1"><a href="#">Subscribe to Blog</a></div>
<div class="link2"><a href="#">Be a fan on Facebook</a></div>
<div class="link3"><a href="#">RSS Feed</a></div>
<div class="link4"><a href="#">Follow us on Twitter</a></div>
</div>
</div>
</div>
<div id="footer_column3">
<h2>Useful Resources</h2>
<div class="footer_text">
<div class="foot_pad">
<ul class="ls">
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Maecenas in turpis </a></li>
<li><a href="#">Morbi fringilla libero</a></li>
<li><a href="#">In venenatis metus vel </a></li>
<li><a href="#">Donec cursus quam ac </a></li>
</ul>
</div>
</div>
</div>
<div class="clear"></div>
</div>
<div id="footer_bot">
<p>Copyright 2011. <!-- Do not remove -->Designed by <a href="http://www.flashtemplatesdesign.com/" title="Free Flash Templates">Free Flash Templates</a><!-- end --></p>
<p><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></p>
</div>
</div>
</body>
</html>
Related examples in the same category