pixelationingreen
<!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>Pixelation in Green | 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 (http://www.webtemplateocean.com)
released under Creative Commons Attribution-ShareAlike 3.0 license
*/
* {
margin: 0;
padding: 0;
}
body {
font: 12px Arial, Helvetica, sans-serif;
color: #B3B3B3;
padding-bottom: 30px;
background: #022108 url('pixelationingreen-images/bg.gif') repeat-x;
}
h1, h2 {
font-weight: normal;
}
h1 {
padding-top: 35px;
font-size: 44px;
text-align: center;
color: White;
}
h1 a, h1 a:hover {
color: White;
text-decoration: none;
}
p#subtitle {
padding: 0;
font-size: 14px;
font-weight: bold;
text-align: center;
color: Black;
text-transform: uppercase;
}
p {
padding: 10px 0;
line-height: 2em;
text-align: justify;
}
a {
color: #237533;
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
img.block {
display: block;
padding: 20px 0;
}
/* page */
#page {
width: 960px;
margin: 0 auto;
background: url('pixelationingreen-images/page.jpg') no-repeat bottom;
}
#header {
height: 160px;
background: #186328 url('pixelationingreen-images/header.jpg') no-repeat top;
}
/* menu */
#menu {
height: 32px;
text-align: center;
background: #093E14 url(pixelationingreen-images/menu.jpg) no-repeat top;
}
#menu ul {
list-style: none;
}
#menu ul li {
display: inline;
}
#menu ul li a {
padding: 0 36px;
font-size: 12px;
line-height: 32px;
text-decoration: none;
color: White;
text-transform: uppercase;
}
#menu ul li a:hover {
color: #237533;
}
#main {
padding: 0 32px;
background: url('pixelationingreen-images/main.jpg') no-repeat top;
}
/* content */
#content {
float: left;
padding: 32px 0 15px 0;
width: 576px;
}
#content h2 {
display: inline;
padding: 3px 10px;
color: #B3B3B3;
font-size: 22px;
background: #135821;
}
/* post */
.post {
}
.entry {
padding: 16px 0 24px 0;
background: url('pixelationingreen-images/post.jpg') no-repeat;
}
.postmeta {
padding: 15px 0 0 0;
font-size: 11px;
color: #7C7C7C;
}
/* sidebar */
#sidebar {
float: right;
padding: 32px 0 15px 0;
width: 272px;
}
.imgsmall {
clear: both;
padding-bottom: 48px;
}
.left {
display: block;
float: left;
}
.imgsmall .left {
width: 96px;
}
.right {
display: block;
float: right;
}
.imgsmall .right {
position: relative;
top: -6px;
width: 144px;
line-height: 2em;
}
.white {
color: White;
}
#sidebar h2 {
font-size: 18px;
color: White;
text-transform: uppercase;
}
#sidebar p {
text-align: left;
}
#sidebar ul {
list-style: none;
padding: 25px 0;
}
#sidebar ul li {
clear: both;
padding: 0;
line-height: 2.5em;
}
#sidebar ul li a {
padding: 0;
}
#sidebar .box {
padding: 15px 0;
}
.clearing {
clear: both;
height: 1px;
overflow: hidden;
}
/* footer */
#footer {
clear: both;
margin: 0 auto;
width: 960px;
}
#footer p {
padding: 5px 32px 0 32px;
font-size: 10px;
text-transform: uppercase;
}
#footer a {
color: White;
}
</style>
</head>
<body>
<div id="page">
<div id="header">
<h1><a href="#">Pixelation in Green</a></h1>
<p id="subtitle">Template designed by WebTemplateOcean.com</p>
</div>
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="main">
<div id="content">
<div class="post">
<h2>Terms of use</h2>
<p class="postmeta">Posted in <a href="#">Class apent</a> | Dec 17, 2010 | <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>Lorem ipsum dolor sit amet</h2>
<p class="postmeta">Posted in <a href="#">Lorem ipsum</a> | Dec 18, 2010 | <a href="#">2 comments</a></p>
<div class="entry"><img class="block" src="pixelationingreen-images/img1.jpg" alt="" />
<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.</p>
</div>
</div>
</div><!-- content -->
<div id="sidebar">
<div class="imgsmall"><img class="left" src="pixelationingreen-images/img2.jpg" alt="" /><div class="right"><strong class="white">Curabitur leo nisl,</strong><br /> <a href="#">blandit at tempus et, interdum at risus...</a> </div>
<div class="clearing"> </div>
</div>
<div class="imgsmall"><img class="left" src="pixelationingreen-images/img3.jpg" alt="" /><div class="right"><strong class="white">Proin velit libero,</strong><br /> <a href="#">vulputate ac hendrerit ut, tempus quis nulla...</a> </div>
<div class="clearing"> </div>
</div>
<div class="imgsmall"><img class="left" src="pixelationingreen-images/img4.jpg" alt="" /><div class="right"><strong class="white">Quisque luctus</strong><br /> <a href="#">sem suscipit purus sagittis feugiat...</a> </div>
<div class="clearing"> </div>
</div>
<h2>Quisque luctus</h2>
<ul>
<li><a href="#">Fusce laoreet, ligula et rhoncus volutpat</a></li>
<li><a href="#">Adipiscing gravida pulvinar eget justo</a></li>
<li><a href="#">Cras consectetur commodo scelerisque</a></li>
<li><a href="#">Vulputate aliquam ipsum dictum id</a></li>
<li><a href="#">Vestibulum imperdiet accumsan leo a aliquet</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 neque</a></li>
<li><a href="#">Tincidunt nec accumsan ante adipiscing</a></li>
<li><a href="#">Fusce laoreet, ligula et rhoncus volutpat</a></li>
<li><a href="#">Adipiscing gravida pulvinar eget justo</a></li>
<li><a href="#">Cras consectetur commodo scelerisque</a></li>
</ul>
</div><!-- sidebar -->
<div class="clearing"> </div>
</div><!-- main -->
</div><!-- page -->
<div id="footer">
<p>Copyright © 2010, designed by <a href="http://www.webtemplateocean.com/">WebTemplateOcean.com</a></p>
</div>
</body>
</html>
Related examples in the same category