style/adropabove/index.html

   1 <!DOCTYPE html>
   2 <html xmlns="http://www.w3.org/1999/xhtml"
   3       lang="en">
   4   <head>
   5     <meta charset="utf-8" />
   6     <title>A Drop Above</title>
   7     <link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
   8     <link rel="stylesheet" type="text/css" href="print.css" media="print" />
   9     <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
  10     <link rel="stylesheet" type="text/css" href="superfish.css" media="screen"/>
  11     <script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
  12     <script type="text/javascript" src="js/hoverIntent.js"></script>
  13     <script type="text/javascript" src="js/superfish.js"></script>
  14     <script type="text/javascript">
  15
  16       // initialise plugins
  17       jQuery(function(){
  18       jQuery('ul.sf-menu').superfish();
  19       });
  20
  21     </script>
  22   </head>
  23   <body>
  24     <div id="wrapper"><!-- #wrapper -->
  25
  26       <nav><!-- top nav -->
  27         <ul class="sf-menu">
  28           <li class="current">
  29             <a href="#">Home</a>
  30           </li>
  31           <li>
  32             <a href="#">About</a>
  33             <ul>
  34               <li>
  35                 <a href="#">Mission</a>
  36               </li>
  37               <li>
  38                 <a href="#">Our Team</a>
  39                 <ul>
  40                   <li><a href="#">Joe</a></li>
  41                   <li><a href="#">Jane</a></li>
  42                   <li><a href="#">Tom</a></li>
  43                 </ul>
  44               </li>
  45               <li>
  46                 <a href="#">Office Locations</a>
  47                 <ul>
  48                   <li><a href="#">New York</a></li>
  49                   <li><a href="#">Chicago</a></li>
  50                   <li><a href="#">Denver</a></li>
  51                 </ul>
  52               </li>
  53             </ul>
  54           </li>
  55           <li>
  56             <a href="#">Products</a>
  57             <ul>
  58               <li>
  59                 <a href="#">Widgets</a>
  60                 <ul>
  61                   <li><a href="#">Red</a></li>
  62                   <li><a href="#">Blue</a></li>
  63                 </ul>
  64               </li>
  65               <li>
  66                 <a href="#">Wodgets</a>
  67                 <ul>
  68                   <li><a href="#">Basic</a></li>
  69                   <li><a href="#">Advanced</a></li>
  70                   <li><a href="#">Pro</a></li>
  71                 </ul>
  72               </li>
  73             </ul>
  74           </li>
  75           <li>
  76             <a href="#">Contact Us</a>
  77           </li>
  78         </ul>
  79       </nav><!-- end of top nav -->
  80
  81       <header><!-- header -->
  82         <h1><a href="#">A Drop Above</a></h1>
  83         <h2>Your tag line here</h2>
  84       </header><!-- end of header -->
  85
  86       <section id="main"><!-- #main content and sidebar area -->
  87         <section id="content"><!-- #content -->
  88
  89           <article>
  90             <h2><a href="#">First Article Title</a></h2> <img
  91             src="images/flowersky.jpg" alt="flower" class="alignleft"/>
  92             <p>
  93               Lorem ipsum dolor sit amet, consectetur adipiscing
  94               elit. Integer nec odio. Praesent libero. Sed cursus ante
  95               dapibus diam. Sed nisi. Nulla quis sem at nibh elementum
  96               imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce
  97               nec tellus sed augue semper porta. Mauris
  98               massa. Vestibulum lacinia arcu eget nulla. Class aptent
  99               taciti sociosqu ad litora torquent per conubia nostra,
 100               per inceptos himenaeos. Curabitur sodales ligula in
 101               libero. Sed dignissim lacinia nunc.
 102             </p>
 103           </article>
 104
 105           <article>
 106             <h2><a href="#">Second Article Title</a></h2>
 107             <p>
 108               Lorem ipsum dolor sit amet, consectetur adipiscing
 109               elit. Integer nec odio. Praesent libero. Sed cursus ante
 110               dapibus diam. Sed nisi. Nulla quis sem at nibh elementum
 111               imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce
 112               nec tellus sed augue semper porta. Mauris
 113               massa. Vestibulum lacinia arcu eget nulla. Class aptent
 114               taciti sociosqu ad litora torquent per conubia nostra,
 115               per inceptos himenaeos. Curabitur sodales ligula in
 116               libero. Sed dignissim lacinia nunc.
 117             </p>
 118             <p>
 119               Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem
 120               at nibh elementum imperdiet. Duis sagittis
 121               ipsum. Praesent mauris. Fusce nec tellus sed augue
 122               semper porta. Mauris massa. Vestibulum lacinia arcu eget
 123               nulla. Class aptent taciti sociosqu ad litora torquent
 124               per conubia nostra, per inceptos himenaeos. Curabitur
 125               sodales ligula in libero. Sed dignissim lacinia nunc.
 126             </p>
 127           </article>
 128
 129         </section><!-- end of #content -->
 130
 131         <aside id="sidebar"><!-- sidebar -->
 132           <h3>Stuff</h3>
 133           <ul>
 134             <li><a href="#">Curabitur sodales</a></li>
 135             <li><a href="#">Sed dignissim</a></li>
 136             <li><a href="#">Fusce nec</a></li>
 137             <li><a href="#">Nulla quis</a></li>
 138           </ul>
 139
 140           <h3>More Stuff</h3>
 141           <ul>
 142             <li><a href="#">Blah</a></li>
 143             <li><a href="#">More blah</a></li>
 144           </ul>
 145
 146         </aside><!-- end of sidebar -->
 147
 148       </section><!-- end of #main content and sidebar-->
 149
 150       <footer>
 151         <section id="footer-area">
 152
 153           <section id="footer-outer-block">
 154             <aside class="footer-segment">
 155               <h4>Friends</h4>
 156               <ul>
 157                 <li><a href="#">one linkylink</a></li>
 158                 <li><a href="#">two linkylinks</a></li>
 159                 <li><a href="#">three linkylinks</a></li>
 160                 <li><a href="#">four linkylinks</a></li>
 161                 <li><a href="#">five linkylinks</a></li>
 162               </ul>
 163             </aside><!-- end of #first footer segment -->
 164
 165             <aside class="footer-segment">
 166               <h4>Awesome Stuff</h4>
 167               <ul>
 168                 <li><a href="#">one linkylink</a></li>
 169                 <li><a href="#">two linkylinks</a></li>
 170                 <li><a href="#">three linkylinks</a></li>
 171                 <li><a href="#">four linkylinks</a></li>
 172                 <li><a href="#">five linkylinks</a></li>
 173               </ul>
 174             </aside><!-- end of #second footer segment -->
 175
 176             <aside class="footer-segment">
 177               <h4>Coolness</h4>
 178               <ul>
 179                 <li><a href="#">one linkylink</a></li>
 180                 <li><a href="#">two linkylinks</a></li>
 181                 <li><a href="#">three linkylinks</a></li>
 182                 <li><a href="#">four linkylinks</a></li>
 183                 <li><a href="#">five linkylinks</a></li>
 184               </ul>
 185             </aside><!-- end of #third footer segment -->
 186
 187             <aside class="footer-segment">
 188               <h4>Blahdyblah</h4>
 189               <p>
 190                 Integer nec odio. Praesent libero. Sed cursus ante
 191                 dapibus diam. Sed nisi. Nulla quis sem at nibh
 192                 elementum imperdiet. Duis sagittis ipsum. Praesent
 193                 mauris. Fusce nec tellus sed augue semper porta.
 194               </p>
 195             </aside><!-- end of #fourth footer segment -->
 196
 197           </section><!-- end of footer-outer-block -->
 198
 199         </section><!-- end of footer-area -->
 200       </footer>
 201
 202     </div><!-- #wrapper -->
 203     <!-- Free template created by http://freehtml5templates.com -->
 204   </body>
 205 </html>