outdoorv1.0 : Design 6 « Templates « HTML / CSS






outdoorv1.0

   

<!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>Outdoor</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
/********************************************
   AUTHOR:        Erwin Aligam 
   WEBSITE:         http://www.styleshout.com/
  TEMPLATE NAME:    Outdoor
   TEMPLATE CODE:   S-0020
   VERSION:          1.0            
 *******************************************/
 
/********************************************
   HTML ELEMENTS
********************************************/ 

/* Top Elements */
* { margin: 0; padding: 0; outline: 0 }

body {
  background: #f7f0e3 url(bg.jpg) repeat-x;
  font: 70%/1.6em Verdana, Tahoma, Arial, Geneva, sans-serif;
  color: #666666; 
  text-align: center;
  margin: 0 0 50px 0;
}

/* links */
a, a:visited {  
  color: #5A93C9;
  background: inherit;
  text-decoration: none;  
}
a:hover {
  color: #88ac0b;
  background: inherit;
  text-decoration: underline;  
}

/* headers */
h1, h2, h3 {
  font-family: 'Trebuchet MS', Tahoma, Sans-serif;
  color: #444;
}
h1 {
  font-size: 230%;  
  font-weight: normal;
  letter-spacing: -1px;
}
h2 {
  font-size: 180%;
  color: #88ac0b;
}
h3 {
  font-size: 150%;  
  font-weight: normal;  
}

h1, h2, h3, p {
  padding: 10px;    
  margin: 0;
}
ul, ol {
  margin: 5px 20px;
  padding: 0 20px;
}
ul {
  list-style: none;
}

/* images */
img {
  background: #fafafa;
   border: 1px solid #dcdcdc;
  padding: 5px;
}
img.float-right {
    margin: 5px 0px 10px 10px;  
}
img.float-left {
    margin: 5px 10px 10px 0px;
}

code {
    margin: 5px 0;
    padding: 10px;
    text-align: left;
    display: block;
    overflow: auto;  
    font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace ;
    /* white-space: pre; */
    border: 1px solid #F4F3EC; 
  background: #FAFAE7;  
}
acronym {
  cursor: help;
  border-bottom: 1px dashed #777;
}
blockquote {
  margin: 10px;
   padding: 0 0 0 35px;  
   border: 1px solid #F4F3EC; 
  background: #FAFAE7 url(quote.jpg) no-repeat 7px 10px; 
  font: bold 1.3em/1.5em 'Trebuchet MS', Tahoma, Sans-serif;
  color: #976957;
}

/* start - table */
table {
  border-collapse: collapse;
  margin: 10px;  
}
th strong {
  color: #fff;
}
th {
  background: #93BC0C url(nav.jpg) repeat-x;
  height: 35px;
  padding-left: 12px;
  padding-right: 12px;
  color: #fff;
  text-align: left;
  border-left: 1px solid #B6D59A;
  border-bottom: solid 2px #fff;
}
tr {
  height: 32px;
}
td {
  padding-left: 11px;
  padding-right: 11px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
}
td.first,th.first {
  border-left: 0px;
}
tr.row-a {
  background: #F8F8F8;
}
tr.row-b {
  background: #EFEFEF;    
}
/* end - table */

/* form elements */
form {
  margin:10px; padding: 0 5px;
  border: 1px solid #f1f1f1; 
  background-color: #f5f5f5;   
}
label {
  display:block;
  font-weight:bold;
  margin:5px 0;
}
input {
  padding:2px;
  border:1px solid #eee;
  font: normal 1em Verdana, sans-serif;
  color:#777;
}
textarea {
  width:400px;
  padding:2px;
  font: normal 1em Verdana, sans-serif;
  border:1px solid #eee;
  height:100px;
  display:block;
  color:#777;
}
input.button { 
  font: bold 12px Arial, Sans-serif; 
  height: 24px;
  margin: 0;
  padding: 2px 3px; 
  color: #FFF;
  background: #8EB50C url(nav.jpg) repeat-x 0 0;
  border: 1px solid #88AD0C;
}

