HTMLify

<!--
 ____________________________________________________________
|                                                            |
|    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>