reference : Design 7 « Templates « HTML / CSS






reference

  

<!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

Title      : Reference
Version    : 1.0
Released   : 20081110
Description: A two-column, fixed-width and lightweight template ideal for 1024x768 resolutions. Suitable for blogs and small websites.

-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Reference 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
*/

body {
  margin: 30px 0 0 0;
  padding: 0;
  background: #FFFFFF;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  color: #8A8A8A;
}

h1, h2, h3 {
  margin: 0;
  font-family: Georgia, "Times New Roman", Times, serif;
  text-transform: lowercase;
  font-weight: normal;
}

h1 {
  letter-spacing: -1px;
  font-size: 32px;
}

h2 {
  font-size: 23px;
}

p, ul, ol {
  margin: 0 0 2em 0;
  text-align: justify;
  line-height: 26px;
}

a:link {
  color: #333333;
}

a:hover, a:active {
  text-decoration: none;
  color: #333333;
}

a:visited {
  color: #F161B2;
}

img {
  border: none;
}

img.left {
  float: left;
  margin: 7px 15px 0 0;
}

img.right {
  float: right;
  margin: 7px 0 0 15px;
}

/* Form */

form {
  margin: 0;
  padding: 0;
}

fieldset {
  margin: 0;
  padding: 0;
  border: none;
}

legend {
  display: none;
}

input, textarea, select {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 13px;
  color: #333333;
}

/* Header */

#header {
  width: 920px;
  height: 80px;
  margin: 0 auto 20px auto;
}

#logo {
  float: left;
  height: 80px;
  padding: 0 35px;
}

#logo h1 {
  font-size: 38px;
  color: #FFFFFF;
}

#logo h1 sup {
  vertical-align: text-top;
  font-size: 24px;
}

#logo h1 a {
  color: #5b5b5b;
}

#logo h2 {
  text-transform: uppercase;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  color: #999999;
}

#logo a {
  text-decoration: none;
}

/* Menu */

#menu {
  float: right;
  padding-right: 30px;
}

#menu ul {
  margin: 0;
  padding: 15px 0 0 0;
  list-style: none;
}

#menu li {
  display: inline;
}

#menu a {
  display: block;
  float: left;

  margin-left: 5px;
  padding: 5px 20px;
  text-decoration: none;
  font-size: 13px;
  color: #999999;
}

#menu a:hover {
  border-bottom: 3px #999999 solid;
  text-decoration: none;
}

#menu .active a {
  border-bottom: 3px #999999 solid;
}


#wrapper {
  border-top: 1px dotted #CCCCCC; 
  background: url(reference-images/img01.gif) repeat-x left top;
}

/* Page */

#page {
  width: 850px;
  margin: 0 auto;
  padding-top: 20px;
}

/* Content */

#content {
  float: left;
  width: 600px;
}

/* Post */

.post {
}

.post .title {
  margin-bottom: 20px;
  padding-bottom: 5px;
  border-bottom: 3px #999999 solid;
}

.post .entry {
}

.post .meta {
  padding: 15px 0 60px 0;
}

.post .meta p {
  margin: 0;
  line-height: normal;
  color: #FFFFFF;
}

.post .meta .byline {
  float: left;
}

.post .meta .links {
  float: right;
}

.post .meta .more {
  padding: 0 20px 0 18px;
  background: url(reference-images/img03.gif) no-repeat left center;
}

.post .meta .comments {
  padding-left: 22px;
  background: url(reference-images/img04.gif) no-repeat left center;
}

.post .meta b {
  display: none;
}

/* Sidebar */

#sidebar {
  float: right;
  width: 210px;
}

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

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

#sidebar li ul {
}

#sidebar li li {
  margin: 0;
  padding-left: 20px;
  background: url(reference-images/img01.jpg) no-repeat left 60%;
}

#sidebar h2 {
  margin-bottom: 10px;
  border-bottom: 3px #999999 solid;
  font-size: 18px;
  font-weight: normal;
}

/* Search */

