pluralism : Design 6 « Templates « HTML / CSS

pluralism

   

<!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>
<title>Pluralism</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<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 {
  background: #F6F6F6 url(pluralism-images/img01.jpg) repeat-x;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #6B6B6B;
}

form {
}

input, textarea {
  padding: 2px 5px;
  border: 1px solid #EBEBEB;
  font: bold 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
  color: #6B6B6B;
}

h1, h2, h3, h4 {
  margin: 0;
}

h2, h3, h4 {
  margin-bottom: 20px;
  padding-bottom: 9px;
  border-bottom: 1px solid #F2F2F2;
  letter-spacing: -0.035em;
  font-weight: normal;
  color: #37404C;
}

h2 {
  font-size: 28px;
}

h3 {
  font-size: 16px;
  font-weight: bold;
}

h4 {
  font-size: 14px;
  font-weight: bold;
}

p, ul, ol {
  margin-bottom: 1.5em;
  line-height: 170%;
  text-align: justify;
}

ul, ol {
  margin-left: 3em;
}

dl.list1 {
  margin: 0;
  padding: 0;
  list-style: none;
}

dl.list1 dt {
  float: left;
  width: 70px;
}

dl.list1 dd {
  margin-bottom: 10px;
}

dl.list1 a {
  color: #666666;
}

ul.list2 {
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: normal;
}

ul.list2 li {
  float: left;
  margin: 0 18px 18px 0;
}

ul.list2 li.nopad {
  margin-right: 0;
}

blockquote {
  margin-left: 3em;
  margin-right: 3em;
}

a {
  color: #FF5A00;
}

a:hover {
  text-decoration: none;
}

a img {
  border: none;
}

img.left {
  float: left;
  margin: 5px 20px 0 0;
}

img.right {
  float: right;
  margin: 5px 0 0 20px;
}

/* Wrapper */

#wrapper {
  width: 960px;
  margin: 0 auto;
  background: url(pluralism-images/img02.jpg) repeat-y;
}

#wrapper2 {
  background: url(pluralism-images/img10.jpg) no-repeat left bottom;
}

/* Header */

#header {
  height: 140px;
  background: #087FE7 url(pluralism-images/img03.jpg) no-repeat;
}

/* Logo */

#logo {
  float: left;
}

#logo h1 {
  margin: 0;
  padding: 90px 0 0 78px;
  text-transform: lowercase;
  letter-spacing: -3px;
  font-size: 40px;
  color: #FFFFFF;
}

#logo h1 a {
  text-decoration: none;
  color: #FFFFFF;
}

/* Menu */

#menu {
  float: right;
}

#menu ul {
  margin: 0;
  padding: 112px 78px 0 0;
  list-style: none;
  line-height: normal;
}

#menu li {
  display: inline;
}

#menu a {
  padding-left: 40px;
  text-decoration: none;
  font-size: 13px;
  font-weight: bold;
  color: #FFFFFF;
}

#menu a:hover {
  text-decoration: underline;
}

/* Page */

#page {
  background: url(pluralism-images/img04.jpg) no-repeat;
}

/* Content */

#content {
  float: left;
  width: 555px;
  padding: 0 0 0 76px;
}

.post {
  padding-top: 50px;
}

.post .title {
}

.post .title a {
  text-decoration: none;
  color: #37404C;
}

.post .title a:hover {
  text-decoration: underline;
}

.post .entry {
}

.post .meta {
  height: 16px;
  margin: 0;
  padding: 10px;
  background: url(pluralism-images/img07.jpg) repeat-x left bottom;
  line-height: normal;
}

.post .meta .posted {
  display: block;
  float: left;
}

.post .meta .permalink {
  display: block;
  float: right;
  padding-left: 17px;
  background: url(pluralism-images/img09.gif) no-repeat left center;
}

.post .meta .comments {
  display: block;
  float: right;
  padding: 0 30px 0 19px;
  background: url(pluralism-images/img08.gif) no-repeat left center;
}

/* Sidebar */

#sidebar {
  float: right;
  width: 186px;
  padding: 67px 76px 0 0;
}

#sidebar ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#sidebar li {
  margin-bottom: 40px;
}

#sidebar li ul {
}

#sidebar li li {
  margin: 0;
}

/* Search */

#search {
}

#search br {
  display: none;
}

#search input {
  padding: 1px 5px;
  border-top: 1px solid #BAD300;
  border-left: 1px solid #A9C817;
  border-right: 1px solid #7DAB00;
  border-bottom: 1px solid #578900;
  background: #6E9D00 url(pluralism-images/img18.gif) repeat-x;
  font-size: 11px;
  font-weight: bold;
  color: #FFFFFF;
}

#search #s {
  width: 130px;
  padding: 2px 5px;
  background: #FFFFFF;
  border: 1px solid #EBEBEB;
  font: bold 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
  color: #6B6B6B;
}

/* Widebar */

#widebar {
  margin: 0 50px;
  padding: 25px 28px 0 28px;
  background: #F2F2F2 url(pluralism-images/img11.gif) repeat-x;
}

