Corrected indent and whitespace. Validates now with nxml html5.rnc rules.
authorFredrik Unger <fred@tree.se>
Wed, 2 Mar 2011 07:13:44 +0000 (08:13 +0100)
committerFredrik Unger <fred@tree.se>
Wed, 2 Mar 2011 07:13:44 +0000 (08:13 +0100)
style/adropabove/index.html
style/bluenightsky/index.html
style/freggies/index.html
style/turquoiseswirls/index.html

index 770f8394dd60762adc456df144ee9f00a539e977..f15a967900fa481c73b5facd45dcb78cfe34faaa 100755 (executable)
-<!doctype html>
-<html lang="en">
-<head>
-       <meta charset="utf-8" />
-       <title>A Drop Above</title>
-       <link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
-       <link rel="stylesheet" type="text/css" href="print.css" media="print" />
-       <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
-               <link rel="stylesheet" type="text/css" href="superfish.css" media="screen">
-               <script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
-               <script type="text/javascript" src="js/hoverIntent.js"></script>
-               <script type="text/javascript" src="js/superfish.js"></script>
-               <script type="text/javascript">
-
-               // initialise plugins
-               jQuery(function(){
-                       jQuery('ul.sf-menu').superfish();
-               });
-
-               </script>
-</head>
-<body>
-<div id="wrapper"><!-- #wrapper -->
-
-       <nav><!-- top nav -->
-               <ul class="sf-menu">
-                       <li class="current">
-                               <a href="#">Home</a>
-                       </li>
-                       <li>
-                               <a href="#">About</a>
-                               <ul>
-                                       <li>
-                                               <a href="#">Mission</a>
-                                       </li>
-                                       <li>
-                                               <a href="#">Our Team</a>
-                                               <ul>
-                                                       <li><a href="#">Joe</a></li>
-                                                       <li><a href="#">Jane</a></li>
-                                                       <li><a href="#">Tom</a></li>
-                                               </ul>
-                                       </li>
-                                       <li>
-                                               <a href="#">Office Locations</a>
-                                               <ul>
-                                                       <li><a href="#">New York</a></li>
-                                                       <li><a href="#">Chicago</a></li>
-                                                       <li><a href="#">Denver</a></li>
-                                               </ul>
-                                       </li>
-                               </ul>
-                       </li>
-                       <li>
-                               <a href="#">Products</a>
-                               <ul>
-                                       <li>
-                                               <a href="#">Widgets</a>
-                                               <ul>
-                                                       <li><a href="#">Red</a></li>
-                                                       <li><a href="#">Blue</a></li>
-                                               </ul>
-                                       </li>
-                                       <li>
-                                               <a href="#">Wodgets</a>
-                                               <ul>
-                                                       <li><a href="#">Basic</a></li>
-                                                       <li><a href="#">Advanced</a></li>
-                                                       <li><a href="#">Pro</a></li>
-                                               </ul>
-                                       </li>
-                               </ul>
-                       </li>
-                       <li>
-                               <a href="#">Contact Us</a>
-                       </li>   
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml"
+      lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>A Drop Above</title>
+    <link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
+    <link rel="stylesheet" type="text/css" href="print.css" media="print" />
+    <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
+    <link rel="stylesheet" type="text/css" href="superfish.css" media="screen"/>
+    <script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
+    <script type="text/javascript" src="js/hoverIntent.js"></script>
+    <script type="text/javascript" src="js/superfish.js"></script>
+    <script type="text/javascript">
+
+      // initialise plugins
+      jQuery(function(){
+      jQuery('ul.sf-menu').superfish();
+      });
+
+    </script>
+  </head>
+  <body>
+    <div id="wrapper"><!-- #wrapper -->
+
+      <nav><!-- top nav -->
+       <ul class="sf-menu">
+         <li class="current">
+           <a href="#">Home</a>
+         </li>
+         <li>
+           <a href="#">About</a>
+           <ul>
+             <li>
+               <a href="#">Mission</a>
+             </li>
+             <li>
+               <a href="#">Our Team</a>
+               <ul>
+                 <li><a href="#">Joe</a></li>
+                 <li><a href="#">Jane</a></li>
+                 <li><a href="#">Tom</a></li>
+               </ul>
+             </li>
+             <li>
+               <a href="#">Office Locations</a>
+               <ul>
+                 <li><a href="#">New York</a></li>
+                 <li><a href="#">Chicago</a></li>
+                 <li><a href="#">Denver</a></li>
+               </ul>
+             </li>
+           </ul>
+         </li>
+         <li>
+           <a href="#">Products</a>
+           <ul>
+             <li>
+               <a href="#">Widgets</a>
+               <ul>
+                 <li><a href="#">Red</a></li>
+                 <li><a href="#">Blue</a></li>
+               </ul>
+             </li>
+             <li>
+               <a href="#">Wodgets</a>
+               <ul>
+                 <li><a href="#">Basic</a></li>
+                 <li><a href="#">Advanced</a></li>
+                 <li><a href="#">Pro</a></li>
                </ul>
