altruism
<!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 : Altruism
Description: A two-column, fixed-width template fit for 1024x768 screen resolutions.
Version : 1.0
Released : 20080308
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Altruism 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
*/
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
background: #E1F0C4 url(altruism-images/img01.jpg) repeat;
text-align: justify;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 11px;
color: #909B78;
}
h1, h2, h3 {
margin-top: 1.5em;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.4em;
}
h3 {
font-size: 1em;
}
p, ul, ol {
margin-top: 1.5em;
}
a {
color: #909B78;
}
a:hover {
text-decoration: none;
}
ul, ol {
margin-left: 3em;
}
blockquote {
margin-left: 3em;
margin-right: 3em;
}
hr { display: none; }
.hr1 {
height: 4px;
padding-bottom: 20px;
background: url(altruism-images/img02.gif) repeat-x left top;
}
/* Header */
#header {
width: 900px;
height: 150px;
margin: 0 auto;
background: #FFFFFF;
}
/* Logo */
#logo {
float: left;
margin: 0;
padding: 0;
width: 504px;
height: 150px;
}
#logo h1, #logo h2 {
margin: 0;
padding: 0;
text-transform: lowercase;
font-family: Georgia, "Times New Roman", Times, serif;
}
#logo h1 {
margin: 0;
padding: 0;
padding: 70px 0 0 50px;
font-size: 40px;
font-weight: normal;
color: #616B4F;
}
#logo h1 a {
color: #616B4F;
}
#logo h2 {
margin: 0;
padding: 0;
padding-left: 50px;
text-transform: uppercase;
font-size: 14px;
color: #C6D0B3;
}
#logo h2 a {
color: #C6D0B3;
}
#logo a {
text-decoration: none;
}
/* Menu */
#menu {
margin: 0;
padding-top: 70px;
float: right;
width: 396px;
}
#menu ul {
margin: 0;
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
display: block;
float: left;
margin: 0;
padding: 10px 10px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
font-weight: normal;
font-family: Georgia, "Times New Roman", Times, serif;
color: #616B4F;
}
#menu a:hover {
background: #9FAB87;
color: #FFFFFF;
}
#menu .current_page_item a {
background: #9FAB87;
color: #FFFFFF;
}
/* Page */
#page {
width: 800px;
margin: 0 auto;
padding: 28px 50px 0px 50px;
background: #FFFFFF;
}
#latest-post {
float: left;
width: 500px;
padding: 46px 0px 0px 0px;
background: url(altruism-images/img02.gif) repeat-x left top;
line-height: 25px;
}
#latest-post h1 {
letter-spacing: -.5px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 26px;
font-weight: normal;
color: #616B4F;
}
.post {
}
.post .title {
margin: 0;
}
.post h2 {
letter-spacing: -.5px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 26px;
font-weight: normal;
color: #616B4F;
}
.post .meta {
height: 31px;
background: #EAF0DE url(altruism-images/img06.jpg) no-repeat right bottom;
text-decoration: none;
}
.post .posted {
float: left;
height: 16px;
padding: 5px 20px 5px 12px;
}
.post .permalink, .post .comments {
float: right;
height: 16px;
}
.post .permalink {
background: url(altruism-images/img05.gif) no-repeat left 80%;
padding: 5px 30px 5px 15px;
}
.post .comments {
background: url(altruism-images/img04.gif) no-repeat left 87%;
padding: 5px 30px 5px 20px;
}
.post .permalink {
}
.post .entry {
margin-bottom: 10px;
padding-bottom: 35px;
}
#recent-posts {
float: right;
width: 250px;
padding: 0px 0px 30px 0px;
}
#recent-posts .entry {
background: #96A96F url(altruism-images/img03.gif) no-repeat right bottom;
padding: 0px 19px 30px 19px;
}
#recent-posts .entry h2 {
margin: 0;
padding: 0px 19px 0px 0px;
background: url(altruism-images/img07.gif) repeat-x left bottom;
text-transform: uppercase;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 1.4em;
color: #FFFFFF;
}
/* Sidebar */
#sidebar {
clear: both;
background: #96A96F url(altruism-images/img03.gif) no-repeat right bottom;
padding: 10px 20px 0px 20px;
color: #DFE6D1;
}
#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
#sidebar li {
display: block;
float: left;
width: 220px;
padding: 15px;
}
#sidebar li ul {
line-height: 1.8em;
margin: 0px;
}
#sidebar li li {
width: 220x;
display: list-item;
float: none;
padding: 0;
}
#sidebar h2 {
width: 220x;
margin: 0 0 15px 0;
padding: 0 50px 10px 0;
background: url(altruism-images/img07.gif) repeat-x left bottom;
text-transform: uppercase;
font-family: Georgia, "Times New Roman", Times, serif;
color: #FFFFFF;
}
#sidebar p {
color: #DFE6D1;
}
#sidebar a {
text-decoration: underline;
color: #F1F6E8;
}
#sidebar a:hover {
text-decoration: none;
}
/* Sidebar1 */
/* Sidebar */
#sidebar1 {
float: right;
width: 250px;
}
#sidebar1 ul {
margin: 0;
padding: 0;
list-style: none;
}
#sidebar1 li {
background: #96A96F;
}
#sidebar1 li ul {
line-height: 25px;
padding: 0px 20px 30px 20px;
background: #96A96F url(altruism-images/img03.gif) no-repeat right bottom;
margin-bottom: 40px;
}
#sidebar1 li li {
padding: 0;
background: #96A96F;
color: #DFE6D1;
}
#sidebar1 h2 {
width: 190px;
margin: 0 0 15px 20px;
padding: 20px 0 7px 0;
background: url(altruism-images/img07.gif) repeat-x left bottom;
text-transform: uppercase;
font-family: Georgia, "Times New Roman", Times, serif;
color: #FFFFFF;
}
#sidebar1 a {
color: #FFFFFF;
}
/* Footer */
#footer {
width: 800px;
height: 50px;
margin: 0 auto;
padding: 0 50px 0 50px;
background: #FFFFFF;
}
#footer p {
margin: 0;
padding: 15px;
text-align: center;
font-size: 11px;
color: #909B78;
}
#footer a {
color: #909B78;
}
</style>
</head>
<body>
<!-- start header -->
<div id="header">
<div id="logo">
<h1><a href="#">Altruism</a></h1>
<h2><a href="http://www.nodethirtythree.com/">by nodethirtythree + free css templates</a></h2>
</div>
<div id="menu">
<ul>
<li class="current_page_item"><a href="#">home</a></li>
<li><a href="#">photos</a></li>
<li><a href="#">about</a></li>
<li><a href="#">links</a></li>
<li><a href="#">contact</a></li>
</ul>
</div>
</div>
<!-- end header -->
<!-- start page -->
<div id="page">
<!-- start content -->
<div id="content">
<!-- start latest-post -->
<div id="latest-post" class="post">
<h1 class="title">Lorem ipsum dolor amet</h1>
<div class="entry">
<p>This is <strong>Altruism</strong>, 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>, released for free under the <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5</a> license. The photos in this design are from <a href="http://www.pdphoto.org/">PDPhoto.org</a>. You're free to use this template for anything as long as you link back to <a href="http://www.freecsstemplates.org/">my site</a>. Enjoy :)</p>
<p class="meta"><span class="posted">Posted on March 4, 2008 by <a href="#">Someone</a></span> <a href="#" class="permalink">More</a> <a href="#" class="comments">64</a> </p>
</div>
<h2 class="title">Blandit sed consequat</h2>
<div class="entry">
<p>Suspendisse potenti. Cras at nibh. Aliquam fermentum. Nunc aliquet tempus dui. Duis ultrices aliquet elit. Vestibulum id metus vel mi semper laoreet. Nullam adipiscing consectetuer nisl. Lorem ipsum dolor interdum quis, vestibulum at, dapibus et, nulla. Phasellus et sem.</p>
<p>Etiam id ante. Fusce varius diam id pede. Proin et libero sed enim vehicula ornare. Etiam nec lacus. Proin id elit. Duis at massa. Suspendisse in dui eu magna viverra condimentum. </p>
<p class="meta"><span class="posted">Posted on March 4, 2008 by <a href="#">Someone</a></span> <a href="#" class="permalink">More</a> <a href="#" class="comments">64</a> </p>
</div>
</div>
<!-- end-post -->
<!-- start recent-posts -->
<div id="sidebar1">
<ul>
<li>
<h2>Categories</h2>
<ul>
<li>Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum vel, tempor at, varius non, purus.<a href="#"> Mauris vitae nisl.</a></li>
</ul>
</li>
<li>
<h2>Archives</h2>
<ul><li><a href="#">Sed lacu donec lectus nullam</a></li>
<li><a href="#"> Pretium nibh ut turpis nam bibendum</a></li>
<li><a href="#"> In nulla tortor elementum vel</a></li>
<li><a href="#"> Tempor at varius non purus</a></li>
<li><a href="#"> Mauris vitae nisl nec metus</a></li>
<li><a href="#"> Placerat consectetue donec ipsum</a></li>
<li><a href="#"> Proin imperdiet est phasellus</a></li>
<li><a href="#"> Pellentesque ornare orci sed</a></li>
<li><a href="#"> Consectetuer hendrerit urna</a></li>
<li><a href="#"> Elit eleifend nunc ut dolor</a></li>
</ul>
</li>
</ul>
</div>
<!-- end sidebar -->
<!-- start sidebar -->
<div style="clear: both;"> </div>
<div class="hr1"> </div>
<div id="sidebar">
<ul>
<li>
<h2>Lorem Ipsum</h2>
<ul>
<li>Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum vel, tempor at, varius non, purus. <a href="#">Mauris vitae nisl.</a></li>
</ul>
</li>
<li>
<h2>Volutpat Dolore</h2>
<ul>
<li><a href="#">Sed lacu donec lectus nullam</a></li>
<li><a href="#"> Pretium nibh ut turpis nam bibendum</a></li>
<li><a href="#"> In nulla tortor elementum vel</a></li>
<li><a href="#"> Tempor at varius non purus</a></li>
</ul>
</li>
<li>
<h2>Magna Bibendum</h2>
<ul>
<li><a href="#">Sed lacu donec lectus nullam</a></li>
<li><a href="#"> Pretium nibh ut turpis nam bibendum</a></li>
<li><a href="#"> In nulla tortor elementum vel</a></li>
<li><a href="#"> Tempor at varius non purus</a></li>
</ul>
</li>
</ul>
<div style="clear: both;"> </div>
</div>
<!-- end sidebar1 -->
</div>
</div>
<div id="footer">
<p>Copyright (c) 2008 Sitename.com. All rights reserved. Design by <a href="http://www.nodethirtythree.com/">NodeThirtyThree</a> + <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
</div>
<!-- end page -->
</body>
</html>
Related examples in the same category