a_leaf
<!--
'A Leaf' design by Greg Smith - http://gregdev.net
Please leave the 'designed by' link intact and visible; that's all I ask!
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type='text/css'>
/* 'A Leaf' CSS - http://gregdev.net */
body {
font-size: 10pt;
font-family: Tahoma, sans-serif;
color: #000;
background: #f4f5f0;
text-align: center;
}
/* content wrapper */
#wrap {
color: #303030;
margin: 0 auto;
width: 750px;
background: #d9ebc3 url('a_leaf-images/bg.jpg') no-repeat;
text-align: left;
}
/* title */
#title {
padding-top: 20px;
margin-left: 20px;
text-align: left;
color: #5e8fbd;427bb0
height: 100px;
}
#title h1 {
font-size: 60pt;
font-weight: normal;
margin: 0;
}
#title a, a :visited {
color: #5e8fbd;
text-decoration: none;
}
#title a:hover, a:visited:hover {
color: #427bb0;
text-decoration: none;
}
/* main content */
#content {
margin: 10px 0 0 5px;
padding: 10px;
line-height: 1.8em;
width: 600px;
color: #222;
min-height: 350px;
float: left;
}
h1 {
font-size: 2em;
color: #cd6918;
}
h2 {
font-size: 1.4em;
color: #cd6918;
}
.quote {
color: #000;
opacity: 0.5;
filter: alpha(opacity=50);
background: #b3d686;
width: 500px;
margin: 0 auto;
padding: 5px;
}
/* side menu */
#side {
margin: 20px 0 10px 0;
line-height: 1.8em;
width: 105px;
color: #000000;
float: right;
text-align: right;
float: left;
}
#side ul {
list-style: none;
margin: 0;
padding: 0;
}
.item {
color: #000;
display: block;
background: #a6cca1;
border: blue 1px solid;
margin: 10px 5px 5px 5px;
padding-right: 2px;
opacity: 0.5;
filter: alpha(opacity=50);
width: 110px;
text-decoration: none;
font-weight: bold;
font-size: 0.9em;
}
.item:hover {
background: #f0b600;
color: #000;
text-decoration: none;
}
.itemsub {
color: #000;
font-size: 0.8em;
display: block;
background: #a6da87;
border: blue 1px solid;
margin: 5px 5px 0px 15px;
padding-right: 2px;
opacity: 0.5;
filter: alpha(opacity=50);
width: 100px;
text-decoration: none;
font-weight: bold;
}
.itemsub:hover {
background: #f0d307;
color: #000;
text-decoration: none;
}
/* image footer */
#footer {
background: url('a_leaf-images/foot.gif');
width: 750px;
height: 23px;
}
.clear {
clear: both;
margin: 0;
padding: 0;
height: 0;
overflow: hidden;
}
/* bottom stuff (copyright message, etc) */
#bottom {
font-size: 8pt;
padding: 15px;
color: #595d8e;
line-height: 0.5em;
text-align: center;
}
#bottom a {
color: #595d8e;
text-decoration: underline;
}
#bottom a:hover {
text-decoration: none;
}
#bottom img {
margin: 5px;
border: 0;
}
/* hyperlinks */
a {
text-decoration: underline;
color: #1267bc;
}
a:hover {
text-decoration: underline;
color: #d96b12;
}
/* tables */
table {
border: 1px solid blue;
text-align: left;
font-size: 1em;
}
td {
border: 1px solid blue;
padding: 0;
}
/* input */
input {
border: 1px solid #f0b600;
background: #a6da87;
}
</style>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<title>A Leaf</title>
</head>
<body>
<div id="wrap">
<div id="title">
<h1><a href="#">A Leaf</a></h1>
</div>
<div id="content">
<h1>Welcome</h1>
<p>This design makes use of a somewhat underused item in the technical community: a leaf.
The original image is from <a href="http://www.freeimages.co.uk">FreeImages</a>; I just used my very limited
PhotoShop skills to hack it up a bit.</p>
<h2>An H2 Subheading</h2>
<p>This design is valid XHTML 1.1. Unfortunately, due to the opacity of the menu buttons, the CSS will
not validate. "Opacity" is a CSS3 valid object, however Internet Explorer 6, as usual, doesn't
recognise the opacity element. A proprietary IE opacity object has been used to create the same opacity effect
in IE, but this will cause CSS validation to fail. If you are a validation Nazi you can easily remove
the IE opacity effect; the design will work without it.
But people using Internet Explorer should be given more reason to upgrade :)</p>
<p class="quote">This design is released under the Creative Commons license. Do what you will with it;
the only thing I request in return is that you leave the link to my Web site intact.</p>
<p>The leaf background image is only 788 pixels high, but your content can go for as long as you want.
Once the image ends, a nice green colour will fade in. You can also add more items to the menu; just
make sure you change the minimum height of the #content div.</p>
</div>
<div id="side">
<ul>
<li><a class="item" href="#">A Section</a></li>
<li><a class="itemsub" href="#">A Page</a></li>
<li><a class="itemsub" href="#">Another Page</a></li>
<li><a class="itemsub" href="#">A Page Again</a></li>
<li><a class="item" href="#">A Section Again</a></li>
<li><a class="itemsub" href="#">Look, a Page</a></li>
<li><a class="itemsub" href="#">This is a Page</a></li>
<li><a class="itemsub" href="#">Also a Page</a></li>
<li><a class="item" href="#">A Third Section</a></li>
<li><a class="itemsub" href="#">Pages Galore</a></li>
<li><a class="itemsub" href="#">Page of Blah</a></li>
</ul>
</div>
<div class="clear"></div>
<div id="footer"></div>
</div>
<div id="bottom">
<p>© 2009 Your Name Here</p>
<p><a href="http://gregdev.net">Web design</a> by <a href="http://gregdev.net">Greg Smith</a></p>
</div>
</body>
</html>
Related examples in the same category