greener
<!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>GREENER</title>
<style type='text/css'>
body {
margin : 0;
padding : 0;
text-align : left;
font : 75% "Trebuchet MS", verdana, arial, sans-serif;
line-height : 1.5em;
background : #BCE0A8 url(greener-img/bg.jpg) top center repeat-y;
color : #000;
}
/*CONTAINER*/
#wrapper {
position : relative;
width : 780px;
margin-right : auto;
margin-left : auto;
padding : 0;
border : 0px solid green;
background : #fff;
}
/*TOP TITLE BAR*/
#title {
width : 770px;
margin-left : 5px;
padding : 0;
text-align : right;
background : #fff;
color : #000;
}
#title h1 {
margin : 0;
padding : 10px;
font-size : 175%;
text-transform : uppercase;
letter-spacing : 5px;
background : inherit;
color : #BCE0A8;
}
/*BANNER*/
#header {
background : url(images/head.jpg) no-repeat;
width : 770px;
height : 200px;
margin : 0 0 0 5px;
padding : 0 0 0 0;
}
/*TOP NAVIGATION*/
.container {
width : 770px;
height : 35px;
margin : 20px 0 10px 5px;
}
#navCircle {
margin : 0;
padding : 0 0 20px 20px;
border-bottom : 1px solid #b2d094;
}
#navCircle li {
margin : 0;
padding : 0;
display : inline;
list-style-type : none;
}
#navCircle a:link, #navCircle a:visited {
float : left;
font-size : 1.3em;
padding : 0 25px 15px 25px;
text-decoration : none;
background : inherit;
color : #457C05;
}
#navCircle a:link.active, #navCircle a:visited.active, #navCircle a:hover {
background-color : inherit;
color : #000;
background : url(greener-img/arrow.gif) no-repeat bottom center;
}
/*MAIN CONTENT*/
#content {
width : 560px;
float : left;
margin-top : 0;
margin-left : 11px;
padding : 5px;
border-right : 1px solid #b2d094;
}
#content p {
padding : 0 20px;
}
/*SIDEBAR*/
#right-col {
width : 175px;
margin : 5px 0 0 590px;
border-left : 1px none #28460a;
padding : 3px;
}
/*FOOTER*/
#footer {
margin : 50px 0 0 0;
padding : 5px;
font : 90% "Trebuchet MS", verdana, arial, sans-serif;
background : #4b692d;
color : #fff;
}
#footer a:link, #footer a:visited {
background : inherit;
color : #b2d094;
}
#footer a:hover {
background : inherit;
color : #fff;
text-decoration : none;
}
/*SCROLLBAR*/
div.scroll {
overflow : auto;
height : 10em;
width : 150px;
padding : 1ex;
margin : 0 0 30px 5px;
border : 1px solid #345411;
background : #BCE0A8;
color : #000;
}
/*TYPOGRAPHY*/
h2 {
margin : 20px;
font-size : 140%;
text-transform : uppercase;
letter-spacing : 5px;
background : inherit;
color : green;
}
h3 {
margin : 5px;
font-size : 120%;
letter-spacing : 5px;
background : inherit;
color : green;
}
blockquote {
font-weight : bold;
font-style : italic;
color : #b29b35;
}
/*LINKS*/
a img {
border : none;
}
a:link, a:visited {
text-decoration : none;
background : inherit;
color : #457C05;
}
a:hover {
text-decoration : underline;
background : inherit;
color : #666;
}
ul.side {
list-style-type : square;
padding : 0;
margin : 0;
background : inherit;
color : #457C05;
}
.side li {
padding-left : 0.2em;
margin-left : 2em;
}
/*CLASSES*/
.news {
font-size : 90%;
background : inherit;
color : #000;
}
.imgleft {
float : left;
border : 1px solid #345411;
padding : 5px;
margin-right : 15px;
}
.imgright {
float : right;
border : 1px solid #345411;
padding : 5px;
margin-left : 15px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div id="wrapper">
<div id="title">
<h1>Your<span style="color: #008000;"> Company</span> Name</h1>
</div>
<div id="header"><img src="greener-img/head.jpg" alt="header" /></div>
<div class="container">
<ul id="navCircle">
<li><a class="active" href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">About</a></li>
<li><a href="http://www.free-css.com/">Product</a></li>
<li><a href="http://www.free-css.com/">Service</a></li>
<li><a href="http://www.free-css.com/">Support</a></li>
<li><a href="http://www.free-css.com/">Contact</a></li>
</ul>
</div>
<div id="content">
<h2>Welcome to <span style="color: #BCE0A8;"> GREENER</span> Template</h2>
<blockquote>This template has been tested in Mozilla and IE7. The page validates as XHTML 1.0 Transitional using valid CSS. <br />
For more FREE templates visit <a href="http://www.mitchinson.net">my website</a>.</blockquote>
<h2>Heading</h2>
<p><img class="imgleft" align="left" hspace="10" src="greener-img/imgbox.gif" alt="box" title="box" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi pretium magna et purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec eros.</p>
<h2>Heading</h2>
<p><img class="imgright" src="greener-img/imgbox.gif" alt="box" title="box" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi pretium magna et purus. This is a <a href="http://www.free-css.com/">LINK</a> to nowhere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec eros.</p>
<h2>Heading</h2>
<p><img class="imgleft" src="greener-img/imgbox.gif" alt="box" title="box" /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi pretium magna et purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec eros.Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec eros.</p>
</div>
<div id="right-col">
<h2>Updates</h2>
<div class="scroll">
<h3>January 2007</h3>
<p class="news">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi pretium magna et purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec eros.</p>
<h3>January 2006</h3>
<p class="news">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi pretium magna et purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec eros.</p>
</div>
<h2>Links</h2>
<ul class="side">
<li><a href="http://www.free-css.com/">Snapp Happy</a></li>
<li><a href="http://www.free-css.com/">TODC</a></li>
<li><a href="http://www.free-css.com/">Andreas Viklund</a></li>
<li><a href="http://www.free-css.com/">James Koster</a> </li>
<li><a href="http://www.free-css.com/"> CSS play</a></li>
<li><a href="http://www.free-css.com/">Listamatic</a></li>
</ul>
<h2>Links</h2>
<ul class="side">
<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>
</ul>
<h2>Links</h2>
<ul class="side">
<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>
</ul>
</div>
<div style="clear:both;"></div>
<div id="footer"> <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> | This work is licensed under a <a rel="license nofollow" target="_blank" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 License</a> </div>
</div>
</body>
</html>
Related examples in the same category