extracts : Effect « Templates « HTML / CSS

extracts
     

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

Name       : Extracts
Description: A three-column, fixed-width blog design.
Version    : 1.0
Released   : 20071004

-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Extracts by Free CSS Templates</title>
<meta name="keywords" content="" />
<meta name="Extracts" 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: 0;
  padding: 0;
  background: #253C5E;
  font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
  font-size: 13px;
  color: #FFFFFF;
}

h1, h2, h3 {
  margin-top: 0;
}

h1 {
  font-size: 1.6em;
  font-weight: normal;
}

h2 {
  font-size: 1.6em;
}

h3 {
  font-size: 1em;
}

ul {
}

a {
  text-decoration: none;
  color: #DBFF06;
}

a:hover {
  border-bottom: none;
}

a img {
  border: none;
}

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

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

/* Header */

#logo {
  width: 970px;
  height: 88px;
  margin: 0 auto;
  padding: 0 10px;
}

#logo h1, #logo p {
  float: left;
  margin: 0;
  color: #FFFFFF;
}

#logo h1 {
  padding: 30px 0 0 0;
  text-transform: lowercase;
  font-weight: normal;
  font-size: 3em;
}

#logo p {
  text-transform: uppercase;
  padding: 52px 0 0 3px;
  font-size: 10px;
  color: #C7F703;
}

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

/* Menu */

#menu {
  width: 1000px;
  margin: 0 auto;
  padding: 10px 0;
  height: 30px;
  background: #132440;
  border-bottom: 2px solid #253C5E;
}

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

#menu li {
  display: inline;
}

#menu a {
  display: block;
  float: left;
  margin: 0 3px 0 0;
  padding: 6px 15px 10px 20px;
  border-right: 1px #253C5E solid;
  text-decoration: none;
  text-transform: uppercase;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  color: #FFFFFF;
}

#menu a:hover {
  margin: 0 3px 0 0;
  color: #FFFFFF;
}

#menu .current_page_item a {
  margin: 0 3px 0 0;
  color: #FFFFFF;
}

/* Wrapper */

#wrapper {
}

/* Page */

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

#page-bg {
}

/* Latest Post */

#latest-post {
  padding: 20px;
  border: 1px solid #E7E7E7;
}

/* Content */

#content {
  float: right;
  width: 550px;
}

.post {
  padding-bottom: 15px;
  line-height: 200%;
}

.post h1 {
  font-weight: normal;
}

.title {
  margin: 0;
  padding: 10px 0 0 20px;
  font-weight: normal;
}

.title a {
  border-bottom: none;
  color: #FFFFFF;
}

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

.byline {
  border-bottom: 2px solid #132440;
  margin: -10px 20px 20px 20px;
}

.tag {
  padding: 0 15px;
}

.entry {
  padding: 0 20px;
}

.links {
  padding: 4px 20px;
  text-align: left;
  font-weight: bold;
  background: #132440;
}

.links a {
  border: none;
}

.links a:hover {
}

/* Sidebars */

#sidebar1 {
  border-right: #253C5E solid 1px;
}

.sidebar {
  float: left;
  width: 220px;
  padding: 0;
  background: #2A416A;
  border-bottom: 2px solid #132440;
  font-size: 12px;
}

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

.sidebar li {
  padding: 0 0 20px 0;
}

.sidebar li ul {
}

.sidebar li li {
  margin: 0 20px 0 15px;
  padding: 8px 0px;
  border-bottom: 1px #29497C dashed;
}


.sidebar li h2 {
  margin: 0 0 0 0;
  padding: 10px 15px;
  background: #132440;
  font-size: 13px;
  color: #DBFF06;
}

.sidebar a {
  color: #FFFFFF;
}

/* Search */

#searchform {
  margin: 0;
  padding: 0 0 0 0;
}

#searchform br {
  display: none;
}

#searchform h2 {
}

#s {
  margin: 10px 0px 0 15px;
  padding: 2px 2px;
  width: 110px;
  height: 18px;
  border: 1px solid #30486E;
  background: #1B2F4A;
  font-size: 10px;
  color: #CCCCCC;
}

#x {
  margin: 0;
  padding: 2px 5px;
  height: 25px;
  background: #306694;
  border: 1px solid #6A8BAA;
  text-decoration: none;
  text-transform: uppercase;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  color: #CCCCCC;
}
/* Calendar */

#calendar_wrap {
  padding: 0 15px;
  text-align: center;
}

#calendar_wrap table {
  width: 100%;
}

#calendar_wrap th {
}

#calendar_wrap td {
}

#calendar_wrap tfoot td {
  border: none;
}

#calendar_wrap tfoot td#prev {
  text-align: left;
  font-weight: bold;
  border: none;
}

