altruism : Design 2 « Templates « HTML / CSS

HTML / CSS » Templates » Design 2 
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.jpgrepeat;
  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;
}

{
  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.gifrepeat-x left top;
}


/* Header */

#header {
  width: 900px;
  height: 150px;
  margin: 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: auto;
  padding: 28px 50px 0px 50px;
  background: #FFFFFF;
}

#latest-post {
  float: left;
  width: 500px;
  padding: 46px 0px 0px 0px;
  background: url(altruism-images/img02.gifrepeat-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.jpgno-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.gifno-repeat left 80%;
  padding: 5px 30px 5px 15px;
}

.post .comments {
  background: url(altruism-images/img04.gifno-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.gifno-repeat right bottom;
  padding: 0px 19px 30px 19px;
}

#recent-posts .entry h2 {
  margin: 0;
  padding: 0px 19px 0px 0px;
  background: url(altruism-images/img07.gifrepeat-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.gifno-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.gifrepeat-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.gifno-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.gifrepeat-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: 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 42008 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 42008 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;">&nbsp;</div>
  <div class="hr1">&nbsp;</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;">&nbsp;</div>
  </div>
  <!-- end sidebar1 -->
</div>
</div>
<div id="footer">
  <p>Copyright (c2008 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
1.metamorph_drop
2.metamorph_energybolt
3.metamorph_exit
4.metamorph_global
5.metamorph_glowing
6.metamorph_host
7.metamorph_icybreeze
8.metamorph_interiordesign
9.metamorph_interstate60
10.metamorph_lotr
11.metamorph_lyrics_lt
12.metamorph_melancholy_lt
13.metamorph_mercuryworld
14.metamorph_metaform
15.metamorph_models
16.metamorph_nuke
17.metamorph_oldheavens
18.metamorph_palmbeach
19.metamorph_strongrey_lt
20.metamorph_thames
21.metamorph_transitional
22.metamorph_tropic
23.metamorph_truncata
24.metamorph_tubes
25.metamorph_tunel
26.ablaze
27.aboutfruts
28.abrasive
29.abscond
30.abstraction
31.acallia-development
32.accomplishable
33.actualbiz
34.adhesive
35.adios
36.advantage
37.aero-solutions
38.aerolyk
39.affection
40.agency
41.ahoy
42.al-infolabs
43.alexx-c
44.alieninvasion
45.alpha
46.altered
47.ambiance
48.amoreira
49.angryhornet
50.anibanner01
51.AnotherSquare
52.anther
53.anthropod
54.Antikoerperchen
55.antiquity
56.aphotic
57.applique
58.aprilshowers
59.Arbenting-MinimalistResumeTemplate
60.expanding-portfolio
61.experience
62.expertvision
63.exploitable
64.ezine02
65.familiar
66.favorite-cakes
67.featherlight
68.featuring
69.femflex1
70.fernando1
71.fertilization
72.Fibre
73.fibreglass
74.filaments
75.findingpeace
76.firerescuesquad
77.fivestar
78.Flair Template
79.flair
80.flan2
81.flange
82.flattering
83.flavour
84.fleur
85.flightandfight
86.fluidity
87.fluidsolution
88.flyover-builders
89.WP-Bliss
90.website-design
91.website-traffic
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.