Inverted_Headline
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="_your description goes here_" />
<meta name="keywords" content="_your,keywords,goes,here_" />
<style type='text/css'>
* {
margin: 0;
padding: 0;
}
body {
background: #000 url('bg.jpg') repeat-x top center;
color: #999;
font-family: arial,sans-serif;
}
#wrap {
width: 870px;
background-color: #000;
margin: 0 auto;
padding: 0 0 40px 0;
}
#head {
margin-top: 40px;
border-top: 1px solid #FFF;
padding-top: 10px;
}
.search {
float:right;
background-color: #000;
border:1px solid #999;
height:16px;
width:150px;
padding: 3px;
margin: 30px 10px 0 0;
color: #999;
}
.search_default {
float:right;
background-color: #000;
border:1px solid #999;
height:16px;
width:150px;
padding: 3px;
margin: 30px 10px 0 0;
color: #999;
}
.search_hover {
float:right;
background-color: #000;
border:1px solid #FFF;
height:16px;
width:150px;
padding: 3px;
margin: 30px 10px 0 0;
color: #999;
}
h1 {
color: #FFF;
font-size: 3.6em;
margin-left: 10px;
}
.nav {
margin: 40px 0 0 0;
}
.nav ul {
width: 850px;
border-top: 1px solid #333;
border-bottom: 1px solid #333;
padding: 10px;
background-color: #0F0F0F;
}
.nav li {
list-style-type: none;
display: inline;
}
.nav li a {
float: left;
display: block;
color: #FFF;
text-decoration: none;
background-color: #000;
border: 1px solid #1F1F1F;
padding: 10px 20px 10px 10px;
font-size: 0.9em;
margin: 0 10px 0 0;
}
.nav li a:hover {
background-color: #1F1F1F;
}
.nav li a:hover span {
color: #FFF;
border-bottom: 1px dotted #999;
}
.nav li a span {
font-size: 0.8em;
color: #666;
border-bottom: 1px dotted #333;
}
#right {
float: right;
clear: both;
width: 300px;
margin: 40px 10px 0 0;
}
#right p {
line-height: 1.4em;
font-size: 0.8em;
}
#right .full {
border-top: 1px solid #999;
padding-top: 10px;
width: 300px;
margin-bottom: 20px;
}
#right .halfleft {
width: 138px;
border-top: 1px solid #999;
padding: 10px 0 0 0;
margin-left: 0;
margin-bottom: 20px;
}
#right .halfright {
float: right;
clear: none;
margin-left: 20px;
width: 138px;
border-top: 1px solid #999;
padding: 10px 0 0 0;
margin-bottom: 20px;
}
p.announce {
font-size: 1.6em;
}
#main {
width: 530px;
margin: 40px 0 0 10px;
}
#main a, .credit a {
color: #999;
text-decoration: none;
border-bottom: 1px dotted #666;
}
#main a:hover, .credit a:hover {
color: #FFF;
text-decoration: none;
}
.entry {
padding: 10px 0 2px 0px;
border-top: 1px solid #999;
line-height: 1.4em;
margin: 0 0 25px 0;
}
.entry .title {
font-size: 1.0em;
color: #666;
font-weight: 400;
margin-bottom: 10px;
}
h2 {
font: 400 1.1em arial,sans-serif;
color: #FFF;
margin-bottom: 10px;
}
h3 {
font: 400 1.0em arial,sans-serif;
color: #FFF;
margin: 5px 0;
}
h4 {
font: 400 0.9em arial,sans-serif;
color: #FFF;
margin-bottom: 5px;
}
.entry h2 span {
float: right;
margin-top: 5px;
font-size: 0.5em;
color: #999;
}
.entry p, #main p {
font-size: 0.8em;
margin: 10px 0 20px 0;
}
#main img {
padding: 2px;
border: 1px solid #999;
}
.comment {
margin: 10px 0;
font-size: 0.7em;
}
.clearer {
clear: left;
line-height: 0;
height: 0;
font-size: 0;
}
ul.links {
list-style-type: none;
font-size: 0.8em;
}
ul.links li a {
color: #999;
text-decoration: none;
display: block;
border-top: 1px dotted #333;
padding: 5px 0;
}
ul.links li a:hover {
color: #FFF;
border-top: 1px dotted #FFF;
}
img.right {
float: right;
margin: 10px 0 10px 10px;
}
img.left{
float: left;
margin: 10px 10px 10px 0;
}
.blockquote {
border-left: 2px solid #999;
padding: 15px;
margin: 20px 0;
font-size: 0.9em;
font-style: italic;
background-color: #090909;
}
ol {
font-weight: 800;
font-size: 0.8em;
color: #FFF;
margin: 20px;
}
ol span {
font: 400 1.2em arial,sans-serif;
color: #999;
}
ol li {
margin-left: 25px;
padding: 4px 0;
}
#main ul {
list-style-type: none;
margin: 20px;
}
#main ul li {
padding: 2px 15px;
background: url('bullet.gif') no-repeat left center;
margin-left: 10px;
}
form label{
display:block;
}
form p {
font-size: 0.8em;
margin-bottom: 10px;
}
form input.text, form textarea{
width:96%;
border:1px #999 solid;
color:#999;
padding: 4px 5px;
font:12px 'lucida sans','lucida sans unicode','gill sans','verdana',sans-serif;
background-color: #111;
}
form input.text:hover, form textarea:hover{
border:1px #CCC solid;
}
form input.text:focus, form textarea:focus{
border:1px #FFF solid;
color:#666;
}
form input.button{
margin-right:8px;
padding:3px 5px;
font:10px Arial,san-serif;
}
* html form input.text,
* html form textarea{
border-color:#999;
color:#999;
}
#foot {
margin-top: 40px;
margin-bottom: 40px;
border-top: 1px solid #999;
border-bottom: 1px solid #FFF;
padding: 30px 0 30px 0;
width: 850px;
font-size:0.9em;
}
#foot .footnav {
margin: 0 0 5px 0;
}
#foot .footnav ul {
width: 830px;
border-top: 1px solid #333;
border-bottom: 1px solid #333;
padding: 10px;
background-color: #0F0F0F;
}
#foot .footnav li {
list-style-type: none;
display: inline;
}
#foot .footnav li a {
float: left;
display: block;
color: #FFF;
text-decoration: none;
background-color: #000;
border: 1px solid #1F1F1F;
padding: 10px 15px 10px 15px;
font-size: 0.9em;
margin: 0 10px 0 0;
}
#foot .footnav li a:hover {
background-color: #1F1F1F;
}
#foot h3 {
margin: 10px 0;
}
#foot ul.links {
float: left;
margin: 20px 10px 0 0;
width: 190px;
padding: 0 10px 0px 0px;
list-style-type: none;
border-top: 1px solid #333;
}
#foot .credit {
width: 850px;
font-size: 0.9em;
margin-TOP: 20px;
}
</style>
<title>Inverted Headline</title>
</head>
<body>
<div id="wrap">
<div class="clearer"> </div>
<div id="head">
<input type="text" class="search"
onmouseover="this.className='search_hover';"
onmouseout="this.className='search_default';" />
<h1>Inverted Headline</h1>
</div>
<div class="nav">
<ul>
<li><a href="#">HOME<br /><span>frontpage</span></a></li>
<li><a href="#">ABOUT<br /><span>this template</span></a></li>
<li><a href="#">BLOG<br /><span>random thoughts</span></a></li>
<li><a href="#">NEWS<br /><span>latest and greatest</span></a></li>
<li><a href="#">CONTACT<br /><span>email and address</span></a></li>
<li><div class="clearer"> </div></li>
</ul>
</div>
<div class="clearer"> </div>
<div id="right">
<div class="full">
<h2>Announcements</h2>
<p class="announce">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
</div>
<div class="halfright">
<h2>Links</h2>
<ul class="links">
<li><a href="http://demusdesign.com">DemusDesign</a></li>
<li><a href="http://opendesigns.org">Open Designs</a></li>
<li><a href="http://jigsaw.w3.org/css-validator/check/referer">Valid CSS</a></li>
<li><a href="http://validator.w3.org/check?uri=referer">XHTML 1.0 Strict</a></li>
<li><a href="http://www.sxc.hu/photo/568154">Photo Credit</a></li>
</ul>
</div>
<div class="halfleft">
<h2>Archives</h2>
<ul class="links">
<li><a href="#">February 2008</a></li>
<li><a href="#">January 2008</a></li>
<li><a href="#">December 2007</a></li>
<li><a href="#">November 2007</a></li>
<li><a href="#">October 2007</a></li>
<li><a href="#">September 2007</a></li>
<li><a href="#">August 2007</a></li>
</ul>
</div>
<div class="clearer"> </div>
<div class="full">
<h2>Announcements</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
</div>
</div>
<div id="main">
<div class="entry">
<h2><span>Posted on 2/9/2008 at 08:53:27GMT</span>A New Template from DemusDesign</h2>
<img class="block" src="colors.jpg" alt="" />
<p>Welcome to <b style="color:#FFF;">Inverted Headline</b>, the tenth template from <a href="http://demusdesign.com">DemusDesign</a>. I started out thinking of a high-contrast, light on dark, newspaper-style template, and ended up with this. I figured we could always use more dark templates out there. Nothing revolutionary here, just a clean, tight, dark template.</p>
<p>I release it under a Creative Commons License, which means you are free to use it and change it in anyway, so long as you include the link to my site in the footer. If you do use it, send me an email through my site and let me know. I love seeing what people doe with my work. Thanks and enjoy.</p>
<div class="comment"><a href="#">Comments (0)</a> | <a href="#">Permalink</a></div>
</div>
<div class="entry">
<h2><span>Posted on 2/5/2008 at 08:53:27GMT</span>Some Style Demos</h2>
<h3>Right-floated image</h3>
<p><img class="right" src="small.jpg" alt="" />Vestibulum lobortis pharetra <a href="#">libero</a>. Suspendisse odio diam, eleifend sed, rutrum quis, commodo nec, ante. Ut non lectus. Nulla metus. Nullam convallis volutpat tortor. Fusce risus. Aliquam odio dui, bibendum id, sagittis non, posuere non, purus. Etiam ligula ante, pulvinar eget, nonummy vitae, pretium facilisis, turpis. Pellentesque commodo purus id sem. Praesent vitae metus. Duis ut diam. Praesent ut nisi aliquet odio iaculis porttitor.</p>
<h3>Left-floated image</h3>
<p><img class="left" src="small.jpg" alt="" />Vestibulum lobortis pharetra <a href="#">libero</a>. Suspendisse odio diam, eleifend sed, rutrum quis, commodo nec, ante. Ut non lectus. Nulla metus. Nullam convallis volutpat tortor. Fusce risus. Aliquam odio dui, bibendum id, sagittis non, posuere non, purus. Etiam ligula ante, pulvinar eget, nonummy vitae, pretium facilisis, turpis. Pellentesque commodo purus id sem. Praesent vitae metus. Duis ut diam. Praesent ut nisi aliquet odio iaculis porttitor.</p>
<h3>Blockquote</h3>
<div class="blockquote">Vestibulum lobortis pharetra <a href="#">libero</a>. Suspendisse odio diam, eleifend sed, rutrum quis, commodo nec, ante. Ut non lectus. Nulla metus. Nullam convallis volutpat tortor. Fusce risus.</div>
<ol>
<li><span>An Ordered List</span></li>
<li><span>interdum semper,</span></li>
<li><span>cursus at,</span></li>
</ol>
<ul>
<li>An Unordered List</li>
<li>interdum semper,</li>
<li>cursus at,</li>
</ul>
<h3>Time for a Form</h3>
<form action="#" method="post">
<p>
<label>Name:</label>
<input type="text" class="text" name="name" />
</p>
<p>
<label>Email:</label>
<input type="text" class="text" name="email" />
</p>
<p>
<label>Your Message:</label>
<textarea rows="8" cols="30" name="message"></textarea>
</p>
<p>
<input type="submit" class="button" value="Submit" />
<input type="reset" class="button" value="Clear" />
</p>
</form>
</div>
</div>
<div class="clearer"> </div>
<div id="foot">
<div class="footnav">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">NEWS</a></li>
<li><a href="#">CONTACT</a></li>
<li><div class="clearer"> </div></li>
</ul>
</div>
<div class="clearer"> </div>
<div class="footlinks">
<ul class="links">
<li><h3>Recent Updates</h3></li>
<li><a href="#">A New Template</a></li>
<li><a href="#">CSS Check</a></li>
<li><a href="#">HTML 1.0 Strict</a></li>
<li><a href="#">DemusDesign</a></li>
</ul>
<ul class="links">
<li><h3>Recent Comments</h3></li>
<li><a href="#">A New Template</a></li>
<li><a href="#">CSS Check</a></li>
<li><a href="#">HTML 1.0 Strict</a></li>
<li><a href="#">DemusDesign</a></li>
</ul>
<ul class="links">
<li><h3>Recent Posts</h3></li>
<li><a href="#">A New Template</a></li>
<li><a href="#">CSS Check</a></li>
<li><a href="#">HTML 1.0 Strict</a></li>
<li><a href="#">DemusDesign</a></li>
</ul>
<ul class="links">
<li><h3>Friends and Links</h3></li>
<li><a href="#">A New Template</a></li>
<li><a href="#">CSS Check</a></li>
</ul>
</div>
<div class="clearer"> </div>
<div class="credit">©2008 Your Site | Template by <a href="http://demusdesign.com">DemusDesign</a> |
<a href="http://free-templates.ru">free-templates.ru</a></div>
</div>
</div>
</body>
</html>
Related examples in the same category