paddy-harvest : Design 6 « Templates « HTML / CSS

paddy-harvest

   

<!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">
<head>
<title>Paddy Harvest</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
/* SET MARGIN AND PADDING TO 0 FOR ALL ELEMENTS */
* {
margin: 0; padding: 0;
}

/* SET BASE FONT ATTRUBUTES */
html, body {
font: Georgia, "Times New Roman", Times, serif 14px/1.5em;
color: #000;
}

/* REMOVE PADDING AND MARGIN VALUES */
html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, li, dd, dt, img,
blockquote, q, table, thead, tbody, tfoot, caption, th, tr, td, a, form,
input, textarea, fieldset, pre
{margin: 0; padding: 0;}

/* SORT OUT header-FORMATTING AND SIZES */
h1, h2, h3, h4, h5 {font-weight: bold;}

h1 {font-size: 2em;}
h2 {font-size: 1.75em;}
h3 {font-size: 1.5em;}
h4 {font-size: 1.2em;}
h5 {font-size: 1.1em;}
h6 {font-size: 1em;}

/* HARMONIZE LINKS, KILL BORDER ON IMG LINKS */
a {text-decoration: underline;}
a:link, a:visited {color: #00f;}
a:hover {color: #33f;}
a:active {color: #fff;}
a img, :link img, :visited img {border: none}

/* REMOVE BROWSERS DEFAULT TABLE BORDERS */
table {border-collapse: collapse;}

/* REMOVE AUTOMATIC TOP/BOTTOM MARGINS ON NESTED LISTS */
ul ul, ul ol, ul dir, ul menu, ul dl,
ol ul, ol ol, ol dir, ol menu, ol dl,
dir ul, dir ol, dir dir, dir menu, dir dl,
menu ul, menu ol, menu dir, menu menu, menu dl,
dl ul, dl ol, dl dir, dl menu, dl dl
{margin-top: 0; margin-bottom: 0;}

/* HARMONISE LIST-BULLET TYPE */
ul, ol, dl {list-style-type: disc;}

body {
  background: #666;
}

body, input, textarea, select {
  font: normal small "Trebuchet MS", Arial, Helvetica, sans-serif;
  color: #333;
  margin: 5px auto;
}

h1, h2, h3 {
  margin-bottom: 1em;
  font-weight: normal;
  color: #579700;
}

h1 {
  font-size: 2.2em;
}

h2 {
  font-size: 1.7em;
}

h3 {
  font-size: 1em;
  font-weight: bold;
}

p, blockquote, ul, ol, form {
  margin-bottom: 1.5em;
}

blockquote, ul, ol {
  margin-left: 3em;
}

blockquote {
  margin-right: 3em;
  font-style: italic;
}

ul {
  list-style-type: square;
}

a {
  color: #579700;
}

a:hover {
  text-decoration: none;
}

a:link, a:visited {color: #579700;}


/* Wrapper */

#wrapper {
  width: 942px;
  margin: 0px auto;
  background-color: #FFFFFF;
}

/* header-*/

#header {
  height: 257px;
  width: 942px;
  position: relative;
  background: #CDE691 url(paddy-harvest-images/paddy.jpg) no-repeat;
  margin: 0px auto;
}

#header h1, #header h2 {
}

#header h1 {
  position: absolute;
  top: 183px;
  left: 10px;  
  font-size: 3em;
  letter-spacing: -2px;
}

#header h2 {
  position: absolute;
  top: 225px;
  left: 20px;  
  font-size: 1em;
}

#header a {
  text-decoration: none;
  color: #FFF;
}

#header:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

/* Menu */

#menu
{
  width: 928px;
  position: absolute;
  margin: -250px 0;
}

#menu ul
{
  list-style: none;
  text-align: right;
  padding: 10px 0px 10px 0px;
  margin: 0;
}

#menu li
{
  padding: 0em 0.7em 0em 0.7em;
  display: inline;
}

#menu li a
{
  color: #FFFFFF;
  font-weight: bold;
  text-decoration: none;
  border-bottom: none;
  font-size: 1.2em;
}

#menu li a.active
{
  border-bottom: 4px solid #FFFFFF;
}

#menu li a:hover
{
  border-bottom: 4px solid #FFFFFF;
}

/* Content */

