style/bluenightsky/index.html

   1 <!doctype html>
   2 <html lang="en">
   3 <head>
   4         <meta charset="utf-8" />
   5         <title>BlueNightSky</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         <script type="text/javascript"
   9 src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
  10         <script type="text/javascript" src="js/simpletabs.js"></script>
  11         <link rel="stylesheet" type="text/css" href="lightbox.css" media="screen" />
  12         <script type="text/javascript" src="js/jquery.js"></script>
  13   <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
  14         <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
  15 <script type="text/javascript">
  16 $(function() {
  17         $('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
  18 });
  19 </script>
  20 </head>
  21 <body>
  22 <div id="wrapper"><!-- #wrapper -->
  23
  24         <header><!-- header -->
  25                 <h1><a href="#">Blue Night Sky</a></h1>
  26                 <h2>Your compelling tag line goes here</h2>
  27                 <img src="images/bluenightsky.png" width="940" height="200" alt=""><!-- header image -->
  28         </header><!-- end of header -->
  29
  30         <nav><!-- top nav -->
  31                 <div class="menu">
  32                         <ul>
  33                                 <li><a href="#">Home</a></li>
  34                                 <li><a href="#">About</a>
  35                             <ul>
  36                                         <li><a href="#">The Team</a></li>
  37                                         <li><a href="#">History</a></li>
  38                                         <li><a href="">Vision</a></li>
  39                                 </ul>
  40                         </li>
  41                                 <li><a href="#">Products</a>
  42                                         <ul>
  43                                                 <li><a href="#">Widgets</a></li>
  44                                                 <li><a href="#">Wodgets</a></li>
  45                                         </ul>
  46                                 </li>
  47                                 <li><a href="#">Services</a>
  48                                         <ul>
  49                                                 <li><a href="#">Consulting</a></li>
  50                                                 <li><a href="#">Troubleshooting</a></li>
  51                                         </ul>
  52                                 </li>
  53                                 <li><a href="#">Support</a></li>
  54                                 <li><a href="#">Contact Us</a></li>
  55                         </ul>
  56                 </div>
  57         </nav><!-- end of top nav -->
  58
  59         <section id="main"><!-- #main content and sidebar area -->
  60
  61                         <section id="content"><!-- #content -->
  62
  63                         <section id="lightboxthumbs">
  64                         <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>
  65                         <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>
  66                         <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>
  67                         <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>
  68                         <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>
  69                         <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>
  70                         </section>
  71
  72                                 <article class="featured">
  73                                         <img src="images/newspic.jpg" alt="" class="featuredthumb" />
  74                                         <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>
  75                                 </article>
  76
  77                                 <article class="odd">
  78                                         <img src="images/newspic1.jpg" alt="" class="thumb" />
  79                                         <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>
  80                                 </article>
  81
  82                                 <article class="even">
  83                                         <img src="images/newspic2.jpg" alt="" class="thumb" />
  84                                         <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>
  85                                 </article>
  86
  87                                 <article class="odd">
  88                                         <img src="images/newspic3.jpg" alt="" class="thumb" />
  89                                         <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>
  90                                 </article>
  91
  92                                 <article class="even">
  93                                         <img src="images/newspic4.jpg" alt="" class="thumb" />
  94                                         <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>
  95                                 </article>
  96
  97                                 <article class="odd">
  98                                         <img src="images/newspic5.jpg" alt="" class="thumb" />
  99                                         <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>
 100                                 </article>
 101
 102                         </section><!-- end of #content -->
 103
 104                 <aside id="sidebar"><!-- sidebar -->
 105
 106                         <div class="tabwidget">
 107           <ul class="tabs">
 108               <li><a href="#tab1">Recent</a></li>
 109               <li><a href="#tab2">Popular</a></li>
 110               <li><a href="#tab3">About Me</a></li>
 111           </ul>
 112           <div class="tab_container">
 113               <div id="tab1" class="tab_content">
 114                   <h3>Recent Articles</h3>
 115                   <ul>
 116                         <li><a href="#">Interesting Recent Link 1</a></li>
 117                         <li><a href="#">Interesting Recent Link 2</a></li>
 118                         <li><a href="#">Interesting Recent Link 3</a></li>
 119                         <li><a href="#">Interesting Recent Link 4</a></li>
 120                         <li><a href="#">Interesting Recent Link 5</a></li>
 121                         <li><a href="#">Interesting Recent Link 6</a></li>
 122                         <li><a href="#">Interesting Recent Link 7</a></li>
 123                                                         </ul>
 124               </div>
 125               <div id="tab2" class="tab_content">
 126                   <h3>Our Most Popular</h3>
 127                   <ul>
 128                         <li><a href="#">Most Popular Link 1</a></li>
 129                         <li><a href="#">Most Popular Link 2</a></li>
 130                         <li><a href="#">Most Popular Link 3</a></li>
 131                         <li><a href="#">Most Popular Link 4</a></li>
 132                 </ul>
 133               </div>
 134               <div id="tab3" class="tab_content">
 135                   <h3>Who I Am</h3>
 136                   <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>
 137               </div>
 138              </div>
 139             </div>
 140
 141              <div class="standard">
 142                 <h3>Things To Do</h3>
 143                                         <ul>
 144                                                 <li><a href="#">Create</a></li>
 145                                                 <li><a href="#">Have Fun</a></li>
 146                                                 <li><a href="#">Share With Friends</a></li>
 147                                                 <li><a href="#">Play Games</a></li>
 148                                                 <li><a href="#">Upload</a></li>
 149                                                 <li><a href="#">Download</a></li>
 150                                         </ul>
 151
 152
 153                                 <h3>Sponsors</h3>
 154                                         <img src="images/ad180.png" alt="" /><br /><br />
 155
 156                                 <h3>Connect With Us</h3>
 157                                         <ul>
 158                                                 <li><a href="#">Twitter</a></li>
 159                                                 <li><a href="#">Facebook</a></li>
 160                                                 <li><a href="#">LinkedIn</a></li>
 161                                                 <li><a href="#">Flickr</a></li>
 162                                         </ul>
 163                         </div>
 164
 165                 </aside><!-- end of sidebar -->
 166
 167         </section><!-- end of #main content and sidebar-->
 168
 169                 <footer>
 170                 <section id="footer-area">
 171
 172                         <section id="footer-outer-block">
 173                                         <aside class="footer-segment">
 174                                                         <h4>Friends</h4>
 175                                                                 <ul>
 176                                                                         <li><a href="#">one linkylink</a></li>
 177                                                                         <li><a href="#">two linkylinks</a></li>
 178                                                                         <li><a href="#">three linkylinks</a></li>
 179                                                                 </ul>
 180                                         </aside><!-- end of #first footer segment -->
 181
 182                                         <aside class="footer-segment">
 183                                                         <h4>Awesome Stuff</h4>
 184                                                                 <ul>
 185                                                                         <li><a href="#">one linkylink</a></li>
 186                                                                         <li><a href="#">two linkylinks</a></li>
 187                                                                         <li><a href="#">three linkylinks</a></li>
 188                                                                 </ul>
 189                                         </aside><!-- end of #second footer segment -->
 190
 191                                         <aside class="footer-segment">
 192                                                         <h4>Coolness</h4>
 193                                                                 <ul>
 194                                                                         <li><a href="#">one linkylink</a></li>
 195                                                                         <li><a href="#">two linkylinks</a></li>
 196                                                                         <li><a href="#">three linkylinks</a></li>
 197                                                                 </ul>
 198                                         </aside><!-- end of #third footer segment -->
 199
 200                                         <aside class="footer-segment">
 201                                                         <h4>Blahdyblah</h4>
 202                                                                 <p>&copy; 2010 <a href="#">yoursite.com</a> Praesent libero. Sed cursus ante dapibus diam. Sed nisi.</p>
 203                                         </aside><!-- end of #fourth footer segment -->
 204
 205                         </section><!-- end of footer-outer-block -->
 206
 207                 </section><!-- end of footer-area -->
 208         </footer>
 209
 210 </div><!-- #wrapper -->
 211 <!-- Free template created by http://freehtml5templates.com -->
 212 </body>
 213 </html>