#widebar #colA {
  float: left;
  width: 260px;
}

#widebar #colB {
  float: left;
  width: 260px;
  padding-left: 45px;
}

#widebar #colC {
  float: left;
  width: 186px;
  padding-left: 45px;
}

/* Footer */

#footer {
  height: 108px;
  background: url(pluralism-images/img05.jpg) no-repeat;
}

#footer p {
  margin: 0;
  padding-top: 45px;
  text-align: center;
  color: #8E8E8E;
}

#footer a {
  color: #666666;
}

</style>


</head>
<body>
<div id="wrapper">
  <div id="wrapper2">
    <div id="header">
      <div id="logo">
        <h1>pluralism</h1>
      </div>
      <div id="menu">
        <ul>
          <li><a href="http://www.free-css.com/">Homepage</a></li>
          <li><a href="http://www.free-css.com/">Gallery</a></li>
          <li><a href="http://www.free-css.com/">About</a></li>
          <li><a href="http://www.free-css.com/">Resources</a></li>
          <li><a href="http://www.free-css.com/">Contact</a></li>
        </ul>
      </div>
    </div>
    <div id="page">
      <div id="content">
        <div class="post">
          <h2 class="title"><a href="http://www.free-css.com/">Welcome to Pluralism</a></h2>
          <div class="entry"> <img src="pluralism-images/img06.jpg" alt="" width="138" height="93" class="left" />
            <p>This is <strong>Pluralism</strong>, a free, fully standards-compliant CSS template designed by NodeThirtyThree for Free CSS Templates, released for free under the <a target="_blank" href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5</a> license. The photos in this design are from PDPhoto.org. You're free to use this template for anything as long as you link back to my site. Enjoy :)</p>
            <p>Sed vel quam. Vestibulum pellentesque. Morbi sit amet magna ac lacus interdum. Donec pede nisl, Maecenas sed sem sit amet lectus mattis molestie. Integer quis eros lorem ipsum dolor sit.</p>
          </div>
          <p class="meta"> <span class="posted">Posted by <a href="http://www.free-css.com/">Someone</a> on December 17, 2007</span> <a href="http://www.free-css.com/" class="permalink">Read more</a> <a href="http://www.free-css.com/" class="comments">Comments (18)</a> </p>
        </div>
        <div class="post">
          <h2 class="title"><a href="http://www.free-css.com/">Sapien sed varius</a></h2>
          <div class="entry">
            <p>Morbi sit amet mauris. Nam vitae nibh eu sapien dictum pharetra. Vestibulum elementum neque vel lacus. Proin auctor dolor et massa. Phasellus sit amet velit. Vestibulum vel lacus vitae tortor consectetuer sapien semper dictum. Integer est felis, facilisis quis, lacinia sed, lacinia et, augue. Vivamus ultrices lacinia urna. Proin varius sollicitudin nunc. Vivamus condimentum, dui nec imperdiet porta, odio risus molestie nisl, nec laoreet purus sapien a massa.</p>
          </div>
          <p class="meta"> <span class="posted">Posted by <a href="http://www.free-css.com/">Someone</a> on December 13, 2007</span> <a href="http://www.free-css.com/" class="permalink">Read more</a> <a href="http://www.free-css.com/" class="comments">Comments (18)</a> </p>
        </div>
      </div>
      <div id="sidebar">
        <ul>
          <li id="search">
            <h3>Search</h3>
            <form id="searchform" method="get" action="http://www.free-css.com/">
              <div>
                <input type="text" name="s" id="s" size="15" />
                <br />
                <input name="submit" type="submit" value="Go" />
              </div>
            </form>
          </li>
          <li>
            <h3>Veroeros etiam</h3>
            <p><strong>Morbi sit amet</strong> mauris Nam vitae nibh eu sapien dictum pharetra. Vestibulum elementum neque vel lacus. Proin auctor dolor loremmassa. Phasellus sit. <a href="http://www.free-css.com/">More&hellip;</a></p>
          </li>
          <li>
            <h3>Blandit Volutpat</h3>
            <ul>
              <li><a href="http://www.free-css.com/">Morbi sit amet sed magna</a></li>
              <li><a href="http://www.free-css.com/">Lacus dapibus interdum</a></li>
              <li><a href="http://www.free-css.com/">Donec pede nisl dolore sed</a></li>
              <li><a href="http://www.free-css.com/">Lacus dapibus et interdum</a></li>
              <li><a href="http://www.free-css.com/">Morbi sit amet magna  etiam</a></li>
              <li><a href="http://www.free-css.com/">Maecenas sed sem lorem</a></li>
              <li><a href="http://www.free-css.com/">Lacus dapibus interdum</a></li>
              <li><a href="http://www.free-css.com/">Donec pede nisl dolore</a></li>
            </ul>
          </li>
        </ul>
      </div>
      <div style="clear: both;">&nbsp;</div>
      <div id="widebar">
        <div id="colA">
          <h3>Volutpat Consequat</h3>
          <dl class="list1">
            <dt>12.17.2007</dt>
            <dd><a href="http://www.free-css.com/">Praesent nonummy sed lorem</a></dd>
            <dt>12.13.2007</dt>
            <dd><a href="http://www.free-css.com/">Mauris sagittis neque nec nisi sed</a></dd>
            <dt>12.05.2007</dt>
            <dd><a href="http://www.free-css.com/">Vel turpis integer leo venenatis</a></dd>
            <dt>12.02.2007</dt>
            <dd><a href="http://www.free-css.com/">Et pharetra quis sed viverra ante</a></dd>
            <dt>11.30.2007</dt>
            <dd><a href="http://www.free-css.com/">Integer leo lorem sed lorem</a></dd>
          </dl>
        </div>
        <div id="colB">
          <h3>Pharetra Sed Tempus</h3>
          <p>Morbi sit amet mauris Nam vitae nibh eu sapien dictum pharetra. Vestibulum elementum neque vel lacus. Lorem ipsum dolor sit dolore phasellus pede lorem proin auctor dolor loremmassa phasellus sit. <a href="http://www.free-css.com/">More&hellip;</a></p>
        </div>
        <div id="colC">
          <h3>Donec Lorem Interdum</h3>
          <ul class="list2">
            <li><a href="http://www.free-css.com/"><img src="pluralism-images/img12.jpg" alt="" width="50" height="50" /></a></li>
            <li><a href="http://www.free-css.com/"><img src="pluralism-images/img13.jpg" alt="" width="50" height="50" /></a></li>
            <li class="nopad"><a href="http://www.free-css.com/"><img src="pluralism-images/img14.jpg" alt="" width="50" height="50" /></a></li>
            <li><a href="http://www.free-css.com/"><img src="pluralism-images/img15.jpg" alt="" width="50" height="50" /></a></li>
            <li><a href="http://www.free-css.com/"><img src="pluralism-images/img16.jpg" alt="" width="50" height="50" /></a></li>
            <li class="nopad"><a href="http://www.free-css.com/"><img src="pluralism-images/img17.jpg" alt="" width="50" height="50" /></a></li>
          </ul>
        </div>
        <div style="clear: both;">&nbsp;</div>
      </div>
    </div>
  </div>
  <div id="footer">
    <p>(c) 2007 Website Name. Design by <a target="_blank" href="http://www.nodethirtythree.com/">NodeThirtyThree</a> + <a target="_blank" href="http://www.freecsstemplates.org/">Free CSS Templates</a></p>
  </div>
