terrafirma2
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type='text/css'>
body {
margin: 0;
padding: 0;
background: url(terrafirma2-images/bg01.jpg);
font: 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #5A554E;
}
h1, h2, h3 {
margin: 0;
}
h1, h2 {
font-weight: normal;
}
h1 {
font-size: 32px;
}
h2 {
font-size: 24px;
}
p, ol, ul, dl {
margin-top: 0;
text-align: justify;
line-height: 2.2;
}
ul {
margin-left: 0;
padding-left: 0;
list-style: none;
}
strong {
color: #4A3E29;
}
a {
color: #506C00;
}
a:hover {
text-decoration: none;
}
a img {
border: 0;
}
.alignleft {
float: left;
}
.alignright {
float: right;
}
.aligncenter {
margin: 0 auto;
}
img.alignleft {
margin: 0 27px 0 0;
}
img.alignright {
margin: 0 0 0 27px;
}
img.border {
padding: 4px;
border: 1px solid #E9E4D8;
}
/* Wrapper */
#wrapper {
background: url(terrafirma2-images/bg02.jpg) repeat-x;
}
.container {
width: 1000px;
margin: 0 auto;
}
.clearfix {
clear: both;
}
/* Header */
#header {
height: 211px;
background: url(terrafirma2-images/bg04.jpg);
}
/* Logo */
#logo {
float: left;
width: 308px;
height: 211px;
}
#logo h1, #logo p {
text-transform: lowercase;
line-height: 1;
}
#logo h1 {
padding: 137px 0 0 50px;
letter-spacing: -2px;
font-size: 34px;
color: #FFFFFF;
}
#logo h1 sup {
font-size: 18px;
font-weight: normal;
}
#logo p {
padding: 0 0 0 50px;
font-size: 13px;
color: #F8AB80;
}
#logo a {
text-decoration: none;
}
#logo a:hover {
text-decoration: underline;
}
#logo h1 a {
color: #FFFFFF;
}
#logo p a {
color: #F8AB80;
}
/* Banner */
#banner {
float: left;
height: 118px;
padding: 93px 0 0 0;
}
/* Menu */
#menu {
height: 76px;
background: url(terrafirma2-images/bg04.jpg) no-repeat 0 -211px;
}
#menu ul {
height: 67px;
margin: 0 25px;
padding: 9px 0 0 14px;
background: url(terrafirma2-images/bg05.jpg);
list-style: none;
line-height: 1
}
#menu li {
float: left;
height: 35px;
padding: 15px 20px 0 20px;
}
#menu li.active {
background: url(terrafirma2-images/bg06.jpg) no-repeat;
}
#menu a {
text-transform: lowercase;
text-decoration: none;
letter-spacing: -1px;
font-size: 18px;
color: #FFFFFF;
}
#menu a:hover {
text-decoration: underline;
}
/* Bar */
.bar {
height: 48px;
margin: 0 25px;
background: url(terrafirma2-images/bg07.jpg);
}
.bar .text {
float: left;
padding: 17px 0 0 25px;
text-transform: lowercase;
font-size: 14px;
color: #809064;
}
/* Top Bar */
#top-bar {
background: url(terrafirma2-images/bg04.jpg) no-repeat 0 -287px;
}
/* Search */
#search {
float: right;
width: 245px;
height: 48px;
background: url(terrafirma2-images/bg08.jpg) no-repeat 0 12px;
}
#search form, #search fieldset {
margin: 0;
padding: 0;
border: 0;
}
#search .input-text {
float: left;
width: 178px;
margin: 12px 0 0 0;
padding: 4px 10px;
font: inherit;
line-height: normal;
border: none;
background: none;
color: inherit;
}
#search .input-submit {
display: none;
}
/* Page */
#page {
background: url(terrafirma2-images/bg03.jpg) repeat-y;
}
/* Content */
#content {
float: left;
width: 655px;
padding: 0 24px 0 25px;
background: url(terrafirma2-images/bg04.jpg) no-repeat 0 -335px;
}
/* Post */
.post {
}
.post .title, .post .date {
padding: 0 25px;
}
.post .title {
margin: 0;
padding-top: 50px;
line-height: normal;
font-size: 32px;
color: #5A5544;
}
.post .title a {
text-decoration: none;
color: #5A5544;
}
.post .title a:hover {
text-decoration: underline;
}
.post .date {
line-height: normal;
color: #ACAAA1;
}
.post .entry {
margin: 0 25px;
padding: 20px 0;
border-top: 1px solid #E5E1D8;
}
.post .meta {
height: 53px;
background: #E5ECDB;
border-bottom: 1px solid #DDE5CE;
}
.post .meta p {
line-height: normal;
}
.post .meta .tags {
float: left;
padding: 20px 0 0 25px;
}
.post .meta .links {
float: right;
padding: 20px 25px 0 0;
}
.post .meta .comments {
margin-right: 30px;
padding-left: 22px;
background: url(terrafirma2-images/img04.gif) no-repeat 0 50%;
}
.post .meta .more {
padding-left: 17px;
background: url(terrafirma2-images/img05.gif) no-repeat 0 50%;
}
/* Sidebar */
#sidebar {
float: right;
width: 246px;
padding: 24px 50px 0 0;
background: url(terrafirma2-images/bg04.jpg) no-repeat 100% -335px;
}
#sidebar ul {
margin: 0;
padding: 0 0 0 25px;
list-style: none;
line-height: normal;
border-left: 1px solid #E5E1D8;
}
#sidebar li {
}
#sidebar li ul {
padding: 0;
line-height: 3.5;
border: none;
}
#sidebar li li {
}
#sidebar h2 {
margin: 0 0 20px 0;
padding: 20px 0 5px 0;
border-bottom: 1px solid #E5E1D8;
}
/* 2 Columns */
.two-cols {
margin: 0 25px;
padding: 35px 35px 0 35px;
background: #28241E url(terrafirma2-images/bg09.jpg) repeat-x;
color: #736F6A;
}
.two-cols .col1 {
float: left;
width: 595px;
}
.two-cols .col2 {
float: right;
width: 210px;
padding: 0 0 0 25px;
border-left: 1px solid #423C31;
}
.two-cols h2 {
font-size: 26px;
color: #FFFFFF;
}
.two-cols a {
color: #736F6A;
}
/* Footer */
#footer {
background: url(terrafirma2-images/bg10.jpg) no-repeat;
padding: 55px 0;
}
#footer p {
text-align: center;
color: #8F8B83;
}
#footer a {
color: #8F8B83;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header" class="container">
<div id="logo">
<h1><a href="#">TerraFirma<sup>2</sup></a></h1>
<p>By <a href="http://www.nodethirtythree.com/">nodethirtythree</a> + <a href="http://www.freecsstemplates.org/">FCT</a></p>
</div>
<div id="banner"><img src="terrafirma2-images/img01.jpg" width="667" height="118" alt="" /></div>
</div>
<div id="menu" class="container">
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Archives</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="top-bar" class="container">
<div class="bar">
<div class="text">Aliquam sit amet veroeros dolore sed tempus nullam</div>
<div id="search">
<form method="get" action="">
<fieldset>
<input type="text" name="query" value="" class="input-text" />
<input type="submit" value="Search" class="input-submit" />
</fieldset>
</form>
</div>
</div>
</div>
<div id="page" class="container">
<div id="content">
<div class="post">
<h2 class="title"><a href="#">TerraFirma2 by NodeThirtyThree + FCT</a></h2>
<p class="date">Posted on October 1, 2009</p>
<div class="entry"> <img src="terrafirma2-images/img02.jpg" width="132" height="122" alt="" class="border alignleft" />
<p>This is <strong>TerraFirma2</strong>, a free template by <a href="http://www.nodethirtythree.com/">nodethirtythree</a> and <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>. This template is released under the <a href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution</a> license so use it however you like, just keep the footer links back to our sites. The photos used in this design are from <a href="http://www.pdphoto.org/">PDPhoto.org</a>. Check out my other work at <a href="http://www.nodethirtythree.com/">my site</a> or follow me on <a href="http://twitter.com/nodethirtythree">Twitter</a>. Have fun.</p>
</div>
<div class="meta">
<p class="tags">Tags: <a href="#">Internet</a>, <a href="#">Free Templates</a>, <a href="#">Web Design</a></p>
<p class="links"><a href="#" class="comments">Comments (64)</a> <a href="#" class="more">More</a></p>
</div>
</div>
<div class="post">
<h2 class="title"><a href="#">Lorem ipsum dolor sit amet</a></h2>
<p class="date">Posted on September 29, 2009</p>
<div class="entry">
<p>Faucibus non sit amet elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer placerat, dui sed posuere molestie, urna sapien porta purus, vel sodales ante erat sed arcu. Nunc semper, diam ut blandit elementum, ipsum purus vestibulum quam, sit amet auctor est nunc ut risus. Maecenas vitae justo sit amet erat congue aliquet molestie commodo odio. Praesent tempor pellentesque nibh.</p>
</div>
<div class="meta">
<p class="tags">Tags: <a href="#">Internet</a>, <a href="#">Free Templates</a>, <a href="#">Web Design</a></p>
<p class="links"><a href="#" class="comments">Comments (32)</a> <a href="#" class="more">More</a></p>
</div>
</div>
</div>
<div id="sidebar">
<ul>
<li>
<h2>About me</h2>
<p><img src="terrafirma2-images/img03.jpg" width="210" height="72" alt="" class="border" /></p>
<p><strong>Nunc semper diam</strong> ut blandit elementum, ipsum purus vestibulum quam, sit amet justo sit amet erat.</p>
</li>
<li>
<h2>Nulla aliquam</h2>
<ul>
<li><a href="#">Faucibus non sit amet elit nulla</a></li>
<li><a href="#">Lorem ipsum dolor sit amet veroeros\</a></li>
<li><a href="#">Consectetur adipiscing elit integer</a></li>
<li><a href="#">Placerat dui sed posuere molestie</a></li>
<li><a href="#">Urna sapien porta purus vel</a></li>
<li><a href="#">Sodales ante erat sed arcu semper</a></li>
<li><a href="#">Diam ut blandit elementum purus</a></li>
<li><a href="#">Vestibulum quam sit amet auctor </a></li>
</ul>
</li>
</ul>
</div>
<div class="clearfix"> </div>
<div id="footer-bar" class="two-cols">
<div class="col1">
<h2>Aliquam sit amet veroeros</h2>
<p>Faucibus non sit amet elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer placerat, dui sed posuere molestie, urna sapien porta purus, vel sodales ante erat sed arcu. Nunc semper, diam ut blandit elementum, ipsum purus vestibulum quam, sit amet auctor est ut risus. Maecenas sed dolore.</p>
</div>
<div class="col2">
<ul>
<li><a href="#">Faucibus non sit amet elit nulla</a></li>
<li><a href="#">Consectetur adipiscing elit integer</a></li>
<li><a href="#">Placerat dui sed posuere molestie</a></li>
<li><a href="#">Urna sapien porta purus vel</a></li>
</ul>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<div id="footer" class="container">
<p>(c) 2009 Sitename.com. Design by <a href="http://www.nodethirtythree.com/">nodethirtythree</a> + <a href="http://www.freecsstemplates.org/">Free CSS Templates</a></p>
</div>
</body>
</html>
Related examples in the same category