HTMLify

<!DOCTYPE HTML>
<html>
  <meta http-equiv="content-type" content="text/html;charset=utf-8">
  <title>CSS3_seascape_two Template</title>
  <style type="text/css" media="screen">
    p, table, hr, .box { font-family: arial; margin-bottom:25px; }
    .box p { margin-bottom:10px; }
  </style>
</head>


<body>
  <div>

    <h1>&ldquo;CSS3_seascape_two&rdquo; Template Documentation</h1>

    <p><strong>Template version: 2.0<br />Created: May 16th 2012</strong></p>

    <div>
      <p>Thank you for downloading this template.</p>
      <p>This template is released under a <a href="http://creativecommons.org/licenses/by/3.0">Creative Commons Attribution 3.0 Licence</a>. This means you are free to download and use it for personal and commercial projects. However, you <strong>must leave the 'design from css3templates.co.uk' link in the footer of the template</strong>.</p>
      <p>If you have any questions that are beyond the scope of this help file, please feel free to contact me via my <a href="http://www.css3templates.co.uk">website</a>. Thank you!</p>
    </div>

    <hr>

    <h2 id="toc">Table of Contents</h2>
    <ol>
      <li><a href="#htmlStructure">HTML Structure</a></li>
      <li><a href="#cssFiles">CSS Files and Structure</a></li>
      <li><a href="#fontFiles">Fonts</a></li>
      <li><a href="#javascript">JavaScript</a></li>
      <li><a href="#credits">Sources and Credits</a></li>
    </ol>

    <hr>

    <h3 id="htmlStructure"><strong>A) HTML Structure</strong> - <a href="#toc">top</a></h3>
    <p>Here is the HTML structure for this template.</p>

    <pre>
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
  &lt;!-- Header Metatags --&gt;
  &lt;!-- Main Stylesheet --&gt;
  &lt;!-- Modernizr JS Enables HTML5 Elements --&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;div id=&quot;main&quot;&gt;
    &lt;!-- begin header --&gt;
    &lt;header&gt;
      &lt;div id=&quot;logo&quot;&lt;/div&gt;
      &lt;nav&gt;
        &lt;!-- menu --&gt;
      &lt;/nav&gt;
    &lt;/header&gt;
    &lt;!-- end header --&gt;
    &lt;!-- begin content --&gt;
    &lt;div id=&quot;site_content&quot;&gt;
      &lt;ul id="images"&gt;
        &lt;li&gt;&lt;img src=&quot;images/1.jpg&quot; width=&quot;600&quot; height=&quot;300&quot; alt=&quot;photo_one&quot; /&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src=&quot;images/2.jpg&quot; width=&quot;600&quot; height=&quot;300&quot; alt=&quot;photo_two&quot; /&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src=&quot;images/3.jpg&quot; width=&quot;600&quot; height=&quot;300&quot; alt=&quot;photo_three&quot; /&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src=&quot;images/4.jpg&quot; width=&quot;600&quot; height=&quot;300&quot; alt=&quot;photo_four&quot; /&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src=&quot;images/5.jpg&quot; width=&quot;600&quot; height=&quot;300&quot; alt=&quot;photo_five&quot; /&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src=&quot;images/6.jpg&quot; width=&quot;600&quot; height=&quot;300&quot; alt=&quot;photo_six&quot; /&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;div id=&quot;sidebar_container&quot;&gt;
        &lt;div class=&quot;sidebar&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;content&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- end content --&gt;
    &lt;!-- begin footer --&gt;
    &lt;footer&gt;&lt;/footer&gt;
    &lt;!-- end footer --&gt;
  &lt;/div&gt;
  &lt;p&gt;&amp;nbsp;&lt;/p&gt;
  &lt;!-- jQuery with plugins --&gt;
  &lt;script type=&quot;text/javascript&quot;&gt;
    $(document).ready(function(){
      &lt;!-- initialise image transition --&gt;
      $('#images').kwicks({
        max : 600,
        spacing : 2
      });
      &lt;!-- initialise sooperfish menu --&gt;
      $('ul.sf-menu').sooperfish();
    });
  &lt;/script&gt;
&lt;/html&gt;
&lt;/body&gt;
    </pre>

    <hr>

    <h3 id="cssFiles"><strong>B) CSS Files and Structure</strong> - <a href="#toc">top</a></h3>

    <p>There is one stylesheet used in this theme:</p>
    <ol>
      <li><b>css/style.css</b></li>
    </ol>

    <ol>
      <li><b>style.css</b> is the main stylesheet and is included in all pages. It contains all the structural stylings for the template.</li>
    </ol>

    <hr>

    <h3 id="fontFiles"><strong>C) Fonts</strong> - <a href="#toc">top</a></h3>

    <p>There are 2 fonts used in this theme. The fonts are Yanone Kaffeesatz and News Cycle. The font files are</p>
    <ol>
      <li><b>fonts/YanoneKaffeesatz-Regular.ttf</b></li>
      <li><b>fonts/YanoneKaffeesatz-Regular.eot</b> (IE Specific)</li>
      <li><b>fonts/NewsCycle-Regular.ttf</b></li>
      <li><b>fonts/NewsCycle-Regular.eot</b> (IE Specific)</li>
    </ol>

    <hr>

    <h3 id="javascript"><strong>D) JavaScript</strong> - <a href="#toc">top</a></h3>

    <p>This theme imports several Javascript files.</p>

    <ol>
      <li>js/modernizr-1.5.min.js</li>
      <li>js/jquery.min.js</li>
      <li>js/jquery.easing-sooper.js</li>
      <li>js/jquery.sooperfish.js</li>
      <li>js/jquery.kwicks-1.5.1.js</li>
    </ol>

    <ol>
      <li><b>modernizr</b> is a Javascript library that enables HTML5 elements and feature detects.</li>
      <li><b>jQuery</b> is a Javascript library containing lots of commonly used Javascript functions.</li>
      <li><b>Easing sooper</b> is a jQuery plugin for easing transitions, optimised for the Sooperfish drop-down menu.</li>
      <li><b>Sooperfish</b> is a jQuery plugin for the drop-down menu.</li>
      <li><b>Kwicks</b> is a jQuery plugin for the image transitions.</li>
    </ol>

    <hr>

    <h3 id="credits"><strong>E) Sources and Credits</strong> - <a href="#toc">top</a></h3>

    <p>I've used the following images, icons or other files as listed.

    <ul>
      <li><a href="http://www.modernizr.com">modernizr</a> (MIT and BSD licenses)</li>
      <li><a href="http://www.jquery.com">jQuery</a> (MIT and GPL licenses)</li>
      <li>jQuery easing sooper (BSD license)</li>
      <li><a href="http://archive.plugins.jquery.com/project/SooperFish">Sooperfish</a> (GPL license)</li>
      <li><a href="http://www.jeremymartin.name/projects.php?project=kwicks">Kwicks</a> (MIT license)</li>
      <li><a href="http://www.dezinerfolio.com/freebie/project-icon-set">Project Icons - Designed by Navdeep Raj</a>
    </ul>

    <hr>

    <p>Once again, thank you for downloading this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist.</p>

    <p><a href="#toc">Go To Table of Contents</a></p>

    <hr>
  </div>
</body>
</html>