</div>
</body>
</html>

Related examples in the same category

1.	newave
2.	newdarkside
3.	newday
4.	newera
5.	newfangled
6.	newgreeny
7.	newgreys
8.	newhorizon
9.	news portal
10.	news-print
11.	newsbeat
12.	newsflash
13.	newsportal
14.	newsroll
15.	newstheme
16.	newwave-business-inc
17.	new_rise
18.	NiceSite
19.	nimbuslike
20.	nixed
21.	noimages
22.	noname1
23.	nonzero
24.	nothingfanzy
25.	nourish
26.	nowhere
27.	NuahSwirl
28.	nullbullum
29.	numerology
30.	o-no-typography
31.	obsess
32.	obsession
33.	obtanium
34.	office-plants
35.	offlimits
36.	offrecord
37.	oheon_com_110100021
38.	ohgreenworld
39.	Okeanos
40.	old-wall
41.	oldarchitecture
42.	Olive
43.	one-penny
44.	one_two_three
45.	online-edu
46.	onlinemoviestore
47.	oodles
48.	openyourwindows
49.	opposed
50.	optimal-touch
51.	orchidaceae
52.	ordinaire
53.	ormeggiare
54.	ornamental
55.	ornate
56.	OrngBlu
57.	oswd_blozilla
58.	our-work
59.	ourhouse
60.	outdoorv1.0
61.	outliers
62.	outoftheblue
63.	outtabox
64.	oxidation
65.	package
66.	paddy-harvest
67.	pagedrape
68.	paivi-k
69.	paleforest
70.	palmtrees
71.	pamphlet
72.	pancorbo
73.	papira
74.	paradigm
75.	paradise1983
76.	parchmenter
77.	particle
78.	particles
79.	pastel
80.	pastelco
81.	pastelflowers
82.	pastries
83.	path-fider
84.	patternmaker
85.	PattyMcFatPat01
86.	PattyMcFatPat03
87.	pc
88.	Pear Template
89.	pear
90.	pedestrian
91.	penchantforphotos
92.	pencilpink
93.	people
94.	perfectblemish
95.	performance
96.	perplex
97.	personified
98.	pillars
99.	pills
100.	pinnacle
101.	Pistachio
102.	pixabella
103.	pixabella04
104.	pixabella06
105.	pixelationingreen
106.	plaidshirt
107.	plainandsimple
108.	planning-feed
109.	plurkified
110.	pointspace
111.	pollinate
112.	pollinating
113.	pollination