#calendar_wrap tfoot td#prev a {
  border: none;
}

#calendar_wrap tfoot td#next {
  text-align: right;
  font-weight: bold;
  border: none;
}

#calendar_wrap tfoot td#next a {
  border: none;
}

/* Footer */

#footer {
  width: 1000px;
  height: 55px;
  margin: 0 auto;
  background: #2A416A;
  border-top: 2px solid #132440;
}

#footer p {
  margin: 0;
  padding: 15px 0 0 0;
  text-align: center;
  font-size: smaller;
  color: #FFFFFF;
}

#footer a {
  color: #FFFFFF;
}

</style>


</head>
<body>
<!-- start header -->
<div id="logo">
  <h1><a href="#">Extracts</a></h1>
  <p>Designed By Free CSS Templates</p>
</div>
<div id="menu">
  <ul id="main">
    <li class="current_page_item"><a href="#">Homepage</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
  <ul id="feed">
    <li><a href="#">Entries RSS</a></li>
    <li><a href="#">Comments RSS</a></li>
  </ul>
</div>
<!-- end header -->
<div id="wrapper">
  <!-- start page -->
  <div id="page">
    <!-- start content -->
    <div id="content">
      <div class="post">
        <h1 class="title"><a href="#">Welcome to Our Website!</a></h1>
        <p class="byline"><small>Posted on October 1st, 2007 by <a href="#">Free CSS Templates</a></small></p>
        <div class="entry">
          <p><strong>Extracts</strong> is a free, fully standards-compliant CSS template designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</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 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 <a href="http://www.freewpthemes.net/preview/Extracts/">WordPress theme</a> at <a href="http://www.freewpthemes.net/">Free WordPress Themes</a>.</p>
          <p class="links"><a href="#" class="more">Read More</a> &nbsp;&nbsp;&nbsp; <a href="#" class="comments">No Comments</a></p>
        </div>
      </div>
      <div class="post">
        <h2 class="title"><a href="#">Sample Tags</a></h2>
        <p class="byline"><small>Posted on October 1st, 2007 by <a href="#">Free CSS Templates</a></small></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>
          <p class="links"><a href="#" class="more">Read More</a> &nbsp;&nbsp;&nbsp; <a href="#" class="comments">No Comments</a></p>
        </div>
      </div>
      <div class="post">
        <h2 class="title"><a href="#">Lorem Ipsum Dolor </a></h2>
        <p class="byline"><small>Posted on October 1st, 2007 by <a href="#">Free CSS Templates</a></small></p>
        <div class="entry">
          <p>Consectetuer adipiscing elit. Nam pede erat, porta eu, lobortis eget, tempus et, tellus. Etiam neque. Vivamus consequat lorem at nisl. Nullam non wisi a sem semper eleifend. Donec mattis libero eget urna. Duis pretium velit ac mauris. Proin eu wisi suscipit nulla suscipit interdum. Aenean lectus lorem, imperdiet at, ultrices eget, ornare et, wisi. Pellentesque adipiscing purus ac magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.          </p>
          <p class="links"><a href="#" class="more">Read More</a> &nbsp;&nbsp;&nbsp; <a href="#" class="comments">No Comments</a></p>
        </div>
      </div>
    </div>
    <!-- end content -->
    <!-- start sidebars -->
    <div id="sidebar1" class="sidebar">
      <ul>
        <li>
          <h2>Recent Posts</h2>
          <ul>
            <li><a href="#">Aliquam libero</a></li>
            <li><a href="#">Consectetuer adipiscing elit</a></li>
            <li><a href="#">Metus aliquam pellentesque</a></li>
            <li><a href="#">Suspendisse iaculis mauris</a></li>
            <li><a href="#">Urnanet non molestie semper</a></li>
            <li><a href="#">Proin gravida orci porttitor</a></li>
          </ul>
        </li>
        <li>
          <h2>Recent Comments</h2>
          <ul>
            <li><a href="#">Free CSS Templates</a> on <a href="#">Aliquam libero</a></li>
            <li><a href="#">Free CSS Templates</a> on <a href="#">Consectetuer adipiscing elit</a></li>
            <li><a href="#">Free CSS Templates</a> on <a href="#">Metus aliquam pellentesque</a></li>
            <li><a href="#">Free CSS Templates</a> on <a href="#">Suspendisse iaculis mauris</a></li>
            <li><a href="#">Free CSS Templates</a> on <a href="#">Urnanet non molestie semper</a></li>
            <li><a href="#">Free CSS Templates</a> on <a href="#">Proin gravida orci porttitor</a></li>
          </ul>
        </li>
        <li>
          <h2>Categories</h2>
          <ul>
            <li><a href="#">Aliquam libero</a></li>
            <li><a href="#">Consectetuer adipiscing elit</a></li>
            <li><a href="#">Metus aliquam pellentesque</a></li>
            <li><a href="#">Suspendisse iaculis mauris</a></li>
            <li><a href="#">Urnanet non molestie semper</a></li>
            <li><a href="#">Proin gravida orci porttitor</a></li>
          </ul>
        </li>
        <li>
          <h2>Archives</h2>
          <ul>
            <li><a href="#">September</a> (23)</li>
            <li><a href="#">August</a> (31)</li>
            <li><a href="#">July</a> (31)</li>
            <li><a href="#">June</a> (30)</li>
            <li><a href="#">May</a> (31)</li>
          </ul>
        </li>
      </ul>
    </div>
    <div id="sidebar2" class="sidebar">
      <ul>
        <li>
          <form id="searchform" method="get" action="#">
            <div>
              <h2>Site Search</h2>
              <input type="text" name="s" id="s" size="15" value="" />
              <br />
              <input type="submit" value="Search" id="x" />
            </div>
          </form>
        </li>
        <li>
          <h2>Tags</h2>
          <p class="tag"><a href="#">dolor</a> <a href="#">ipsum</a> <a href="#">lorem</a> <a href="#">sit amet</a> <a href="#">dolor</a> <a href="#">ipsum</a> <a href="#">lorem</a> <a href="#">sit amet</a></p></li>
        <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="#" title="View posts for September 2007">&laquo; Sep</a></td>
                  <td class="pad">&nbsp;</td>
                  <td colspan="3" id="next">&nbsp;</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>14</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>
          <h2>Categories</h2>
          <ul>
            <li><a href="#">Aliquam libero</a></li>
            <li><a href="#">Consectetuer adipiscing elit</a></li>
            <li><a href="#">Metus aliquam pellentesque</a></li>
            <li><a href="#">Suspendisse iaculis mauris</a></li>
            <li><a href="#">Urnanet non molestie semper</a></li>
            <li><a href="#">Proin gravida orci porttitor</a></li>
            <li><a href="#">Aliquam libero</a></li>
            <li><a href="#">Consectetuer adipiscing elit</a></li>
            <li><a href="#">Metus aliquam pellentesque</a></li>
            <li><a href="#">Urnanet non molestie semper</a></li>
            <li><a href="#">Proin gravida orci porttitor</a></li>
            <li><a href="#">Aliquam libero</a></li>
            <li><a href="#">Consectetuer adipiscing elit</a></li>
            <li><a href="#">Metus aliquam pellentesque</a></li>
            <li><a href="#">Suspendisse iaculis mauris</a></li>
            <li><a href="#">Urnanet non molestie semper</a></li>
            <li><a href="#">Proin gravida orci porttitor</a></li>
          </ul>
        </li>
      </ul>
    </div>
    <!-- end sidebars -->
    <div style="clear: both;">&nbsp;</div>
  </div>
  <!-- end page -->
