freecss_sky
<!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>MyFreeCssTemplates.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;
background: #ffffff ;
line-height: 18px;
}
#bg_top { background: url(freecss_sky-images/bg_top.jpg) center top no-repeat ;}
#main {
width: 900px;
margin: 0px auto;
background:url(freecss_sky-images/main.jpg) right top no-repeat;}
#header {
height: 141px;
}
#logo {
padding: 65px 0px 0px 0px;
width: 242px;
float: left;
}
#logo H2 {
font-family: Arial, Helvetica, sans-serif;
color:#06061C;
font-size:18px;
background: no-repeat;
}
#logo a {
text-decoration: none;
font-size: 14px;
color: #06061C;
font-weight:bold;
}
#logo H2 a{
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
font-weight:bold;
text-align:left;
}
#buttons{
text-align:center;
height: 50px;
background: url(freecss_sky-images/buttons.png) left top no-repeat;
padding: 55px 0px 0px 0px;
float: right;
width: 600px;
}
#buttons a {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: 100;
display: block;
float: left;
text-decoration: none;
color: #06061C;
text-align: left;
padding: 15px 0px 0px 15px;
height: 35px;
border-left: 1px solid #0B236B;
}
.but {
width: 104px;
}
#buttons .but:hover {
text-decoration:underline;
}
.top { height:239px;
padding-top: 20px;
background: url(freecss_sky-images/top.jpg) left top no-repeat;
color: #06061C;}
.top_1 { width: 432px;
height: 221px;
float: left;
margin: 0px 0px 0px 20px;
background: url(freecss_sky-images/top_1.jpg) left top no-repeat; }
.top_2 { width: 430px;
height: 221px;
float: left;
margin: 0px 0px 0px 20px;
background: url(freecss_sky-images/top_2.jpg) left top no-repeat; }
.top_3 { width: 432px;
height: 221px;
float: left;
margin: 0px 0px 0px 20px;
background: url(freecss_sky-images/top_3.jpg) left top no-repeat; }
.top_r { width: 410px;
float: right;
padding-left: 20px;
}
.circl_all {
vertical-align:top;
text-align:center;
padding: 7px 0px 7px 0px; }
.circl {
height: 17px;
width: 17px;
margin: 0px 0px 0px 0px;
float: left;
display:block;
background: url(freecss_sky-images/circl.gif) left top no-repeat; }
.circl:hover {
background: url(freecss_sky-images/circl_hover.gif) left top no-repeat; }
.circl_razd { width:25px;}
#content{
padding: 0px 0px 0px 0px;
color: #000000;
}
.box {
float: left;
width: 210px;
}
.box_r { width: 20px;
height: 10px;
float: left;}
.all_box {background: url(freecss_sky-images/all_box.gif) left repeat-y; }
.img_l { float:left;
margin: 5px 16px 3px 0px;
}
.img_r { float: right;
margin: 9px 10px 3px 10px;
}
h1{
font-family: Arial, Helvetica, sans-serif;
font-size:18px;
font-weight: 100;
color: #06061C;
text-align: left;
padding: 0px 0px 0px 0px;
line-height:normal;
}
h3{
font-family: Arial, Helvetica, sans-serif;
font-size:24px;
font-weight: 100;
color: #0B236B;
text-align: center;
padding: 11px 0px 11px 0px;
line-height:normal;
background:url(freecss_sky-images/h2.gif) top repeat-x;
}
.read {
font-size:12px;
color: #ffffff;
text-decoration: none;
display:block;
line-height: 13px;
width: 61px;
height: 14px;
text-align: center;
float: right;
background: #06061C;
}
.read:hover {
font-size:12px;
text-decoration: underline;
}
.read_bot {
font-size:12px;
color: #06061C;
text-decoration: none;
display:block;
line-height: 13px;
width: 61px;
height: 14px;
text-align: center;
float: right;
background: #ffffff;
}
.read_bot:hover {
font-size:12px;
text-decoration: underline;
}
.ban_top { background: url(freecss_sky-images/ban_top.gif) left top no-repeat #9FC4D6;
width: 690px;
margin: 0px auto;
}
.ban_bot { background:url(freecss_sky-images/ban_bot.gif) left bottom no-repeat;
padding: 10px 20px 10px 20px;}
#bottom_bot {
background: #08082A ;
color: #FFFFFF;
}
#bottom {
}
#bottom_all { width: 900px;
margin: 0px auto;
background: url(freecss_sky-images/bottom_all.gif) left 5px repeat-x}
#bottom h1 {
color: #06061C;
font-size: 18px;
font-weight: 100;
text-align: left;
display: block;
padding: 15px 0px 10px 0px;
border-bottom: 1px solid #9FC4D6;
}
#b_col1 {
width: 200px;
float: left;
margin-left: 20px;
}
#b_col2 {
width: 200px;
float: left;
margin-left: 20px;
}
#b_col3 {
width: 200px;
float: left;
margin-left: 20px;
text-align: left;
}
#b_col4 {
width: 200px;
float: left;
margin-left: 20px;
text-align: left;
}
.box_us {
width: 244px;
background: url(freecss_sky-images/box_us.gif) 0px bottom repeat-x;
}
.box_us_l {
width: 27px;
float: left;
padding-top:3px;}
.box_us_r {
width: 217px;
float: left;}
.spis_bot {
list-style:none;
padding: 0px 0px 0px 0px;}
.spis_bot li {
padding: 7px 0px 0px 18px;
background: url(freecss_sky-images/spis_bot.gif) 0px 12px no-repeat;
}
.spis_bot a {
color:#ffffff;
text-decoration:none;
font-weight: 100;
display: block;
}
.spis_bot a:hover {
text-decoration: underline;
}
.fu_i {
padding: 0px 14px 0px 0px;
vertical-align: middle ;
}
.spis_fu {
list-style:none;
padding: 0px 0px 0px 0px;}
.spis_fu li {
padding: 8px 0px 2px 0px;
background: none;
}
.spis_fu li a {
color:#FFFFFF;
text-decoration: none;
font-weight: bold;}
.spis_fu li a:hover {
text-decoration: underline;
}
#footer_l {
float: left;
text-align:left;
width: 387px;
padding-left: 20px;
}
#footer_r {
float: left;
text-align: right;
width: 500px;
}
#footer{
height: 55px;
font-size: 10px;
color: #ffffff;
text-align: center;
padding: 18px 0px 0px 0px;
border-top: 1px solid #9FC4D6;
}
#footer a{
color: #ffffff;
font-size: 10px;
text-decoration: none;
}
#footer a:hover{
color: #ffffff;
text-decoration: underline;
}
.lh {
line-height: 22px;
}
#buttons_f{
text-align:center;
height: 30px;
background: url(freecss_sky-images/buttons.png) left top no-repeat;
padding: 5px 0px 0px 0px;
width: 475px;
float:right;
}
#buttons_f a {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: 100;
display: block;
float: left;
text-decoration: none;
color: #ffffff;
text-align: center;
padding: 5px 0px 0px 0px;
height: 25px;
}
.but_f {
width: 90px;
}
#buttons_f .but_f:hover {
text-decoration:underline;
color: #9FC4D6;
font-size: 12px;
}
.razd_but_f { height: 30px;
border-left: 1px solid #9FC4D6;
float:left;
}
/*
scroll styles here
*/
.item { width: 900px; height: 259px;}
.item img {float:left;}
.item h2 { border:none; margin-bottom:15px;}
.scrollable { position:relative; overflow:hidden; width: 900px; height: 250px;}
.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; margin:5px 0; padding-left: 420px;}
.navi a { width: 17px; cursor:pointer; height: 17px; float:left; margin:0 0 0 3px; background:url(freecss_sky-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(freecss_sky-images/circl_hover.gif) no-repeat scroll right top}
.header1
{
width: 900px; height: 259px;
}
.header2
{
width: 900px; height: 259px;
}
.header3
{
width: 900px; height: 259px;
}
/* ------------------------------------------------------------------------
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>
<script type="text/javascript" src="lib/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="lib/jquery.tools.js"></script>
</head>
<body>
<div id="bg_top">
<div id="main">
<!-- header begins -->
<div id="header">
<div id="buttons">
<a href="index.html" class="but but_t" 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="#">freecss_sky</a>
<h2><a href="#"><small>Small Company Slogan Goes Here</small></a></h2>
</div>
</div>
<!-- header ends -->
<div class="top">
<div class="scrollable">
<div class="items">
<div class="item">
<div class="header1">
<div class="top_1"></div>
<div class="top_r">
<div><h1>Vestibulum vel lacus eget nisl.</h1>
<b>Nulla mollis, magna quis feugiat faucibus.</b><br />
Risus lorem lacinia justo, et adipiscing tortor lacus in nunc. Duis in tellus vel ipsum bibendum gravida. Nunc eget mi id risus tempor rhoncus. Integer lectus sapien, pulvinar non ornare quis, vulputate vel eros. <br /><br />
<b>Cras aliquam quam eget odio 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. Phasellus hendrerit erat ac urna tempor luctus. Pellentesque in tellus neque.</div>
<div style="height:14px; width: 400px;">
<a href="#" class="read">read more</a>
</div>
</div>
</div>
</div> <!-- item -->
<div class="item">
<div class="header2">
<div class="top_2"></div>
<div class="top_r">
<div><h1>Vestibulum vel lacus eget nisl.</h1>
<b>Nulla mollis, magna quis feugiat faucibus.</b><br />
Risus lorem lacinia justo, et adipiscing tortor lacus in nunc. Duis in tellus vel ipsum bibendum gravida. Nunc eget mi id risus tempor rhoncus. Integer lectus sapien, pulvinar non ornare quis, vulputate vel eros. <br /><br />
<b>Cras aliquam quam eget odio 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. Phasellus hendrerit erat ac urna tempor luctus. Pellentesque in tellus neque.</div>
<div style="height:14px; width: 400px;">
<a href="#" class="read">read more</a>
</div>
</div>
</div>
</div> <!-- item -->
<div class="item">
<div class="header3">
<div class="top_3"></div>
<div class="top_r">
<div><h1>Vestibulum vel lacus eget nisl.</h1>
<b>Nulla mollis, magna quis feugiat faucibus.</b><br />
Risus lorem lacinia justo, et adipiscing tortor lacus in nunc. Duis in tellus vel ipsum bibendum gravida. Nunc eget mi id risus tempor rhoncus. Integer lectus sapien, pulvinar non ornare quis, vulputate vel eros. <br /><br />
<b>Cras aliquam quam eget odio 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. Phasellus hendrerit erat ac urna tempor luctus. Pellentesque in tellus neque.</div>
<div style="height:14px; width: 400px;">
<a href="#" class="read">read more</a>
</div>
</div>
</div>
</div> <!-- item -->
</div> <!-- items -->
</div> <!-- scrollable -->
<div class="navi"></div> <!-- create automatically the point dor the navigation depending on the numbers of items -->
<div style="clear: both"></div>
</div>
<div style="clear: both; height: 10px"></div>
<!-- content begins -->
<div id="content">
<h3>Praesent ipsum neque, volutpat vel tincidunt quis, auctor vitae leo.?</h3>
<div style="height:25px"></div>
<div class="all_box">
<div class="box" >
<img src="freecss_sky-images/img1.jpg" alt="" />
<div style="height:10px"></div>
<h1>Pellentesque vitae </h1>
<div style="height:10px"></div>
<b>Vestibulum ante ipsum primis</b><br />
In faucibus orci luctus et ultrices posuere cubilia Curae; Aenean sed
<div style="height:5px"></div>
<div style="height:14px;">
<a href="#" class="read">read more</a>
</div>
</div>
<div class="box_r" ></div>
<div class="box" >
<img src="freecss_sky-images/img2.jpg" alt="" />
<div style="height:10px"></div>
<h1>Nam nisl sapien, gravida non rhoncus sed. </h1>
<div style="height:10px"></div>
<b>Vestibulum bibendum ante sit</b><br />
Amet libero scelerisque elementum.
<div style="height:5px"></div>
<div style="height:14px;">
<a href="#" class="read">read more</a>
</div>
</div>
<div class="box_r" ></div>
<div class="box" >
<img src="freecss_sky-images/img3.jpg" alt="" />
<div style="height:10px"></div>
<h1>Pellentesque vehicula </h1>
<div style="height:10px"></div>
<b>Sed non scelerisque nibh.</b><br />
Fusce venenatis lobortis nunc, vitae laoreet mi ultricies at.
<div style="height:5px"></div>
<div style="height:14px;">
<a href="#" class="read">read more</a>
</div>
</div>
<div class="box_r" ></div>
<div class="box" >
<img src="freecss_sky-images/img4.jpg" alt="" />
<div style="height:10px"></div>
<h1>Proin tellus risus </h1>
<div style="height:10px"></div>
<b>In lobortis tristique elit.</b><br />
Non fringilla leo adipiscing a. Aenean fringilla sapien ante.
<div style="height:5px"></div>
<div style="height:14px;">
<a href="#" class="read">read more</a>
</div>
</div>
<div style="clear: both"></div>
</div>
<div style="height:20px"></div>
<div class="ban_top">
<div class="ban_bot">
<h1>Maecenas dui nunc, ultricies a hendrerit at, hendrerit quis felis. Proin interdum imperdiet tortor, ut venenatis nulla iaculis ut. Sed felis eros, adipiscing ac.?</h1>
</div>
</div>
<div class="circl_all">
<div style="height:10px"></div>
<div style="height:10px"></div>
</div>
</div>
<!-- content ends -->
</div>
</div>
<!-- bottom begin -->
<div id="bottom_bot">
<div id="bottom">
<div id="bottom_all">
<div id="b_col1">
<h1>Services</h1>
<div style="height:10px"></div>
<ul class="spis_bot">
<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>
<li><a href="#">Service Number 7 </a></li>
</ul>
</div>
<div id="b_col2">
<h1>Follow Us</h1>
<div style="height:15px"></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 id="b_col3">
<h1>Follow Us</h1>
<div style="height:15px"></div>
<b>Donec lobortis bibendum pellen- tesque.</b> Sed lobortis, arcu sit amet tempus interdum, dui sem convallis turpis, sed eleifend arcu urna.<br /><br />
<b>Nunc justo est, suscipit at laoreet vel </b>, placerat eget velit. Quisque iaculis facilisis dui.
<div style="height:5px"></div>
<div style="height:14px;">
<a href="#" class="read_bot">read more</a>
</div>
</div>
<div id="b_col4">
<h1>About Us</h1>
<div style="height:15px"></div>
<ul class="spis_fu">
<li><img src="freecss_sky-images/fu_i1.png" class=" fu_i" alt="" /><a href="#">Subscribe to Blog</a></li>
<li><img src="freecss_sky-images/fu_i2.png" class=" fu_i" alt="" /><a href="#">Be a fan on Facebook</a></li>
<li><img src="freecss_sky-images/fu_i3.png" class=" fu_i" alt="" /><a href="#">RSS Feed</a></li>
<li><img src="freecss_sky-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>
</div>
<!-- footer begins -->
<div id="footer">
<div style=" width: 900px; margin: 0px auto;">
<div id="footer_l">
<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.myfreecsstemplates.com/" title="Free CSS Templates">Free CSS 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 id="buttons_f">
<a href="index.html" class="but_f but_t" title="">Home</a><div class="razd_but_f"></div>
<a href="blog.html" class="but_f" title="">Blog</a><div class="razd_but_f"></div>
<a href="gallery.html" class="but_f" title="">Gallery</a><div class="razd_but_f"></div>
<a href="about_us.html" class="but_f" title="">About us</a><div class="razd_but_f"></div>
<a href="contact_us.html" class="but_f" title="">Contact us</a>
</div>
<div style="clear: both;"></div>
</div>
</div>
<!-- footer ends -->
</div>
<!-- bottom end -->
</body>
</html>
Related examples in the same category