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