landscape : Natural « Templates « HTML / CSS

HTML / CSS » Templates » Natural 
landscape
   

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--

Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License

Title      : Landscape
Version    : 1.0
Released   : 20070725
Description: A two-column, fixed-width template.

-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Landscape by Free Css Templates</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<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: 20px 0 0 0;
  padding: 0;
  background: #FFFFFF url(landscape-images/img01.jpg);
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 13px;
  color: #333333;
}

h1, h2, h3 {
  margin: 0;
  font-weight: normal;
  color: #AD1112;
}

h1 {
  font-size: 197%;
}

h2 {
  font-size: 167%;
}

h3 {
  font-size: 100%;
  font-weight: bold;
}

p, ol, ul {
  line-height: 180%;
}

{
}

ol {
}

ul {
}

blockquote {
  margin: 0;
  padding-left: 20px;
  font-style: italic;
}

blockquote * {
  line-height: normal;
}

{
  color: #AD1112;
}

a:hover {
  text-decoration: none;
}

img {
  border: none;
}

img.left {
  float: left;
  margin: 0 15px 0 0;
}

img.right {
  float: right;
  margin: 0 0 0 15px;
}

hr {
  display: none;
}

/* Header */

#header {
  width: 700px;
  height: 220px;
  margin: auto;
  background: url(landscape-images/img02.jpgno-repeat right top;
}

/* Logo */

#logo {
  float: left;
  width: 220px;
  height: 220px;
  background: #AD1011 url(landscape-images/img03.jpg);
}

#logo h1, #logo h2 {
  margin: 0;
  text-transform: lowercase;
  text-align: center;
  font-weight: normal;
}

#logo h1 {
  padding: 120px 0 0 0;
  background: url(landscape-images/img04.jpgno-repeat 5030px;
  letter-spacing: -1px;
  font-size: 36px;
}

#logo h2 {
  font-size: 18px;
}

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

/* Menu */

#menu {
  float: right;
  width: 470px;
  height: 40px;
  padding: 180px 0 0 0;
}

#menu ul {
  width: 466px;
  height: 40px;
  margin: 0;
  padding: 0;
  background: #AD1011 url(landscape-images/img05.jpgrepeat-x;
  border-left: 2px solid #FFFFFF;
  border-right: 2px solid #FFFFFF;
  list-style: none;
}

#menu li {
  display: inline;
}

#menu a {
  display: block;
  float: left;
  height: 32px;
  padding: 8px 20px 0 19px;
  background: url(landscape-images/img06.gifno-repeat;
  text-transform: lowercase;
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
  color: #FFFFFF;
}

/* Page */

#page {
  width: 700px;
  margin: auto;
}

/* Content */

#content {
  float: right;
  width: 430px;
  padding: 20px;
  background: #FFFFFF url(landscape-images/img07.gifno-repeat left bottom;
}

/* Sidebar */

#sidebar {
  float: left;
  width: 220px;
  padding-top: 10px;
}

#sidebar a {
  color: #3699E4;
}

#sidebar ul {
  margin-left: 0;
  padding-left: 0;
  list-style: none;
  font-size: 92%;
}

#sidebar ul li {
  padding: 5px 14px;
  background: url(landscape-images/img13.gifno-repeat 0px 12px;
  border-top: 1px solid #0B0B0B;
}

#sidebar ul li.first {
  border: none;
}

#sidebar ul li h2 {
  margin: 0;
  font-size: 100%;
}

#sidebar ul li h3 {
  margin: 0;
  font-size: 92%;
}

#sidebar ul li p {
  margin: 0;
}

.boxed {
  margin-bottom: 10px;
  background: #000000 url(landscape-images/img10.gifno-repeat left bottom;
}

.boxed .title {
  height: 30px;
  margin: 0;
  padding: 10px 0 0 10px;
  background: #5EB2ED url(landscape-images/img08.jpgno-repeat;
  font-size: 16px;
  font-weight: bold;
  color: #000000;
}

.boxed .content {
  padding: 15px;
  background: url(landscape-images/img09.gifrepeat-x;
}

/* Search */

#search {
}

#search form {
  margin: 0;
  padding: 0;
}

#search fieldset {
  margin: 0;
  padding: 0;
  border: none;
}

#search p {
  margin: 0;
  font-size: 85%;
}

#searchinput {
  float: right;
  width: 174px;
  padding: 2px 5px;
  background: #EFEFEF url(landscape-images/img11.gifrepeat-x;
  border: 1px solid #FFFFFF;
  font: bold 100"Trebuchet MS", Arial, Helvetica, sans-serif;
}

#searchsubmit {
  float: right;
  margin-top: 5px;
  background: #AD1112 url(landscape-images/img12.gifrepeat-x;
  border: none;
  font: bold 100"Trebuchet MS", Arial, Helvetica, sans-serif;
  color: #FFFFFF;
}

/* Footer */

#footer {
  height: 100px;
}

#footer p {
  margin: 0;
  line-height: normal;
  font-size: 85%;
  color: #000000;
}

