naturalbeauties : Natural « Templates « HTML / CSS

naturalbeauties
   

<!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>Natural Beauties</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/

body {
  margin: 0;
  padding: 0;
  background: #FFFFFF url(naturalbeauties-images/img01.jpg) repeat-x;
  font: normal small Georgia, "Times New Roman", Times, serif;
  color: #999999;
}

h1, h2, h3 {
  margin: 0;
  text-transform: lowercase;
  font-weight: normal;
}

h2 {
  font-size: 2em;
}

h3 {
  font-size: 1.4em;
}

img {
  border: none;
}

a {
  color: #333333;
}

a:hover {
  text-decoration: none;
  color: #000000;
}

/* Header */

#header {
  width: 700px;
  height: 200px;
  margin: 0 auto;
}

/* Logo */

#logo {
  height: 110px;
}

#logo h1 {
  float: left;
  padding: 40px 40px 0 0;
  background: url(naturalbeauties-images/img02.gif) no-repeat right center;
  letter-spacing: -2px;
  font-size: 48px;
}

#logo h2 {
  float: right;
  padding: 61px 0 0 0;
  font-size: 24px;
  
}

#logo a {
  text-decoration: none;
  color: #1A1A1A;
}

/* Menu */

#menu {
  height: 70px;
}

#menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#menu li {
  display: inline;
}

#menu a {
  display: block;
  float: left;
  width: 140px;
  height: 45px;
  padding-top: 25px;
  text-transform: lowercase;
  text-decoration: none;
  text-align: center;
  letter-spacing: -2px;
  font-size: 30px;
  color: #B8BD52;
}

#menu a:hover {
  color: #1A1A1A;
}

#menu .active a {
  background: url(naturalbeauties-images/img03.jpg) no-repeat;
  color: #FFFFFF;
}

/* Gallery */

#gallery {
  clear: both;
  width: 700px;
  height: 480px;
  margin: 0 auto;
}

#top-photo h2 {
  height: 1.4em;
  font-size: 1em;
}

#top-photo p {
  margin: 0;
  padding: 0 0 10px 0;
}

#prev {
  display: block;
  float: left;
  width: 30px;
  height: 100px;
  background: url(naturalbeauties-images/img11.gif) no-repeat;
}

#next {
  display: block;
  float: left;
  width: 30px;
  height: 100px;
  background: url(naturalbeauties-images/img13.gif) no-repeat right top;
}

#prev span, #next span {
  display: none;
}

#thumbs {
  display: block;
  float: left;
  width: 640px;
  height: 100px;
  background: url(naturalbeauties-images/img12.gif) no-repeat;
}

#thumbs img {
  padding: 8px 0 0 10px;
}

/* Content */

#content {
  width: 700px;
  margin: 0 auto;
}

/* Posts */

#posts {
  float: right;
  width: 430px;
}

.post {
  margin-bottom: 10px;
}

.post .title {
  padding: 0 0 5px 20px;
  color: #FF8400;
}

.post .meta {
  padding: 10px 20px;
  background: url(naturalbeauties-images/img15.gif) no-repeat;
  font-size: smaller;
}

.post .meta p {
  margin: 0;
}

.post .story {
  padding: 10px 20px;
  line-height: 180%;
}

/* Sidebar */

#sidebar {
  float: left;
  width: 250px;
}

/* Boxed1 */

.boxed {
  margin-bottom: 1.5em;
  background: url(naturalbeauties-images/img14.gif) no-repeat 0em 2.5em;
}

.boxed h2 {
  padding-left: 20px;
  color: #0078FF;
}

.boxed .content {
  padding: 10px;
}

.boxed ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.boxed li {
  padding: 10px;
  border-bottom: 1px dotted #0078FF;
}

.boxed a {
  text-decoration: none;
  color: #0078FF;
}

.boxed a:hover {
  text-decoration: underline;
}

/* Tag Cloud */

#tagcloud {
}

#tagcloud .content {
  padding: 20px;
  text-align: justify;
  font-size: smaller;
}

/* Footer */

#footer {
  clear: both;
  padding: 40px;
  background: #C3C837 url(naturalbeauties-images/img16.gif) repeat-x;
}

#footer p {
  margin: 0;
  text-align: center;
  font-size: smaller;
  color: #FFFFFF;
}

#footer a {
  color: #FFFFFF;
}


</style>


</head>
<body>
<div id="header">
  <div id="logo">
    <h1><a href="http://www.free-css.com/">Natural Beauties</a></h1>
    <h2><a href="http://www.free-css.com/">Free CSS Templates</a></h2>
  </div>
  <div id="menu">
    <ul>
      <li class="active"><a href="http://www.free-css.com/" accesskey="1">Home</a></li>
      <li><a href="http://www.free-css.com/" accesskey="2">Blog</a></li>
      <li><a href="http://www.free-css.com/" accesskey="3">Photos</a></li>
      <li><a href="http://www.free-css.com/" accesskey="4">About</a></li>
      <li><a href="http://www.free-css.com/" accesskey="5">Contact</a></li>
    </ul>
  </div>
