earthycolours
<!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">
<head>
<title>Earthy Colours</title>
<style type='text/css'>
/*
Author : Christopher Robinson
Email : christopher@edg3.co.uk
Website : http://www.edg3.co.uk/
*/
* {
border:0;
margin:0;
padding:0;
}
/* general */
a {
color:#624f2f;
}
img {
border:2px solid #333;
}
/* body */
body {
background:#d8c6a6 url('earthycolours-image/content.jpg') center repeat-y;
color:#333;
font:0.9em Arial, Helvetica, sans-serif, "bitstream vera sans";
}
/****************************************************************************************************
Begin Header
****************************************************************************************************/
#header
{
background:#7e673e url('earthycolours-image/header.jpg') top center no-repeat;
height:100px;
top:0;
width:100%;
}
#header_inside {
height:100px;
margin:0 auto;
width:760px;
}
#header_inside h1 {
color:#3b2a0c;
font:bold 300% "trebuchet ms", helvetica, sans-serif;
letter-spacing:-3px;
margin:0 0 -10px;
padding:15px 0 0;
text-align:right;
}
#header_inside h2 {
color:#ccc;
font:200% "trebuchet ms", helvetica, sans-serif;
letter-spacing:-2px;
text-align:right;
}
/* navigation */
#navigation {
left:50%;
margin:0 0 0 -61px;
position:absolute;
width:122px;
}
#navigation li {
list-style:none;
}
#navigation li a {
color:#fff;
display:block;
height:50px;
line-height:50px;
text-align:center;
text-decoration:none;
}
#navigation li a:hover {
background:#7e673e;
color:#332407;
}
#navigation li a.active {
background:#7e673e;
color:#332407;
}
/*content */
#content {
left:50%;
margin:0 0 0 -380px;
position:absolute;
width:760px;
}
/* left */
.left {
float:left;
padding:10px 0 0;
width:304px;
}
.left p {
padding:10px;
}
.left h1 {
border-bottom:1px solid #888;
font-size:1.3em;
padding:10px 0 0;
}
.left code {
border:1px solid #624f2f;
border-left:9px solid #624f2f;
display:block;
margin:10px;
padding:10px;
text-align:left;
}
.left li {
list-style:circle;
margin:0 0 0 30px;
}
/* center */
.center {
float:left;
width:152px;
}
/* right */
.right {
float:right;
padding:10px 0 0;
width:304px;
}
.right h1 {
font-size:1.2em;
padding:0 0 10px;
text-align:left;
}
</style>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="header">
<div id="header_inside">
<h1>have a big title..</h1>
<h2>and a slogan (maybe)</h2>
</div>
</div>
<div id="navigation">
<ul>
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/" class="active">active link</a></li>
<li><a href="http://www.free-css.com/">link three</a></li>
<li><a href="http://www.free-css.com/">link four</a></li>
<li><a href="http://www.free-css.com/">link five</a></li>
<li><a href="http://www.free-css.com/">link six</a></li>
</ul>
</div>
<div id="content">
<div class="left">
<h1>Important</h1>
<p>Licensed under the <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5</a>. You MUST retain the backlink to my site ( www.edg3.co.uk ) at the bottom.</p>
<h1>About</h1>
<p>Designed by Christopher Robinson of EDG3.</p>
<p>This template was just a concept I decided to play around with firstly, then I threw it into the mix at openwebDesign.org and asked for opinions. I started this template quite grey (once again) but it got suggested to use earthy colors, so here's my attempt at something completely new for me, with random new colors which I have not really used before!</p>
<p>Hope its turned out well anyway.. not sure what you could use for but maybe having the images down one side and text on the other may give you some idea's, maybe someone finds a use for it.</p>
<code>This Design only uses two main images, the first is the logo image, and the second is the main central column. Feel free to contact me if you use this Design as its always nice to see them in use and see what people have changed in it.</code>
<h1>Fancy a List?</h1>
<p>Well here's one anyway..</p>
<ul>
<li>red</li>
<li>blue</li>
<li>green</li>
</ul>
<h1>header-two</h1>
<p>Volutpat at varius sed sollicitudin et, arcu. Vivamus viverra. Nullam turpis. Vestibulum sed etiam. Lorem ipsum sit amet dolore. Nulla facilisi. Sed tortor. Aenean felis. Quisque eros. Cras lobortis commodo metus. Vestibulum vel purus. In eget odio in sapien adipiscing blandit. Quisque augue tortor, facilisis sit amet, aliquam, suscipit vitae, cursus sed, arcu lorem ipsum dolor sit amet.</p>
<div style="text-align:center">
<p></p>
<p></p>
<p>Copyright © <a href="http://www.free-css.com/">Earthy Colours</a> 2007<br/>
Designed by <a href="http://www.edg3.co.uk/">edg3.co.uk</a><br />
Sponsored by Open Designs<br />
Valid <a href="http://jigsaw.w3.org/css-validator/">CSS</a> & <a href="http://validator.w3.org/">XHTML</a></p>
</div>
</div>
<div class="center">
<!-- DO NOT REMOVE THIS CENTER SECTION AS IT IS NEEDED BY THE Design-->
</div>
<div class="right">
<h1>Latest Gallery Images</h1>
<img src="earthycolours-image/01.jpg" alt="01" /><br />
<br />
<img src="earthycolours-image/02.jpg" alt="02" /><br />
<br />
<img src="earthycolours-image/01.jpg" alt="01" /><br />
<br />
<img src="earthycolours-image/02.jpg" alt="02" /><br />
<br />
</div>
</div>
</body>
</html>
Related examples in the same category