astroturfd
<!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
Name : astroturfd
Description: A three-color, two-column, fixed-width design.
Version : 1.0
Released : 20081120
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>astroturfd by NodeThirtyThree for 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
*/
html, body {
height: 100%;
}
body {
margin: 0px;
padding: 0px;
background: #005F9E url(astroturfd-images/bg01.jpg) repeat left top;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 11px;
color: #A6CAE4;
}
h1, h2, h3 {
margin: 0px;
text-transform: lowercase;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
color: #FFFFFF;
}
h1 {
letter-spacing: -2px;
font-size: 36px;
}
h2 {
letter-spacing: -1px;
font-size: 22px;
}
h3 {
font-size: 13px;
font-weight: bold;
}
p, ul, ol {
margin: 0px 0px 20px 0px;
text-align: justify;
line-height: 140%;
}
ul, ol {
}
a {
color: #AFDA3B;
}
a:hover {
text-decoration: none;
}
.color1 {
color: #D6EE72;
}
.color2 {
color: #9DC9E8;
}
.alignleft {
float: left;
}
.alignright {
float: right;
}
.aligncenter {
margin: 0px auto;
}
img.alignleft {
margin-right: 25px;
}
img.alignright {
margin-left: 25px;
}
a img, img {
border: 3px solid #FFFFFF;
}
.two-columns {
}
.two-columns .column-one {
float: left;
width: 206px;
}
.two-columns .column-two {
float: right;
width: 206px;
}
.list1 {
margin: 0px;
padding: 0px;
list-style: none;
}
.list1 li {
margin: 0px 0px 2px 0px;
padding: 5px 10px;
background: url(astroturfd-images/homepage06.jpg) repeat left top;
}
.list1 li.alt {
background-image: url(astroturfd-images/homepage07.jpg);
}
.list1 a {
color: #FFFFFF;
}
.list2 {
margin-left: 0px;
padding-left: 0px;
list-style: none;
}
.list2 li {
padding: 5px 0px;
background: url(astroturfd-images/homepage08.gif) repeat-x left top;
}
.list2 li.first {
padding-top: 0px;
background: none;
}
/* Wrapper */
#wrapper, #bg1, #bg2 {
height: 1000px;
min-height: 1000px;
}
html>body #wrapper, html>body #bg1, html>body #bg2 {
height: auto;
}
#wrapper {
background: url(astroturfd-images/bg02.jpg) repeat-x left top;
}
#bg1 {
background: url(astroturfd-images/bg03.jpg) repeat-y center top;
}
#bg2 {
background: url(astroturfd-images/bg04.jpg) no-repeat center top;
}
/* Header */
#header {
width: 680px;
height: 180px;
margin: 0px auto;
}
/* Logo */
#logo {
float: left;
width: 260px;
background: url(astroturfd-images/homepage01.gif) repeat-x left bottom;
}
#logo h1 {
padding: 100px 0px 15px 0px;
text-transform: lowercase;
}
#logo a {
text-decoration: none;
color: #FFFFFF;
}
/* Menu */
#menu {
float: right;
background: url(astroturfd-images/homepage01.gif) repeat-x left bottom;
}
#menu ul {
margin: 0px -13px 0px 0px;
padding: 118px 0px 16px 30px;
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
padding: 0px 13px 0px 16px;
background: url(astroturfd-images/homepage03.gif) no-repeat left center;
text-decoration: none;
text-transform: lowercase;
letter-spacing: -1px;
font-size: 18px;
}
#menu a:hover {
color: #9DC9E8;
}
#menu .first a {
background: none;
}
#menu .current_page_item a {
color: #FFFFFF;
}
/* Page */
#page {
width: 680px;
margin: 0px auto;
}
/* Content */
#content {
float: left;
width: 440px;
}
.post {
}
.post .title {
margin: 0px 0px 20px 0px;
padding: 0px 0px 10px 0px;
background: url(astroturfd-images/homepage02.gif) repeat-x left bottom;
}
.post .entry {
}
.post .meta {
padding: 10px 0px;
background: url(astroturfd-images/homepage08.gif) repeat-x left top;
}
.post .meta p {
margin: 0px;
line-height: normal;
}
/* Sidebar */
#sidebar {
float: right;
width: 212px;
}
/* Footer */
#footer {
padding-top: 20px;
background: url(astroturfd-images/homepage01.gif) repeat-x left top;
}
#footer p {
margin: 0px;
padding: 0px;
line-height: normal;
text-align: center;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="bg1">
<div id="bg2">
<div id="header">
<div id="logo">
<h1><a href="#">astro<span class="color1">turf</span><span class="color2">d</span></a></h1>
</div>
<!-- end #logo -->
<div id="menu">
<ul>
<li class="first current_page_item"><a href="#">Blog</a></li>
<li><a href="#" class="color1">About</a></li>
<li><a href="#" class="color2">Contact</a></li>
</ul>
</div>
<!-- end #menu -->
</div>
<!-- end #header -->
<div id="page">
<div class="post" style="margin-bottom: 30px;">
<div class="entry">
<p><img src="astroturfd-images/homepage05.jpg" alt="" width="206" height="84" class="alignright" /></p>
<p>Asttroturfd is a free, fully standards-compliant CSS template designed by <a href="http://www.nodethirtythree.com/">NodeThirtyThree</a> for <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>. All of the photos in this design are courtesy of <a href="http://www.pdphoto.org/">PDPhoto.org</a>. It also includes a <a href="subpage.html">second layout</a>. This free template is released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attributions</a> license, so youre pretty much free to do whatever you want with it (even use it commercially) provided you keep the links in the footer intact.
Have fun, and check out some of my commercial work at <a href="http://www.4templates.com/">4Templates</a>.</p>
</div>
</div>
<div id="content">
<div class="two-columns">
<div class="column-one post">
<h2 class="title">Consequat Etiam</h2>
<div class="entry">
<p><a href="#"><img src="astroturfd-images/homepage04.jpg" alt="" width="200" height="55" /></a></p>
<p>Quisque suscipit, quam vel aliquet tincidunt, eros nisi ultrices urna, a Pellentesque a lectus et tortor tincidunt dignissim etiam. Aliquam erat volutpat. Quisque risus nunc, eleifend.</p>
</div>
</div>
<div class="column-two post">
<h2 class="title color1">Sed Nullam</h2>
<div class="entry">
<ul class="list1">
<li><a href="#">Quisque suscipit quam</a><br />
<small>Vel aliquet tincidunt eros</small></li>
<li class="alt"><a href="#">Vel aliquet tincidunt eros</a><br />
<small>Nisi ultrices interdum</small></li>
<li><a href="#">Nisi ultrices interdum</a><br />
<small>Est purus vitae leo Pellentesque</small></li>
<li class="alt"><a href="#">Est purus vitae leo Pellentesque</a><br />
<small>Lectus et tortor tincidunt</small></li>
</ul>
</div>
</div>
</div>
</div>
<!-- end #content -->
<div id="sidebar">
<div class="post">
<h2 class="title color2">Interdum Volutpat</h2>
<div class="entry">
<ul class="list2">
<li class="first"><a href="#"> Quisque suscipit quam</a></li>
<li><a href="#">Vel aliquet tincidunt eros</a></li>
<li><a href="#">Nisi ultrices interdum</a></li>
<li><a href="#">Est purus vitae leo Pellentesque</a></li>
<li><a href="#">Lectus et tortor tincidunt</a></li>
<li><a href="#">Dignissim etiam nulla sed</a></li>
<li><a href="#">Aliquam erat volutpat</a></li>
</ul>
</div>
</div>
</div>
<!-- end #sidebar -->
<div style="clear: both;"> </div>
<div id="footer">
<p>(c) 2008 SiteName.com. Design by <a href="http://www.nodethirtythree.com/">NodeThirtyThree</a> and <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
</div>
<!-- end #footer -->
</div>
<!-- end #page -->
</div>
</div>
</div>
<!-- end #wrapper -->
</body>
</html>
Related examples in the same category