one-penny
<!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>One Penny</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="Name of the company goes here" />
<meta name="design" content="SimplyGold [Sadhana Ganapathiraju]" />
<meta name="keywords" content="Keywords go here" />
<meta name="description" content="Description goes here" />
<style type='text/css'>
body
{
margin: 0;
padding: 0;
background-color: #f9f9f9;
font: normal 12px "Trebuchet MS", "Lucida Grande", Verdana, Georgia, Sans-Serif;
}
/* Links */
a:link { color: #335577; text-decoration: none; }
a:visited { color: #557799; text-decoration: none; }
a:hover, a:active { color: #ffffff; background-color: #335577; }
/* Html Elements */
h1, h2, h3, h4, h5, h6 { font-weight: normal; margin: 10px 0; padding: 0; }
h1 { font-size: 32px; }
h2 { font-size: 28px; }
h3 { font-size: 24px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6
{
font-size: 13px;
text-transform: uppercase;
margin: 5px 0;
font-weight: bold;
}
ul { line-height: 1.8em; list-style-type: square; color: #333333; }
ol { line-height: 1.8em; color: #333333; }
blockquote
{
color: #555555;
background-color: #eeeeee;
border: 1px solid #cfcfcf;
padding: 5px 10px;
margin: 10px 20px;
}
code { font-family: Consolas, Verdana, Arial, "Courier New"; }
abbr, acronym { font-style: normal; border-bottom: 1px dotted #333333; cursor: help; }
em { font-style: italic; }
strong { font-weight: bold; }
del { text-decoration: line-through; color: #555555; font-size: 11px; }
ins { text-decoration: none; color: #679b3c; }
p em,
cite
{
font-family: Consolas, Verdana, Serif;
}
/* Structure */
#container
{
width: 750px;
margin: 0 auto;
}
#header
{
padding: 15px 0;
}
#navigation
{
float: left;
width: 100%;
background-color: #333333;
}
#wrapper
{
margin: 0;
padding: 0;
clear: both;
float: left;
width: 100%;
}
#content-wrapper
{
width: 60%;
float: left;
}
#content
{
float: left;
padding: 20px;
line-height: 1.6em;
}
#sidebar-wrapper
{
width: 40%;
float: left;
}
#sidebar
{
float: left;
padding: 20px;
}
#footer
{
clear: both;
float: left;
width: 100%;
margin: 20px 0;
color: #555555;
text-align: center;
padding: 10px 0;
background-color: #cfcfcf;
}
/* Navigation */
#navigation ul
{
margin: 0 5px;
float: left;
width: 95%;
padding: 10px 0;
list-style-type: none;
}
#navigation li { float: left; margin: 0 0 0 5px; padding: 0; }
#navigation a:link,
#navigation a:visited
{
float: left;
display: block;
color: #99bbdd;
padding: 5px 10px;
border: 1px solid #333333;
}
#navigation a:hover,
#navigation a:active
{
color: #ffffff;
background-color: #557799;
border-color: #99bbdd;
}
#bhome li#lhome a,
#bproducts li#lproducts a,
#bsupport li#lsupport a,
#bblog li#lblog a,
#babout li#labout a,
#bcontact li#lcontact a
{
color: #f9f9f9;
background-color: #557799;
border-color: #7799bb;
}
/* Header */
#header h1 { margin-bottom: 0; }
#header h1 a { background: transparent url(title.png) center center no-repeat; }
#header h1 a:link,
#header h1 a:visited
{
color: #333333;
}
#header h1 a:hover,
#header h1 a:active
{
color: #000000;
background-color: transparent;
}
#header h1 span { visibility: hidden; }
/* Sidebar */
ul#sidenotes
{
margin: 0;
padding: 0;
line-height: 1.6em;
list-style-type: none;
}
ul#sidenotes li
{
padding: 5px;
border-bottom: 1px dotted #cccccc;
}
ul#sidenotes li:hover
{
background-color: #eeeeee;
}
ul#sidenotes li .title
{
display: block;
font-weight: bold;
}
ul#sidenotes li .date
{
display: block;
color: #777777;
font-size: smaller;
}
ul#sidenotes li .content
{
display: block;
}
ul#sidenotes li a:link,
ul#sidenotes li a:visited
{
padding: 0;
color: #333333;
}
ul#sidenotes li a:hover,
ul#sidenotes li a:active
{
background-color: transparent;
}
/* Footer */
#footer a:hover,
#footer a:active
{
color: #003355;
background-color:transparent;
}
</style>
</head>
<body id="bhome">
<div id="container">
<div id="header">
<h1><a href="/" title="Home"><span>One Penny</span></a></h1>
</div>
<div id="navigation">
<ul>
<li id="lhome"><a href="#01" title="Home">Home</a></li>
<li id="lblog"><a href="#04" title="Blog">Blog</a></li>
<li id="lproducts"><a href="#05" title="Products">Products</a></li>
<li id="lsupport"><a href="#06" title="Support">Support</a></li>
<li id="labout"><a href="#02" title="About">About</a></li>
<li id="lcontact"><a href="#03" title="Contact">Contact</a></li>
</ul>
</div>
<div id="wrapper">
<div id="content-wrapper">
<div id="content">
<h3>Introduction</h3>
<p><a href="http://showcase.nikhedonia.com/free_templates/onepenny/" title="View Template Online">OnePenny</a> is a free template designed by me, Sadhana Ganapathiraju, aka <a href="http://www.nikhedonia.com/" title="
SimplyGold">SimplyGold</a>.</p>
<p>Feel free to use it for personal or commercial use. Make any modifications whatever. Just refrain from
selling it.</p>
<p>You aren't <strong>required</strong> to attribute the design to me, but a mention and a <a
href="http://www.nikhedonia.com/" title="SimplyGold">link</a> would be much appreciated. :-) If you
like my designs and want a personalized template, don't <a href="http://notebook.nikhedonia.com/index.php/contact-me/"
title="Request a Quote">hesitate to contact me.</a></p>
<h4>Ordered List</h4>
<ol>
<li>Considering the popularity</li>
<li>Creating and documenting</li>
<li>Schedule extra services</li>
<li>Wasting paper the easy way</li>
<li>How many more do I gotta write?</li>
</ol>
<h4>Unordered List</h4>
<ul>
<li>We are</li>
<li>going to</li>
<li>keep this</li>
<li>nice and</li>
<li>short</li>
</ul>
<blockquote>
<p>Here's a <code>blockquote</code> for your viewing pleasure.</p>
</blockquote>
<p><ins>Newly inserted text.</ins> <del>And here's some deleted text.</del></p>
</div>
</div>
<div id="sidebar-wrapper">
<div id="sidebar">
<h3>Sidenotes</h3>
<ul id="sidenotes">
<li> <a href="http://www.nikhedonia.com/" title="SimplyGold"> <span class="title">Free Template: One Penny</span> <span class="date">Posted On: 07-21-2006</span> <span class="content">One Penny is a free template that focuses on simplicity.</span> </a> </li>
<li> <a href="http://en.wikipedia.org/wiki/Beetles" title="Beetles"> <span class="title">Beetles</span> <span class="date">Posted On: 07-20-2006</span> <span class="content">Beetles are yucky and gross. They're also present everywhere.</span> </a> </li>
<li> <a href="http://en.wikipedia.org/wiki/Worms" title="Worms"> <span class="title">Worms</span> <span class="date">Posted On: 07-19-2006</span> <span class="content">If we could measure grossness, beetles are 4, snakes are 7, and worms are 10. Ugh.</span> </a> </li>
<li> <a href="http://en.wikipedia.org/wiki/Computer_worm" title="Computer Worm"> <span class="title">Computer Worms</span> <span class="date">Posted On: 07-18-2006</span> <span class="content">Suspiciously similar to real-life worms.</span> </a> </li>
<li> <a href="http://en.wikipedia.org/wiki/Angel_Wing" title="Angel Wing"> <span class="title">Angel Wing</span> <span class="date">Posted On: 07-10-2006</span> <span class="content">Diseases shouldn't have cute names, and that's all I have to say on the matter.</span> </a> </li>
<li class="more"><a href="http://www.free-css.com/" title="Read More →">More →</a></li>
</ul>
<h6>Other Additions</h6>
<p> Add whatever you want. Some popular additions include <abbr title="Really Simple Syndication">RSS</abbr>,
subscription links, and latest news. </p>
</div>
</div>
</div>
<div id="footer"> Copyright © 1999 – 2006 CompanyName. All rights reserved. |
Design by <a href="http://www.nikhedonia.com/" title="SimplyGold">Sadhana Ganapathiraju</a> | <a href="http://validator.w3.org/check/referer" title="Xhtml 1.0 Strict">Xhtml</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer?warning=no&profile=css2" title="CSS 2.0 Strict">Css</a> | <a href="http://www.free-css.com/" title="Rss">Rss</a> </div>
</div>
</body>
</html>
Related examples in the same category