#search {
}

#search h2 {
  margin-bottom: 20px;
}

#s {
  width: 120px;
  margin-right: 5px;
  padding: 3px;
  border: 1px solid #F0F0F0;
}

#x {
  padding: 3px;
  border: none;
  text-transform: lowercase;
  font-size: 11px;
  color: #4F4F4F;
}

/* Boxes */

.box1 {
  padding: 20px;
}

.box2 {
  color: #BABABA;
}

.box2 h2 {
  margin-bottom: 15px;
  font-size: 16px;
  color: #FFFFFF;
}

.box2 ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.box2 a:link, .box2 a:hover, .box2 a:active, .box2 a:visited  {
  color: #EDEDED;
}

/* Footer */

#footer {
  width: 920px;
  height: 400px;
  margin: 0 auto;
  min-height: 74px;
  padding: 10px 0 0 0;
  border-top: 3px #999999 solid;
  text-transform: uppercase;
  font-size: 10px;
}

html>body #footer {
  height: auto;
}

#legal {
  clear: both;
  padding-top: 20px;
  text-align: center;
  color: #573F41;
}

#legal a {
  border-bottom: 1px dotted #573033;
  text-decoration: none;
  color: #573F41;
}

</style>


</head>
<body>
<!-- start header -->
<div id="header">
  <div id="logo">
    <h1><a href="#">Reference<sup></sup></a></h1>
    <h2>Designed by FreeCSSTemplates</h2>
  </div>
  <div id="menu">
    <ul>
      <li class="active"><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 -->

<div id="wrapper">
<!-- start page -->
<div id="page">
  <!-- start content -->
  <div id="content">
    <div class="post">
      <h1 class="title">Welcome to Reference</h1>
      <div class="entry">
        <p>This is Reference, a free, fully standards-compliant CSS template designed by FreeCssTemplates<a href="http://www.nodethirtythree.com/"></a>. This free template is released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attributions 2.5</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. Aside from that, have fun with it :)</p>
      </div>
      <div class="meta">
        <p class="byline">Posted on April 21, 2008 byFreeCssTemplates</p>
        <p class="links"><a href="#" class="more">Read full article</a> <b>|</b> <a href="#" class="comments">Comments (32)</a></p>
      </div>
    </div>
    <div class="post">
      <h2 class="title">Lorem Ipsum Dolor Volutpat</h2>
      <div class="entry">
        <p>Curabitur tellus. Phasellus tellus turpis, iaculis in, faucibus lobortis, posuere in, lorem. Donec a ante. Donec neque purus, adipiscing id, eleifend a, cursus vel, odio. Vivamus varius justo sit amet leo. Morbi sed libero. Vestibulum blandit augue at mi. Praesent fermentum lectus eget diam. Nam cursus, orci sit amet porttitor iaculis, ipsum massa aliquet nulla, non elementum mi elit a mauris. In hac habitasse platea.</p>
        <p> Donec a ante. Donec neque purus, adipiscing id, eleifend a, cursus vel, odio. Vivamus varius justo sit amet leo. Morbi sed libero. Vestibulum blandit augue at mi. Praesent fermentum lectus eget diam. Nam cursus, orci sit amet porttitor iaculis, ipsum massa aliquet nulla, non elementum mi elit a mauris. In hac habitasse platea.</p>
      </div>
      <div class="meta">
        <p class="byline">Posted on April 18, 2008 byFreeCssTemplates</p>
        <p class="links"><a href="#" class="more">Read full article</a> <b>|</b> <a href="#" class="comments">Comments (32)</a></p>
      </div>
    </div>
  </div>
  <!-- end content -->
  <!-- start sidebar -->
  <div id="sidebar">
    <ul>
      <li id="search">
        <h2><b class="text1">Search</b></h2>
        <form method="get" action="">
          <fieldset>
          <input type="text" id="s" name="s" value="" />
          <input type="submit" id="x" value="Search" />
          </fieldset>
        </form>
      </li>
      <li>
        <h2><strong>Lorem</strong> Ipsum</h2>
        <ul>
          <li><a href="#">Fusce dui neque fringilla</a></li>
          <li><a href="#">Eget tempor eget nonummy</a></li>
          <li><a href="#">Magna lacus bibendum mauris</a></li>
          <li><a href="#">Nec metus sed donec</a></li>
          <li><a href="#">Magna lacus bibendum mauris</a></li>
          <li><a href="#">Velit semper nisi molestie</a></li>
          <li><a href="#">Eget tempor eget nonummy</a></li>
        </ul>
      </li>
      <li>
        <h2><b>Volutpat</b> Dolore</h2>
        <ul>
          <li><a href="#">Nec metus sed donec</a></li>
          <li><a href="#">Magna lacus bibendum mauris</a></li>
          <li><a href="#">Velit semper nisi molestie</a></li>
          <li><a href="#">Eget tempor eget nonummy</a></li>
          <li><a href="#">Nec metus sed donec</a></li>
          <li><a href="#">Magna lacus bibendum mauris</a></li>
          <li><a href="#">Velit semper nisi molestie</a></li>
          <li><a href="#">Magna lacus bibendum mauris</a></li>
          <li><a href="#">Velit semper nisi molestie</a></li>
        </ul>
      </li>
    </ul>
  </div>
  <!-- end sidebar -->
  <div style="clear: both;">&nbsp;</div>
