limegreen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>LIMEGREEN</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
body {
margin: 0;
padding : 0;
background: #ccc url(limegreen-images/bg.jpg) center repeat;
color: #555;
}
/*WRAP*/
#container {
width: 760px;
margin-left: auto;
margin-right: auto;
padding: 0;
font: 76% "Trebuchet MS","lucida sans", tahoma, sans-serif;
line-height: 1.8em;
background: transparent;
color: #666;
}
/*TOP BANNER*/
#banner {
padding: 0;
margin-bottom: 0;
height: 150px;
border-bottom:3px solid #fff;
background: #82B64D url(limegreen-images/wine.jpg);
color: #000;
}
/*TOP NAVIGATION*/
#navbar ul {
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
font-size: 130%;
text-align: center;
border-bottom:3px solid #fff;
background: #385900;
color: #000;
}
#navbar a {
float:left;
width:6em;
height:30px;
text-decoration:none;
color:#fff;
background:#385900;
padding:0.5em 0.6em;
border-right:1px solid #fff;
}
#navbar a:hover {
background:#8BBA00;
color: #000;
}
#navbar li {
display:inline;
}
/*MAIN CONTENT*/
#content {
padding: 1em;
margin-left: 200px;
}
/*SIDEBAR*/
#sidebar {
float: left;
width: 160px;
margin: 0;
padding: 0 1em 0 1em;
}
/*SIDE MENU*/
#sidebar ul {
list-style: none;
margin: 0 0 20px 0;
padding: 0;
}
#sidebar ul li {
display: inline;
padding: 0;
margin: 0;
}
#sidebar ul li a {
display: block;
color: #385900;
background: inherit;
text-decoration: none;
margin: 0;
padding: 5px 0 5px 0;
border-bottom: 1px solid #C0C0C0;
}
#sidebar ul li a:hover {
text-decoration: none;
background: #E6E7E9;
color: #DA7910;
}
/*FOOTER*/
#footer {
clear: both;
width:750px;
padding: 5px;
margin: 0;
font-size: 0.8em;
border-top: 3px solid #fff;
border-bottom: 3px solid #fff;
background: #88C706;
color: #000;
}
#footer a:link, #footer a:visited {
text-decoration : none;
background : inherit;
color : #000;
}
#footer a:hover {
text-decoration : underline;
background : inherit;
color : #fff;
}
/*LINKS*/
a:link, a:visited {
text-decoration : none;
background : inherit;
color : #DA7910;
}
a:hover {
text-decoration : underline;
background : inherit;
color : #385900;
}
/*TYPOGRAPHY*/
h1 {
margin: 0;
padding: 30px 0 0 20px;
font-size: 175%;
letter-spacing: 3px;
}
h2 {
margin-top: 10px;
padding: 10px 0 10px 0;
font-size: 160%;
letter-spacing: 3px;
background : transparent;
color : #385900;
}
h3 {
margin: 0;
padding: 10px 0 10px 0;
font-size: 160%;
letter-spacing: 3px;
background : inherit;
color : #385900;
}
blockquote {
font-weight : bold;
font-style : italic;
color : #b29b35;
}
/*CLASS*/
.clear {
clear: both;
overflow: hidden;
width: 0;
height: 0;
}
.slogan {
margin: 0 0 0 50px;
letter-spacing: 3px;
}
.post{
background: #E6E7E9;
padding: 3px;
margin: 20px 10px 10px 5px;
font-size: 80%;
}
.post .date {
background: url(limegreen-images/clock.gif) no-repeat left center;
padding-left: 15px;
margin: 0 15px 0 5px;
}
.post .comments {
background: url(limegreen-images/comment.gif) no-repeat left center;
padding-left: 15px;
margin: 0 15px 0 5px;
}
.post .readmore {
background: url(limegreen-images/document.gif) no-repeat left center;
padding-left: 15px;
margin: 0 15px 0 5px;
}
</style>
</head>
<body>
<div id="container">
<div id="banner">
<h1>Your Site Name</h1>
<p class="slogan">slogan here maybe ...</p>
</div>
<div id="navbar">
<ul>
<li><a href="http://www.free-css.com/">Home</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>
<div class="clear"> </div>
<div id="sidebar">
<h2>Sub Menu</h2>
<ul>
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">Products</a></li>
<li><a href="http://www.free-css.com/" class="selected">What we do</a></li>
<li><a href="http://www.free-css.com/">Contact us</a></li>
<li><a href="http://www.free-css.com/">Privacy Policy</a></li>
<li><a href="http://www.free-css.com/">Links</a></li>
</ul>
<h2>Archives</h2>
<ul>
<li><a href="http://www.free-css.com/">January</a></li>
<li><a href="http://www.free-css.com/">February</a></li>
<li><a href="http://www.free-css.com/">March</a></li>
<li><a href="http://www.free-css.com/">April</a></li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec non ante. Phasellus lacinia eleifend purus. Nulla non leo in ante ornare iaculis. Donec aliquam euismod arcu.</p>
</div>
<div id="content">
<h3>Main Content</h3>
<blockquote>The page has been tested in Mozilla and IE7. This page validates as XHTML 1.0 Transitional using valid CSS. Top image from www.sxc.hu. For more FREE templates visit my website.</blockquote>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec non ante. Phasellus lacinia eleifend purus. Nulla non leo in ante ornare iaculis. Donec aliquam euismod arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nam blandit dapibus purus. Quisque consequat nibh luctus ligula. Aliquam lobortis venenatis nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Duis pretium euismod elit. Nam velit. Nulla diam massa, interdum non, hendrerit at, blandit nec, turpis. Integer consequat. Vestibulum sem neque, laoreet non, facilisis pretium, ultrices non, mauris. Nunc ante lorem, venenatis sed, vulputate molestie, aliquam eget, enim. Aliquam vulputate porta felis. Nunc sagittis magna in mauris. Pellentesque pellentesque. </p>
<p>Proin id dolor. Integer iaculis neque sed arcu congue imperdiet. Etiam nulla est, mattis quis, feugiat vel, venenatis vel, lorem. Aenean pulvinar lectus quis metus. Aenean velit. Proin lacinia, tortor quis congue pharetra, magna ligula congue turpis, eget porta nulla leo nec urna. Morbi ipsum.</p>
<p class="post"> <a href="http://www.free-css.com/" class="readmore">Read more</a> <a href="http://www.free-css.com/" class="comments">Comments (7)</a> <span class="date">Feb 23, 2007</span> </p>
<h3>Recent Articles</h3>
<p>Morbi ullamcorper porta ante. Nam sit amet nibh id mi semper varius. Etiam tincidunt, arcu elementum dapibus posuere, justo leo tincidunt justo, vitae gravida pede augue non enim. Pellentesque faucibus magna euismod orci. Proin id dolor. Integer iaculis neque sed arcu congue imperdiet. Etiam nulla est, mattis quis, feugiat vel, venenatis vel, lorem. Aenean pulvinar lectus quis metus. Aenean velit. Proin lacinia, tortor quis congue pharetra, magna ligula congue turpis, eget porta nulla leo nec urna. Morbi ipsum.</p>
<p class="post"> <a href="http://www.free-css.com/" class="readmore">Read more</a> <a href="http://www.free-css.com/" class="comments">Comments (7)</a> <span class="date">Feb 23, 2007</span> </p>
</div>
<div class="clear"> </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" 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