smallwindow : Effect 2 « Templates « HTML / CSS

smallwindow
  

<!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       : Small Window 
Description: A three-column, fixed-width blog design.
Version    : 1.0
Released   : 20090531

-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Small Window by Free CSS Templates</title>
<meta name="keywords" content="" />
<meta name="Small Window " 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: #3C3C3C url(smallwindow-images/img01.jpg) repeat left top;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  color: #000000;
}

h1, h2, h3 {
  margin-top: 0;
  color: #6E6C00;
}

h1 {
  font-size: 2em;
}

h2 {
  font-size: 1.6em;
}

h3 {
  font-size: 1em;
}

ul {
  list-style-image: url(smallwindow-images/img07.gif);
}

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

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 */

#header {
  width: 100%;
  height: 210px;
  background: url(smallwindow-images/img02.jpg) repeat-x left top;
}

#logo {
  width: 1000px;
  height: 150px;
  margin: 0 auto;
  padding: 0 10px;
}

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

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

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

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

/* Menu */

#menu {
  width: 1000px;
  height: 45px;
  margin: 0 auto;
  padding-top: 15px;
}

#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: 10px 15px 10px 15px;
  border: none;
  text-decoration: none;
  text-transform: uppercase;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  color: #575757;
}

#menu a:hover {
  margin: 0 3px 0 0;
  padding: 10px 15px 10px 15px;
  color: #B2B2B2;
}

#menu .current_page_item a {
  background: none;
  margin: 0 3px 0 0;
  padding: 10px 15px 10px 0px;
  color: #FFFFFF;
}

/* Wrapper */

#wrapper {
}

/* Page */

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

#page-bg {
  padding: 11px 24px;
  background: url(smallwindow-images/img03.jpg) no-repeat;
}

/* Latest Post */

#latest-post {
  padding: 20px;
  border: 1px dashed #8D8D8D;
}

/* Content */

#content {
  float: left;
  width: 498px;
  padding-right: 20px;
}

.post {
  margin-bottom: 20px;
  padding-bottom: 15px;
  line-height: 200%;
  background: url(smallwindow-images/img06.jpg) repeat-x left top;
}

.post h1 {
  font-weight: normal;
  font-size: 30px;
}

.post h2 {
  font-size: 24px;
}

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

.title a {
  border-bottom: none;
}

.title a:hover {
}

.byline {
  margin: 0 15px 20px 15px;
  text-transform: uppercase;
}

.entry {
  padding: 0px 15px;
}

.links {
  font-size: 11px;
}

.links a {
  display: block;
  border: none;
  color: #FFFFFF;
}

.links a:hover {
}

.links .more {
  float: right;
  text-transform: uppercase;
}

.links .comments {
  float: left;
  padding-left: 20px;
}
/* Sidebars */

#sidebar1 {
  padding-right: 20px;
}

.sidebar {
  float: left;
  width: 200px;
  padding: 0 0 0 21px;
  background: url(smallwindow-images/img03.jpg) repeat-y left top;
}

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

.sidebar li {
  padding: 0 0 20px 0;
  background: url(smallwindow-images/img06.jpg) repeat-x left top;
}

.sidebar li ul {
  padding: 0px 15px;
}

.sidebar li li {
  padding: 8px 0 8px 0px;
  background: url(smallwindow-images/img04.jpg) repeat-x left bottom;
}

.sidebar li h2 {
  margin: 0 0 10px 0;
  padding: 15px 15px 5px 15px;
  font-size: 16px;
  font-weight: normal;
  color: #FFFFFF;
}

.sidebar p {
  padding: 0px 15px;
}

/* Search */

#searchform {
  margin: 0;
  padding: 20px 15px;
}

#searchform br {
  display: none;
}

#s {
  margin: 0;
  padding: 2px 2px;
  width: 165px;
  height: 18px;
  border: none;
  background: #FFFFFF;
  font-size: 10px;
  color: #000000;
}

#x {
  margin: 1px 0 0 0;
  padding: 2px 5px;
  height: 24px;
  border: none;
  background: #000000;
  text-decoration: none;
  text-transform: uppercase;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  color: #FFFFFF;
}
/* Calendar */

