earthling
<!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">
<head>
<title>Earthling</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/
body {
margin: 0;
padding: 0;
background: #311C00 url(earthling-images/img1.jpg);
text-align: justify;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 11px;
color: #9B8767;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
font-family: Georgia, "Times New Roman", Times, serif;
color: #E8D6B4;
}
h2, h3 {
margin: 0 0 20px 0;
padding: 0 0 10px 0;
background: url(earthling-images/img3.gif) repeat-x left bottom;
text-transform: lowercase;
letter-spacing: -1px;
}
h2 {
font-size: 25px;
}
h3 {
font-size: 17px;
}
p, ol, ul {
line-height: 160%;
}
ul {
margin-left: 0;
padding-left: 0;
list-style: none;
}
ul li {
padding: 2px 0 5px 0;
background: url(earthling-images/img4.gif) repeat-x;
}
ul li.first {
background: none;
}
a {
color: #D9C09A;
}
a:hover {
text-decoration: none;
}
strong {
color: #D9C09A;
}
.indent {
margin-top: 0;
margin-left: 130px;
}
.image {
float: left;
margin: 0;
}
#wrapper {
background: url(earthling-images/img2.jpg) repeat-x;
}
/* Header */
#header {
width: 730px;
height: 250px;
margin: 0 auto;
}
#header * {
text-transform: lowercase;
color: #FFFFFF;
}
#header h1 {
float: left;
padding: 90px 0 0 0;
letter-spacing: -2px;
font-size: 36px;
}
#header h2 {
float: left;
padding: 110px 0 0 6px;
background: none;
font-size: 12px;
font-weight: normal;
}
#header h2 a {
text-decoration: none;
}
#header ul {
float: right;
margin: 0;
padding: 110px 0 0 0;
list-style: none;
}
#header li {
display: inline;
}
#header li a {
display: block;
float: left;
padding: 0 15px;
border-left: 1px solid #7DD2FA;
}
#header li.first a {
border: none;
}
/* Content */
#content {
width: 730px;
margin: 0 auto;
}
#colOne {
float: left;
width: 500px;
}
#colTwo {
float: right;
width: 184px;
}
#colTwo h3 {
margin-top: 10px;
}
/* Footer */
#footer {
clear: both;
width: 730px;
margin: 20px auto;
padding: 20px 0;
background: url(earthling-images/img4.gif) repeat-x;
}
#footer p {
margin: 0;
padding: 0;
text-transform: lowercase;
text-align: center;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Earthling</h1>
<h2>Free CSS Template</h2>
<ul>
<li class="first"><a href="http://www.free-css.com/" accesskey="1">Home</a></li>
<li><a href="http://www.free-css.com/" accesskey="2">Blog</a></li>
<li><a href="http://www.free-css.com/" accesskey="3">Photo Gallery</a></li>
<li><a href="http://www.free-css.com/" accesskey="4">Contact</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="colOne">
<h2>Welcome to Sitename.com</h2>
<img src="earthling-images/img5.jpg" alt="" width="102" height="102" class="image" />
<p class="indent"><strong>Earthling</strong> is a free template from Free CSS Templates released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5 License</a>. The photo to the left is from PDPhoto.org. You're free to use this template for both commercial or personal use. I only ask that you link back to my site in some way. Enjoy :) Sed vel quam. Vestibulum pellentesque. Morbi sit amet magna ac lacus dapibus mauris sed elit venenatis porttitor. Morbi quam nisl, fringilla quis, sagittis nec, adipiscing at, elit. Maecenas sed sem sit amet lorem ipsum dolor sit amet veroeros consequat blandit sed nullam.</p>
<h3>Lorem Ipsum Dolor</h3>
<p>Fusce in turpis vitae nulla rutrum adipiscing. Ut urna. Maecenas at tellus. Duis pellentesque massa fermentum diam blandit imperdiet. Sed posuere vulputate magna. Proin placerat, nisl ut mollis tempus, magna nibh fringilla est, consequat cursus diam metus vel dolor. Fusce ut nulla sit amet mi sodales dictum. Proin tempor purus quis est. Donec nunc felis, hendrerit non, facilisis consectetuer, faucibus nec, leo. Etiam vestibulum luctus nibh. In hac habitasse platea dictumst. Vivamus luctus magna. Integer aliquam feugiat massa.</p>
<p>Sed tempor pede nec est. Aenean accumsan vestibulum nibh. Aliquam erat volutpat. Praesent a odio. Proin at libero in tellus scelerisque aliquam. Morbi at nisi. Ut at erat vel massa vulputate ultrices. Aliquam suscipit. Proin consequat, felis eu pulvinar adipiscing, augue lorem vestibulum turpis, a ornare diam lectus et neque. Aenean quis lacus. </p>
</div>
<div id="colTwo">
<h3>Sed Etiam</h3>
<p>Vestibulum pellentesque. Morbi sit amet magna ac lacus dapibus mauris sed elit venenatis porttitor. Morbi sit amet lorem ipsum dolor sit amet veroeros consequat blandit sed nullam. Blandit consequat etiam dolor.</p>
<h3>Nulla Maecenas</h3>
<ul>
<li class="first"><a href="http://www.free-css.com/">Fusce in turpis vitae</a></li>
<li><a href="http://www.free-css.com/">Nulla rutrum adipiscing urna</a></li>
<li><a href="http://www.free-css.com/">Maecenas at tellus duis</a></li>
<li><a href="http://www.free-css.com/">Pellentesque massa fermentum</a></li>
<li><a href="http://www.free-css.com/">Diam blandit imperdiet sed</a></li>
<li><a href="http://www.free-css.com/">Posuere vulputate magna</a></li>
<li><a href="http://www.free-css.com/">Proin placerat nisl ut mollis</a></li>
<li><a href="http://www.free-css.com/">Consequat cursus diam</a></li>
<li><a href="http://www.free-css.com/">Metus vel dolor fusce ut nulla</a></li>
</ul>
</div>
</div>
<div id="footer">
<p>(c) 2006 Sitename.com. All Rights Reserved. Design by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
</div>
</body>
</html>
Related examples in the same category