gradientis
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Gradientis</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
body {margin:0; font-size:11px; line-height:16px; font-family:Arial, Tahoma, Helvetica, sans-serif; background-color:#000000; color:#FFFFFF;}
a {color:#fdc605; text-decoration:none;}
a:hover {text-decoration:underline;}
img {border:none;}
h1 {font-size:24px; font-weight:bold; font-style:italic; color:#96ff00;}
#all {background:url(gradientis-images/body_bckg.jpg) repeat-x #60ce1a;}
#container {width:960px; margin:0 auto;}
#header {background:url(gradientis-images/head_bckg.jpg) no-repeat #000000; height:186px;}
#logo {padding:40px 25px; width:215px; float:left; text-align:center;}
#logo a {color:#FFFFFF; text-decoration:none; font-size:16px; text-transform:uppercase;}
#head {float:right; width:690px;}
#head p {font-size:10px; color:#999999; line-height:10px; margin:0; padding:0 20px;}
#head ul {list-style:none; padding:0; margin:30px 0; height:75px;}
#head ul li {float:left; padding:0 18px;}
#head a {display:block; width:192px; height:48px; color:#FFFFFF; text-decoration:none; background:url(gradientis-images/text_top_bckg.jpg) no-repeat; text-transform:uppercase; text-align:center; padding-top:28px; font-size:15px;}
#head a:hover {background:url(gradientis-images/text_top_bckg_over.jpg) no-repeat;}
#main {background:url(gradientis-images/textarea_bckg.jpg) no-repeat #000000; float:left; width:100%; min-height:250px;}
#menu {float:left; width:215px; padding:25px;}
#menu ul {list-style:none; padding:0; margin:0;}
#menu a {font-size:14px; font-style:italic; text-decoration:none; color:#FFFFFF; display:block; width:180px; height:20px; padding:5px 10px 0 10px; border-bottom:1px solid #4c4c4c; text-transform:lowercase;}
#menu a:hover {background-color:#1c1c1c;}
#text {padding:15px 20px 20px 290px;}
#footer {background:url(gradientis-images/footer_text.jpg) no-repeat #000000; height:16px; color:#858383; font-size:11px; padding:59px 30px 0 30px; clear:both;}
#left_footer {float:left;}
#right_footer {float:right;}
#bottom {background:url(gradientis-images/footer_bckg.jpg) repeat-x #000000;}
#bottom_center {width:960px; margin:0 auto; background:url(gradientis-images/center_foot.jpg) no-repeat #000000; height:191px;}
</style>
<!--[if IE 6]> <style> #main {height:250px;} </style> <![endif]-->
</head>
<body>
<div id="all">
<div id="container">
<div id="header">
<div id="logo"><a href="http://www.free-css.com/"><img src="gradientis-images/logo.gif" alt=""/><br/>
<br/>
Gradientis</a></div>
<div id="head">
<ul>
<li><a href="http://www.free-css.com/">Lorem</a></li>
<li><a href="http://www.free-css.com/">Ipsum</a></li>
<li><a href="http://www.free-css.com/">Dolor</a></li>
</ul>
<p>Suspendisse egestas tincidunt erat. Proin tellus lacus, luctus vitae, ultrices vel, tincidunt vitae, quam. Proin sed enim. Nullam lobortis. Phasellus nec urna sit amet nibh iaculis consequat. Maecenas nisi eros, volutpat a, sagittis vitae, semper vestibulum, nibh. Integer euismod ante et ipsum.</p>
</div>
</div>
<div id="main">
<div id="menu">
<ul>
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">About us</a></li>
<li><a href="http://www.free-css.com/">Services</a></li>
<li><a href="http://www.free-css.com/">Pricing</a></li>
<li><a href="http://www.free-css.com/">Contacts</a></li>
</ul>
</div>
<div id="text">
<h1>Welcome</h1>
<p><b>Gradientis </b> is a free template created by Reality Software and released by Flash Gallery under the <a href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0</a> license, which means you can use it in any way you want provided you keep links to authors intact.</p>
<h1>Lorem ipsum</h1>
<p>Suspendisse egestas tincidunt erat. Proin tellus lacus, luctus vitae, ultrices vel, tincidunt vitae, quam. Proin sed enim. Nullam lobortis. Phasellus nec urna sit amet nibh iaculis consequat. Maecenas nisi eros, volutpat a, sagittis vitae, semper vestibulum, nibh. Integer euismod ante et ipsum.</p>
<ul>
<li>Praesent hendrerit tincidunt metus. </li>
<li>Proin vel felis a urna <a href="http://www.free-css.com/">tempus lobortis</a>.</li>
<li> Sed pellentesque est in mi.</li>
<li> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </li>
<li>Quisque lacinia, est non pretium rutrum, libero arcu ultrices lacus. </li>
</ul>
<p>Suspendisse egestas tincidunt erat. Proin tellus lacus, luctus vitae, ultrices vel, tincidunt vitae, quam. Proin sed enim. Nullam lobortis. Phasellus nec urna sit amet nibh iaculis consequat. Maecenas nisi eros, volutpat a, sagittis vitae, semper vestibulum, nibh. Integer euismod ante et ipsum.</p>
</div>
</div>
<div id="footer">
<div id="left_footer">© Copyright 2008 Your Website</div>
<div id="right_footer"> <a href="http://www.realitysoftware.ca/website-design.html">Web design</a> released by <a href="http://www.flash-gallery.org">Flash Gallery</a> </div>
</div>
</div>
</div>
<div id="bottom">
<div id="bottom_center"></div>
</div>
</body>
</html>
Related examples in the same category