glazed : Design 5 « Templates « HTML / CSS

glazed
    

<!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>Glazed</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: #F5F5F5 url(glazed-images/img01.gif) repeat-x;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  color: #474848;
}

h1, h2 {
  font-family: Georgia, "Times New Roman", Times, serif;
  color: #666666;
}

h1 {
  letter-spacing: -1px;
  font-size: 2.6em;
  font-weight: normal;
}

h2 {
  margin-bottom: 15px;
  letter-spacing: -1px;
  text-transform: uppercase;
  font-size: 1.2em;
}

h3 {
  font-size: 1em;
}

p, ul, ol {
  margin-bottom: 20px;
  line-height: 170%;
}

p {
}

blockquote {
  padding: 0 30px;
  background: url(glazed-images/img12.gif) no-repeat;
  font-style: italic;
  font-family: Georgia, "Times New Roman", Times, serif;
  color: #999999;
}

blockquote p {
}

a {
  background: url(glazed-images/img03.gif) repeat-x left bottom;
  text-decoration: none;
  color: #1D62B3;
}

a:hover {
  background: none;
  color: #E43C15;
}

hr {
  display: none;
}

/* Wrapper */

#wrapper {
  background: url(glazed-images/img08.gif) repeat-x left bottom;
}

/* Menu */

#menu {
  height: 50px;
}

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

#menu li {
  display: inline;
}

#menu a {
  float: left;
  height: 37px;
  padding: 13px 30px 0px 30px;
  font-size: 1.4em;
  font-weight: bold;
  color: #FCFDDF;
}

#menu a:hover {
  background: #333333;
  color: #FFFFFF;
}

#menu .current_page_item a {
  background: url(glazed-images/img04.gif) repeat-x;
}

/* Header */

#header {
  height: 101px;
}

/* Logo */

#logo {
  float: left;
}

#logo h1, #logo p {
  float: left;
}

#logo h1 {
  padding: 20px 0 0 20px;
  font-size: 3.2em;
  font-weight: bold;
  color: #E43C15;
}

#logo p {
  margin: 0;
  padding: 42px 0 0 6px;
  letter-spacing: 2px;
  line-height: normal;
  font: normal 1.4em Georgia, "Times New Roman", Times, serif;
}

/* Search */

#search {
  float: right;
  width: 200px;
  padding: 40px 20px 4px 0;
  background: url(glazed-images/img05.gif) no-repeat left bottom;
}

#search fieldset {
  border: none;
}

#search legend {
  display: none;
}

#s {
  float: left;
  width: 155px;
  margin: 0 0 0 10px;
  background: none;
  border: none;
  font: bold 13px Arial, Helvetica, sans-serif;
  color: #474848;
}

#x {
  display: none;
}

/* Page */

#page {
  width: 960px;
  margin: 0 auto;
  background: #FFFFFF url(glazed-images/img06.gif);
}

#bgtop {
  height: 20px;
  background: url(glazed-images/img07.gif);
}

#bgbottom {
  padding-bottom: 20px;
  background: url(glazed-images/img09.gif) no-repeat left bottom;
}

#page ul {
  list-style: none;
}

#page ul li {
  padding-left: 15px;
  background: url(glazed-images/img11.gif) no-repeat left center;
}

/* Content */

#content {
  float: left;
  width: 430px;
  height: 800px;
  min-height: 800px;
  padding: 0 0 0 20px;
}

html>body #content {
  height: auto;
}

/* Post */

.post {
}

.post .bigpix {
  margin-bottom: 20px;
  background: #F0F0F0;
}

.post .bigpix .image {
}

.post .bigpix .caption {
  margin: 0;
  padding: 2px 10px 5px 10px;
  line-height: normal;
  font-size: .8em;
  font-weight: bold;
  color: #999999;
}

.post .bigpix .caption a {
  color: #999999;
}

.post .title {
  padding: 10px 10px 0 10px;
  font-size: 2.6em;
}  

.post .title a {
  background: none;
}

.post .byline {
  margin: 0;
  padding: 0 10px;
  line-height: normal;
  text-transform: uppercase;
  font-size: .8em;
  font-weight: bold;
  color: #C2C2C2;
}

