level2 : Design 9 « Templates « HTML / CSS

HTML / CSS » Templates » Design 9 
level2
    

<!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>Level 2.0</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
*/

body {
  margin: 0;
  padding: 0;
  background: #FFFFFF url(level2-images/img01.gifrepeat-x;
  font: 13px Arial, Helvetica, sans-serif;
  color: #626262;
}

form {
  margin: 0;
  padding: 0;
}

input {
  padding: 5px;
  background: #FEFEFE url(level2-images/img13.gifrepeat-x;
  border: 1px solid #626262;
  font: normal 1em Arial, Helvetica, sans-serif;
}

h1, h1 a, h2, h2 a, h3, h3 a {
  margin: 0;
  text-decoration: none;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  color: #444444;
}

h1 {
  letter-spacing: -3px;
  font-size: 2.6em;
}

h2 {
  letter-spacing: -2px;
  font-size: 2em;
}

h3 {
  font-size: 1em;
}

p, ol, ul {
  margin-bottom: 2em;
  line-height: 200%;
}

blockquote {
  margin: 0 0 0 1.5em;
  padding-left: 1em;
  border-left: 5px solid #DDDDDD;
}

{
  color: #EB1400;
}

a:hover {
  text-decoration: none;
}

/* Header */

#header {
  height: 82px;
}

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

#logo h1 {
  padding: 13px 0 0 25px;
}

#logo p {
  margin: 0;
  padding: 20px 0 0 4px;
  line-height: normal;
  text-transform: lowercase;
  font-weight: bold;
}

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

#menu {
  float: right;
}

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

#menu li {
  display: block;
  float: left;
  height: 82px;
}

#menu a {
  display: block;
  width: 110px;
  height: 46px;
  padding: 24px 0 0 0;
  text-decoration: none;
  text-align: center;
  letter-spacing: -1px;
  font: bold 1.6em "Trebuchet MS", Arial, Helvetica, sans-serif;
  color: #FABEB3;
}

#menu a:hover {
  width: 108px;
  background: #AD200E url(level2-images/img04.gifrepeat-x;
  border-left: 1px solid #B22502;
  border-right: 1px solid #B22502;
  color: #FFFFFF;
}

#menu .current_page_item {
  background: url(level2-images/img02.gifno-repeat center bottom;
}

#menu .current_page_item a {
  width: 108px;
  background: #FFEC70 url(level2-images/img03.gifrepeat-x;
  border-left: 1px solid #FFFFFF;
  border-right: 1px solid #FFFFFF;
  color: #EB1400;
}

/* Page */

#page {
  padding: 40px 60px 0 60px;
}

/* Content */

#content {
  margin-right: 340px;
}

.post {
  margin-bottom: 10px;
  background: url(level2-images/img05.gifrepeat-x;
}

.post .title {
  background: url(level2-images/img07.gifno-repeat right top;
}

.post .title h2 {
  padding: 30px 30px 0 30px;
  background: url(level2-images/img06.gifno-repeat;
  font-size: 2.2em;
}

.post .title p {
  margin: 0;
  padding: 0 0 0 30px;
  line-height: normal;
  color: #BABABA;
}

.post .title p a {
  color: #BABABA;
}

.post .entry {
  padding: 20px 40px 20px 30px;
}

.post .links {
  margin: 0;
  padding: 0 30px 30px 30px;
  background: url(level2-images/img15.gifno-repeat left bottom;
}

.post .links a {
  padding: 0 23px;
  text-decoration: none;
  font-weight: bold;
}

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

.post .links .more {
  background: url(level2-images/img16.gifno-repeat left center;
}

.post .links .comments {
  background: url(level2-images/img17.gifno-repeat left center;
}

/* Sidebar */

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

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

#sidebar li {
  margin-bottom: 10px;
  background: url(level2-images/img10.gifno-repeat left bottom;
}

#sidebar li ul {
  padding: 0 30px 40px 30px;
}

#sidebar li li {
  margin: 0;
  padding-left: 20px;
  background: url(level2-images/img11.gifno-repeat 5px 50%;
}

#sidebar h2 {
  padding: 30px 30px 20px 30px;
  background: url(level2-images/img09.gifno-repeat;
  font-weight: normal;
  color: #EB1400;
}

/* Search */

#search {
  padding: 20px 30px 40px 30px;
}

#search input {
  padding: 0;
  width: 70px;
  height: 29px;
  background: #DFDFDF url(level2-images/img14.gifrepeat-x;
  font-weight: bold;
}

#search #s {
  padding: 5px;
  width: 150px;
  height: auto;
  background: #FEFEFE url(level2-images/img13.gifrepeat-x;
  border: 1px solid #626262;
  font: normal 1em Arial, Helvetica, sans-serif;
}

#search br {
  display: none;
}

/* Categories */

#sidebar #categories li {
  background: url(level2-images/img12.gifno-repeat left center;
}

/* Calendar */

#calendar_wrap {
  padding: 0 30px 40px 30px;
}

