natheless
?<!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" xml:lang="en" lang="en">
<head>
<title>Natheless | Nevertheless</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type='text/css'>
* { margin: 0; padding: 0; }
html
{
color: #333333;
background-color: #f9f9f9;
font: normal 80%/1.6 "Lucida Grande", "Trebuchet MS", Verdana, Sans-Serif;
}
/* Links */
a
{
color: #333333;
padding: 0 2px;
font-weight: bold;
text-decoration: none;
}
a:link
{
color: #990022;
}
a:visited
{
color: #000000;
}
a:hover, a:active
{
border-bottom: 1px solid #990022;
}
/* Headings */
h1, h2, h3, h4, h5, h6
{
color: #3f4d23;
line-height: 1.5em;
padding: 10px 0 0;
}
h1 { font-size: 2.0em; }
h2 { font-size: 1.8em; }
h3 { font-size: 1.6em; }
h4, h5, h6
{
font-size: 1.0em;
font-weight: normal;
text-transform: uppercase;
}
/* Lists */
ul
{
margin: 25px 30px;
line-height: 2.0em;
list-style-type: square;
}
ol
{
margin: 25px 35px;
line-height: 2.0em;
}
/* Other Html Elements */
hr
{
height: 1px;
clear: both;
visibility: hidden;
}
p
{
margin: 10px 0;
}
abbr, acronym, cite, kbd, dfn
{
cursor: help;
font-style: normal;
border-bottom: 1px dotted #333333;
}
.strike
{
text-decoration: line-through;
}
/* Structure */
#header
{
float: left;
width: 100%;
clear: both;
background: #6d6b34 url(natheless-images/header.png) bottom left repeat-x;
}
#navigation
{
float: left;
width: 100%;
clear: both;
background-color: #9f9e67;
}
#wrapper
{
float: left;
width: 100%;
clear: both;
margin: 0 auto;
}
#footer
{
clear: both;
}
#content
{
width: 60%;
float: left;
}
#news
{
width: 40%;
float: left;
padding-top: 10px;
}
#footer
{
float: left;
width: 100%;
clear: both;
}
#meta
{
float: left;
width: 100%;
padding: 10px 0;
background-color: #59572a;
}
/* Header */
#header a
{
color: #ffffff;
}
#header a:hover, #header a:active
{
border-bottom-color: #ffffff;
}
#header h1, #header h2
{
padding: 0;
float: left;
display: inline;
}
#header h1
{
margin: 10px 5px;
}
#header h2
{
margin: 15px 5px 10px;
color: #c6cf6f;
font-size: 1.3em;
line-height: 2.0em;
padding-left: 10px;
border-left: 1px solid #c6cf6f;
}
/* Navigation */
#navigation ul
{
margin: 0;
float: left;
width: 100%;
list-style-type: none;
background: url(natheless-images/menu_bg.png) top left repeat-x;
}
#navigation li
{
float: left;
}
#navigation a
{
float: left;
color: #29280b;
display: block;
padding: 5px 8px;
font-size: 0.9em;
letter-spacing: 0.05em;
border-bottom-width: 0;
text-transform: uppercase;
}
#navigation a:hover, #navigation a:active
{
background: #cccc99 url(natheless-images/menu_hover_bg.png) top left repeat-x;
}
#navigation li.active a
{
color: #ffffff;
background: #6d6b34 url(natheless-images/menu_active_bg.png) top left repeat-x;
}
/* Content */
.post
{
padding: 10px 25px 10px 50px;
}
.post-content a
{
padding-right: 20px;
background: url(natheless-images/tick.png) center right no-repeat;
}
.post-footer
{
color: #777777;
font-size: 0.8em;
font-weight: bold;
}
/* News */
.item
{
padding: 10px 0;
margin: 0 50px 0 25px;
border-bottom: 1px dotted #999999;
}
.item a
{
padding-left: 17px;
background: url(natheless-images/tick.png) center left no-repeat;
}
.item h4
{
padding: 0 0 2px;
text-transform: none;
}
.item em
{
color: #777777;
font-size: 0.8em;
font-style: normal;
}
.item p
{
font-size: 1.0em;
margin: 0;
}
/* Meta */
#meta div
{
width: 30%;
float: left;
margin: 0 15px;
}
#meta h3
{
color: #cccc99;
}
#meta ul
{
margin: 0;
list-style-type: none;
}
#meta a
{
display: block;
color: #cccc99;
padding: 5px 8px;
margin-top: -1px;
border-top: 1px dotted #aaaa77;
border-bottom: 1px dotted #aaaa77;
}
#meta a:hover, #meta a:active
{
color: #29280b;
background-color: #7b794c;
}
.popular
{
padding-left: 10px;
}
/* Copyright */
p#copyright
{
margin: 0;
clear: both;
padding: 10px;
color: #7b794c;
background-color: #3a391c;
}
#copyright a
{
color: #9d9b6e;
padding-left: 18px;
background: url(natheless-images/accept.png) left center no-repeat;
}
#copyright a:hover, #copyright a:active
{
border-bottom-color: #9d9b6e;
}
</style>
<!--[if lt ie 8]>
<link rel="stylesheet" type="text/css" media="screen" href="ie_win.css" />
<![endif]-->
</head>
<body>
<div id="header">
<h1><a href="http://www.free-css.com/">Natheless</a></h1>
<h2><del>Notwithstanding</del> Nevertheless</h2>
</div>
<div id="navigation">
<ul>
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">Pages</a></li>
<li class="active"><a href="http://www.free-css.com/">Blog</a></li>
<li><a href="http://www.free-css.com/">Archives</a></li>
<li><a href="http://www.free-css.com/">About Us</a></li>
<li><a href="http://www.free-css.com/">Contact Us</a></li>
<li><a href="http://www.free-css.com/">My Account</a></li>
</ul>
</div>
<div id="wrapper">
<div id="content">
<div class="post">
<h2>Lorem ipsum dolor sit amet</h2>
<div class="post-content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc non odio nonummy
tortor luctus imperdiet. Duis justo lacus, ultrices et, pretium et, fermentum vitae,
risus. Praesent bibendum dapibus metus. Integer ullamcorper leo quis orci. Mauris
mattis ultrices risus. Maecenas pellentesque pellentesque nulla. Integer lacus nisi,
convallis a, cursus eu, lacinia vel, dui. Mauris tellus. Cras enim arcu, placerat
eu, hendrerit viverra, semper eget, turpis. In eleifend euismod libero. Praesent
iaculis dolor vitae mi.</p>
<p>Suspendisse tincidunt. <a href="http://www.free-css.com/">Vestibulum pharetra arcu</a> et orci. Vel aris
ut libero vestibulum tincidunt. Nunc pretium. Aliquam mi nibh, pretium ut, nonummy
ac, rhoncus vitae, nunc. Aliquam sodales. Cras <a href="http://www.free-css.com/">vestibulum</a> congue quam.
Metus. Integer placerat. Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; In nisl lacus, convallis semper, euismod et, dapibus
id, nisl.</p>
<p>Maecenas lacus ligula, sagittis rhoncus, luctus a, gravida ac, dolor. Quisque orci.
Curabitur in neque sit amet ante blandit tincidunt. Nulla ultricies, arcu et tincidunt
luctus, eros ipsum dignissim tortor, ut luctus justo tortor non arcu. Nam at mauris eu
ipsum tincidunt nonummy. In hac habitasse platea dictumst. In erat massa, semper et,
semper varius, tempor at, eros. Suspendisse imperdiet libero. Etiam sit amet diam a
urna facilisis ultricies. Sed mi. Etiam eget erat. Integer ut lorem. Proin sit amet
quam et ligula tincidunt elementum. Pellentesque lobortis nulla at lacus. Curabitur
in lacus nec mauris volutpat lobortis. Cras tellus. Sed eget erat. Nunc nec est
sollicitudin ipsum malesuada aliquet.</p>
<p>Phasellus aliquet rutrum nibh. Sed ante lectus, commodo non, dapibus sit amet,
fringilla vitae, lorem. Curabitur lorem neque, gravida eget, suscipit non, malesu
ada non, quam. Phasellus dolor nulla, blandit in, rhoncus eget, aliquet at, metus.
Aenean facilisis dui sed nibh. Nunc vel leo. Integer euismod nibh et velit. Phasel
lus tempus, turpis a lacinia aliquet, mi risus mattis quam, ac ultricies est odio
eu diam. Suspendisse molestie odio quis felis. Phasellus fermentum. Suspendisse id
orci sed arcu egestas auctor. Phasellus tristique ante vitae felis. Nulla facilisi.
Nam aliquam facilisis augue. Nullam vestibulum. Etiam erat eros, ornare in, ornare
nec, ornare nec, risus. Integer scelerisque erat nec libero. Aliquam feugiat.</p>
</div>
<p class="post-footer"> 29 December 2006 at 2:04PM by <a href="http://www.free-css.com/">-Middle +Name</a> </p>
</div>
</div>
<div id="news">
<div class="item">
<h4><a href="http://en.wikipedia.org/wiki/Antoninus_Pius">Antoninus Pius</a></h4>
<em>December 29, 2006</em>
<p>Titus Aurelius Fulvus Boionius Arrius Antoninus Pius, a Roman emperor, died
from the Many Middle Names Plague.</p>
</div>
<div class="item">
<h4><a href="http://en.wikipedia.org/wiki/Augustus">Augustus</a></h4>
<em>December 29, 2006</em>
<p>One of the most important Roman Emperors ever, he at some point went
by the name Gaius Julius Caeser <span class="strike">Octopus</span> Octavianus.</p>
</div>
<div class="item">
<h4><a href="http://en.wikipedia.org/wiki/Claudius">Claudius</a></h4>
<em>December 28, 2006</em>
<p>Fourth emperor of <span class="strike">JC Penny</span> the Julio-Claudian dynasty,
he's another one of those people with the "Look at me, I have 208433
middle names!" syndrome.</p>
</div>
<div class="item">
<h4><a href="http://en.wikipedia.org/wiki/Diocletian">Diocletian</a></h4>
<em>December 25, 2006</em>
<p>Otherwise known as Gaius Aurelius Valerius Diocletianus, he bought an
end to the <a href="http://en.wikipedia.org/wiki/Crisis_of_the_Third_Century"> Crisis of <span class="strike">Too Few Middle Names</span> the Third Century</a>.</p>
</div>
</div>
</div>
<div id="footer">
<div id="meta">
<div class="popular">
<h3>Popular Posts</h3>
<ul>
<li><a href="http://www.free-css.com/">Lorem ipsum dolor sit amet, consectetuer elit.</a></li>
<li><a href="http://www.free-css.com/">Etiam id sapien et arcu pharetra fermentum.</a></li>
<li><a href="http://www.free-css.com/">Nulla ullamcorper hendrerit nunc.</a></li>
<li><a href="http://www.free-css.com/">Donec semper leo non sem ultrices gravida.</a></li>
<li><a href="http://www.free-css.com/">Sed suscipit vehicula nunc.</a></li>
<li><a href="http://www.free-css.com/">Vivamus hendrerit ornare purus.</a></li>
<li><a href="http://www.free-css.com/">Vivamus sed justo interdum nulla scelerisque.</a></li>
<li><a href="http://www.free-css.com/">Morbi vehicula scelerisque enim.</a></li>
<li><a href="http://www.free-css.com/">Curabitur hendrerit tincidunt felis.</a></li>
<li><a href="http://www.free-css.com/">Praesent luctus interdum augue.</a></li>
</ul>
</div>
<div class="recent">
<h3>Recent Posts</h3>
<ul>
<li><a href="http://www.free-css.com/">Ut dignissim mi id metus.</a></li>
<li><a href="http://www.free-css.com/">Pellentesque volutpat arcu sed.</a></li>
<li><a href="http://www.free-css.com/">Aaugue malesuada volutpat.</a></li>
<li><a href="http://www.free-css.com/">Suspendisse interdum malesuada velit.</a></li>
<li><a href="http://www.free-css.com/">Donec eget massa vel nunc cursus tristique.</a></li>
<li><a href="http://www.free-css.com/">Nullam blandit ante non dolor.</a></li>
<li><a href="http://www.free-css.com/">Aenean pretium nisi nec nisi.</a></li>
<li><a href="http://www.free-css.com/">Donec accumsan varius dolor.</a></li>
<li><a href="http://www.free-css.com/">Suspendisse viverra augue quis nunc.</a></li>
<li><a href="http://www.free-css.com/">Sed aliquam libero aliquet erat.</a></li>
</ul>
</div>
<div class="authors">
<h3>Contributing Authors</h3>
<ul>
<li><a href="http://www.free-css.com/">William Shakespeare</a></li>
<li><a href="http://www.free-css.com/">Aliquam Fermentum</a></li>
<li><a href="http://www.free-css.com/">Ante Ateros</a></li>
<li><a href="http://www.free-css.com/">Nullam Vitae</a></li>
<li><a href="http://www.free-css.com/">Ligula</a></li>
<li><a href="http://www.free-css.com/">Vel Sapient</a></li>
<li><a href="http://www.free-css.com/">Dignissim</a></li>
<li><a href="http://www.free-css.com/">Molestie</a></li>
<li><a href="http://www.free-css.com/">Nisipharetra</a></li>
<li><a href="http://www.free-css.com/">Conse Et Erat</a></li>
</ul>
</div>
<hr />
</div>
<p id="copyright"> Natheless Design by <a href="http://www.nikhedonia.com/">Sadhana Ganapathiraju</a> | <a class="valid" href="http://validator.w3.org/check/referer">XHTML</a> | <a class="valid" href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> | <a href="http://www.free-css.com/">RSS</a> </p>
</div>
</body>
</html>
Related examples in the same category