postscriptum
<!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>PostScriptum | Free Web Template by WebTemplateOcean.com</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="language" content="en" />
<style type='text/css'>
/*
designed by WebTemplateOcean.com
http://www.webtemplateocean.com/
released under Creative Commons Attribution-ShareAlike 3.0 license
*/
* {
margin: 0;
padding: 0;
}
body {
padding: 40px 0;
font: 14px Georgia, Times, serif;
color: #333333;
background: #4E1C10 url('postscriptum-images/bg.gif') repeat-x;
}
h1 {
padding: 50px 0 0 30px;
font-size: 48px;
font-weight: normal;
text-shadow: 0 1px 1px #FCF9F3;
letter-spacing: -2px;
color: #0E2F72;
}
h1 a, h1 a:hover {
color: #0E2F72;
text-decoration: none;
}
h2 {
font-weight: normal;
color: #3F4D6A;
}
p {
padding: 10px 0;
line-height: 1.6em;
}
p#subtitle {
padding-left: 30px;
font-size: 24px;
text-shadow: 0 1px 1px #F3ECE9;
letter-spacing: -1px;
color: #5B2611;
}
a {
color: #A84C2E;
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
ul {
list-style: none;
}
ul li {
line-height: 1.6em;
}
/* page */
#page {
width: 950px;
margin: 0 auto;
}
/* header */
#header {
height: 200px;
margin: 0 25px;
background: #C7C2B2 url('postscriptum-images/header.jpg') no-repeat;
}
/* menu */
#menu {
height: 74px;
background: #521E11 url('postscriptum-images/menu.gif') no-repeat;
}
#menu ul {
list-style: none;
padding: 0 25px;
}
#menu ul li {
display: block;
float: left;
padding: 0 1px 0 0;
}
#menu ul li a {
display: block;
float: left;
padding: 0 50px;
font-size: 16px;
line-height: 74px;
text-decoration: none;
color: #FFFFFF;
}
#menu ul li a.active, #menu ul li a:hover {
color: #CCCCCC;
background: #7C321C url('postscriptum-images/menuover.gif') repeat-x;
}
#topimg {
height: 480px;
background: #020202 url('postscriptum-images/img.jpg') no-repeat;
}
/* main */
#main {
margin: 0 25px;
padding: 0 30px;
background: #C7C2B2 url('postscriptum-images/main.jpg') repeat;
}
/* sidebar */
#sidebar {
float: left;
width: 270px;
padding: 30px 0 10px 0;
}
#sidebar h2 {
font-size: 22px;
}
#sidebar .box {
padding: 10px 0 40px 0;
}
#sidebar ul {
padding: 20px 0 50px 0;
}
#sidebar ul li {
padding: 3px 0 3px 25px;
color: #959ED6;
background: url('postscriptum-images/arrow.gif') no-repeat 0 9px;
}
#sidebar ul li a {
padding: 0;
color: #A84C2E;
}
/* content */
#content {
float: right;
width: 550px;
padding: 30px 0 10px 0;
}
#content .post {
padding: 0 0 45px 0;
}
#content h2 {
font-size: 32px;
padding: 0;
letter-spacing: -1px;
color: #3F4D6A;
}
#content h2 a {
color: #3F4D6A;
text-decoration: none;
}
#content .entry {
padding: 10px 0 0 0;
}
p.postmeta {
color: #6C6C6C;
}
/* bottom */
#bottom {
background: #3E4E6C url('postscriptum-images/bottom.jpg') no-repeat top;
}
#bottom2 {
padding: 0 25px 50px 25px;
background: url('postscriptum-images/bottom2.jpg') no-repeat bottom;
}
#bottom h2 {
font-size: 16px;
font-weight: bold;
line-height: 60px;
color: #AACEEE;
}
.col {
float: left;
width: 215px;
padding-right: 10px;
}
.col ul {
padding: 20px 0 30px 0;
}
.col ul li {
padding: 3px 0;
}
.col ul li a {
padding: 0;
color: #CACFDA;
}
.clearing {
clear: both;
height: 1px;
overflow: hidden;
}
/* footer */
#footer {
clear: both;
height: 106px;
margin: 0 25px;
padding: 30px 30px 0 30px;
background: #C7C2B2 url('postscriptum-images/footer.jpg') no-repeat;
}
#footer p {
float: right;
width: 600px;
font-size: .93em;
text-align: right;
}
</style>
</head>
<body>
<div id="page">
<div id="header">
<h1><a href="#">PostScriptum</a></h1>
<p id="subtitle">Template designed by WebTemplateOcean.com</p>
</div>
<div id="menu">
<ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="topimg">
</div>
<div id="main">
<div id="sidebar">
<h2>Quisque luctus</h2>
<ul>
<li><a href="#">Fusce laoreet, ligula et rhoncus</a></li>
<li><a href="#">Adipiscing gravida pulvinar eget</a></li>
<li><a href="#">Cras consectetur commodo</a></li>
<li><a href="#">Vulputate aliquam ipsum dictum</a></li>
<li><a href="#">Vestibulum imperdiet accumsan</a></li>
</ul>
<h2>Integer rhoncus</h2>
<div class="box">
<p>Mauris sollicitudin tincidunt magna vitae semper. Curabitur ut pharetra quam. Integer rhoncus convallis urna vitae mattis. Sed pharetra massa ac metus fermentum et iaculis enim accumsan.</p>
</div>
<h2>Mauris sagittis</h2>
<ul>
<li><a href="#">Suspendisse faucibus purus</a></li>
<li><a href="#">Tincidunt nec accumsan</a></li>
<li><a href="#">Fusce laoreet, ligula et rhoncus</a></li>
<li><a href="#">Adipiscing gravida pulvinar eget</a></li>
<li><a href="#">Cras consectetur commodo</a></li>
</ul>
</div><!-- sidebar -->
<div id="content">
<div class="post">
<h2><a href="#">Terms of Use</a></h2>
<p class="postmeta">Posted in <a href="#">Class apent</a> | May 12, 2011 | <a href="#">4 comments</a></p>
<div class="entry">
<p>The template is released under <a href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution</a> license. So you are free to use it for personal or commercial purposes, modify it or redistribute as long as you keep the link back to WebTemplateOcean.com in the footer.</p>
<p>Under no circumstances can you use the template for websites with illegal or immoral (even if legal) content. This includes, but is not limited to pornography, obscenity, homosexuality, abortion, violence, drugs, gambling.</p>
<p>The template contains a public domain image from <a href="http://www.publicdomainpictures.net/">PublicDomainPictures.net</a>. Although public domain pictures are free and with no obligation to credit their authors you should keep in mind that in some cases they may infringe trademark, property or any other rights of others. Therefore, it is you who has to decide whether to use the image, especially if your website will be a commercial one... <a href="#">more</a></p>
</div>
</div>
<div class="post">
<h2><a href="#">Lorem ipsum dolor sit amet</a></h2>
<p class="postmeta">Posted in <a href="#">Lorem ipsum</a> | May 10, 2011 | <a href="#">2 comments</a></p>
<div class="entry">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec dui quis urna sollicitudin sodales. Fusce laoreet, ligula et rhoncus volutpat, felis magna varius tortor, ac molestie diam lorem in lectus. Aliquam venenatis mollis est, a porttitor ipsum interdum nec. Vestibulum sed risus ac nulla viverra pharetra... <a href="#">more</a></p>
</div>
</div>
</div><!-- content -->
<div class="clearing"> </div>
</div><!-- main -->
<div id="bottom"><div id="bottom2">
<div class="col">
<h2>Pellentesque blandit</h2>
<ul>
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Consectetuer adipiscing</a></li>
<li><a href="#">Nulla hendrerit lacus</a></li>
<li><a href="#">Maecenas venenatis</a></li>
<li><a href="#">Class aptent taciti</a></li>
<li><a href="#">torquent per conubia nostra</a></li>
</ul>
</div>
<div class="col">
<h2>Class aptent taciti</h2>
<ul>
<li><a href="#">Mauris tincidunt</a></li>
<li><a href="#">Elit sit amet tincidunt</a></li>
<li><a href="#">Quam dui consectetuer elit</a></li>
<li><a href="#">Vel iaculis lorem</a></li>
<li><a href="#">Odio ultricies urna</a></li>
<li><a href="#">Metus et tincidunt posuere</a></li>
</ul>
</div>
<div class="col">
<h2>Maecenas rutrum</h2>
<ul>
<li><a href="#">Cum sociis natoque</a></li>
<li><a href="#">Penatibus et magnis</a></li>
<li><a href="#">Dis parturient montes</a></li>
<li><a href="#">Nascetur ridiculus mus</a></li>
<li><a href="#">Aenean rutrum tortor a purus</a></li>
<li><a href="#">Etiam convallis enim</a></li>
</ul>
</div>
<div class="col">
<h2>Etiam convallis</h2>
<ul>
<li><a href="#">Tincidunt erat dapibus</a></li>
<li><a href="#">Quisque convallis nisl</a></li>
<li><a href="#">Nulla aliquam dui</a></li>
<li><a href="#">Aenean rutrum tortor</a></li>
<li><a href="#">Consectetuer adipiscing elit</a></li>
<li><a href="#">Nullam euismod enim</a></li>
</ul>
</div>
<div class="clearing"> </div>
</div></div><!-- bottom --><!-- bottom2 -->
<div id="footer">
<p>Copyright © 2011, designed by <a href="http://www.webtemplateocean.com/">WebTemplateOcean.com</a></p>
</div>
</div><!-- page -->
</body>
</html>
Related examples in the same category