themissing-piece : Design 8 « Templates « HTML / CSS






themissing-piece

   

<!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>The Missing Piece</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 {
  margin-top: 20px;
  background: #36393D url(themissing-piece-images/img01.gif) repeat-x;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  color: #D1E9A3;
}

form {
}

input, textarea {
  font: normal 1em Arial, Helvetica, sans-serif;
  color: #36393D;
}

h1, h2, h3 {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-weight: normal;
  color: #FFFFFF;
}

h1 {
  font-size: 3em;
}

h2 {
  font-size: 2em;
}

h3 {
  font: bold 1em Arial, Helvetica, sans-serif;
}

a {
  color: #FFFFFF;
}

a:hover {
  text-decoration: none;
}

/* Header */

#header {
  width: 980px;
  height: 140px;
  margin: 0 auto;
  background: #D1E9A3 url(themissing-piece-images/img02.gif) repeat-x;
}

#logo {
  float: left;
  height: 100px;
  padding: 0 0 0 115px;
  background: url(themissing-piece-images/img03.gif) no-repeat;
  color: #36393D;
}

#logo h1 {
  padding: 20px 0 0 0;
}

#logo p {
}

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

#search {
  float: right;
  width: 200px;
  padding: 0 20px 0 0;
  background: url(themissing-piece-images/img04.gif) no-repeat right top;
}

#search form {
  height: 25px;
  padding: 65px 0 0 25px;
  background: url(themissing-piece-images/img05.gif) no-repeat 0 60px;
}

#search fieldset {
  border: none;
}

#search-text {
  width: 170px;
  background: #FFFFFF;
  border: none;
}

#search legend, #search-submit {
  display: none;
}

#menu {
  clear: both;
  height: 40px;
  background: url(themissing-piece-images/img09.gif) no-repeat right bottom;
}

#menu ul {
  height: 28px;
  padding: 12px 0 0 20px;
  background: url(themissing-piece-images/img08.gif) no-repeat left bottom;
  list-style: none;
}

#menu li {
  display: inline;
}

#menu a {
  padding: 0 20px;
  background: url(themissing-piece-images/img06.gif) no-repeat left center;
  text-decoration: none;
  font-weight: bold;
  color: #36393D;
}

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

#menu .current_page_item a {
  background: url(themissing-piece-images/img07.gif) no-repeat left center;
  color: #B42600;
}

/* Page */

#page {
  width: 980px;
  margin: 0 auto;
  padding: 20px 0 0 0;
}

#back2top {
  height: 72px;
  background: url(themissing-piece-images/img19.gif) no-repeat left bottom;
}

#back2top a {
  display: block;
  width: 40px;
  padding: 27px 0 0 25px;
  text-decoration: none;
  text-align: center;
}

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

/* Content */

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

.post {
  padding: 20px 0;
}

.post .title {
  font-size: 2.6em;
}

.post .title a {
  text-decoration: none;
}

.post .title a:hover {
  border-bottom: 1px dotted #000000;
}

.post .byline {
  margin-bottom: 2em;
}

.post .date {
  display: block;
  float: left;
  width: 69px;
  height: 64px;
  margin-top: 7px;
  background: #CCE698 url(themissing-piece-images/img14.gif) no-repeat;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  color: #BF3600;
}

.post .date .month {
  display: block;
  height: 16px;
  padding: 1px 0 0 0;
  background: #BF3600 url(themissing-piece-images/img14.gif) no-repeat;
  color: #FFFFFF;
}

.post .date .day {
  height: 47px;
  font: bold 36px Georgia, "Times New Roman", Times, serif;
}

.post .date .year {
  margin-top: -8px;
  display: block;
  text-indent: -9999px;
}

.post .entry {
  margin: 0 20px 0 90px;
}

.post .entry p, .post .entry ol, .post .entry ul {
  margin-bottom: 1.6em;
  line-height: 180%;
  list-style-position: inside;
}

.post .links {
  height: 22px;
  padding: 5px 0 0 10px;
  background: url(themissing-piece-images/img15.gif) no-repeat;
}

.post .links a {
  text-decoration: none;
  font-weight: bold;
}

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

.post .links .more {
  padding-left: 15px;
  background: url(themissing-piece-images/img16.gif) no-repeat 0 5px;
}