#footer a {
  color: #000000;
}

</style>


</head>
<body>
<div id="header">
  <div id="logo">
    <h1><a href="#">Landscape</a></h1>
    <h2><a href="http://www.freecsstemplates.org/">By Free CSS Templates</a></h2>
  </div>
  <div id="menu">
    <ul>
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Products</a></li>
      <li><a href="#">Support</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</div>
<div id="page">
  <div id="content">
    <div>
      <h1 class="title">Welcome to Our Website!</h1>
      <p><img src="landscape-images/img10.jpg" alt="" width="118" height="118" class="right" /></p>
      <p><strong>Landscape</strong> is a free template from <a href="http://www.freecsstemplates.org/">Free CSS Templates</a> released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5 License</a>. The  photos are from <a href="http://www.pdphoto.org/">PDPhoto.org</a>. You"re free to use it for both commercial or personal use. I only ask that you link back to <a href="http://www.freecsstemplates.org/">my site</a> in some way. <em>Enjoy :)</em></p>
      <h2>Praesent Scelerisque</h2>
      <p>In posuere eleifend odio. Quisque semper augue mattis wisi. Maecenas ligula. Pellentesque viverra vulputate enim. Aliquam erat volutpat:</p>
      <blockquote>
        <p>&ldquo;Integer nisl risus, sagittis convallis, rutrum id, elementum congue, nibh. Suspendisse dictum porta lectus. Donec placerat odio vel elit. Nullam ante orci, pellentesque eget.&rdquo;</p>
      </blockquote>
    </div>
    <div class="twocols">
      <div class="col1">
        <h2 class="title">Lorem Ipsum Dolor</h2>
        <p>Donec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum. Quisque dictum integer nisl risus, sagittis convallis, rutrum id, congue, and nibh.</p>
        <p><a href="#">Read more&hellip;</a></p>
      </div>
      <div class="col2">
        <h2 class="title">Pellentesque Quis</h2>
        <ul class="list">
          <li><a href="#">Ut semper vestibulum est</a></li>
          <li><a href="#">Vestibulum luctus dui</a></li>
          <li><a href="#">Integer rutrum nisl in mi</a></li>
          <li><a href="#">Etiam malesuada rutrum</a></li>
          <li><a href="#">Aenean elementum facilisis ligula</a></li>
          <li><a href="#">Ut tincidunt elit vitae augue</a></li>
          <li><a href="#">Sed quis odio sagittis leo vehicula</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div id="sidebar">
    <div id="search" class="boxed">
      <h2 class="title">Search</h2>
      <div class="content">
        <form id="searchform" method="get" action="">
          <fieldset>
          <input id="searchinput" type="text" name="searchinput" value="" />
          <input id="searchsubmit" type="submit" value="Search" />
          </fieldset>
        </form>
        <p><a href="#">Advanced Search</a></p>
      </div>
    </div>
    <div id="news" class="boxed">
      <h2 class="title">News &amp; Events</h2>
      <div class="content">
        <ul>
          <li class="first">
            <h3>04 July 2007</h3>
            <p><a href="#">In posuere eleifend odio quisque semper&hellip;</a></p>
          </li>
          <li>
            <h3>29 June 2007</h3>
            <p><a href="#">Donec leo, vivamus fermentum nibh in augue&hellip;</a></p>
          </li>
          <li>
            <h3>13 June 2007</h3>
            <p><a href="#">Quisque dictum integer nisl risus sagittis&hellip;</a></p>
          </li>
        </ul>
      </div>
    </div>
    <div id="extra" class="boxed">
      <h2 class="title">Sagittis Convallis</h2>
      <div class="content">
        <ul class="list">
          <li class="first"><a href="#">Ut semper vestibulum est</a></li>
          <li><a href="#">Vestibulum luctus venenatis</a></li>
          <li><a href="#">Integer rutrum nisl in mi</a></li>
          <li><a href="#">Etiam malesuada rutrum enim</a></li>
          <li><a href="#">Aenean elementum facilisis</a></li>
          <li><a href="#">Ut tincidunt elit vitae augue</a></li>
          <li><a href="#">Sed quis odio sagittis leo</a></li>
        </ul>
      </div>
    </div>
    <div id="footer">
      <p id="legal">&copy;2007 Landscape. All Rights Reserved<br />
        Designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a></p>
      <p id="links"><a href="#">Privacy</a> | <a href="#">Terms</a> | <a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional"><abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" title="This page validates as CSS"><abbr title="Cascading Style Sheets">CSS</abbr></a></p>
    </div>
  </div>
</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.naturalbeauties
40.natural_blues
41.nature-theme
42.nature
43.naturescharm
44.Nature_Green
45.countryside
46.environment-brand
47.EcoMania
48.eco-design
49.ecologyportal
50.a_leaf
51.plantation
52.ocean
53.Oceanic
54.oceanlife
55.organic-beauty
56.organic-moss
57.OrganicFruits2
58.organicrhythm
59.snowcrystals
60.thewild
61.thewildwest
62.leaf
63.leafaroma
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.