#calendar table {
  width: 100%;
  text-align: center;
}

#calendar thead {
  background: #F1F1F1;
}

#calendar tbody td {
  border: 1px solid #F1F1F1;
}

#calendar #prev {
  text-align: left;
}

#calendar #next {
  text-align: right;
}

#calendar tfoot a {
  text-decoration: none;
  font-weight: bold;
}

#calendar #today {
  background: #FFF3A7;
  border: 1px solid #EB1400;
  font-weight: bold;
  color: #EB1400
}

/* Footer */

#footer {
  padding: 70px 0 50px 0;
  background: #757575 url(level2-images/img08.gifrepeat-x;
}

#footer p {
  margin-bottom: 1em;
  text-align: center;
  line-height: normal;
  font-size: .9em;
  color: #BABABA;
}

#footer a {
  padding: 0 20px;
  text-decoration: none;
  color: #DDDDDD;
}

#footer a:hover {
  color: #FFFFFF;
}

#footer .rss {
  background: url(level2-images/img18.gifno-repeat left center;
}

#footer .xhtml {
  background: url(level2-images/img19.gifno-repeat left center;
}

#footer .css {
  background: url(level2-images/img20.gifno-repeat left center;
}

#footer .legal a {
  padding: 0;
}

</style>


</head>
<body>
<div id="header">
  <div id="logo">
    <h1><a href="http://www.free-css.com/">Level 2.0</a></h1>
    <p><a href="http://www.free-css.com/">Free CSS Templates</a></p>
  </div>
  <div id="menu">
    <ul>
      <li class="current_page_item"><a href="http://www.free-css.com/">Home</a></li>
      <li><a href="http://www.free-css.com/">Blog</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>