.post .links .comments {
  padding-left: 15px;
  background: url(themissing-piece-images/img17.gif) no-repeat 0 6px;
}

.post .links .rss {
  padding-left: 15px;
  background: url(themissing-piece-images/img18.gif) no-repeat 1px 6px;
}

/* Sidebar */

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

#sidebar ul {
  background: #D6EBAD url(themissing-piece-images/img10.gif) repeat-y;
  list-style: none;
  color: #36393D;
}

#sidebar li {
  background: url(themissing-piece-images/img12.gif) no-repeat left bottom;
}

#sidebar li ul {
  padding: 10px 20px 30px 20px;
  line-height: 200%;
  background: none;
}

#sidebar li li {
  padding: 0 0 0 10px;
  background: url(themissing-piece-images/img13.gif) no-repeat left center;
}

#sidebar h2 {
  height: 42px;
  padding: 8px 0 0 10px;
  background: #BA3300 url(themissing-piece-images/img11.gif) no-repeat;
  font-size: 1.6em;
}

#sidebar a {
  text-decoration: none;
  color: #BA3300;
}

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

/* Calendar */

#calendar {
}

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

#calendar table {
  width: 200px;
  border-collapse: collapse;
  text-align: center;
}

#calendar caption {
  padding: 2px 0;
  font-weight: bold;
  color: #BA3300;
}

#calendar thead th {
  padding: 2px 0;
  border-top: 2px solid #BFD19A;
  border-bottom: 2px solid #BFD19A;
}

#calendar tbody td {
  padding: 4px 0;
}

#calendar tfoot td {
  padding: 2px 0;
  border-top: 2px solid #BFD19A;
  font-weight: bold;
}

#prev {
  text-align: left;
}

#next {
  text-align: right;
}

#today {
  background: #BFD19A;
  font-weight: bold;
}

/* Footer */

#footer {
  clear: both;
  padding: 50px 0;
  background: #242628 url(themissing-piece-images/img20.gif) repeat-x;
  font-size: 11px;
  color: #666666;
}

#footer p {
  text-align: center;
  line-height: 2em;
}

#footer a {
  color: #666666;
}

</style>


</head>
<body>
<!-- start header -->
<div id="header">
  <div id="logo">
    <h1><a href="http://www.free-css.com/">The Missing Piece</a></h1>
    <p><a target="_blank" href="http://www.freecsstemplates.org/">By Free CSS Templates</a></p>
  </div>
  <div id="search">
    <form method="get" action="http://www.free-css.com/">
      <fieldset>
      <legend>Search The Missing Piece</legend>
      <input type="text" name="s" id="search-text" size="15" value="" />
      <input type="submit" id="search-submit" value="Search" />
      </fieldset>
    </form>
  </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>
<!-- end header -->
<!-- start page -->
<div id="page">
  <!-- start content -->
  <div id="content">
    <div class="post">
      <h2 class="title"><a href="http://www.free-css.com/">About this Template</a></h2>
      <p class="byline"><small>Posted by <a href="http://www.free-css.com/">Free CSS Templates</a></small></p>
      <p class="date"><span class="month">August </span><span class="day">28</span><span class="year">, 2007</span></p>
      <div class="entry">
        <p>This is <strong>The Missing Piece</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 commercially) provided 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> ( <a href="http://www.free-css.com/" class="rss">RSS</a> ) </p>
    </div>
    <div class="post">
      <h2 class="title"><a href="http://www.free-css.com/">Sample Tags</a></h2>
      <p class="byline"><small>Posted by <a href="http://www.free-css.com/">Free CSS Templates</a></small></p>
      <p class="date"><span class="month">August </span><span class="day">23</span><span class="year">, 2007</span></p>
      <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> ( <a href="http://www.free-css.com/" class="rss">RSS</a> ) </p>
    </div>
  </div>
  <!-- end content -->
  <!-- start sidebar -->
  <div id="sidebar">
    <ul>
      <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>
          <li><a href="http://www.free-css.com/">Praesent scelerisque scelerisque erat</a></li>
          <li><a href="http://www.free-css.com/">Nulla luctus eleifend purus</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>
        </ul>
      </li>
    </ul>
  </div>
  <!-- end sidebar -->
  <div id="back2top" style="clear: both;"><a href="http://www.free-css.com/">Back to Top</a></div>
