waterfall
<!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>
<meta name="author" content="hfunai (monospace, Inc.)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
/*--------------------------------------------------
* initialize
* -------------------------------------------------- */
* {
margin: 0;
padding: 0;
}
body {
background: url('waterfall-images/background.png') top left repeat-x;
font-size: 100%;
font-family: Arial;
color: #545454;
}
h1,h2,h3,h4,h5,h6 {
color: #2d7799;
padding: 0 0 0 5px;
}
h1 {
margin: 20px 0 0;
font-size: 200%;
}
h1 span {
color: #F01484;
}
h1 a {
color: #FFFFFF;
text-decoration: none;
}
/*--------------------------------------------------
* div#container
* -------------------------------------------------- */
#container {
width: 850px;
margin: 0 auto;
position: relative;
}
/*--------------------------------------------------
* div#metanav
* -------------------------------------------------- */
ul#metanav {
color: #CCCCCC;
position: absolute;
top: 5px;
right: 5px;
font-size: 85%;
list-style-type: none;
}
ul#metanav li {
display: inline;
margin: 0 5px;
}
ul#metanav a {
color: #CCCCCC;
text-decoration: none;
}
ul#metanav a:hover {
color: #FFFFFF;
}
/*--------------------------------------------------
* div#main
* -------------------------------------------------- */
#main {
background: #F7F7F7 url('waterfall-images/contents_background.png') top left repeat-x;
margin: 26px 0 0;
padding: 40px 0 20px;
border: solid 1px #CCCCCC;
position: relative;
}
/*--------------------------------------------------
* div#mainnav
* -------------------------------------------------- */
ul#mainnav {
position: absolute;
top: -19px;
right: 5px;
list-style-type: none;
}
ul#mainnav li {
font-size: 85%;
float: left;
}
ul#mainnav a {
width: 91px;
height: 14px;
margin: 0 0 0 1px;
padding: 3px 0 1px;
border: 0;
text-decoration: none;
}
ul#mainnav *:link,
ul#mainnav *:visited {
text-align: center;
float: left;
background: url('waterfall-images/menu_background_over.png') top center no-repeat;
background: url('waterfall-images/menu_background.png') top center no-repeat;
_background: #333333;
color: #CCCCCC;
}
ul#mainnav *:link:hover,
ul#mainnav *:visited:hover {
background: url('waterfall-images/menu_background_over.png') top center no-repeat;
_background: #000000;
color: #FFFFFF;
}
ul#mainnav .active a:link,
ul#mainnav .active a:visited {
background: url('waterfall-images/menu_background_selected.png') top left no-repeat;
_background: #F7F7F7;
color: #787878;
}
ul#mainnav .active a:link:hover,
ul#mainnav .active *:visited:hover {
}
/*--------------------------------------------------
* div#content
* -------------------------------------------------- */
#content {
margin: 0 0 0 20px;
width: 580px;
float: left;
background: #F7F7F7;
}
#content h2 {
font-size: 120%;
border-bottom: dotted 1px #84adb7;
margin: 0 0 10px;
}
#content p {
margin: 0 0 0 5px;
line-height: 1.5em;
}
/*--------------------------------------------------
* div#download
* -------------------------------------------------- */
#subcontent {
margin: -5px 0 0 20px;
width: 200px;
float: left;
background: #F7F7F7;
}
#subcontent h3 {
background: url('waterfall-images/h3_back.png') top left no-repeat;
height: 65px;
text-align: center;
padding: 30px 0 0;
font-size: 12px;
}
#subcontent dl {
width: 180px;
margin: -30px 0 0 30px;
}
#subcontent dl dt {
margin: 10px 0 0;
font-size: 85%;
font-weight: bold;
color: #000000;
}
#subcontent dl dd {
margin: 0;
font-size: 85%;
}
/*--------------------------------------------------
* div#footer
* -------------------------------------------------- */
#footer {
margin: 10px 0 0;
text-align: center;
font-size: 85%;
}
#footer p {
margin: 5px 0 0;
}
#footer p a {
color: #F01484;
text-decoration: none;
}
#footer p a:hover {
text-decoration: underline;
}
/*--------------------------------------------------
* div.clear
* -------------------------------------------------- */
div.clear {
clear: both;
}
/*
* vim: sw=2
*/
</style>
<title>waterfall theme</title>
</head>
<body>
<div id="container">
<div id="header">
<h1><a href="">Waterfall <span>Theme</span></a></h1>
<ul id="metanav">
<li>»<a href="">Sitemap</a></li>
<li>»<a href="">Contact</a></li>
</ul>
</div>
<div id="main">
<ul id="mainnav">
<li class="active"><a href="">Home</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Products</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Recruit</a></li>
</ul>
<div id="content">
<h2>Waterfall H2 Subtitle</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur id est tincidunt nisl pellentesque tincidunt. Donec in mauris. Mauris neque magna, consectetuer id, malesuada vitae, tincidunt sit amet, mi. Aliquam lacinia. Suspendisse potenti. Proin justo lorem, rutrum ac, facilisis in, malesuada sed, ligula. Mauris lobortis lacus at nibh. Aenean vitae odio vel odio placerat hendrerit. Suspendisse lacus lacus, tempor id, pharetra eget, ornare sit amet, pede. Sed aliquet, justo ac elementum pretium, arcu leo placerat est, a luctus purus diam eget arcu. Nam augue diam, mollis a, scelerisque eget, aliquet condimentum, pede. Vestibulum tristique lectus sed augue.<br /><br />
</p>
<h2>Waterfall Another H2 Subtitle</h2>
<p>
Aenean ut mauris luctus mauris interdum convallis. Nunc vestibulum sodales nulla. Nulla vitae massa. Maecenas vel tellus vitae elit mattis adipiscing. In pulvinar felis sed est. Mauris non mi. Duis ultrices dolor ut orci. Quisque lacinia arcu et purus. Sed euismod metus nec augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc dolor leo, aliquam a, placerat sit amet, accumsan eget, dolor. Sed lacinia augue in magna. Fusce sed enim. Vestibulum et mauris. Phasellus in lectus. Pellentesque eu elit in dolor ullamcorper sodales. Vestibulum interdum ornare ligula. Mauris felis odio, rhoncus sed, adipiscing fermentum, tincidunt eu, metus. Suspendisse viverra rhoncus purus.
</p>
</div>
<div id="subcontent">
<h3>What's New?</h3>
<dl>
<dt>2008.03.17</dt>
<dd>Lorem ipsum dolor sit amet.consectetuer adipiscing elit.</dd>
<dt>2008.03.14</dt>
<dd>Lorem ipsum dolor sit amet.</dd>
<dt>2008.03.14</dt>
<dd>Lorem ipsum dolor sit amet.</dd>
<dt>2008.03.14</dt>
<dd>Lorem ipsum dolor sit amet.</dd>
</dl>
<h3>Recent Entries</h3>
<dl>
<dt>2008.03.17</dt>
<dd>Lorem ipsum dolor sit amet.</dd>
<dt>2008.03.14</dt>
<dd>Lorem ipsum dolor sit amet.</dd>
<dt>2008.03.14</dt>
<dd>Lorem ipsum dolor sit amet.</dd>
<dt>2008.03.14</dt>
<dd>Lorem ipsum dolor sit amet.</dd>
</dl>
</div>
<div class="clear"></div>
</div>
<div id="footer">
<p>Copyright© 2008 your company name All Rights Reserved.</p>
<p>Designed by <a href="http://monospace.jp/">monospace, Inc.</a></p>
<p>Download from <a href="http://free-templates.ru/">free-templates.ru</a></p>
</div>
</div>
</body>
</html>
Related examples in the same category