redplanet
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Sitename.com by Free Css Templates</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type='text/css'>
/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/
* {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
body {
margin: 30px 0;
padding: 0;
background: #EFEFEF;
font-size: 12px;
color: #6B6B6B;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
text-transform: lowercase;
font-weight: normal;
color: #000000;
}
h2 {
margin-bottom: 10px;
border-bottom: 1px solid #F4F4F4;
font-size: 26px;
}
h3 {
margin-bottom: 15px;
padding-bottom: 5px;
font-size: 16px;
border-bottom: 1px solid #F4F4F4;
}
p, ol, ul, blockquote {
line-height: 24px;
}
ul {
margin-left: 0;
padding-left: 0;
list-style: none;
}
a {
color: #EC5600;
}
a:hover {
text-decoration: none;
}
img {
border: none;
}
#textfield1 {
width: 185px;
margin-bottom: 10px;
border: 1px solid #E0E0E0;
border-right-color: #F6F6F6;
border-bottom-color: #F6F6F6;
}
#submit1 {
border: 1px solid #EBEBEB;
border-bottom-color: #DDDDDD;
background: #FBFBFB url(redplanet-images/img7.gif) repeat-x;
text-transform: lowercase;
font-size: 12px;
color: #7A7A7A;
}
/* Posted */
.posted {
height: 33px;
margin: 0 0 30px 0;
padding: 10px 15px 0 15px;
background: url(redplanet-images/img6.gif) repeat-x;
border-bottom: 1px solid #F2F2F2;
}
.posted p {
float: left;
margin: 0;
}
.posted .comments {
float: right;
}
.posted a {
color: #717171;
}
/* Header */
#header {
width: 917px;
height: 115px;
margin: 0 auto;
background: url(redplanet-images/img2.gif) repeat-x;
}
/* Logo */
#logo {
float: left;
height: 115px;
padding: 0 0 0 0;
background: url(redplanet-images/img1.gif) no-repeat;
}
#logo * {
text-decoration: none;
}
#logo h1 {
float: left;
padding: 50px 0 0 40px;
font-size: 36px;
}
#logo h1 a {
color: #000000;
}
#logo h1 span {
font-weight: bold;
}
#logo h2 {
float: left;
padding: 72px 0 0 8px;
font-size: 12px;
border: none;
}
#logo h2 a {
color: #B4B4B4;
}
/* Menu */
#menu {
float: right;
height: 45px;
padding: 70px 25px 0 0;
background: url(redplanet-images/img3.gif) no-repeat right top;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
padding: 0 15px 0 20px;
border-left: 1px solid #DBDBDB;
text-transform: lowercase;
text-decoration: none;
font-size: 13px;
color: #3B3B3B;
}
#menu .first a {
border: none;
}
/* Splash */
#splash {
width: 877px;
height: 170px;
margin: 0 auto;
background: url(redplanet-images/img5.gif) repeat-x left bottom;
border-right: 20px solid #FFFFFF;
border-left: 20px solid #FFFFFF;
}
/* Content */
#content {
width: 847px;
margin: 0 auto;
padding: 30px 35px 0 35px;
background: #FFFFFF url(redplanet-images/img8.gif) no-repeat left bottom;
}
#colOne {
float: left;
width: 620px;
}
#colTwo {
float: right;
width: 185px;
padding: 5px 0 0 0;
}
/* Footer */
#footer {
}
#footer p {
text-align: center;
color: #777777;
}
#footer a {
color: #5D5D5D;
}
</style>
</head>
<body>
<div id="header">
<div id="logo">
<h1><span><a href="#">Red</a></span><a href="http://www.freecsstemplates.org/">Planet</a></h1>
<h2><a href="http://www.freecsstemplates.org/">By Free CSS Templates</a></h2>
</div>
<div id="menu">
<ul>
<li class="first"><a href="#" accesskey="1" title="">Home</a></li>
<li><a href="#" accesskey="2" title="">Gallery</a></li>
<li><a href="#" accesskey="3" title="">Resources</a></li>
<li><a href="#" accesskey="4" title="">About</a></li>
<li><a href="#" accesskey="5" title="">Contact</a></li>
</ul>
</div>
</div>
<div id="splash"><a href="#"><img src="redplanet-images/img4.jpg" alt="" width="877" height="140" /></a></div>
<div id="content">
<div id="colOne">
<h2>Welcome to Sitename.com!</h2>
<p><strong>RedPlanet</strong> is a free template from <a href="http://www.freecsstemplates.org/">Free CSS Templates</a> released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5 License</a>. The header image of Mars surface is from <a href="http://www.nasa.gov/">NASA</a> (slightly edited). You're free to use this template for both commercial or personal use. I only ask that you link back to <a href="http://www.freecsstemplates.org/">my site</a> in some way. Enjoy :)</p>
<p>Sed vel quam. Vestibulum pellentesque. Morbi sit amet magna ac lacus dapibus interdum. Donec pede nisl, Maecenas sed sem sit amet lectus mattis molestie. Integer quis eros lorem ipsum dolor sit amet.</p>
<div class="posted">
<p>posted by <a href="#">Someone</a> on January 10, 2007</p>
<p class="comments"><a href="#">64 comments</a></p>
</div>
<h2>Lorem Ipsum Dolor</h2>
<p>Sed vel quam. Vestibulum pellentesque. Morbi sit amet magna ac lacus dapibus interdum. Donec pede nisl, Maecenas sed sem sit amet lectus mattis molestie. Integer quis eros lorem ipsum dolor sit amet. Sed vel quam. Vestibulum pellentesque. Morbi sit amet magna ac lacus dapibus interdum. Donec pede nisl, Maecenas sed sem sit amet lectus mattis molestie. Integer quis eros lorem ipsum dolor sit amet.</p>
<div class="posted">
<p>posted by <a href="#">Someone</a> on January 10, 2007</p>
<p class="comments"><a href="#">32 comments</a></p>
</div>
</div>
<div id="colTwo">
<h3>Search</h3>
<form id="form1" method="get" action="">
<div>
<input name="textfield1" type="text" id="textfield1" />
<input name="submit1" type="submit" id="submit1" value="Search" />
</div>
</form>
<p></p>
<h3>Veroeros Etiam</h3>
<ul>
<li><a href="#">Sed vel quam nulla</a></li>
<li><a href="#">Vestibulum pellentesque</a></li>
<li><a href="#">Morbi sit amet magna </a></li>
<li><a href="#">Lacus dapibus interdum</a></li>
<li><a href="#">Donec pede nisl dolore</a></li>
<li><a href="#">Maecenas sed sem</a></li>
</ul>
<h3>Quam Maecenas</h3>
<ul>
<li><a href="#">Morbi sit amet magna </a></li>
<li><a href="#">Lacus dapibus interdum</a></li>
<li><a href="#">Maecenas sed sem</a></li>
<li><a href="#">Donec pede nisl dolore<br />
</a></li>
</ul>
</div>
<div style="clear: both;"> </div>
</div>
<div id="footer">
<p>(c) 2007 Sitename.com. Design by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
</div>
</body>
</html>
Related examples in the same category