ftdvivid
<!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: #ffffff;
background: url(ftdvivid-images/bg.jpg) center top repeat-x #000000;
line-height: 16px;
}
#main {
width: 986px;
margin: 0px auto;
background:url(ftdvivid-images/main.jpg) right top no-repeat;}
#header {
height: 166px;
}
#logo {
padding: 35px 0px 0px 30px;
}
#logo a {
text-decoration: none;
font-size: 14px;
font-weight:bold;
color: #ffffff;
}
#logo H3 a{
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-align: left;
}
#buttons{
text-align:center;
height: 50px;
margin-left: 0px;
background: url(ftdvivid-images/buttons.jpg) center top no-repeat;
padding-left: 0px;
}
#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: 18px;
height: 32px;
width: 197px;
}
.but {
}
#buttons a:hover {
text-decoration: none;
background:url(ftdvivid-images/but_hov.png) left top repeat-x;
height: 32px;}
.but_razd { width: 3px;
height: 40px;
float:left;}
.cont_top { background: url(ftdvivid-images/cont_top.png) top no-repeat;
height: 12px;}
.cont_bot { background: url(ftdvivid-images/cont_bot.png) bottom no-repeat;
height: 12px;}
#content{
background: #000000;
padding: 0px 0px 0px 0px;
border: 13px solid #FFFFFF;
}
.top_img {
height: 275px;
background:url(ftdvivid-images/top_img.jpg) left top no-repeat;}
.circl_all {
background:;
height: 45px;
vertical-align:top;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;}
.circl { background: url(ftdvivid-images/circl.jpg) left top no-repeat;
height: 48px;
width: 45px;
margin: 0px 10px 0px 0px;
float:right; }
.circl:hover {
background:url(ftdvivid-images/circl_hov.jpg) left top no-repeat; }
.box_home {
float: left;
padding: 0px 0px 0px 0px;
width: 292px;}
.box_home_bg {
padding: 0px 0px 0px 14px;
border-bottom: 1px solid #ffffff;}
.text { padding: 14px 14px 14px 14px;}
.float_left {float:left;}
.razd_v { background:url(ftdvivid-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: none;
font-size:12px;
color: #FF0000;
background: url(ftdvivid-images/read.png) left top no-repeat;
}
.read:hover {
font-size:12px;
text-decoration: underline;
}
#right{
float: right;
width: 589px;
margin-right: 0px;
}
.span_dat {
color: #002380;
text-decoration: underline;}
#bottom {
width: 100%;
background:url(ftdvivid-images/bottom.jpg) left top no-repeat ;
color:#FFFFFF;
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: #000000;
font-weight: 100;
line-height: 20px;
}
.b_col1 {
width: 136px;
height: 204px;
float: left;
margin-left: 40px;
background:url(ftdvivid-images/razd_bot.gif) bottom repeat-x;
}
.b_col2 {
width: 220px;
height: 204px;
float: left;
margin-left: 45px;
line-height: 25px;
background:url(ftdvivid-images/razd_bot.gif) bottom repeat-x;
}
.b_col3 {
width: 238px;
height: 204px;
float: left;
margin-left: 45px;
text-align: left;
}
.b_col4 {
width: 153px;
height: 204px;
float: left;
margin-left: 45px;
text-align: left;
}
.b_col4 ul {
list-style:none;
padding: 0px 0px 0px 0px;}
.b_col4 li {
padding: 8px 0px 2px 0px;
background: none;
}
.b_col4 li a {
color:#FFFFFF;
text-decoration: none;
}
.b_col4 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(ftdvivid-images/fish2.gif) 0px 14px no-repeat;
}
.b_col1 ul a:hover {
text-decoration:underline;
}
.b_col1 ul a {
color:#ffffff;
text-decoration:none;
font-weight: 100;}
#footer{
height: 60px;
font-size: 12px;
color: #ffffff;
text-align: center;
padding: 20px 0px 0px 0px;
background: url(ftdvivid-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: 960px; height:275px;}
.item img {float:left;}
.item h2 { border:none; margin-bottom:15px;}
.scrollable { position:relative; overflow:hidden; width: 960px; height: 275px;}
.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:5px 0; padding-right: 20px;}
.navi a { width: 48px; cursor:pointer; height: 40px; float:left; margin:0 0 0 3px; background:url(ftdvivid-images/circl.jpg) 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(ftdvivid-images/circl_hov.jpg) no-repeat scroll right top}
.header1
{
width: 960px; height: 275px;
background: url(ftdvivid-images/top_img.jpg) no-repeat;
}
.header2
{
width: 960px; height: 275px;
background: url(ftdvivid-images/top_img2.jpg) no-repeat;
}
.header3
{
width: 960px; height: 275px;
background: url(ftdvivid-images/top_img3.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="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 id="logo">
<a href="#">ftdvivid</a>
<h3><a href="#">Small Company Slogan Goes Here</a></h3>
</div>
</div>
<!-- header ends -->
<!-- content begins -->
<div id="content">
<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> <!-- 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 style="height:10px"></div>
<div class="box_home_bg">
<div class="box_home">
<img src="ftdvivid-images/img11.gif" class="img_l" alt="" />
<div style="height:4px"></div>
<h1>Our team.</h1>
<div style="height:3px; clear:both"></div>
<img src="ftdvivid-images/img14.jpg" alt="" />
<div style="height:6px"></div>
<b>Ut tellus erat, ultricies sed cursus sit amet. </b><br />
Vestibulum vel nibh. Sed suscipit lobortis massa, imperdiet feugiat ante bibendum et.
<div style="height:30px">
<a href="#" class="read">read more</a>
</div>
</div>
<div class="float_left" style="width: 28px; height: 10px;"></div>
<div class=" box_home">
<img src="ftdvivid-images/img12.gif" class="img_l" alt="" />
<div style="height:4px"></div>
<h1>Perfect proposition. </h1>
<div style="height:3px; clear:both"></div>
<img src="ftdvivid-images/img15.jpg" alt="" />
<div style="height:6px"></div>
<b>Aliquam erat volutpat. </b><br />
Donec lobortis bibendum pellentesque. Sed lobortis, arcu sit amet tempus interdum.
<div style="height:30px">
<a href="#" class="read">read more</a>
</div>
</div>
<div class="float_left" style="width: 28px; height: 10px;"></div>
<div class=" box_home">
<img src="ftdvivid-images/img13.gif" class="img_l" alt="" />
<div style="height:4px"></div>
<h1>Suspendisse vitae laoreet.</h1>
<div style="height:3px; clear:both"></div>
<img src="ftdvivid-images/img16.jpg" alt="" />
<div style="height:6px"></div>
<b>Integer malesuada porttitor elit</b><br />
Donec vel nulla a enim iaculis tempus. Nullam quis dolor suscipit nulla.
<div style="height:30px">
<a href="#" class="read">read more</a>
</div>
</div>
<div style="clear: both"></div>
</div>
<div class="text">
<h1>Praesent ipsum neque</h1>
<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>
<div style="height:30px">
<a href="#" class="read">read more</a>
</div>
<!-- bottom begin -->
<div id="bottom">
<div class="b_col1">
<h2>Services</h2>
<div style="height:15px"></div>
<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">
<h2>Contact Information</h2>
<div style="height:15px"></div>
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">
<h2>Recent Posts</h2>
<div style="height:15px"></div>
<b>Donec lobortis bibendum pellentesque.</b> Sed lobortis, arcu sit amet tempus interdum, dui sem convallis turpis, sed eleifend arcu urna sit amet lacus.<br /><br />
<b>Nunc justo est, suscipit at laoreet vel,</b> placerat eget velit. Quisque iaculis facilisis dui, sed sagittis sapien aliquam tincidunt.
</div>
<div class="b_col4">
<h2>Follow Us</h2>
<div style="height:15px"></div>
<ul>
<li><img src="ftdvivid-images/fu_i1.gif" class=" fu_i" alt="" /><a href="#"><strong>Subscribe to Blog</strong></a></li>
<li><img src="ftdvivid-images/fu_i2.gif" class=" fu_i" alt="" /><a href="#"><strong>Be a fan on Facebook</strong></a></li>
<li><img src="ftdvivid-images/fu_i3.gif" class=" fu_i" alt="" /><a href="#"><strong>RSS Feed</strong></a></li>
<li><img src="ftdvivid-images/fu_i4.gif" class=" fu_i" alt="" /><a href="#"><strong>Follow us on Twitter</strong></a></li>
</ul>
</div>
<div style="clear: both; height:40px"></div>
</div>
<!-- bottom end -->
<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