#content {
  background: #FFFFFF url(paddy-harvest-images/bg.gif) repeat-y;
  border-top: 5px solid #8CC405;
  border-bottom: 1px solid #8CC405;
  margin: 0px auto;
  width: 928px;
}

/* Blog */

#blog {
  float: right;
  width: 678px !important;
  width: 675px; /*IE6 3px problem */
  margin: 0px auto;
}

/* Post */

.post {
  padding-bottom: 20px;
}

.post .title {
  height: 50px;
  border-top: 1px solid #8CC405;
  text-transform: uppercase;
  font-size: small;
  font-weight: bold;
  padding: 5px;
  background: #FFF url(paddy-harvest-images/cbg.gif) repeat-x;
}

.post .title a {
  text-decoration: none;
}

.post .title a:hover {
  text-decoration: underline;
}

.post .date {
  margin-top: -73px;
  text-align: right;
  font-size: x-small;
  padding: 5px;
  color: #579700;
}

.post .entry {
  padding: 10px 15px 10px 15px;
  line-height: 1.8em;
}

.post p {
  text-align: justify;
}

.post .meta {
  padding: 0 15px;
  font-size: x-small;
  color: #333;
}

.entry h1, .entry h2, .entry h3 {
  color: #333;
}

/* Sidebar */

#sidebar {
  float: left;
  width: 250px;
  padding-top: 5px;
  margin: 0px auto;
  border-top: 1px solid #8CC405;
}

#sidebar ul {
  margin: 0;
  list-style: none;
  padding: 0 10px;
}

#sidebar li {
  margin-bottom: 30px;
}

#sidebar li ul {
  line-height: 1.5em;
  list-style-type: none;
  padding-left: 10px;
}

#sidebar li li {
  margin: 0;
  color: #579700;
}

#sidebar h2 {
  background: #CDE691 url(paddy-harvest-images/sbg.gif) repeat-x;
  border-bottom: 3px solid #8CC405;
  text-transform: uppercase;
  font-size: small;
  font-weight: bold;
}

#sidebar a {
  text-decoration: none;
  color: #579700;
  padding-left: 15px;
  background: transparent url(paddy-harvest-images/listoff.gif) left center no-repeat;
}

#sidebar a:hover {
  text-decoration: none;
  color: #005300;
  background: transparent url(paddy-harvest-images/liston.gif) left center no-repeat;
}

/* Search */

#search {
}

#search h2 {
}

#search form {
}

#search #inputtext1 {
}

#search #inputsubmit1 {
}

/* Archives */

#archives {
}

/* Categories */

#categories {
}

/* Blogroll */

#blogroll {
}

/* Meta */

#meta {
}

/* Footer */

#footer {
  width: 928px;
  height: 50px;
  margin: 0px auto;
  background: #CDE691 url(paddy-harvest-images/fbg.gif) repeat-x;
}

#footer p {
  margin: 0;
  padding: 10px 0;
  text-align: center;
  font-size: x-small;
}

#footer a {
}

</style>