.post .byline a {
  color: #C2C2C2;
}

.post .entry {
  padding: 20px 10px 0 10px;
}

.post .tags {
  margin: 0;
  padding: 5px 10px;
  background: #F0F0F0;
  line-height: normal;
  font-size: .8em;
  font-weight: bold;
}

.post .tags a {
  padding: 0 5px;
  background: none;
}

.post .links {
  padding: 5px 10px;
  border-bottom: 1px solid #EEEEEE;
  font-weight: bold;
}

.post .links .comments {
  padding-left: 20px;
  background: url(glazed-images/img13.gif) no-repeat left center;
}

.post .links .permalink {
  padding-left: 18px;
  background: url(glazed-images/img14.gif) no-repeat left center;
}

/* Sidebar Common Style */

.sidebar {
}

#page .sidebar ul {
  line-height: normal;
}

#page .sidebar li {
  padding: 0;
  background: none;
}

#page .sidebar li ul {
}

#page .sidebar li li {
  padding: 5px 15px 5px 25px;
  background: url(glazed-images/img11.gif) no-repeat 10px 10px;
  border-bottom: 1px solid #F0F0F0;
}

.sidebar a {
  background: none;
}

/* Sidebar One */

#sidebar1 {
  float: left;
  width: 250px;
  padding: 0 0 0 20px;
}

/* Sidebar Two */

#sidebar2 {
  float: right;
  width: 180px;
  padding: 0 20px 0 0;
}

/* Calendar */

#calendar_wrap {
  padding: 0 10px 20px 10px;
}

#calendar_wrap table {
  width: 100%;
  text-align: center;
  background: #F6F6F6;
  border: 2px solid #FFFFFF;
  border-collapse: collapse;
}

#calendar_wrap th, #calendar_wrap td {
  padding: 2px;
}

#calendar_wrap thead {
  background: #FFFFFF;
}

#calendar_wrap tbody {
  font-size: .8em;
  font-weight: bold;
}

#calendar_wrap tbody td {
  padding: 5px;
}

#calendar_wrap tbody a {
  font-size: 1.2em;
}

#calendar_wrap tfoot {
  background: #FFFFFF;
  text-transform: uppercase;
  font-weight: bold;
  font-size: .8em;
}

#calendar_wrap tfoot #prev {
  text-align: left;
}

#calendar_wrap tfoot #next {
  text-align: right;
}

/* Tag Cloud */

#tag_cloud {
  margin-bottom: 20px;
}

/* Footer */

#footer {
  width: 960px;
  height: 83px;
  margin: 0 auto;
  background: url(glazed-images/img10.gif) no-repeat;
}

#footer p {
  padding-top: 20px;
  text-align: center;
  font-size: .8em;
  font-weight: bold;
}

</style>


