thegathering : Holiday « Templates « HTML / CSS

thegathering
   

<!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>The Gathering</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
*/

* {
  margin: 0;
  padding: 0;
}

body {
  background: #0A0A0A url(thegathering-images/img1.jpg);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  color: #666666;
}

h1, h2, h3 {
  color: #CCCCCC;
}

h1 {
}

h2 {
}

h3 {
}

p, blockquote, ul, ol {
  margin-bottom: 20px;
  line-height: 1.6em;
}

p {
}

blockquote {
}

ul {
}

ol {
}

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

a:hover {
  border: none;
  color: #FF0000;
}

/* Wrapper */

#wrapper {
  background: url(thegathering-images/img2.jpg) repeat-x;
}

/* Header */

#header {
  width: 750px;
  height: 181px;
  margin: 0 auto;
  padding: 0 0 0 0;
  background: url(thegathering-images/img3.jpg);
}

#header h1, #header h2 {
  float: left;
}

#header h1 {
  padding: 150px 0 0 20px;
  letter-spacing: 3px;
  font-size: 136%;
}

#header h2 {
  padding: 153px 0 0 6px;
  letter-spacing: 2px;
  font-size: 107%;
}

#header a {
  border: none;
  text-transform: uppercase;
  text-decoration: none;
  color: #000000;
}

/* Menu */

#menu {
  width: 750px;
  height: 50px;
  margin: 0 auto;
  background: url(thegathering-images/img4.jpg) no-repeat;
}

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

#menu li {
  display: inline;
}

#menu a {
  display: block;
  float: left;
  height: 20px;
  padding: 10px 20px 0 20px;
  border: none;
  border-right: 1px solid #110F09;
  font-size: 85%;
  font-weight: bold;
  color: #F4D1C5;
}

#menu a:hover {
  color: #FFFFFF;
}

/* Page */

#page {
  width: 750px;
  margin: 0 auto;
  background: url(thegathering-images/img7.jpg) repeat-y 220px 0px;
}

/* Content */

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

#content h1, #content h2, #content h3 {
  margin-bottom: 20px;
}

#content h1 {
  font-size: 136%;
}

#content h2 {
  font-size: 107%;
}

#content h3 {
  font: 92%;
}

#content ul, #content ol {
  list-style-position: inside;
}

#content .boxed {
  float: left;
  width: 46%;
  padding-right: 2%;
}

#content .boxed h2 {
  padding: 5px 0;
  background: url(thegathering-images/img5.jpg) repeat-x left bottom;
}

/* Welcome */

#welcome {
}

/* Sample1 */

#sample {
}

/* Sample2 */

#sample2 {
}

/* Sidebar */

#sidebar {
  float: left;
  width: 180px;
  padding-left: 20px;
}

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

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

#sidebar li ul {
}

#sidebar li li {
  margin: 0;
  padding: 7px 20px;
  background: url(thegathering-images/img5.jpg) repeat-x left bottom;
}

#sidebar h2 {
  padding: 5px 20px;
  background: url(thegathering-images/img6.jpg);
  border-bottom: 1px solid #1C1C1C;
  font-size: 100%;
}

#sidebar h3 {
  font-size: 77%;
}

#sidebar p {
  margin: 0;
  line-height: normal;
}

#sidebar a {
  border: none;
}

/* Submenu */

#submenu {
}

/* News */

#news {
}

#news a {
  font-size: 85%;
}

/* Footer */

#footer {
  width: 750px;
  height: 50px;
  margin: 0 auto;
  padding: 30px 0 0 0;
  background: url(thegathering-images/img4.jpg) no-repeat;
}

#footer p {
  margin: 0;
  text-align: center;
  font-size: 77%;
}

</style>


