dewdrops
<!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>Dew Drops</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
body {
font-family:"Trebuchet MS", Tahoma, Verdana, sans-serif;
font-size:11px;
color:#006633;
margin: 0;
background: #004100 url(dewdrops-images/bodybg.gif) repeat-y left;
}
#container {
width:600px;
}
#header-{
background-image:url(dewdrops-images/dewdrops.jpg);
width:400px;
height:250px;
border-bottom:2px solid #004100;
}
#header-h1 {
font-family: "Trebuchet MS", Tahoma, Verdana, sans-serif;
font-size:42px;
letter-spacing:3px;
font-weight:normal;
color: #FDFDE0;
margin:0;
padding: 5px 0 0 10px;
text-align: right;
display: block;
}
#right {
float:right;
width:185px !important;
width:183px;
margin:0 5px 0 0 !important;
margin:0 3px 0 0;
}
#right p {
color:#FDFDE0;
line-height:16px;
padding:5px;
margin: 0;
}
#right .comment {
background-color:#FDFDE0;
border:1px solid #98a878;
color:#768656;
padding: 5px;
margin: 5px 10px 5px 10px;
}
#right h1 {
color:#FDFDE0;
font-family:"Trebuchet MS", Tahoma, Verdana, sans-serif;
font-weight:normal;
font-size:18px;
padding: 10px 5px 5px 5px;
margin: 0;
}
ul#menu {
margin:0;
padding:0;
}
ul#menu li {
list-style:none;
margin:0;
padding:0;
}
ul#menu li a {
display:block;
width: 155px;
background:#008800 url(dewdrops-images/b1.gif) no-repeat top left;
border-top:2px solid #669537;
border-bottom:2px solid #669537;
padding:2px 5px 5px 25px;
margin: 1px 0 1px 0 !important;
margin: 0;
color:#FDFDE0;
font-family:"Trebuchet MS", Tahoma, Verdana, sans-serif;
font-weight:bold;
text-transform:uppercase;
font-size:14px;
letter-spacing: 1px;
text-decoration:none;
}
ul#menu li a:hover {
border-top:2px solid #9FCB74;
background:#008800 url(dewdrops-images/b2.gif);
}
#main {
width:400px;
}
#main img {
float:left;
margin: 10px;
background-color:#006633;
padding:4px;
}
#main h1 {
font-family: "Trebuchet MS", Tahoma, Verdana, sans-serif;
color:#004100;
font-weight:normal;
font-size:20px;
letter-spacing:3px;
padding: 5px 20px 1px 0;
border-bottom: 1px solid #006633;
margin: 5px 20px 5px 10px;
}
#main p {
padding:5px 20px 5px 10px;
line-height:17px;
margin: 0;
}
#main li {
list-style-image:url(dewdrops-images/ul.gif);
line-height:15px;
}
a {
font-weight:bold;
text-decoration:none;
color:#004100;
padding: 0;
}
a:hover {
background-color:#FDFDE0;
border-bottom:1px solid #006633;
}
.footer {
padding:5px 20px 5px 10px;
background-color:#FDFDE0;
color:#006633;
text-align: right;
display: block;
}
.footer a {
color:#333;
}
.footer a:hover {
background-color:#004100;
color:#FDFDE0;
}
#farright {
float:right;
position: absolute;
top: 0;
left: 601px;
width:160px !important;
width:157px;
margin: 0;
color: #FDFDE0;
}
#farright h3 {
padding: 5px;
margin: 0;
text-align: center;
font-size: 20px;
display: block;
}
#farright p {
padding: 5px;
margin: 0;
text-align: center;
display: block;
}
#farright a {
color: #9FCB74;
background-color: #FDFDE0;
border: 0;
text-decoration: none;
}
#farright a:hover {
color: #006633;
background-color: #FDFDE0;
}
#farright span {
background-color: #FDFDE0;
border: 1px solid #669537;
padding: 2px;
color: #004100;
}
*{
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div id="container">
<!-- container start -->
<div id="right">
<!-- right side start-->
<ul id="menu">
<!-- menu start -->
<li><a href="http://www.free-css.com/">Home</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>
<li><a href="http://www.free-css.com/">Link 4</a></li>
<li><a href="http://www.free-css.com/">Link 5</a></li>
</ul>
<!-- menu end -->
<h1>Site News</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi tortor enim, molestie in, egestas vitae, venenatis id, neque. Fusce purus turpis, laoreet sit amet, convallis ut, eleifend quis, massa. Nulla erat. Aenean gravida magna id diam. Donec sodales nunc id nibh. Phasellus nisl. Quisque augue ante, ornare sit amet, imperdiet vitae, fermentum et, felis. Nullam et orci. In congue gravida dui. Mauris at erat eu tortor interdum malesuada.<br />
<a href="http://www.free-css.com/">Read more...</a></p>
<h1>Comment</h1>
<div class="comment">
<!-- right comment -->
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi tortor enim, molestie in, egestas vitae, venenatis id, neque. Fusce purus turpis, laoreet sit amet, convallis ut, eleifend quis, massa.<br />
<a href="http://www.free-css.com/">Read more...</a> </div>
<!-- end right comment -->
</div>
<!-- end right side -->
<div id="header">
<!-- begin header--->
<h1>Dew Drops</h1>
</div>
<!-- end header--->
<div id="main">
<!-- begin main -->
<h1>Template Info</h1>
<img src="dewdrops-images/leaf2.gif" alt="" width="100" height="100" border="0" />
<p>This template was inspired by the wonderful template called "Autumn" by "JayKay", who was one of the winners of OWD's fall contest. I hope you like my version. Dew Drops has been tested on Firefox 1.5.0.1 and IE6 and it is valid XHTML transitional and CSS. It's completely open source so there's no usage restrictions, but please email me at karen[at]karenblundell[dot]com if you do use it. I love to see how my Designs are being used. Enjoy!</p>
<p>Random text...lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi tortor enim, molestie in, egestas vitae, venenatis id, neque. Fusce purus turpis, laoreet sit amet, convallis ut, eleifend quis, massa. Nulla erat. Aenean gravida magna id diam. Donec sodales nunc id nibh. Phasellus nisl. Quisque augue ante, ornare sit amet, imperdiet vitae, fermentum et, felis. Nullam et orci. In congue gravida dui. </p>
<p>Example of a list:</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<h1>Another Header</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi tortor enim, molestie in, egestas vitae, venenatis id, neque. Fusce purus turpis, laoreet sit amet, convallis ut, eleifend quis, massa. Nulla erat. Aenean gravida magna id diam. Donec sodales nunc id nibh. Phasellus nisl. Quisque augue ante, ornare sit amet, imperdiet vitae, fermentum et, felis. Nullam et orci. In congue gravida dui. </p>
<div class="footer">
<!-- begin footer -->
Copyright© 2006 Your Company<br />
Template Design by <a href="http://www.karenblundell.com">Karen Blundell (aka arwen54)</a>. </div>
<!-- end footer -->
</div>
<!-- end main -->
</div>
<!-- end container -->
<div id="farright">
<!-- begin far right...can be used for google ads -->
<h3>G</h3>
<h3>0</h3>
<h3>O</h3>
<h3>G</h3>
<h3>L</h3>
<h3>E</h3>
<h3>A</h3>
<h3>D</h3>
<h3>S</h3>
<p><span><a href="http://validator.w3.org/check?uri=referer">Valid XHTML</a> ~ <a href="http://jigsaw.w3.org/css-validator/">Valid CSS</a></span></p>
</div>
<!-- end far right -->
</body>
</html>
Related examples in the same category