experience : Design 2 « Templates « HTML / CSS

experience
     

<!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>Experience</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: #0F5B96 url(experience-images/img01.gif) repeat-x;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  color: #A4E4F5;
}

input, textarea {
  background: #A4E4F5;
  border: 1px solid #FFFFFF;
  font: bold 13px Arial, Helvetica, sans-serif;
  color: #0F5B96;
}

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

h1, h2, h3 {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

h1, h2 {
  text-transform: lowercase;
  font-weight: normal;
}

h1 {
  letter-spacing: -2px;
  font-size: 2.4em;
}

h2 {
  letter-spacing: -1px;
  font-size: 1.8em;
}

p, ol, ul {
  margin-bottom: 1.5em;
  line-height: 150%;
}

a {
  color: #A4E4F5;
}

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

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

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

hr {
  display: none;
}

/* Header */

#header {
  height: 150px;
  background: url(experience-images/img02.jpg) no-repeat center top;
  text-transform: lowercase;
}

#logo {
  float: left;
}

#logo h1, #logo p {
  float: left;
  margin: 0;
  line-height: normal;
}

#logo h1 {
  padding: 47px 0 0 20px;
  font-size: 3em;
  color: #62D6F5;
}

#logo p {
  padding: 69px 0 0 7px;
  letter-spacing: -1px;
  font-size: 1.4em;
  color: #199DD2;
}

#logo a {
  text-decoration: none;
  color: #62D6F5;
}

#menu {
  float: right;
}

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

#menu li {
  display: inline;
}

#menu a {
  float: left;
  width: 120px;
  height: 56px;
  margin: 0 0 0 2px;
  padding: 9px 0 0 0;
  background: #1B97CE url(experience-images/img03.gif) no-repeat;
  text-decoration: none;
  text-align: center;
  letter-spacing: -1px;
  font-size: 1.1em;
  font-weight: bold;
  color: #000000;
}

#menu a:hover, #menu .current_page_item a {
  background: #26BADF url(experience-images/img04.gif) no-repeat;
}

/* Page */

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

/* Content */

#content {
  float: left;
  width: 530px;
  padding: 0 0 0 25px;
}

.post {
  margin-bottom: 15px;
  background: #1EB5DD url(experience-images/img05.gif) no-repeat;
  color: #0A416B;
}

.post a {
  color: #A4E4F5;
}

.post a:hover {
  color: #FFFFFF;
}

.post .title {
  margin: 0;
  padding: 30px 30px 0 30px;
}

.post .title a {
  text-decoration: none;
  color: #0A416B;
}

.post .byline {
  margin: 0;
  padding: 0 30px;
}

.post .entry {
  padding: 20px 30px 10px 30px;
}

.post .links {
  margin: 0;
  padding: 10px 30px 35px 30px;
  background: url(experience-images/img06.gif) repeat-x left bottom;
  border-top: 1px solid #2872A6;
}

.post .links a {
  padding-left: 10px;
  background: url(experience-images/img08.gif) no-repeat left center;
  text-decoration: none;
  font-weight: bold;
  color: #0A416B;
}

.post .links a:hover {
  color: #FFFFFF;
}

/* Sidebars */

.sidebar {
  float: left;
  width: 200px;
}

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

.sidebar li {
}

.sidebar li ul {
}

.sidebar li li {
  padding: 6px 0 6px 10px;
  background: url(experience-images/img08.gif) no-repeat 0 12px;
  border-bottom: 1px solid #2872A6;
}

.sidebar li li a {
  text-decoration: none;
  color: #C9ECF5;
}

.sidebar li li a:hover {
  color: #FFFFFF;
}

.sidebar li h2 {
  padding-top: 20px;
  color: #FFFFFF;
}

/* Left Sidebar */

#leftbar {
}

/* Right Sidebar */

#rightbar {
  padding: 0 0 0 25px;
}

/* Search */

#searchform {
  padding-top: 20px;
  text-align: right;
}

#searchform br {
  display: none;
}

#searchform input {
  margin-bottom: 5px;
}

#searchform #s {
  width: 190px;
}

/* Calendar */

#calendar_wrap {
  padding-left: 10px;
}

#calendar_wrap table {
  width: 180px;
  text-align: center;
  border-collapse: collapse;
}

#calendar_wrap tfoot {
  font-weight: bold;
}

#calendar_wrap tfoot a {
  text-decoration: none;
}

