deepimpact
<!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>Deep Impact</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
<style type='text/css'>
body {
margin: 0;
background-color: #e4e4e4;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000;
}
a {
text-decoration: none;
color: #000;
}
#container {
margin: 0 auto;
width: 650px;
background-color: #fff;
padding: 50px;
}
#header {
margin-bottom: 40px;
border: 1px solid #fff; /* I.E. Fix */
}
#header h1 {
color: #02a2c4;
font-size: 24px;
font-family: Impact, sans-serif;
font-weight: normal;
float: left;
width: 390px;
margin: 0;
}
#header h1 span { color: #777; }
#header ul { padding: 0; margin: 10px 0 0 0; float: left; }
#header ul li {
list-style-type: none;
display: inline;
border-right: 1px solid #FFF;
white-space: nowrap; /* I.E. Fix */
padding-left: 4px;
}
#block {
background-color: #777;
color: #fff;
padding: 10px;
clear: both;
}
#nav {
margin: 0 0 20px 0;
padding: 1px;
background-color: #777;
line-height: 23px;
float: left;
}
#nav li {
list-style-type: none;
display: inline;
margin: 0 0 0 0;
padding: 0;
}
#nav li a {
text-decoration: none;
background-color: #a2a2a2;
height: 23px;
display: block;
float: left;
width: 100px;
text-align: center;
padding-top: 4px;
color: #777;
}
#nav li a:hover { background-color: #777; color: #02a2c4; font-weight: bold}
#nav li a.active { background-color: #777; color: #a2a2a2;}
#nav li a.active:hover { color: #02a2c4; font-weight: bold}
#pathway { clear: both; margin-bottom: 10px;}
#body { clear: both; background:url(deepimpact-images/bodybg.gif) repeat-x; }
#left { width: 180px; float: left; padding: 10px; }
#right { float: left; width: 429px; padding: 10px; border-left: 1px solid #bfbfbf;}
.clear {clear: both;}
#footer { clear: both; background: #676767; color: #fff; height: 10px; padding: 10px;}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Your<span>Site</span>.com</h1>
<ul>
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">services</a></li>
<li><a href="http://www.free-css.com/">portfolio</a></li>
<li><a href="http://www.free-css.com/">site map</a></li>
<li><a href="http://www.free-css.com/">contacts</a></li>
</ul>
</div>
<div id="block">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam ut enim. Mauris in enim. Nulla rutrum. Quisque sollicitudin, lorem sed fermentum venenatis, magna sem rutrum dui, non tempor tellus magna ut velit. Proin sit amet tortor sed massa tempus tincidunt. Suspendisse potenti. Suspendisse accumsan cursus ligula. Mauris commodo. Nulla facilisi. In dapibus. Praesent malesuada. Integer tristique mattis enim. Vestibulum id lectus luctus erat scelerisque bibendum. Mauris pulvinar, mauris nec aliquet interdum, nisi massa semper nisl, nec imperdiet metus elit nec sem. Nam ut turpis. Mauris laoreet accumsan pede. Fusce porttitor tempus leo.</p>
<p>Proin sit amet tortor sed massa tempus tincidunt. Suspendisse potenti. Suspendisse accumsan cursus ligula. Mauris commodo. Nulla facilisi. In dapibus.</p>
</div>
<ul id="nav">
<li><a href="http://www.free-css.com/" class="active">home</a></li>
<li><a href="http://www.free-css.com/">services</a></li>
<li><a href="http://www.free-css.com/">portfolio</a></li>
<li><a href="http://www.free-css.com/">contacts</a></li>
</ul>
<div id="pathway"> Home > Services > Web Design </div>
<div id="body">
<div class="clear"> </div>
<div id="left">
<p>Some more text here or delete this for 1 solid block of text.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla facilisi. Fusce condimentum varius metus. Mauris lacus. Vivamus egestas facilisis eros.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla facilisi. Fusce condimentum varius metus. Mauris lacus. Vivamus egestas facilisis eros.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla facilisi. Fusce condimentum varius metus. Mauris lacus. Vivamus egestas facilisis eros.</p>
</div>
<div id="right">
<p>Here is some more text.</p>
<p>Susmonte urnar et nam temper congue a leo maurisus morbi nibh. Conguecondimenterdum ac natis eget sed ant sed arcu ut nectus sapien. Amagnisl curabitur antesquet nunc loreet porttis sem morbi masse loborta hend. Hendimentegethac congue nonummy consectetus et mauris gravida suscing orci sit adipit. Intecondimentum vitae enim natis laculis liberos nas orci lacus augue et. Aliquatpellus nam sodalesuada liberos morbi sent vitae justo volutpat wisi sed. Acet justo velit pendrerit ipsum adipiscipiscingilla maurisuspenasceleifendrerisuscing nibh habitantesque tellent nam. Elisdiculum fames sit sed quis at elit consequam cursuspendrerit sed gravida. Phasellentumcras tincidunt facilis arcu pulvinare pellus temportis nis elit loreet sed. Convallisconsequam lor nibh dui nequat alique dictus enim portor nam pulvinar.</p>
<p>Pharetiumac ac elit lacilis gravida gravida sed ac dolor id cursusce. Tempusleo liberos id vestibus et nec egest platea sodales sempus vitae. Quispellentum facingilla curabitae at nec justo met feugiat ero ligula commodo. Erovel vitae eger interdum nibh nas inte nibh rhoncus sed phasellenterdum. Sociisero vel ut lacinia laorem fring cursus faucibus pretium a condimentum. Ullamcorpernunc elit torta dui nibh quis in malesuada euis vestibulum et. Duiwisi elit elit in enim vel id alique lacus leo por. Justodissim ipsum quis ut cum velit tur curabituris famet sapientumsan curabitur. Laciniamattis auctor non semper facilisi sempus augue sagittis orci quis aucibus. Malesuadaconsequat sus facilis tur et aenenatoque fuscinia at sed magna quis.</p>
<p>Duisit habiturpiscinia et aenean duis loreet feugiat consequat met eget ultris. Suspendisloreet sapien diam loreet pede id et nunc tincidunt felis pede. Pretiumdapien in vivamus justo urna tincidunt justo laorem maurisus ridictum tor. Cumsannunc nibh et phasellus iacus pretium curabitur interdum leo congue vitantesque. Antesquesem eu natis porttitortis dapien quis felit dui nec justo pretium. Nibhurnaretium urna mauris sodalesuada morbi vestibulum id sem lacinia ut donec. Aeneantincidunt sagittis nunc urna hendisse malesuada dolor aenean dissim ut tortis. Mattisat in sociis loborta amet facilis nam et malesuada nulla eros. Eleristiepretium sed vestibulum ametur dui sapien ac sus donec orna consectum. Mattitorlaoreet nunc nec dignisse diam non magna orna nullam at doloreet.</p>
<p>Wisinulla met pellus maurisque volutpat dis justo tellentum velit ridictum mus. Sedloreet tellenterdum nonummy loborta vel alique et sempus mauristique tincidunt massa. Ipsumsed males monterdum tur por orci non mollis dui congue nibh. Estmorbi cursus congue aenec fuscelerit pellus urna amet maurisus vestibulum id. Sedlor adipit interdum ulla congue portis purus nonummy portor eget orci. Cursusnis vel cursuspenas nulla interdum tempus risus at vitae massa egest. Urnaurna nunc ut ipsum orci nibh volutpat nunc urna nisl tincidunt. Interdumlor tortis justo nam sed fusce nibh nequat ac facilis vivamus. Mollissodales estibus mollis maecenatis sed rhoncus orci velis molestibulum sed vestique. Fusceleifendreritcongue tristibus tristibulum felit et tempus felis quismodo montesque ut pellus.</p>
<p>Quamtincidunt semper morbi morbi sed aenenas dapibulum vestas nasceleris aliquam vitassa. Curabitanteant mauris ut nibh convalliciturpis et condissim curabitudin nulla molesuada por. Vitaenon risque laorem sed et tellus pede tellus et pellentumst sem. Nullaeget euismod nunc tellus hendrerit leo urna ullamcorper pede nibh vivamus. Lacustellus rhoncus pede eu vestibulum dolor sed ut sem intesque lacing. Elitsus velis alique et gravida metus antesque enim gravida semper in. Justoet ac trisque natibulum lobortor pellus et quis ipsum odio et. Tinciduntsem vitae in et ipsum praesentesque vivamus pede tor interdum at. Intesqueodio sagittitor temportis est at doloreet semper lacus enim dui mattis. Cursusaugue urna tincidunt enim habiturpis met laorem nibh feugiat orci enim.</p>
<p>Quisa vestibulum id estibulum fring sapibus massa quis pede accumst trisus. Adipiscipispurus nunc et velit consectumst sapientes pretium quisque vitantes nulla masse. Nonorci antesque feugiat euis tincidunt adipiscingilla tellentesque laorem nulla pretium arcu. Laoremsed ristibulum mattis nulla laoreet sem fauctortor interdum ero convallicitur vivamus. Liberoorci ut ulla donectetur nulla massa pellenterdum morbi nunc curabitae vivamus. Quislor quis mollisi nec lacinia orna ipsum eget nibh lacilis risque. Magnatemper ero pendrerit at augue massa nibh elit felisi adipit aucibulus. Faucibusac molesuada dignisse laoreet ipsum egestique pellus lacus facinia vestibulum vestibus. Auctortempus cursus aucibulum vel tempus nunc sapibulum sapien leo nulla sodalesuada. Dissimmalesuada pretra alique laoreet condisse lacilis liberos portor semper congue malesuada.</p>
</div>
<div class="clear"> </div>
</div>
<div id="footer"> Design by <a href="http://www.td50.com">TD50.com</a> | Copyright 2006 yoursite.com | XHTML | CSS </div>
</div>
</body>
</html>
Related examples in the same category