freecss_natural
<!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: url(freecss_natural-images/bg.gif);
line-height: 18px;
color: #585858;
}
#main {
width: 940px;
margin: 0px auto;
padding: 0px 45px 0px 45px;
background:url(freecss_natural-images/main.png) right repeat-y;}
#header {
height: 102px;
}
.line { border-top: 1px solid #585858;}
#logo {
padding: 25px 0px 0px 0px;
width: 250px;
float:left;
}
#logo H2 a{
font-family: Arial, Helvetica, sans-serif;
color:#038760;
font-size:18px;
font-weight: bold;
background: no-repeat;
}
#logo a {
text-decoration: none;
font-size: 14px;
color: #585858;
font-weight: bold;
}
#logo H2 a{
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
font-weight:100;
text-align:left;
}
#buttons{
text-align:center;
height: 42px;
width: 517px;
padding-left: 0px;
background: url(freecss_natural-images/buttons.png) left top no-repeat;
padding: 38px 0px 0px 0px;
float: right;
}
#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;
height: 30px;
text-transform: uppercase;
}
.but {
}
.but_razd { height: 10px;
width: 30px;
float: left;}
#buttons .but:hover {
background: url(freecss_natural-images/but_hover.png) center center no-repeat;
color:#038760;
text-decoration: underline;
}
.but_t {background: url(freecss_natural-images/but_hover.gif) center bottom no-repeat;}
.top { height: 349px;
background: url(freecss_natural-images/top.jpg) left top no-repeat;
width: 940px;
}
.top_left { float: left;
width: 576px;
height: 240px;
}
.top_right { float: right;
width:284px;
height: 243px;
background: url(freecss_natural-images/top_right.png);
padding: 30px 40px 20px 40px;}
.circl_all {
height: 19px;
vertical-align:top;
padding: 290px 0px 0px 40px;}
.circl { background: url(freecss_natural-images/circl.png) left top no-repeat;
height: 19px;
width: 19px;
margin: 0px 10px 0px 0px;
float: left;
display:block;}
.circl:hover {
background:url(freecss_natural-images/circl_hov.png) left top no-repeat; }
#content{
background: url(freecss_natural-images/content.png);
padding: 0px 0px 0px 0px;
}
.box {
float: left;
width: 172px;
height: 170px;
border: 1px solid #585858;
padding: 15px 15px 15px 15px;
}
.img_l { float:left;
margin: 3px 14px 3px 0px;
}
.img_r { float: right;
margin: 9px 10px 3px 10px;
}
h1{
font-size:24px;
font-weight: 100;
color: #ffffff;
text-align: left;
padding: 0px 0px 0px 0px;
line-height:normal;
}
h2{
font-size:18px;
font-weight: 100;
color: #000000;
text-align: left;
padding: 0px 0px 0px 0px;
line-height:normal;
}
h3{
font-size:24px;
font-weight: 100;
color: #000000;
text-align: left;
padding: 0px 0px 0px 0px;
line-height:normal;
}
.more {
font-size:12px;
color: #ffffff;
text-decoration: underline;
}
.more:hover {
font-size:12px;
text-decoration: none;
}
.more2 {
font-size:12px;
color: #038760;
text-decoration: underline;
}
.more2:hover {
font-size:12px;
text-decoration: none;
}
.span_cont { color: #038760;
font-weight: bold; }
#bottom {
background: url(freecss_natural-images/bottom.gif) left top repeat-y;
color: #585858;
}
#bottom h1 {
color: #000000;
font-size: 18px;
font-weight: 100;
text-align: left;
padding: 15px 0px 0px 0px;
}
#b_col1 {
width: 144px;
float: left;
margin-left: 16px;
}
#b_col2 {
width: 208px;
float: left;
margin-left: 73px;
}
#b_col3 {
width: 158px;
float: left;
margin-left: 92px;
text-align: left;
}
#b_col4 {
width: 165px;
float: left;
margin-left: 80px;
text-align: left;
}
.spis_bot {
list-style:none;
padding: 0px 0px 0px 0px;}
.spis_bot li {
padding: 7px 0px 0px 18px;
background: url(freecss_natural-images/spis_bot.gif) 0px 12px no-repeat;
}
.spis_bot a {
color:#585858;
text-decoration:none;
font-weight: 100;
display: block;
font-weight: 100;}
.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:#585858;
text-decoration: none;
}
.spis_fu li a:hover {
text-decoration: underline;
}
.a_qn {
font-size:12px;
color: #038760;
font-weight:bold;
text-decoration: none;
}
.a_qn:hover {
font-size:12px;
text-decoration: underline;
}
td { height: 25px;}
#footer{
height: 47px;
font-size: 10px;
color: #000000;
text-align: center;
padding: 13px 0px 0px 0px;
background: url(freecss_natural-images/footer.jpg) 0px 15px no-repeat;
}
#footer a{
color: #000000;
font-size: 10px;
text-decoration: none;
}
#footer a:hover{
color: #000000;
font-size: 10px;
text-decoration: underline;
}
.lh {
line-height: 22px;
}
/*
scroll styles here
*/
.item { width: 940px; height: 439px;}
.item img {float:left;}
.item h2 { border:none; margin-bottom:15px;}
.scrollable { position:relative; overflow:hidden; width: 940px; height: 439px;}
.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: 20px; cursor:pointer; height: 20px; float:left; margin:0 0 0 3px; background:url(freecss_natural-images/circl.png) no-repeat scroll top; display:block; font-size:1px;}
.navi a:hover, .navi a.active { background-position:left top; margin:0 0 0 3px; background:url(freecss_natural-images/circl_hov.png) no-repeat scroll top}
.header1
{
width: 940px; height: 439px;
padding-top: 90px;
background: url(freecss_natural-images/top.jpg) no-repeat;
}
.header2
{
width: 940px; height: 439px;
padding-top: 90px;
background: url(freecss_natural-images/header2.jpg) no-repeat;
}
.header3
{
width: 940px; height: 439px;
padding-top: 90px;
background: url(freecss_natural-images/header3.jpg) no-repeat;
}
.header4
{
width: 940px; height: 439px;
padding-top: 90px;
background: url(freecss_natural-images/header4.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>
<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="main">
<!-- header begins -->
<div id="header">
<div id="logo">
<a href="#">freecss_natural</a>
<h2><a href="#"><small>Small Company Slogan Goes Here</small></a></h2>
</div>
<div id="buttons">
<a href="index.html" class="but but_t" title="">Home</a><div class="but_razd"></div>
<a href="blog.html" class="but" title="">Blog</a><div class="but_razd"></div>
<a href="gallery.html" class="but" title="">Gallery</a><div class="but_razd"></div>
<a href="about_us.html" class="but" title="">About us</a><div class="but_razd"></div>
<a href="contact_us.html" class="but" title="">Contact us</a>
</div>
</div>
<!-- header ends -->
<div class="line"></div>
<div style="height:25px"></div>
<div class="top">
<div class="scrollable">
<div class="items">
<div class="item">
<div class="header1">
<div class="top_left"></div>
<div class="top_right">
<h1>Vestibulum vel lacus eget nisl iaculis interdum.</h1><br />
<span style="color: #C7C5C5; font-size:14px; line-height: 25px; ">Nulla mollis, magna quis feugiat faucibus, risus lorem lacinia justo, et adipiscing tortor lacus in nunc. Duis in tellus vel ipsum biben- dum gravida. Nunc eget mi id risus tempor rhoncus. Integer lectus sapien, pulvinar non ornare quis, vulputate vel eros. </span><a href="#" class="more">more</a>
</div>
<div class="clear"></div>
</div>
</div> <!-- item -->
<div class="item">
<div class="header2">
<div class="top_left"></div>
<div class="top_right">
<h1>Vestibulum vel lacus eget nisl iaculis interdum.</h1><br />
<span style="color: #C7C5C5; font-size:14px; line-height: 25px; ">Nulla mollis, magna quis feugiat faucibus, risus lorem lacinia justo, et adipiscing tortor lacus in nunc. Duis in tellus vel ipsum biben- dum gravida. Nunc eget mi id risus tempor rhoncus. Integer lectus sapien, pulvinar non ornare quis, vulputate vel eros. </span><a href="#" class="more">more</a>
</div>
<div class="clear"></div>
</div>
</div> <!-- item -->
<div class="item">
<div class="header3">
<div class="top_left"></div>
<div class="top_right">
<h1>Vestibulum vel lacus eget nisl iaculis interdum.</h1><br />
<span style="color: #C7C5C5; font-size:14px; line-height: 25px; ">Nulla mollis, magna quis feugiat faucibus, risus lorem lacinia justo, et adipiscing tortor lacus in nunc. Duis in tellus vel ipsum biben- dum gravida. Nunc eget mi id risus tempor rhoncus. Integer lectus sapien, pulvinar non ornare quis, vulputate vel eros. </span><a href="#" class="more">more</a>
</div>
<div class="clear"></div>
</div>
</div> <!-- item -->
<div class="item">
<div class="header4">
<div class="top_left"></div>
<div class="top_right">
<h1>Vestibulum vel lacus eget nisl iaculis interdum.</h1><br />
<span style="color: #C7C5C5; font-size:14px; line-height: 25px; ">Nulla mollis, magna quis feugiat faucibus, risus lorem lacinia justo, et adipiscing tortor lacus in nunc. Duis in tellus vel ipsum biben- dum gravida. Nunc eget mi id risus tempor rhoncus. Integer lectus sapien, pulvinar non ornare quis, vulputate vel eros. </span><a href="#" class="more">more</a>
</div>
<div class="clear"></div>
</div>
</div> <!-- item -->
</div> <!-- items -->
</div> <!-- scrollable -->
<div style="height: 10px"></div>
<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="height: 25px"></div>
<div style="clear: both"></div>
<div style="height: 10px"></div>
<!-- content begins -->
<div id="content">
<div class="line"></div>
<div style="height:25px"></div>
<div>
<div style="float:left; width: 250px;">
<h2>In in risus tellus.</h2>
<div style="height:20px"></div>
<span class="span_cont">Suspendisse vitae laoreet magna.</span> Integer malesuada porttitor elit, at cursus massa malesuada a. Donec vel nulla a enim iaculis tempus.<br /><br />
<span class="span_cont">Nullam quis dolor</span> suscipit nulla pellentesque ultrices sit amet pellentesque ligula.<br /><br />
<span class="span_cont">In id purus sed ligula luctus egestas.</span> Sed augue dui, egestas ut viverra eu, scelerisque sed magna. <a href="#" class="more2">more</a>
</div>
<div style="float: left; width: 32px; height:10px;"></div>
<div style="float: left; width: 658px;">
<h2>Services</h2>
<div style="height:20px"></div>
<div>
<div class="box">
<span class="span_cont">Quisque lorem enim.</span> <br />
Malesuada id dignissim id, cursus sed metus. Donec a rhoncus eros.
<div style="height:10px"></div>
<img src="freecss_natural-images/img1.jpg" alt="" />
</div>
<div style="height:10px; width: 23px; float:left"></div>
<div class="box">
<span class="span_cont">Vivamus in nunc nunc, quis mollis massa.</span> <br />
Pellentesque habitant morbi tristique senectus et netus et.
<div style="height:10px"></div>
<img src="freecss_natural-images/img2.jpg" alt="" />
</div>
<div style="height:10px; width: 23px; float:left"></div>
<div class="box">
<span class="span_cont">Donec dolor nisl.</span> Condimentum quis accumsan ut, sodales nec nisi. Etiam dictum diam a justo posuere.
<div style="height:10px"></div>
<img src="freecss_natural-images/img3.jpg" alt="" />
</div>
<div style="clear: both;"></div>
</div>
</div>
<div style="clear: both;"></div>
</div>
<div style="height:25px"></div>
<div class="line"></div>
<div style="height:25px"></div>
<div>
<div style="float:left; width: 250px;">
<h2>In in risus tellus.</h2>
<div style="height:20px"></div>
<span class="span_cont">Praesent ipsum neque.</span> <br />
Volutpat vel tincidunt quis, auctor vitae leo. Pellentesque vitae risus ac odio pharetra varius.<br /><br />
<span class="span_cont">Vestibulum ante ipsum primis</span> in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean sed suscipit risus. <a href="#" class="more2">more</a>
</div>
<div style="float: left; width: 32px; height:10px;"></div>
<div style="float: left; width: 250px;">
<h2>News</h2>
<div style="height:20px"></div>
<span class="span_cont">Nam nisl sapien, gravida non rhoncus sed.</span><br />
Sodales nec leo. Vestibulum bibendum ante sit amet libero...<br />
<b>April 5th, 2011</b><br /><br />
<span class="span_cont">Scelerisque elementum.</span><br />
Mauris at magna odio, vitae sagittis dui...<br />
<b>February 10th, 2011</b>
</div>
<div style="float: left; width: 21px; height:10px;"></div>
<div style="float: left; width: 380px;">
<img src="freecss_natural-images/img_fish.gif" class="img_l" alt="" />
<h3>Pellentesque vehicula, ante ac egestas elementum.?</h3>
<div style="clear: both;"></div>
<span class="span_cont">Sed non scelerisque nibh. Fusce venenatis lobortis nunc.</span><br />
Vitae laoreet mi ultricies at. Mauris in dui eget lacus lobortis ultrices. Proin tellus risus, suscipit quis euismod in. <a href="#" class="more2">more</a><br /><br />
<span class="span_cont">Malesuada eu justo.</span><br />
In lobortis tristique elit, non fringilla leo adipiscing a.Aenean fringilla sapien ante. Mauris lacus tortor, interdum vel vulputate et. <a href="#" class="more2">more</a>
</div>
<div style="clear: both;"></div>
</div>
<div style="height:25px"></div>
<div class="line"></div>
<div style="height:25px"></div>
</div>
<!-- content ends -->
<!-- bottom begin -->
<div id="bottom">
<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>
</ul>
</div>
<div id="b_col2">
<h1>Contact Information</h1>
<div style="height:20px"></div>
<div style=" line-height: 25px">
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>Quick Navigation</h1>
<div style="height:15px"></div>
<table border="0">
<tr>
<td style="width: 76px;"><a href="#" class="a_qn">Blog</a></td>
<td><a href="#" class="a_qn">Contact us</a></td>
</tr>
<tr>
<td ><a href="#" class="a_qn">Gallary</a></td>
<td><a href="#" class="a_qn">Services</a></td>
</tr>
<tr>
<td><a href="#" class="a_qn">News</a></td>
<td><a href="#" class="a_qn">About us</a></td>
</tr>
</table>
</div>
<div id="b_col4">
<h1>Follow Us</h1>
<div style="height:15px"></div>
<ul class="spis_fu">
<li><img src="freecss_natural-images/fu_i1.gif" class=" fu_i" alt="" /><a href="#">Subscribe to Blog</a></li>
<li><img src="freecss_natural-images/fu_i2.gif" class=" fu_i" alt="" /><a href="#">Be a fan on Facebook</a></li>
<li><img src="freecss_natural-images/fu_i3.gif" class=" fu_i" alt="" /><a href="#">RSS Feed</a></li>
<li><img src="freecss_natural-images/fu_i4.gif" class=" fu_i" alt="" /><a href="#">Follow us on Twitter</a></li>
</ul>
</div>
<div style="clear: both;"></div>
<div style="height:10px"></div>
</div>
<!-- bottom end -->
<div style="height:25px"></div>
<div class="line"></div>
<!-- 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.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>
<!-- footer ends -->
</div>
</body>
</html>
Related examples in the same category