evolution
<!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>Evolution</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<style type='text/css'>
body
{
margin: 0;
padding: 0;
background: #FFF;
font-family: arial, verdana, tahoma, times new roman;
}
a, a:link
{
text-decoration: none;
color: #36C;
}
a:hover
{
text-decoration: none;
color: #000;
}
#contheader
{
width: auto;
height: 50px;
background: #2E2E2E url('evolution-images/background-contheader.jpg') repeat-x;
}
#header
{
margin: 0 auto;
width: 780px;
height: 50px;
}
#header ul
{
margin: 0;
padding: 15px 0 0 0;
list-style-type: none;
text-align: right;
font-weight: bold;
font-size: 80%;
letter-spacing: -1px;
}
#header li
{
display: inline;
margin-left: 15px;
}
#header li a
{
text-decoration: none;
color: #FFF;
}
#header li a:hover
{
text-decoration: none;
color: #97B0E6;
}
#headerleft
{
float: left;
width: 200px;
height: 50px;
}
#headerleft ul
{
text-align: left;
}
#headerleft li
{
display: inline;
margin: 0 15px 0 0;
}
#headerright
{
float: left;
width: 580px;
height: 50px;
}
#contmain
{
width: auto;
height: 150px;
background: #3366CC url('evolution-images/background-cont.jpg') repeat-x;
}
#main
{
margin: 0 auto;
width: 780px;
height: 150px;
}
#mainleft
{
float: left;
width: 450px;
height: 150px;
}
#mainleft h1
{
margin: 0;
padding: 50px 0 0 0;
font-size: 250%;
color: #FFF;
font-weight: normal;
letter-spacing: -3px;
}
#mainright
{
float: left;
width: 330px;
height: 150px;
}
#mainright h2
{
margin: 0;
padding: 30px 0 0 0;
font-size: 110%;
color: #DBE3F7;
letter-spacing: -1px;
font-weight: normal;
text-align: center;
font-family: georgia, arial, verdana, tahoma, times new roman;
}
#conttext
{
width: auto;
background: #FFF url('evolution-images/background-text.jpg') repeat-x;
font-size: 90%;
}
#text
{
margin: 0 auto;
width: 780px;
}
#textleft
{
float: left;
width: 580px;
}
#textright
{
float: right;
margin: 50px 0 0 0;
padding: 0 10px;
width: 180px;
}
#textright h4
{
padding: 0 10px 0 5px;
text-align: right;
font-weight: bold;
letter-spacing: -1px;
color: #BBB;
}
#textright ul
{
width: 180px;
margin: 0;
padding: 0;
list-style-type: none;
text-align: right;
font-weight: bold;
letter-spacing: -1px;
}
#textright a
{
display: block;
width: 165px;
background: #FFF url('evolution-images/menu-normal.gif') no-repeat;
padding: 10px 10px 10px 5px;
}
#textright a:link
{
color: #36C;
text-decoration: none;
}
#textright a:hover
{
background: #FFF url('evolution-images/menu-hover.gif') no-repeat;
color: #000;
}
#text p
{
margin: 0 0 15px 0;
padding: 0;
}
#text h3
{
margin: 0 0 15px 0;
padding: 0 0 5px 0;
font-size: 150%;
letter-spacing: -2px;
font-family: verdana, arial, georgia, tahoma, times new roman;
font-weight: normal;
border-bottom: 1px solid #C8D5EE;
}
blockquote
{
margin: 0 0 15px 0;
padding: 10px 30px;
width: 500px;
border-left: 2px solid #36C;
background: #E8ECF9;
font-family: georgia, arial, verdana, tahoma, times new roman;
}
#textbanner
{
width: 100%;
height: 50px;
}
#textbanner ul
{
margin: 0;
padding: 17px 0 0 0;
font-size: 100%;
font-weight: bold;
letter-spacing: -1px;
}
#textbanner li
{
display: inline;
margin: 0 10px 0 0;
}
#contfooter
{
clear: both;
top: 20px;
width: 100%;
background: #2E2E2E url('evolution-images/background-footer.jpg') repeat-x;
font-size: 90%
}
#footer
{
margin: 0 auto;
padding: 10px 0;
color: #888;
width: 780px;
}
#footer p
{
margin: 10px 0;
padding: 0;
}
#footer h4
{
margin: 10px 0 0 0;
padding: 0;
font-size: 120%;
font-weight: bold;
letter-spacing: -1px;
color: #999;
}
#footerleft, #footerright
{
float: left;
width: 50%;
}
#footerbottom
{
width: 100%;
text-align: center;
letter-spacing: -1px;
}
#footerbottom a
{
color: #CCC;
}
#footerbottom a:hover
{
color: #FFF;
}
</style>
</head>
<body>
<div id="contheader">
<div id="header">
<div id="headerleft">
<ul>
<li><a title="skip to content" href="#conttext">skip to content</a></li>
</ul>
</div>
<div id="headerright">
<ul>
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">link two</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>
</ul>
</div>
</div>
</div>
<div id="contmain">
<div id="main">
<div id="mainleft">
<h1>website.name.here</h1>
</div>
<div id="mainright">
<h2><span></span>Aliquam erat volutpat. Sed egestas bibendum elit. Nulla vel leo sit amet sem varius pellentesque. Nam ut nisi vel risus posuere egestas.<span></span></h2>
</div>
</div>
</div>
<div id="conttext">
<div id="text">
<div id="textright">
<div>
<h4>first side menu</h4>
<ul>
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">link two</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>
</ul>
<h4>second side menu</h4>
<ul>
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">link two</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>
</ul>
</div>
</div>
<div id="textleft">
<div id="textbanner">
<ul>
<li><a href="http://www.free-css.com/">home page</a></li>
<li>></li>
<li><a href="http://www.free-css.com/">Home</a></li>
</ul>
</div>
<h3>welcome.</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla nisi felis,
ultricies ut, tempor a, aliquet sed, leo. Proin posuere hendrerit dui. Ut
porta placerat felis. Donec sagittis tempus elit. Sed vestibulum mauris in
sapien. In ornare. Ut consectetuer facilisis mauris. Suspendisse vitae justo
vitae nisl pretium pulvinar. Praesent vitae nibh nec odio viverra bibendum.
Morbi laoreet, dolor ac commodo viverra, mauris mi gravida sapien, vel
cursus ante ligula aliquam nulla.</p>
<blockquote>Proin erat lorem, pretium vitae, sodales
sit amet, aliquet at, arcu. Phasellus semper imperdiet velit. Fusce molestie,
sem congue malesuada rutrum, dui est scelerisque magna, sit amet varius
magna lectus sed neque. Phasellus auctor lorem id libero. - tristar</blockquote>
<p>Etiam lacus. Praesent blandit, turpis et fermentum ornare, lorem nunc
volutpat ligula, et porta dui turpis eget ante. Vestibulum ac nunc. Integer
in mauris nec dolor facilisis congue. Proin eleifend lectus rhoncus odio.
Nam eros ante, adipiscing in, luctus eu, suscipit at, nisl. In in neque. Nam
neque. Nulla fermentum vehicula est. Cras nec nulla sed mauris ultricies
tempor. Proin et lorem. Vestibulum eu tortor ut turpis feugiat pharetra.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos hymenaeos. Aliquam fringilla eleifend elit. Nullam sit amet risus.
In mollis, nisi eget lobortis posuere, ipsum mauris condimentum erat, vel
imperdiet nunc risus a odio. Nunc sed libero. Nulla facilisi.</p>
<p>Etiam suscipit turpis vitae quam. Proin erat lorem, pretium vitae, sodales
sit amet, aliquet at, arcu. Phasellus semper imperdiet velit. Fusce molestie,
sem congue malesuada rutrum, dui est scelerisque magna, sit amet varius
magna lectus sed neque. Phasellus auctor lorem id libero. In dui. Fusce eros.
Duis luctus bibendum justo. Nullam molestie. Phasellus ut lectus nec urna
varius venenatis. Integer urna. Sed diam turpis, molestie et, luctus tempus,
commodo vel, orci.</p>
</div>
</div>
</div>
<div id="contfooter">
<div id="footer">
<div id="footerleft">
<h4>header.one.</h4>
<p>Etiam suscipit turpis vitae quam. Proin erat lorem, pretium vitae, sodales
sit amet, aliquet at, arcu. Phasellus semper imperdiet velit. Fusce molestie,
sem congue malesuada rutrum, dui est scelerisque magna, sit amet varius
magna lectus sed neque. Phasellus auctor lorem id libero. In dui. Fusce eros.
Duis luctus bibendum justo. Nullam molestie. Phasellus ut lectus nec urna
varius venenatis. Integer urna. Sed diam turpis, molestie et, luctus tempus,
commodo vel, orci.</p>
</div>
<div id="footerright">
<h4>header.two.</h4>
<p>Etiam suscipit turpis vitae quam. Proin erat lorem, pretium vitae, sodales
sit amet, aliquet at, arcu. Phasellus semper imperdiet velit. Fusce molestie,
sem congue malesuada rutrum, dui est scelerisque magna, sit amet varius
magna lectus sed neque. Phasellus auctor lorem id libero. In dui. Fusce eros.
Duis luctus bibendum justo. Nullam molestie. Phasellus ut lectus nec urna
varius venenatis. Integer urna. Sed diam turpis, molestie et, luctus tempus,
commodo vel, orci.</p>
</div>
<div id="footerbottom">
<p>web design by <a href="http://www.tristarwebdesign.co.uk">tristar web design</a></p>
</div>
</div>
</div>
</body>
</html>
Related examples in the same category