#calendar_wrap {
  padding: 0;
  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 {
  background-color: #000000;
  height: 100px;
}

#footer p {
  margin: 0;
  padding: 40px 0 0 0;
  text-align: center;
  text-transform: uppercase;
  font-size: 10px;
  color: #575757;
}

#footer a {
  color: #B2B2B2;
}

</style>


</head>
<body>
<!-- start header -->
<div id="header">
<div id="logo">
  <h1><a href="#">small Window  </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>
</div>
<!-- end header -->

<div id="wrapper">
<!-- start page -->
<div id="page">
  <!-- start content -->
  <div id="content">
    <div style="padding-bottom: 20px;"><img src="smallwindow-images/img05.jpg" alt="" /></div>
    <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>Small Window </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/Small Window /">WordPress theme</a> at <a href="http://www.freewpthemes.net/">Free WordPress Themes</a>.</p>
        <p class="links"><a href="#" class="more">Read Full Story</a> &nbsp;&nbsp;&nbsp;</p>
      </div>
    </div>
    <div class="post">
      <h2 class="title"><a href="#">Nulla luctus eleifend</a></h2>
      <p class="byline"><small>Posted on October 1st, 2007 by <a href="#">Free CSS Templates</a></small></p>
      <div class="entry">
        <p>Pellentesque viverra vulputate enim. Aliquam erat volutpat. Pellentesque tristique ante ut risus. Quisque dictum. Integer nisl risus, sagittis convallis, rutrum id, elementum congue, nibh. Suspendisse dictum porta lectus. Donec placerat odio vel elit. Nullam ante orci, pellentesque eget, tempus quis, ultrices in, est. Curabitur sit amet nulla. Nam in massa. Sed vel tellus. </p>
        <p class="links"><a href="#" class="more">Read Full Story</a> &nbsp;&nbsp;&nbsp;</p>
      </div>
    </div>
    <div class="post">
      <h2 class="title"><a href="#">Nulla luctus eleifend</a></h2>
      <p class="byline"><small>Posted on October 1st, 2007 by <a href="#">Free CSS Templates</a></small></p>
      <div class="entry">
        <p>Pellentesque viverra vulputate enim. Aliquam erat volutpat. Pellentesque tristique ante ut risus. Quisque dictum. Integer nisl risus, sagittis convallis, rutrum id, elementum congue, nibh. Suspendisse dictum porta lectus. </p>
        <p class="links"><a href="#" class="more">Read Full Story</a> &nbsp;&nbsp;&nbsp;</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>
            <input type="text" name="s" id="s" size="15" value="" />
            <br />
          </div>
        </form>
      </li>
      <li>
        <h2>Tags</h2>
        <p><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, integer nisl risus, sagittis convallis, rutrum id, elementum congue</a></p></li>
      <li>
        <h2>Calendar</h2>
        <div id="calendar_wrap">
          <table width="100%" 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;&nbsp; Design by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
</div>
</body>
</html>
Related examples in the same category

1.	bigpixels
2.	binary-news
3.	mosaic
4.	perfection
5.	plain1
6.	plain2
7.	plastic-surgery
8.	plastics
9.	overdose
10.	outlined
11.	optimism
12.	optimistic
13.	Modern_Theme
14.	MultiStrangeColor
15.	modern
16.	minimalistic
17.	primitive
18.	sparkle
19.	sparkling
20.	spotlight
21.	simplyfluid
22.	slider
23.	pragmatic
24.	popular
25.	primitif
26.	pure-web-2.0
27.	pure
28.	reflection
29.	reflections
30.	royal-cyan
31.	royal_policy
32.	smalltown
33.	smartdesign
34.	smarttouch
35.	splendid
36.	workfire
37.	webtile
38.	Wide_Side
39.	zionnarrow
40.	zionnarrows
41.	xtreme
42.	ZEN
43.	zenlike
44.	wondrous
45.	stonewalled
46.	tattoopatt
47.	tattoopattern
48.	tastelessly
49.	tasty
50.	thebarn
51.	tinfoil_helmet
52.	tomato
53.	metal-feel
54.	metal
55.	historical
56.	historicpaper
57.	historyofwar
58.	lonelyness