style/bluenightsky/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>BlueNightSky</title>
   7     <link rel="stylesheet" href="styles.css"
   8           type="text/css" media="screen" />
   9     <link rel="stylesheet" href="print.css"
  10           type="text/css" media="print" />
  11     <script type="text/javascript"
  12             src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js">
  13     </script>
  14     <script type="text/javascript" src="js/simpletabs.js"></script>
  15     <link rel="stylesheet" href="lightbox.css"
  16           type="text/css" media="screen" />
  17     <script type="text/javascript" src="js/jquery.js"></script>
  18     <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
  19     <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
  20     <script type="text/javascript">
  21       $(function() {
  22       $('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
  23       });
  24     </script>
  25   </head>
  26   <body>
  27     <div id="wrapper"><!-- #wrapper -->
  28
  29       <header><!-- header -->
  30         <h1><a href="#">Blue Night Sky</a></h1>
  31         <h2>Your compelling tag line goes here</h2>
  32         <img src="images/bluenightsky.png" width="940" height="200" alt=""/>
  33         <!-- header image -->
  34       </header><!-- end of header -->
  35
  36       <nav><!-- top nav -->
  37         <div class="menu">
  38
  39         </div>
  40       </nav><!-- end of top nav -->
  41
  42       <section id="main"><!-- #main content and sidebar area -->
  43
  44         <section id="content"><!-- #content -->
  45           <article>
  46
  47           </article>
  48         </section><!-- end of #content -->
  49
  50         <aside id="sidebar"><!-- sidebar -->
  51
  52           <div class="tabwidget">
  53             <ul class="tabs">
  54               <li><a href="#tab1">Recent</a></li>
  55               <li><a href="#tab2">Popular</a></li>
  56               <li><a href="#tab3">About Me</a></li>
  57             </ul>
  58             <div class="tab_container">
  59               <div id="tab1" class="tab_content">
  60                 <h3>Recent Articles</h3>
  61                 <ul>
  62                   <li><a href="#">Interesting Recent Link 1</a></li>
  63                   <li><a href="#">Interesting Recent Link 2</a></li>
  64                   <li><a href="#">Interesting Recent Link 3</a></li>
  65                   <li><a href="#">Interesting Recent Link 4</a></li>
  66                   <li><a href="#">Interesting Recent Link 5</a></li>
  67                   <li><a href="#">Interesting Recent Link 6</a></li>
  68                   <li><a href="#">Interesting Recent Link 7</a></li>
  69                 </ul>
  70               </div>
  71               <div id="tab2" class="tab_content">
  72                 <h3>Our Most Popular</h3>
  73                 <ul>
  74                   <li><a href="#">Most Popular Link 1</a></li>
  75                   <li><a href="#">Most Popular Link 2</a></li>
  76                   <li><a href="#">Most Popular Link 3</a></li>
  77                   <li><a href="#">Most Popular Link 4</a></li>
  78                 </ul>
  79               </div>
  80               <div id="tab3" class="tab_content">
  81                 <h3>Who I Am</h3> <img src="images/me.png" alt=""
  82                 /><p>Lorem ipsum in libris debitis facilis qui, in usu
  83                 esse falli deseruisse. Vel ut vivendo sensibus
  84                 partiendo, liber philosophia ne vim. Viris oblique
  85                 explicari has et. Nam noster iisque discere te, sale
  86                 doming delectus est te, an debet quando eruditi
  87                 pro. Ad dicant praesent persequeris has, ne vel
  88                 minimum petentium periculis.</p>
  89               </div>
  90             </div>
  91           </div>
  92
  93           <div class="standard">
  94             <h3>Things To Do</h3>
  95             <ul>
  96               <li><a href="#">Create</a></li>
  97               <li><a href="#">Have Fun</a></li>
  98               <li><a href="#">Share With Friends</a></li>
  99               <li><a href="#">Play Games</a></li>
 100               <li><a href="#">Upload</a></li>
 101               <li><a href="#">Download</a></li>
 102             </ul>
 103
 104
 105             <h3>Sponsors</h3>
 106             <img src="images/ad180.png" alt="" /><br /><br />
 107
 108             <h3>Connect With Us</h3>
 109             <ul>
 110               <li><a href="#">Twitter</a></li>
 111               <li><a href="#">Facebook</a></li>
 112               <li><a href="#">LinkedIn</a></li>
 113               <li><a href="#">Flickr</a></li>
 114             </ul>
 115           </div>
 116
 117         </aside><!-- end of sidebar -->
 118
 119       </section><!-- end of #main content and sidebar-->
 120
 121       <footer>
 122         <section id="footer-area">
 123
 124           <section id="footer-outer-block">
 125             <aside class="footer-segment">
 126               <h4>Friends</h4>
 127               <ul>
 128                 <li><a href="#">one linkylink</a></li>
 129                 <li><a href="#">two linkylinks</a></li>
 130                 <li><a href="#">three linkylinks</a></li>
 131               </ul>
 132             </aside><!-- end of #first footer segment -->
 133
 134             <aside class="footer-segment">
 135               <h4>Awesome Stuff</h4>
 136               <ul>
 137                 <li><a href="#">one linkylink</a></li>
 138                 <li><a href="#">two linkylinks</a></li>
 139                 <li><a href="#">three linkylinks</a></li>
 140               </ul>
 141             </aside><!-- end of #second footer segment -->
 142
 143             <aside class="footer-segment">
 144               <h4>Coolness</h4>
 145               <ul>
 146                 <li><a href="#">one linkylink</a></li>
 147                 <li><a href="#">two linkylinks</a></li>
 148                 <li><a href="#">three linkylinks</a></li>
 149               </ul>
 150             </aside><!-- end of #third footer segment -->
 151
 152             <aside class="footer-segment">
 153               <h4>Blahdyblah</h4>
 154               <p>© 2010 <a href="#">yoursite.com</a> Praesent
 155               libero. Sed cursus ante dapibus diam. Sed nisi.</p>
 156             </aside><!-- end of #fourth footer segment -->
 157
 158           </section><!-- end of footer-outer-block -->
 159
 160         </section><!-- end of footer-area -->
 161       </footer>
 162
 163     </div><!-- #wrapper -->
 164     <!-- Free template created by http://freehtml5templates.com -->
 165   </body>
 166 </html>