grasse
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Created by: Reality Software | www.realitysoftware.ca
Released by: Flash Gallery | www.flash-gallery.org
Note: This is a free template released under the Creative Commons Attribution 3.0 license,
which means you can use it in any way you want provided you keep links to authors intact.
Don't want our links in template? You can pay a link removal fee: www.realitysoftware.ca/templates/
You can also purchase a PSD-file for this template.
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type='text/css'>
body {margin:0; font-size:12px; line-height:16px; font-family:Arial, Helvetica, sans-serif; background:url(grasse-images/body_bckg.jpg) repeat-x #120C0C;}
a {text-decoration:none;}
a:hover {text-decoration:underline;}
h1 {text-transform:uppercase; font-size:20px; font-weight:normal; padding:20px 0 10px 0; margin:0;}
#header {width:1000px; margin:0 auto; background:url(grasse-images/head_bckg.jpg) no-repeat; padding:225px 0 10px 0;}
#menu ul {padding:0; margin:0; text-align:center;}
#menu li {display:inline; padding:14px 10px 13px 10px; list-style:none;}
#menu a {font-weight:bold; font-size:14px; text-decoration:none; color:#BDFDAF;}
#menu a:hover, #menu a.active {color:#FFFFFF;}
#main {width:940px; margin:0 auto; background:url(grasse-images/main.jpg) no-repeat right bottom; color:#F0FCBB;}
#main a {color:#C78940;}
#main h1 {color:#B4EBFB;}
#sidebar {float:left; width:240px; padding:30px 40px 30px 0; font-size:10px; line-height:10px; color:#866655;}
#sidebar img {border:5px solid #6B5647;}
#text {float:right; width:660px; padding:10px 0 30px 0;}
#main_2 {background:url(grasse-images/main_2_long.jpg) repeat-x bottom #F1FCBC; clear:both;}
#main_2_inner {background:url(grasse-images/main_2.jpg) repeat-x bottom; color:#443E38; width:940px; margin:0 auto; padding:10px 0 30px 0;}
#main_2 a {color:#92643A;}
#main_2 h1 {color:#000000;}
#main_3 {background-color:#F7FCFC;}
#main_3_inner {width:940px; margin:0 auto; background:url(grasse-images/main_3_long.jpg) repeat-x top; padding:10px 0 30px 0;}
#main_3 a {color:#C78940;}
#footer {background:url(grasse-images/footer_long.jpg) repeat-x; color:#6D3F26;}
#footer_inner {margin:0 auto; width:940px; height:91px; background:url(grasse-images/footer.jpg) no-repeat right top;}
#footer a {color:#98532E;}
#left_footer {float:left; padding-top:40px;}
#right_footer {float:right; padding-top:40px;}
</style>
</head>
<body>
<!-- header -->
<div id="header">
<div id="menu">
<ul>
<li><a href="#" class="active">home</a></li>
<li><a href="#">about us</a></li>
<li><a href="#">services</a></li>
<li><a href="#">pricing</a></li>
<li><a href="#">contacts</a></li>
</ul>
</div>
</div>
<!--end header -->
<!-- main -->
<div id="main">
<div id="sidebar">
<img src="grasse-images/picture.jpg" alt=""/><br/><br/>
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.<br/><br/><br/>
<img src="grasse-images/picture.jpg" alt=""/><br/><br/>
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.
</div>
<div id="text">
<h1>Welcome</h1>
<b>Grasse</b> is a free template created by <a href="http://www.realitysoftware.ca/">Reality Software</a> and released by <a href="http://www.flash-gallery.org/">Flash Gallery</a> 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.
<h1>Lorem ipsum</h1>
Suspendisse egestas tincidunt erat. Maecenas nisi eros, volutpat a, sagittis vitae, semper vestibulum, nibh. Integer euismod ante et ipsum:
<ul>
<li>Praesent hendrerit tincidunt metus.</li>
<li>Sed pellentesque est in mi.</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
</ul>
Proin tellus lacus, luctus vitae, ultrices vel, tincidunt vitae, quam. Proin sed enim. Nullam lobortis. Phasellus nec urna sit amet nibh iaculis consequat. Integer euismod ante et ipsum. Suspendisse egestas tincidunt erat.
<h1>Fusce aliquet</h1>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam pharetra tempus nunc. Donec feugiat lorem nec odio. Mauris vitae nisi sed mi rhoncus ultrices. Fusce aliquet <a href="#">lobortis ipsum</a>. Cras tempus arcu a dolor. Morbi libero. Duis nisi nunc, fermentum in, vulputate sit amet, bibendum sed, tellus. Aenean sagittis. Phasellus pellentesque.
</div>
</div>
<div id="main_2"><div id="main_2_inner">
<h1>Lorem ipsum</h1>
Suspendisse egestas tincidunt erat. Proin tellus lacus, luctus vitae, ultrices vel, tincidunt vitae, quam. <a href="#">Proin sed enim</a>. Nullam lobortis. Phasellus nec urna sit amet nibh i aculis consequat. Maecenas nisi eros, volutpat a, sagittis vitae, semper vestibulum, nibh. Integer euismod ante et ipsum. 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 i aculis consequat. Maecenas nisi eros, volutpat a, sagittis vitae, semper vestibulum, nibh:
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Quisque lacinia, est non pretium rutrum, libero arcu ultrices lacus.</li>
</ul>
Integer euismod ante et ipsum. Suspendisse egestas tincidunt erat. Proin tellus lacus, luctus vitae, ultrices vel, tincidunt vitae, quam. Proin sed enim. Nullam lobortis. <a href="#">Phasellus nec urna</a> sit amet nibh iaculis consequat. Maecenas nisi eros, volutpat a, sagittis vitae, semper vestibulum, nibh. Integer euismod ante et ipsum.
</div></div>
<div id="main_3"><div id="main_3_inner">
<h1>Fusce aliquet</h1>
Suspendisse egestas tincidunt erat. Proin tellus lacus, luctus vitae, ultrices vel, tincidunt vitae, quam. <a href="#">Proin sed enim</a>. Nullam lobortis. Phasellus nec urna sit amet nibh i aculis consequat. Maecenas nisi eros, volutpat a, sagittis vitae, semper vestibulum, nibh. Integer euismod ante et ipsum. 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 i aculis consequat. Maecenas nisi eros, volutpat a, sagittis vitae, semper vestibulum, nibh. Integer euismod ante et ipsum. Suspendisse egestas tincidunt erat. Proin tellus lacus, luctus vitae, ultrices vel, tincidunt vitae, quam. Proin sed enim. Nullam lobortis. <a href="#">Phasellus nec urna</a> sit amet nibh iaculis consequat.
Maecenas nisi eros, volutpat a, sagittis vitae, semper vestibulum, nibh. Integer euismod ante et ipsum.
</div></div>
<!-- end main -->
<!-- footer -->
<div id="footer"><div id="footer_inner">
<div id="left_footer">© Copyright 2009 Your Website</div>
<div id="right_footer">Downloaded from <a href="http://css4free.com/">Free CSS Gallery</a>
<!-- Please do not change or delete these links. Read the license! Thanks. :-) -->
<a href="http://www.realitysoftware.ca/services/website-development/design/">Website design</a> released by <a href="http://www.flash-gallery.org/">Flash Gallery</a>.</div>
</div></div>
<!-- end footer -->
</body>
</html>
Related examples in the same category