description : Design 3 « Templates « HTML / CSS

description

   

<!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       : Description
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>Descriptionby Free CSS Templates</title>
<meta name="keywords" content="" />
<meta name="description" 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: #424242 url(description-images/img01.jpg) repeat-x;
  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  color: #666666;
}

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

h1 {
  font-size: 2em;
}

h2 {
  font-size: 1.6em;
}

h3 {
  font-size: 1em;
}

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

a {
  text-decoration: none;
  border-bottom: 1px dotted #CCCCCC;
  color: #D56E22;
}

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: 880px;
  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: #616161;
}

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

/* Menu */

#menu {
  width: 880px;
  height: 42px;
  margin: 0 auto;
  padding-top: 10px;
}

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

#menu a:hover {
  background: url(description-images/img05.jpg) repeat-x;
  margin: 0 3px 0 0;
  padding: 8px 15px 10px 15px;
  color: #FFFFFF;
}

#menu .current_page_item a {
  background: url(description-images/img05.jpg) repeat-x;
  margin: 0 3px 0 0;
  padding: 8px 15px 10px 15px;
  color: #FFFFFF;
}

/* Wrapper */

#wrapper {
  background: #000000;
}

/* Page */

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

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

/* Latest Post */

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

/* Content */

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

.post {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px dotted #949494;
  line-height: 200%;
}

.post h1 {
  font-weight: normal;
}

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

.title a {
  border-bottom: none;
}

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

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

.entry {
  padding: 0 20px;
}

.links {
  padding-top: 10px;
  text-align: right;
  font-weight: bold;
}

.links a {
  padding-left: 15px;
  background: url(description-images/img04.gif) no-repeat left center;
  border: none;
}

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

/* Sidebars */

.sidebar {
  float: left;
  width: 200px;
  padding: 0 0 0 21px;
}

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

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

.sidebar li ul {
}

.sidebar li li {
  padding: 5px 0 5px 25px;
  background: url(description-images/img04.gif) no-repeat 10px 9px;
}

.sidebar li h2 {
  margin: 0 0 10px 0;
  padding: 5px 10px;
  background: url(description-images/img06.jpg) repeat-x;
  border: 1px solid #4A4A4A;
  font-size: 12px;
  color: #CCCCCC;
}

/* Search */

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

#searchform br {
  display: none;
}

#s {
  margin: 0;
  padding: 2px 2px;
  width: 120px;
  height: 18px;
  border: 1px solid #333333;
  background: #000000;
  font-size: 10px;
  color: #CCCCCC;
}

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

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

#calendar_wrap table {
  width: 90%;
}

#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 {
  height: 50px;
  background: #000000 url(description-images/img06.jpg) repeat-x left top;
}

#footer p {
  margin: 0;
  padding: 20px 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="#">Description</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>Description</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/Description/">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>
  <!-- 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 />
            <input type="submit" value="Search" id="x" />
          </div>
        </form>
      </li>
      <li>
        <h2>Tags</h2>
        <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> </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 style="display:none;"><a href="http://free-tempmlates.ru/">Free-Templates.RU</a></div>
</div>
</body>
</html>

Related examples in the same category

1.	blankspace
2.	Blasphemy
3.	blended
4.	blewwave
5.	blootoon
6.	blush
7.	boardroom
8.	BOOM
9.	boorish
10.	boosting
11.	bordered
12.	boswell
13.	bounderies
14.	boxedtype
15.	boxes_template
16.	boxybox
17.	branches
18.	breaking_ontop
19.	brewedcoffee
20.	brightfolio
21.	brightsideoflife1.0
22.	Broadcaster
23.	broadsheet
24.	brycesunrise
25.	bucolic
26.	burgeon
27.	buzz
28.	BW
29.	bwdec2007
30.	calliope
31.	callofduty2
32.	candiiclouds
33.	cantya-studio
34.	canuckington-post
35.	canvass
36.	capricious
37.	capsicum
38.	carbonated
39.	carbonizer
40.	carlmelon
41.	caronline
42.	carrera
43.	castellated
44.	catch_info
45.	cattleya
46.	center-stage
47.	COIL
48.	col1
49.	col2
50.	col3
51.	collaboration
52.	collectiveblue
53.	collegemusic
54.	colorus
55.	colosseum
56.	columna
57.	combination
58.	ComingSoon
59.	commission
60.	communication-1.0
61.	communication-co
62.	communication
63.	community-live
64.	compiled
65.	complete-collection
66.	complimentary
67.	component
68.	compressed
69.	compromise
70.	compus
71.	conceptnova
72.	concrete
73.	concurrence
74.	condition
75.	conglomerate
76.	conjunction
77.	connection
78.	connections
79.	consulting-co
80.	contemplate
81.	convergence
82.	cookiefusion
83.	Copy of modify
84.	corporattica
85.	Cosmopolitan
86.	counterstrike
87.	cover
88.	coverage
89.	coxswain
90.	creamburn
91.	crisp2
92.	criterion
93.	crystalblack
94.	css-heaven-1
95.	cssgallery
96.	cssheaven-2
97.	cssmajesty
98.	cubismo
99.	cultivated
100.	cultureshock
101.	cupofcoffee
102.	customary
103.	customize
104.	cyano
105.	cyanspark
106.	cyberarray
107.	daleri-mega
108.	daleri-structure
109.	dalmatians
110.	danmyaz1
111.	dapple
112.	david-kruger
113.	deardiary
114.	decorative
115.	deepimpact
116.	deerpark
117.	dekada
118.	delta
119.	delzep_enterprise
120.	deserted
121.	desertsand
122.	design-gallery
123.	design-studio
124.	design10
125.	Design9
126.	designersstudio
127.	designersworld
128.	designgalo
129.	designhq
130.	designstudio
131.	Design_Agency
132.	deskspace
133.	detachable
134.	deviation
135.	devision
136.	dewdrops
137.	dezinstudio
138.	didactic
139.	Did_My_Time
140.	differential
141.	digitalweb
142.	dimension
143.	diminishing
144.	dirtylicious
145.	disambiguation
146.	discovery
147.	distillate
148.	distinctive
149.	diversity
150.	DJ