-       </nav><!-- end of top nav -->
-       
-       <header><!-- header -->
-               <h1><a href="#">A Drop Above</a></h1>
-               <h2>Your tag line here</h2>
-       </header><!-- end of header -->
-       
-       <section id="main"><!-- #main content and sidebar area -->
-                       <section id="content"><!-- #content -->
-                       
-                       <article>
-                                                       <h2><a href="#">First Article Title</a></h2>
-                                                       <img src="images/flowersky.jpg" alt="flower" class="alignleft" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.</p>
-                                               </article>
-                                               
-                       <article>
-                                                       <h2><a href="#">Second Article Title</a></h2>
-                                                       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.</p>
-                                                       <p>Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.</p>
-                                               </article>
-                                               
-                       </section><!-- end of #content -->
-
-               <aside id="sidebar"><!-- sidebar -->
-                               <h3>Stuff</h3>
-                                       <ul>
-                                               <li><a href="#">Curabitur sodales</a></li>
-                                               <li><a href="#">Sed dignissim</a></li>
-                                               <li><a href="#">Fusce nec</a></li>
-                                               <li><a href="#">Nulla quis</a></li>
-                                       </ul>
-
-                               <h3>More Stuff</h3>
-                                       <ul>
-                                               <li><a href="#">Blah</a></li>
-                                               <li><a href="#">More blah</a></li>
-                                       </ul>
-
-               </aside><!-- end of sidebar -->
-
-       </section><!-- end of #main content and sidebar-->
-       
-               <footer>
-               <section id="footer-area">
-
-                       <section id="footer-outer-block">
-                                       <aside class="footer-segment">
-                                                       <h4>Friends</h4>
-                                                               <ul>
-                                                                       <li><a href="#">one linkylink</a></li>
-                                                                       <li><a href="#">two linkylinks</a></li>
-                                                                       <li><a href="#">three linkylinks</a></li>
-                                                                       <li><a href="#">four linkylinks</a></li>
-                                                                       <li><a href="#">five linkylinks</a></li>
-                                                               </ul>
-                                       </aside><!-- end of #first footer segment -->
-
-                                       <aside class="footer-segment">
-                                                       <h4>Awesome Stuff</h4>
-                                                               <ul>
-                                                                       <li><a href="#">one linkylink</a></li>
-                                                                       <li><a href="#">two linkylinks</a></li>
-                                                                       <li><a href="#">three linkylinks</a></li>
-                                                                       <li><a href="#">four linkylinks</a></li>
-                                                                       <li><a href="#">five linkylinks</a></li>
-                                                               </ul>
-                                       </aside><!-- end of #second footer segment -->
-
-                                       <aside class="footer-segment">
-                                                       <h4>Coolness</h4>
-                                                               <ul>
-                                                                       <li><a href="#">one linkylink</a></li>
-                                                                       <li><a href="#">two linkylinks</a></li>
-                                                                       <li><a href="#">three linkylinks</a></li>
-                                                                       <li><a href="#">four linkylinks</a></li>
-                                                                       <li><a href="#">five linkylinks</a></li>
-                                                               </ul>
-                                       </aside><!-- end of #third footer segment -->
-                                       
-                                       <aside class="footer-segment">
-                                                       <h4>Blahdyblah</h4>
-                                                               <p>Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.</p>
-                                       </aside><!-- end of #fourth footer segment -->
-
-                       </section><!-- end of footer-outer-block -->
-
-               </section><!-- end of footer-area -->
-       </footer>
-       
-</div><!-- #wrapper -->
-<!-- Free template created by http://freehtml5templates.com -->
-</body>
+             </li>
+           </ul>
+         </li>
+         <li>
+           <a href="#">Contact Us</a>
+         </li>
+       </ul>
+      </nav><!-- end of top nav -->
+
+      <header><!-- header -->
+       <h1><a href="#">A Drop Above</a></h1>
+       <h2>Your tag line here</h2>
+      </header><!-- end of header -->
+
+      <section id="main"><!-- #main content and sidebar area -->
+       <section id="content"><!-- #content -->
+
+         <article>
+           <h2><a href="#">First Article Title</a></h2> <img
+           src="images/flowersky.jpg" alt="flower" class="alignleft"/>
+           <p>
+             Lorem ipsum dolor sit amet, consectetur adipiscing
+             elit. Integer nec odio. Praesent libero. Sed cursus ante
+             dapibus diam. Sed nisi. Nulla quis sem at nibh elementum
+             imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce
+             nec tellus sed augue semper porta. Mauris
+             massa. Vestibulum lacinia arcu eget nulla. Class aptent
+             taciti sociosqu ad litora torquent per conubia nostra,
+             per inceptos himenaeos. Curabitur sodales ligula in
+             libero. Sed dignissim lacinia nunc.
+           </p>
+         </article>
+
+         <article>
+           <h2><a href="#">Second Article Title</a></h2>
+           <p>
+             Lorem ipsum dolor sit amet, consectetur adipiscing
+             elit. Integer nec odio. Praesent libero. Sed cursus ante
+             dapibus diam. Sed nisi. Nulla quis sem at nibh elementum
+             imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce
+             nec tellus sed augue semper porta. Mauris
+             massa. Vestibulum lacinia arcu eget nulla. Class aptent
+             taciti sociosqu ad litora torquent per conubia nostra,
+             per inceptos himenaeos. Curabitur sodales ligula in
+             libero. Sed dignissim lacinia nunc.
+           </p>
+           <p>
+             Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem
+             at nibh elementum imperdiet. Duis sagittis
+             ipsum. Praesent mauris. Fusce nec tellus sed augue
+             semper porta. Mauris massa. Vestibulum lacinia arcu eget
+             nulla. Class aptent taciti sociosqu ad litora torquent
+             per conubia nostra, per inceptos himenaeos. Curabitur
+             sodales ligula in libero. Sed dignissim lacinia nunc.
+           </p>
+         </article>
+
+       </section><!-- end of #content -->
+
+       <aside id="sidebar"><!-- sidebar -->
+         <h3>Stuff</h3>
+         <ul>
+           <li><a href="#">Curabitur sodales</a></li>
+           <li><a href="#">Sed dignissim</a></li>
+           <li><a href="#">Fusce nec</a></li>
+           <li><a href="#">Nulla quis</a></li>
+         </ul>
+
+         <h3>More Stuff</h3>
+         <ul>
+           <li><a href="#">Blah</a></li>
+           <li><a href="#">More blah</a></li>
+         </ul>
+
+       </aside><!-- end of sidebar -->
+
+      </section><!-- end of #main content and sidebar-->
+
+      <footer>
+       <section id="footer-area">
+
+         <section id="footer-outer-block">
+           <aside class="footer-segment">
+             <h4>Friends</h4>
+             <ul>
+               <li><a href="#">one linkylink</a></li>
+               <li><a href="#">two linkylinks</a></li>
+               <li><a href="#">three linkylinks</a></li>
+               <li><a href="#">four linkylinks</a></li>
+               <li><a href="#">five linkylinks</a></li>
+             </ul>
+           </aside><!-- end of #first footer segment -->
+
+           <aside class="footer-segment">
+             <h4>Awesome Stuff</h4>
+             <ul>
+               <li><a href="#">one linkylink</a></li>
+               <li><a href="#">two linkylinks</a></li>
+               <li><a href="#">three linkylinks</a></li>
+               <li><a href="#">four linkylinks</a></li>
+               <li><a href="#">five linkylinks</a></li>
+             </ul>
+           </aside><!-- end of #second footer segment -->
+
+           <aside class="footer-segment">
+             <h4>Coolness</h4>
+             <ul>
+               <li><a href="#">one linkylink</a></li>
+               <li><a href="#">two linkylinks</a></li>
+               <li><a href="#">three linkylinks</a></li>
+               <li><a href="#">four linkylinks</a></li>
+               <li><a href="#">five linkylinks</a></li>
+             </ul>
+           </aside><!-- end of #third footer segment -->
+
+           <aside class="footer-segment">
+             <h4>Blahdyblah</h4>
+             <p>
+               Integer nec odio. Praesent libero. Sed cursus ante
+               dapibus diam. Sed nisi. Nulla quis sem at nibh
+               elementum imperdiet. Duis sagittis ipsum. Praesent
+               mauris. Fusce nec tellus sed augue semper porta.
+             </p>
+           </aside><!-- end of #fourth footer segment -->
+
+         </section><!-- end of footer-outer-block -->
+
+       </section><!-- end of footer-area -->
+      </footer>
+
+    </div><!-- #wrapper -->
+    <!-- Free template created by http://freehtml5templates.com -->
+  </body>
 </html>
