GardenWeb
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>GardenWeb</title>
<style type='text/css'>
/* CSS RESET */
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym {border:0;font-variant:normal;}sup {vertical-align:text-top;}sub {vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}legend{color:#000;}
body {font:13px/1.231 arial,helvetica,clean,sans-serif;}table{font-size:inherit;font-size:100%;}pre,code,kbd,samp,tt{font-family:monospace;line-height:100%;}
/* CSS RESET */
body {
text-align:center;
color:#fff;
}
a {
text-decoration:none;
color:#fff
}
a:hover {
text-decoration: underline;
color: #CC0000
}
#wrap {
width:1000px;
text-align:left;
margin:0 auto;
background:url(GardenWeb-images/bg.png);
}
.fl{ float:left}
.fr{ float:right}
.clearfix{ clear:both}
/* header */
#header { position:relative;height:140px }
#logo {position:absolute; top:60px; left:130px}
#logo h1 {
font-size:34px;
color:#fff
}
#logo div {
padding-left:100px
}
#nav { position:absolute; top:70px; left:470px; background:url(GardenWeb-images/nav.jpg); width:421px;height:38px; line-height:38px; padding:0 0 0 30px }
#nav li {float:left; font-weight:700; }
#nav a {text-decoration:none; display:block; text-align:center;}
#nav a:hover {background: #006633 url(GardenWeb-images/hover.jpg); color:#000000 }
li.h {width:86px}
li.a {width: 91px; padding-left: 2px;}
li.p {width: 106px; padding-left: 2px; }
li.c {width:80px; padding-left: 2px;}
.h a:hover{}
.a a:hover{}
.p a:hover{}
.c a:hover{}
/* content */
#content { width:880px ;
margin:0 auto;
}
.main {width:560px; height:496px; font-family:Verdana, Arial, Helvetica, sans-serif; background:url(GardenWeb-images/box.gif); color:#000;}
#text { }
#text p {margin:0 auto; width:480px; }
#text h2 {font-size:30px; padding:20px 0 20px 30px}
#text img {margin:50px 0 0 65px}
#text a { color:#A1E062}
#col {margin:0 0 10px 0 ;width:300px; background:url(GardenWeb-images/m.jpg); width: 879px; height:104px ; }
#col div {width: 220px; margin: 20px 0 0 70px; display:inline}
#col .first {margin: 20px 0 0 50px }
#col li{line-height:20px;}
.side {margin:0 0 0 40px; width:250px;display: inline;}
.side h2 {font-size:22px}
.side li {line-height:20px; list-style:inside disc; color:#FFFFFF; }
.side ul {margin:20px 0 30px 20px}
#top {margin-top:50px}
/* footer */
#footer { background:url(GardenWeb-images/ft.jpg); height:133px; position:relative}
#ftinner{ position:absolute; bottom:20px; width:680px; margin-left:120px}
.ftlink {width:500px;}
</style>
</head>
<body>
<div id="wrap">
<div id="bg">
<div id="header">
<div id="logo">
<h1>GardenWeb</h1>
<div>short slogan here</div>
</div>
<ul id="nav">
<li class="h"><a href="#">Home</a></li>
<li class="a"><a href="#">About us</a></li>
<li class="p"><a href="#">Production</a></li>
<li class="c"><a href="#">Contact</a></li>
</ul>
</div>
<!-- /header -->
<div id="content">
<div id="col">
<div class="first fl">
<ul>
<li><a href="#">making over years </a></li>
<li><a href="#">Latin professor </a></li>
<li><a href="#">Hampden Sydney </a></li>
</ul>
</div>
<div class=" fl ">
<ul>
<li><a href="#">Latin literature </a></li>
<li><a href="#">making over years </a></li>
<li><a href="#">Richard Clintock </a></li>
</ul>
</div>
<div class=" fl ">
<ul>
<li><a href="#">Latin literature </a></li>
<li><a href="#">Hampden Sydney </a></li>
<li><a href="#">Virginia looked one</a></li>
</ul>
</div>
</div>
<div class="clearfix"></div>
<div class="side fr">
<div id="top">
<h2>Sections</h2>
<ul class="meun">
<li><a href="#">Latin literature </a></li>
<li><a href="#">making over years </a></li>
<li><a href="#">Richard Clintock </a></li>
<li><a href="#">Latin professor </a></li>
<li><a href="#">Hampden Sydney </a></li>
</ul>
</div>
<div id="bm">
<h2>Other sevices</h2>
<ul class="meun">
<li><a href="#">Vestibulum bibendum tellus.</a></li>
<li><a href="#">Maecenas egestas sapien ac .</a></li>
<li><a href="#">Nam volutpat ante.</a></li>
<li><a href="#">Curabitur rhoncus leo in nisi.</a></li>
<li><a href="#">Nulla fringilla eros at sem.</a></li>
<li><a href="#">Integer euismod id est.</a></li>
<li><a href="#">Aenean viverra mi eu justo.</a></li>
</ul>
</div>
</div>
<div class="main fl">
<div id="text">
<h2>Free CSS Templates</h2>
<p> GardenWeb is a CSS template that is free and fully standards compliant. <a href="http://www.free-css-templates.com/">Free CSS Templates</a> designed this template. <br/>
<br/>
This template is allowed for all uses, including commercial use, as it is released under the Creative Commons Attributions 2.5 license. The only stipulation to the use of this free template is that the links appearing in the footer remain intact. Beyond that, simply enjoy and have fun with it!</p>
<img src="GardenWeb-images/img.jpg" alt="" /> </div>
</div>
<!-- /content -->
</div>
<div class="clearfix"></div>
<div id="footer">
<div id="ftinner">
<div class="ftlink fl"> <a href="#">Home</a> | <a href="#">About Us</a> | <a href="#">Production</a> | <a href="#">Submission</a> | <a href="#">Contact</a>
<p id="copyright"> 2008. All Rights Reserved. <br/>
<a href="http://www.templatesold.com/" target="_blank">Website Templates</a> by <a href="http://www.free-css-templates.com/" target="_blank">Free CSS Templates</a></p>
</div>
<div class="valid fr"><img src="GardenWeb-images/xhtml.gif" alt="xhtml valid" /> <img src="GardenWeb-images/css.gif" alt="css valid" /></div>
</div>
</div>
<!-- /footer -->
</div>
</div>
</body>
</html>
Related examples in the same category