</head>
<body>
<div id="wrapper">
  <div id="header">
    <h1> <a href="http://www.free-css.com/">Paddy Harvest</a></h1>
    <h2>By Sumanasa.com</h2>
  </div>
  <div id="menu">
    <ul>
      <li><a href="http://www.free-css.com/" class="active">Home</a></li>
      <li><a href="http://www.free-css.com/">Site News</a></li>
      <li><a href="http://www.free-css.com/">FAQ</a></li>
      <li><a href="http://www.free-css.com/">About Us</a></li>
      <li><a href="http://www.free-css.com/">Links</a></li>
    </ul>
  </div>
  <div id="content">
    <div id="sidebar">
      <ul>
        <li id="archives">
          <h2>Archives</h2>
          <ul>
            <li><a href="http://www.free-css.com/">April 2007</a></li>
            <li><a href="http://www.free-css.com/">March 2007</a></li>
            <li><a href="http://www.free-css.com/">February 2007</a></li>
            <li><a href="http://www.free-css.com/">January 2007</a></li>
            <li><a href="http://www.free-css.com/">December 2006</a></li>
          </ul>
        </li>
        <!-- end #archives -->
        <li id="categories">
          <h2>Categories</h2>
          <ul>
            <li><a href="http://www.free-css.com/">Category #1</a> <small>(21)</small></li>
            <li><a href="http://www.free-css.com/">Category #2</a> <small>(11)</small></li>
            <li><a href="http://www.free-css.com/">Category #3</a> <small>(13)</small></li>
            <li><a href="http://www.free-css.com/">Category #4</a> <small>(89)</small></li>
          </ul>
        </li>
        <!-- end #categories -->
        <li id="blogroll">
          <h2>Blogroll</h2>
          <ul>
            <li><a href="http://www.free-css.com/">Jack Hogan</a></li>
            <li><a href="http://www.free-css.com/">Jill Reagan</a></li>
            <li><a href="http://www.free-css.com/">Humpty Smith</a></li>
            <li><a href="http://www.free-css.com/">Bumpty Smith</a></li>
            <li><a href="http://www.free-css.com/">Mary Lamb</a></li>
          </ul>
        </li>
        <!-- end #blogroll -->
        <li id="meta">
          <h2>Meta</h2>
          <ul>
            <li><a href="http://www.free-css.com/">Site Admin</a></li>
            <li><a href="http://www.free-css.com/">Logout</a></li>
            <li><a href="http://validator.w3.org/check/referer">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a></li>
          </ul>
        </li>
        <!-- end #meta -->
      </ul>
    </div>
    <!-- end #sidebar -->
    <div id="blog">
      <div id="post-1" class="post">
        <h2 class="title"> <a href="http://www.free-css.com/">Introduction to Paddy Harvest</a></h2>
        <h3 class="date">March 26, 2007</h3>
        <div class="entry">
          <p><strong>Paddy Harvest</strong> is a free template from Sumanasa.com released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons License</a>. This is a simple template with a header-with background image, a horizontal menu, content and sidebar columns. We have tested this template in Firefox 1.5, Opera 8.5, IE 6.0 and IE 7.0 and it works fine in all these browsers. This is a valid XHTML and CSS and it is also very easy to customize.</p>
          <p>You can use this template with no restrictions; just leave the "Design by" information as it is at the bottom. Good luck to your website.</p>
        </div>
        <p class="meta">Posted in <a href="http://www.free-css.com/">Category #1</a> | <a href="http://www.free-css.com/">Edit</a> | <a href="http://www.free-css.com/">1 Comment &raquo;</a></p>
      </div>
      <!-- end #post-1 -->
      <div id="post-2" class="post">
        <h2 class="title"> <a href="http://www.free-css.com/">Sample Tags</a></h2>
        <h3 class="date">January 31, 2007</h3>
        <div class="entry">
          <p>A one-sentence paragraph followed by a blockquoted paragraph.</p>
          <blockquote>
            <p>&ldquo;A collection of nursery rhymes and songs to share and enjoy, with pictures to print off and color in.&rdquo;</p>
          </blockquote>
          <h3>Heading Level Three</h3>
          <ul>
            <li>Jack and Jill went up the hill</li>
            <li>To fetch a pail of water</li>
            <li>Jack fell down, and broke his crown</li>
            <li>And Jill came tumbling after.</li>
          </ul>
          <h3>Ordered List</h3>
          <ol>
            <li>Mary had a little lamb</li>
            <li>Its fleece was white as snow</li>
            <li>And everywhere that Mary went</li>
            <li>The lamb was sure to go.</li>
          </ol>
        </div>
        <p class="meta">Posted in <a href="http://www.free-css.com/">Category #1</a> | <a href="http://www.free-css.com/">Edit</a> | <a href="http://www.free-css.com/">1 Comment &raquo;</a></p>
      </div>
      <!-- end #post-2 -->
    </div>
    <!-- end #blog -->
    <div style="clear: both; height: 1px;"></div>
  </div>
  <!-- end #content -->
  <!-- Please do not remove the "Design by" information. -->
  <div id="footer">
    <p>Copyright &copy; 2007 Paddy Harvest. Design by <a href="http://www.sumanasa.com/">Sumanasa.com</a>.</p>
  </div>
  <!-- end footer -->
</div>
<!-- end #wrapper -->
</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-penny
44.	one_two_three
45.	online-edu
46.	onlinemoviestore
47.	oodles
48.	openyourwindows
49.	opposed
50.	optimal-touch
51.	orchidaceae
52.	ordinaire
53.	ormeggiare
54.	ornamental
55.	ornate
56.	OrngBlu
57.	oswd_blozilla
58.	our-work
59.	ourhouse
60.	outdoorv1.0
61.	outliers
62.	outoftheblue
63.	outtabox
64.	oxidation
65.	package
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