redhaze
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>RED HAZE</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
body {
margin : 0;
padding : 0;
font : 73% "lucida sans", helvetica, "Trebuchet MS", arial, sans-serif;
line-height : 1.8em;
background : #E0D0B3;
color : #333;
}
#header {
height : 200px;
margin-bottom : 0.5em;
border-top : 10px solid #fca404;
background : #A03719 url(redhaze-images/banner.jpg) no-repeat;
color : #000;
}
#gutter {
float : left;
width : 3%;
height : 1px;
}
#col1 {
float : left;
width : 20%;
margin-bottom : 1em;
border-right : 0px solid #eee;
padding-right : 3%;
}
#col2 {
float : left;
width : 33%;
margin-left : 3%;
margin-bottom : 1em;
border-right : 0px solid #eee;
padding-right : 3%;
}
#col3 {
float : left;
width : 27%;
margin-left : 4%;
margin-bottom : 1em;
}
#navcontainer ul {
margin-top : 10px;
list-style-type : none;
font-size : 85%;
background : #E0D0B3;
color : #666;
}
#navcontainer ul li a {
padding : 15px;
color : #682715;
background : transparent url(redhaze-images/list-off.gif) no-repeat left center;
text-align : left;
text-decoration : none;
}
#navcontainer ul li a:hover {
color : #006699;
background : transparent url(redhaze-images/list-on.gif) no-repeat left center;
}
#navcontainer ul li a#current {
background : transparent url(redhaze-images/list-active.gif) no-repeat left center;
color : #000;
}
#footer {
clear : both;
height : 50px;
padding : 5px;
text-align : left;
border-top : 10px solid #fca404;
background : #a03719;
color : #000;
}
#footer a {
text-decoration : none;
color : #fca404;
background-color : inherit;
}
#footer a:hover {
text-decoration : underline;
color : #999;
background-color : inherit;
}
h1 {
margin : 0;
padding : 3em 0 0 8em;
text-align : left;
text-transform : uppercase;
letter-spacing : 10px;
font-size : 150%;
color : #333;
background : inherit;
}
h2 {
margin-top : 0;
padding : 0.5em 0 0.5em 1em;
text-transform : uppercase;
letter-spacing : 5px;
font-size : 140%;
color : #682715;
background : inherit;
}
a {
text-decoration : none;
color : #006699;
background : inherit;
}
a:hover {
text-decoration : underline;
color : #a03719;
background : inherit;
}
a img {
border : 0;
}
.box {
padding : 20px;
color : #682715;
background : inherit;
}
.roundcont {
margin : 10px;
width : 98%;
background : #E9DDC9;
color : #333;
}
.roundcont p {
margin : 0 15px;
}
.roundtop {
background : url(redhaze-images/tr.gif) no-repeat top right;
}
.roundbottom {
background : url(redhaze-images/br.gif) no-repeat top right;
}
img.corner {
width : 10px;
height : 10px;
border : none;
display : block !important;
}
.img {
float : left;
padding : 4px;
margin : 4px;
border : 1px solid #556b2f;
}
form {
margin: 0;
}
input.search {
width: 100px;
border: none;
background: url(redhaze-images/input.gif);
padding: 4px;
}
input.login {
width: 100px;
border: none;
background: url(redhaze-images/logininput.gif);
padding: 4px;
}
blockquote {
font-weight : bold;
font-style : italic;
color : #E05222;
}
</style>
</head>
<body>
<div id="header">
<h1>Your Company Name</h1>
</div>
<div id="gutter"></div>
<div id="col1">
<div id="navcontainer">
<ul id="navlist">
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">Open Designs</a></li>
<li><a href="http://www.free-css.com/">ANDREAS VIKLUND</a></li>
<li><a href="http://www.free-css.com/">JAMES KOSTER</a></li>
<li><a href="http://www.free-css.com/">CSS play</a></li>
<li><a href="http://www.free-css.com/">LISTAMATIC</a></li>
<li><a href="http://www.free-css.com/"> LAYOUTGALA</a></li>
<li><a href="http://www.free-css.com/"> BLUEROBOT</a></li>
</ul>
</div>
<div class="search">
<form method="post" action="http://www.free-css.com/">
<p>
<input type="text" name="search" class="search" />
<input type="submit" value="Search" class="searchSubmit" />
</p>
</form>
</div>
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla aliquam justo a enim. Nulla imperdiet tortor ac arcu. Fusce consequat, nibh et condimentum ultricies, tortor nisi auctor felis, vitae egestas nisl odio a augue. </p>
</div>
</div>
<div id="col2">
<div class="roundcont">
<div class="roundtop"><img src="redhaze-images/tl.gif" alt="tl img" width="10" height="10" class="corner" style="display: none" /> </div>
<h2>Welcome to <span style="color:#E05222;">Red Haze</span> Template</h2>
<blockquote>All images were created by me so feel free to use them if you wish. The page has been tested in Mozilla and IE7. The page validates as XHTML 1.0 Transitional using valid CSS.<br />
For more FREE templates visit my website.</blockquote>
<p><img class="img" src="redhaze-images/pic.jpg" alt="" /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla aliquam justo a enim. Nulla imperdiet tortor ac arcu. Fusce consequat, nibh et condimentum ultricies, tortor nisi auctor felis, vitae egestas nisl odio a augue. Nam pellentesque, justo quis vehicula accumsan, quam tellus pharetra orci, sed cursus sapien neque ac tortor. In nec ipsum vel orci aliquam facilisis. In dignissim semper tortor. Donec a nunc ut lacus nonummy euismod. Suspendisse fringilla urna. Morbi in ligula. Sed elementum velit ac purus. Curabitur consequat pulvinar est. </p>
<div class="roundbottom"><img src="redhaze-images/bl.gif" alt="bl img" width="10" height="10" class="corner" style="display: none" /></div>
</div>
<p>This is a <a href="http://www.free-css.com/">link</a> to nowhere. Mauris vitae diam. Mauris pretium posuere massa. Morbi dignissim congue massa. Maecenas aliquam, risus vel euismod commodo, elit eros porttitor massa, eu mollis lectus nisi quis turpis. Morbi in ligula. Sed elementum velit ac purus. Curabitur consequat pulvinar est. Mauris vitae diam. Mauris pretium posuere massa. Morbi dignissim congue massa. Maecenas aliquam, risus vel euismod commodo, elit eros porttitor massa, eu mollis lectus nisi quis turpis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla aliquam justo a enim. Nulla imperdiet tortor ac arcu. Fusce consequat, nibh et condimentum ultricies, tortor nisi auctor felis, vitae egestas nisl odio a augue. </p>
</div>
<div id="col3">
<div class="roundcont">
<div class="roundtop"><img src="redhaze-images/tl.gif" alt="tl img" width="10" height="10" class="corner" style="display: none" /> </div>
<h2>Heading</h2>
<p><img class="img" src="redhaze-images/pic.jpg" alt="" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla aliquam justo a enim. Nulla imperdiet tortor ac arcu. Fusce consequat, nibh et condimentum ultricies, tortor nisi auctor felis, vitae egestas nisl odio a augue. Nam pellentesque, justo quis vehicula accumsan, quam tellus pharetra orci, sed cursus sapien neque ac tortor. </p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla aliquam justo a enim. Nulla imperdiet tortor ac arcu. Fusce consequat, nibh et condimentum ultricies, tortor nisi auctor felis, vitae egestas nisl odio a augue. </p>
<div class="roundbottom"><img src="redhaze-images/bl.gif" alt="bl img" width="10" height="10" class="corner" style="display: none" /></div>
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla aliquam justo a enim. Nulla imperdiet tortor ac arcu. Fusce consequat, nibh et condimentum ultricies, tortor nisi auctor felis, vitae egestas nisl odio a augue. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla aliquam justo a enim. Nulla imperdiet tortor ac arcu. In nec ipsum vel orci aliquam facilisis. In dignissim semper tortor. Donec a nunc ut lacus nonummy euismod. Suspendisse fringilla urna. </p>
</div>
<div id="footer"> <a href="http://www.free-css.com/">Homepage</a> | <a href="http://www.free-css.com/">contact</a> | <a href="http://validator.w3.org/check?uri=referer">html</a> | <a href="http://jigsaw.w3.org/css-validator">css</a> | © 2007 Anyone | Design by <a href="http://www.mitchinson.net"> www.mitchinson.net</a> | This work is licensed under a <a rel="license" target="_blank" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 License</a> </div>
</body>
</html>
Related examples in the same category