</head>
<body>
<div id="wrapper">
  <div id="menu">
    <ul>
      <li><a href="http://www.free-css.com/">Home</a></li>
      <li class="current_page_item"><a href="http://www.free-css.com/">Blogs</a></li>
      <li><a href="http://www.free-css.com/">Photos</a></li>
      <li><a href="http://www.free-css.com/">About</a></li>
      <li><a href="http://www.free-css.com/">Contact</a></li>
    </ul>
  </div>
  <div id="header">
    <div id="logo">
      <h1>Glazed</h1>
      <p>Free CSS Template</p>
    </div>
    <div id="search">
      <form method="get" action="http://www.free-css.com/">
        <fieldset>
        <legend>Quick Search</legend>
        <input id="s" type="text" name="s" value="" />
        <input id="x" type="submit" value="Search" />
        </fieldset>
      </form>
    </div>
  </div>
  <div id="page">
    <div id="bgtop"></div>
    <div id="bgbottom">
      <div id="content">
        <div class="post">
          <div class="bigpix">
            <div class="image"><img src="glazed-images/img02.jpg" alt="" width="430" height="250" /></div>
            <p class="caption">Photo by <a href="http://www.pdphoto.org/">PDPhoto.org</a>. Lorem ipsum dolor sit amet.</p>
          </div>
          <h1 class="title"><a href="http://www.free-css.com/">About This Template</a></h1>
          <p class="byline"><small>Posted on October 24th, 2007 by <a href="http://www.free-css.com/">Free CSS Templates</a></small></p>
          <div class="entry">
            <p><strong>Glazed</strong> is a free, fully standards-compliant CSS template designed by Free CSS Templates. This free template is released under a <a target="_blank" href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attributions 2.5</a> license, so you're 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 with it :)</p>
            <p>This template is also available as a WordPress theme at Free WordPress Themes.</p>
            <h2>A Heading Level 2</h2>
            <p>This paragraph is followed by a sample unordered list:</p>
            <ul>
              <li><a href="http://www.free-css.com/">Consectetuer adipiscing elit</a></li>
              <li><a href="http://www.free-css.com/">Metus aliquam pellentesque</a></li>
              <li><a href="http://www.free-css.com/">Urnanet non molestie semper</a></li>
              <li><a href="http://www.free-css.com/">Proin gravida orci porttitor</a></li>
            </ul>
            <h3>Heading Level 3</h3>
            <p>While this one is followed by a blockquote:</p>
            <blockquote>
              <p>Donec leo, vivamus nibh in augue praesent a lacus at urna congue rutrum. Quisque dictum integer nisl risus, sagittis convallis, rutrum id, congue, and nibh.</p>
            </blockquote>
          </div>
          <p class="tags"><strong>Tags:</strong> <a href="http://www.free-css.com/">dolor</a> <a href="http://www.free-css.com/">ipsum</a> <a href="http://www.free-css.com/">lorem</a> <a href="http://www.free-css.com/">sit amet</a> <a href="http://www.free-css.com/">dolor</a> <a href="http://www.free-css.com/">ipsum</a> <a href="http://www.free-css.com/">lorem</a> <a href="http://www.free-css.com/">sit amet</a></p>
          <p class="links"><a href="http://www.free-css.com/" class="comments">Comments (33)</a> &nbsp;&nbsp;&nbsp; <a href="http://www.free-css.com/" class="permalink">Permalink</a></p>
        </div>
      </div>
      <div id="sidebar1" class="sidebar">
        <ul>
          <li>
            <h2>Recent Posts</h2>
            <ul>
              <li><a href="http://www.free-css.com/">Aliquam libero</a></li>
              <li><a href="http://www.free-css.com/">Consectetuer adipiscing elit</a></li>
              <li><a href="http://www.free-css.com/">Metus aliquam pellentesque</a></li>
              <li><a href="http://www.free-css.com/">Suspendisse iaculis mauris</a></li>
              <li><a href="http://www.free-css.com/">Urnanet non molestie semper</a></li>
              <li><a href="http://www.free-css.com/">Proin gravida orci porttitor</a></li>
            </ul>
          </li>
          <li>
            <h2>Recent Comments</h2>
            <ul>
              <li><a href="http://www.free-css.com/">Free CSS Templates</a> on <a href="http://www.free-css.com/">Aliquam libero</a></li>
              <li><a href="http://www.free-css.com/">Free CSS Templates</a> on <a href="http://www.free-css.com/">Consectetuer adipiscing elit</a></li>
              <li><a href="http://www.free-css.com/">Free CSS Templates</a> on <a href="http://www.free-css.com/">Metus aliquam pellentesque</a></li>
              <li><a href="http://www.free-css.com/">Free CSS Templates</a> on <a href="http://www.free-css.com/">Suspendisse iaculis mauris</a></li>
              <li><a href="http://www.free-css.com/">Free CSS Templates</a> on <a href="http://www.free-css.com/">Urnanet non molestie semper</a></li>
              <li><a href="http://www.free-css.com/">Free CSS Templates</a> on <a href="http://www.free-css.com/">Proin gravida orci porttitor</a></li>
            </ul>
          </li>
          <li>
            <h2>Categories</h2>
            <ul>
              <li><a href="http://www.free-css.com/">Aliquam libero</a></li>
              <li><a href="http://www.free-css.com/">Consectetuer adipiscing elit</a></li>
              <li><a href="http://www.free-css.com/">Metus aliquam pellentesque</a></li>
              <li><a href="http://www.free-css.com/">Suspendisse iaculis mauris</a></li>
              <li><a href="http://www.free-css.com/">Urnanet non molestie semper</a></li>
              <li><a href="http://www.free-css.com/">Proin gravida orci porttitor</a></li>
            </ul>
          </li>
          <li>
            <h2>Archives</h2>
            <ul>
              <li><a href="http://www.free-css.com/">September</a> (23)</li>
              <li><a href="http://www.free-css.com/">August</a> (31)</li>
              <li><a href="http://www.free-css.com/">July</a> (31)</li>
              <li><a href="http://www.free-css.com/">June</a> (30)</li>
              <li><a href="http://www.free-css.com/">May</a> (31)</li>
            </ul>
          </li>
        </ul>
      </div>
      <div id="sidebar2" class="sidebar">
        <ul>
          <li>
            <h2>Calendar</h2>
            <div id="calendar_wrap">
              <table summary="Calendar">
                <caption>
                October 2007
                </caption>
                <thead>
                  <tr>
                    <th abbr="Monday" scope="col" title="Monday">M</th>
                    <th abbr="Tuesday" scope="col" title="Tuesday">T</th>
                    <th abbr="Wednesday" scope="col" title="Wednesday">W</th>
                    <th abbr="Thursday" scope="col" title="Thursday">T</th>
                    <th abbr="Friday" scope="col" title="Friday">F</th>
                    <th abbr="Saturday" scope="col" title="Saturday">S</th>
                    <th abbr="Sunday" scope="col" title="Sunday">S</th>
                  </tr>
                </thead>
                <tfoot>
                  <tr>
                    <td abbr="September" colspan="3" id="prev"><a href="http://www.free-css.com/" title="View posts for September 2007">&laquo; Sep</a></td>
                    <td class="pad">&nbsp;</td>
                    <td abbr="November" colspan="3" id="next"><a href="http://www.free-css.com/" title="View posts for November 2007">Nov &raquo;</a></td>
                  </tr>
                </tfoot>
                <tbody>
                  <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td id="today">4</td>
                    <td>5</td>
                    <td>6</td>
                    <td>7</td>
                  </tr>
                  <tr>
                    <td>8</td>
                    <td>9</td>
                    <td>10</td>
                    <td>11</td>
                    <td>12</td>
                    <td>13</td>
                    <td><a href="http://www.free-css.com/">14</a></td>
                  </tr>
                  <tr>
                    <td>15</td>
                    <td>16</td>
                    <td>17</td>
                    <td>18</td>
                    <td>19</td>
                    <td>20</td>
                    <td>21</td>
                  </tr>
                  <tr>
                    <td>22</td>
                    <td>23</td>
                    <td>24</td>
                    <td>25</td>
                    <td>26</td>
                    <td>27</td>
                    <td>28</td>
                  </tr>
                  <tr>
                    <td>29</td>
                    <td>30</td>
                    <td>31</td>
                    <td class="pad" colspan="4">&nbsp;</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </li>
          <li id="tag_cloud">
            <h2>Tag Cloud</h2>
            <a href="http://www.free-css.com/">dolor</a> <a href="http://www.free-css.com/">ipsum</a> <a href="http://www.free-css.com/">lorem</a> <a href="http://www.free-css.com/">sit amet</a> <a href="http://www.free-css.com/">dolor</a> <a href="http://www.free-css.com/">ipsum</a> <a href="http://www.free-css.com/">lorem</a> <a href="http://www.free-css.com/">sit amet</a> </li>
          <li>
            <h2>Lorem Ipsum</h2>
            <ul>
              <li><a href="http://www.free-css.com/">Aliquam libero</a></li>
              <li><a href="http://www.free-css.com/">Consectetuer adipiscing</a></li>
              <li><a href="http://www.free-css.com/">Metus aliquam tesque</a></li>
              <li><a href="http://www.free-css.com/">Suspendisse iaculis</a></li>
              <li><a href="http://www.free-css.com/">Urnanet non molestie</a></li>
              <li><a href="http://www.free-css.com/">Proin orci porttitor</a></li>
              <li><a href="http://www.free-css.com/">Aliquam libero</a></li>
              <li><a href="http://www.free-css.com/">Consectetuer dolor elit</a></li>
              <li><a href="http://www.free-css.com/">Aliquam pellentesque</a></li>
              <li><a href="http://www.free-css.com/">Urnanet moles semper</a></li>
              <li><a href="http://www.free-css.com/">Proin orci porttitor</a></li>
              <li><a href="http://www.free-css.com/">Aliquam libero</a></li>
              <li><a href="http://www.free-css.com/">Sectetuer adipiscing elit</a></li>
              <li><a href="http://www.free-css.com/">Pellentesque aliquam</a></li>
              <li><a href="http://www.free-css.com/">Suspendisse mauris</a></li>
              <li><a href="http://www.free-css.com/">Urnanet Estie semper</a></li>
              <li><a href="http://www.free-css.com/">Gravida orci porttitor</a></li>
            </ul>
          </li>
        </ul>
      </div>
      <div style="clear: both;">&nbsp;</div>
    </div>
  </div>
  <hr />
  <div id="footer">
    <p>&copy;2007 All Rights Reserved. &nbsp;&bull;&nbsp; Design by <a target="_blank" href="http://www.freecsstemplates.org/">Free CSS Templates</a> &nbsp;&bull;&nbsp; Icons by <a target="_blank" href="http://www.famfamfam.com/">FAMFAMFAM</a>.</p>
  </div>