</div>
</div>
<!-- end page -->
<!-- start footer -->
<div id="footer">
  <p id="legal">(c) 2008 YourSite. Design by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
</div>
<!-- end footer -->
</body>
</html>

   
    
  








Related examples in the same category

1.SimpleSimple
2.simplestyle_1
3.simplestyle_2
4.simplestyle_3
5.simplestyle_4
6.simplestyle_5
7.simplestyle_6
8.pomodoro
9.portcentral
10.portfolio-extended
11.portfolio
12.postscriptum
13.powderpuff
14.power
15.precision
16.predilection
17.premiumseries
18.prepaid
19.presented
20.pressurized
21.prideandprejudice
22.primitiveelement
23.printing
24.pristine
25.private-lawyer-co
26.product-landing-page
27.production
28.ProductPackage
29.programme
30.progress
31.projection
32.proofing
33.Prosperity
34.province
35.purensimple
36.purgatory_shuffle
37.puzzled
38.quadrangle
39.quartz-istorage
40.quatrain
41.racetrackplaya
42.radiance
43.rainonleaves
44.ramblingsoul-2
45.ramblingsoul-9
46.ramblingsoul3
47.ramblingsoul4
48.ramblingsoul5
49.ramblingsoul7
50.ramblingsoul_2
51.ramblingsoul_3
52.random
53.rational
54.realize
55.realone
56.rebel-magazine
57.reckoning
58.recreations
59.regeneracy
60.rehabilitation
61.reinvent
62.replenish
63.republic
64.resizeme
65.resplendissant
66.revolt-01
67.ridinghood
68.rockband
69.rogue
70.Rothko
71.route66
72.rust
73.safe-as-houses
74.sahara
75.sampling
76.Sapphire
77.schemermag
78.scotchmark
79.scribbled
80.secretlab
81.seduction
82.selcouth
83.sensa
84.settings
85.shallowgrunge
86.shalom-typo
87.shape
88.she
89.showcase
90.sifiso
91.silenceandharmony
92.SILK
93.Simpatico
94.sindromk
95.singapore
96.sinorcaish
97.six-oh-six
98.sixpence
99.sixties_style
100.skipopia
101.skitemplate
102.sky
103.sliced
104.slight_amnesia
105.socialnet
106.softenedcells
107.solemnity
108.solitude
109.soloss
110.solutions
111.somewhere-peaceful
112.soniatemplate
113.space
114.spaced
115.spasaloon
116.spatter
117.speedracing
118.spheroids
119.spidercity
120.splash
121.splatt
122.spontaneous