index eb501cb0f7b3544c7308ead2c7c0ddee953cfcc4..d3e1643ca8f36ed0a8d3d54a61d6856042ebde0e 100755 (executable)
-<!doctype html>
-<html lang="en">
-<head>
-       <meta charset="utf-8" />
-       <title>BlueNightSky</title>
-       <link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
-       <link rel="stylesheet" type="text/css" href="print.css" media="print" />
-       <script type="text/javascript"
-src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> 
-       <script type="text/javascript" src="js/simpletabs.js"></script> 
-       <link rel="stylesheet" type="text/css" href="lightbox.css" media="screen" />
-       <script type="text/javascript" src="js/jquery.js"></script>
-  <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
-       <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
-<script type="text/javascript">
-$(function() {
-       $('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
-});
-</script>
-</head>
-<body>
-<div id="wrapper"><!-- #wrapper -->
-
-       <header><!-- header -->
-               <h1><a href="#">Blue Night Sky</a></h1>
-               <h2>Your compelling tag line goes here</h2>
-               <img src="images/bluenightsky.png" width="940" height="200" alt=""><!-- header image -->
-       </header><!-- end of header -->
-       
-       <nav><!-- top nav -->
-               <div class="menu">
-                       <ul>
-                               <li><a href="#">Home</a></li>
-                               <li><a href="#">About</a>
-                           <ul>
-                                       <li><a href="#">The Team</a></li>
-                                       <li><a href="#">History</a></li>
-                                       <li><a href="">Vision</a></li>
-                               </ul>
-                       </li>
-                               <li><a href="#">Products</a>
-                                       <ul>
-                                               <li><a href="#">Widgets</a></li>
-                                               <li><a href="#">Wodgets</a></li>
-                                       </ul>
-                               </li>
-                               <li><a href="#">Services</a>
-                                       <ul>
-                                               <li><a href="#">Consulting</a></li>
-                                               <li><a href="#">Troubleshooting</a></li>
-                                       </ul>
-                               </li>
-                               <li><a href="#">Support</a></li>
-                               <li><a href="#">Contact Us</a></li>
-                       </ul>
-               </div>
-       </nav><!-- end of top nav -->
-       
-       <section id="main"><!-- #main content and sidebar area -->
-
-                       <section id="content"><!-- #content -->
-
-                       <section id="lightboxthumbs">
-                       <a href="images/gallery/falls1.jpg" rel="lightbox" title="Waterfall 1 Caption goes here"><img src="images/gallery/falls1-thumb.jpg" alt="" class="frameit"></a>
-                       <a href="images/gallery/falls2.jpg" rel="lightbox" title="Waterfall 2 Caption goes here"><img src="images/gallery/falls2-thumb.jpg" alt="" class="frameit"></a>
-                       <a href="images/gallery/falls3.jpg" rel="lightbox" title="Waterfall 3 Caption goes here"><img src="images/gallery/falls3-thumb.jpg" alt="" class="frameit"></a>
-                       <a href="images/gallery/falls4.jpg" rel="lightbox" title="Waterfall 4 Caption goes here"><img src="images/gallery/falls4-thumb.jpg" alt="" class="frameit"></a>
-                       <a href="images/gallery/falls5.jpg" rel="lightbox" title="Waterfall 5 Caption goes here"><img src="images/gallery/falls5-thumb.jpg" alt="" class="frameit"></a>
-                       <a href="images/gallery/falls6.jpg" rel="lightbox" title="Waterfall 6 Caption goes here"><img src="images/gallery/falls6-thumb.jpg" alt="" class="frameitlast"></a>
-                       </section>
-
-                               <article class="featured">
-                                       <img src="images/newspic.jpg" alt="" class="featuredthumb" />
-                                       <p><a href="#" class="featuredtitle">This is the featured article</a></p><p class="featuredstory">Pellentesque ut sapien arcu, egestas mollis massa. Fusce lectus leo, fringilla at aliquet sit amet, volutpat non erat. Aenean molestie nibh vitae turpis venenatis vel accumsan nunc tincidunt. Pellentesque ut sapien arcu, egestas mollis massa. Fusce lectus leo, fringilla at aliquet sit amet, volutpat non erat. Aenean molestie nibh vitae turpis venenatis vel accumsan nunc tincidunt. Pellentesque ut sapien arcu, egestas mollis massa. Fusce lectus leo, fringilla at aliquet.</p>
-                               </article>
-
-                               <article class="odd">
-                                       <img src="images/newspic1.jpg" alt="" class="thumb" />
-                                       <p><a href="#" class="title">This is the title of a news article</a></p><p class="story">Pellentesque ut sapien arcu, egestas mollis massa. Fusce lectus leo, fringilla at aliquet sit amet, volutpat non erat. Aenean molestie nibh vitae turpis venenatis vel accumsan nunc tincidunt. Pellentesque ut sapien arcu, egestas mollis massa.</p>
-                               </article>
-
-                               <article class="even">
-                                       <img src="images/newspic2.jpg" alt="" class="thumb" />
-                                       <p><a href="#" class="title">This is another news article</a></p><p class="story">Pellentesque ut sapien arcu, egestas mollis massa. Fusce lectus leo, fringilla at aliquet sit amet, volutpat non erat. Aenean molestie nibh vitae turpis venenatis vel accumsan nunc tincidunt. Pellentesque ut sapien arcu, egestas mollis massa.</p>
-                               </article>
-
-                               <article class="odd">
-                                       <img src="images/newspic3.jpg" alt="" class="thumb" />
-                                       <p><a href="#" class="title">This is a news article too</a></p><p class="story">Pellentesque ut sapien arcu, egestas mollis massa. Fusce lectus leo, fringilla at aliquet sit amet, volutpat non erat. Aenean molestie nibh vitae turpis venenatis vel accumsan nunc tincidunt. Pellentesque ut sapien arcu, egestas mollis massa.</p>
-                               </article>
-
-                               <article class="even">
-                                       <img src="images/newspic4.jpg" alt="" class="thumb" />
-                                       <p><a href="#" class="title">This is an older news article</a></p><p class="story">Pellentesque ut sapien arcu, egestas mollis massa. Fusce lectus leo, fringilla at aliquet sit amet, volutpat non erat. Aenean molestie nibh vitae turpis venenatis vel accumsan nunc tincidunt. Pellentesque ut sapien arcu, egestas mollis massa.</p>
-                               </article>
-
-                               <article class="odd">
-                                       <img src="images/newspic5.jpg" alt="" class="thumb" />
-                                       <p><a href="#" class="title">This is the last news article</a></p><p class="story">Pellentesque ut sapien arcu, egestas mollis massa. Fusce lectus leo, fringilla at aliquet sit amet, volutpat non erat. Aenean molestie nibh vitae turpis venenatis vel accumsan nunc tincidunt. Pellentesque ut sapien arcu, egestas mollis massa.</p>
-                               </article>
-                                               
-                       </section><!-- end of #content -->
-
-               <aside id="sidebar"><!-- sidebar -->
-
-                       <div class="tabwidget"> 
-         <ul class="tabs"> 
-             <li><a href="#tab1">Recent</a></li> 
-             <li><a href="#tab2">Popular</a></li>
-             <li><a href="#tab3">About Me</a></li>
-         </ul> 
-         <div class="tab_container"> 
-             <div id="tab1" class="tab_content"> 
-                 <h3>Recent Articles</h3> 
-                 <ul>
-                       <li><a href="#">Interesting Recent Link 1</a></li>
-                       <li><a href="#">Interesting Recent Link 2</a></li>
-                       <li><a href="#">Interesting Recent Link 3</a></li>
-                       <li><a href="#">Interesting Recent Link 4</a></li>
-                       <li><a href="#">Interesting Recent Link 5</a></li>
-                       <li><a href="#">Interesting Recent Link 6</a></li>
-                       <li><a href="#">Interesting Recent Link 7</a></li>
-                                                       </ul>
-             </div> 
-             <div id="tab2" class="tab_content"> 
-                 <h3>Our Most Popular</h3> 
-                 <ul>
-                       <li><a href="#">Most Popular Link 1</a></li>
-                       <li><a href="#">Most Popular Link 2</a></li>
-                       <li><a href="#">Most Popular Link 3</a></li>
-                       <li><a href="#">Most Popular Link 4</a></li>
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml"
+      lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>BlueNightSky</title>
+    <link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
+    <link rel="stylesheet" type="text/css" href="print.css" media="print" />
+    <script type="text/javascript"
+           src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js">
+    </script>
+    <script type="text/javascript" src="js/simpletabs.js"></script>
+    <link rel="stylesheet" type="text/css" href="lightbox.css" media="screen" />
+    <script type="text/javascript" src="js/jquery.js"></script>
+    <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
+    <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
+    <script type="text/javascript">
+      $(function() {
+      $('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
+      });
+    </script>
+  </head>
+  <body>
+    <div id="wrapper"><!-- #wrapper -->
+
+      <header><!-- header -->
+       <h1><a href="#">Blue Night Sky</a></h1>
+       <h2>Your compelling tag line goes here</h2>
+       <img src="images/bluenightsky.png" width="940" height="200" alt=""/>
+       <!-- header image -->
+      </header><!-- end of header -->
+
+      <nav><!-- top nav -->
+       <div class="menu">
+         <ul>
+           <li><a href="#">Home</a></li>
+           <li><a href="#">About</a>
+           <ul>
+             <li><a href="#">The Team</a></li>
+             <li><a href="#">History</a></li>
+             <li><a href="">Vision</a></li>
+           </ul>
+           </li>
+           <li><a href="#">Products</a>
+           <ul>
+             <li><a href="#">Widgets</a></li>
+             <li><a href="#">Wodgets</a></li>
+           </ul>
+           </li>
+           <li><a href="#">Services</a>
+           <ul>
+             <li><a href="#">Consulting</a></li>
+             <li><a href="#">Troubleshooting</a></li>
+           </ul>
+           </li>
+           <li><a href="#">Support</a></li>
+           <li><a href="#">Contact Us</a></li>
+         </ul>
+       </div>
+      </nav><!-- end of top nav -->
+
+      <section id="main"><!-- #main content and sidebar area -->
+
+       <section id="content"><!-- #content -->
+
+         <section id="lightboxthumbs">
+           <a href="images/gallery/falls1.jpg" rel="lightbox"
+              title="Waterfall 1 Caption goes here"><img
+              src="images/gallery/falls1-thumb.jpg"
+              alt="" class="frameit"/></a>
+           <a href="images/gallery/falls2.jpg" rel="lightbox"
+              title="Waterfall 2 Caption goes here"><img
+              src="images/gallery/falls2-thumb.jpg"
+              alt="" class="frameit"/></a>
+           <a href="images/gallery/falls3.jpg" rel="lightbox"
+              title="Waterfall 3 Caption goes here"><img
+              src="images/gallery/falls3-thumb.jpg"
+              alt="" class="frameit"/></a>
+           <a href="images/gallery/falls4.jpg" rel="lightbox"
+              title="Waterfall 4 Caption goes here"><img
+              src="images/gallery/falls4-thumb.jpg"
+              alt="" class="frameit"/></a>
+           <a href="images/gallery/falls5.jpg" rel="lightbox"
+              title="Waterfall 5 Caption goes here"><img
+              src="images/gallery/falls5-thumb.jpg"
+              alt="" class="frameit"/></a>
+           <a href="images/gallery/falls6.jpg" rel="lightbox"
+              title="Waterfall 6 Caption goes here"><img
+              src="images/gallery/falls6-thumb.jpg"
+              alt="" class="frameitlast"/></a>
+         </section>
+
+         <article class="featured">
+           <img src="images/newspic.jpg" alt="" class="featuredthumb" />
+           <p><a href="#" class="featuredtitle">This is the featured
+           article</a></p><p class="featuredstory">Pellentesque ut
+           sapien arcu, egestas mollis massa. Fusce lectus leo,
+           fringilla at aliquet sit amet, volutpat non erat. Aenean
+           molestie nibh vitae turpis venenatis vel accumsan nunc
+           tincidunt. Pellentesque ut sapien arcu, egestas mollis
+           massa. Fusce lectus leo, fringilla at aliquet sit amet,
+           volutpat non erat. Aenean molestie nibh vitae turpis
+           venenatis vel accumsan nunc tincidunt. Pellentesque ut
+           sapien arcu, egestas mollis massa. Fusce lectus leo,
+           fringilla at aliquet.</p>
+         </article>
+
+         <article class="odd">
+           <img src="images/newspic1.jpg" alt="" class="thumb" />
+           <p><a href="#" class="title">This is the title of a news
+           article</a></p><p class="story">Pellentesque ut sapien
+           arcu, egestas mollis massa. Fusce lectus leo, fringilla at
+           aliquet sit amet, volutpat non erat. Aenean molestie nibh
+           vitae turpis venenatis vel accumsan nunc
+           tincidunt. Pellentesque ut sapien arcu, egestas mollis
+           massa.</p>
+         </article>
+
+         <article class="even">
+           <img src="images/newspic2.jpg" alt="" class="thumb" />
+           <p>
+             <a href="#" class="title">This is another news
+             article</a></p><p class="story">Pellentesque ut sapien
+             arcu, egestas mollis massa. Fusce lectus leo, fringilla
+             at aliquet sit amet, volutpat non erat. Aenean molestie
+             nibh vitae turpis venenatis vel accumsan nunc
+             tincidunt. Pellentesque ut sapien arcu, egestas mollis
+             massa.
+           </p>
+         </article>
+
+         <article class="odd">
+           <img src="images/newspic3.jpg" alt="" class="thumb" />
+           <p>
+             <a href="#" class="title">This is a news article
+             too</a></p><p class="story">Pellentesque ut sapien arcu,
+             egestas mollis massa. Fusce lectus leo, fringilla at
+             aliquet sit amet, volutpat non erat. Aenean molestie
+             nibh vitae turpis venenatis vel accumsan nunc
+             tincidunt. Pellentesque ut sapien arcu, egestas mollis
+             massa.
+           </p>
+         </article>
+
+         <article class="even">
+           <img src="images/newspic4.jpg" alt="" class="thumb" />
+           <p>
+             <a href="#" class="title">This is an older news
+             article</a></p><p class="story">Pellentesque ut sapien
+             arcu, egestas mollis massa. Fusce lectus leo, fringilla
+             at aliquet sit amet, volutpat non erat. Aenean molestie
+             nibh vitae turpis venenatis vel accumsan nunc
+             tincidunt. Pellentesque ut sapien arcu, egestas mollis
+             massa.
+           </p>
+         </article>
+
+         <article class="odd">
+           <img src="images/newspic5.jpg" alt="" class="thumb" />
+           <p>
+             <a href="#" class="title">This is the last news
+             article</a></p><p class="story">Pellentesque ut sapien
+             arcu, egestas mollis massa. Fusce lectus leo, fringilla
+             at aliquet sit amet, volutpat non erat. Aenean molestie
+             nibh vitae turpis venenatis vel accumsan nunc
+             tincidunt. Pellentesque ut sapien arcu, egestas mollis
+             massa.
+           </p>
+         </article>
+
+       </section><!-- end of #content -->
+
+       <aside id="sidebar"><!-- sidebar -->
+
+         <div class="tabwidget">
+           <ul class="tabs">
+             <li><a href="#tab1">Recent</a></li>
+             <li><a href="#tab2">Popular</a></li>
+             <li><a href="#tab3">About Me</a></li>
+           </ul>
+           <div class="tab_container">
+             <div id="tab1" class="tab_content">
+               <h3>Recent Articles</h3>
+               <ul>
+                 <li><a href="#">Interesting Recent Link 1</a></li>
+                 <li><a href="#">Interesting Recent Link 2</a></li>
+                 <li><a href="#">Interesting Recent Link 3</a></li>
+                 <li><a href="#">Interesting Recent Link 4</a></li>
+                 <li><a href="#">Interesting Recent Link 5</a></li>
+                 <li><a href="#">Interesting Recent Link 6</a></li>
+                 <li><a href="#">Interesting Recent Link 7</a></li>
+               </ul>
+             </div>
+             <div id="tab2" class="tab_content">
+               <h3>Our Most Popular</h3>
+               <ul>
+                 <li><a href="#">Most Popular Link 1</a></li>
+                 <li><a href="#">Most Popular Link 2</a></li>
+                 <li><a href="#">Most Popular Link 3</a></li>
+                 <li><a href="#">Most Popular Link 4</a></li>
                </ul>
-             </div> 
-             <div id="tab3" class="tab_content"> 
-                 <h3>Who I Am</h3> 
-                 <img src="images/me.png" alt="" /><p>Lorem ipsum in libris debitis facilis qui, in usu esse falli deseruisse. Vel ut vivendo sensibus partiendo, liber philosophia ne vim. Viris oblique explicari has et. Nam noster iisque discere te, sale doming delectus est te, an debet quando eruditi pro. Ad dicant praesent persequeris has, ne vel minimum petentium periculis.</p>
-             </div>
-            </div>
-           </div>
-           
-            <div class="standard">
-               <h3>Things To Do</h3>
-                                       <ul>
-                                               <li><a href="#">Create</a></li>
-                                               <li><a href="#">Have Fun</a></li>
-                                               <li><a href="#">Share With Friends</a></li>
-                                               <li><a href="#">Play Games</a></li>
-                                               <li><a href="#">Upload</a></li>
-                                               <li><a href="#">Download</a></li>
-                                       </ul>
-
-                                       
-                               <h3>Sponsors</h3>
-                                       <img src="images/ad180.png" alt="" /><br /><br />
-
-                               <h3>Connect With Us</h3>
-                                       <ul>
-                                               <li><a href="#">Twitter</a></li>
-                                               <li><a href="#">Facebook</a></li>
-                                               <li><a href="#">LinkedIn</a></li>
-                                               <li><a href="#">Flickr</a></li>
-                                       </ul>
-                       </div>
-
-               </aside><!-- end of sidebar -->
-
-       </section><!-- end of #main content and sidebar-->
-       
-               <footer>
-               <section id="footer-area">
-
-                       <section id="footer-outer-block">
-                                       <aside class="footer-segment">
-                                                       <h4>Friends</h4>
-                                                               <ul>
-                                                                       <li><a href="#">one linkylink</a></li>
-                                                                       <li><a href="#">two linkylinks</a></li>
-                                                                       <li><a href="#">three linkylinks</a></li>
-                                                               </ul>
-                                       </aside><!-- end of #first footer segment -->
-
-                                       <aside class="footer-segment">
-                                                       <h4>Awesome Stuff</h4>
-                                                               <ul>
-                                                                       <li><a href="#">one linkylink</a></li>
-                                                                       <li><a href="#">two linkylinks</a></li>
-                                                                       <li><a href="#">three linkylinks</a></li>
-                                                               </ul>
-                                       </aside><!-- end of #second footer segment -->
-
-                                       <aside class="footer-segment">
-                                                       <h4>Coolness</h4>
-                                                               <ul>
-                                                                       <li><a href="#">one linkylink</a></li>
-                                                                       <li><a href="#">two linkylinks</a></li>
-                                                                       <li><a href="#">three linkylinks</a></li>
-                                                               </ul>
-                                       </aside><!-- end of #third footer segment -->
-                                       
-                                       <aside class="footer-segment">
-                                                       <h4>Blahdyblah</h4>
-                                                               <p>&copy; 2010 <a href="#">yoursite.com</a> Praesent libero. Sed cursus ante dapibus diam. Sed nisi.</p>
-                                       </aside><!-- end of #fourth footer segment -->
-
-                       </section><!-- end of footer-outer-block -->
-
-               </section><!-- end of footer-area -->
-       </footer>
-       
-</div><!-- #wrapper -->
-<!-- Free template created by http://freehtml5templates.com -->
-</body>
+             </div>
+             <div id="tab3" class="tab_content">
+               <h3>Who I Am</h3> <img src="images/me.png" alt=""
+               /><p>Lorem ipsum in libris debitis facilis qui, in usu
+               esse falli deseruisse. Vel ut vivendo sensibus
+               partiendo, liber philosophia ne vim. Viris oblique
+               explicari has et. Nam noster iisque discere te, sale
+               doming delectus est te, an debet quando eruditi
+               pro. Ad dicant praesent persequeris has, ne vel
+               minimum petentium periculis.</p>
+             </div>
+           </div>
+         </div>
+
+         <div class="standard">
+           <h3>Things To Do</h3>
+           <ul>
+             <li><a href="#">Create</a></li>
+             <li><a href="#">Have Fun</a></li>
+             <li><a href="#">Share With Friends</a></li>
+             <li><a href="#">Play Games</a></li>
+             <li><a href="#">Upload</a></li>
+             <li><a href="#">Download</a></li>
+           </ul>
+
+
+           <h3>Sponsors</h3>
+           <img src="images/ad180.png" alt="" /><br /><br />
+
+           <h3>Connect With Us</h3>
+           <ul>
+             <li><a href="#">Twitter</a></li>
+             <li><a href="#">Facebook</a></li>
+             <li><a href="#">LinkedIn</a></li>
+             <li><a href="#">Flickr</a></li>
+           </ul>
+         </div>
+
+       </aside><!-- end of sidebar -->
+
+      </section><!-- end of #main content and sidebar-->
+
+      <footer>
+       <section id="footer-area">
+
+         <section id="footer-outer-block">
+           <aside class="footer-segment">
+             <h4>Friends</h4>
+             <ul>
+               <li><a href="#">one linkylink</a></li>
+               <li><a href="#">two linkylinks</a></li>
+               <li><a href="#">three linkylinks</a></li>
+             </ul>
+           </aside><!-- end of #first footer segment -->
+
+           <aside class="footer-segment">
+             <h4>Awesome Stuff</h4>
+             <ul>
+               <li><a href="#">one linkylink</a></li>
+               <li><a href="#">two linkylinks</a></li>
+               <li><a href="#">three linkylinks</a></li>
+             </ul>
+           </aside><!-- end of #second footer segment -->
+
+           <aside class="footer-segment">
+             <h4>Coolness</h4>
+             <ul>
+               <li><a href="#">one linkylink</a></li>
+               <li><a href="#">two linkylinks</a></li>
+               <li><a href="#">three linkylinks</a></li>
+             </ul>
+           </aside><!-- end of #third footer segment -->
+
+           <aside class="footer-segment">
+             <h4>Blahdyblah</h4>
+             <p>© 2010 <a href="#">yoursite.com</a> Praesent
+             libero. Sed cursus ante dapibus diam. Sed nisi.</p>
+           </aside><!-- end of #fourth footer segment -->
+
+         </section><!-- end of footer-outer-block -->
+
+       </section><!-- end of footer-area -->
+      </footer>
+
+    </div><!-- #wrapper -->
+    <!-- Free template created by http://freehtml5templates.com -->
+  </body>
 </html>
index fa805b86a669f9408327ab4435d7c4d259333329..eb5547a778dffa5752f11d09a0f216cb26fb0688 100755 (executable)
-<!doctype html>
-<html lang="en">
-<head>
-       <meta charset="utf-8" />
-       <title>Freggies</title>
-       <link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
-       <link rel="stylesheet" type="text/css" href="print.css" media="print" />
-       <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
-</head>
-<body>
-<div id="wrapper"><!-- #wrapper -->
-
-       <nav><!-- top nav -->
-               <div class="menu">
-                       <ul>
-                               <li><a href="#">Home</a></li>
-                               <li><a href="#">About</a></li>
-                               <li><a href="#">Recipes</a></li>
-                               <li><a href="#">Contact Us</a></li>
-                       </ul>
-               </div>
-       </nav><!-- end of top nav -->
-       
-       <header><!-- header -->
-               <h1><a href="#">Freggies</a></h1>
-               <h2>Fruits and Veggies = Healthy Freggies</h2>
-       </header><!-- end of header -->
-       
-       <section id="main"><!-- #main content and sidebar area -->
-                       <section id="content"><!-- #content -->
-                       
-                       <b class="benefitsheading">Healthy Eating Benefits</b>
-                                       
-                                       <section class="benefits"> 
-                                               <a href="#"><img class="thumbnail" src="images/run.png" title="run" alt="run"/><span class="caption"><b>Increase Energy</b></span></a>
-                                       </section>
-                                       
-                                       <section class="benefits"> 
-                                               <a href="#"><img class="thumbnail" src="images/scale.png" title="scale" alt="scale"/><span class="caption"><b>Maintain Weight</b></span></a>
-                                       </section>
-                                       
-                                       <section class="benefits"> 
-                                               <a href="#"><img class="thumbnail" src="images/healthshield.png" title="healthy" alt="healthy"/><span class="caption"><b>Prevent Disease</b></span></a> 
-                                       </section>
-
-                       <article>
-                                                       <h2><a href="#">First Article Title</a></h2>
-
-                                                       <img src="images/fruits1.jpg" alt="" class="alignright" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.</p>
-                                               </article>
-                                               
-                       <article>
-                                                       <h2><a href="#">Second Article Title</a></h2>
-                                                       <img src="images/veggies1.jpg" alt="" class="alignleft" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.</p>
-                                               </article>
-                                               
-                       </section><!-- end of #content -->
-
-               <aside id="sidebar"><!-- sidebar -->
-                               <h3>Stuff</h3>
-                                       <ul>
-                                               <li><a href="#">Curabitur sodales</a></li>
-                                               <li><a href="#">Sed dignissim</a></li>
-                                               <li><a href="#">Fusce nec</a></li>
-                                               <li><a href="#">Nulla quis</a></li>
-                                       </ul>
-
-                               <h3>More Stuff</h3>
-                                       <ul>
-                                               <li><a href="#">Curabitur sodales</a></li>
-                                               <li><a href="#">Sed dignissim</a></li>
-                                               <li><a href="#">Fusce nec</a></li>
-                                               <li><a href="#">Nulla quis</a></li>
-                                               <li><a href="#">Blah</a></li>
-                                               <li><a href="#">More blah</a></li>
-                                       </ul>
-                                       
-                               <h3>Even More Stuff</h3>
-                                       <ul>
-                                               <li><a href="#">Curabitur sodales</a></li>
-                                               <li><a href="#">Sed dignissim</a></li>
-                                               <li><a href="#">Fusce nec</a></li>
-                                               <li><a href="#">Nulla quis</a></li>
-                                               <li><a href="#">Blah</a></li>
-                                               <li><a href="#">More blah</a></li>
-                                       </ul>
-
-               </aside><!-- end of sidebar -->
-
-       </section><!-- end of #main content and sidebar-->
-       
-               <footer>
-               <section id="footer-area">
-
-                       <section id="footer-outer-block">
-                                       <aside class="footer-segment">
-                                                       <h4>Friends</h4>
-                                                               <ul>
-                                                                       <li><a href="#">one linkylink</a></li>
-                                                                       <li><a href="#">two linkylinks</a></li>
-                                                                       <li><a href="#">three linkylinks</a></li>
-                                                                       <li><a href="#">four linkylinks</a></li>
-                                                                       <li><a href="#">five linkylinks</a></li>
-                                                               </ul>
-                                       </aside><!-- end of #first footer segment -->
-
-                                       <aside class="footer-segment">
-                                                       <h4>Awesome Stuff</h4>
-                                                               <ul>
-                                                                       <li><a href="#">one linkylink</a></li>
-                                                                       <li><a href="#">two linkylinks</a></li>
-                                                                       <li><a href="#">three linkylinks</a></li>
-                                                                       <li><a href="#">four linkylinks</a></li>
-                                                                       <li><a href="#">five linkylinks</a></li>
-                                                               </ul>
-                                       </aside><!-- end of #second footer segment -->
-
-                                       <aside class="footer-segment">
-                                                       <h4>Coolness</h4>
-                                                               <ul>
-                                                                       <li><a href="#">one linkylink</a></li>
-                                                                       <li><a href="#">two linkylinks</a></li>
-                                                                       <li><a href="#">three linkylinks</a></li>
-                                                                       <li><a href="#">four linkylinks</a></li>
-                                                                       <li><a href="#">five linkylinks</a></li>
-                                                               </ul>
-                                       </aside><!-- end of #third footer segment -->
-                                       
-                                       <aside class="footer-segment">
-                                                       <h4>Blahdyblah</h4>
-                                                               <p>Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.</p>
-                                       </aside><!-- end of #fourth footer segment -->
-
-                       </section><!-- end of footer-outer-block -->
-
-               </section><!-- end of footer-area -->
-               <section class="footerbottom">
-                       <p>&copy;2010 <a href="#">yoururl.com</a>
-               </section>
-       </footer>
-       
-</div><!-- #wrapper -->
-<!-- Free template created by http://freehtml5templates.com -->
-</body>
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml"
+      lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Freggies</title>
+    <link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
+    <link rel="stylesheet" type="text/css" href="print.css" media="print" />
+    <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
+  </head>
+  <body>
+    <div id="wrapper"><!-- #wrapper -->
+      <nav><!-- top nav -->
+       <div class="menu">
+         <ul>
+           <li><a href="#">Home</a></li>
+           <li><a href="#">About</a></li>
+           <li><a href="#">Recipes</a></li>
+           <li><a href="#">Contact Us</a></li>
+         </ul>
+       </div>
+      </nav><!-- end of top nav -->
+
+      <header><!-- header -->
+       <h1><a href="#">Freggies</a></h1>
+       <h2>Fruits and Veggies = Healthy Freggies</h2>
+      </header><!-- end of header -->
+
+      <section id="main"><!-- #main content and sidebar area -->
+       <section id="content"><!-- #content -->
+         <b class="benefitsheading">Healthy Eating Benefits</b>
+
+         <section class="benefits">
+           <a href="#"><img class="thumbnail" src="images/run.png"
+           title="run" alt="run"/><span class="caption"><b>Increase
+           Energy</b></span></a>
+         </section>
+
+         <section class="benefits">
+           <a href="#"><img class="thumbnail" src="images/scale.png"
+           title="scale" alt="scale"/><span class="caption"><b>Maintain
+           Weight</b></span></a>
+         </section>
+
+         <section class="benefits">
+           <a href="#"><img class="thumbnail"
+           src="images/healthshield.png" title="healthy"
+           alt="healthy"/><span class="caption"><b>Prevent
+           Disease</b></span></a>
+         </section>
+
+         <article>
+           <h2><a href="#">First Article Title</a></h2>
+
+           <img src="images/fruits1.jpg" alt="" class="alignright"/>
+           <p>Lorem ipsum dolor sit amet, consectetur adipiscing
+           elit. Integer nec odio. Praesent libero. Sed cursus ante
+           dapibus diam. Sed nisi. Nulla quis sem at nibh elementum
+           imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec
+           tellus sed augue semper porta. Mauris massa. Vestibulum
+           lacinia arcu eget nulla. Class aptent taciti sociosqu ad
+           litora torquent per conubia nostra, per inceptos
+           himenaeos. Curabitur sodales ligula in libero. Sed
+           dignissim lacinia nunc.</p>
+         </article>
+
+         <article>
+           <h2><a href="#">Second Article Title</a></h2>
+           <img src="images/veggies1.jpg" alt="" class="alignleft"/>
+           <p>Lorem ipsum dolor sit amet, consectetur adipiscing
+           elit. Integer nec odio. Praesent libero. Sed cursus ante
+           dapibus diam. Sed nisi. Nulla quis sem at nibh elementum
+           imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec
+           tellus sed augue semper porta. Mauris massa. Vestibulum
+           lacinia arcu eget nulla. Class aptent taciti sociosqu ad
+           litora torquent per conubia nostra, per inceptos
+           himenaeos. Curabitur sodales ligula in libero. Sed
+           dignissim lacinia nunc.</p>
+         </article>
+
+       </section><!-- end of #content -->
+
+       <aside id="sidebar"><!-- sidebar -->
+         <h3>Stuff</h3>
+         <ul>
+           <li><a href="#">Curabitur sodales</a></li>
+           <li><a href="#">Sed dignissim</a></li>
+           <li><a href="#">Fusce nec</a></li>
+           <li><a href="#">Nulla quis</a></li>
+         </ul>
+
+         <h3>More Stuff</h3>
+         <ul>
+           <li><a href="#">Curabitur sodales</a></li>
+           <li><a href="#">Sed dignissim</a></li>
+           <li><a href="#">Fusce nec</a></li>
+           <li><a href="#">Nulla quis</a></li>
+           <li><a href="#">Blah</a></li>
+           <li><a href="#">More blah</a></li>
+         </ul>
+
+         <h3>Even More Stuff</h3>
+         <ul>
+           <li><a href="#">Curabitur sodales</a></li>
+           <li><a href="#">Sed dignissim</a></li>
+           <li><a href="#">Fusce nec</a></li>
+           <li><a href="#">Nulla quis</a></li>
+           <li><a href="#">Blah</a></li>
+           <li><a href="#">More blah</a></li>
+         </ul>
+
+       </aside><!-- end of sidebar -->
+
+      </section><!-- end of #main content and sidebar-->
+
+      <footer>
+       <section id="footer-area">
+
+         <section id="footer-outer-block">
+           <aside class="footer-segment">
+             <h4>Friends</h4>
+             <ul>
+               <li><a href="#">one linkylink</a></li>
+               <li><a href="#">two linkylinks</a></li>
+               <li><a href="#">three linkylinks</a></li>
+               <li><a href="#">four linkylinks</a></li>
+               <li><a href="#">five linkylinks</a></li>
+             </ul>
+           </aside><!-- end of #first footer segment -->
+
+           <aside class="footer-segment">
+             <h4>Awesome Stuff</h4>
+             <ul>
+               <li><a href="#">one linkylink</a></li>
+               <li><a href="#">two linkylinks</a></li>
+               <li><a href="#">three linkylinks</a></li>
+               <li><a href="#">four linkylinks</a></li>
+               <li><a href="#">five linkylinks</a></li>
+             </ul>
+           </aside><!-- end of #second footer segment -->
+
+           <aside class="footer-segment">
+             <h4>Coolness</h4>
+             <ul>
+               <li><a href="#">one linkylink</a></li>
+               <li><a href="#">two linkylinks</a></li>
+               <li><a href="#">three linkylinks</a></li>
+               <li><a href="#">four linkylinks</a></li>
+               <li><a href="#">five linkylinks</a></li>
+             </ul>
+           </aside><!-- end of #third footer segment -->
+
+           <aside class="footer-segment">
+             <h4>Blahdyblah</h4>
+             <p>Integer nec odio. Praesent libero. Sed cursus ante
+             dapibus diam. Sed nisi. Nulla quis sem at nibh elementum
+             imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec
+             tellus sed augue semper porta.</p>
+           </aside><!-- end of #fourth footer segment -->
+
+         </section><!-- end of footer-outer-block -->
+
+       </section><!-- end of footer-area -->
+       <section class="footerbottom">
+         <p>©;2010 <a href="#">yoururl.com</a></p>
+       </section>
+      </footer>
+
+    </div><!-- #wrapper -->
+    <!-- Free template created by http://freehtml5templates.com -->
+  </body>
 </html>
index ddc562811348712b52aafbedae1ed4e1067b5c84..6f3600bc1c5e857b4331472107a0d8dba6d6fca6 100755 (executable)
-<!DOCTYPE html>\r
-<html>\r
-<head>\r
-       <meta charset="UTF-8">\r
-       <title>my title</title>\r
-       <link rel="stylesheet" href="style.css" type="text/css" media="screen" />\r
-       <link rel="stylesheet" type="text/css" href="print.css" media="print" />\r
-       <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->\r
-</head>\r
-\r
-<body>\r
-\r
-<div id="wrapper">\r
-\r
-       <header>\r
-               <h1 id="sitename"><a href="#">Turquoise Swirls</a></h1>\r
-               <div id="description">Your interesting & compelling tag line</div>\r
-               <div id="top">\r
-                       <nav>\r
-                               <ul>\r
-                                       <li><a href="#">Home</a></li>\r
-                                       <li><a href="#">About</a></li>\r
-                                       <li><a href="#">Contact</a></li>\r
-                                       <li><a href="#">Support</a></li>\r
-                               </ul>\r
-                       </nav>\r
-               </div>\r
-       </header>\r
-\r
-       <section>\r
-\r
-               <div id="container">\r
-                       <div id="content">\r
-\r
-               <article>\r
-                       <h2><a href="#" rel="bookmark">Your Awesome Article Title</a></h2>\r
-                       <div class="entry">\r
-                               <p>\r
-                               Lorem ipsum pri at agam postulant. Vis option euismod ut, mucius nominavi noluisse vim in, his ne mediocrem qualisque necessitatibus. Has at ubique utroque molestie, <a href="#">vim ne ceteros ponderum</a> hendrerit. No everti singulis disputationi eam, minim iusto cu usu, sint nulla harum duo ei. Ut vidit cotidieque ullamcorper mea, dolorem oportere vulputate ea mei, eu ius error perpetua theophrastus.\r
-                               </p>\r
-                               <img src="images/turquoise-stone.png" alt="" class="alignright framed" /><p>\r
-                               Quis quaerendum pri no, sit ad noster timeam. An pro consul concludaturque, no possim impetus mei. Facer oblique referrentur te qui, ornatus postulant evertitur ius ea. No sed vero aperiri equidem, pri et perpetua erroribus accusamus, doctus menandri ad qui. Natum dicunt delenit te vim, has te decore deseruisse. Quot malorum legendos ut est, urbanitas interpretaris id qui, duo populo animal conclusionemque ne.\r
-                               </p>\r
-                               <p>\r
-                       Iriure postulant pro ad. Wisi delectus legendos an duo, alia utroque recteque no mel, te sed porro alienum. Vix tale suavitate incorrupte at, viris tractatos incorrupte pri ad. Veri putant volutpat his ad, no doming deserunt persecuti eum, ad nobis essent sed. Ad vis mandamus expetenda, salutandi iracundia repudiandae mei ei. Alii pericula abhorreant mei an, vix dignissim consequuntur ex, alienum invenire posidonium nam ei.\r
-                               </p>\r
-                               <blockquote>\r
-                       Minim elitr congue eu mea, quo minimum verterem gloriatur in, ex alia cotidieque complectitur qui. Eu sit idque quodsi constituto, ex mea omnesque adolescens. Sit id fabulas eligendi suscipiantur, eu natum perfecto sit, at brute option lucilius mea. Te malis disputationi has, ex eum habeo sententiae. An est meliore denique voluptatibus, nam putent voluptua inciderint in, ne simul graeci nonummy vel.\r
-                               </blockquote>\r
-                               <p>\r
-                       Quod malorum delectus ne duo, an pri facer doming quaeque, ancillae omnesque his ei. At sed nibh illum placerat. At quod appareat reprehendunt vim, te pri velit nonumy antiopam. Exerci placerat est no, cu quo affert vidisse democritum. Debitis maiestatis referrentur qui ad. Sonet praesent intellegebat mei ex, duo meis epicurei cu. Idque volutpat sadipscing ut est, eos eu alienum oportere, eum ea dicat ignota persequeris.\r
-                               </p>\r
-                               <p>\r
-                       Veritus menandri referrentur est cu. Eos ea mazim elaboraret delicatissimi, puto nostrud platonem vis an. Mea eirmod torquatos et, ad sonet minimum mea, mei eu causae eruditi intellegat. Velit vitae ridens et vel, commodo suscipit persequeris sea id, iudico persius eruditi in vel. Magna eloquentiam mei et, quo erat vituperatoribus ea, in sale audiam quo. Ad eum illum tantas volumus, iriure feugiat recteque ei est.\r
-                               </p>\r
-                       </div>\r
-               </article>\r
-               \r
-                       </div><!-- #content-->\r
-               </div><!-- #container-->\r
-\r
-    <aside id="left"><!-- start left sidebar -->\r
-                       <div class="box">\r
-                               <h3>Main Menu</h3>\r
-                               <div class="inner">\r
-                                       <ul>\r
-                                         <li><a href="#">Products</a>\r
-                                       <li><a href="#">Support</a>\r
-                                       <li><a href="#">Popular Uses</a>\r
-                                       </ul>\r
-                               </div>\r
-                       </div><!-- .box -->\r
-\r
-                       <div class="box">\r
-                               <h3>Our Sponsor</h3>\r
-                                       <div class="inner">\r
-                                               <br />\r
-                                               <a href="#"><img src="images/ad600.jpg" alt="" class="aligncenter" /></a>\r
-                                               <br />\r
-                                       </div>\r
-                       </div><!-- .box -->\r
-\r
-               </aside><!-- end left sidebar -->\r
-\r
-               <aside id="right"><!-- start right sidebar -->  \r
-\r
-                       <div class="box">\r
-                               <h3>Connect With Us</h3>\r
-                               <div class="inner">\r
-                                       <ul>\r
-                                               <li><a href="#">Twitter</a></li>\r
-                                               <li><a href="#">Facebook</a></li>\r
-                                       </ul>\r
-       </div>\r
-                       </div><!-- .box -->\r
-\r
-                       <div class="box">\r
-                               <h3>Recent Articles</h3>\r
-                               <div class="inner">\r
-                                       <ul>\r
-                                               <li><a href="#">How To Clean Anything</a></li>\r
-                                               <li><a href="#">Get The Most Out of Widgets</a></li>\r
-                                       </ul>\r
-       </div>\r
-                       </div><!-- .box -->\r
-                       \r
-                       <div class="box">\r
-                                       <h3>Recommended</h3>\r
-                                       <div class="inner">\r
-                                               <br />\r
-                                               <a href="#"><img src="images/ad125.jpg" alt="" class="aligncenter" /></a>\r
-                                               <br />\r
-                                               <a href="#"><img src="images/ad125.jpg" alt="" class="aligncenter" /></a>\r
-                                               <br />\r
-                                               <a href="#"><img src="images/ad125.jpg" alt="" class="aligncenter" /></a>\r
-                                               <br />\r
-                                       </div>\r
-                       </div><!-- .box -->\r
-                       \r
-               </aside><!-- end right sidebar -->              \r
-       \r
-       </section>\r
-\r
-       <footer>\r
-               <div id="copyright">\r
-                       <span>&copy; 2010 All rights reserved <a href="#">yoursite.com</a></span>\r
-               </div>\r
-       </footer>\r
-\r
-</div><!-- #wrapper -->\r
-<!-- Free template created by http://freehtml5templates.com -->\r
-</body>\r
-</html>\r
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml"
+      lang="en">
+  <head>
+    <meta charset="UTF-8"/>
+    <title>my title</title>
+    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
+    <link rel="stylesheet" type="text/css" href="print.css" media="print" />
+    <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
+  </head>
+
+  <body>
+
+    <div id="wrapper">
+
+      <header>
+       <h1 id="sitename"><a href="#">Turquoise Swirls</a></h1>
+       <div id="description">Your interesting &amp; compelling tag line</div>
+       <div id="top">
+         <nav>
+           <ul>
+             <li><a href="#">Home</a></li>
+             <li><a href="#">About</a></li>
+             <li><a href="#">Contact</a></li>
+             <li><a href="#">Support</a></li>
+           </ul>
+         </nav>
+       </div>
+      </header>
+
+      <section>
+
+       <div id="container">
+         <div id="content">
+
+           <article>
+             <h2><a href="#" rel="bookmark">Your Awesome Article Title</a></h2>
+             <div class="entry">
+               <p>
+                 Lorem ipsum pri at agam postulant. Vis option
+                 euismod ut, mucius nominavi noluisse vim in, his ne
+                 mediocrem qualisque necessitatibus. Has at ubique
+                 utroque molestie, <a href="#">vim ne ceteros
+                 ponderum</a> hendrerit. No everti singulis
+                 disputationi eam, minim iusto cu usu, sint nulla
+                 harum duo ei. Ut vidit cotidieque ullamcorper mea,
+                 dolorem oportere vulputate ea mei, eu ius error
+                 perpetua theophrastus.
+               </p>
+               <img src="images/turquoise-stone.png" alt=""
+                    class="alignright framed" />
+               <p>
+                 Quis quaerendum pri no, sit ad noster timeam. An pro
+                 consul concludaturque, no possim impetus mei. Facer
+                 oblique referrentur te qui, ornatus postulant
+                 evertitur ius ea. No sed vero aperiri equidem, pri
+                 et perpetua erroribus accusamus, doctus menandri ad
+                 qui. Natum dicunt delenit te vim, has te decore
+                 deseruisse. Quot malorum legendos ut est, urbanitas
+                 interpretaris id qui, duo populo animal
+                 conclusionemque ne.
+               </p>
+               <p>
+                 Iriure postulant pro ad. Wisi delectus legendos an
+                 duo, alia utroque recteque no mel, te sed porro
+                 alienum. Vix tale suavitate incorrupte at, viris
+                 tractatos incorrupte pri ad. Veri putant volutpat
+                 his ad, no doming deserunt persecuti eum, ad nobis
+                 essent sed. Ad vis mandamus expetenda, salutandi
+                 iracundia repudiandae mei ei. Alii pericula
+                 abhorreant mei an, vix dignissim consequuntur ex,
+                 alienum invenire posidonium nam ei.
+               </p>
+               <blockquote>
+                 Minim elitr congue eu mea, quo minimum verterem
+                 gloriatur in, ex alia cotidieque complectitur
+                 qui. Eu sit idque quodsi constituto, ex mea omnesque
+                 adolescens. Sit id fabulas eligendi suscipiantur, eu
+                 natum perfecto sit, at brute option lucilius mea. Te
+                 malis disputationi has, ex eum habeo sententiae. An
+                 est meliore denique voluptatibus, nam putent
+                 voluptua inciderint in, ne simul graeci nonummy vel.
+               </blockquote>
+               <p>
+                 Quod malorum delectus ne duo, an pri facer doming
+                 quaeque, ancillae omnesque his ei. At sed nibh illum
+                 placerat. At quod appareat reprehendunt vim, te pri
+                 velit nonumy antiopam. Exerci placerat est no, cu
+                 quo affert vidisse democritum. Debitis maiestatis
+                 referrentur qui ad. Sonet praesent intellegebat mei
+                 ex, duo meis epicurei cu. Idque volutpat sadipscing
+                 ut est, eos eu alienum oportere, eum ea dicat ignota
+                 persequeris.
+               </p>
+               <p>
+                 Veritus menandri referrentur est cu. Eos ea mazim
+                 elaboraret delicatissimi, puto nostrud platonem vis
+                 an. Mea eirmod torquatos et, ad sonet minimum mea,
+                 mei eu causae eruditi intellegat. Velit vitae ridens
+                 et vel, commodo suscipit persequeris sea id, iudico
+                 persius eruditi in vel. Magna eloquentiam mei et,
+                 quo erat vituperatoribus ea, in sale audiam quo. Ad
+                 eum illum tantas volumus, iriure feugiat recteque ei
+                 est.
+               </p>
+             </div>
+           </article>
+
+         </div><!-- #content-->
+       </div><!-- #container-->
+
+       <aside id="left"><!-- start left sidebar -->
+         <div class="box">
+           <h3>Main Menu</h3>
+           <div class="inner">
+             <ul>
+               <li><a href="#">Products</a></li>
+               <li><a href="#">Support</a></li>
+               <li><a href="#">Popular Uses</a></li>
+             </ul>
+           </div>
+         </div><!-- .box -->
+
+         <div class="box">
+           <h3>Our Sponsor</h3>
+           <div class="inner">
+             <br />
+             <a href="#"><img src="images/ad600.jpg" alt="" class="aligncenter" /></a>
+             <br />
+           </div>
+         </div><!-- .box -->
+
+       </aside><!-- end left sidebar -->
+
+       <aside id="right"><!-- start right sidebar -->
+
+         <div class="box">
+           <h3>Connect With Us</h3>
+           <div class="inner">
+             <ul>
+               <li><a href="#">Twitter</a></li>
+               <li><a href="#">Facebook</a></li>
+             </ul>
+           </div>
+         </div><!-- .box -->
+
+         <div class="box">
+           <h3>Recent Articles</h3>
+           <div class="inner">
+             <ul>
+               <li><a href="#">How To Clean Anything</a></li>
+               <li><a href="#">Get The Most Out of Widgets</a></li>
+             </ul>
+           </div>
+         </div><!-- .box -->
+
+         <div class="box">
+           <h3>Recommended</h3>
+           <div class="inner">
+             <br />
+             <a href="#"><img src="images/ad125.jpg" alt="" class="aligncenter" /></a>
+             <br />
+             <a href="#"><img src="images/ad125.jpg" alt="" class="aligncenter" /></a>
+             <br />
+             <a href="#"><img src="images/ad125.jpg" alt="" class="aligncenter" /></a>
+             <br />
+           </div>
+         </div><!-- .box -->
+
+       </aside><!-- end right sidebar -->
+
+      </section>
+
+      <footer>
+       <div id="copyright">
+         <span>© 2010 All rights reserved <a href="#">yoursite.com</a></span>
+       </div>
+      </footer>
+
+    </div><!-- #wrapper -->
+    <!-- Free template created by http://freehtml5templates.com -->
+  </body>
+</html>