<div id="page">
  <div id="sidebar">
    <ul>
      <li id="search">
        <form id="searchform" method="get" action="http://www.free-css.com/">
          <div>
            <input type="text" name="s" id="s" size="15" />
            <br />
            <input type="submit" value="Search" />
          </div>
        </form>
      </li>
      <li id="categories">
        <h2>Categories</h2>
        <ul>
          <li><a href="http://www.free-css.com/">Lorem Ipsum</a> (1</li>
          <li><a href="http://www.free-css.com/">Uncategorized</a> (4</li>
        </ul>
      </li>
      <li id="calendar">
        <h2>Calendar</h2>
        <div id="calendar_wrap">
          <table id="wp-calendar" summary="Calendar">
            <caption>
            August 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="July" colspan="3" id="prev"><a href="http://www.free-css.com/">&laquo; Jul</a></td>
                <td class="pad">&nbsp;</td>
                <td abbr="September" colspan="3" id="next" class="pad"><a href="http://www.free-css.com/">Sep &raquo;</a></td>
              </tr>
            </tfoot>
            <tbody>
              <tr>
                <td colspan="2" class="pad">&nbsp;</td>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
              </tr>
              <tr>
                <td>6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
                <td>10</td>
                <td>11</td>
                <td>12</td>
              </tr>
              <tr>
                <td>13</td>
                <td>14</td>
                <td>15</td>
                <td>16</td>
                <td>17</td>
                <td>18</td>
                <td>19</td>
              </tr>
              <tr>
                <td>20</td>
                <td id="today">21</td>
                <td>22</td>
                <td>23</td>
                <td>24</td>
                <td>25</td>
                <td>26</td>
              </tr>
              <tr>
                <td>27</td>
                <td>28</td>
                <td>29</td>
                <td>30</td>
                <td>31</td>
                <td class="pad" colspan="2">&nbsp;</td>
              </tr>
            </tbody>
          </table>
        </div>
      </li>
      <li>
        <h2>Lorem Ipsum Dolor</h2>
        <ul>
          <li><a href="http://www.free-css.com/">Nulla luctus eleifend purus</a></li>
          <li><a href="http://www.free-css.com/">Praesent scelerisque scelerisque erat</a></li>
          <li><a href="http://www.free-css.com/">Ut nonummy rutrum sem</a></li>
          <li><a href="http://www.free-css.com/">Pellentesque tempus quam quis nulla</a></li>
          <li><a href="http://www.free-css.com/">Fusce ultrices fringilla metus</a></li>
          <li><a href="http://www.free-css.com/">Praesent mattis condimentum nisl</a></li>
        </ul>
      </li>
    </ul>
  </div>
  <div id="content">
    <div class="post">
      <div class="title">
        <h2><a href="http://www.free-css.com/">About this Template</a></h2>
        <p><small>Posted on August 20th, 2007 by <a href="http://www.free-css.com/">Free CSS Templates</a></small></p>
      </div>
      <div class="entry">
        <p>This is <strong>Level 2.0</strong>, 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 commerciallyprovided you keep the links in the footer intact. Aside from that, have fun with it :)</p>
        <p>This template is also available as a WordPress theme at Free WordPress Themes.</p>
      </div>
      <p class="links"> <a href="http://www.free-css.com/" class="more">Read More</a> &nbsp;&nbsp;&nbsp; <a href="http://www.free-css.com/" class="comments">No Comments</a> </p>
    </div>
    <div class="post">
      <div class="title">
        <h2><a href="http://www.free-css.com/">Sample Tags</a></h2>
        <p><small>Posted on August 20th, 2007 by <a href="http://www.free-css.com/">Free CSS Templates</a></small></p>
      </div>
      <div class="entry">
        <h3>An H3 Followed by a Blockquote:</h3>
        <blockquote>
          <p>&#8220;Donec leo, vivamus nibh in augue at urna congue rutrum. Quisque dictum integer nisl risus, sagittis convallis, rutrum id, congue, and nibh.&#8221;</p>
        </blockquote>
        <h3>Bulleted List:</h3>
        <ul>
          <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
          <li>Phasellus nec erat sit amet nibh pellentesque congue.</li>
          <li>Cras vitae metus aliquam risus pellentesque pharetra.</li>
        </ul>
        <h3>Numbered List:</h3>
        <ol>
          <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
          <li>Phasellus nec erat sit amet nibh pellentesque congue.</li>
          <li>Cras vitae metus aliquam risus pellentesque pharetra.</li>
        </ol>
      </div>
      <p class="links"> <a href="http://www.free-css.com/" class="more">Read More</a> &nbsp;&nbsp;&nbsp; <a href="http://www.free-css.com/" class="comments">No Comments</a> </p>
    </div>
  </div>
  <br style="clear: both;" />
</div>
<div id="footer">
  <p class="links"> <a href="http://www.free-css.com/" class="rss" title="Subscribe to entries web feed">Entries (<abbr title="Really Simple Syndication">RSS</abbr>)</a> &nbsp;&nbsp;&nbsp; <a href="http://www.free-css.com/" class="rss">Entries (<abbr title="Really Simple Syndication">RSS</abbr>)</a> &nbsp;&nbsp;&nbsp; <a href="http://validator.w3.org/check/referer" class="xhtml">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a> &nbsp;&nbsp;&nbsp; <a href="http://jigsaw.w3.org/css-validator/check/referer" class="css">Valid <abbr title="Cascading Style Sheets">CSS</abbr></a> </p>
  <p class="legal"> &copy;2007 Level 2.0. All Rights Reserved.
    &nbsp;&nbsp;&bull;&nbsp;&nbsp;
    Design by <a target="_blank" href="http://www.freecsstemplates.org/">Free CSS Templates</a> &nbsp;&nbsp;&bull;&nbsp;&nbsp;
    Icons by <a target="_blank" href="http://famfamfam.com/">FAMFAMFAM</a>. </p>
</div>
</body>
</html>

   
    
    
    
  
Related examples in the same category
1.grid-system
2.grotesqueart
3.grunge-superstar-website-template
4.guarantee
5.guideline
6.gumamela
7.gunmetal
8.h-free-software
9.h2o-bubbles
10.halcyon
11.hanging
12.hapal
13.happy_template
14.hardwarestore
15.hawaiblomst
16.heatwave
17.HelloLand
18.hexahedron
19.hibiscus
20.hifinews
21.HigherGround11
22.highmountains
23.highway
24.highwaycss
25.hilaryduff
26.HomeOfProjects
27.honeythemes
28.hyper
29.i-feel-lucky
30.ibex
31.html
32.html5-alin1
33.html5-passion
34.hurt-hobain-1.0
35.idyllic
36.ifeellucky
37.ignition
38.ikonik
39.illogix
40.illuminated
41.illusion
42.ilounge
43.imagination
44.impeccable
45.implied
46.imprimis
47.improved
48.in-fantasy
49.inapickle
50.inception
51.indication
52.indicator
53.indigo
54.individual
55.inf04-css
56.inf05
57.inf07
58.inf08
59.infinitehorizon
60.inflight
61.informatif
62.innodemag
63.inscriptions
64.inspired by google forum
65.instant
66.integral
67.intelligent-studios
68.intensesimplicity
69.interactive-media
70.interactive-works
71.interchange
72.intercosmic
73.intercraft
74.interior-art
75.interlude
76.intermediate
77.internationalway
78.internet-encyclopedia
79.internet-phenomenon
80.internetbroadcast
81.internetcenter
82.internetmusic
83.internetsharing
84.Internet_Studio
85.invention
86.Inverted_Headline
87.invision
88.ionika
89.iqbiz
90.isometric
91.it-advance
92.it-technologies
93.itdesk
94.ithilien
95.iViolet2b
96.I_Like
97.JA
98.Jan002
99.Jazz Hut Template
100.jdf-boxing
101.jenniferlovehewitt
102.jetbiz
103.jet_30
104.Jewerly-Store
105.joker
106.judgement
107.junkbox
108.just-lucid
109.justgrey
110.Just_Lucid
111.kaleidos
112.kappebeans
113.katz-maus
114.keep_it_simple
115.keero
116.khaki
117.kim-fashion
118.kitchen
119.konnekt-media
120.KrazieKen
121.language-ofa-lover
122.lasvegas
123.lasvegastoo
124.layoftheland
125.lazybreeze
126.leafbiz
127.leafbrush
128.leanmagazine
129.leavesdew
130.leavesv1
131.lemonlimev2
132.leonardo
133.lepidoptera
134.lessantique
135.librarypro
136.Light
137.lightspeed
138.limegreen
139.limelight
140.Limey
141.linear
142.lingerie-store
143.link-line
144.liquidity_graph
145.lithium
146.loadfoov2
147.loadhost
148.localize
149.locomotive
150.logistix
151.longbeach
152.loseout
153.lotusflower
154.lucent
155.lunaria-1
156.lusciouscandy
157.luvbold
158.mactall
159.mag
160.magazine
161.majestic
162.majesty
163.makemyday
164.marcelle
165.marked
166.Matrix
167.maxos
168.maxosdarker
169.mcube
170.meadows
171.media
172.Medieval
173.megacorporate
174.meganews
175.megazzine
176.memoranda
177.meretricious
178.Midddot
179.middle-blue
180.midnightrainforest
181.mighty
182.milestone
183.mimbo-magazine
184.minigallery
185.minimal
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.