/* search form */
.searchform {
  background-color: transparent;
  border: none;  
  margin: 0; padding: 5px 0 15px 0;  
  width: 250px;  
}
.searchform p { margin: 0; padding: 0; }
.searchform input.textbox { 
  width: 170px;
  color: #777; 
  height: 18px;
  padding: 2px;  
  border: 1px solid #E5E5E5;
  vertical-align: top;
}
.searchform input.button { 
  width: 60px;
  height: 24px;
  padding: 2px 5px;
  vertical-align: top;
}

/********************************************
   LAYOUT
********************************************/ 
#wrap {
  position: relative;
  background: #fff url(wrap-bg.jpg) repeat-y;
  width: 900px;  
  margin: 50px auto 0 auto;
  text-align: left;
}
#content-wrap {
  position: relative;
  background: #fff url(content-bg.jpg) repeat-x;
  clear: both;
  float: left;  
  width: 870px;  
  padding: 0;       
  margin-left: 15px;  
  display: inline;
  border-top: 5px solid #fff;
  border-bottom: 1px solid #e5e5e5;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
}
#header {
  position: relative;
  background: #fff url(header-bg.jpg) repeat-x;
  width: 870px;  
  height: 100px;  
  padding: 0;  
  margin: 0px auto;
}
#header h1#logo-text a {
  position: absolute;
  margin: 0; padding: 0;
  font: normal 42px Georgia, "Times New Roman", Times, serif;
  letter-spacing: -1.5px;
  color: #111;
  text-transform: none;
  text-decoration: none;
  
  /* change the values of top and left to adjust the position of the logo*/
  top: 22px; left: 20px;  
}
#header p#slogan {
  position: absolute;
  margin: 0; padding: 0;
  font: normal 12px Georgia, "Times New Roman", Times, serif;
  text-transform: none;
  color: #5b4a29;
  
  /* change the values of top and left to adjust the position of the slogan*/
  top: 67px; left: 25px;    
}

/* header links */
#header #header-links {
  position: absolute;
  top: 25px; right: 10px;  
  color: #5b4a29;
  font: normal 11px Georgia, "Times New Roman", Times, serif;
  text-transform: uppercase;    
}
#header #header-links a {  
  color: #5b4a29;
  text-decoration: none;  
  padding: 0 2px;
  font-weight: bold;
}
#header #header-links a:hover {
  color: #111;    
}

/* header-photo */
#header-photo {
  clear: both;
  background: #fff;
  margin: 5px auto;
  padding: 0;    
  height:206px; 
  width: 870px;
}
#header-photo img {
  border: none;
  margin: 0; padding: 0;
} 

/* Navigation */
#nav {
  clear: both;  
  margin: 0; padding: 0;    
  height: 45px;  
}
#nav ul {
  float: left;
  list-style: none;
  background: url(nav.jpg) repeat-x;  
  width: 870px;    
  height: 45px;
  text-transform: uppercase;
  margin: 0 0 0 15px;
  padding: 0;  
  display: inline;
}
#nav ul li {
  display: inline;
  margin: 0; padding: 0;
}
#nav ul li a {
  display: block;
  float: left;
  width: auto;
  margin: 0;
  padding: 0 14px;
  border-right: 1px solid #899D00;
  border-left: 1px solid #A7D101;
  font: bold 14px/45px "Century Gothic", "Trebuchet MS", Helvetica, Arial, Geneva, sans-serif;
  text-transform: uppercase;
  text-decoration: none;  
  letter-spacing: 1px;
  color: #fff;
}
#nav ul li a:hover, 
#nav ul li a:active {
  background: url(nav-hover.jpg) repeat-x;  
}
#nav ul li#current a {  
  background: url(nav-current.jpg) repeat-x;  
}

/* Main Column */
#main {
  float: left;
  width: 550px;
  padding: 15px 0 0 0; margin: 0 0 0 10px;
  display: inline;  
}
#main h2 {
  margin-top: 10px;
  padding-bottom: 3px;
  font: normal 2.3em 'Trebuchet MS', Tahoma, Sans-serif;
  color: #895F30; 
  letter-spacing: -1px;  
  text-transform: none;
}
#main h2 a {
  color: #895F30; 
  text-decoration: none;  
}
#main ul li {
  list-style-image: url(bullet.gif);
}

