ftdtree
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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, fieldset{
padding: 0px;
border: none;
margin: 0px;
line-height: 0px;
}
a{
color: #ffffff;
text-decoration: none;
}
a:hover {
text-decoration: none;
color: #000000;
}
body{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 17px;
color: #ffffff;
background: url(ftdtree-images/bg.jpg);
}
h2{
font: 18px Arial, Helvetica, sans-serif;
color: #80771d;
text-align: center;
font-weight: normal;
padding-bottom: 10px;
}
h3{
font: 18px Arial, Helvetica, sans-serif;
color: #ffffff;
font-weight: normal;
padding-bottom: 5px;
padding-left: 25px;
}
.clear{
clear: both;
}
#grad_bg{
position: absolute;
height: 664px;
background: url(ftdtree-images/bg_grad.jpg) repeat-x top;
width: 100%;
}
#wrap{
position: relative;
width: 926px;
margin: 0 auto;
}
/*
menu
*/
#menu{
background: url(ftdtree-images/menu_bg.jpg) repeat-x top;
height: 86px;
}
#menu ul{
padding-left: 0px;
list-style: none;
width: 800px;
margin: 0 auto;
}
#menu ul li{
display: inline;
}
#menu ul li a{
font: 24px Arial, Helvetica, sans-serif;
color: #ffffff;
text-align: center;
font-weight: normal;
text-decoration: none;
display: block;
float: left;
width: 160px;
height: 86px;
line-height: 86px;
}
#menu ul li a:hover, #menu ul li .active{
color: #000000;
}
/*logo*/
#logo{
height: 52px;
padding-top: 32px;
padding-left: 30px;
}
#logo h1 a{
font: 14px Arial, Helvetica, sans-serif;
color: #ffffff;
font-weight: bold;
text-decoration: none;
}
#logo a small{
font: 12px Arial, Helvetica, sans-serif;
color: #ffffff;
font-weight: bold;
text-decoration: none;
}
/*
content
*/
#content_bg{
background: #545503;
padding: 15px;
}
/*
header box
*/
#header{
background: url(ftdtree-images/header.jpg) no-repeat;
height: 469px;
}
/*
content white box
*/
#content_white{
background: #ffffff;
padding: 22px;
}
#content_white p{
color: #666666;
padding-top: 10px;
}
.content_column_box{
}
.content_column1{
float: left;
width: 254px;
}
.content_column2{
float: left;
width: 254px;
padding: 0px 45px 0px 45px;
}
.content_column3{
float: left;
width: 254px;
}
.img_bor1{
border: 1px solid #acacac;
}
.img_bor2{
border: 6px solid #ffffff;
}
.img_bor2 img{
display: block;
}
#con_bot_bor1{
border: 1px solid #666666;
background: #ffffff url(ftdtree-images/grad_bot_top.jpg) repeat-x top;
margin-top: 15px;
}
#con_bot_bor2{
border: 1px solid #ffffff;
background: url(ftdtree-images/grad_bot_bot.jpg) repeat-x bottom;
min-height: 100px;
padding: 20px;
}
#con_bot_bor2 h2{
text-align: left;
}
#con_bot_bor2 .content_column1, #con_bot_bor2 .content_column2, #con_bot_bor2 .content_column3{
width: 250px;
}
#con_bot_bor2 .content_column2{
padding: 0px 29px 0px 29px;
}
/*
footer_top
*/
#footer_top{
width: 841px;
margin: 0 auto;
background: url(ftdtree-images/footer_top_border.png) no-repeat bottom;
padding-top: 30px;
}
#footer_top a{
color: #ffffff;
font-weight: bold;
}
#footer_top a:hover{
color: #000000;
}
#footer_top p{
color: #ffffff;
}
#footer_column1, #footer_column2, #footer_column3{
width: 226px;
float: left;
}
.footer_text{
background: url(ftdtree-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(ftdtree-images/link1.png) no-repeat 0px 2px;
padding-left: 30px;
min-height: 18px;
padding-bottom: 10px;
}
.link2{
background: url(ftdtree-images/link2.png) no-repeat 0px 2px;
padding-left: 30px;
min-height: 18px;
padding-bottom: 10px;
}
.link3{
background: url(ftdtree-images/link3.png) no-repeat 0px 2px;
padding-left: 30px;
min-height: 18px;
padding-bottom: 10px;
}
.link4{
background: url(ftdtree-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(ftdtree-images/ls1.gif) no-repeat 0px 6px;
margin-bottom: 8px;
padding-left: 15px;
}
/*
footer_bot
*/
#footer_bot{
padding: 25px;
text-align: center;
font-size: 10px;
}
/*=*/
/* Nivo Slider Demo
/* November 2010
/* By: Gilbert Pellegrom
/* http://dev7studios.com
/*=*/
#slider-wrapper {
background:url(ftdtree-images/top.jpg) no-repeat;
width:980px;
height: 246px;
margin:0 auto;
}
#slider {
position:relative;
width: 899px;
height: 225px;
background:url(ftdtree-images/loading.gif) no-repeat 50% 50%;
}
#slider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
#slider a {
border:0;
display:block;
}
.nivo-controlNav {
position:absolute;
left:260px;
bottom:-42px;
display: none;
}
.nivo-controlNav a {
display:block;
width:22px;
height:22px;
background:url(ftdtree-images/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}
.nivo-controlNav a.active {
background-position:0 -22px;
}
.nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(ftdtree-images/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
}
a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}
a.nivo-prevNav {
left:15px;
}
.nivo-caption {
text-shadow:none;
font-family: Helvetica, Arial, sans-serif;
}
.nivo-caption a {
color:#efe9d1;
text-decoration:underline;
}
</style>
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
</head>
<body>
<div id="grad_bg"> </div>
<div id="wrap">
<div id="logo">
<h1><a href="#">ftdtree</a></h1>
<a href="#"><small>Small Company Slogan Goes Here</small></a>
</div>
<div id="content_bg">
<div id="header">
<div id="wrapper">
<div id="slider-wrapper">
<div id="slider" class="nivoSlider">
<img src="ftdtree-images/header.jpg" alt="" />
<img src="ftdtree-images/header2.jpg" alt=""/>
<img src="ftdtree-images/header3.jpg" alt="" />
</div>
</div>
</div>
<script type="text/javascript" src="lib/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="lib/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
</div>
<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 class="clear"></div>
</div>
<div id="content_white">
<div class="content_column_box">
<div class="content_column1">
<h2>Sed velit augue, tristique eu adipiscing id, rhoncus a arcu.</h2>
<div class="img_bor1">
<div class="img_bor2">
<img src="ftdtree-images/img1.jpg" alt="" title="" />
</div>
</div>
<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</p>
</div>
<div class="content_column2">
<h2>Aenean vulputate venenatis leo ac semper</h2>
<div class="img_bor1">
<div class="img_bor2">
<img src="ftdtree-images/img2.jpg" alt="" title="" />
</div>
</div>
<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 </p>
</div>
<div class="content_column3">
<h2>Mauris nibh ante, mattis in consectetur</h2>
<div class="img_bor1">
<div class="img_bor2">
<img src="ftdtree-images/img3.jpg" alt="" title=""/>
</div>
</div>
<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. Suspend</p>
</div>
<div class="clear"></div>
</div>
<div id="content_bot">
<div id="con_bot_bor1">
<div id="con_bot_bor2">
<h2>Sed velit augue, tristique eu adipiscing id, rhoncus a arcu.</h2>
<div class="content_column_box">
<div class="content_column1">
<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</p>
</div>
<div class="content_column2">
<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 </p>
</div>
<div class="content_column3">
<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 </p>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
</div>
<div id="footer_top">
<div id="footer_column1">
<h3>Recent posts</h3>
<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">
<h3>Share with Others</h3>
<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">
<h3>Useful Resources</h3>
<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>
<div id="footer_bot">
<p>Copyright 2011. <!-- Do not remove -->Designed by <a href="http://www.metamorphozis.com/free_templates/free_templates.php" title="Free Web Templates">Free Web Templates</a>, coded 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