colourworld
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Colour World</title>
<style type='text/css'>
html, body, ul, li, h1, h2, h3, h4 {
margin: 0;
padding: 0;
list-style: none;
}
h1 img {
display: block;
}
img {
border: 0;
}
a {
color: black;
font-weight: bold;
}
a:hover {
color: red;
text-decoration: underline;
}
.left {
float: left;
position: relative;
}
.right {
float: right;
}
.more {
text-align: right;
}
.clear {
clear: both;
}
body {
background: white;
text-align: center;
font: 12px arial, sans-serif;
color: #8A8A8A;
padding-bottom: 60px;
}
#wrapper {
text-align: left;
margin: auto;
width: 707px;
position: relative;
}
#spray {
position: absolute;
top: 0;
left: 378px;
}
#body-left {
width: 360px;
}
#body-right {
width: 318px;
position: absolute;
top: 5px;
left: 388px;
}
/******************** Navigation ****************/
#menu {
background-image:url(colourworld-images/menu.jpg);
width: 234px;
margin-top: 5px;
height:225px;
background-repeat: no-repeat;
padding: 22px 0px 0px 0px;
text-align:center;
}
#menu li{
}
#menu a{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bolder;
text-transform: uppercase;
color: #000000;
text-decoration: none;
line-height: 41px;
}
#menu a:hover{
color:#FF0000;
}
#h-color {
margin-top: 18px;
}
/******************** Projects - Welcome ****************/
.dot-divider {
background-image:url(colourworld-images/dot.jpg);
width:324px;
height:16px;
background-repeat:repeat-x;
}
#h-projects {
margin-top: 35px;
}
#h-welcome {
margin-top: 18px;
}
#projects-outer {
margin-left: -5px;
width: 374px;
}#projects p{position:relative;}
#projects {
background: url(colourworld-images/box_bg.gif) no-repeat;
padding: 30px 20px 30px 30px;
}
#projects .left {
margin-right: 15px;
}
#projects .more {
padding-right: 25px;
}
#projects p {
margin-top: 0;
margin-bottom: 1em;
}
#welcome-more {
margin-top: 20px;
}
#copyright {
text-align: center;
background: #E8E8E8;
font-size: 11px;
padding: 4px;
margin-top: 30px;
}
</style>
</head>
<body>
<div id="wrapper">
<h1><img src="colourworld-images/logo.jpg" width="378" height="63" alt="Logo" /><img src="colourworld-images/spray.jpg" width="37" height="5" alt="Spray" id="spray" /></h1>
<div id="body-left">
<ul id="menu">
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">Catalogue</a></li>
<li><a href="http://www.free-css.com/">Planning</a></li>
<li><a href="http://www.free-css.com/">Services</a></li>
<li><a href="http://www.free-css.com/">Contact</a></li>
</ul>
<h2 id="h-color"><img src="colourworld-images/h_colours_of_the_world.gif" width="220" height="31" alt="H Colours Of The World" /></h2>
<img src="colourworld-images/pic_2.jpg" width="360" height="88" alt="Pic 2" />
<h2 id="h-projects"><img src="colourworld-images/h_projects.gif" width="82" height="26" alt="Projects" /></h2>
<div id="projects-outer">
<div id="projects"> <img src="colourworld-images/pic_3.jpg" width="116" height="80" alt="Pic 3" class="left" />
<p>Even more websites all about website templates on <a href="http://www.justwebtemplates.com">Just Web Templates</a>.</p>
<br />
<br />
<div class="dot-divider"></div>
<img src="colourworld-images/pic_4.jpg" width="116" height="80" alt="Pic 4" class="left" />
<p>If you're looking for beautiful and professionally made templates you can find them at <a href="http://www.templatebeauty.com">Template Beauty</a>.</p>
<br />
<br />
<p class="more"><a href="http://www.free-css.com/">more projects</a>
</div>
</div>
</div>
<div id="body-right"> <img src="colourworld-images/pic_1.jpg" width="318" height="464" alt="Pic 1" />
<h2 id="h-welcome"><img src="colourworld-images/h_welcome.gif" width="134" height="28" alt="H Welcome" /></h2>
<p>Don't forget to check <a href="http://www.free-css.com/">free website templates</a> every day, because we add at least one free website template daily.</p>
<p>This is a template designed by free website templates for you for free you can replace all the text by your own text. This is just a place holder so you can see how the site would look like.</p>
<p>You can remove any link to our websites from this template you're free to use the template without linking back to us.</p>
<p>If you're having problems editing the template please don't hesitate to ask for help on the <a href="http://www.free-css.com/">forum</a>.</p>
<p class="more" id="welcome-more"><a href="http://www.free-css.com/">learn more...</a></p>
<div id="copyright"> © Copyright 2006, Exterior design Company. </div>
</div>
</div>
</body>
</html>
Related examples in the same category