/* Sidebar */  
#sidebar {
  float: right;
  width: 280px;
  padding: 25px 0 0 0; margin: 0;    
}  
#sidebar h3 {
  margin-top: 10px;
  padding: 5px 5px; 
  font: normal 1.6em 'Trebuchet MS', Tahoma, Sans-serif;  
  color: #899B0D;       
}
#sidebar ul.sidemenu {
  text-align: left;
  margin: 7px 10px 8px 0px; padding: 0;
  text-decoration: none;    
  border-top: 1px solid #EBEBEB;
}
#sidebar ul.sidemenu li {
  list-style: none;
  border-bottom: 1px solid #EBEBEB;
  padding: 5px 0 5px 5px;
  margin: 0 2px;    
}
* html body #sidebar ul.sidemenu li {
  height: 1%;
}
#sidebar ul.sidemenu li a {
  text-decoration: none;  
  background-image: none;  
  color: #895F30;     
}
#sidebar ul.sidemenu li a:hover {  
  color: #1773BC;  
}
#sidebar ul.sidemenu ul { margin: 0 0 0 5px; padding: 0; }
#sidebar ul.sidemenu ul li { border: none; }

/* footer */
#footer-wrap {
  clear: both;
  width: 900px;
  font-size: 95%;  
  text-align: left;
  padding: 15px 0;    
  border-bottom: 15px solid #fff;
  border-top: 1px solid #fff;
}
#footer-wrap a:hover {
  color: #000;  
}
#footer-wrap h3 {
  color: #976834;  
  margin: 0;
  padding: 0 10px; 
  text-transform: uppercase;
  font-weight: bold;
}

#footer-columns {
  color: #888;
  margin: 0 auto; 
  padding: 0;  
  width: 840px;      
}
#footer-columns a {
  text-decoration: none;
  font-weight: bold;
  color: #666666;
}
#footer-columns ul {
  list-style: none;
  margin: 10px 0 0 0; 
  padding: 0;  
  border-top: 1px solid #e5e5e5;
}
#footer-columns li {
  border-bottom: 1px solid #e5e5e5;  
}
#footer-columns li a {
  display: block;
  font-weight: normal;
  padding: 5px 0 5px 10px;
  width: 96%;
}
#footer-columns .col3, .col3-center {
  float: left;
  width: 32%;
}
#footer-columns .col3-center { 
  margin: 0 15px; 
}

/* bottom */
#footer-bottom {
  clear: both;
  color: #666;  
  margin: 0 auto; 
  width: 870px;
  padding: 15px 0 0 0;
  text-align: center;  
}
#footer-bottom  a {
  color: #976834;
}

/* postmeta */
.postmeta {  
  padding: 5px; margin: 20px 10px 15px 10px;  
  font-size: 95%;  
  color: #99997D;
  border: 1px solid #EAE7DB;
  background: #FAFAE7;
}
.postmeta .date{ margin: 0 10px 0 5px;  }
.postmeta a.comments { margin: 0 10px 0 5px;  }
.postmeta a.readmore { margin: 0 10px 0 5px;  }

.post-info { font-size: .95em;  padding-top: 0; margin-left: 5px;  }

/* alignment classes */
.float-left  { float: left; }
.float-right { float: right; }
.align-left  { text-align: left; }
.align-right { text-align: right; }

/* display and additional classes */
.clear { clear: both; }




</style>


