grass
<!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" xml:lang="en" >
<head>
<title>GRASS</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
body {
margin : 0;
padding : 0;
font : 73% "lucida sans", "Trebuchet MS", verdana, tahoma, arial, sans-serif;
line-height : 1.7em;
background : #333 url(grass-images/bgd.jpg) no-repeat;
color : #eee;
}
a:link, a:visited, a:active {
color : #9BBA7F;
background : inherit;
}
a:hover {
color : #7A7B75;
background : inherit;
}
h1 {
margin : 0;
padding : 20px;
font-size : 130%;
color : #adae75;
background : inherit;
}
#content h2 {
padding : 10px 0 10px 30px;
margin : 0;
font-size : 120%;
text-transform : uppercase;
color : #adae75;
background : inherit;
}
#container {
width : 750px;
margin-left : 0;
margin-right : auto;
color : #d6ddbc;
background : inherit;
}
#header {
width : 750px;
height : 172px;
border-bottom : 0 solid #ccc;
background : transparent url(grass-images/head.jpg) no-repeat;
margin-bottom : 0;
}
#title {
width : 750px;
height : 50px;
margin-bottom : 10px;
background : transparent url(grass-images/title.jpg) no-repeat;
}
#title p {
text-align : center;
text-transform : uppercase;
letter-spacing : 5px;
color : #adae75;
background : inherit;
font-size : 130%;
padding : 20px 0 20px 0;
}
#leftcol {
width : 260px;
float : right;
padding : 5px 0 5px 0;
}
#leftcol p {
padding : 5px 20px 5px 20px;
margin : 0;
}
#leftcol h2 {
padding : 10px 0 10px 20px;
margin : 0;
font-size : 120%;
text-transform : uppercase;
color : #adae75;
background : inherit;
}
#leftcol ol, ul {
font-size : 90%;
color : #7A7B75;
background : inherit;
}
#content {
margin-right : 0;
width : 460px;
}
#content p {
padding : 5px 20px 5px 30px;
margin : 0;
}
#footer {
width : 750px;
height : 50px;
clear : right;
border-top : 1px solid #666;
background : inherit;
color : #eee;
padding : 5px 0 5px 0;
}
#footer p {
text-align : left;
padding-left : 25px;
font-size : 0.9em;
}
#navcontainer {
width : 200px;
margin-left : 20px;
padding-bottom : 20px;
}
#navcontainer ul {
margin-left : 0;
padding-left : 0;
list-style-type : none;
}
#navcontainer a {
display : block;
padding : 3px;
width : 160px;
background-color : #333;
color : #adae75;
border-bottom : 1px solid #adae75;
}
#navcontainer a:link, #navlist a:visited {
background : inherit;
color : #adae75;
text-decoration : none;
}
#navcontainer a:hover {
background-color : #424a33;
color : #d6ddbc;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Your Site Name Here</h1>
</div>
<div id="title">
<p>Grass Template</p>
</div>
<div id="leftcol">
<h2>Navigate</h2>
<p>Welcome to your two column right sided layout. </p>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="http://www.free-css.com/" id="current">Item one</a></li>
<li><a href="http://www.free-css.com/">Item two</a></li>
<li><a href="http://www.free-css.com/">Item three</a></li>
<li><a href="http://www.free-css.com/">Item four</a></li>
<li><a href="http://www.free-css.com/">Item five</a></li>
</ul>
</div>
<ul>
<li>Lorem ipsum dolor sit amet.</li>
<li>Mauris consectetuer congue ante.</li>
<li>Sed pulvinar consectetuer risus.</li>
<li>Maecenas placerat laoreet nisi.</li>
<li>Donec faucibus ligula non purus.</li>
</ul>
</div>
<div id="content">
<h2>Welcome</h2>
<p><em>All images were created by me so feel free to use them if you wish. The page has been tested in Mozilla and IE6/7. The page validates as XHTML 1.0 Transitional using valid CSS. This is a <a href="http://www.free-css.com/">link</a> to nowhere.</em> For more templates visit <a href="http://www.mitchinson.net">my website</a>.</p>
<p><img src="grass-images/image.jpg" alt="" /> Fusce lorem. Suspendisse sit amet lectus. Nam laoreet, diam vel consequat consequat, eros nunc consectetuer libero, non elementum urna dui sed wisi. Phasellus vitae sapien. Nunc vestibulum malesuada dolor. Phasellus commodo neque nec purus. Praesent nec wisi id augue pulvinar ultrices. Ut malesuada, orci eget bibendum varius, sem ligula ultricies urna, at pharetra justo elit in diam. Vestibulum sit amet felis. In velit. Aenean sagittis pede vitae sem. In hac habitasse platea dictumst. Sed eleifend molestie est. Phasellus enim est, facilisis vel, placerat facilisis, ultricies sit amet, erat. Nullam sit amet velit et wisi dignissim placerat. Phasellus non lorem nec nunc aliquam lobortis. Nullam nec lectus. </p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nec nibh in massa pellentesque scelerisque. Nullam in odio. Curabitur accumsan aliquet leo. Sed id nibh. Sed tempor. Integer ultricies. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nec nibh in massa pellentesque scelerisque. Nullam in odio. Curabitur accumsan aliquet leo. Sed id nibh. Sed tempor. Integer ultricies.</p>
</div>
<div id="footer">
<p><a href="http://www.free-css.com/">homepage</a> | <a href="mailto:denise@mitchinson.net">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" 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