greenred
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Green&Red</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/
body {
margin: 10px 0;
padding: 0;
background: #95AE36 url(greenred-images/img1.gif) repeat-y center top;
font-family: Arial, Helvetica, sans-serif;
font-size: .8em;
color: #999E88;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
letter-spacing: -2px;
font-family: Georgia, "Times New Roman", Times, serif;
font-variant: small-caps;
color: #C73633;
}
h2 {
padding: 14px 0 0 0;
word-spacing: 5px;
font-size: 2.25em;
}
h3 {
padding: 20px 0 0 0;
border-bottom: 1px solid #95AE36;
word-spacing: 3px;
font-size: 1.85em;
color: #95AE36;
}
a {
color: #95AE36;
}
a:hover {
text-decoration: none;
color: #C73633;
}
.green {
color: #95AE36;
}
.red {
color: #C73633;
}
.gray {
color: #B9ADAC;
}
.image {
float: left;
margin: 0 20px 0 0;
}
.list, .list2c {
margin-left: 0;
padding-left: 0;
list-style: none;
line-height: 2em;
}
.list2c li {
float: left;
width: 50%;
}
/* Header */
#header {
width: 700px;
height: 80px;
margin: 0 auto;
}
#header h1 {
float: left;
padding: 24px 0 0 10px;
letter-spacing: -3px;
font-size: 3.5em;
}
#header h2 {
float: right;
padding: 42px 10px 0 0;
word-spacing: normal;
letter-spacing: -1px;
font-size: 2em;
}
#header a {
text-decoration: none;
}
/* Menu */
#menu {
width: 700px;
height: 30px;
margin: 0 auto;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
display: block;
float: left;
width: 140px;
height: 25px;
padding: 7px 0 0 0;
background: #87A12C url(greenred-images/img2.gif) repeat-x left bottom;
text-align: center;
letter-spacing: -1px;
text-decoration: none;
color: #FFFFFF;
font-variant: small-caps;
font-weight: bold;
}
#menu a:hover {
background: #A71615 url(greenred-images/img3.gif) repeat-x left top;
}
/* Content */
#content {
width: 660px;
margin: 0 auto;
padding: 20px;
}
#colOne {
float: right;
width: 420px;
}
#colTwo {
float: left;
width: 220px;
}
/* Footer */
#footer {
clear: both;
width: 700px;
margin: 20px auto;
padding: 5px 0;
background: #87A12C url(greenred-images/img2.gif) repeat-x left bottom;
font: "Times New Roman", Times, serif;
}
#footer p, #footer a {
margin: 0;
text-align: center;
font-size: 10px;
font-weight: bold;
color: #FFFFFF;
}
</style>
</head>
<body>
<div id="header">
<h1 class="gray"><span class="green">Green</span> & <span class="red">Red</span></h1>
<h2 class="gray">By Free CSS Templates</h2>
</div>
<div id="menu">
<ul>
<li><a href="http://www.free-css.com/" accesskey="1">Homepage</a></li>
<li><a href="http://www.free-css.com/" accesskey="2">My Journal</a></li>
<li><a href="http://www.free-css.com/" accesskey="3">My Pictures</a></li>
<li><a href="http://www.free-css.com/" accesskey="4">My Favorites</a></li>
<li><a href="http://www.free-css.com/" accesskey="5">Contact Me</a></li>
</ul>
</div>
<div id="content">
<div id="colOne">
<h2>Welcome To My Website</h2>
<p><img src="greenred-images/img4.jpg" alt="" width="105" height="95" class="image" /></p>
<p><strong>Green & Red</strong> is a free template from Free CSS Templates released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5 License</a>. The photo to the left is from PDPhoto.org. You're free to use this template for both commercial or personal use. I only ask that you link back to my site in some way. Enjoy :)</p>
<p>Sed vel quam. Vestibulum pellentesque. Morbi sit amet magna ac lacus dapibus mauris sed elit venenatis porttitor. Morbi quam nisl, fringilla quis, sagittis nec, adipiscing at, elit. Maecenas sed sem sit amet.</p>
<h3>Lorem Ipsum Dolorem</h3>
<p>Sed tempus turpis vel quam molestie pulvinar. Suspendisse venenatis dolor semper ipsum. Quisque tempus erat ac mi. Aliquam semper, est nec hendrerit dignissim, ligula turpis sagittis purus, ut viverra velit eros at augue. Pellentesque mi nisi, porta eget, pharetra ac, sollicitudin sit amet, nisi. In sapien ligula lorem sollicitudin facilisis, sodales eget, tempus in, mauris. Cras risus sem, adipiscing non, convallis ac, consectetuer eu, dolor. In quam lorem ipsum dolor sit amet. Curabitur tempus aliquam nulla. Etiam eros.</p>
<ul class="list2c">
<li>Lorem ipsum dolor sit amet</li>
<li>Duis eget ipsum eget nisi semper</li>
<li>Duis blandit dignissim velit</li>
<li>Aenean sit amet massa et eros</li>
<li>Phasellus malesuada feugiat velit</li>
<li>Ut ut sem id ipsum pharetra porttitor</li>
<li>Aenean facilisis risus sit amet</li>
<li>Sed porta neque sed nulla</li>
<li>Nunc volutpat quam a ante</li>
<li>Aliquam dignissim dui quis arcu</li>
<li>Praesent vel velit eu ligula viverra</li>
<li>Cras ultricies metus eu elit</li>
</ul>
</div>
<div id="colTwo">
<h3>Veroeros Etiam</h3>
<ul class="list">
<li><a href="http://www.free-css.com/">Lorem ipsum dolor sit amet</a></li>
<li><a href="http://www.free-css.com/">Duis eget ipsum eget nisi semper</a></li>
<li><a href="http://www.free-css.com/">Duis blandit dignissim velit</a></li>
<li><a href="http://www.free-css.com/">Aenean sit amet massa et eros</a></li>
<li><a href="http://www.free-css.com/">Phasellus malesuada feugiat velit</a></li>
<li><a href="http://www.free-css.com/">Ut ut sem id ipsum pharetra porttitor</a></li>
<li><a href="http://www.free-css.com/">Aenean facilisis risus sit amet purus</a></li>
<li><a href="http://www.free-css.com/">Sed porta neque sed nulla</a></li>
<li><a href="http://www.free-css.com/">Nunc volutpat quam a ante</a></li>
<li><a href="http://www.free-css.com/">Aliquam dignissim dui quis arcu</a></li>
<li><a href="http://www.free-css.com/">Praesent vel velit eu ligula viverra</a></li>
<li><a href="http://www.free-css.com/">Cras ultricies metus eu elit</a></li>
<li><a href="http://www.free-css.com/">In non augue eu enim lacinia tempus</a></li>
<li><a href="http://www.free-css.com/">Donec blandit eros eleifend pede</a></li>
<li><a href="http://www.free-css.com/">Integer sollicitudin nisi eget lorem</a></li>
<li><a href="http://www.free-css.com/">Fusce quis sapien sed neque sodales</a></li>
<li><a href="http://www.free-css.com/">Suspendisse condimentum fringilla</a></li>
<li><a href="http://www.free-css.com/">Quisque id elit id odio venenatis</a></li>
<li><a href="http://www.free-css.com/">Integer auctor facilisis mi</a></li>
<li><a href="http://www.free-css.com/">Donec ultricies ultrices diam</a></li>
<li><a href="http://www.free-css.com/">Praesent at urna et magna vehicula</a></li>
</ul>
</div>
</div>
<div id="footer">
<p>Copyright (c) 2006 Sitename.com. All Rights Reserved. Design by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
</div>
</body>
</html>
Related examples in the same category