style/adropabove/index.html

   1 <!doctype html>
   2 <html lang="en">
   3 <head>
   4         <meta charset="utf-8" />
   5         <title>A Drop Above</title>
   6         <link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
   7         <link rel="stylesheet" type="text/css" href="print.css" media="print" />
   8         <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
   9                 <link rel="stylesheet" type="text/css" href="superfish.css" media="screen">
  10                 <script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
  11                 <script type="text/javascript" src="js/hoverIntent.js"></script>
  12                 <script type="text/javascript" src="js/superfish.js"></script>
  13                 <script type="text/javascript">
  14
  15                 // initialise plugins
  16                 jQuery(function(){
  17                         jQuery('ul.sf-menu').superfish();
  18                 });
  19
  20                 </script>
  21 </head>
  22 <body>
  23 <div id="wrapper"><!-- #wrapper -->
  24
  25         <nav><!-- top nav -->
  26                 <ul class="sf-menu">
  27                         <li class="current">
  28                                 <a href="#">Home</a>
  29                         </li>
  30                         <li>
  31                                 <a href="#">About</a>
  32                                 <ul>
  33                                         <li>
  34                                                 <a href="#">Mission</a>
  35                                         </li>
  36                                         <li>
  37                                                 <a href="#">Our Team</a>
  38                                                 <ul>
  39                                                         <li><a href="#">Joe</a></li>
  40                                                         <li><a href="#">Jane</a></li>
  41                                                         <li><a href="#">Tom</a></li>
  42                                                 </ul>
  43                                         </li>
  44                                         <li>
  45                                                 <a href="#">Office Locations</a>
  46                                                 <ul>
  47                                                         <li><a href="#">New York</a></li>
  48                                                         <li><a href="#">Chicago</a></li>
  49                                                         <li><a href="#">Denver</a></li>
  50                                                 </ul>
  51                                         </li>
  52                                 </ul>
  53                         </li>
  54                         <li>
  55                                 <a href="#">Products</a>
  56                                 <ul>
  57                                         <li>
  58                                                 <a href="#">Widgets</a>
  59                                                 <ul>
  60                                                         <li><a href="#">Red</a></li>
  61                                                         <li><a href="#">Blue</a></li>
  62                                                 </ul>
  63                                         </li>
  64                                         <li>
  65                                                 <a href="#">Wodgets</a>
  66                                                 <ul>
  67                                                         <li><a href="#">Basic</a></li>
  68                                                         <li><a href="#">Advanced</a></li>
  69                                                         <li><a href="#">Pro</a></li>
  70                                                 </ul>
  71                                         </li>
  72                                 </ul>
  73                         </li>
  74                         <li>
  75                                 <a href="#">Contact Us</a>
  76                         </li>
  77                 </ul>
  78         </nav><!-- end of top nav -->
  79
  80         <header><!-- header -->
  81                 <h1><a href="#">A Drop Above</a></h1>
  82                 <h2>Your tag line here</h2>
  83         </header><!-- end of header -->
  84
  85         <section id="main"><!-- #main content and sidebar area -->
  86                         <section id="content"><!-- #content -->
  87
  88                         <article>
  89                                                         <h2><a href="#">First Article Title</a></h2>
  90                                                         <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>
  91                                                 </article>
  92
  93                         <article>
  94                                                         <h2><a href="#">Second Article Title</a></h2>
  95                                                         <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>
  96                                                         <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>
  97                                                 </article>
  98
  99                         </section><!-- end of #content -->
 100
 101                 <aside id="sidebar"><!-- sidebar -->
 102                                 <h3>Stuff</h3>
 103                                         <ul>
 104                                                 <li><a href="#">Curabitur sodales</a></li>
 105                                                 <li><a href="#">Sed dignissim</a></li>
 106                                                 <li><a href="#">Fusce nec</a></li>
 107                                                 <li><a href="#">Nulla quis</a></li>
 108                                         </ul>
 109
 110                                 <h3>More Stuff</h3>
 111                                         <ul>
 112                                                 <li><a href="#">Blah</a></li>
 113                                                 <li><a href="#">More blah</a></li>
 114                                         </ul>
 115
 116                 </aside><!-- end of sidebar -->
 117
 118         </section><!-- end of #main content and sidebar-->
 119
 120                 <footer>
 121                 <section id="footer-area">
 122
 123                         <section id="footer-outer-block">
 124                                         <aside class="footer-segment">
 125                                                         <h4>Friends</h4>
 126                                                                 <ul>
 127                                                                         <li><a href="#">one linkylink</a></li>
 128                                                                         <li><a href="#">two linkylinks</a></li>
 129                                                                         <li><a href="#">three linkylinks</a></li>
 130                                                                         <li><a href="#">four linkylinks</a></li>
 131                                                                         <li><a href="#">five linkylinks</a></li>
 132                                                                 </ul>
 133                                         </aside><!-- end of #first footer segment -->
 134
 135                                         <aside class="footer-segment">
 136                                                         <h4>Awesome Stuff</h4>
 137                                                                 <ul>
 138                                                                         <li><a href="#">one linkylink</a></li>
 139                                                                         <li><a href="#">two linkylinks</a></li>
 140                                                                         <li><a href="#">three linkylinks</a></li>
 141                                                                         <li><a href="#">four linkylinks</a></li>
 142                                                                         <li><a href="#">five linkylinks</a></li>
 143                                                                 </ul>
 144                                         </aside><!-- end of #second footer segment -->
 145
 146                                         <aside class="footer-segment">
 147                                                         <h4>Coolness</h4>
 148                                                                 <ul>
 149                                                                         <li><a href="#">one linkylink</a></li>
 150                                                                         <li><a href="#">two linkylinks</a></li>
 151                                                                         <li><a href="#">three linkylinks</a></li>
 152                                                                         <li><a href="#">four linkylinks</a></li>
 153                                                                         <li><a href="#">five linkylinks</a></li>
 154                                                                 </ul>
 155                                         </aside><!-- end of #third footer segment -->
 156
 157                                         <aside class="footer-segment">
 158                                                         <h4>Blahdyblah</h4>
 159                                                                 <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>
 160                                         </aside><!-- end of #fourth footer segment -->
 161
 162                         </section><!-- end of footer-outer-block -->
 163
 164                 </section><!-- end of footer-area -->
 165         </footer>
 166
 167 </div><!-- #wrapper -->
 168 <!-- Free template created by http://freehtml5templates.com -->
 169 </body>
 170 </html>