freecss_redleaves
<!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;
color: #000000;
background: url(freecss_redleaves-images/bg.jpg) top repeat-x #000000;
line-height: 18px;
}
#main {
width: 1018px;
margin: 0px auto 50px auto;
background:url(freecss_redleaves-images/main.jpg) right top no-repeat;}
#header {
height: 112px;
}
#logo {
height: 52px;
width: 210px;
padding: 53px 0px 0px 0px;
float: right;
text-align: right;
}
#logo H2 {
font-family: Arial, Helvetica, sans-serif;
color:#ffffff;
font-size:18px;
font-style:italic;
background: none;
text-align: right;
}
#logo a {
text-decoration: none;
font-size: 14px;
color: #ffffff;
}
#logo H2 a{
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
font-weight:100;
}
#buttons{
text-align:center;
height: 36px;
margin-top: 20px;
padding-left: 0px;
background: url(freecss_redleaves-images/buttons.png) left top no-repeat;
width: 612px;
float: left;
}
#buttons a {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
display: block;
float: left;
text-decoration: none;
color: #ffffff;
text-align: center;
padding-top: 4px;
height: 21px;
}
.but {
width: 118px;
}
#buttons .but:hover {
background: url(freecss_redleaves-images/but_hover.gif) center bottom no-repeat;
}
.but_razd { width: 5px;
height: 10px;
float:left;}
.top { height:337px;
background:url(freecss_redleaves-images/top.jpg) 10px 10px no-repeat #FFFFFF;}
#content{
padding: 10px 10px 10px 10px;
background: #ffffff;
}
#left{
width: 625px;
float: left;
margin-left: 0px;
}
.img_l { float:left;
margin: 3px 15px 3px 0px;
}
.img_r { float: right;
margin: 9px 10px 3px 10px;
}
.span_cont { color: #A50000;
font-size:12px;
font-weight:bold;
}
h1{
font-size:16px;
font-weight: 100;
color: #FFFFFF;
text-align: left;
padding: 0px 0px 0px 0px;
background:url(freecss_redleaves-images/h1.jpg) left top no-repeat;
padding: 6px 0px 6px 7px;
}
h2{
font-size:16px;
font-weight: 100;
color: #A50000;
text-align: left;
padding: 0px 0px 0px 0px;
background:url(freecss_redleaves-images/h2.gif) bottom repeat-x;
padding: 3px 0px 2px 0px;
}
h3 {font-family: Arial, Helvetica, sans-serif;
font-size:16px;
font-weight: bold;
color: #4ACBE2;
text-align: left;}
.read {
font-size:12px;
color: #E40000;
text-decoration: underline;
font-weight:bold;
padding-right: 2px;
display:block;
height: 17px;
line-height: 17px;
width: 66px;
padding: 0px 0px 0px 0px;
text-align: center;
float: right;
margin-top: 4px;
}
.read:hover {
font-size:12px;
text-decoration: none ;
}
#right{
float: right;
width: 335px;
margin-right: 0px;
}
.span_dat {
color: #000000;
text-decoration: underline;
font-weight: bold;
padding-bottom: 5px;}
#bottom {
background: url(freecss_redleaves-images/bottom.gif) top repeat-x #A30000;
color: #000000;
}
#bottom_bot {
background: url(freecss_redleaves-images/bottom.gif) 43px bottom no-repeat;
color: #FFFFFF;
}
#bottom h1 {
color: #ffffff;
font-size: 16px;
font-weight: 100;
text-align: center;
padding: 5px 0px 5px 0px;
background: none;
}
#b_col1 {
width: 304px;
float: left;
margin-left: 25px;
}
#b_col2 {
width: 305px;
float: left;
margin-left: 28px;
}
#b_col3 {
width: 270px;
float: left;
margin-left: 40px;
text-align: left;
}
.box_us {
width: 270px;
background: url(freecss_redleaves-images/box_us.gif) 0px bottom repeat-x;
}
.box_us_l {
width: 45px;
float: left;
padding-top:3px;}
.box_us_r {
width: 225px;
float: left;}
.spis_bot {
list-style:none;
padding: 0px 0px 0px 0px;}
.spis_bot li {
padding: 5px 0px 0px 0px;
}
.spis_bot a {
color:#232323;
text-decoration:none;
font-weight: bold;
background: url(freecss_redleaves-images/fish2.gif) 0px 12px no-repeat;
display: block;
font-weight:bold;
padding: 5px 0px 0px 23px;}
.spis_bot a:hover {
color:#ffffff;
padding: 5px 0px 0px 28px;
text-decoration: none;
background:url(freecss_redleaves-images/fish2.gif) 5px 12px no-repeat;
}
.fu_i {
margin: 0px 20px 0px 0px;
float: right;
}
#footer{
height: 63px;
font-size: 11px;
color: #ffffff;
text-align: left;
padding: 30px 25px 0px 25px;
background: url(freecss_redleaves-images/footer.gif) top repeat-x #A30000;
}
#footer a{
color: #ffffff;
font-size: 11px;
text-decoration: none;
}
#footer a:hover{
color: #ffffff;
font-size: 11px;
text-decoration: underline;
}
.lh {
line-height: 22px;
}
/*=*/
/* Nivo Slider Demo
/* November 2010
/* By: Gilbert Pellegrom
/* http://dev7studios.com
/*=*/
#slider-wrapper {
width: 998px;
height: 330px;
margin:0 auto;
padding-top: 10px;
}
#slider {
position:relative;
width: 998px;
height: 330px;
background:url(freecss_redleaves-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: 400px;
bottom:-52px;
}
.nivo-controlNav a {
display:block;
width:22px;
height:22px;
background:url(freecss_redleaves-images/circl.jpg) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}
.nivo-controlNav a.active {
background-position:0 -22px;
background:url(freecss_redleaves-images/circl_hover.png) no-repeat;
}
.nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(freecss_redleaves-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 id="main">
<!-- header begins -->
<div id="header">
<div id="buttons">
<a href="index.html" class="but" 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 id="logo">
<b><a href="#">freecss_redleaves</a></b>
<h2><a href="#"><small>Small Company Slogan Goes Here</small></a></h2>
</div>
</div>
<!-- header ends -->
<div class="top">
<div id="slider-wrapper">
<div id="slider" class="nivoSlider">
<img src="freecss_redleaves-images/top.jpg" alt="" />
<img src="freecss_redleaves-images/top2.jpg" alt=""/>
<img src="freecss_redleaves-images/top3.jpg" alt="" />
</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 style="height:10px"></div>
<!-- content begins -->
<div id="content">
<div id="left">
<h1>Welcome to Our Website</h1>
<div style="height:10px"></div>
<img src="freecss_redleaves-images/img1.jpg" class="img_l" alt="" />
<span class="span_cont">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</span><div style="height:3px"></div>Nullam id risus at orci ornare suscipit. Quisque condimentum feugiat nisl nec molestie. Donec sed metus at justo hendrerit euismod. Nulla luctus orci et erat dictum laoreet volutpat nisi interdum. <br />
Cras mollis, libero in lacinia blandit, justo augue pretium est, a viverra orci risus gravida arcu. Vivamus gravida, sem sed luctus accumsan, dui arcu fermentum arcu, vel luctus
<div style="height:20px"><a href="#" class="read">read more</a></div>
<div style="height:30px"></div>
<h1>Nullam Elementum Bibendum</h1>
<div style="height:10px"></div>
<img src="freecss_redleaves-images/img2.jpg" class="img_l" alt="" />
<span class="span_cont">Nullam elementum bibendum arcu a volutpat. </span>
<div style="height:3px"></div>
In elit quam, ullamcorper eu pretium non, dictum non orci. Proin tincidunt, felis nec tristique suscipit, urna neque tincidunt diam, a malesuada lectus velit at nisi. Mauris aliquam risus et lacus volutpat in congue metus pharetra. Nullam vel turpis est. Suspendisse felis dolor, porta eget suscipit vel, vestibulum eget erat. Donec feugiat feugiat consequat. Praesent interdum, felis eget ultricies fermentum, arcu eros fringilla felis, sit amet mollis odio tortor ut commodo neque euismod. Nam nec dolor id dolor porttitor sollicitudin. In varius interdum condimentum. Nunc eu justo mi. Vivamus a erat eget lacus iaculis faucibus. Vivamus egestas lacinia eros, sit amet lacinia tortor
<div style="height:20px"><a href="#" class="read">read more</a> </div>
</div>
<div id="right">
<h2>Maecenas Porttitor Elit a Quam</h2>
<div style="height:10px"></div>
<img src="freecss_redleaves-images/img3.jpg" class="img_l" alt="" />
<span class="span_cont">Nam nec dolor id dolor porttitor sollicitudin.
</span><div style="height:3px"></div>
In varius interdum condimentum. Nunc eu justo mi. Vivamus a erat eget lacus iaculis faucibus. Vivamus egestas lacinia eros, sit amet lacinia tortor varius nec. Mauris eleifend, vehicula mauris quis risus molestie sed mattis massa dapibus. Donec dapibus est a elit sagittis euismod.
<a href="#"><img src="freecss_redleaves-images/a_fish.gif" alt="" /></a>
<div style="height:20px"></div>
<h2>Donec Sit Amet Diam Quis</h2>
<div style="height:10px"></div>
<img src="freecss_redleaves-images/img4.jpg" class="img_l" alt="" />
<span class="span_cont">Etiam enim tortor, blandit nec faucibus sed, egestas ac odio.</span><br /><br />
Phasellus eu aliquam mauris. Sed eleifend erat sit amet justo ultrices ut vulputate lorem tincidunt. Mauris ac orci eu dui laoreet aliquet. Maecenas
<a href="#"><img src="freecss_redleaves-images/a_fish.gif" alt="" /></a>
<div style="height:20px"></div>
<h2>Etiam Sit Amet Libero </h2>
<div style="height:10px"></div>
<img src="freecss_redleaves-images/img5.jpg" class="img_l" alt="" /><span class="span_cont">Fusce nec augue vitae velit imperdiet tincidunt. </span>
<div style="height:3px"></div>
Cras malesuada, libero ut lobortis faucibus, felis tellus fermentum lacus, euismod tristique nisi risus dapibus felis. Curabitur sit amet nibh vitae ante fermentum lobortis vitae nec mauris. Fusce eget turpis diam. Vestibulum convallis vestibulum volutpat. Nam in elementum mi.
<a href="#"><img src="freecss_redleaves-images/a_fish.gif" alt="" /></a>
</div>
<div style="clear:both"></div>
</div>
<!-- content ends -->
<div style="height:15px"></div>
<!-- bottom begin -->
<div id="bottom_bot">
<div id="bottom">
<div id="b_col1">
<h1>About Us</h1>
<div style="height:20px"></div>
<img src="freecss_redleaves-images/img6.jpg" alt="" />
<div style="height:10px"></div>
Donec tempor, mauris fringilla imperdiet elementum, magna sapien venenatis libero, eu scelerisque enim metus in massa. Ut in turpis mauris, at lobortis diam.
</div>
<div id="b_col2">
<h1>Recent Posts</h1>
<div style="height:10px"></div>
<ul class="spis_bot">
<li><a href="#">Lorem ipsum dolor sit amet, consectetur adip</a></li>
<li><a href="#">Quisque nec lectus leo, et condimentum massa.</a></li>
<li><a href="#">Suspendisse porttitor purus a nisl tincidunt at </a></li>
<li><a href="#">Aliquam et leo quis massa ultricies varius non </a></li>
<li><a href="#">Morbi eget arcu metus, facilisis rhoncus mi. </a></li>
<li><a href="#">Morbi condimentum enim in lorem iaculis ultr</a></li>
</ul>
</div>
<div id="b_col3">
<h1>Contact Information</h1>
<div style="height:15px"></div>
<div class="box_us">
<div class="box_us_l">
<img src="freecss_redleaves-images/fish_us1.png" alt="" />
</div>
<div class="box_us_r">
<b class="lh">1234 Some Street, Brooklyn, NY 11201</b>
</div>
<div style="clear: both; height:10px;"></div>
</div>
<div class="box_us">
<div class="box_us_l">
<img src="freecss_redleaves-images/fish_us2.png" alt="" />
</div>
<div class="box_us_r">
<b class="lh">Phone: 1(234) 567 8910<br />
Fax: 1(234) 567 8910
</b>
</div>
<div style="clear: both; height:10px;"></div>
</div>
<div class="box_us">
<div class="box_us_l">
<img src="freecss_redleaves-images/fish_us3.png" alt="" />
</div>
<div class="box_us_r">
<b class="lh">E-mail: companyname@yahoo.com</b>
</div>
<div style="clear: both; height:10px;"></div>
</div>
</div>
<div style="clear: both; height:20px;"></div>
</div>
</div>
<!-- bottom end -->
<!-- footer begins -->
<div id="footer">
<div style="float: left; width: 500;">
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 --><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>
<div style="float: right; width: 500; padding: 0px 0px 0px 0px;">
<a href="#"><img src="freecss_redleaves-images/fu_i5.gif" class="fu_i" alt="" /></a>
<a href="#"><img src="freecss_redleaves-images/fu_i4.gif" class="fu_i" alt="" /></a>
<a href="#"><img src="freecss_redleaves-images/fu_i3.gif" class="fu_i" alt="" /></a>
<a href="#"><img src="freecss_redleaves-images/fu_i2.gif" class="fu_i" alt="" /></a>
<a href="#"><img src="freecss_redleaves-images/fu_i1.gif" class="fu_i" alt="" /></a>
</div>
</div>
<!-- footer ends -->
</div>
</body>
</html>
Related examples in the same category