</div>
<div id="footer">
  <p>&copy;2007 All Rights Reserved. &nbsp;&bull;&nbsp; Design by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
</div>
</body>
</html>
Related examples in the same category

1.	amazinglycool
2.	exposure
3.	expressivestars
4.	extended
5.	external
6.	falling-away
7.	fantasy
8.	flare
9.	flashyweb
10.	flash_web
11.	fireworks
12.	floating
13.	falling
14.	fantasyland
15.	metamorph_weird
16.	metamorph_violet
17.	metamorph_violetdream
18.	metamorph_mydesign
19.	metamorph_myst
20.	metamorph_mywaves
21.	metamorph_myweb
22.	metamorph_freedom_lt
23.	metamorph_gloryfield
24.	metamorph_horizon
25.	bubble
26.	classic-luxury
27.	classic
28.	classique
29.	classliclink
30.	civilized
31.	metamorph_cool
32.	metamorph_imaginary
33.	metamorph_infinity
34.	metamorph_newage
35.	metamorph_madness
36.	metamorph_heaven
37.	metamorph_lensflare
38.	metamorph_shinyblur_lt
39.	metamorph_sparks_lt
40.	metamorph_soulfrost
41.	metamorph_space
42.	metamorph_spaceglowing
43.	metamorph_sphere
44.	metamorph_starwars
45.	metamorph_steel
46.	metamorph_stones
47.	abundant
48.	chalkboard
49.	cool-web
50.	coolblack
51.	CoolishBlack
52.	coolracing
53.	coolzone
54.	cool_web
55.	creative-media
56.	creative-mind
57.	creative
58.	creevykeel
59.	decayed
60.	essence
61.	essential
62.	auroradesktop
63.	scenic-reflections