</head>
<body>
<div id="wrapper">
  <div id="header">
    <h1><a href="http://www.free-css.com/">The Gathering</a></h1>
    <h2><a href="http://www.free-css.com/">By Free CSS Templates</a></h2>
  </div>
  <!-- end div#header -->
  <div id="menu">
    <ul>
      <li><a href="http://www.free-css.com/">Homepage</a></li>
      <li><a href="http://www.free-css.com/">About Us</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/">Contact Us</a></li>
    </ul>
  </div>
  <!-- end div#menu -->
  <div id="page">
    <div id="content">
      <div id="welcome">
        <h1>Welcome to The Gathering!</h1>
        <p><strong>The Gathering!</strong> is a free template from Free CSS Templates released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5 License</a>. The photo is from <a href="http://www.free-css.com/">PDPhoto.org</a>. You're free to use it for both commercial or personal use. I only ask that you link back to my site in some way. <em>Enjoy :)</em></p>
        <ol>
          <li><a href="http://www.free-css.com/">Integer sit amet pede vel arcu aliquet pretium.</a></li>
          <li><a href="http://www.free-css.com/">Pellentesque quis elit non lectus gravida blandit.</a></li>
          <li><a href="http://www.free-css.com/">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li>
          <li><a href="http://www.free-css.com/">Phasellus nec erat sit amet nibh pellentesque congue.</a></li>
          <li><a href="http://www.free-css.com/">Cras vitae metus aliquam risus pellentesque pharetra.</a></li>
          <li><a href="http://www.free-css.com/">Maecenas vitae orci vitae tellus feugiat eleifend.</a></li>
          <li><a href="http://www.free-css.com/">Etiam ac tortor eu metus euismod lobortis.</a></li>
          <li><a href="http://www.free-css.com/">Duis non ante in metus commodo euismod lobortis.</a></li>
        </ol>
      </div>
      <!-- end div#welcome -->
      <div id="sample1" class="boxed">
        <h2>Sample One</h2>
        <ul>
          <li><a href="http://www.free-css.com/">Ut semper vestibulum est</a></li>
          <li><a href="http://www.free-css.com/">Vestibulum luctus venenatis dui</a></li>
          <li><a href="http://www.free-css.com/">Etiam malesuada rutrum enim</a></li>
          <li><a href="http://www.free-css.com/">Aenean elementum facilisis ligula</a></li>
          <li><a href="http://www.free-css.com/">Ut tincidunt elit vitae augue</a></li>
          <li><a href="http://www.free-css.com/">Sed quis odio sagittis leo vehicula</a></li>
        </ul>
      </div>
      <!-- end div#sample1 -->
      <div id="sample2" class="boxed">
        <h2>Sample Two</h2>
        <p>Quisque dictum integer nisl risus, sagittis convallis, rutrum id, and nibh:</p>
        <ul>
          <li><a href="http://www.free-css.com/">Integer rutrum nisl in mi</a></li>
          <li><a href="http://www.free-css.com/">Etiam malesuada rutrum enim</a></li>
          <li><a href="http://www.free-css.com/">Aenean elementum facilisis ligula</a></li>
        </ul>
      </div>
      <!-- end div#sample2 -->
    </div>
    <!-- end div#content -->
    <div id="sidebar">
      <ul>
        <li id="submenu">
          <h2>Other Links</h2>
          <ul>
            <li><a href="http://www.free-css.com/">Semper vestibulum</a></li>
            <li><a href="http://www.free-css.com/">Vestibulum luctus</a></li>
            <li><a href="http://www.free-css.com/">Integer rutrum</a></li>
            <li><a href="http://www.free-css.com/">Etiam malesuada</a></li>
            <li><a href="http://www.free-css.com/">Elementum facilisis</a></li>
            <li><a href="http://www.free-css.com/">Ut tincidunt</a></li>
            <li><a href="http://www.free-css.com/">Odio sagittis</a></li>
          </ul>
        </li>
        <!-- end li#submenu -->
        <li id="news">
          <h2>News &amp; Updates</h2>
          <ul>
            <li>
              <h3>25th May</h3>
              <p><a href="http://www.free-css.com/">Pellentesque quis elit non lectus gravida blandit&hellip;</a></p>
            </li>
            <li>
              <h3>23rd May</h3>
              <p><a href="http://www.free-css.com/">Lorem ipsum dolor sit amet, consectetuer adipiscing&hellip;</a></p>
            </li>
            <li>
              <h3>21st May</h3>
              <p><a href="http://www.free-css.com/">Phasellus nec erat sit amet nibh pellentesque congue&hellip;</a></p>
            </li>
            <li>
              <h3>17th May</h3>
              <p><a href="http://www.free-css.com/">Maecenas vitae orci vitae tellus feugiat eleifend&hellip;</a></p>
            </li>
          </ul>
        </li>
        <!-- end li#news -->
      </ul>
    </div>
    <!-- end div#sidebar -->
    <div style="clear: both; height: 1px"></div>
  </div>
  <!-- end div#page -->
  <div id="footer">
    <p id="legal">Copyright &copy; 2007 The Gathering. All Rights Reserved. Designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
    <p id="links"><a href="http://www.free-css.com/">Privacy Policy</a> | <a href="http://www.free-css.com/">Terms of Use</a></p>
  </div>
  <!-- end div#footer -->
</div>
<!-- end div#wrapper -->
</body>
</html>
Related examples in the same category

1.	metamorph_helloween
2.	Christmas-2008
3.	christmas
4.	metamorph_diving
5.	metamorph_summertime
6.	metamorph_valentine
7.	metamorph_happyness
8.	happy-holidays
9.	metamorph_partytime
10.	metamorph_peacefull
11.	feel-the-music
12.	partytime
13.	Romantic
14.	theharvest
15.	timetorest
16.	treasure-hunters
17.	vacation
18.	happyeaster
19.	holiday 2
20.	holidayseason
21.	harvest
22.	harvestfield
23.	high5
24.	hotspring