#calendar_wrap #prev {
  text-align: left;
}

#calendar_wrap #next {
  text-align: right;
}

#calendar_wrap tbody {
  border-bottom: 1px solid #2872A6;
  border-right: 1px solid #2872A6;
}

#calendar_wrap tbody td {
  padding: 3px 0;
  border-top: 1px solid #2872A6;
  border-left: 1px solid #2872A6;
}

#calendar_wrap tbody td a {
  font-weight: bold;
}

/* Footer */

#footer {
  clear: both;
  padding: 40px 0;
  background: #083253;
}

#footer p {
  text-align: center;
  font-size: smaller;
  color: #0F5B96;
}

#footer a {
  color: #0F5B96;
|

</style>


</head>
<body>
<div id="header">
  <div id="logo">
    <h1><a href="http://www.free-css.com/">Experience</a></h1>
    <p>Free CSS Templates</p>
  </div>
  <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/">Products</a></li>
      <li><a href="http://www.free-css.com/">Services</a></li>
      <li><a href="http://www.free-css.com/">About Us</a></li>
      <li><a href="http://www.free-css.com/">Contact Us</a></li>
    </ul>
  </div>
</div>
<div id="page">
  <div id="leftbar" class="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 elit</a></li>
          <li><a href="http://www.free-css.com/">Metus aliquam</a></li>
          <li><a href="http://www.free-css.com/">Suspendisse mauris</a></li>
          <li><a href="http://www.free-css.com/">Urnanet non semper</a></li>
          <li><a href="http://www.free-css.com/">Proin porttitor</a></li>
        </ul>
      </li>
      <li>
        <h2>Archives</h2>
        <ul>
          <li><a href="http://www.free-css.com/">Aliquam libero</a></li>
          <li><a href="http://www.free-css.com/">Consectetuer elit</a></li>
          <li><a href="http://www.free-css.com/">Metus aliquam</a></li>
          <li><a href="http://www.free-css.com/">Suspendisse mauris</a></li>
          <li><a href="http://www.free-css.com/">Urnanet non semper</a></li>
          <li><a href="http://www.free-css.com/">Proin porttitor</a></li>
        </ul>
      </li>
      <li>
        <h2>Aliquam</h2>
        <ul>
          <li><a href="http://www.free-css.com/">Aliquam libero</a></li>
          <li><a href="http://www.free-css.com/">Consectetuer elit</a></li>
          <li><a href="http://www.free-css.com/">Metus aliquam</a></li>
          <li><a href="http://www.free-css.com/">Suspendisse mauris</a></li>
          <li><a href="http://www.free-css.com/">Urnanet non semper</a></li>
          <li><a href="http://www.free-css.com/">Proin porttitor</a></li>
        </ul>
      </li>
      <li>
        <h2>Urnanet</h2>
        <ul>
          <li><a href="http://www.free-css.com/">Aliquam libero</a></li>
          <li><a href="http://www.free-css.com/">Consectetuer elit</a></li>
          <li><a href="http://www.free-css.com/">Metus aliquam</a></li>
          <li><a href="http://www.free-css.com/">Suspendisse mauris</a></li>
          <li><a href="http://www.free-css.com/">Urnanet non semper</a></li>
          <li><a href="http://www.free-css.com/">Proin porttitor</a></li>
        </ul>
      </li>
    </ul>
  </div>
  <div id="content">
    <div class="post">
      <h1 class="title"><a href="http://www.free-css.com/">Welcome to Our Website!</a></h1>
      <p class="byline"><small>Posted on October 1st, 2007 by <a href="http://www.free-css.com/">Free CSS Templates</a></small></p>
      <div class="entry"> <img src="experience-images/img07.jpg" alt="" width="122" height="122" class="left" />
        <p><strong>Experience</strong> is 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. Have fun with it :)</p>
        <p>This template is also available as a WordPress theme at Free WordPress Themes. The photo is from PDPhoto.org. </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></p>
    </div>
    <div class="post">
      <h2 class="title"><a href="http://www.free-css.com/">Sample Tags</a></h2>
      <p class="byline"><small>Posted on October 1st, 2007 by <a href="http://www.free-css.com/">Free CSS Templates</a></small></p>
      <div class="entry">
        <p>Donec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum. Quisque dictum integer nisl risus, sagittis convallis, rutrum id, congue, and nibh.</p>
        <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></p>
    </div>
  </div>
  <div id="rightbar" class="sidebar">
    <ul>
      <li>
        <form id="searchform" method="get" action="http://www.free-css.com/">
          <div>
            <input type="text" name="s" id="s" size="15" value="" />
            <br />
            <input type="submit" value="Search" />
          </div>
        </form>
      </li>
      <li>
        <h2>Tags</h2>
        <a href="http://www.free-css.com/">dolor</a> <a href="http://www.free-css.com/">ipsum</a> <a href="http://www.free-css.com/">lorem</a> <a href="http://www.free-css.com/">sit amet</a> <a href="http://www.free-css.com/">dolor</a> <a href="http://www.free-css.com/">ipsum</a> <a href="http://www.free-css.com/">lorem</a> <a href="http://www.free-css.com/">sit amet</a> </li>
      <li>
        <h2>Recent Posts</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>Recent Comments</h2>
        <ul>
          <li><a href="http://www.free-css.com/">Free CSS Templates</a> on <a href="http://www.free-css.com/">Aliquam libero</a></li>
          <li><a href="http://www.free-css.com/">Free CSS Templates</a> on <a href="http://www.free-css.com/">Consectetuer adipiscing elit</a></li>
          <li><a href="http://www.free-css.com/">Free CSS Templates</a> on <a href="http://www.free-css.com/">Metus aliquam pellentesque</a></li>
          <li><a href="http://www.free-css.com/">Free CSS Templates</a> on <a href="http://www.free-css.com/">Suspendisse iaculis mauris</a></li>
          <li><a href="http://www.free-css.com/">Free CSS Templates</a> on <a href="http://www.free-css.com/">Urnanet non molestie semper</a></li>
          <li><a href="http://www.free-css.com/">Free CSS Templates</a> on <a href="http://www.free-css.com/">Proin gravida orci porttitor</a></li>
        </ul>
      </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="http://www.free-css.com/" 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><a href="http://www.free-css.com/">31</a></td>
                <td class="pad" colspan="4">&nbsp;</td>
              </tr>
            </tbody>
          </table>
        </div>
      </li>
    </ul>
  </div>
  <div style="clear: both;">&nbsp;</div>
