simplygreen
<!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>
<title>Simply Green</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
body {
padding : 0;
margin : 0;
font : 75% tahoma, "Trebuchet MS", sans-serif;
line-height : 1.5em;
background : #c3d9c3 url(simplygreen-images/bg.jpg) repeat-y top center;
color : #666;
}
#container {
width : 760px;
margin : 0 auto;
padding : 0;
border: 5px solid #fff;
}
/*BANNER*/
#banner {
padding : 0;
margin-top : 0;
height : 130px;
background : #5a8f57 url(simplygreen-images/orb.png) no-repeat right center;
}
#banner h1 {
float : right;
margin-top : 0;
letter-spacing : 3px;
font-size : 110%;
padding : 50px 50px 0 0;
color : #000;
}
/*TOP NAV*/
#navbar ul {
float : left;
width : 760px;
padding : 0;
margin : 0;
list-style-type : none;
font-size : 110%;
text-align : left;
border-top : 5px solid #fff;
border-bottom : 5px solid #fff;
background : #92cc8f;
color : #000;
}
#navbar a {
float : left;
width : 6em;
text-decoration : none;
color : #000;
background : #92cc8f url(simplygreen-images/square.gif) no-repeat left center;
padding : 0.5em 1em;
}
#navbar a:hover {
background : #5a8f57 url(simplygreen-images/square.gif) no-repeat left center;
color : #fff;
}
#navbar li {
display : inline;
}
/*MAIN CONTENT*/
#content {
width : 500px;
padding : 1em;
margin-left : 230px;
}
/*SIDEBAR*/
#sidebar {
float : left;
width : 200px;
padding : 1em;
margin-top : 0;
}
/*BOTTOM*/
#bottom {
clear : both;
height : 200px;
padding : 5px;
margin-top : 5px;
margin-bottom : 35px;
background : inherit;
}
/*FOOTER*/
#footer h1 {
letter-spacing : 2px;
font-size : 110%;
margin-left : 40px;
color : #c7d9c3;
}
#footer p {
font-size : 90%;
padding : 0 0 0 10px;
color : #c7d9c3;
}
#footer {
padding : 5px;
margin-top : 5px;
border-top : 5px solid #fff;
background : #5a8f57;
}
#footer a, a:visited {
color : #333;
background : inherit;
text-decoration : underline;
}
#footer a:hover {
color : #92cc8f;
background : inherit;
text-decoration : none;
}
/*FOOTER COLUMNS*/
.col3, .col3center {
float : left;
width : 33%;
margin-bottom : 20px;
}
.col3center {
margin : 0;
}
/*LINKS*/
a:link, a:visited {
color : #5a8f57;
background : inherit;
text-decoration : underline;
}
a:hover {
color : #143d55;
background : inherit;
text-decoration : none;
}
a img {
border: 0;
}
ul li {
list-style-type : none;
}
.navlist ul li {
list-style-image : url(simplygreen-images/square.gif);
padding-left : 5px;
margin-bottom : 0;
}
/*TYPOGRAPHY*/
h2 {
letter-spacing : 3px;
font-size : 130%;
padding : 10px;
color : #5a8f57;
}
blockquote {
padding : 5px;
font-weight : bold;
font-style : italic;
color : #b29b35;
}
/*CLASS*/
.imgleft {
float : left;
padding : 10px;
}
.clear {
clear : both;
overflow : hidden;
width : 0;
height : 1px;
}
</style>
</head>
<body>
<div id="container">
<div id="banner">
<h1>Company Name</h1>
</div>
<div id="navbar">
<ul>
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">About Us</a></li>
<li><a href="http://www.free-css.com/">Services</a></li>
<li><a href="http://www.free-css.com/">Our Work</a></li>
<li><a href="http://www.free-css.com/">Contact Us</a></li>
</ul>
</div>
<div class="clear"></div>
<div id="sidebar">
<h2>Navigate</h2>
<div class="navlist">
<ul>
<li><a href="http://www.free-css.com/">Link one</a></li>
<li><a href="http://www.free-css.com/">Link two</a></li>
<li><a href="http://www.free-css.com/">Link three</a></li>
<li><a href="http://www.free-css.com/">Link four</a></li>
<li><a href="http://www.free-css.com/">Link five</a></li>
</ul>
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<div class="navlist">
<ul>
<li><a href="http://www.free-css.com/">Link one</a></li>
<li><a href="http://www.free-css.com/">Link two</a></li>
<li><a href="http://www.free-css.com/">Link three</a></li>
<li><a href="http://www.free-css.com/">Link four</a></li>
<li><a href="http://www.free-css.com/">Link five</a></li>
</ul>
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
</div>
<div id="content">
<h2>Header</h2>
<blockquote> This template has been tested in Mozilla Firefox and IE7. The page validates as XHTML 1.0 Transitional using valid CSS. It will work in browser widths of 800x600, 1024x768 & 1280x1064. The images used in this template are courtesy of <a href="http://www.MouseRunner.com" title="free resources"> Mouse Runner</a>. <br />
For more FREE CSS templates visit <a href="http://www.mitchinson.net" title="Snapp Happy">my website</a>.</blockquote>
<h2>Header</h2>
<p>Nunc interdum risus. Ut eleifend quam sit amet ligula. Ut nec purus nec orci ultricies laoreet. Fusce non libero. Suspendisse id enim quis mi egestas pretium. Cras convallis molestie leo. Etiam iaculis, dui non pharetra tempor, dolor magna sodales est, ac viverra nunc quam at dolor. Integer diam quam, interdum lobortis, adipiscing vitae, auctor vel, ante. Proin nec diam id ante aliquam dapibus. Nulla pretium velit in nisi. Aliquam facilisis elit vel felis. Aenean tincidunt auctor libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam ipsum. Sed odio massa, scelerisque ac, lacinia sed, dictum sit amet, metus. Donec non pede sit amet lacus porta scelerisque. Nulla facilisi. </p>
</div>
<div id="bottom">
<h2>Services</h2>
<p><img class="imgleft" src="simplygreen-images/orb.png" alt="" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec vel diam at mauris tincidunt condimentum. Aenean in urna. Nam in odio. Maecenas rhoncus. Vivamus augue. Nulla id sem. Nam viverra urna at nisl tincidunt bibendum. In pharetra ullamcorper lectus. Nam eget dui mollis purus viverra tempor. Praesent cursus nunc ac mi. Morbi bibendum. Praesent eu massa eu eros iaculis convallis. Nullam convallis. Proin luctus, ante eget molestie pellentesque, arcu nisi aliquet risus, id rhoncus erat justo et sem. Nam ipsum. Sed odio massa, scelerisque ac, lacinia sed, dictum sit amet, metus. Donec non pede sit amet lacus porta scelerisque. Nulla facilisi.</p>
</div>
<div class="clear"></div>
<div id="footer">
<div class="col3center">
<h1>Web Resources</h1>
<div class="navlist">
<ul>
<li><a href="http://www.free-css.com/">Open Designs</a></li>
<li><a href="http://www.free-css.com/">Open Web Design</a></li>
<li><a href="http://www.free-css.com/">CSS Drive</a></li>
</ul>
</div>
</div>
<div class="col3">
<h1>Links</h1>
<div class="navlist">
<ul>
<li><a href="http://www.free-css.com/">BBC News Frontpage</a></li>
<li><a href="http://www.free-css.com/">Hartlepool Today</a></li>
<li><a href="http://www.free-css.com/">SV Horizons Travelblog</a></li>
</ul>
</div>
</div>
<div class="col3">
<h1>More Links</h1>
<div class="navlist">
<ul>
<li><a href="http://www.free-css.com/">Dynamic Drive CSS Library</a></li>
<li><a href="http://www.free-css.com/">Listamatic</a></li>
<li><a href="http://www.free-css.com/">CSS Play</a></li>
</ul>
</div>
</div>
<p><a href="http://www.free-css.com/">homepage</a> | <a href="http://www.free-css.com/">contact</a> | <a href="http://validator.w3.org/check?uri=referer">html</a> | <a href="http://jigsaw.w3.org/css-validator">css</a> | © 2007 Anyone | Design by <a href="http://www.mitchinson.net"> www.mitchinson.net</a> | Licensed under a <a rel="license" target="_blank" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 License</a></p>
</div>
</div>
</body>
</html>
Related examples in the same category