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>"Trials teach us what we are; they dig up the soil,
and let us see what we are made of." </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>© 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> <a href="http://www.free-css.com/">Home</a> | <a href="http://www.free-css.com/">Sitemap</a> | <a href="http://www.free-css.com/">RSS Feed</a></p>
</div>
</div>
</div>
</body>
</html>
Related examples in the same category