</div>
<hr />
<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.	metamorph_drop
2.	metamorph_energybolt
3.	metamorph_exit
4.	metamorph_global
5.	metamorph_glowing
6.	metamorph_host
7.	metamorph_icybreeze
8.	metamorph_interiordesign
9.	metamorph_interstate60
10.	metamorph_lotr
11.	metamorph_lyrics_lt
12.	metamorph_melancholy_lt
13.	metamorph_mercuryworld
14.	metamorph_metaform
15.	metamorph_models
16.	metamorph_nuke
17.	metamorph_oldheavens
18.	metamorph_palmbeach
19.	metamorph_strongrey_lt
20.	metamorph_thames
21.	metamorph_transitional
22.	metamorph_tropic
23.	metamorph_truncata
24.	metamorph_tubes
25.	metamorph_tunel
26.	ablaze
27.	aboutfruts
28.	abrasive
29.	abscond
30.	abstraction
31.	acallia-development
32.	accomplishable
33.	actualbiz
34.	adhesive
35.	adios
36.	advantage
37.	aero-solutions
38.	aerolyk
39.	affection
40.	agency
41.	ahoy
42.	al-infolabs
43.	alexx-c
44.	alieninvasion
45.	alpha
46.	altered
47.	altruism
48.	ambiance
49.	amoreira
50.	angryhornet
51.	anibanner01
52.	AnotherSquare
53.	anther
54.	anthropod
55.	Antikoerperchen
56.	antiquity
57.	aphotic
58.	applique
59.	aprilshowers
60.	Arbenting-MinimalistResumeTemplate
61.	expanding-portfolio
62.	expertvision
63.	exploitable
64.	ezine02
65.	familiar
66.	favorite-cakes
67.	featherlight
68.	featuring
69.	femflex1
70.	fernando1
71.	fertilization
72.	Fibre
73.	fibreglass
74.	filaments
75.	findingpeace
76.	firerescuesquad
77.	fivestar
78.	Flair Template
79.	flair
80.	flan2
81.	flange
82.	flattering
83.	flavour
84.	fleur
85.	flightandfight
86.	fluidity
87.	fluidsolution
88.	flyover-builders
89.	WP-Bliss
90.	website-design
91.	website-traffic