extended : Effect « Templates « HTML / CSS

extended

     

<!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>Extended</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: #AAE74A url(extended-images/img04.gif) repeat-x;
}

body, th, td, input, textarea {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 13px;
  color: #666666;
}

p, ol, ul {
  line-height: 170%;
}

a:hover {
  text-decoration: none;
}

/* Header */

#header {
  width: 960px;
  height: 120px;
  margin: 0 auto;
}

#logo {
  float: left;
  height: 120px;
  margin-left: 10px;
  background: url(extended-images/img01.jpg) no-repeat left center;
}

#logo h1, #logo p {
  text-transform: lowercase;
}

#logo h1 {
  margin: 0;
  padding: 25px 0 0 85px;
  letter-spacing: -2px;
  font-size: 3em;
  font-weight: normal;
  color: #000000;
}

#logo h1 a {
  color: #000000;
}

#logo p {
  margin: -10px 0 0 2px;
  padding: 0 0 0 85px;
  text-transform: lowercase;
}

#search {
  float: right;
  width: 280px;
}

#search form {
  margin: 0;
  padding: 63px 0 0 0;
}

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

#search #s, #search #x {
  float: left;
}

#search #s {
  width: 188px;
  margin: 2px 6px 0 0;
  padding: 2px 5px;
  background: url(extended-images/img02.gif) repeat-x;
  border: 1px solid #ACACAC;
}

#search #x {
  width: 67px;
  height: 28px;
  padding: 0;
  background: #006BFF url(extended-images/img03.gif) no-repeat;
  border: none;
  text-transform: lowercase;
  color: #FFFFFF;
}

/* Menu */

#menu {
  width: 962px;
  height: 50px;
  margin: 0 auto;
}

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

#menu li {
  display: block;
  float: left;
}

#menu a {
  display: block;
  float: left;
  height: 38px;
  padding: 8px 20px 0 20px;
  text-decoration: none;
  text-transform: lowercase;
  color: #000000;
}

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

#menu .current_page_item {
  background: url(extended-images/img05.gif) no-repeat;
}

#menu .current_page_item a {
  background: url(extended-images/img06.gif) no-repeat right top;
  font-weight: bold;
}

/* Page */

#page {
  width: 962px;
  margin: 0 auto;
  background: #FFFFFF url(extended-images/img07.gif) repeat-y;
}

/* Content */

#content {
  float: right;
  width: 700px;
  padding: 11px 11px 0 5px;
  background: url(extended-images/img09.gif) no-repeat;
}

#content a {
  color: #FF8900;
}

.pagetitle {
  height: 33px;
  margin: 0;
  padding: 8px 0 0 15px;
  background: url(extended-images/img13.gif) no-repeat;
  font-size: 1.4em;
  color: #FFFFFF;
}

#content #rss-posts {
  display: block;
  margin: -30px 15px 0px 0px;
  padding: 0 20px 0 0;
  background: url(extended-images/rss.gif) no-repeat right center;
  text-align: right;
  font-weight: bold;
  color: #FFFFFF;
}

.post {
  padding: 40px 30px 0 30px;
}

.title {
  margin: 0;
  font-size: 2.4em;
  font-weight: normal;
}

.byline {
  margin: 0 0 20px 0;
}

.meta {
  border-top: 1px dotted #CCCCCC;
  text-align: right;
}

.meta .more, .meta .comments {
  padding-left: 15px;
  background: url(extended-images/img14.gif) no-repeat left center;
}

/* Sidebar */

#sidebar {
  float: left;
  width: 230px;
  padding: 11px 5px 0 11px;
  background: url(extended-images/img08.gif) no-repeat;
}

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

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

#sidebar li ul {
  padding: 10px 15px;
}

#sidebar li li {
  margin: 0;
  padding-left: 15px;
  background: url(extended-images/img12.gif) no-repeat left center;
}

