ftdspace
<!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
*/
*
{
border: 0;
margin: 0;
}
img
{
border: 0px;
}
body{
font: 12px Arial, Helvetica, sans-serif;
color: #ffffff;
background: url(ftdspace-images/bg.jpg) center top repeat-x #051628;
line-height: 16px;
}
.bg_top { background: url(ftdspace-images/bg_top.gif) top repeat-x;}
#main {
width: 958px;
margin: 0px auto;
background:url(ftdspace-images/main.jpg) right top no-repeat;}
#header {
height: 163px;
}
#logo {
padding: 33px 0px 0px 29px;
}
#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: 55px;
margin-left: 0px;
padding-right: 30px;
}
#buttons a {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: 100;
display: block;
float: right;
text-decoration: none;
color: #000000;
text-align: center;
padding-top: 17px;
height: 38px;
width: 130px;
background: url(ftdspace-images/but.gif) top repeat-x ;
}
.but {
}
#buttons a:hover {
text-decoration: none;
background: none ;
}
.but_r { width: 2px;
background: url(ftdspace-images/but_r.gif) left repeat-y;
height: 55px;
float:right;}
#content{
background: #3B4774;
padding: 0px 29px 0px 29px;
}
.top {
height: 254px;
padding-top: 29px;
background:url(ftdspace-images/top.jpg) 0px 29px no-repeat;}
.h_bg { border: 1px solid #94A5C1;
background: #222C3B;
width: 278px;
height: 42px;}
.h_bg2 { border: 1px solid #94A5C1;
background: #222C3B;
width: 432px;
height: 42px;
padding-left: 20px;}
.img_h { margin: 7px 15px 0px 20px;
float: left;}
.box_home {
float: left;
width: 280px;
background: url(ftdspace-images/box_home.png) top repeat-x;
}
.box_home_text {background: url(ftdspace-images/box_home_text.jpg) top repeat-x;
padding: 10px 20px 0px 20px;}
.box_home_bg {
padding: 0px 0px 0px 0px;
border-bottom: 1px solid #94A5C1;
}
.left { width: 454px;
float: left;}
.right { width: 415px;
float:right;}
.left_text { padding: 10px 20px 14px 20px;
background:url(ftdspace-images/left_text.jpg) left top no-repeat; }
.float_left {float:left;}
.razd_v { background:url(ftdspace-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: 10px 0px 0px 0px;
line-height: 20px;
}
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: #ffffff;
font-weight: bold;
background: url(ftdspace-images/read.png) left top no-repeat;
}
.read:hover {
font-size:12px;
text-decoration: none;
}
.span_dat {
color: #002380;
text-decoration: underline;}
#bottom {
width: 100%;
background: url(ftdspace-images/bottom_bot.gif) left bottom 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: #ffffff;
font-weight: 100;
line-height: 20px;
}
.b_col1 {
float: left;
margin-left: 0px;
width: 200px;
padding: 0px 0px 0px 80px;
}
.b_col2 {
float: left;
margin-left: 30px;
width: 240px;
padding-left: 40px;
}
.b_col3 {
float: left;
margin-left: 30px;
text-align: left;
width: 210px;
padding-left: 70px;
}
.col_bg { background: url(ftdspace-images/col_bg.gif) left top no-repeat;
}
.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:#ffffff;
text-decoration: none;
}
.b_col3 li a:hover {
text-decoration: underline;
}
.fu_i {
padding: 0px 14px 0px 0px;
vertical-align: middle ;
}
.spis {
list-style:none;
padding: 0px 0px 0px 0px;}
.spis li {
padding: 8px 0px 0px 16px;
background: url(ftdspace-images/fish2.gif) 0px 14px no-repeat;
}
.spis a:hover {
text-decoration:underline;
}
.spis a {
color:#ffffff;
text-decoration:none;
font-weight: 100;}
.lh { line-height: 25px;}
#footer{
height: 60px;
font-size: 10px;
color: #ffffff;
text-align: center;
padding: 20px 0px 0px 0px;
background: url(ftdspace-images/footer.jpg) 0px 15px no-repeat;
}
#footer a{
color: #ffffff;
font-size: 10px;
text-decoration: none;
}
#footer a:hover{
color: #ffffff;
font-size: 10px;
text-decoration: underline;
}
/*=*/
/* Nivo Slider Demo
/* November 2010
/* By: Gilbert Pellegrom
/* http://dev7studios.com
/*=*/
#slider-wrapper {
background:url(ftdspace-images/top.jpg) no-repeat;
width:980px;
height: 246px;
margin:0 auto;
}
#slider {
position:relative;
width: 899px;
height: 225px;
background:url(ftdspace-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(ftdspace-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(ftdspace-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 class="bg_top">
<div id="main">
<!-- header begins -->
<div id="header">
<div id="buttons">
<div class="but_r"></div>
<a href="index.html" class="but" title="">Contact us</a><div class="but_r"></div>
<a href="index.html" class="but" title="">About us</a><div class="but_r"></div>
<a href="index.html" class="but" title="">Gallery</a><div class="but_r"></div>
<a href="index.html" class="but" title="">Blog</a><div class="but_r"></div>
<a href="index.html" class="but" title="">Home</a><div class="but_r"></div>
</div>
<div id="logo">
<a href="#">ftdspace</a>
<h3><a href="#"><small>Small Company Slogan Goes Here</small></a></h3>
</div>
</div>
<!-- header ends -->
<!-- content begins -->
<div id="content">
<div class="top">
<div id="wrapper">
<div id="slider-wrapper">
<div id="slider" class="nivoSlider">
<img src="ftdspace-images/top.jpg" alt="" />
<img src="ftdspace-images/top2.jpg" alt=""/>
<img src="ftdspace-images/top3.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 class="box_home_bg">
<div class="box_home">
<div class="h_bg">
<img src="ftdspace-images/img1.gif" class="img_h" alt="" />
<h1>Lorem ipsum dolor. </h1>
</div>
<div style="height:2px;"></div>
<div class="box_home_text">
<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>
<div class="float_left" style="width: 30px; height: 10px;"></div>
<div class="box_home">
<div class="h_bg">
<img src="ftdspace-images/img2.gif" class="img_h" alt="" />
<h1>Vestibulum vel lacus.</h1>
</div>
<div style="height:2px;"></div>
<div class="box_home_text">
<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>
<div class="float_left" style="width: 30px; height: 10px;"></div>
<div class="box_home">
<div class="h_bg">
<img src="ftdspace-images/img3.gif" class="img_h" alt="" />
<h1>Cras aliquam quam. </h1>
</div>
<div style="height:2px;"></div>
<div class="box_home_text">
<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>
<div style="clear: both; height: 15px;"></div>
</div>
<div style="height: 15px;"></div>
<div>
<div class="left">
<div class="h_bg2">
<h1>Praesent ipsum neque</h1>
</div>
<div style="height:2px"></div>
<div class="left_text">
<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.
<div style="height:25px">
<a href="#" class="read">read more</a>
</div>
</div>
</div>
<div class="right">
<img src="ftdspace-images/img4.jpg" alt="" />
</div>
<div style="clear: both;"></div>
</div>
<div style=" height: 30px;"></div>
<!-- bottom begin -->
<div id="bottom">
<div class="b_col1 col_bg">
<h1>Lorem ipsum dolor. </h1>
<div style="height:20px;"></div>
<ul class="spis">
<li><a href="#">Service Number 1</a></li>
<li><a href="#">Service Number 2</a></li>
<li><a href="#">Service Nudmber 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">
<h1>Contact Information</h1>
<div style="height:25px;"></div>
<div class="lh">
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>
<div class="b_col3 col_bg">
<h1>Follow Us</h1>
<div style="height:25px;"></div>
<ul>
<li><img src="ftdspace-images/fu_i1.png" class=" fu_i" alt="" /><a href="#">Subscribe to Blog</a></li>
<li><img src="ftdspace-images/fu_i2.png" class=" fu_i" alt="" /><a href="#">Be a fan on Facebook</a></li>
<li><img src="ftdspace-images/fu_i3.png" class=" fu_i" alt="" /><a href="#">RSS Feed</a></li>
<li><img src="ftdspace-images/fu_i4.png" class=" fu_i" alt="" /><a href="#">Follow us on Twitter</a></li>
</ul>
</div>
<div style="clear: both; height: 20px"></div>
</div>
<!-- bottom end -->
<div style="clear: both; height: 30px;"></div>
</div>
<!-- content ends -->
<!-- footer begins -->
<div id="footer">
<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>
<!-- footer ends -->
</div>
</div>
</body>
</html>
Related examples in the same category