ftdwood
<!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 Templates</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<script type="text/javascript" src="lib/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="lib/jquery.tools.js"></script>
<script type="text/javascript" src="lib/jquery.custom.js"></script>
<style type='text/css'>
/*
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(ftdwood-images/bg.jpg) center top repeat-x #6E2E00;
line-height: 16px;
}
#main {
width: 852px;
margin: 0px auto;
background:url(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(ftdwood-images/but.jpg) 0px 0px no-repeat;
}
.but {
}
#buttons a:hover {
text-decoration: none;
background: url(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(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(ftdwood-images/circl.gif) left top no-repeat;
height: 30px;
width: 30px;
margin: 0px 10px 0px 0px;
float:right; }
.circl:hover {
background:url(ftdwood-images/circl_hov.gif) left top no-repeat; }
.yellow_top { background: url(ftdwood-images/cont_top.jpg) left top no-repeat;}
.yellow_bot { background: url(ftdwood-images/cont_bot.jpg) right bottom no-repeat;
padding: 14px 14px 0px 14px;}
.box_home {
float: left;
width: 236px;
}
.bg_grad {background: url(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(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(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(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(ftdwood-images/razd_bot.gif) bottom repeat-x;
}
.b_col2 {
float: left;
margin-left: 15px;
line-height: 25px;
background:url(ftdwood-images/razd_bot.gif) bottom repeat-x;
}
.b_col3 {
float: left;
margin-left: 15px;
text-align: left;
}
.col_bg { background: url(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(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(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(ftdwood-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(ftdwood-images/circl_hov.gif) no-repeat scroll right top}
.header1
{
width: 850px; height: 274px;
background: url(ftdwood-images/top.jpg) no-repeat;
}
.header2
{
width: 850px; height: 274px;
background: url(ftdwood-images/top2.jpg) no-repeat;
}
.header3
{
width: 850px; height: 274px;
background: url(ftdwood-images/top3.jpg) no-repeat;
}
.header4
{
width: 850px; height: 274px;
background: url(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;}
</style>
</head>
<body>
<div id="main">
<!-- header begins -->
<div id="header">
<div id="logo">
<a href="#">ftdwood</a>
<h3><a href="#">Small Company Slogan Goes Here</a></h3>
</div>
</div>
<!-- header ends -->
<!-- content begins -->
<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> <!-- item -->
<div class="item">
<div class="header2"></div>
</div> <!-- item -->
<div class="item">
<div class="header3"></div>
</div> <!-- item -->
<div class="item">
<div class="header4"></div>
</div> <!-- item -->
</div> <!-- items -->
</div> <!-- scrollable -->
</div>
<div class="circl_all">
<div class="navi"></div> <!-- create automatically the point dor the navigation depending on the numbers of items -->
</div>
<div class="yellow_top">
<div class="yellow_bot">
<div class="box_home_bg">
<div class="box_home bg_grad">
<img src="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="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="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>
</div>
<div style=" height: 30px;"></div>
<!-- bottom begin -->
<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="ftdwood-images/fu_i1.png" class=" fu_i" alt="" /><a href="#">Subscribe to Blog</a></li>
<li><img src="ftdwood-images/fu_i2.png" class=" fu_i" alt="" /><a href="#">Be a fan on Facebook</a></li>
<li><img src="ftdwood-images/fu_i3.png" class=" fu_i" alt="" /><a href="#">RSS Feed</a></li>
<li><img src="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>
<!-- bottom end -->
</div>
</div>
<div style="clear: both; height: 1px;"></div>
</div>
<!-- content ends -->
<!-- footer begins -->
<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>
<!-- footer ends -->
</div>
</body>
</html>
Related examples in the same category