simplex
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Simplex</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<style type='text/css'>
body
{
margin: 0;
margin: 0 auto;
background: #f4f4f4 url(simplex-images/bg.gif) top center repeat-y;
}
#header
{
vertical-align: top;
padding-bottom: 11px;
padding-left: 18px;
font-family: Georgia, Lucida, Arial, sans-serif;
font-size: 11px;
font-weight: lighter;
color: #00008B;
border-bottom: 1px solid #efefef;
}
.title
{
font-size: 24px;
font-style: italic;
font-weight: bold;
color: #90200A;
}
.darktitle
{
font-size: 24px;
font-style: italic;
font-weight: bold;
color: #000000;
}
#main
{
width: 780px;
height: auto;
border-left: 1px solid #efefef;
border-right: 1px solid #efefef;
margin: 0 auto 0 auto;
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
font-weight: normal;
color: #A52A2A;
}
h1, h2
{
font-size: 12px;
font-family: Verdana, Arial, sans-serif;
color: #191970;
font-weight: bold;
padding-left: 4px;
}
h3, h4
{
font-size: 11px;
font-family: Verdana, Arial, sans-serif;
color: #2F4F4F;
font-weight: bold;
padding-left: 8px;
}
#menu
{
width: 150px;
color: #00008B;
font-family: Verdana, Arial, sans-serif;
}
#menu a:link, #menu a:visited
{
width: 150px;
margin: 1px 0 1px 0;
padding: 4px 3px 4px 8px;
background-color: transparent;
color: #003366;
text-decoration: none;
font-family: Verdana, Arial, sans-serif;
font-weight: normal;
display: block;
}
#menu a:hover
{
color: #A52A2A;
text-decoration: none;
}
#topmenu
{
text-align: right;
padding-top: 1em;
padding-right: 1em;
font-family: Verdana, Arial, sans-serif;
font-weight: bold;
}
#topmenu a:link, #topmenu a:visited
{
color: #ffffff;
text-decoration: none;
background-color: #000000;
border: 1px solid #666666;
padding-top: .3em;
padding-bottom: .3em;
padding-left: .8em;
padding-right: .8em;
}
#topmenu a:hover
{
color: #ffffff;
background-color: #90200A;
border: 1px solid #90200A;
text-decoration: none;
padding-top: .3em;
padding-bottom: .3em;
padding-left: .8em;
padding-right: .8em;
}
#lefty
{
margin: 8px;
width: 150px;
height: auto;
color: #00008B;
font-family: Verdana, Arial, sans-serif;
}
#lefty p
{
width: 94%;
padding: 12px;
font-family: Verdana, Arial, sans-serif;
background-color: #f9f9f9;
color: #607080;
}
#block
{
padding: 12px;
font-family: Verdana, Arial, sans-serif;
background-color: #f9f9f9;
color: #607080;
}
#breadcrumb
{
text-align: right;
color: #999999;
padding-bottom: 11px;
}
#breadcrumb a:link, #breadcrumb a:visited
{
color: #999999;
text-decoration: none;
}
#breadcrumb a:hover
{
color: #aaaaaa;
text-decoration: none;
}
a:link, a:visited
{
color: #003366;
border-bottom: 1px solid #efefef;
font-family: Verdana, Arial, sans-serif;
text-decoration: none;
}
a:hover
{
color: #A52A2A;
text-decoration: none;
}
#content
{
float: right;
width: 570px;
text-align: left;
padding-top: 11px;
padding-bottom: 11px;
padding-left: 11px;
padding-right: 16px;
border-left: 1px solid #efefef;
font-family: Verdana, Arial, sans-serif;
line-height: 145%;
color: #607080;
}
#content h3, h4
{
font-family: Verdana, Arial, sans-serif;
color: #2F4F4F;
font-weight: bold;
padding-left: 0px;
}
#footer
{
text-align: center;
padding: 11px;
font-family: Verdana, Arial, sans-serif;
font-weight: lighter;
color: #cccccc;
}
hr
{
border:0;
border-bottom: 1px solid #efefef;
height: 1px;
}
li
{
list-style-type: none;
line-height: 160%;
}
</style>
</head>
<body>
<div id="main">
<div id="topmenu"> <a href="http://www.free-css.com/">Home</a><a href="http://www.free-css.com/">products</a><a href="http://www.free-css.com/">services</a><a href="http://www.free-css.com/">support</a><a href="http://www.free-css.com/">about us</a> </div>
<div id="header"> <span class="title">sim<span class="darktitle">plex</span></span><br/>
</div>
<div id="content">
<div id="breadcrumb"> <a href="http://www.free-css.com/">Home</a> > <a href="http://www.free-css.com/">products</a> > <a href="http://www.free-css.com/">one</a> </div>
<div id="block"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin eu est ut mi ornare placerat. Suspendisse felis odio, elementum non, blandit vel, auctor eget, nunc. Fusce convallis dignissim odio. Phasellus commodo egestas felis. Praesent eu sem at mi tempus egestas. Donec mollis. Morbi in lectus id magna dictum eleifend. </div>
<h3>Heading area</h3>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin eu est ut mi ornare placerat. Suspendisse felis odio, elementum non, blandit vel, auctor eget, nunc. Fusce convallis dignissim odio. Phasellus commodo egestas felis. Praesent eu sem at mi tempus egestas. Donec mollis. Morbi in lectus id magna dictum eleifend. Morbi vel diam quis sapien sollicitudin lacinia. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In consequat facilisis turpis. Proin erat dui, dictum nec, tincidunt nec, pharetra nec, tellus. Curabitur facilisis, nulla a tincidunt gravida, leo pede porttitor odio, ac adipiscing felis leo sit amet justo. Nunc egestas sodales sem. Duis ac mauris eu enim scelerisque mattis.
Vivamus tortor neque, ultricies vel, dignissim nec, porttitor pulvinar, wisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ipsum nibh, nonummy sit amet, gravida et, ultrices at, wisi. Pellentesque iaculis auctor risus. Nullam mauris. Etiam pede tortor, auctor at, aliquet sit amet, hendrerit.
<h3>Heading area</h3>
Vivamus tortor neque, ultricies vel, dignissim nec, porttitor pulvinar, wisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ipsum nibh, nonummy sit amet, gravida et, ultrices at, wisi. Pellentesque iaculis auctor risus. Vivamus tortor neque, ultricies vel, dignissim nec, porttitor pulvinar, wisi.
Vivamus tortor neque, ultricies vel, dignissim nec, porttitor pulvinar, wisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ipsum nibh, nonummy sit amet, gravida et, ultrices at, wisi. Pellentesque iaculis auctor risus. Nullam mauris. Etiam pede tortor, auctor at, aliquet sit amet, hendrerit.
<h3>Heading areal</h3>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin eu est ut mi ornare placerat. Suspendisse felis odio, elementum non, blandit vel, auctor eget, nunc. Fusce convallis dignissim odio. Phasellus commodo egestas felis. Praesent eu sem at mi tempus egestas. Donec mollis. Morbi in lectus id magna dictum eleifend. Morbi vel diam quis sapien sollicitudin lacinia. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In consequat facilisis turpis. Proin erat dui, dictum nec, tincidunt nec, pharetra nec, tellus. Curabitur facilisis, nulla a tincidunt gravida, leo pede porttitor odio, ac adipiscing felis leo sit amet justo. Nunc egestas sodales sem. Duis ac mauris eu enim scelerisque mattis.
Vivamus tortor neque, ultricies vel, dignissim nec, porttitor pulvinar, wisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ipsum nibh, nonummy sit amet, gravida et, ultrices at, wisi. Pellentesque iaculis auctor risus. Nullam mauris. Etiam pede tortor, auctor at, aliquet sit amet, hendrerit.
<h3>Heading area</h3>
Vivamus tortor neque, ultricies vel, dignissim nec, porttitor pulvinar, wisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ipsum nibh, nonummy sit amet, gravida et, ultrices at, wisi. Pellentesque iaculis auctor risus. Vivamus tortor neque, ultricies vel, dignissim nec, porttitor pulvinar, wisi.
Vivamus tortor neque, ultricies vel, dignissim nec, porttitor pulvinar, wisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ipsum nibh, nonummy sit amet, gravida et, ultrices at, wisi. Pellentesque iaculis auctor risus. Nullam mauris. Etiam pede tortor, auctor at, aliquet sit amet, hendrerit.
<h3>Heading areal</h3>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin eu est ut mi ornare placerat. Suspendisse felis odio, elementum non, blandit vel, auctor eget, nunc. Fusce convallis dignissim odio. Phasellus commodo egestas felis. Praesent eu sem at mi tempus egestas. Donec mollis. Morbi in lectus id magna dictum eleifend. Morbi vel diam quis sapien sollicitudin lacinia. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In consequat facilisis turpis. Proin erat dui, dictum nec, tincidunt nec, pharetra nec, tellus. Curabitur facilisis, nulla a tincidunt gravida, leo pede porttitor odio, ac adipiscing felis leo sit amet justo. Nunc egestas sodales sem. Duis ac mauris eu enim scelerisque mattis.
Vivamus tortor neque, ultricies vel, dignissim nec, porttitor pulvinar, wisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ipsum nibhs, nonummy sit amet, gravida et, ultrices at, wisi. Pellentesque iaculis auctor risus. Nullam mauris. Etiam pede tortor, auctor at, aliquet sit amet, hendrerit.
<h3>Heading area</h3>
Vivamus tortor neque, ultricies vel, dignissim nec, porttitor pulvinar, wisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ipsum nibh, nonummy sit amet, gravida et, ultrices at, wisi. Pellentesque iaculis auctor risus. Vivamus tortor neque, ultricies vel, dignissim nec, porttitor pulvinar, wisi.
Vivamus tortor neque, ultricies vel, dignissim nec, porttitor pulvinar, wisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ipsum nibh, nonummy sit amet, gravida et, ultrices at, wisi. Pellentesque iaculis auctor risus. Nullam mauris. Etiam pede tortor, auctor at, aliquet sit amet, hendrerit.
<h3>Heading area</h3>
Vivamus tortor neque, ultricies vel, dignissim nec, porttitor pulvinar, wisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ipsum ni
<div id="footer"> © 2005 Your Company. All rights reserved. </div>
</div>
<div id="lefty">
<div id="menu"> <a href="http://www.free-css.com/">News Archive</a> <a href="http://www.free-css.com/">Press Release</a> <a href="http://www.free-css.com/">Disclaimer</a> <a href="http://www.free-css.com/">Privacy Policy</a> </div>
<p> A representative business story or maybe some testimonials could go inside this block. </p>
</div>
</div>
</body>
</html>
Related examples in the same category