</div>
<div id="gallery">
  <div id="top-photo">
    <h2>Falls In Glacier (Canon D60)</h2>
    <p><a href="http://www.free-css.com/"><img src="naturalbeauties-images/img04.jpg" alt="" width="700" height="299" /></a></p>
  </div>
  <div id="recent-photos"><a href="http://www.free-css.com/" id="prev"><span>&laquo; Previous</span></a><span id="thumbs"><a href="http://www.free-css.com/"><img src="naturalbeauties-images/img05.jpg" alt="" width="95" height="84" /></a><a href="http://www.free-css.com/"><img src="naturalbeauties-images/img06.jpg" alt="" width="95" height="84" /></a><a href="http://www.free-css.com/"><img src="naturalbeauties-images/img07.jpg" alt="" width="95" height="84" /></a><a href="http://www.free-css.com/"><img src="naturalbeauties-images/img08.jpg" alt="" width="95" height="84" /></a><a href="http://www.free-css.com/"><img src="naturalbeauties-images/img09.jpg" alt="" width="95" height="84" /></a><a href="http://www.free-css.com/"><img src="naturalbeauties-images/img10.jpg" alt="" width="95" height="84" /></a></span><a href="http://www.free-css.com/" id="next"><span>Next &raquo;</span></a></div>
</div>
<div id="content">
  <div id="posts">
    <div class="post">
      <h2 class="title">Welcome to The Green House!</h2>
      <div class="meta">
        <p class="date">Posted on February 25, 2007 by John Doe</p>
        <p><span>Filed under </span><a href="http://www.free-css.com/" class="category">Uncategorized</a><span> | </span><a href="http://www.free-css.com/" class="comments">28 Comments</a></p>
      </div>
      <div class="story">
        <p><strong>The Green House</strong> is a free template from Free CSS Templates released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5 License</a>. The  photos are from PDPhoto.org. You"re free to use it for both commercial or personal use. I only ask that you link back to my site in some way. <em><strong>Enjoy :)</strong></em></p>
      </div>
    </div>
    <div class="post">
      <h2 class="title">A Few Examples of Common Tags</h2>
      <div class="meta">
        <p class="date">Posted on February 25, 2007 by John Doe</p>
        <p><span>Filed under </span><a href="http://www.free-css.com/" class="category">Uncategorized</a><span> | </span><a href="http://www.free-css.com/" class="comments">28 Comments</a></p>
      </div>
      <div class="story">
        <p><strong></strong>This is an example of a paragraph followed by a blockquote. In posuere eleifend odio. Quisque semper augue mattis wisi. Maecenas ligula. Pellentesque viverra vulputate enim. Aliquam erat volutpat lorem ipsum dolorem.</p>
        <blockquote>
          <p>Pellentesque tristique ante ut risus. Quisque dictum. Integer nisl risus, sagittis convallis, rutrum id, elementum congue, nibh. Suspendisse dictum porta lectus. Donec placerat odio</p>
        </blockquote>
        <h3>Heading Level Three</h3>
        <p>An unordered list example:</p>
        <ul>
          <li>List item number one</li>
          <li>List item number two</li>
          <li>List item number three</li>
        </ul>
        <p>An ordered list example:</p>
        <ol>
          <li>List item number one</li>
          <li>List item number two</li>
          <li>List item number three</li>
        </ol>
      </div>
    </div>
  </div>
  <div id="sidebar">
    <div id="archives" class="boxed">
      <h2>Archives</h2>
      <div class="content">
        <ul>
          <li><a href="http://www.free-css.com/">February 2007</a> <i>(25)</i></li>
          <li class="active"><a href="http://www.free-css.com/">January 2007</a> <i>(31)</i></li>
          <li><a href="http://www.free-css.com/">December 2006</a> <i>(31)</i></li>
          <li><a href="http://www.free-css.com/">November 2006</a> <i>(30)</i></li>
          <li><a href="http://www.free-css.com/">October 2006</a> <i>(31)</i></li>
        </ul>
      </div>
    </div>
    <div id="categories" class="boxed">
      <h2>Categories</h2>
      <div class="content">
        <ul>
          <li><a href="http://www.free-css.com/">Donec Dictum Metus</a></li>
          <li><a href="http://www.free-css.com/">Etiam Rhoncus Volutpat</a></li>
          <li><a href="http://www.free-css.com/">Integer Gravida Nibh</a></li>
          <li><a href="http://www.free-css.com/">Maecenas Luctus Lectus</a></li>
          <li><a href="http://www.free-css.com/">Mauris Vulputate Dolor Nibh</a></li>
          <li class="active"><a href="http://www.free-css.com/">Nulla Luctus Eleifend</a></li>
          <li><a href="http://www.free-css.com/">Posuere Augue Sit Nisl</a></li>
        </ul>
      </div>
    </div>
    <div id="tagcloud" class="boxed">
      <h2>Tag Cloud</h2>
      <div class="content"><a href="http://www.free-css.com/" title="55 recent posts" style="font-size: 1.5087837837838em;">Art</a> <a href="http://www.free-css.com/" title="66 recent posts" style="font-size: 1.5905405405405em;">Blogging</a> <a href="http://www.free-css.com/" title="51 recent posts" style="font-size: 1.4790540540541em;">Books</a> <a href="http://www.free-css.com/" title="40 recent posts" style="font-size: 1.3972972972973em;">Culture</a> <a href="http://www.free-css.com/" title="73 recent posts" style="font-size: 1.6425675675676em;">Family</a> <a href="http://www.free-css.com/" title="54 recent posts" style="font-size: 1.5013513513514em;">Food</a> <a href="http://www.free-css.com/" title="43 recent posts" style="font-size: 1.4195945945946em;">Friends</a> <a href="http://www.free-css.com/" title="63 recent posts" style="font-size: 1.5682432432432em;">Humor</a> <a href="http://www.free-css.com/" title="88 recent posts" style="font-size: 2.4972972972973em;">Life</a> <a href="http://www.free-css.com/" title="49 recent posts" style="font-size: 1.4641891891892em;">Love</a> <a href="http://www.free-css.com/" title="64 recent posts" style="font-size: 1.5756756756757em;">Movies</a> <a href="http://www.free-css.com/" title="28 recent posts" style="font-size: 2.0513513513514em;">Music</a> <a href="http://www.free-css.com/" title="25 recent posts" style="font-size: 2.0290540540541em;">News</a> <a href="http://www.free-css.com/" title="92 recent posts" style="font-size: 1.7837837837838em;">Personal</a> <a href="http://www.free-css.com/" title="46 recent posts" style="font-size: 1.4418918918919em;">Photography</a> <a href="http://www.free-css.com/" title="13 recent posts" style="font-size: 2.0662162162162em;">Politics</a> <a href="http://www.free-css.com/" title="56 recent posts" style="font-size: 1.5162162162162em;">Random</a> <a href="http://www.free-css.com/" title="51 recent posts" style="font-size: 1.4790540540541em;">Religion</a> <a href="http://www.free-css.com/" title="68 recent posts" style="font-size: 1.6054054054054em;">Thoughts</a> <a href="http://www.free-css.com/" title="49 recent posts" style="font-size: 1.4641891891892em;">Travel</a> <a href="http://www.free-css.com/" title="45 recent posts" style="font-size: 1.4344594594595em;">Video</a> <a href="http://www.free-css.com/" title="51 recent posts" style="font-size: 1.4790540540541em;">Health</a> <a href="http://www.free-css.com/" title="43 recent posts" style="font-size: 1.4195945945946em;">Media</a> <a href="http://www.free-css.com/" title="53 recent posts" style="font-size: 1.4939189189189em;">Technology</a> <a href="http://www.free-css.com/" title="46 recent posts" style="font-size: 1.4418918918919em;">Writing</a></div>
    </div>
  </div>