</head>
<body>
<div id="wrap">
  <div id="header">
    <h1 id="logo-text"><a href="http://www.free-css.com/">outdoor</a></h1>
    <p id="slogan">put your site slogan here...</p>
    <div id="header-links">
      <p> <a href="http://www.free-css.com/">Home</a> | <a href="http://www.free-css.com/">Contact</a> | <a href="http://www.free-css.com/">Site Map</a> </p>
    </div>
  </div>
  <div id="header-photo"><img src="outdoorv1.0-images/header-photo.jpg" width="870" height="206" alt="" /></div>
  <div  id="nav">
    <ul>
      <li id="current"><a href="http://www.free-css.com/">Home</a></li>
      <li><a href="http://www.free-css.com/">Archives</a></li>
      <li><a href="http://www.free-css.com/">Downloads</a></li>
      <li><a href="http://www.free-css.com/">Services</a></li>
      <li><a href="http://www.free-css.com/">Support</a></li>
      <li><a href="http://www.free-css.com/">About</a></li>
    </ul>
  </div>
  <div id="content-wrap">
    <div id="main"> <a name="TemplateInfo"></a>
      <h2><a href="http://www.free-css.com/">Template Info</a></h2>
      <p class="post-info">Posted by <a href="http://www.free-css.com/">erwin</a></p>
      <p><strong>Outdoor 1.0</strong> is a free, W3C-compliant, CSS-based website template by <strong>styleshout.com</strong>. This work is distributed under the <a target="_blank" href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5  License</a>, which means that you are free to use and modify it for any purpose. All I ask is that you include a link back to my website in your credits.</p>
      <p>For more free designs, you can visit my website to see my other works.</p>
      <p>Good luck and I hope you find my free templates useful!</p>
      <p class="postmeta"> <a href="http://www.free-css.com/" class="readmore">Read more</a> | <a href="http://www.free-css.com/" class="comments">Comments (7)</a> | <span class="date">May 20, 2007</span> </p>
      <a name="SampleTags"></a>
      <h2><a href="http://www.free-css.com/">Sample Tags</a></h2>
      <h3>Code</h3>
      <p><code> code-sample { <br />
        font-weight: bold;<br />
        font-style: italic;<br />
        } </code></p>
      <h3>Example Lists</h3>
      <ol>
        <li>Here is an example</li>
        <li>of an ordered list</li>
      </ol>
      <ul>
        <li>Here is an example</li>
        <li>of an unordered list</li>
      </ul>
      <h3>Blockquote</h3>
      <blockquote>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat....</p>
      </blockquote>
      <h3>Image and text</h3>
      <p><a href="http://www.free-css.com/"><img src="outdoorv1.0-images/image-sample.jpg" width="144" height="144" alt="" class="float-left" /></a> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo. Donec mattis, purus nec placerat bibendum, dui pede condimentum odio, ac blandit ante orci ut diam. Cras fringilla magna. Phasellus suscipit, leo a pharetra condimentum, lorem tellus eleifend magna, eget fringilla velit magna id neque. Curabitur vel urna. In tristique orci porttitor ipsum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo.</p>
      <h3>Table Styling</h3>
      <table>
        <tr>
          <th class="first"><strong>post</strong> date</th>
          <th>title</th>
          <th>description</th>
        </tr>
        <tr class="row-a">
          <td class="first">04.18.2007</td>
          <td><a href="http://www.free-css.com/">Augue non nibh</a></td>
          <td><a href="http://www.free-css.com/">Lobortis commodo metus vestibulum</a></td>
        </tr>
        <tr class="row-b">
          <td class="first">04.18.2007</td>
          <td><a href="http://www.free-css.com/">Fusce ut diam bibendum</a></td>
          <td><a href="http://www.free-css.com/">Purus in eget odio in sapien</a></td>
        </tr>
        <tr class="row-a">
          <td class="first">04.18.2007</td>
          <td><a href="http://www.free-css.com/">Maecenas et ipsum</a></td>
          <td><a href="http://www.free-css.com/">Adipiscing blandit quisque eros</a></td>
        </tr>
        <tr class="row-b">
          <td class="first">04.18.2007</td>
          <td><a href="http://www.free-css.com/">Sed vestibulum blandit</a></td>
          <td><a href="http://www.free-css.com/">Cras lobortis commodo metus lorem</a></td>
        </tr>
      </table>
      <h3>Example Form</h3>
      <form action="http://www.free-css.com/">
        <p>
          <label>Name</label>
          <input name="dname" value="Your Name" type="text" size="30" />
          <label>Email</label>
          <input name="demail" value="Your Email" type="text" size="30" />
          <label>Your Comments</label>
          <textarea rows="5" cols="5"></textarea>
          <br />
          <input class="button" type="submit" />
        </p>
      </form>
      <br />
    </div>
    <div id="sidebar">
      <h3>Search Box</h3>
      <form action="http://www.free-css.com/" class="searchform">
        <p>
          <input name="search_query" class="textbox" type="text" />
          <input name="search" class="button" value="Search" type="submit" />
        </p>
      </form>
      <h3>Sidebar Menu</h3>
      <ul class="sidemenu">
        <li><a href="http://www.free-css.com/">Home</a></li>
        <li><a href="http://www.free-css.com/">Template Info</a></li>
        <li><a href="http://www.free-css.com/">Sample Tags</a></li>
        <li><a href="http://www.free-css.com/">More Free Templates</a></li>
        <li><a href="http://www.free-css.com/">Premium Templates</a></li>
      </ul>
      <h3>Links</h3>
      <ul class="sidemenu">
        <li><a href="http://www.free-css.com/">PDPhoto.org</a></li>
        <li><a href="http://www.free-css.com/">Mayang's Free Textures</a></li>
        <li><a href="http://www.free-css.com/">Alistapart</a></li>
        <li><a href="http://www.free-css.com/">CSS Remix</a></li>
        <li><a href="http://www.free-css.com/">CSS Mania</a></li>
      </ul>
      <h3>Sponsors</h3>
      <ul class="sidemenu">
        <li><a href="http://www.free-css.com/"><strong>4templates</strong></a> <br />
          Low Cost Hi-Quality Templates</li>
        <li><a href="http://www.free-css.com/"><strong>TemplateMonster</strong></a> <br />
          Delivering the Best Templates on the Net!</li>
        <li><a href="http://www.free-css.com/"><strong>Text Link Ads</strong></a> <br />
          Monetized your website</li>
        <li><a href="http://www.free-css.com/"><strong>Fotolia</strong></a> <br />
          Free stock images or from $1</li>
        <li><a href="http://www.free-css.com/"><strong>Dreamstime</strong></a> <br />
          Lowest Price for High Quality Stock Photos</li>
        <li><a href="http://www.free-css.com/"><strong>Dreamhost</strong></a> <br />
          Premium webhosting</li>
      </ul>
      <h3>Wise Words</h3>
      <p>&quot;Trials teach us what we are; they dig up the soil, 
        and let us see what we are made of.&quot; </p>
      <p class="align-right">- Charles Haddon Spurgeon</p>
      <h3>Support Styleshout</h3>
      <p>If you are interested in supporting my work and would like to contribute, you are welcome to make a small donation through thedonate link on my website - it will be a great help and will surely be appreciated.</p>
    </div>
  </div>
  <div id="footer-wrap">
    <div id="footer-columns">
      <div class="col3">
        <h3>Tincidunt</h3>
        <ul>
          <li><a href="http://www.free-css.com/">consequat molestie</a></li>
          <li><a href="http://www.free-css.com/">sem justo</a></li>
          <li><a href="http://www.free-css.com/">semper</a></li>
          <li><a href="http://www.free-css.com/">magna sed purus</a></li>
          <li><a href="http://www.free-css.com/">tincidunt</a></li>
        </ul>
      </div>
      <div class="col3-center">
        <h3>Sed purus</h3>
        <ul>
          <li><a href="http://www.free-css.com/">consequat molestie</a></li>
          <li><a href="http://www.free-css.com/">sem justo</a></li>
          <li><a href="http://www.free-css.com/">semper</a></li>
          <li><a href="http://www.free-css.com/">magna sed purus</a></li>
          <li><a href="http://www.free-css.com/">tincidunt</a></li>
        </ul>
      </div>
      <div class="col3">
        <h3>Praesent</h3>
        <ul>
          <li><a href="http://www.free-css.com/">consequat molestie</a></li>
          <li><a href="http://www.free-css.com/">sem justo</a></li>
          <li><a href="http://www.free-css.com/">semper</a></li>
          <li><a href="http://www.free-css.com/">magna sed purus</a></li>
          <li><a href="http://www.free-css.com/">tincidunt</a></li>
        </ul>
      </div>
    </div>
    <div id="footer-bottom">
      <p>&copy; 2006 <strong>Your Company</strong> | Design by: <a href="http://www.styleshout.com/">styleshout</a> | Valid <a target="_blank" href="http://validator.w3.org/check?uri=referer">XHTML</a> | <a target="_blank" href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.free-css.com/">Home</a>&nbsp;|&nbsp;<a href="http://www.free-css.com/">Sitemap</a>&nbsp;|&nbsp;<a href="http://www.free-css.com/">RSS Feed</a></p>
    </div>
  </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-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.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