coxswain
<!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>Coxswain</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 100%/1.5 "Lucida Grande", "Trebuchet MS", Verdana, Sans-Serif;
}
/* Links */
a
{
color: #2876a1;
text-decoration: none;
border-bottom: 1px dotted #2876a1;
}
a:visited
{
color: #5799d6;
border-bottom: 1px dotted #5799d6;
}
a:hover, a:active
{
color: #c23a00;
border-bottom-style: solid;
border-bottom-color: #c23a00;
}
/* Headings */
h1, h2, h3, h4, h5, h6
{
color: #aa5c0b;
text-align: right;
text-transform: lowercase;
border-bottom: 1px solid #aa5c0b;
}
/* Lists */
ul
{
margin: 25px 30px;
line-height: 2.0em;
list-style-type: square;
}
ol
{
margin: 25px 35px;
line-height: 2.0em;
}
/* Miscellaneous */
hr
{
height: 1px;
clear: both;
visibility: hidden;
}
p
{
margin: 15px 0;
}
abbr, acronym, cite, kbd, dfn
{
cursor: help;
font-style: normal;
border-bottom: 1px dotted #333333;
}
.strike
{
text-decoration: line-through;
}
/* Structure */
#header
{
height: 125px;
position: relative;
background: url(coxswain-images/header.png) top left no-repeat;
}
#navigation
{
float: left;
width: 100%;
background: #ddd;
}
#wrapper
{
width: 800px;
margin: 0 auto;
}
#wrapper-inner
{
clear: both;
float: left;
width: 100%;
padding-top: 15px;
background: url(coxswain-images/wrapper3.png) top left repeat-y;
}
#content
{
float: left;
width: 60%;
}
#news
{
float: left;
width: 40%;
}
#footer
{
clear: both;
float: left;
background: #000;
}
/* Header */
#header h1, #header h2
{
border-bottom: 0;
text-align: left;
margin-left: 20px;
}
#header h1
{
padding-top: 10px;
margin-bottom: 10px;
}
#header h1 a
{
color: #c3ddea;
border-bottom: 0;
}
#header h1 a:hover, #header h1 a:active
{
color: #fff;
}
#header h2
{
color: #eee;
font-size: 1.1em;
font-weight: normal;
text-transform: lowercase;
}
/* Navigation */
#navigation ul
{
float: left;
padding: 0;
margin: 0 0 0 15px;
list-style-type: none;
line-height: 1.5em;
}
#navigation li
{
float: left;
}
#navigation a
{
color:#222;
display: block;
padding: 8px 15px 5px;
font-weight: bold;
font-size: .85em;
text-transform: lowercase;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
border-bottom: 3px solid #ddd;
}
#navigation a:hover, #navigation a:active
{
background: #eee;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 3px solid #000;
}
#navigation li.active a
{
background: #bbb;
border-bottom-color: #bbb;
}
/* Content */
.post
{
margin: 0 5px;
margin-right: 25px;
}
/* News */
#news h4
{
border-bottom: 0;
}
#news h4 a
{
display: block;
border-bottom-style: solid;
margin-bottom: 10px;
}
.item
{
font-size: 0.90em;
padding: 10px 20px;
line-height: 1.3em;
}
.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: 5px 0;
}
/* Footer */
#meta div
{
width: 30%;
float: left;
margin: 0 15px;
}
#meta h3
{
color: #99bccc;
margin-top: 15px;
text-align: right;
border-bottom: 1px solid #7793aa;
}
#meta ul
{
margin: 15px 0;
list-style-type: none;
}
#meta a
{
display: block;
color: #99bccc;
padding: 5px 8px;
}
#meta a:hover, #meta a:active
{
color: #ccc;
background-color: #000;
border-bottom-color: #99bccc;
}
.popular
{
padding-left: 10px;
}
/* Copyright */
p#copyright
{
margin: 0;
clear: both;
padding: 10px;
color: #6cb8ec;
text-transform: lowercase;
background-color: #196998;
}
#copyright a
{
font-size: .9em;
color: #6cb8ec;
}
#copyright a:hover, #copyright a:active
{
border-bottom-color: #6cb8ec;
}
</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/">coxswain</a></h1>
<h2>who steers the rowboat?</h2>
</div>
<div id="navigation">
<ul>
<li><a href="http://www.free-css.com/">Home</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="wrapper-inner">
<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://www.free-css.com/">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://www.free-css.com/">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://www.free-css.com/">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://www.free-css.com/">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://www.free-css.com/"> Crisis of <span class="strike">Too Few Middle Names</span> the Third Century</a>.</p>
</div>
</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"> coxswain Design by <a href="http://www.nikhedonia.com/">Sadhana Ganapathiraju</a> | <a href="http://validator.w3.org/check/referer" class="valid">XHTML</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" class="valid">CSS</a> | <a href="http://www.free-css.com/">RSS</a> </p>
</div>
</body>
</html>
Related examples in the same category