greenery
<?xml version="1.0" encoding="UTF-8"?>
<!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">
<head>
<title>Free CSS Templates - Free Template Greenery</title>
<meta name="description" content="Free CSS Templates features free templates from website template designers and developers throughout the net." />
<meta name="keywords" content="Free CSS Templates, CSS Website Templates, Templates, Free Templates, CSS" />
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<style type='text/css'>
/***************************************************
AUTHOR: Pat Heard ( FullAhead.org )
TEMPLATE: Greenery
DATE: 2005.11.30
COPYRIGHT: none
***************************************************/
/***************************************************
HTML Element Styles
***************************************************/
body {
margin: 0;
text-align: center;
font: 0.62em verdana, arial, sans-serif;
line-height: 170%;
color: #EEE;
background: #585858 url(greenery-images/bg_body.jpg) repeat-y top center;
}
p {
padding-top: 10px !important;
padding-top: 3px;
padding-bottom: 10px !important;
padding-bottom: 3px;
}
a {
color: #86E160;
}
a:visited {
color: #AAA;
}
a:hover {
color: #FFF;
}
acronym {
cursor: help;
border-bottom: 1px solid #777;
}
input {
width: 70%;
}
textarea {
width: 98%;
/*
IE specific to eliminate scroll bar when not needed.
Uncomment if wanted, but it is not valid CSS
scrollbar-3dlight-color : #777;
scrollbar-arrow-color : #EEE;
scrollbar-darkshadow-color : #777;
scrollbar-face-color : #777;
scrollbar-highlight-color : #777;
scrollbar-shadow-color : #777;
scrollbar-track-color : #777;
*/
}
input,
textarea {
padding: 1px 3px;
margin: 5px 0;
font: 1em verdana, arial, sans-serif;
color: #EEE;
background-color: #777;
border: 1px solid #999;
}
input:hover,
input:focus,
textarea:hover,
textarea:focus {
color: #FFF;
background-color: #999;
border: 1px solid #EEE;
}
h1 {
clear: both;
margin: 10px 0;
font: 700 1em verdana, sans-serif;
text-transform: uppercase;
color: #7BD32C;
background: #686868 url(greenery-images/rounded_tr.gif) no-repeat top right;
}
h1 span {
display: block;
padding: 2px;
background: url(greenery-images/rounded_br.gif) no-repeat bottom right;
}
#sideBar h1 {
text-align: right;
background: #686868 url(greenery-images/rounded_tl.gif) no-repeat top left;
}
#sideBar h1 span {
display: block;
padding: 2px;
background: url(greenery-images/rounded_bl.gif) no-repeat bottom left;
}
#content ol li {
color: #9BE4FF;
}
#content ol li span {
color: #EEE;
}
#content ul {
padding-bottom: 10px;
}
#content ul li {
list-style-image: url(greenery-images/li_bullet.gif);
}
blockquote {
margin: 0;
background: #686868 url(greenery-images/rounded_tr.gif) no-repeat top right;
}
blockquote span {
display: block;
padding: 5px;
background: url(greenery-images/rounded_br.gif) no-repeat bottom right;
}
/***************************************************
Layout Element Styles
***************************************************/
#header {
width: 100%;
height: 3em;
background: #585858 url(greenery-images/bg_header.jpg) repeat-y top center;
}
/***************************************************
header-Menu
***************************************************/
#menu {
width: 767px;
margin: 0 auto;
text-align: left;
}
#menu ul {
margin: 0;
padding: 0;
line-height: normal;
}
#menu ul li {
width: 8em;
display: inline;
float: left;
padding-top: 0.8em;
list-style: none;
text-align: center;
}
#menu ul li a {
display: block;
text-decoration: none;
text-transform: uppercase;
padding-bottom: 1.0em;
color: #222;
}
#menu ul li a:hover,
#menu ul li a.active {
font-weight: bold;
color: #111;
background: url(greenery-images/menu_tab.gif) no-repeat bottom center;
}
/***************************************************
Site Title
***************************************************/
#title {
padding: 0.6em 55px 0.6em 0;
margin-right: 0.5em;
float: right;
background: url(greenery-images/logo_greenery.gif) no-repeat top right;
}
#title h1 {
display: inline;
color: #222;
background-color: #86E160;
background-image: none;
}
/***************************************************
Page Content
---------------------------------------------------
1. Left side text
2. Dropdown image
3. Right side bar
***************************************************/
#content {
clear: both;
width: 767px;
margin: 0 auto;
text-align: left;
}
#text {
float: left;
width: 410px !important;
width: 437px;
padding: 10px 5px 20px 20px !important;
padding: 20px 5px 20px 20px;
}
#image {
float: left;
width: 170px;
vertical-align: top;
}
#sideBar {
float: right;
width: 145px !important;
width: 160px;
padding: 10px 15px 20px 0 !important;
padding: 20px 15px 20px 0;
}
/***************************************************
Sidemenu Styles
***************************************************/
.sideMenu {
padding: 10px 0;
}
.sideMenu a {
display: block;
text-align: right;
text-decoration: none;
margin-bottom: 1px;
}
.sideMenu a span {
display: block;
padding: 1px;
}
.sideMenu a:hover {
background: #686868 url(greenery-images/rounded_tl.gif) no-repeat top left;
}
.sideMenu a:hover span {
background: url(greenery-images/rounded_bl.gif) no-repeat bottom left;
}
/***************************************************
Comment Styles
***************************************************/
#comments p {
padding: 0 5px;
margin-bottom: 0;
background: #686868 url(greenery-images/rounded_tl.gif) no-repeat top left;
}
#comments p span.author {
display: block;
margin-top: 5px;
text-align: right;
font-weight: 700;
}
#comments img {
margin-top: -1px;
}
#comments a {
color: #7BD32C;
}
#comments a:visited {
color: #AAA;
}
#comments a:hover {
color: #FFF;
}
/***************************************************
Footer
***************************************************/
#footer {
clear: both;
float: left;
width: 500px;
padding: 10px 20px;
color: #888;
}
#footer p {
padding-top: 0 !important;
padding-top: 10px;
}
#footer a {
color: #888;
}
#footer a:hover {
color: #EEE;
}
a.fullAhead {
float: left;
width: 30px;
height: 34px;
margin-right: 10px;
background: url(greenery-images/logo_fullahead.gif) no-repeat 0 0;
}
a:hover.fullAhead {
background-position: -30px 0;
}
/***************************************************
Generic Display Classes
***************************************************/
.center {
text-align: center;
}
.noPad {
padding: 0;
margin: 0;
}
.left {
float: left;
}
.right {
float: right;
}
img.left {
padding: 5px 5px 5px 0;
}
img.right {
padding: 5px 0 5px 5px;
}
.button {
width: auto;
cursor: pointer;
}
.date {
display: block;
font-weight: 700;
}
</style>
</head>
<body>
<div id="header">
<div id="menu">
<ul>
<li><a href="http://www.free-css.com/" class="active">Home</a></li>
<li><a href="http://www.free-css.com/">Link</a></li>
<li><a href="http://www.free-css.com/" style="width: 8.7em;">Support</a></li>
<li><a href="http://www.free-css.com/">Photos</a></li>
<li><a href="http://www.free-css.com/" style="width: 7em;">Contact</a></li>
</ul>
<div id="title">
<h1>Greenery</h1>
</div>
</div>
</div>
<div id="content">
<div id="text">
<h1><span>Greenish Template</span></h1>
<p> This template is tableless <acronym title="eXtensible Hypertext Markup Language">XHTML</acronym>/<acronym title="Cascading Style Sheet">CSS</acronym> that validates as 1.1 strict. It uses relative widths so that it handles browser font <acronym title="CTRL + Mousewheel">+/-</acronym> without any troubles. The vertical plant image is easy to switch for one of your own, as is the accent colour. To change the green header, you'll need to update these two images: </p>
<ul>
<li><b>bg_header.jpg</b>: the top, tiling, header-background.</li>
<li><b>menu_tab.gif</b>: the menu tab that comes up onmouseover.</li>
</ul>
<h1><span>Features</span></h1>
<p> Included in the template are styles for a right side <a href="menu.html">news & submenu section</a> or a comments section (shown in this version). The code is <acronym title="coded as the markup was Designed to be used">semantically</acronym> written so it's clean and easy to modify. The CSS is coded so that elements derive their style from their context, rather than classes. This adds to the readability of the source. </p>
<p> The plant photo was taken by icefront and has no usage restrictions. The repeating pattern is from squidfingers and is also free use, but I'm sure both of them would appreciate a link back. The rest was created by me and is open source. If you use any of it, I'd appreciate credit, but it isn't required. </p>
<h1><span>Winter Blues</span></h1>
<p> This template was started on the day it began snowing....it's going to be a long 6 months before I see this colour again. If you do end up finding a use for the template, send me a message. It's always interesting to see my templates in action. </p>
</div>
<div id="image"><img src="greenery-images/plants.jpg" alt="plants"/></div>
<div id="sideBar">
<h1><span>Comments</span></h1>
<div id="comments">
<p> This would be some comment text. Thrilling. <span class="author"><a href="http://www.free-css.com/">Pat</a>, Nov 23rd</span> </p>
<img src="greenery-images/comment_bg.gif" alt="comment bottom"/>
<p> Goodness, more comment text? That's crazy talk... <span class="author"><a href="http://www.free-css.com/">snop</a>, Nov 24th</span> </p>
<img src="greenery-images/comment_bg.gif" alt="comment bottom"/>
<p> Comments are hawt, but if you wanted a submenu, you could <a href="menu.html">look here</a>. <span class="author"><a href="http://www.free-css.com/">Bort</a>, Nov 29th</span> </p>
<img src="greenery-images/comment_bg.gif" alt="comment bottom"/> </div>
<h1><span>Your Turn</span></h1>
<p>
<input type="text" value="Name"/>
<input type="text" value="URL"/>
<textarea rows="5" cols="">Comment</textarea>
<input type="submit" value="Submit" class="button" />
</p>
</div>
<div id="footer"> <a href="http://fullahead.org" class="fullAhead"></a>
<p>Valid <a href="http://validator.w3.org/check?uri=referer" title="validate XHTML">XHTML</a> & <a href="http://jigsaw.w3.org/css-validator">CSS</a></p>
</div>
</div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script type="text/javascript">
_uacct = "UA-159243-24";
urchinTracker();
</script>
</body>
</html>
Related examples in the same category