one-penny : Design 6 « Templates « HTML / CSS






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 &rarr;">More &rarr;</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 &copy; 1999 &ndash; 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&amp;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

1.newave
2.newdarkside
3.newday
4.newera
5.newfangled
6.newgreeny
7.newgreys
8.newhorizon
9.news portal
10.news-print
11.newsbeat
12.newsflash
13.newsportal
14.newsroll
15.newstheme
16.newwave-business-inc
17.new_rise
18.NiceSite
19.nimbuslike
20.nixed
21.noimages
22.noname1
23.nonzero
24.nothingfanzy
25.nourish
26.nowhere
27.NuahSwirl
28.nullbullum
29.numerology
30.o-no-typography
31.obsess
32.obsession
33.obtanium
34.office-plants
35.offlimits
36.offrecord
37.oheon_com_110100021
38.ohgreenworld
39.Okeanos
40.old-wall
41.oldarchitecture
42.Olive
43.one_two_three
44.online-edu
45.onlinemoviestore
46.oodles
47.openyourwindows
48.opposed
49.optimal-touch
50.orchidaceae
51.ordinaire
52.ormeggiare
53.ornamental
54.ornate
55.OrngBlu
56.oswd_blozilla
57.our-work
58.ourhouse
59.outdoorv1.0
60.outliers
61.outoftheblue
62.outtabox
63.oxidation
64.package
65.paddy-harvest
66.pagedrape
67.paivi-k
68.paleforest
69.palmtrees
70.pamphlet
71.pancorbo
72.papira
73.paradigm
74.paradise1983
75.parchmenter
76.particle
77.particles
78.pastel
79.pastelco
80.pastelflowers
81.pastries
82.path-fider
83.patternmaker
84.PattyMcFatPat01
85.PattyMcFatPat03
86.pc
87.Pear Template
88.pear
89.pedestrian
90.penchantforphotos
91.pencilpink
92.people
93.perfectblemish
94.performance
95.perplex
96.personified
97.pillars
98.pills
99.pinnacle
100.Pistachio
101.pixabella
102.pixabella04
103.pixabella06
104.pixelationingreen
105.plaidshirt
106.plainandsimple
107.planning-feed
108.pluralism
109.plurkified
110.pointspace
111.pollinate
112.pollinating
113.pollination