subdued
<!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>Subdued</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
*/
* {
margin: 0;
padding: 0;
}
body {
background: #FFFFFF url(subdued-images/img01.gif) repeat-x;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 13px;
color: #666666;
}
h1, h2, h3 {
color: #333333;
}
h1, h2 {
margin-bottom: 20px;
font-weight: normal;
}
h1 {
font-size: 197%;
}
h2 {
font-size: 152%;
}
h3 {
font-size: 100%;
}
p, ul, ol {
margin-bottom: 20px;
line-height: 1.8em;
}
ul, ol {
margin-left: 3em;
}
blockquote {
padding-left: 3em;
background: url(subdued-images/img08.gif) no-repeat;
font-style: italic;
}
a:link {
color: #1953A7;
}
a:active {
color: #ED5C0C;
}
a:visited {
color: #666666;
}
a:hover {
text-decoration: none;
color: #067600;
}
img {
border: none;
}
img.left {
float: left;
margin: 0 20px 10px 0;
}
/* Menu */
#menu {
width: 770px;
height: 65px;
margin: 0 auto;
border-right: 1px solid #EDEBD5;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
display: block;
float: left;
width: 109px;
height: 45px;
padding: 20px 0 0 0;
border-left: 1px solid #EDEBD5;
text-transform: lowercase;
text-decoration: none;
text-align: center;
font-size: 144%;
color: #BABABA;
}
#menu a:hover {
background: #F7F7F4;
}
#menu .active a {
background: #82BC2B;
color: #FFFFFF;
}
/* Header */
#header {
width: 770px;
height: 170px;
margin: 0 auto;
}
#header h1 {
float: left;
width: 220px;
height: 100px;
margin: 0;
padding: 70px 0 0 0;
background: url(subdued-images/img02.jpg) no-repeat;
text-align: center;
font-size: 36px;
}
#header h2 {
float: right;
width: 530px;
height: 86px;
margin: 0;
background: url(subdued-images/img03.jpg) no-repeat;
padding: 84px 20px 0 0;
text-align: right;
}
#header a {
text-transform: lowercase;
text-decoration: none;
font-style: italic;
font-weight: normal;
color: #FFFFFF;
}
/* Page */
#page {
width: 770px;
margin: 0 auto;
padding: 20px 0;
}
/* Content */
#content {
float: left;
width: 550px;
padding-top: 10px;
}
.post {
margin-bottom: 20px;
padding: 0 20px;
}
.hr {
border-bottom: 1px solid #EDEBD5;
}
/* Sidebar */
#sidebar {
float: right;
width: 210px;
padding: 5px;
background: #EDEBD5;
}
#sidebar h2 {
margin: 0;
padding: 5px 15px;
color: #FFFFFF;
}
#sidebar h3 {
font-size: 85%;
color: #FFFFFF;
}
#sidebar ul {
margin: 0;
padding: 15px;
list-style: none;
}
#sidebar li {
}
#sidebar a {
color: #FFFFFF;
}
.bluebox {
background: url(subdued-images/img05.gif) repeat-y;
}
.bluebox h2 {
background: url(subdued-images/img06.gif) repeat-y;
}
/* Footer */
#footer {
clear: both;
height: 100px;
padding: 25px 0;
background: #EDEBD5 url(subdued-images/img04.gif) repeat-x;
}
#footer p {
margin: 0;
text-align: center;
font-size: 77%;
}
#footer a {
color: #666666;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">Products</a></li>
<li><a href="http://www.free-css.com/">Services</a></li>
<li><a href="http://www.free-css.com/">Forums</a></li>
<li class="active"><a href="http://www.free-css.com/">Support</a></li>
<li><a href="http://www.free-css.com/">About</a></li>
<li><a href="http://www.free-css.com/">Contact</a></li>
</ul>
</div>
<!-- end #menu -->
<div id="header">
<h1><a href="http://www.free-css.com/">Subdued</a></h1>
<h2><a href="http://www.free-css.com/">By Free CSS Templates</a></h2>
</div>
<!-- end #header -->
<div id="page">
<div id="content">
<div class="post hr">
<h1>Welcome to <em>Subdued!</em></h1>
<img src="subdued-images/img07.jpg" alt="" width="120" height="120" class="left" />
<p><strong>Subdued</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 photos are from <a href="http://www.free-css.com/">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>
<p>An ordered list example:</p>
<ol>
<li>List item number one</li>
<li>List item number two</li>
<li>List item number thre</li>
</ol>
</div>
<div class="post">
<h2>Lorem Ipsum Dolor</h2>
<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. Suspendisse dictum porta lectus. Donec placerat odio vel elit. Nullam ante orci, pellentesque eget, tempus quis, ultrices in, est. Curabitur sit amet nulla. Nam in massa. Sed vel tellus.</p>
<h3>Curabitur Sem Urna</h3>
<p>Vel consequat, suscipit in, mattis placerat, nulla. Sed ac leo. Pellentesque imperdie:</p>
<blockquote>
<p>In posuere eleifend odio quisque semper augue mattis wisi maecenas ligula. Donec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum. Quisque dictum integer nisl risus, sagittis convallis, rutrum id, congue, and nibh. </p>
</blockquote>
</div>
</div>
<!-- end #content -->
<div id="sidebar">
<div id="updates" class="bluebox">
<h2>Recent Updates</h2>
<ul>
<li>
<h3>May 31, 2007</h3>
<p><a href="http://www.free-css.com/">In posuere eleifend odio quisque semper augue mattis wisi maecenas ligula…</a></p>
</li>
<li>
<h3>May 26, 2007</h3>
<p><a href="http://www.free-css.com/">Quisque dictum integer nisl risus, sagittis convallis, rutrum id, congue, and nibh…</a></p>
</li>
<li>
<h3>May 22, 2007</h3>
<p><a href="http://www.free-css.com/">Donec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum…</a></p>
</li>
<li>
<h3>May 17, 2007</h3>
<p><a href="http://www.free-css.com/">Nam pede erat, porta eu, lobortis eget, tempus et, tellus. Etiam nequea…</a></p>
</li>
<li>
<h3>May 14, 2007</h3>
<p><a href="http://www.free-css.com/">Vivamus fermentum nibh in augue. Praesent a lacus at urna congue rutrum. Nulla enim eros…</a></p>
</li>
</ul>
</div>
</div>
<!-- end #sidebar -->
<div style="clear: both;"> </div>
</div>
<!-- end #page -->
<div id="footer">
<p id="legal">Copyright © 2007 Red Avenue. All Rights Reserved. Designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
<p id="links"><a href="http://www.free-css.com/">Privacy Policy</a> | <a href="http://www.free-css.com/">Terms of Use</a></p>
</div>
<!-- end #footer -->
</body>
</html>
Related examples in the same category