#sidebar h2 {
  height: 33px;
  margin: 0;
  padding: 8px 0 0 15px;
  background: url(extended-images/img11.gif) no-repeat;
  font-size: 1.4em;
  color: #FFFFFF;
}

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

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

/* Footer */

#footer {
  width: 962px;
  margin: 0 auto;
  padding: 30px 0;
  background: url(extended-images/img10.gif) no-repeat;
}

#footer p {
  margin: 0;
  text-align: center;
  color: #FFFFFF;
}

#footer a {
  color: #FFFFFF;
}

</style>


</head>
<body>
<!-- start header -->
<div id="header">
  <div id="logo">
    <h1>Extended</h1>
    <p>Free CSS Templates</p>
  </div>
  <div id="search">
    <form method="get" action="http://www.free-css.com/">
      <fieldset>
      <input id="s" type="text" name="s" value="" />
      <input id="x" type="submit" value="Search" />
      </fieldset>
    </form>
  </div>
</div>
<!-- end header -->
<!-- start menu -->
<div id="menu">
  <ul>
    <li class="current_page_item"><a href="http://www.free-css.com/">Homepage</a></li>
    <li><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>
<!-- end menu -->
<!-- start page -->
<div id="page">
  <!-- start content -->
  <div id="content">
    <h1 class="pagetitle">Recent Posts</h1>
    <a href="http://www.free-css.com/" id="rss-posts">RSS Feeds</a>
    <div class="post">
      <h2 class="title">Welcome to My Website</h2>
      <p class="byline"><small>Posted on August 25th, 2007 by <a href="http://www.free-css.com/">admin</a> | <a href="http://www.free-css.com/">Edit</a></small></p>
      <div class="entry">
        <p><strong>Extended</strong> is a free template from Free CSS Templates released under a <a target="_blank" href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5 License</a>. You're free to use this template for both commercial or personal use. I only ask that you link back to my site in some way. Enjoy :)</p>
      </div>
      <p class="meta"><a href="http://www.free-css.com/" class="more">Read More</a> &nbsp;&nbsp;&nbsp; <a href="http://www.free-css.com/" class="comments">Comments (33)</a></p>
    </div>
    <div class="post">
      <h2 class="title">Risus Pellentesque Pharetra</h2>
      <p class="byline"><small>Posted on August 25th, 2007 by <a href="http://www.free-css.com/">admin</a> | <a href="http://www.free-css.com/">Edit</a></small></p>
      <div class="entry">
        <blockquote>
          <p>&#8220;Praesent augue mauris, accumsan eget, ornare quis, consequat malesuada, leo.&#8221;</p>
        </blockquote>
        <p>Maecenas pede nisl, elementum eu, ornare ac, malesuada at, erat. Proin gravida orci porttitor enim accumsan lacinia. Donec condimentum, urna non molestie semper, ligula enim ornare nibh, quis laoreet eros quam eget ante.</p>
      </div>
      <p class="meta"><a href="http://www.free-css.com/" class="more">Read More</a> &nbsp;&nbsp;&nbsp; <a href="http://www.free-css.com/" class="comments">Comments (33)</a></p>
    </div>
  </div>
  <!-- end content -->
  <!-- start sidebar -->
  <div id="sidebar">
    <ul>
      <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> (13)</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>
          <li><a href="http://www.free-css.com/">April</a> (30)</li>
          <li><a href="http://www.free-css.com/">March</a> (31)</li>
          <li><a href="http://www.free-css.com/">February</a> (28)</li>
          <li><a href="http://www.free-css.com/">January</a> (31)</li>
        </ul>
      </li>
    </ul>
  </div>
  <!-- end sidebar -->
  <div style="clear: both;">&nbsp;</div>
</div>
<!-- end page -->
<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>
</body>
</html>

Related examples in the same category

1.	amazinglycool
2.	exposure
3.	expressivestars
4.	external
5.	extracts
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