autumn
<!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" lang="en">
<head>
<title>Title</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
/* CSS Document */
body {
font-family:Arial, Helvetica, sans-serif;
font-size:9px;
color:#764816;
margin: 0;
background-image:url(autumn-images/backgrounds/body.jpg);
background-position:left;
background-repeat:repeat-y;
background-color:#9BC96D;
}
#container {
width:710px;
}
#header {
background-image:url(autumn-images/backgrounds/header.jpg);
width:519px;
height:250px;
border-top:4px solid #53C0C0;
border-bottom:4px solid #933737;
}
#header h1 {
font-family:Century Gothic, Arial, Helvetica, sans-serif;
font-size:42px;
letter-spacing:-4px;
font-weight:normal;
color:#2B7171;
margin:0;
padding: 20px 0 0 20px;
}
#header h2 {
font-family:Century Gothic, Arial, Helvetica, sans-serif;
font-size:20px;
color:#FFFFFF;
margin:80px 0 0 25px;
font-weight:normal;
letter-spacing:-1px;
}
#header p {
margin: 10px 120px 0 35px;
line-height:15px;
color:#FFFFFF;
}
#header p a {
color:#fff;
text-decoration:underline;
}
#header p a:hover {
text-decoration:none;
background-color:transparent;
border:none;
}
#header img {
float:right;
margin: 0 20px 0 0;
borer:none;
}
#sidebar {
float:right;
width:175px !important;
width:173px;
margin:0 5px 0 0 !important;
margin:0 3px 0 0;
}
#sidebar p {
color:#BADA9A;
line-height:16px;
padding:5px;
}
#sidebar .block {
background-color:#BADA9A;
border:1px solid #98a878;
color:#768656;
background-image:none;
}
#sidebar h1 {
color:#FFFFFF;
font-family:"Trebuchet MS", Tahoma, Verdana;
font-weight:normal;
font-size:18px;
}
ul#nav {
margin:0;
padding:0;
}
ul#nav li {
list-style:none;
margin:0;
padding:0;
}
ul#nav li a {
display:block;
background-color:#8CC058;
border-top:2px solid #669537;
border-bottom:2px solid #669537;
padding:10px;
margin: 5px 0 5px 0 !important;
margin: 0;
color:#FFFFFF;
font-family:"Trebuchet MS", Tahoma, Verdana;
font-weight:bold;
text-transform:uppercase;
font-size:14px;
text-decoration:none;
background-image:url(autumn-images/backgrounds/a.jpg);
background-position:bottom right;
background-repeat:no-repeat;
}
ul#nav li a:hover {
border-top:2px solid #9FCB74;
background-color:#9FCB74;
background-image:url(autumn-images/backgrounds/ahover.jpg);
}
#content {
width:519px;
}
#content img {
float:left;
margin: 10px 20px 10px 10px;
background-color:#fff;
padding:4px;
}
a {
font-weight:bold;
text-decoration:none;
color:#764816;
padding:2px;
}
a:hover {
background-color:#FFFFaa;
border-bottom:1px solid #986a38;
}
.block {
background-color:#FFFFCC;
background-image:url(autumn-images/backgrounds/content.jpg);
background-position:bottom;
background-repeat:repeat-x;
padding:15px 30px 15px 30px;
border-bottom:2px solid #FFAC59;
}
.footer {
padding:15px 30px 15px 30px;
background-color:#eeeeee;
color:#999999;
}
.footer a {
color:#333333;
}
.footer a:hover {
background-color:#333333;
color:#fff;
border:none;
}
#content h1 {
font-family:Century Gothic, Arial, Verdana, sans-serif;
color:#FF9900;
font-weight:normal;
font-size:20px;
letter-spacing:-1px;
}
#content p {
padding:5px 20px 5px 5px;
line-height:17px;
}
#content li {
list-style-image:url(autumn-images/backgrounds/li.gif);
line-height:20px;
}
</style>
</head>
<body>
<div id="container">
<div id="sidebar">
<ul id="nav">
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">Link</a></li>
<li><a href="http://www.free-css.com/">Link</a></li>
<li><a href="http://www.free-css.com/">Link</a></li>
<li><a href="http://www.free-css.com/">Link</a></li>
</ul>
<h1>Sidebar Content</h1>
<p>I'm sure you'll want to add some content to your sidebar, so this space is made expecially for that!!! Obviously you can put anything you like here, images, text, lists, etc etc. So there ya go.</p>
<h1>Sidebar block</h1>
<div class="block"> Just a space for you to put anthing that you want to stand out I guess. </div>
</div>
<div id="header">
<h1>Autumn</h1>
<h2>Your description</h2>
<img src="autumn-images/leaf.jpg" alt="" />
<p>Autumn, Fall. The beginning of the end. <a href="http://www.free-css.com/">Usually</a> associated with leaves falling from trees and the end of the sunshine. Well, at least it is if you live in England where the weather is notoriously bad. Anyway, here is where your description will go.</p>
</div>
<div id="content">
<div class="block">
<h1>Introduction.</h1>
<img src="autumn-images/leaf.jpg" alt="" />
<p> So, here's my entry to the autumn competition. Originally I planned to use some form of stock photography for the header image but I thought that most likely everybody would do that. So I decided to draw my own. This has created the theme for the whole template. The main things that remind me of autumn are obviously the falling leaves, warm colours and cold skies. These things I have tried to implement in this design. Next to this paragraph is an image so you can see how they are formatted.<br />
So to clear that up: </p>
<ul>
<li>Falling Leaves</li>
<li>Warm Colours</li>
<li>And Cold Skies.</li>
</ul>
</div>
<div class="block">
<h1>About The Author</h1>
<p> My name's James Koster, and I am a 19 year old web designer from the UK. <br />
Like 5.9 billion other people on our planet I run my own blog, which you can take a look at if you want at jameskoster.co.uk. </p>
<p> As I just mentioned, I am a web designer and run my own design company: Six Shooter Media. I offer a range of services including custom template design, so take a look if you're after something like that! </p>
</div>
<div class="block">
<h1>Some more example text</h1>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi tortor enim, molestie in, egestas vitae, venenatis id, neque. Fusce purus turpis, laoreet sit amet, convallis ut, eleifend quis, massa. Nulla erat. Aenean gravida magna id diam. Donec sodales nunc id nibh. Phasellus nisl. Quisque augue ante, ornare sit amet, imperdiet vitae, fermentum et, felis. Nullam et orci. In congue gravida dui. Mauris at erat eu tortor interdum malesuada. Nullam laoreet, metus non cursus posuere, nibh tortor feugiat quam, non molestie libero justo at orci. Morbi scelerisque luctus massa. Duis leo. Vivamus pulvinar, nisi non hendrerit interdum, mi neque malesuada felis, a adipiscing mauris massa quis metus. Integer sapien ipsum, tincidunt in, pulvinar sit amet, congue vitae, nisl. Maecenas et nunc. Nulla facilisi. </p>
</div>
<div class="footer"> Here goes your footer information!<br />
Template design by <a href="http://www.sixshootermedia.com">James Koster</a>. </div>
</div>
</div>
</body>
</html>
Related examples in the same category