</div>
<!-- end page -->
<!-- start footer -->
<div id="footer">
  <p class="legal"> &copy;2007 The Missing Piece. 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>
  <p class="links"> <a href="http://validator.w3.org/check/referer" class="xhtml">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a> &nbsp;&bull;&nbsp; <a href="http://jigsaw.w3.org/css-validator/check/referer" class="css">Valid <abbr title="Cascading Style Sheets">CSS</abbr></a> </p>
</div>
<!-- end footer -->
</body>
</html>

   
    
    
  








Related examples in the same category

1.sprayedstrokes
2.Square
3.squarely
4.st-valentines-day
5.stacko
6.stamp
7.standardissue
8.standardized
9.starburst
10.stardust
11.stargazer
12.stark
13.steppingstone
14.stichy
15.stickybud
16.stickynotes
17.Stock
18.streetclock
19.strict
20.strockes
21.students-site
22.stygian
23.stylevantage1-0
24.stylish
25.stylized
26.subdued
27.subordinate
28.substance
29.substantial
30.superior
31.supplementary
32.surpris
33.surreal
34.sweatbee
35.swift
36.switchr
37.sworm
38.Symisun_01
39.symphonic
40.symphonyofhorror
41.synchronize
42.Synergy
43.systematized
44.tabbed
45.tangular
46.tardy
47.tcm
48.tealzine
49.team_three
50.templatika
51.Tenebrific
52.terje1_winter
53.terrafirma
54.terrafirma2
55.The-Carbon
56.the-dark-one
57.the-island
58.the-mmozine
59.the-music-studio
60.the-new-audi
61.the-synopsis
62.the-themepod
63.the-web-news
64.theacmegroup
65.thechosenone
66.thelatest
67.themanor
68.tinytemplate
69.thermal
70.thesite
71.thetechies
72.thewall
73.the_gig
74.thisistext
75.throughout
76.thunder
77.ticktocklight
78.time
79.Timeless Template
80.timeless
81.timemanager
82.toolkit
83.tooplain
84.topbusiness
85.topgadgets
86.topworks
87.tornpaperdocom
88.totaltouch
89.towers
90.traditionalist
91.transient
92.transition
93.transport
94.trialservices
95.trikea-static
96.trinityinstitute
97.tropical-evening
98.tropical
99.truenature
100.turn-out-mag
101.Turnesol
102.turnitup
103.turrion-development
104.tv-archade
105.twirling
106.twisted
107.Typography
108.ultimateweb
109.unbound-1.0
110.uncomplicated
111.undefined
112.Underground
113.undertaking
114.UnderWraps
115.undiscovered
116.unembellished
117.unilluminated
118.uniq
119.unite
120.universal
121.unknown
122.unlink
123.unnamed
124.unqualified
125.urbanartist
126.usabilityreport
127.variety
128.vectorlover1-0
129.vegetable
130.veggie
131.ventix
132.vertical
133.verticals
134.vertigo
135.VeryGreen
136.VIBE
137.vibrant
138.Village
139.vintage-style
140.violetrays
141.visioninc
142.visions
143.vitruvius
144.vivid
145.Viziora
146.voodoo-dolls
147.voodoodollyv2.0
148.voyage
149.WaiveLive
150.walls
151.wanderer
152.warmblue
153.warped
154.watchthis
155.watercolored-portfolio
156.waterfactory
157.waterfall
158.waterfalls
159.WaterPool
160.we think
161.web-application
162.web-design-studio
163.web-design
164.web-hosting
165.web-shop
166.web2
167.webdesign
168.webdesigninfo
169.webmob
170.websitedesignx
171.webvision
172.Web_Application
173.wellness
174.whatsyoursolution
175.wickedred
176.widecommerce
177.widget
178.widgetlike
179.wildgoose
180.wing-the-air
181.winglobal
182.wiremesh
183.world-of-warcraft
184.xenlog
185.xgallery
186.xhtmldesign
187.xhtmldev_rainbow
188.xhtmldev_RealEstate
189.xodafields0.2
190.ynt
191.yosemite
192.your-blazing-app
193.yourhost
194.yourministry
195.zillanine