Website templates

lazydays/css/html.css

@@ -0,0 +1,252 @@
+/**************************************************************
+   AUTHOR:  Pat Heard (fullahead.org)
+   DATE:    2006.03.19
+   PURPOSE: Styles the html elements
+ **************************************************************/
+
+html {
+  height: 100%;
+}
+
+body {
+  height: 100%;
+
+  margin: 0;
+  padding: 0;
+  text-align: center;
+
+  font: 400 0.8em verdana, arial, sans-serif;
+  line-height: 170%;
+
+  background: #666 url(../images/bg/header.jpg) repeat-x top left;
+  color: #EEE;
+}
+
+h1 {   
+  clear: both;
+  font: 700 2.5em "trebuchet ms", serif;
+  color: #FFF;
+}
+
+h2 {
+  font: 400 1.5em "trebuchet ms", serif;
+  color: #9FF3FF;
+}
+
+h2 a {
+  color: #29E3FF;
+}
+
+h2 a:hover {
+  color: #FFF;
+}
+
+h3 {
+  font: 400 1.3em "trebuchet ms", serif;
+  color: #F8D766;
+}
+
+h4 {
+  font: 700 1.2em "trebuchet ms", serif;
+  color: #F39F01;
+}
+
+h5 {
+  font: 700 1.1em "trebuchet ms", serif;
+  color: #F17400;
+}
+
+h6 {
+  font: 700 1em "trebuchet ms", serif;
+  color: #FF4B33;
+}
+
+
+h1, h2, h3, h4, h5, h6, p, dl {
+  margin: 0;
+  padding: 10px 15px;
+}
+
+/* Done so the leftmost column aligns properly with the header.
+   If the leftmost column has class gradient applied to it, 
+   this class isn't required. */
+.leftColumn h1,
+.leftColumn h2, 
+.leftColumn h3,
+.leftColumn h4,
+.leftColumn h5,
+.leftColumn h6,
+.leftColumn p,
+.leftColumn dl {
+  padding-left: 0;
+}
+
+a {
+  color: #8BE6FA;
+}
+
+/* Uncomment this if you would like a visited link style 
+a:visited {
+  text-decoration: line-through;
+} */
+
+a:hover {
+  color: #FFF;
+}
+
+b {
+  color: #FFF;
+}
+
+ol, ul {
+  margin: 10px 30px;
+  padding: 0 30px;
+}
+
+ol {
+  color: #FC0;
+}
+
+ol span {
+  color: #EEE;
+}
+
+ul {
+  list-style-image: url(../images/bg/bullet.gif);
+}
+
+del {
+  color: #AAA;
+}
+
+code {
+  margin: 10px 15px;
+  padding: 10px;
+  display: block;
+  overflow: auto;
+  
+  font: 400 1em courier, monospace;
+  line-height: 120%;
+  white-space: pre;
+  
+  background: #444;
+}
+
+.leftColumn code {
+  margin-left: 0;
+}
+
+acronym {
+  cursor: help;
+  border-bottom: 1px solid #777;
+}
+
+dt {
+  font-weight: bold;
+  color: #FFB323;
+}
+
+dd {
+  margin-left: 0;
+  padding-left: 45px; 
+}
+
+
+
+
+/**************************************************************
+   Form Elements
+ **************************************************************/
+
+label {
+  display: block;
+}
+
+input,
+textarea,
+select {
+  padding: 2px;
+  font: 400 1em verdana, sans-serif;
+  color: #444;
+  background: #EEE;
+  border: 1px solid #444;
+}
+
+input:focus,
+input:hover,
+textarea:focus,
+textarea:hover,
+select:focus,
+select:hover {
+  color: #000;
+  background: #E4F7FA;
+  border: 1px solid #00DFFF;
+}
+
+input.button {
+  padding: 2px 5px;
+
+  font: 400 1.1em "trebuchet ms", serif;
+
+  color: #555;
+  background: #9FF3FF;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #FFF #00DFFF #00DFFF #FFF;
+}
+
+
+
+
+
+/**************************************************************
+   Blockquote and included icons
+ **************************************************************/
+
+blockquote {
+  margin: 10px 15px;
+  padding-left: 27px;
+  
+  background-color: #444;  
+  background-image: url(../images/icons/quote.gif);
+  background-repeat: no-repeat;
+  background-position: 5px 50%;  
+}
+
+blockquote.exclamation {
+  background-image: url(../images/icons/exclamation.gif);
+}
+
+blockquote.stop {
+  background-image: url(../images/icons/stop.gif);
+}
+
+blockquote.go {
+  background-image: url(../images/icons/go.gif);
+}
+
+
+
+
+
+/**************************************************************
+   Images
+ **************************************************************/
+
+img.floatRight {
+  margin: 5px 0px 10px 15px;  
+}
+
+img.floatLeft {
+  margin: 5px 15px 10px 0px;
+}
+
+a img {  
+  border: 2px solid #8BE6FA;
+}
+
+a:hover img {  
+  /* Fixes IE bug - IE doesn't correctly apply the style on a:hover so need to mask it */
+  border: 2px solid #FFF !important;
+  border: 2px solid #8BE6FA;
+}

lazydays/css/layout.css

