greensteps
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en-GB" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Greensteps</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
/*--- RESET STYLES from Eric Meyer ---*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }
:focus { outline: 0; }
ol, ul { list-style: none; }
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }
strong { font-weight: bold; }
/*--- STARTING STYLES ---*/
body { font: normal 76% Arial,sans-serif; text-align: center; color: #333; background: #f8f8f8 url('greensteps-images/bg-gradient.gif') 0 3em repeat-x; }
p { margin: 0; padding: 0; }
a, a:visited { color: #87ae12; }
a:hover { text-decoration: none; }
#header { position: relative; }
#header h1 { font: bold 5em "Trebuchet MS", sans-serif; margin: 0; padding: 0.3em 0 0 0; color: #79B30B; }
#header h1 span { font: normal 0.8em Arial, sans-serif; color: #333; }
#header h2 { font: italic 2em "Georgia", serif; margin: 0 0 1em 0; padding: 0; }
#header a { position: absolute; right: 0; top: 23px; }
h3 { font: italic 2.2em "Georgia", serif; color: #87ae12; }
/*--- IMAGES CLASSES ---*/
img.alignright { padding: 4px; margin: 0 0 2px 15px; display: inline; border: 0; }
img.alignleft { padding: 4px; margin: 0 15px 2px 0; display: inline; border: 0; }
img.centered { display: block; margin-left: auto; margin-right: auto; border: 0; }
.alignright { float: right; }
.alignleft { float: left }
/*--- NAVIGATION ---*/
#nav { margin: 0; padding: 10px; text-align: center; font: normal 2em Verdana, sans-serif; background-color: #333; }
#nav ul li { display: inline; }
#nav ul li a { display: inline; color: #fff; padding: 10px; text-decoration: none; }
#nav ul li a:hover { text-decoration: underline; }
#nav #current { background: transparent url('greensteps-images/indicator.gif') 50% 100% no-repeat; }
#container { text-align: left; width: 700px; margin: 0 auto; }
#container a { font-weight: bold; }
/*--- CONTENT ---*/
#content { float: left; width: 325px; margin: 0 50px 3em 0; }
#content h3, #extra-content h3 { line-height: 40px; background: transparent url('greensteps-images/herbs.gif') no-repeat; padding: 0 0 0 50px; margin: 0.5em 0 1em 0; }
#container p, #content p { line-height: 1.4; text-align: justify; margin: 2em 1em; }
#extra-content { float: left; width: 325px; }
#extra-content ul { list-style-type: square; list-style-position: inside; }
#extra-content ul li { padding: 1em; border-bottom: 1px dotted #999; }
fieldset { padding-left: 1em; }
.button { background-color: #87ae12; border: none; color: #f8f8f8; }
/*--- FOOTER ---*/
#footer { clear: both; width: 100%; color: #333; background-color: #333; }
#footer p { margin: 0; padding: 1em 10px; color: #f8f8f8; }
#footer a { font-weight: bold; }
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="http://www.free-css.com/" id="current" accesskey="h">HOME</a></li>
<li><a href="http://www.free-css.com/" accesskey="s">SOLUTIONS</a></li>
<li><a href="http://www.free-css.com/" accesskey="j">JOIN US</a></li>
<li><a href="http://www.free-css.com/" accesskey="c">CONTACT</a></li>
</ul>
</div>
<div id="container">
<div id="header">
<h1>GREEN<span>steps</span></h1>
<h2>be part of the solution, not of the problem</h2>
</div>
<img src="greensteps-images/ghostly_smoke.jpg" width="690" height="310" alt="" class="centered" />
<p><strong>GREENsteps</strong> is a free and valid XHTML / CSS based website template. It is released under a <a target="_blank" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 Licence</a>. This means you can use it for personal or commercial projects. The only thing I ask is a link back to my website (doesn't have to be in the footer, any link will do), http://arnaudvalle.free.fr/. </p>
<p>The image is from <a href="http://www.sxc.hu/profile/carloszk">Carlos Zaragoza</a>. That's it, hope you like it.</p>
<div id="content">
<h3>Who we are</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec vehicula dui sed arcu. Phasellus sed tortor. Sed placerat, sapien nec porta ultricies, neque neque ornare tortor, in aliquam urna orci sed erat. Etiam molestie tristique nunc. Nulla vel libero. Curabitur fringilla mi sed nisl. Nullam rutrum auctor nibh. Mauris quam urna, porttitor eu, bibendum non, scelerisque eget, ipsum. Proin est purus, venenatis eu, vulputate in, iaculis quis, odio. Sed eu pede. Integer facilisis posuere diam. Nam posuere ante pharetra tortor. Fusce id diam. Morbi nonummy egestas felis. Curabitur erat lacus, sodales nec, sollicitudin quis, sagittis eu, nulla. Ut hendrerit semper erat. Nam dictum diam at orci luctus faucibus. Vestibulum et dolor.</p>
<p>Sed aliquam mattis eros. Nulla dictum convallis augue. Nullam viverra dictum quam. Cras ut massa ac est tristique volutpat. Nam facilisis est bibendum turpis. Suspendisse et pede. Nunc non erat. Proin mattis. Maecenas tincidunt tempus turpis. Fusce et quam at felis vehicula fringilla.</p>
</div>
<div id="extra-content">
<h3>What <strong>YOU</strong> can do</h3>
<ul>
<li>Switch off your screen when away from your desk</li>
<li>Switch off your computer overnight (and at weekends at work)</li>
<li>Share printers between colleagues</li>
<li>Use natural light and energy-efficient light bulbs</li>
<li>Walk / cycle to work or car-share</li>
</ul>
<h3>Get our newsletter</h3>
<form method="post" action="http://www.free-css.com/">
<fieldset>
<input type="text" id="newsletter" name="newsletter" />
<input type="submit" id="submit" name="submit" class="button" value="Subscribe" />
</fieldset>
</form>
</div>
</div>
<div id="footer">
<p>© 2007 Website.com. Valid <a target="_blank" href="http://validator.w3.org/check?uri=referer">XHTML</a> & <a target="_blank" href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>. Website template by <a href="http://arnaudvalle.free.fr">Arnaud Valle</a></p>
</div>
</body>
</html>
Related examples in the same category