purplehaze
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>PURPLE HAZE</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
html, body {
margin : 0;
padding : 0;
}
body {
color : #333;
background : #484452;
width : 100%;
font : 73% "lucida sans", "Trebuchet MS", Arial, Helvetica, Tahoma, sans-serif;
}
/*WRAP*/
#container {
width : 80%;
margin : 0 auto;
line-height: 2em;
background : #F8F2DA url(purplehaze-images/bg1.jpg);
color : #333;
}
/*TOP BANNER*/
#top {
padding : 0.5em;
height: 100px;
background : #C7AFBD url(purplehaze-images/top.jpg);
color : #484452;
}
#top h1 {
padding : 0;
margin : 10px 0 0 10px;
font-size : 170%;
letter-spacing: 5px;
}
/*LEFT SIDEBAR*/
#leftnav {
float : left;
width : 160px;
margin : 0;
padding : 1em;
}
#leftnav p {
margin : 0 0 1em 0;
}
/*MAIN CONTENT*/
#content {
margin-left : 200px;
border-left : 1px solid #A662AA;
padding : 1em 3em 0 3em;
}
/*FOOTER*/
#footer {
clear : both;
margin : 0;
padding : .5em 0 1em 0;
font-size : 0.9em;
border-bottom : 0px solid #808080;
border-top :1px solid #808080;
color : #fafafa;
background : #5E516F;
}
#footer a {
background: inherit;
color: #C7AFBD;
}
#footer a:hover {
background: inherit;
color: #333;
}
#footer img {
float : right;
}
/* seen by IE5mac only, by Philippe Wittenbergh www.l-c-n.com */
*>html #footer img {
margin : 0;
}
/* end */
#footer p {
padding-left :10px;
}
/* TOP NAVIGATION */
#navcontainer ul {
text-align: center;
padding-bottom: 10px;
padding-top: 10px;
padding-left: 0;
margin-top: 0;
/* cancels gap caused by top padding in Opera 7.54 */
margin-left: 0;
background: #5E516F;
color: #fff;
width: 100%;
font-family: Helvetica, Arial, sans-serif;
line-height: 18px;
/* fixes Firefox 0.9.3 */
}
#navcontainer ul li {
display: inline;
padding-left: 0;
padding-right: 0;
padding-bottom: 10px;
/* matches link padding except for left and right */
padding-top: 10px;
}
#navcontainer ul li a {
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-top: 10px;
color: #fff;
text-decoration: none;
border-right: 1px solid #fff;
}
#navcontainer ul li a:hover {
background: #C7AFBD;
color: #333;
}
#navcontainer #active {
border-left: 1px solid #fff;
}
/* SEARCH BOX */
form { float: right;
margin-bottom: 20px;
}
input.search {
width: 100px;
border: none;
background: url(purplehaze-images/input.gif);
padding: 4px;
}
input.login {
width: 75px;
border: none;
background: url(purplehaze-images/logininput.gif);
padding: 4px;
}
/* BOTTOM COLUMNS */
#columns {
clear : both;
width :100%;
height: 150px;
margin : 0;
padding : 1em 0 0 0;
border-top: 3px solid #5E516F;
background: #C7AFBD;
color: #5E516F;
}
.col3,.col3center {
float: left;
width: 29%;
margin-left : 20px;
}
.col3center {
margin: 0 3%;
}
#columns a {
background: inherit;
color: #5E516F;
}
#columns a:hover {
background: inherit;
color: #fff;
}
#columns h2 {
margin : 0 0 0.5em 1em;
font-size : 140%;
text-transform: uppercase;
color : #5E516F;
background : transparent;
}
/* LINKS */
a:link, a:visited {
color : #86228B;
background : transparent;
text-decoration : none;
}
a:hover {
color : #484452;
text-decoration : none;
}
a:active {
color : #484500;
text-decoration : none;
}
img {
border : none;
}
/*CLASS */
.quote {
border-top : 1px solid #A662AA;
padding : 10px;
color: #A662AA;
}
.imgleft {
float: left;
}
/* TYPOGRAPHY */
h2 {
margin : 0 0 .5em 0;
font-size : 130%;
color : #5E516F;
background : transparent;
}
blockquote {
font-weight : bold;
font-style : italic;
color : #b29b35;
}
</style>
</head>
<body>
<div id="container">
<div id="top">
<h1>Your <span style="color: #A662AA;">Company</span> Name</h1>
<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>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="http://www.free-css.com/" id="current">Item one</a></li>
<li><a href="http://www.free-css.com/">Item two</a></li>
<li><a href="http://www.free-css.com/">Item three</a></li>
<li><a href="http://www.free-css.com/">Item four</a></li>
<li><a href="http://www.free-css.com/">Item five</a></li>
</ul>
</div>
<div id="leftnav">
<h2>More Links</h2>
<ul>
<li><a href="http://www.free-css.com/">SNAPP HAPPY</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>
<h2>Archives</h2>
<ul>
<li><a href="http://www.free-css.com/">January</a></li>
<li><a href="http://www.free-css.com/">February</a></li>
<li><a href="http://www.free-css.com/">March</a></li>
<li><a href="http://www.free-css.com/">April</a></li>
<li><a href="http://www.free-css.com/">May</a></li>
</ul>
<p class="quote">*PURPLE HAZE TEMPLATE*</p>
</div>
<div id="content">
<h2>Welcome to <span style="font-weight:bold; color:#A662AA;">Purple Haze</span> Template</h2>
<blockquote><img class="imgleft" src="purplehaze-images/badge.png" alt="" />This page has been tested in Mozilla and IE7. The page validates as XHTML 1.0 Transitional using valid CSS. For more FREE CSS templates visit <a href="http://www.mitchinson.net" title="my website">my website</a>.</blockquote>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis ligula. Donec tortor purus, ornare vel, tincidunt at, lacinia ac, leo. Nunc fermentum congue odio. Mauris cursus, pede vitae sagittis luctus, dolor felis aliquam arcu, ac pulvinar lacus massa non ipsum. Praesent volutpat, felis in consectetuer lobortis, nibh orci nonummy quam, nec lobortis tellus purus eget turpis. Vestibulum placerat sagittis lorem. Praesent interdum ultricies massa. Morbi dolor. Donec sit amet ligula ut ipsum ullamcorper imperdiet. Aliquam id lorem. Quisque elit elit, tincidunt vitae, tempus et, venenatis eget, turpis. Suspendisse porttitor volutpat justo. Etiam bibendum, diam quis nonummy malesuada, tortor sapien laoreet metus, quis varius augue velit eget ligula. Praesent massa felis, pulvinar quis, fringilla eget, suscipit in, diam. Curabitur dapibus rhoncus eros.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis ligula. Donec tortor purus, ornare vel, tincidunt at, lacinia ac, leo. Nunc fermentum congue odio. Mauris cursus, pede vitae sagittis luctus, dolor felis aliquam arcu, ac pulvinar lacus massa non ipsum. Praesent volutpat, felis in consectetuer lobortis, nibh orci nonummy quam, nec lobortis tellus purus eget turpis. Vestibulum placerat sagittis lorem. Praesent interdum ultricies massa. Morbi dolor.</p>
<h2>Sub content</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis ligula. Donec tortor purus, ornare vel, tincidunt at, lacinia ac, leo. Nunc fermentum congue odio. Mauris cursus, pede vitae sagittis luctus, dolor felis aliquam arcu, ac pulvinar lacus massa non ipsum. Praesent volutpat, felis in consectetuer lobortis, nibh orci nonummy quam, nec lobortis tellus purus eget turpis. Vestibulum placerat sagittis lorem. Praesent interdum ultricies massa. Morbi dolor. </p>
</div>
<div id="columns">
<div class="col3">
<h2>Updates</h2>
<div class="navlist">
<ul>
<li><a href="http://www.free-css.com/">Item two</a></li>
<li><a href="http://www.free-css.com/">Item three</a></li>
<li><a href="http://www.free-css.com/">Item four</a></li>
<li><a href="http://www.free-css.com/">Item five</a></li>
</ul>
</div>
</div>
<div class="col3center">
<h2>Resources</h2>
<div class="navlist">
<ul>
<li><a href="http://www.free-css.com/">Item two</a></li>
<li><a href="http://www.free-css.com/">Item three</a></li>
<li><a href="http://www.free-css.com/">Item four</a></li>
<li><a href="http://www.free-css.com/">Item five</a></li>
</ul>
</div>
</div>
<div class="col3">
<h2>Links</h2>
<div class="navlist">
<ul>
<li><a href="http://www.free-css.com/">Item two</a></li>
<li><a href="http://www.free-css.com/">Item three</a></li>
<li><a href="http://www.free-css.com/">Item four</a></li>
<li><a href="http://www.free-css.com/">Item five</a></li>
</ul>
</div>
</div>
</div>
<div id="footer">
<p><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 nofollow" target="_blank" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 License</a></p>
</div>
</div>
</body>
</html>
Related examples in the same category