waterfalls
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
Title : Water Falls
Version : 1.0
Released : 20070408
Description: A two-column layout featuring fluid design. Suitable for blogs and small business websites.
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Water Falls by Free Css Templates</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<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: 0;
padding: 0;
background: #A4CB7A url(waterfalls-images/img01.jpg) no-repeat;
font: normal medium Georgia, "Times New Roman", Times, serif;
color: #000000;
}
h1, h2, h3 {
color: #114403;
}
h1 { font-size: 2.2em; }
h2 { font-size: 1.4em; }
h3 { font-size: 1.0em; }
p, blockquote, ul, ol {
line-height: 1.8em;
}
blockquote, ul, ol {
}
blockquote {
}
a {
color: #114403;
}
a:hover {
text-decoration: none;
color: #000000;
}
img { border: none; }
img.left {
float: left;
margin: 0 1em 1em 0;
}
img.right {
float: right;
margin: 0 1em 0 1em;
}
hr { display: none; }
.hr {
}
/* Logo */
#logo {
height: 100px;
}
#logo h1 {
float: left;
margin: 40px 0 0 20px;
padding: 0 0 0 35px;
background: url(waterfalls-images/img03.gif) no-repeat left center;
}
#logo h2 {
float: right;
margin: 0;
padding: 52px 20px 0 0;
}
#logo a {
text-decoration: none;
color: #FFFFFF;
}
/* Page */
#page {
float: left;
padding: 20px;
}
/* Content */
#content {
margin-right: 240px;
}
#welcome {
padding-bottom: 20px;
}
/* Sidebar */
#sidebar {
position: absolute;
right: 0;
top: 120px;
float: right;
width: 200px;
padding: 20px;
}
#sidebar h2 {
font-size: 1.2em;
}
#sidebar blockquote {
margin-left: 0;
margin-right: 0;
}
/* Menu */
#menu {
margin-bottom: 19px;
}
#menu h2 {
display: none;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
}
#menu li {
display: block;
border-top: 1px dotted #006600;
}
#menu li.first {
border: none;
}
#menu a {
display: block;
width: 165px;
padding: 7px 10px 7px 0;
text-transform: uppercase;
background: url(waterfalls-images/img08.gif) no-repeat 10px 50%;
text-decoration: none;
letter-spacing: 1px;
font-size: x-small;
font-weight: bold;
}
#menu a:hover {
text-decoration: underline;
}
/* Footer */
#footer {
clear: both;
padding: 20px 0;
border-top: 1px dotted #006600;
}
#footer p {
margin: 0;
text-align: center;
font-size: x-small;
color: #000000;
}
#footer a {
color: #000000;
}
</style>
</head>
<body>
<div id="logo">
<h1><a href="#">Water Falls</a></h1>
<h2><a href="http://www.freecsstemplates.org/">By Free CSS Templates</a></h2>
</div>
<div id="page">
<div id="content">
<div id="welcome">
<p style="margin: 0;"><img src="waterfalls-images/img02.jpg" alt="" width="160" height="200" class="left" /></p>
<h2 class="title">Welcome to Water Falls!</h2>
<p><strong>Water Falls</strong> is a free template from <a href="http://www.freecsstemplates.org/">Free CSS Templates</a> released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5 License</a>. The photos are from <a href="http://www.pdphoto.org/">PDPhoto.org</a>. You're free to use it for both commercial or personal use. I only ask that you link back to my site in some way. <em>Enjoy :)</em></p>
</div>
<!-- end #welcome -->
<div style="clear: left;">
<h2>Examples of Common Tags</h2>
<div class="content">
<p>This is an example of a paragraph followed by a blockquote:</p>
<blockquote>
<p>“Pellentesque tristique ante ut risus. Quisque dictum. Integer nisl risus, sagittis convallis, rutrum id, elementum congue, nibh. Suspendisse dictum porta lectus. Donec placerat odio.”</p>
</blockquote>
<h3>Heading Level Three</h3>
<p>In posuere eleifend odio. Quisque semper augue mattis wisi. Maecenas ligula. Pellentesque viverra vulputate enim. Aliquam erat volutpat. Pellentesque tristique ante ut risus. Quisque dictum. Integer nisl risus, sagittis convallis, rutrum id, elementum congue, nibh.</p>
</div>
</div>
</div>
<!-- end #content -->
<div id="sidebar">
<div id="menu">
<h2>Navigation Menu</h2>
<ul>
<li class="first"><a href="#" accesskey="1" title="">Homepage</a></li>
<li><a href="#" accesskey="2" title="">About Us</a></li>
<li><a href="#" accesskey="3" title="">Product Catalog</a></li>
<li><a href="#" accesskey="4" title="">Our Services</a></li>
<li><a href="#" accesskey="5" title="">Customer Support</a></li>
<li><a href="#" accesskey="6" title="">Community Forums</a></li>
<li><a href="#" accesskey="7" title="">Contact Us</a></li>
</ul>
</div>
<!-- end #menu -->
<div class="boxed">
<h2 class="title">A Sidebar's Blockquote</h2>
<div class="content">
<blockquote>
<p>“Quisque dictum integer nisl risus, sagittis convallis, rutrum id, congue, and nibh. Donec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum.”</p>
</blockquote>
</div>
</div>
</div>
<!-- end #sidebar -->
<div style="clear: both; height: 1px;"></div>
</div>
<!-- end #page -->
<div id="footer">
<p id="legal">Copyright © 2007 Water Falls. All Rights Reserved. Designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
<p id="links"><a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a></p>
</div>
</body>
</html>
Related examples in the same category