</div>
</body>
</html>
Related examples in the same category

1.	d-tv
2.	dogstemplate
3.	domesticated
4.	dottis
5.	duet-plasma
6.	dusky
7.	dusplic
8.	dynamic
9.	dzine
10.	eastern-tales
11.	easybreeze
12.	easymoto
13.	eatlon
14.	ebullient
15.	echo
16.	ecolution-warrior
17.	ecom-1
18.	edgy
19.	edy-builders
20.	efflorescence
21.	elements
22.	elitecircle1-0
23.	emblazoned
24.	embouteillage
25.	emerald
26.	emergence
27.	emperor
28.	empireserver
29.	emporium
30.	enclosed
31.	endless
32.	energybox
33.	enlight
34.	enlighten1-0
35.	enormous
36.	enter
37.	enthusiastica
38.	entomology
39.	envision1-0
40.	epod
41.	equivalency
42.	ergophobia
43.	established
44.	etags
45.	euphonics
46.	europe
47.	everydayseries
48.	evolution
49.	exalted
50.	excess
51.	excursus
52.	Executive Template
53.	executive
54.	Exotic_Blue
55.	Exotic_Red
56.	fotografix
57.	fotolandia
58.	foundation
59.	foxy
60.	fractalbroccoli
61.	fragrance
62.	frankincense
63.	freches-fruechtchen
64.	free-css-lunch
65.	freecsstemplate 55
66.	freecsstemplateno57
67.	freecsswebsitetemplate39
68.	freecss_greentextile
69.	freecss_modern
70.	freecss_monolit
71.	freecss_redleaves
72.	freecss_set
73.	freeport
74.	freeradicals
75.	freestyle
76.	frozenage
77.	ftd-redblack
78.	ftdbusiness
79.	ftdcinema
80.	ftddrops
81.	ftdExplosionBlue
82.	ftditight
83.	ftdkiwi
84.	ftdlagoon
85.	ftdLight
86.	ftdLightBlue
87.	ftdluminescent
88.	ftdMoonLight
89.	ftdprime
90.	ftdspace
91.	ftdvivid
92.	ftdworld
93.	funkytimes
94.	funride
95.	futuremag-aio
96.	fword_three
97.	galaxy
98.	gallerize
99.	gamberetto
100.	gameportal
101.	Ganesh01
102.	gastropoda
103.	gathering14
104.	gazebo
105.	gconsultant
106.	general
107.	genesis
108.	genghiskahn
109.	genius_web
110.	gentle_wiki
111.	geoforce
112.	gestured
113.	gift-gallery
114.	giftig-gruen
115.	gila
116.	godetia
117.	godofgates
118.	GoFlexible
119.	goinggrey
120.	gradientis
121.	grandenally
122.	grandhost
123.	GraniteGlass
124.	greefies