earthy
<!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>EARTHY</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
html, body {
margin : 0;
padding : 0;
}
body {
color : #a52a2a;
background : #404040;
width : 100%;
font : 76% "Trebuchet MS", Tahoma, Arial, Helvetica, sans-serif;
}
/* Links within paragraphs (subtle) */
p a {
color: #666666;
background : inherit;
text-decoration: none;
}
/* Links within paragraphs (revealed) */
p a:hover {
color: #0000ff;
background : inherit;
text-decoration: underline;
}
#container {
width : 750px;
margin : 0 auto;
padding : 5px;
background: #E4DCB2 url(earthy-images/bgd.jpg) repeat;
color : #333;
line-height : 1.5em;
}
/* TOP TITLE BAR */
#top {
margin:0;
padding : 0;
color:#333;
background : #404040 url(earthy-images/head.jpg) no-repeat;
border-bottom : 0px solid #fff;
height:144px;
}
#top h1 {
padding : 30px 0px 0 25px;
margin : 0;
font : 100% Helvetica, "Trebuchet MS", Arial,Tahoma, sans-serif;
letter-spacing:5px;
text-align:left;
color:#EAE8D0;
background:transparent;
}
#top p {
padding : 5px;
font-size: .8em;
}
#top a:link, #top a:visited {
color: #EAE8D0;
background:transparent;
text-decoration: none;
}
#top a:hover {
color: #fff;
background:transparent;
text-decoration: underline;
}
/* LEFT SIDEBAR */
#leftnav {
float : left;
width : 160px;
margin : 0;
padding : 5px;
border-right:0px solid #520934 ;
color : #EAE8D0;
background : #9C9473;
}
#content {
margin :10px 0 0 180px;
padding : 10px;
}
#footer {
clear : both;
margin : 0 ;
padding : .5em;
color : #EAE8D0;
background : #404040;
border-top : 0px solid #520934;
}
#footer a:link, #footer a:visited {
font-size: .9em;
color : #eee;
background : inherit;
text-decoration : none;
}
#footer a:hover {
font-size: .9em;
color :#fff;
background:inherit;
text-decoration : underline;
}
#leftnav p {
margin : 5px 0 10px 5px;
}
h2 {
margin : 0;
padding : 20px 0 5px 5px;
font : 150% Helvetica, "Trebuchet MS", Arial,Tahoma, sans-serif;
letter-spacing:5px;
border-bottom: 1px solid #656C4A;
color:#656C4A;
background:inherit;
}
h3 {
margin : 0;
padding : 20px 0 5px 10px;
font : 130% Helvetica, "Trebuchet MS", Arial,Tahoma, sans-serif;
color:#EAE8D0;
background:inherit;
}
#footer img {
float : right;
}
/* seen by IE5mac only, by Philippe Wittenbergh www.l-c-n.com */
*>html #footer img {
margin : 0;
}
/* end */
.happy {
border-top : 1px solid #808080;
padding : 10px;
}
a:link, a:visited {
font-size: .9em;
color : #000;
background : inherit;
text-decoration : none;
}
a:hover {
font-size: .9em;
color :#666;
background : inherit;
text-decoration : underline;
}
a:active {
font-size: .9em;
color : #F5DE1E;
background : inherit;
text-decoration : none;
}
img {
border : none;
}
.imgright {
float: right;
border: 1px solid #656C4A;
margin: 5px 15px 10px 10px;
padding: 10px;
}
.imgleft {
float: left;
border: 1px solid #656C4A;
margin: 5px 15px 10px 0px;
padding: 10px;
}
#menu {
width: 100%;
height: 23px;
margin: 0 0 0 0;
padding: 0 0 1px 0;
background: #A6C3AD url(earthy-images/pt02.jpg) no-repeat;
color:#000;
}
#navlist li {
list-style-type: square;
background: inherit;
color: #5F5C51;
margin: 0 15px 0 0;
padding: 0;
}
#gallery {
height:100px;
}
#gallery img {
float: left;
padding: 20px;
}
.clear {
clear: left;
}
.quote {
width: 130px;
margin: 0;
border : 1px dashed #fff;
padding : 10px;
color:#656C4A;
background: #E4DCB2;
font-size: .8em;
}
blockquote {
font-weight : bold;
font-style : italic;
color : #AC7D39;
}
.search {
background: #E4DCB2;
color: #000;
border-top: 1px solid #F0E9DD;
border-bottom: 1px solid #F0E9DD;
clear: both;
text-align: left;
padding: 5px 0 5px 0;
}
form {
margin: 0;
}
input.search {
width: 80px;
border: none;
color: #000;
background: url(earthy-images/input.gif);
padding: 4px;
}
input.login {
width: 80px;
border: none;
background: url(earthy-images/logininput.gif);
padding: 4px;
}
</style>
<link href="menu.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 7]>
<style type="text/css" media="screen">
#menuh{float:none;}
body{behavior:url(csshover.htc); font-size:75%;}
#menuh ul li{float:left; width: 100%;}
#menuh a{height:1%;font:normal 1em/1.6em "Trebuchet MS", helvetica, arial, sans-serif;}
</style>
<![endif]-->
</head>
<body>
<div id="container">
<div id="top">
<p><a href="http://www.free-css.com/">Homepage</a> | <a href="http://www.free-css.com/"> Contact </a></p>
<h1>Your Company Name</h1>
</div>
<div id="menuh-container">
<div id="menuh">
<ul>
<li><a href="http://www.free-css.com/" class="top_parent"> Homepage</a>
<ul>
<li><a href="http://www.free-css.com/">• About</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="http://www.free-css.com/" class="top_parent"> Gallery 1</a>
<ul>
<li><a href="http://www.free-css.com/">• Link 1</a></li>
<li><a href="http://www.free-css.com/">• Link 2</a></li>
<li><a href="http://www.free-css.com/">• Link 3</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="http://www.free-css.com/" class="top_parent"> Gallery 2</a>
<ul>
<li><a href="http://www.free-css.com/">• Link 1</a></li>
<li><a href="http://www.free-css.com/">• Link 2</a></li>
<li><a href="http://www.free-css.com/">• Link 3</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="http://www.free-css.com/" class="top_parent"> Gallery 3</a> </li>
</ul>
<ul>
<li><a href="http://www.free-css.com/" class="top_parent"> Resources</a> </li>
</ul>
<ul>
<li><a href="http://www.free-css.com/" class="top_parent"> Contact</a> </li>
</ul>
</div>
</div>
<div id="leftnav">
<h3>Quote</h3>
<p class="quote">"You can't depend on your eyes if your imagination is out of focus" ~ Mark Twain</p>
<h3>Links</h3>
<div id="nav">
<ul id="navlist">
<li><a href="http://www.free-css.com/">Item 1</a></li>
<li><a href="http://www.free-css.com/">Item 2</a></li>
<li><a href="http://www.free-css.com/">Item 3</a></li>
<li><a href="http://www.free-css.com/">Item 4</a></li>
<li><a href="http://www.free-css.com/">Item 5</a></li>
<li><a href="http://www.free-css.com/">Item 6</a></li>
<li><a href="http://www.free-css.com/">Item 7</a></li>
</ul>
</div>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis ligula. Donec tortor purus, ornare vel, tincidunt at, lacinia ac, leo. Nunc fermentum congue odio. Mauris cursus, pede vitae sagittis luctus, dolor felis aliquam arcu, ac pulvinar lacus massa non ipsum. </p>
<h3>Search</h3>
<div class="search">
<form method="post" action="http://www.free-css-com/">
<p>
<input type="text" name="search" class="search" />
<input type="submit" value="Search" class="searchSubmit" />
</p>
</form>
</div>
</div>
<div id="content">
<h2>Welcome to <span style="color:#AC7D39;">Earthy</span> Template</h2>
<blockquote>All images were created by me so feel free to use them if you wish. The page 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" title="my website">my website</a>.</blockquote>
<p><img class="imgright" src="earthy-images/img1.jpg" alt="" /> This is a <a href="http://www.free-css.com/">link</a> to nowhere. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed id felis eu urna mollis auctor. Nam eget sapien. In nec ante ut urna commodo auctor. Etiam nibh. Maecenas a metus. Nam at lacus id felis vestibulum accumsan. Aenean purus sapien, eleifend in, pharetra vel, commodo aliquam, mi. Aliquam egestas arcu a orci. Ut vulputate sem et urna. Praesent sit amet elit. Duis augue felis, molestie non, malesuada nonummy, laoreet sit amet, magna. Donec nec lorem. Nullam fringilla, augue eu laoreet condimentum, massa justo molestie lacus, eget commodo diam mi vitae pede. Morbi blandit posuere pede. </p>
<h2>News</h2>
<p><span style="float:left;color:#656C4A;font-size:50px;line-height:35px;padding-top:2px;font-family: Times, Georgia,serif;"> O</span>ctober 01st 2006.<br />
<br />
Aliquam erat volutpat. Vivamus tempus. Aliquam vel nunc. Aliquam felis. Proin purus. Maecenas ultrices, lectus quis posuere placerat, erat pede rhoncus mi, a mattis felis metus ut purus. Praesent nec mauris ac dolor facilisis adipiscing. Praesent tempus turpis a risus. Morbi congue. Etiam et lacus et lacus mattis luctus. Vestibulum sed odio non lacus suscipit blandit. Pellentesque tincidunt odio sit amet lorem. Sed at libero a erat aliquet fermentum.</p>
<h2>Random Pics </h2>
<div id="gallery"> <img src="earthy-images/img3.jpg" alt="" /> <img src="earthy-images/img3.jpg" alt="" /> <img src="earthy-images/img3.jpg" alt="" /> <img src="earthy-images/img3.jpg" alt="" /> </div>
<div class="clear"></div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis ligula. Donec tortor purus, ornare vel, tincidunt at, lacinia ac, leo. Nunc fermentum congue odio. Mauris cursus, pede vitae sagittis luctus, dolor felis aliquam arcu, ac pulvinar lacus massa non ipsum. Praesent volutpat, felis in consectetuer lobortis, nibh orci nonummy quam, nec lobortis tellus purus eget turpis.</p>
</div>
<div id="footer"> <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> </div>
</div>
</body>
</html>
Related examples in the same category