</div>
<div id="footer">
  <p id="copy">&copy;2007 Snow Flakes. Designed by <a href="http://www.free-css.com/">Free CSS Templates</a></p>
  <p id="feed"><a href="http://www.free-css.com/" id="rss">RSS Feed</a></p>
</div>
</body>
</html>
Related examples in the same category

1.	metamorph_fullmoon
2.	metamorph_leaf
3.	metamorph_island
4.	metamorph_lake
5.	metamorph_landscape
6.	metamorph_orchid
7.	metamorph_orchids
8.	metamorph_naturalistic
9.	metamorph_naturefield
10.	metamorph_grass
11.	metamorph_farm
12.	metamorph_earth
13.	metamorph_planet
14.	metamorph_aftertherain
15.	metamorph_bythelake
16.	metamorph_bamboo
17.	alaskan-lake
18.	metamorph_valley
19.	metamorph_vanillasky_lt
20.	metamorph_mountain
21.	metamorph_hills
22.	metamorph_garden
23.	bamboo
24.	metamorph_dropsongrass
25.	metamorph_shiningearth
26.	metamorph_spring
27.	metamorph_smallake
28.	metamorph_japanesegarden
29.	barnyard
30.	dawntodark
31.	design-garden
32.	grass
33.	grasse
34.	grassy
35.	freecss_natural
36.	ftdgalaxy
37.	ftdgreenature
38.	natural-blues
39.	natural_blues
40.	nature-theme
41.	nature
42.	naturescharm
43.	Nature_Green
44.	countryside
45.	environment-brand
46.	EcoMania
47.	eco-design
48.	ecologyportal
49.	a_leaf
50.	plantation
51.	ocean
52.	Oceanic
53.	oceanlife
54.	organic-beauty
55.	organic-moss
56.	OrganicFruits2
57.	organicrhythm
58.	snowcrystals
59.	thewild
60.	thewildwest
61.	landscape
62.	leaf
63.	leafaroma