@@ -0,0 +1,346 @@
+/**************************************************************
+   AUTHOR:  Pat Heard (fullahead.org)
+   DATE:    2006.03.19
+   PURPOSE: Controls the layout of the site and styles
+            the menus
+ **************************************************************/
+
+
+
+/**************************************************************
+   #content: Sets the width of the site.  Make changes here
+             to convert to a fixed width site.
+ **************************************************************/
+
+#content {  
+  height: 100%;
+  min-height: 100%;
+
+  text-align: left;
+}
+
+#content,
+#width {
+  /* max-width hack for IE since it doesn't understand the valid css property */
+  width: expression(document.body.clientWidth > 1000 ? "1000px" : "94%");  
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+#content[id],
+#width[id] {
+  width: 94%;
+  height: auto;
+}
+
+
+
+
+/**************************************************************
+   #header: Holds the site title and header images
+ **************************************************************/
+
+#header {
+  position: relative;
+  height: 193px;
+}
+
+/* Holds the site title and subtitle */
+#header #title {
+  position: absolute;
+  z-index: 3;
+  top: 10px;
+  left: 130px;
+
+  padding: 5px;
+  text-align: right;
+}
+
+#header h1 {
+  margin: 0;
+  padding: 0;
+
+  font: 700 4em "trebuchet ms", serif;
+  letter-spacing: -3px;
+  text-transform: lowercase;
+  color: #FFF;
+}
+
+#header h2 {
+  position: absolute;
+  top: 10px;
+  right: 5px;
+
+  margin: 0;
+  padding: 0;
+
+  font: 700 1em "trebuchet ms", serif;
+  text-transform: lowercase;
+  color: #00F0EC;
+}
+
+
+/* Sets where the header images will go */
+#header img.left {
+  position: absolute;
+  z-index: 1;
+
+  top: 0;
+  left: 0;
+}
+
+#header img.right {
+  position: absolute;
+  z-index: 0;
+
+  top: 0;
+  right: 0;
+}
+
+#header img.balloons {
+  position: absolute;
+  z-index: 2;
+
+  top: 70px;
+  right: 400px;
+}
+
+
+
+/**************************************************************
+   #mainMenu: The top level site menu
+ **************************************************************/
+
+#mainMenu { 
+  float: left;
+  width: 100%;
+  clear: both;  
+}
+
+#mainMenu ul {
+  margin: 0;
+  padding: 0;
+}
+
+#mainMenu li {
+  display: inline;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+#mainMenu li a {
+  float: left;
+  margin: 0 2px;
+  padding: 5px 0.5em;
+
+  font: 400 1.6em "trebuchet ms", serif;
+  text-decoration: none;
+  text-transform: lowercase;
+  color: #FFF;
+}
+
+#mainMenu li a:hover,
+#mainMenu li a.here {
+  color: #65EBFF;
+  border-top: 5px solid #000;
+}
+
+#mainMenu li a.last {
+  margin-right: 0;
+}
+
+
+
+
+/**************************************************************
+   .sideMenu: The side bar menu
+ **************************************************************/
+
+ul.sideMenu {
+  margin: 0;
+  padding: 0;
+}
+
+.sideMenu li {
+  display: inline;
+  
+  /* Needed since IE fails when you give it list-style: none; */  
+  list-style-image: url(foo.gif);
+  font: 400 1.3em "trebuchet ms", serif;
+}
+
+.sideMenu li a {
+  display: block;
+  margin: 0.2em 0;
+  padding: 3px 5px;    
+  
+  text-decoration: none;
+  color: #FFF;
+} 
+
+.sideMenu li a:hover {
+  color: #65EBFF;
+  background: #5F5F5F;
+}
+
+/* Active menu item */
+.sideMenu li.here {
+  display: block;  
+  padding: 5px;
+  color: #65EBFF;
+  background: #555;
+}
+
+/* Submenu of active menu item */
+.sideMenu li.here ul {
+  margin: 0;
+  padding: 0;
+}
+
+.sideMenu li.here ul li a {
+  padding-left: 35px;
+  font: 400 0.55em verdana, arial, sans-serif; 
+  color: #FFF;  
+  background: url(../images/bg/bullet.gif) no-repeat 10px 0px;
+}
+
+.sideMenu li.here ul li a:hover {
+  color: #9FF3FF;
+  background: #5F5F5F url(../images/bg/bullet.gif) no-repeat 10px 0px;
+}
+
+
+
+/**************************************************************
+   #page: Holds the main page content.
+ **************************************************************/
+
+#page {
+  float: left;
+  width: 100%;
+  clear: both;
+  
+  padding-bottom: 4em;
+}
+
+
+
+
+/**************************************************************
+   #footer: The page footer - will stick to the bottom if not
+            enough content.
+ **************************************************************/
+
+#footer {
+  float: left;
+  width: 100%;
+  clear: both;
+  
+  margin-top: -3.8em;
+  background: #000 url(../images/bg/footer.jpg) repeat-x top left;
+}
+
+/* Sets the width of the footer content */
+#footer #width {
+  position: relative;
+  z-index: 3;
+  font-size: 0.85em;
+  padding-top: 27px;
+}
+
+
+
+/**************************************************************
+   Width classes used by the site columns
+ **************************************************************/
+
+.width100 {
+  width: 100%;
+}
+
+.width75 {
+  width: 74%;
+}
+
+.width50 {
+  width: 49.7%;
+}
+
+.width33 {
+  width: 32.7%;
+}
+
+.width25 {
+  width: 24.7%;
+}
+
+
+
+/**************************************************************
+   Alignment classes
+ **************************************************************/
+
+.floatLeft {
+  float: left;
+}
+
+.floatRight {
+  float: right;
+}
+
+.alignLeft {
+  text-align: left;
+}
+
+.alignRight {
+  text-align: right;
+}
+
+
+
+/**************************************************************
+   Generic display classes
+ **************************************************************/
+
+.clear {
+  clear: both;
+}
+
+.block {
+  display: block;
+}
+
+.small {
+  font-size: 0.8em;
+}
+
+.green {
+  color: #A1FF45;
+}
+
+.red {
+  color: #EA1B00;
+}
+
+.grey {
+  color: #666;
+}
+
+.grey a {
+  color: #999;
+}
+
+.grey a:hover {
+  color: #EEE;
+}
+
+.gradient {
+  margin-bottom: 2em;
+  background: #555 url(../images/bg/gradient.jpg) repeat-x bottom left; 
+}
+
+
+
+
+

lazydays/css/print.css

@@ -0,0 +1,63 @@
+/**************************************************************
+   AUTHOR:  Pat Heard (fullahead.org)
+   DATE:    2006.03.19
+   PURPOSE: Styles the page for print.  Techniques adopted from
+            http://www.alistapart.com/articles/goingtoprint/
+ **************************************************************/
+
+body {
+  font: 400 12pt verdana, arial, sans-serif;
+  color: #000;
+  background: #FFF;
+}
+
+h1 {
+  margin-top: 30px;
+  font-size: 18pt;
+  border-bottom: 1px solid #999;
+}
+
+h2 {
+  font-size: 16pt;
+}
+
+h3 {
+  font-size: 14pt;
+}
+
+h4, h5, h6 {
+  font-size: 12pt;
+}
+
+acronym {
+  border: 0;
+}
+
+a {
+  color: #00F;
+}
+
+/* Prints the URL after a link in CSS2 supporting browsers */
+a:link:after, 
+a:visited:after {
+   content: " (" attr(href) ") ";
+   font-size: 90%;
+}
+
+
+/* Don't display these elements since they're not useful on paper */
+#header,
+#mainMenu,
+.sideMenu,
+#footer {
+  display: none;
+}
+
+#content {
+  width: auto;
+  margin: 0 8%;
+  padding: 0;
+}
+
+
+

lazydays/help.html

