theoldforest
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>The Old Forest</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
body {
/*font: 76.5%/1.6em "Lucida Grande", "Lucida Sans Unicode", verdana, geneva, sans-serif;*/
font:76% Georgia;
color:#646F5E;
background:url(theoldforest-images/body_bg.gif) #342321;
margin:0;
}
* {
margin:0;
padding:0;
}
.clear {
clear:both;
}
.hidden {
display:none;
}
#nav .hidden {
display:none;
}
em em {
font-style:normal;
}
blockquote {
background:#273322;
border:1px solid #202B1C;
font-size:120%;
}
#container {
width:780px;
background:url(theoldforest-images/container.jpg) top repeat-y;
margin:0 auto;
}
#wrapper {
width:740px;
margin:0 auto;
}
#header {
height:233px;
background:url(theoldforest-images/header.jpg) no-repeat;
}
#header h1 {
text-align:center;
padding:15px 0 0 0;
color:#fff;
font-size:240%;
font-weight:normal;
}
#header h1 a {
color:#fff;
text-decoration:none;
}
#header h2 {
color:#7C9B46;
text-align:center;
font:80% Verdana;
letter-spacing:2px;
text-transform:uppercase;
padding:5px 0 0 0;
}
#sidebar {
width:260px;
float:left;
padding:20px;
background:url(theoldforest-images/sidebartop.jpg) no-repeat;
}
#sidebar h2 {
border-bottom:2px solid #AEA68D;
color:#382725;
font:165% Georgia;
font-weight:normal;
padding:10px 5px;
line-height:29px;
}
#sidebar #sidenav {
margin:10px 0;
}
#sidebar #sidenav li {
list-style:none;
padding:5px 2px;
border-bottom:1px solid #96885C;
}
#sidebar #sidenav li a {
padding:5px 2px;
display:block;
font:130% Georgia;
text-decoration:none;
color:#3D3725;
background:url(theoldforest-images/sidenava.gif) right no-repeat;
}
#sidebar #sidenav a:hover {
color:#000;
}
#sidebar p {
font-size:90%;
line-height:24px;
color:#805955;
margin:10px 0;
padding:5px;
}
#sidebar input {
background:#A39783;
color:#3D3725;
padding:4px;
width:250px;
border:none;
font:140% Trebuchet MS;
}
#content {
margin:0 0 0 300px;
background:url(theoldforest-images/content.jpg) top left no-repeat;
}
#nav {
padding:17px 0 0 0;
margin:0;
}
#nav li {
list-style:none;
display:inline;
margin:0;
}
#nav li a {
padding:17px 10px;
font:100% "Lucida Grande", "Lucida Sans Unicode", verdana, geneva, sans-serif;
text-decoration:none;
font-weight:bold;
color:#D6DBC1;
background:url(theoldforest-images/a_hover.gif) top no-repeat;
}
#nav a:hover {
background:url(theoldforest-images/a_hover.gif) bottom repeat-x #24331C;
}
a em {
font-style:normal;
text-decoration:underline;
}
#content_main {
margin:18px 0 0 0;
padding:5px 15px 15px 15px;
background:url(theoldforest-images/content_sub.jpg) top left no-repeat;
}
a {
color:#fff;
text-decoration:none;
}
#content_main a:hover {
text-decoration:underline;
}
#content_main h2,h3,p,blockquote {
margin:15px;
line-height:25px;
font-size:120%;
}
#content_main h3 {
color:#939D8C;
font-size:120%;
}
#content_main ul,ol {
margin:15px 30px;
line-height:25px;
}
#content_main h2 {
font:180% Arial;
}
img {
border:4px solid #273322;
}
p.details {
border-top:1px solid #202114;
border-bottom:1px solid #202114;
color:#959F91;
font:80% Verdana;
text-transform:uppercase;
padding:7px 0;
}
p.details a {
color:#959F91;
border-bottom:1px solid #596356;
}
p.details a.comlink {
float:right;
}
ol.comments li {
clear:right;
font-size:90%;
}
ol.comments .user {
float:right;
width:80px;
background:url(theoldforest-images/user.jpg) no-repeat #BEB8A2;
padding:15px;
font:90% Verdana;
height:60px;
}
ol.comments .etc {
float:right;
width:80px;
margin:10px 0 0;
clear:right;
background:#273322;
padding:15px;
font:80% Verdana;
margin-bottom:10px;
}
ol.comments .etc p {
margin:0;
padding:0;
line-height:20px;
}
ol.comments .user a {
color:#382725;
}
ol.comments .user img {
border:3px solid #293624;
}
ol.comments .user p {
margin:0;
padding:0;
}
ol.comments p {
margin:15px 125px 15px 0;
}
#footer {
margin:30px 0 0 0;
padding:15px;
font-size:90%;
border-top:1px solid #333;
}
</style>
</head>
<body>
<div id="container">
<div id="wrapper">
<div id="header">
<h1><a href="http://www.free-css.com/">The Old Forest</a></h1>
<h2>The Fellowship of the Ring</h2>
<p class="hidden"><a href="#nav">Skip to Main Navigation</a> || <a href="#content_main">Skip to Content</a></p>
</div>
<div id="sidebar">
<h2>This is 'The Old Forest'. A CSS/XHTML template created for the OWD contest and based on the book "The Fellowship of the Ring" by J.R.R. Tolkien.</h2>
<ul id="sidenav">
<li><a href="http://www.free-css.com/" accesskey="h"><em>H</em>ome</a></li>
<li><a href="http://www.free-css.com/" accesskey="a"><em>A</em>bout</a></li>
<li><a href="http://www.free-css.com/" accesskey="e"><em>E</em>xamples</a></li>
<li><a href="http://www.free-css.com/" accesskey="c"><em>C</em>ontact</a></li>
</ul>
<p> Here's an example sidebar paragraph. You might put notes here, or latest news items etc. This is filler text: dsnf jdsnf ljksdnaf kjsnf jksnf ljksa nkjsfn lsdaj fnlsnka fjdasnf lkasnfd sauifn esaufn sdjn kjfndsalkfjn sdkjf ndslfn dsljfn dslakfn d </p>
<input value="Search..." type="text" />
</div>
<div id="content">
<ul id="nav">
<li class="hidden"><strong>Main Navigation</strong></li>
<li><a href="#intro" accesskey="h"><em>H</em>ome</a></li>
<li><a href="http://www.free-css.com/" accesskey="a"><em>A</em>bout</a></li>
<li><a href="http://www.free-css.com/" accesskey="e"><em>E</em>xamples</a></li>
<li><a href="http://www.free-css.com/" accesskey="c"><em>C</em>ontact</a></li>
</ul>
<div id="content_main">
<h2><a href="http://www.free-css.com/" id="intro">Introduction</a></h2>
<p class="details"> <a href="http://www.free-css.com/"class="comlink">25 Comments</a>Posted by <a href="http://www.free-css.com/">User Name</a> on <a href="http://www.free-css.com/">01.01.01.</a> </p>
<p> Hello and welcome to <strong>The Old Forest </strong>, a template created by Six Shooter Media</a> for the Open Web Design contest titled "Favourite Book". "The Old Forest" is the title of a chapter in the first book of the Lord of the Rings trilogy; The Fellowship of the Ring. It happens to be my favourite chapter in the whole of this first book for its wonderfully colourful descriptions of the beginning of the Hobbits adventure. They leave the Shire and also meet Tom Bombadil, whoc rescues them in this chapter which sadly was left out of the motion picture. </p>
<p> The image in the header is in fact a stock photo which I found on sxc.hu. I simply took it, cropped it a bit and changed the hue and saturation to acheive an effect which I feel makes the shot look like the edge of the Old Forest as described in the book and how I picture it in my head. </p>
<h2><a href="http://www.free-css.com/" id="about">About the Author</a></h2>
<p class="details"> <a href="http://www.free-css.com/"class="comlink">25 Comments</a>Posted by <a href="http://www.free-css.com/">User Name</a> on <a href="http://www.free-css.com/">01.01.01.</a> </p>
<p> Hi! My names Jay and I'm a 20 year old web designer from England. My main projects are conducted through my website Six Shooter Media, but I (obviously) also enjoy creating Open Source web templates for general use! You can keep a check on my free templates here which is probably a link worth bookmarking as my templates appear there a couple of weeks before OWD/OSWD due to the design queues. </p>
<h2><a href="http://www.free-css.com/" id="examples">Some Examples</a></h2>
<p class="details"> <a href="http://www.free-css.com/"class="comlink">25 Comments</a>Posted by <a href="http://www.free-css.com/">User Name</a> on <a href="http://www.free-css.com/">01.01.01.</a> </p>
<p> OK, here I'll just put some example html elements that you will most probably be using in your blog/web site. </p>
<h3>Blockquote Example</h3>
<blockquote>
<p> <em> "But the Forest <em>is</em> queer. Everything in it is very much more alive, more aware of what is going on, so to speak, than things are in the Shire. And the trees do not like strangers. They watch you. They are usually content merely to watch you, as long as daylight lasts, and don't do much. Occasionally the most unfriendly ones may drop a branch, or stick a root out, or grasp at you with a long trailer. But at night things can be most alarming, or so I am told." </em> </p>
<p style="text-align:right"> - Meriadoc Brandybuck </p>
</blockquote>
<h3>List Example</h3>
<ul>
<li>Here</li>
<li>Is our friend</li>
<li>The list!</li>
</ul>
<h3>Comment Examples</h3>
<ol class="comments">
<li>
<div class="user">
<p><a href="http://www.free-css.com/">User Name</a><br />
<img src="theoldforest-images/avatar.gif" alt="avatar" /></p>
</div>
<div class="etc">
<p>Posted on 01.01.01.<br />
<a href="#header">Top</a></p>
</div>
<p> Comment text here jndfl jsndjaf ndsfn aeufn uisf shelf jsae hej hfliusl huifehsu adlhfjeshflsdl hfaisehfj sdhfljk ashdfjk dshlfajdsjah fjsdlhf sdsd fadsf adsf adsf dsaf adsf dsaf dsf dsaf ads fdsaf dsaf dsf dsafk sadf;klsdjafksdahfjsndajfklnasdjf ndask jfndsajf nsldjanf jksanf ljksadnf ljksnadf jksndafkj sdnajfk sndljkfnsadljfk ndsajkf ndsaljf ndls kfnjahf lsdaf ljsdahf jksahdf hadsfjksdha fjsdhafjkshdafjkshdafjds </p>
</li>
<li class="alt">
<div class="user">
<p><a href="http://www.free-css.com/">User Name</a><br />
<img src="theoldforest-images/avatar.gif" alt="avatar" /></p>
</div>
<div class="etc">
<p>Posted on 01.01.01.<br />
<a href="#header">Top</a></p>
</div>
<p> Comment text here jndfl jsndjaf ndsfn aeufn uisf shelf jsae hej hfliusl huifehsu adlhfjeshflsdl hfaisehfj sdhfljk ashdfjk dshlfajdsjah fjsdlhf sdjahf lsdaf ljsdahf jksahdf hadsfjksdha fjsdhafjkshdafjkshdafjds </p>
</li>
<li>
<div class="user">
<p><a href="http://www.free-css.com/">User Name</a><br />
<img src="theoldforest-images/avatar.gif" alt="avatar" /></p>
</div>
<div class="etc">
<p>Posted on 01.01.01.<br />
<a href="#header">Top</a></p>
</div>
<p> Comment text here jndfl jsasdf ksa fmndsanfjsdanlf jdsanlfk jnsdlafj nsaklfn aksjf nlkasjfn lsnakf jasdnf lksdnf lksjna fjksdanlf ksndaf lkasnf jadsnf lksandf jksdanf jksanf lasdnf lasknf asjdfn lsajfn dsanf jdsanfk jsdfjn jknfsg kljfdnjkgfdsngl fdjn gfdlnsg jfdsnlgsfdjng lkns gsdjfng lfdsng ksnfg jfdsngl jfds ngfdsjgn lfdsng dfslng sjdfn jfds gnlfdjsng ljksfng jksfnlg jkfndsg ljkfsng lkjfng jksfdnl gfdsng jdfsng lkjnsdf gjkfsdn gjfdnslgj nfdsjg nlfdsnk gsjfdng ldfsjng lkjsndg kjsnldg jfdnsg lknsfd gkjnlg kjfndsgkl jnsdfg kjlfndlsgk jfndsljgk nfdsljg nfdlsng lsnd jkfnsg ljkfsn gljdsnfgkj nsfd jkgnsdflg jfdnsgl kjfsndgjknsfdlgk jfndsljgk nfdsgkj nfdlsng lsnfdg jksndf gjksfndgjkfdsng kjfdngl jksndfgkjndfjgk lsdgn dfls ngklsdnkg sndjaf ndsfn aeufn uisf shelf jsae hej hfliusl huifehsu adlhfjeshflsdl hfaisehfj sdhfljk ashdfjk dshlfajdsjah fjsdlhf sdjahf lsdaf ljsdahf jksahdf hadsfjksdha fjsdhafjkshdafjkshdafjds </p>
</li>
<li class="alt">
<div class="user">
<p><a href="http://www.free-css.com/">User Name</a><br />
<img src="theoldforest-images/avatar.gif" alt="avatar" /></p>
</div>
<div class="etc">
<p>Posted on 01.01.01.<br />
<a href="#header">Top</a></p>
</div>
<p> Comment text here jndfl jsndjaf ndsfn aeufn uidfa dsf adsf dsf dsf dsf sadf asdfsf shelf jsae hej hfliusl huifehsu adlhfjeshflsdl hfaisehfj sdhfljk ashdfjk dshlfajdsjah fjsdlhf sdjahf lsdaf ljsdahf jksahdf hadsfjksdha fjsdhafjkshdafjkshdafjds </p>
<p> Comment text here jndfl jsndjaf ndsfn aeufn uisf shsaf asdf sdaf dsaf sdaf sdaf sdaf sda fasdf dsf dasf dsaf sdaf asd fsda fdsaf dsa fdsaf dsf dsaf dsaf dsaf asdf asdf sdaf asdf dsaf dsaf sdaf dsf dsaf dsf dsalkfn dskjf ndalfndasjnf klsdnf jksdnaf lkjdnsaf jksdnaf lksndajf dnslafk jadslf kdnslajfk nsiuasnefuesnjfk dnalfjeufn sujaejk fhsdjafhl easuaf hsiuah ssuehfuisdhfau sfhiushdf jdshaf seihfuelf jsae hej hfliusl huifehsu adlhfjeshflsdl hfaisehfj sdhfljk ashdfjk dshlfajdsjah fjsdlhf sdjahf lsdaf ljsdahf jksahdf hadsfjksdha fjsdhafjkshdafjkshdafjds </p>
</li>
</ol>
<h2><a href="http://www.free-css.com/" id="contact">Contact</a></h2>
<p class="details"> <a href="http://www.free-css.com/"class="comlink">25 Comments</a>Posted by <a href="http://www.free-css.com/">User Name</a> on <a href="http://www.free-css.com/">01.01.01.</a> </p>
<p> If you decide to use this template please drop me a line to let me know! Don't hesitiate to get in touch if your interested in a custom template or just in any of my services in general. I look forward to hearing from you! </p>
</div>
<div id="footer">
<p class="validate"><a href="http://validator.w3.org/check?uri=referer">XHTML</a> | <a href="http://jigsaw.w3.org/css-validator/">CSS</a><br />
<a href="#content">Top</a></p>
<p>Template design by <a href="http://www.sixshootermedia.com">Six Shooter Media</a>.<br />
All your copyright information here.</p>
</div>
</div>
</div>
</div>
</body>
</html>
Related examples in the same category