nebula
<!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" xml:lang="en" lang="en">
<head>
<title>Nebula</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<style type='text/css'>
/* Free standard-compliant open source XHTML/CSS template provided by Eatlon.com */
body {
background-color: #f7edd8;
font-family: arial, sans-serif;
font-size: .7em;
color: #a3855b;
padding: 0;
margin: 0;
}
a { text-decoration: none; color: #6d6c8e; padding: 0; margin: 0; }
a:hover { text-decoration: none; color: #a3855b; outline: 0; padding: 0; margin: 0; }
a.discrete { text-decoration: none; color: #a3855b; padding: 0; margin: 0; }
a.discrete:hover { text-decoration: underline; color: #a3855b; outline: 0; padding: 0; margin: 0; }
a.title { text-decoration: none; color: #fff; padding: 0; margin: 0; }
a.title:hover { text-decoration: none; color: #fff; outline: 0; padding: 0; margin: 0; }
img { border: 0; }
p {
padding: 0;
margin: 0 0 15px 0;
}
h1 {
color: #fffef1;
font-family: georgia, serif;
font-size: 5em;
font-weight: normal;
line-height: 45px;
padding: 0;
margin: 0;
}
h2 {
color: #fff;
font-size: 1em;
font-style: italic;
font-weight: 100;
text-indent: 20px;
padding: 0;
margin: 0;
}
h3 {
color: #968265;
font-family: georgia, serif;
font-size: 2em;
font-weight: 100;
line-height: 1em;
padding: 0;
margin: 0 0 10px 0;
}
#top {
height: 40px;
background-image: url(nebula-imgs/top.jpg);
background-repeat: repeat-x;
background-color: #f7edd8;
}
.title_tagline {
width: 720px;
padding: 108px 0 0 0;
margin: 0 auto;
}
#banner {
height: 202px;
background-image: url(nebula-imgs/nebula.jpg);
background-repeat: no-repeat;
background-color: #000;
}
#main {
min-height: 300px;
height: auto !important;
height: 300px;
background-image: url(nebula-imgs/content.jpg);
background-repeat: repeat-x;
background-color: #f7edd8;
}
#content {
width: 720px;
padding: 60px 0 0 0;
margin: 0 auto;
}
#left {
float: left;
width: 64%;
text-align: justify;
border-right: 1px solid #e4dac6;
padding: 0 28px 0 0;
margin: 0 0 20px 0;
}
.article {
margin: 0 0 25px 0;
}
#right {
float: right;
width: 28%;
padding: 0;
margin: 0 0 50px 0;
}
#right h3 {
font-size: 1.7em;
margin: 25px 0 8px 0;
}
#right ul {
list-style-type: none;
padding: 0;
margin: 0;
}
#right li {
margin: 0 0 3px 0;
}
#nav {
list-style-type: none;
padding: 0;
margin: 0 0 20px 0;
}
#nav li {
padding: 3px 0 3px 0;
margin: 0;
}
#nav a, span {
background-image: url(nebula-imgs/nav_bg.gif);
background-repeat: repeat-x;
color: #968265;
display: block;
width: 170px;
border: 1px solid #e4dac6;
padding: 5px 5px 5px 6px;
}
#nav a:hover, span {
color: #a3855b;
background-color: #efe3d2;
border: 1px solid #c9bea6;
padding: 5px 5px 5px 6px;
margin: 0;
}
#below {
clear: both;
min-height: 170px;
height: auto !important;
height: 170px;
color: #5c503e;
background-image: url(nebula-imgs/below.jpg);
background-repeat: repeat-x;
background-color: #ae997c;
margin: 20px 0 0 0;
}
.below {
width: 720px;
padding: 47px 0 0 0;
margin: 0 auto;
}
.b_left {
float: left;
width: 45%;
padding: 3px 0 0 0;
}
.b_img {
border: 2px solid #695b47;
margin: 0 8px 0 0;
}
.b_right {
float: right;
width: 50%;
padding: 7px 0 0 0;
}
#footer {
min-height: 70px;
height: auto !important;
height: 70px;
background-image: url(nebula-imgs/footer.jpg);
background-repeat: repeat-x;
background-color: #f7edd8;
}
.footer {
width: 720px;
padding: 32px 0 0 0;
margin: 0 auto;
}
.f_left {
float: left;
width: 45%;
}
.f_right {
float: right;
width: 45%;
text-align: right;
}
</style>
</head>
<body>
<div id="top"> </div>
<div id="banner">
<div class="title_tagline">
<h1><a href="http://www.free-css.com/" class="title">Nebula</a></h1>
<h2>- An epic drama of adventure and exploration</h2>
</div>
</div>
<div id="main">
<div id="content">
<div id="left">
<div class="article">
<h3>Lorem ipsum dolor sit amet</h3>
<p>Consectetuer adipiscing elit. Mauris sed nisl sed quam venenatis suscipit. Integer dolor. Morbi molestie. Aliquam consequat justo non pede. Praesent eleifend, orci sodales porttitor tempus, quam justo aliquet enim, sed fringilla pede neque ut erat. Phasellus faucibus. Fusce vulputate, nisl et ultrices hendrerit, lectus eros condimentum libero, vitae placerat ligula elit tempus magna. Vestibulum vitae pede et neque consectetuer varius. In hac habitasse platea dictumst. Ut ultrices mauris ut orci ornare fermentum. Cras diam mi, tincidunt vel, ullamcorper id, mattis non, est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Donec nec quam id elit vulputate ultrices. Praesent convallis nisi sit amet turpis. Sed in odio tristique elit sollicitudin cursus. Phasellus viverra. Nullam orci.</p>
</div>
<div class="article">
<h3>In posuere nunc et neque</h3>
<p>Suspendisse adipiscing placerat diam. Mauris vestibulum augue eget massa. Morbi sem enim, adipiscing vitae, fringilla non, tempus eleifend, pede. Ut eu purus nec pede euismod vulputate. In tincidunt mi ac elit. Fusce augue purus, adipiscing sed, dapibus eget, euismod aliquam, magna. Nulla bibendum porta nisl. Morbi dignissim. Morbi nec orci. Nulla rhoncus consequat ante. Vestibulum eu sapien nec ligula tincidunt fringilla. Aenean lacus augue, ullamcorper vitae, commodo ac, viverra et, leo. Pellentesque at enim. Nam arcu sapien, tempus sit amet, imperdiet vitae, eleifend at, metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Duis in tellus ut nisl blandit eleifend. Proin adipiscing, nulla in suscipit malesuada, turpis felis convallis arcu, at consectetuer lectus lorem id nisl.</p>
</div>
<div class="article">
<h3>Quisque sollicitudin</h3>
<p>Aenean at massa. Vestibulum vehicula sapien ut neque. Aenean ac quam. Nunc orci quam, congue id, faucibus eu, vulputate quis, nulla. Curabitur nec ante. Nullam rutrum purus in tortor. Suspendisse vel tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam erat volutpat. Fusce vel neque. Vestibulum quis lacus. Pellentesque mi. Vivamus sem massa, vulputate in, iaculis vel, porta sit amet, elit. Donec dui lectus, iaculis quis, mollis sit amet, gravida nec, sapien. Cras faucibus. </p>
</div>
</div>
<div id="right">
<ul id="nav">
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">Archive</a></li>
<li><a href="http://www.free-css.com/">Templates</a></li>
<li><a href="http://www.free-css.com/">Portfolio</a></li>
<li><a href="http://www.free-css.com/">Testimonials</a></li>
<li><a href="http://www.free-css.com/">Contact</a></li>
<li><a href="http://www.free-css.com/">Sitemap</a></li>
</ul>
<h3>Subscribe</h3>
<ul>
<li><a href="http://www.free-css.com/"><img src="nebula-imgs/feed.png" style="vertical-align: middle; margin: 0 5px 0 0;" alt="" />RSS feed</a></li>
<li><a href="http://www.free-css.com/"><img src="nebula-imgs/feed.png" style="vertical-align: middle; margin: 0 5px 0 0;" alt="" />E-mail subscription</a></li>
</ul>
<h3>Featured sites</h3>
<ul>
<li><a href="http://www.free-css.com/">Eatlon.com</a></li>
<li><a href="http://www.free-css.com/">Free web templates</a></li>
<li><a href="http://www.free-css.com/">Need a tailored website?</a></li>
</ul>
</div>
</div>
</div>
<div id="below">
<div class="below">
<div class="b_left"> <img src="nebula-imgs/1.gif" class="b_img" alt="" /> <img src="nebula-imgs/2.gif" class="b_img" alt="" /> <img src="nebula-imgs/3.gif" class="b_img" alt="" /> </div>
<div class="b_right"> <strong>Abouts this site</strong>. Ullamcorper vitae, commodo ac, viverra et, leo. Pellentesque at enim. Nam arcu sapien, tempus sit amet, imperdiet vitae, eleifend at, metus. Etiam vestibulum. Ut mattis erat a felis. Etiam odio odio, congue eget, ultrices eget, scelerisque at, felis. Donec nec sapien euismod lectus pellentesque imperdiet. Suspendisse gravida ultricies eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </div>
</div>
</div>
<div id="footer">
<div class="footer">
<div class="f_left"> 2008 © Your name or corporation </div>
<div class="f_right"> Valid <a href="http://validator.w3.org/check?uri=referer" class="discrete">XHTML</a> and <a href="http://jigsaw.w3.org/css-validator/check/referer" class="discrete">CSS</a> | Design by <a href="http://eatlon.com" class="discrete">Eatlon.com</a> </div>
</div>
</div>
</body>
</html>
Related examples in the same category