@@ -0,0 +1,238 @@
+<!--
+ ____________________________________________________________
+|                                                            |
+|    DESIGN + Pat Heard { http://fullahead.org }             |
+|      DATE + 2006.03.19                                     |
+| COPYRIGHT + Free use if this notice is left in place       |
+|____________________________________________________________|
+
+-->
+
+<!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" xml:lang="en" lang="en-AU">
+
+<head>
+
+
+  <title>lazy days ( help )</title>
+
+  <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
+  <meta name="author" content="fullahead.org" />
+  <meta name="keywords" content="Open Web Design, OWD, Free Web Template, Lazy Days, Fullahead" />
+  <meta name="description" content="A free web template designed by Fullahead.org and hosted on OpenWebDesign.org" />
+  <meta name="robots" content="index, follow, noarchive" />
+  <meta name="googlebot" content="noarchive" />
+
+  <link rel="stylesheet" type="text/css" href="css/html.css" media="screen, projection, tv " />
+  <link rel="stylesheet" type="text/css" href="css/layout.css" media="screen, projection, tv" />
+  <link rel="stylesheet" type="text/css" href="css/print.css" media="print" />
+
+</head>
+
+
+<body>
+
+<!-- CONTENT: Holds all site content except for the footer.  This is what causes the footer to stick to the bottom -->
+<div id="content">
+
+
+
+  <!-- HEADER: Holds title, subtitle and header images -->
+  <div id="header">
+
+    <div id="title">
+      <h1>Lazy Days</h1>
+      <h2>in the city</h2>
+    </div>
+
+    <img src="images/bg/balloons.gif" alt="balloons" class="balloons" />
+    <img src="images/bg/header_left.jpg" alt="left slice" class="left" />
+    <img src="images/bg/header_right.jpg" alt="right slice" class="right" />
+
+  </div>
+
+
+
+  <!-- MAIN MENU: Top horizontal menu of the site.  Use class="here" to turn the current page tab on -->
+  <div id="mainMenu">
+    <ul class="floatRight">
+      <li><a href="index.html" title="Introduction">Intro</a></li>
+      <li><a href="help.html" title="Learn how to use the template" class="here">Help</a></li>
+      <li><a href="tags.html" title="View the styled tags">Tags</a></li>
+      <li><a href="print.html" title="View the print layout">Print</a></li>
+      <li><a href="http://fullahead.org/contact.html" title="Get in touch" class="last">Mail</a></li>
+    </ul>
+  </div>
+
+  <!-- PAGE CONTENT BEGINS: This is where you would define the columns (number, width and alignment) -->
+  <div id="page">
+
+    <div class="width25 floatLeft leftColumn">
+
+      <h1>Help</h1>
+
+      <ul class="sideMenu">
+        <li class="here">
+          Fluid Columns
+          <ul>
+            <li><a href="#customize" title="Jump to section">How to Customize</a></li>
+            <li><a href="#gradients" title="Jump to section">Gradients</a></li>
+            <li><a href="#padding" title="Jump to section">Padding and Margins</a></li>
+            <li><a href="#images" title="Jump to section">Images</a></li>
+            <li><a href="#floating" title="Jump to section">Floating</a></li>
+            <li><a href="#width" title="Jump to section">Fluid vs. Fixed</a></li>
+          </ul>
+        </li>
+        <li><a href="http://fullahead.org" title="Goto Fullahead">Fullahead</a></li>
+        <li><a href="http://threetree.net" title="Goto Threetree">ThreeTree</a></li>
+      </ul>
+
+      <p>
+        If you still have questions after reading this, feel free to <a href="http://fullahead.org/contact.html" title="Fullahead contact form">contact me</a>.  I can't promise I'll answer you right away, but I will get back to you.
+      </p>
+
+    </div>
+
+    <div class="width75 floatRight">
+
+      <div class="gradient">
+
+        <a name="customize"></a>
+
+        <h1>Fluid Columns</h1>
+        <h2>How To Customize the Columns</h2>
+
+        <p>
+          There are 5 different widths defined in the style sheet that allow you to customize how many columns the template has:
+        </p>
+
+        <ol>
+          <li><span><b>width25</b> 25 percent width</span></li>
+          <li><span><b>width33</b> 33 percent width</span></li>
+          <li><span><b>width50</b> 50 percent width</span></li>
+          <li><span><b>width75</b> 75 percent width</span></li>
+          <li><span><b>width100</b> 100 percent width</span></li>
+        </ol>
+
+        <p>
+          To use them, create a &lt;div&gt; tag and apply the class.  To position the columns, use the <i>floatLeft</i> and <i>floatRight</i> classes.  This is possible because you can stack CSS classes on an element.  Follow <a href="tags.html#widthDemo" title="View width demo">this link</a> to see examples.
+        </p>
+
+        <blockquote class="stop">
+          <p>
+            If you want columns to be side by side, make sure the widths added up don't go over 100 percent.  If they do, the <b>rightmost column</b> will be pushed down.
+          </p>
+        </blockquote>
+
+        <p>
+          Below is an example of the skeleton code used to generate this layout.  Notice the <i>leftColum</i> class used on the leftmost column.  This is to make the column line up properly with the header.  If you are using a <i>gradient</i> on this column, you won't need to use this class.
+        </p>
+
+        <code>&lt;div class="width25 floatLeft leftColumn"&gt;<br/>  Left Column content<br/>&lt;/div&gt;<br/><br/>&lt;div class="width75 floatRight"&gt;<br/>  Right Column content<br/>&lt;/div&gt;</code>
+
+
+        <a name="gradients"></a>
+
+        <h2>Gradients</h2>
+
+        <p>
+          The <i>gradient</i> class can be used in any column.  It will create the grey fade you can see in this column.  Using it is very straightfoward:
+        </p>
+
+        <code>&lt;div class="gradient"&gt;<br/>  Column content<br/>&lt;/div&gt;</code>
+
+      </div>
+
+
+
+
+      <div class="gradient">
+
+        <a name="padding"></a>
+
+        <h1>Alignment</h1>
+        <h2>Padding and Margins</h2>
+
+        <p>
+          All padding and margins are applied to the html elements rather than their containers.  This was done for two reasons:
+        </p>
+
+        <ol>
+          <li><span>Dodge the difference in how browsers apply padding and margins.  Since padding and margins are applied to children, and not the containers, all browsers consistenly draw the containers at the same width.</span></li>
+          <li><span>Give elements the same alignment with and without the <i>gradient</i> containers.</span></li>
+        </ol>
+
+
+        <a name="images"></a>
+
+        <h2>Images</h2>
+        <p>
+          <a href="http://www.mozilla.com/firefox/" title="Get Firefox"><img src="images/firefox.jpg" alt="pic" class="floatRight"/></a>
+          Images are fully supported using the <i>floatLeft</i> and <i>floatRight</i> classes.  Just apply one of them to the image you want to position.  Images that have link tags around them will also have a nifty rollover effect, as long as you're using a standards complients browser.  If you're not, well then no rollover effect for you.
+        </p>
+
+        <a name="floating"></a>
+
+        <h2>Floating</h2>
+        <p>
+          The <i>floatLeft</i> and <i>floatRight</i> classes aren't just for images and columns.  You can also use them on any element.  Try it on the main menu to have it align to the left or right.
+        </p>
+
+      </div>
+
+
+
+      <div class="gradient">
+
+        <a name="width"></a>
+
+        <h1>Template Width</h1>
+        <h2>Fluid vs. Fixed</h2>
+
+        <p>
+          Out of the box, this template fills 94% of the screen width up to a maximum of 1000 pixels.  This was done for readability at high resolutions.  If you'd like to change this template's width, or make it entirely fixed width, you only need to change the following CSS:
+        </p>
+
+        <code>#content,<br/>#width {<br/>  <span class="green">/* max-width hack for IE since it doesn't understand the valid css property */</span><br/>  width: expression(document.body.clientWidth > 1000 ? "1000px" : "94%");<br/>  max-width: 1000px;<br/>  margin: 0 auto;<br/>}<br/><br/>#content[id],<br/>#width[id] {<br/>  width: 94%;<br/>  height: auto;<br/>}</code>
+
+        <p>
+          The values you'll want to change are the <b>1000</b> and <b>94%</b>.  The width: expression bit is specific to IE, while the rest is for all compliant browsers.  Here's an example of fixed width:
+        </p>
+
+        <code>#content,<br/>#width {<br/>  width: 770px;  <br/>  margin: 0 auto;<br/>}<br/><br/>#content[id],<br/>#width[id] {<br/>  height: auto;<br/>}</code>
+
+      </div>
+
+    </div>
+
+  </div>
+
+</div>
+
+
+<!-- FOOTER: Site footer for links, copyright, etc. -->
+<div id="footer">
+
+  <div id="width">
+    <span class="floatLeft">
+      design <a href="http://fullahead.org" title="Goto Fullahead">Fullahead</a> <span class="grey">|</span>
+      valid <a href="http://validator.w3.org/check?uri=referer" title="Validate XHTML">XHTML</a> <span class="grey">|</span>
+      should be valid <a href="http://jigsaw.w3.org/css-validator" title="Validate CSS">CSS</a>
+    </span>
+
+    <span class="floatRight">
+      <a href="index.html" title="Introduction">intro</a> <span class="grey">|</span>
+      <a href="help.html" title="Learn how to use the template">help</a> <span class="grey">|</span>
+      <a href="tags.html" title="View the styled tags">tags</a> <span class="grey">|</span>
+      <a href="print.html" title="View the print layout">print</a> <span class="grey">|</span>
+      <a href="http://fullahead.org/contact.html" title="Get in touch">mail</a>
+    </span>
+  </div>
+
+</div>
+
+</body>
+
+</html>

lazydays/index.html

@@ -0,0 +1,217 @@
+<!--
+ ____________________________________________________________
+|                                                            |
+|    DESIGN + Pat Heard { http://fullahead.org }             |
+|      DATE + 2006.03.19                                     |
+| COPYRIGHT + Free use if this notice is left in place       |
+|____________________________________________________________|
+
+-->
+
+<!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" xml:lang="en" lang="en-AU">
+
+<head>
+
+
+  <title>lazy days ( intro )</title>
+
+  <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
+  <meta name="author" content="fullahead.org" />
+  <meta name="keywords" content="Open Web Design, OWD, Free Web Template, Lazy Days, Fullahead" />
+  <meta name="description" content="A free web template designed by Fullahead.org and hosted on OpenWebDesign.org" />
+  <meta name="robots" content="index, follow, noarchive" />
+  <meta name="googlebot" content="noarchive" />
+
+  <link rel="stylesheet" type="text/css" href="css/html.css" media="screen, projection, tv " />
+  <link rel="stylesheet" type="text/css" href="css/layout.css" media="screen, projection, tv" />
+  <link rel="stylesheet" type="text/css" href="css/print.css" media="print" />
+
+</head>
+
+
+<body>
+
+<!-- CONTENT: Holds all site content except for the footer.  This is what causes the footer to stick to the bottom -->
+<div id="content">
+
+
+
+  <!-- HEADER: Holds title, subtitle and header images -->
+  <div id="header"> 
+    <div id="title"> 
+      <h1>Lazy Days</h1>
+      <h2>in the city</h2>
+    </div>
+    <img src="images/bg/balloons.gif" alt="balloons" class="balloons" /> <img src="images/bg/header_left.jpg" alt="left slice" class="left" /> 
+    <img src="images/bg/header_right.jpg" alt="right slice" class="right" /> </div>
+
+
+
+  <!-- MAIN MENU: Top horizontal menu of the site.  Use class="here" to turn the current page tab on -->
+  <div id="mainMenu">
+    <ul class="floatRight">
+      <li><a href="index.html" title="Introduction" class="here">Intro</a></li>
+      <li><a href="help.html" title="Learn how to use the template">Help</a></li>
+      <li><a href="tags.html" title="View the styled tags">Tags</a></li>
+      <li><a href="print.html" title="View the print layout">Print</a></li>
+      <li><a href="http://fullahead.org/contact.html" title="Get in touch" class="last">Mail</a></li>
+    </ul>
+  </div>
+
+
+
+
+  <!-- PAGE CONTENT BEGINS: This is where you would define the columns (number, width and alignment) -->
+  <div id="page">
+
+
+    <!-- 25 percent width column, aligned to the left -->
+    <div class="width25 floatLeft leftColumn">
+
+      <h1>Intro</h1>
+
+      <ul class="sideMenu">
+        <li class="here">
+          Dynamic Template
+          <ul>
+            <li><a href="#fluidity" title="Jump to section">Book of Fluidity</a></li>
+            <li><a href="#coding" title="Jump to section">Coding</a></li>
+          </ul>
+        </li>
+        <li><a href="http://fullahead.org" title="Goto Fullahead">Fullahead</a></li>
+        <li><a href="http://threetree.net" title="Goto Threetree">ThreeTree</a></li>
+      </ul>
+
+      <p>
+        This sidebar can be used to jump to sections within the page, or other sub pages of the active tab.
+      </p>
+
+      <p>
+        Using this approach, you shouldn't need breadcrumbs since you've provided your visitor with a <b>visual cue</b> to where they are in the site.
+      </p>
+
+      <p>
+        To <b>learn more</b> about how to use this template, follow the <a href="help.html" title="View help">help</a> link.  You can also see the styled <a href="tags.html" title="View tags">tags</a> and the <a href="print.html" title="View print layout">print</a> layout version.
+      </p>
+
+    </div>
+
+
+
+
+    <!-- 75 percent width column, aligned to the right -->
+    <div class="width75 floatRight">
+
+
+      <!-- Gives the gradient block -->
+      <div class="gradient">
+
+        <a name="fluidity"></a>
+
+        <h1>Dynamic Template</h1>
+        <h2>Taken from the book of <a href="http://openwebdesign.org/viewdesign.phtml?id=2514" title="View template">fluidity</a>, this template is exceptionally easy to customize using re-useable CSS classes.</h2>
+
+        <p>
+          This template quickly and easily allows for one, two, three or even four column layouts.  This is done with simple <acronym title="Cascading Style Sheet">CSS</acronym> classes that can be used over and over again.  To learn more about it, follow <a href="help.html" title="View help">this link</a>.  The template itself is valid <acronym title="eXtensible Hypertext Markup Language">XTHML</acronym> 1.0 strict and <i>almost</i> valid CSS.  The almost is added in there because CSS expressions were used.  You can read more about that <a href="#expressions" title="Read about CSS expressions">here</a>.
+        </p>
+
+        <blockquote class="go">
+          <p>
+            This template doesn't use fixed columns.  With a few simple CSS classes you can quickly change the appearance.  <a href="help.html" title="View help">Click here</a> to learn how.
+          </p>
+        </blockquote>
+
+        <p>
+          Since this template is fluid width and the font sizes are defined relatively, you can <b>change font size without breaking the layout</b>.  The fluid width also means that people with higher resolutions aren't constrained.
+        </p>
+
+        <p>
+          Total size of the images used is just under 25 <acronym title="kilobytes">kb</acronym>, so that's good news to all the dial-up users.  The code behind the template is semantically written which means that it is widely supported.  As for the browsers, it displays consistently in the usual suspects:
+        </p>
+
+
+        <ul>
+          <li><b>Firefox</b> of course</li>
+          <li><b>Opera</b> sure, why not</li>
+          <li><b>Netscape</b> like firefox's less attractive cousin at the dance</li>
+          <li><b>Internet Explorer</b> ...</li>
+          <li><b>Safari</b> cause macs are computers too</li>
+        </ul>
+
+      </div>
+
+
+
+
+
+      <div class="gradient">
+
+        <a name="coding"></a>
+
+        <h1>Coding</h1>
+        <h2>Image Alignment and The Header</h2>
+
+        <p>
+          <a href="http://www.mozilla.com/firefox/" title="Get Firefox"><img src="images/firefox.jpg" alt="pic" class="floatLeft"/></a>
+          Images are fully supported using the <i>floatLeft</i> and <i>floatRight</i> classes.  Just apply one of them to the image you want to position.  Images that have link tags around them will also have a nifty rollover effect, as long as you're using a standards complients browser.  If you're not, well then no rollover effect for you.
+        </p>
+
+        <p>
+          The site header images are <a href="images/bg/header_left.jpg" title="View slice one">two</a> <a href="images/bg/header_right.jpg" title="View slice two">slices</a> and a repeated background.  Using the same approach, and a little bit of photoshop, you should be able to easily replace them.  However, since they were created by me, you're welcome to use them in any projects you might like.
+        </p>
+
+        <h2>The Footer</h2>
+        <p>
+          A variation on the <a href="http://www.themaninblue.com/experiment/footerStickAlt/" title="View footerStickAlt code">footerStickAlt</a> technique is used to force the site footer to the bottom of the page if there isn't enough content to push it down.  This means your template will always look tidy and you won't have to worry about a lonely footer, hanging out halfway up your page.
+        </p>
+
+        <a name="expressions"></a>
+
+        <h2>Readability using Maximum Width</h2>
+        <p>
+          To improve readability of this template (since it is fluid), the width is capped at 1000 pixels.  This seems like a pretty reasonable thing to do and that's why CSS has thoughtfully included the max-width property.  Unfortunately, IE decided it didn't need no stinkin' max-width, so a CSS expression was needed.
+        </p>
+
+        <blockquote class="exclamation">
+          <p>
+            A CSS expression is like a snippet of javascript code that runs in your style sheet.  It's invalid CSS, but only IE pays any attention to it.
+          </p>
+        </blockquote>
+
+        <p>
+          If you're concerned about having valid CSS, take out the expression.  It won't ruin the template in IE, it just means that the content will expand to 100% of the screen width.  All other browsers will behave.
+        </p>
+
+      </div>
+
+    </div>
+
+  </div>
+
+</div>
+
+
+<!-- FOOTER: Site footer for links, copyright, etc. -->
+<div id="footer">
+
+  <div id="width"> <span class="floatLeft"> design <a href="http://fullahead.org" title="Goto Fullahead">Fullahead</a> 
+    <span class="grey">|</span> valid <a href="http://validator.w3.org/check?uri=referer" title="Validate XHTML">XHTML</a> 
+    <span class="grey">|</span> should be valid <a href="http://jigsaw.w3.org/css-validator" title="Validate CSS">CSS</a> 
+    </span> <span class="floatRight"> <a href="index.html" title="Introduction">intro</a> 
+    <span class="grey">|</span> <a href="help.html" title="Learn how to use the template">help</a> 
+    <span class="grey">|</span> <a href="tags.html" title="View the styled tags">tags</a> 
+    <span class="grey">|</span> <a href="print.html" title="View the print layout">print</a> 
+    <span class="grey">|</span> <a href="http://fullahead.org/contact.html" title="Get in touch">mail</a> 
+	<span class="grey">|</span> 
+<!--This theme is free for distriubtion,  so long as  link to openwebdesing.org and florida-villa.com  stay on the theme-->
+Courtesy  <a href="http://www.openwebdesign.org" target="_blank">Open Web Design</a><a href="http://www.dubaiapartments.biz" target="_blank"><img src="spacer.gif" width="5" height="5" border="0"/></a>Thanks to <a href="http://www.florida-villa.com" target="_blank">Florida Vacation Homes</a>
+    </span> </div>
+
+</div>
+
+</body>
+
+</html>

lazydays/license.txt

@@ -0,0 +1 @@
+This work is public domain.

lazydays/print.html

@@ -0,0 +1,223 @@
+<!--
+ ____________________________________________________________
+|                                                            |
+|    DESIGN + Pat Heard { http://fullahead.org }             |
+|      DATE + 2006.03.19                                     |
+| COPYRIGHT + Free use if this notice is left in place       |
+|____________________________________________________________|
+
+-->
+
+<!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" xml:lang="en" lang="en-AU">
+
+<head>
+
+
+  <title>lazy days ( print )</title>
+
+  <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
+  <meta name="author" content="fullahead.org" />
+  <meta name="keywords" content="Open Web Design, OWD, Free Web Template, Lazy Days, Fullahead" />
+  <meta name="description" content="A free web template designed by Fullahead.org and hosted on OpenWebDesign.org" />
+  <meta name="robots" content="index, follow, noarchive" />
+  <meta name="googlebot" content="noarchive" />
+
+  <link rel="stylesheet" type="text/css" href="css/print.css" media="screen" />
+
+</head>
+
+
+<body>
+
+<!-- CONTENT: Holds all site content except for the footer.  This is what causes the footer to stick to the bottom -->
+<div id="content">
+
+
+
+  <!-- HEADER: Holds title, subtitle and header images -->
+  <div id="header">
+
+    <div id="title">
+      <h1>Lazy Days</h1>
+      <h2>in the city</h2>
+    </div>
+
+    <img src="images/bg/balloons.gif" alt="balloons" class="balloons" />
+    <img src="images/bg/header_left.jpg" alt="left slice" class="left" />
+    <img src="images/bg/header_right.jpg" alt="right slice" class="right" />
+
+  </div>
+
+
+
+  <!-- MAIN MENU: Top horizontal menu of the site.  Use class="here" to turn the current page tab on -->
+  <div id="mainMenu">
+    <ul class="floatRight">
+      <li><a href="index.html" title="Introduction">Intro</a></li>
+      <li><a href="help.html" title="Learn how to use the template">Help</a></li>
+      <li><a href="tags.html" title="View the styled tags">Tags</a></li>
+      <li><a href="print.html" title="View the print layout" class="here">Print</a></li>
+      <li><a href="http://fullahead.org/contact.html" title="Get in touch" class="last">Mail</a></li>
+    </ul>
+  </div>
+
+
+
+
+  <!-- PAGE CONTENT BEGINS: This is where you would define the columns (number, width and alignment) -->
+  <div id="page">
+
+
+    <!-- 25 percent width column, aligned to the left -->
+    <div class="width25 floatLeft leftColumn">
+
+      <h1>Print</h1>
+
+      <ul class="sideMenu">
+        <li class="here">
+          Dynamic Template
+          <ul>
+            <li><a href="#fluidity" title="Jump to section">Book of Fluidity</a></li>
+            <li><a href="#coding" title="Jump to section">Coding</a></li>
+          </ul>
+        </li>
+        <li><a href="http://fullahead.org" title="Goto Fullahead">Fullahead</a></li>
+        <li><a href="http://threetree.net" title="Goto Threetree">ThreeTree</a></li>
+      </ul>
+
+      <p>
+        This sidebar can be used to jump to sections within the page, or other sub pages of the active tab.
+      </p>
+
+      <p>
+        Using this approach, you shouldn't need breadcrumbs since you've provided your visitor with a <b>visual cue</b> to where they are in the site.
+      </p>
+
+      <p>
+        To <b>learn more</b> about how to use this template, follow the <a href="help.html" title="View help">help</a> link.  You can also see the styled <a href="tags.html" title="View tags">tags</a> and the <a href="print.html" title="View print layout">print</a> layout version.
+      </p>
+
+    </div>
+
+
+
+
+    <!-- 75 percent width column, aligned to the right -->
+    <div class="width75 floatRight">
+
+
+      <!-- Gives the gradient block -->
+      <div class="gradient">
+
+        <a name="fluidity"></a>
+
+        <h1>Print Layout Demo</h1>
+        <h2>This page shows how a page from this template looks printed</h2>
+
+        <p>
+          This template quickly and easily allows for one, two, three or even four column layouts.  This is done with simple <acronym title="Cascading Style Sheet">CSS</acronym> classes that can be used over and over again.  To learn more about it, follow <a href="help.html" title="View help">this link</a>.  The template itself is valid <acronym title="eXtensible Hypertext Markup Language">XTHML</acronym> 1.0 strict and <i>almost</i> valid CSS.  The almost is added in there because CSS expressions were used.  You can read more about that <a href="#expressions" title="Read about CSS expressions">here</a>.
+        </p>
+
+        <blockquote class="go">
+          <p>
+            This template doesn't use fixed columns.  With a few simple CSS classes you can quickly change the appearance.  <a href="help.html" title="View help">Click here</a> to learn how.
+          </p>
+        </blockquote>
+
+        <p>
+          Since this template is fluid width and the font sizes are defined relatively, you can change font size without breaking the layout.  The fluid width also means that people with higher resolutions aren't constrained.
+        </p>
+
+        <p>
+          Total size of the images used is just under 25 <acronym title="kilobytes">kb</acronym>, so that's good news to all the dial-up users.  The code behind the template is semantically written which means that it is widely supported.  As for the browsers, it displays consistently in the usual suspects:
+        </p>
+
+
+        <ul>
+          <li><b>Firefox</b> of course</li>
+          <li><b>Opera</b> sure, why not</li>
+          <li><b>Netscape</b> like firefox's less attractive cousin at the dance</li>
+          <li><b>Internet Explorer</b> ...</li>
+          <li><b>Safari</b> cause macs are computers too</li>
+        </ul>
+
+      </div>
+
+
+
+
+
+      <div class="gradient">
+
+        <a name="coding"></a>
+
+        <h1>Coding</h1>
+        <h2>Image Alignment and The Header</h2>
+
+        <p>
+          <a href="http://www.mozilla.com/firefox/" title="Get Firefox"><img src="images/firefox.jpg" alt="pic" class="floatLeft"/></a>
+          Images are fully supported using the <i>floatLeft</i> and <i>floatRight</i> classes.  Just apply one of them to the image you want to position.  Images that have link tags around them will also have a nifty rollover effect, as long as you're using a standards complients browser.  If you're not, well then no rollover effect for you.
+        </p>
+
+        <p>
+          The site header images are <a href="images/bg/header_left.jpg" title="View slice one">two</a> <a href="images/bg/header_right.jpg" title="View slice two">slices</a> and a repeated background.  Using the same approach, and a little bit of photoshop, you should be able to easily replace them.  However, since they were created by me, you're welcome to use them in any projects you might like.
+        </p>
+
+        <h2>The Footer</h2>
+        <p>
+          A variation on the <a href="http://www.themaninblue.com/experiment/footerStickAlt/" title="View footerStickAlt code">footerStickAlt</a> technique is used to force the site footer to the bottom of the page if there isn't enough content to push it down.  This means your template will always look tidy and you won't have to worry about a lonely footer, hanging out halfway up your page.
+        </p>
+
+        <a name="expressions"></a>
+
+        <h2>Readability using Maximum Width</h2>
+        <p>
+          To improve readability of this template (since it is fluid), the width is capped at 1000 pixels.  This seems like a pretty reasonable thing to do and that's why CSS has thoughtfully included the max-width property.  Unfortunately, IE decided it didn't need no stinkin' max-width, so a CSS expression was needed.
+        </p>
+
+        <blockquote class="exclamation">
+          <p>
+            A CSS expression is like a snippet of javascript code that runs in your style sheet.  It's invalid CSS, but only IE pays any attention to it.
+          </p>
+        </blockquote>
+
+        <p>
+          If you're concerned about having valid CSS, take out the expression.  It won't ruin the template in IE, it just means that the content will expand to 100% of the screen width.  All other browsers will behave.
+        </p>
+
+      </div>
+
+    </div>
+
+  </div>
+
+</div>
+
+
+<!-- FOOTER: Site footer for links, copyright, etc. -->
+<div id="footer">
+
+  <div id="width">
+    <span class="floatLeft">
+      design <a href="http://fullahead.org" title="Goto Fullahead">Fullahead</a> <span class="grey">|</span>
+      valid <a href="http://validator.w3.org/check?uri=referer" title="Validate XHTML">XHTML</a> <span class="grey">|</span>
+      should be valid <a href="http://jigsaw.w3.org/css-validator" title="Validate CSS">CSS</a>
+    </span>
+
+    <span class="floatRight">
+      <a href="index.html" title="Introduction">intro</a> <span class="grey">|</span>
+      <a href="help.html" title="Learn how to use the template">help</a> <span class="grey">|</span>
+      <a href="tags.html" title="View the styled tags">tags</a> <span class="grey">|</span>
+      <a href="print.html" title="View the print layout">print</a> <span class="grey">|</span>
+      <a href="http://fullahead.org/contact.html" title="Get in touch">mail</a>
+    </span>
+  </div>
+
+</div>
+
+</body>
+
+</html>

lazydays/readme.md

@@ -0,0 +1,5 @@
+## Project Description
+
+* [live example](https://learning-zone.github.io/website-templates/lazydays/)
+
+![alt text](https://github.com/learning-zone/Website-Templates/blob/master/assets/lazydays.png "lazydays")

lazydays/tags.html

@@ -0,0 +1,301 @@
+<!--
+ ____________________________________________________________
+|                                                            |
+|    DESIGN + Pat Heard { http://fullahead.org }             |
+|      DATE + 2006.03.19                                     |
+| COPYRIGHT + Free use if this notice is left in place       |
+|____________________________________________________________|
+
+-->
+
+<!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" xml:lang="en" lang="en-AU">
+
+<head>
+
+
+  <title>lazy days ( tags )</title>
+
+  <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
+  <meta name="author" content="fullahead.org" />
+  <meta name="keywords" content="Open Web Design, OWD, Free Web Template, Lazy Days, Fullahead" />
+  <meta name="description" content="A free web template designed by Fullahead.org and hosted on OpenWebDesign.org" />
+  <meta name="robots" content="index, follow, noarchive" />
+  <meta name="googlebot" content="noarchive" />
+
+  <link rel="stylesheet" type="text/css" href="css/html.css" media="screen, projection, tv " />
+  <link rel="stylesheet" type="text/css" href="css/layout.css" media="screen, projection, tv" />
+  <link rel="stylesheet" type="text/css" href="css/print.css" media="print" />
+
+</head>
+
+
+<body>
+
+<!-- CONTENT: Holds all site content except for the footer.  This is what causes the footer to stick to the bottom -->
+<div id="content">
+
+
+
+  <!-- HEADER: Holds title, subtitle and header images -->
+  <div id="header">
+
+    <div id="title">
+      <h1>Lazy Days</h1>
+      <h2>in the city</h2>
+    </div>
+
+    <img src="images/bg/balloons.gif" alt="balloons" class="balloons" />
+    <img src="images/bg/header_left.jpg" alt="left slice" class="left" />
+    <img src="images/bg/header_right.jpg" alt="right slice" class="right" />
+
+  </div>
+
+
+
+  <!-- MAIN MENU: Top horizontal menu of the site.  Use class="here" to turn the current page tab on -->
+  <div id="mainMenu">
+    <ul class="floatRight">
+      <li><a href="index.html" title="Introduction">Intro</a></li>
+      <li><a href="help.html" title="Learn how to use the template">Help</a></li>
+      <li><a href="tags.html" title="View the styled tags" class="here">Tags</a></li>
+      <li><a href="print.html" title="View the print layout">Print</a></li>
+      <li><a href="http://fullahead.org/contact.html" title="Get in touch" class="last">Mail</a></li>
+    </ul>
+  </div>
+
+  <!-- PAGE CONTENT BEGINS: This is where you would define the columns (number, width and alignment) -->
+  <div id="page">
+
+    <div class="width100 floatLeft">
+
+      <div class="gradient">
+
+        <h1>Heading 1</h1>
+
+        <h2>Heading 2</h2>
+
+        <h3>Heading 3</h3>
+
+        <h4>Heading 4</h4>
+
+        <h5>Heading 5</h5>
+
+        <h6>Heading 6</h6>
+
+        <p>
+          A <a href="http://tastydrop.com" title="Shameless....">link</a>, <acronym title="this really isn't a very good description">acronym</acronym> and <del>deleted text</del>.
+        </p>
+
+        <blockquote>
+          <p>
+            This is a default blockquote with author information included.  If you look at the source, you can see the author info gets its style from a combination of generic classes.<span class="block small grey"><a href="http://fullahead.org/contact.html" title="Contact snop">snop</a> on March 19th, 2006</span>
+          </p>
+        </blockquote>
+
+        <blockquote class="go">
+          <p>
+            This is a blockquote with the <i>go</i> class.
+          </p>
+        </blockquote>
+
+        <blockquote class="exclamation">
+          <p>
+            This is a blockquote with the <i>exclamation</i> class.
+          </p>
+        </blockquote>
+
+        <blockquote class="stop">
+          <p>
+            This is a blockquote with the <i>stop</i> class.
+          </p>
+        </blockquote>
+
+        <code><span class="green">/* Code block */</span><br/>System.out.println("someone set us up the bomb");</code>
+
+
+        <dl>
+          <dt>
+            Definition List
+          </dt>
+          <dd>
+            Can be used for all your definition list needs.
+          </dd>
+          <dt>
+            Muffins
+          </dt>
+          <dd>
+            Tasty breakfast treat.
+          </dd>
+        </dl>
+
+
+        <ul>
+          <li>Unordered List</li>
+          <li>Uses a custom bullet to make items pop</li>
+        </ul>
+
+
+        <ol>
+          <li><span>Ordered List</span></li>
+          <li><span>Uses a &lt;span&gt; tag to style the numbers</span></li>
+        </ol>
+
+
+        <form id="dummy" action="" method="post">
+
+          <p>
+            <label>Select Label</label>
+            <select name="dummy2">
+              <option value="1">Ottawa</option>
+              <option value="2">Calgary</option>
+              <option value="3">Moosejaw</option>
+            </select>
+          </p>
+
+          <p>
+            <label>Field Label</label>
+            <input type="text" name="dummy1" class="width50"/>
+          </p>
+
+          <p>
+            <label>Textarea Label</label>
+            <textarea name="dummy3" rows="5" cols="20" class="width50"></textarea>
+          </p>
+
+          <p>
+            <input type="submit" value="Submit" class="button"/>
+            <input type="reset" value="Reset" class="button"/>
+          </p>
+
+        </form>
+
+      </div>
+
+    </div>
+
+
+
+    <div class="gradient clear">
+
+      <a name="widthDemo"></a>
+
+      <h1>Column Width Demo</h1>
+
+
+      <h2 class="clear">25 Percent Width</h2>
+
+      <div class="width25 floatLeft">
+        <p>
+          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris magna. Suspendisse accumsan elit non tellus. Curabitur eros justo, malesuada convallis, sagittis vitae, convallis sit amet, lectus. Fusce tristique mattis ante. Aenean facilisis euismod dui.
+        </p>
+      </div>
+
+      <div class="width25 floatLeft">
+        <p>
+          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris magna. Suspendisse accumsan elit non tellus. Curabitur eros justo, malesuada convallis, sagittis vitae, convallis sit amet, lectus. Fusce tristique mattis ante. Aenean facilisis euismod dui.
+        </p>
+      </div>
+
+      <div class="width25 floatLeft">
+        <p>
+          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris magna. Suspendisse accumsan elit non tellus. Curabitur eros justo, malesuada convallis, sagittis vitae, convallis sit amet, lectus. Fusce tristique mattis ante. Aenean facilisis euismod dui.
+        </p>
+      </div>
+
+      <div class="width25 floatRight">
+        <p>
+          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris magna. Suspendisse accumsan elit non tellus. Curabitur eros justo, malesuada convallis, sagittis vitae, convallis sit amet, lectus. Fusce tristique mattis ante. Aenean facilisis euismod dui.
+        </p>
+      </div>
+
+
+
+      <h2 class="clear">33 Percent Width</h2>
+
+      <div class="width33 floatLeft">
+        <p>
+          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris magna. Suspendisse accumsan elit non tellus. Curabitur eros justo, malesuada convallis, sagittis vitae, convallis sit amet, lectus. Fusce tristique mattis ante. Aenean facilisis euismod dui.
+        </p>
+      </div>
+
+      <div class="width33 floatLeft">
+        <p>
+          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris magna. Suspendisse accumsan elit non tellus. Curabitur eros justo, malesuada convallis, sagittis vitae, convallis sit amet, lectus. Fusce tristique mattis ante. Aenean facilisis euismod dui.
+        </p>
+      </div>
+
+      <div class="width33 floatRight">
+        <p>
+          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris magna. Suspendisse accumsan elit non tellus. Curabitur eros justo, malesuada convallis, sagittis vitae, convallis sit amet, lectus. Fusce tristique mattis ante. Aenean facilisis euismod dui.
+        </p>
+      </div>
+
+
+
+      <h2 class="clear">50 Percent Width</h2>
+
+      <div class="width50 floatLeft">
+        <p>
+          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris magna. Suspendisse accumsan elit non tellus. Curabitur eros justo, malesuada convallis, sagittis vitae, convallis sit amet, lectus. Fusce tristique mattis ante. Aenean facilisis euismod dui.
+        </p>
+      </div>
+
+      <div class="width50 floatRight">
+        <p>
+          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris magna. Suspendisse accumsan elit non tellus. Curabitur eros justo, malesuada convallis, sagittis vitae, convallis sit amet, lectus. Fusce tristique mattis ante. Aenean facilisis euismod dui.
+        </p>
+      </div>
+
+
+
+
+      <h2 class="clear">75 Percent Width</h2>
+
+      <div class="width75 floatLeft">
+        <p>
+          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris magna. Suspendisse accumsan elit non tellus. Curabitur eros justo, malesuada convallis, sagittis vitae, convallis sit amet, lectus. Fusce tristique mattis ante. Aenean facilisis euismod dui. Curabitur eros justo, malesuada convallis, sagittis vitae, convallis sit amet, lectus. Fusce tristique mattis ante. Aenean facilisis euismod dui.
+        </p>
+      </div>
+
+      <div class="width25 floatRight">
+        <p>
+          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris magna. Suspendisse accumsan elit non tellus.
+        </p>
+      </div>
+
+
+    </div>
+
+  </div>
+
+
+</div>
+
+
+<!-- FOOTER: Site footer for links, copyright, etc. -->
+<div id="footer">
+
+  <div id="width">
+    <span class="floatLeft">
+      design <a href="http://fullahead.org" title="Goto Fullahead">Fullahead</a> <span class="grey">|</span>
+      valid <a href="http://validator.w3.org/check?uri=referer" title="Validate XHTML">XHTML</a> <span class="grey">|</span>
+      should be valid <a href="http://jigsaw.w3.org/css-validator" title="Validate CSS">CSS</a>
+    </span>
+
+    <span class="floatRight">
+      <a href="index.html" title="Introduction">intro</a> <span class="grey">|</span>
+      <a href="help.html" title="Learn how to use the template">help</a> <span class="grey">|</span>
+      <a href="tags.html" title="View the styled tags">tags</a> <span class="grey">|</span>
+      <a href="print.html" title="View the print layout">print</a> <span class="grey">|</span>
+      <a href="http://fullahead.org/contact.html" title="Get in touch">mail</a>
+    </span>
+  </div>
+
+</div>
+
+</body>
+
+</html>