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           <ul>
  36             <li><a href="#">Home</a></li>
  37             <li><a href="#">About</a>
  38             <ul>
  39               <li><a href="#">The Team</a></li>
  40               <li><a href="#">History</a></li>
  41               <li><a href="">Vision</a></li>
  42             </ul>
  43             </li>
  44             <li><a href="#">Products</a>
  45             <ul>
  46               <li><a href="#">Widgets</a></li>
  47               <li><a href="#">Wodgets</a></li>
  48             </ul>
  49             </li>
  50             <li><a href="#">Services</a>
  51             <ul>
  52               <li><a href="#">Consulting</a></li>
  53               <li><a href="#">Troubleshooting</a></li>
  54             </ul>
  55             </li>
  56             <li><a href="#">Support</a></li>
  57             <li><a href="#">Contact Us</a></li>
  58           </ul>
  59         </div>
  60       </nav><!-- end of top nav -->
  61
  62       <section id="main"><!-- #main content and sidebar area -->
  63
  64         <section id="content"><!-- #content -->
  65
  66           <section id="lightboxthumbs">
  67             <a href="images/gallery/falls1.jpg" rel="lightbox"
  68                title="Waterfall 1 Caption goes here"><img
  69                src="images/gallery/falls1-thumb.jpg"
  70                alt="" class="frameit"/></a>
  71             <a href="images/gallery/falls2.jpg" rel="lightbox"
  72                title="Waterfall 2 Caption goes here"><img
  73                src="images/gallery/falls2-thumb.jpg"
  74                alt="" class="frameit"/></a>
  75             <a href="images/gallery/falls3.jpg" rel="lightbox"
  76                title="Waterfall 3 Caption goes here"><img
  77                src="images/gallery/falls3-thumb.jpg"
  78                alt="" class="frameit"/></a>
  79             <a href="images/gallery/falls4.jpg" rel="lightbox"
  80                title="Waterfall 4 Caption goes here"><img
  81                src="images/gallery/falls4-thumb.jpg"
  82                alt="" class="frameit"/></a>
  83             <a href="images/gallery/falls5.jpg" rel="lightbox"
  84                title="Waterfall 5 Caption goes here"><img
  85                src="images/gallery/falls5-thumb.jpg"
  86                alt="" class="frameit"/></a>
  87             <a href="images/gallery/falls6.jpg" rel="lightbox"
  88                title="Waterfall 6 Caption goes here"><img
  89                src="images/gallery/falls6-thumb.jpg"
  90                alt="" class="frameitlast"/></a>
  91           </section>
  92
  93           <article class="featured">
  94             <img src="images/newspic.jpg" alt="" class="featuredthumb" />
  95             <p><a href="#" class="featuredtitle">This is the featured
  96             article</a></p><p class="featuredstory">Pellentesque ut
  97             sapien arcu, egestas mollis massa. Fusce lectus leo,
  98             fringilla at aliquet sit amet, volutpat non erat. Aenean
  99             molestie nibh vitae turpis venenatis vel accumsan nunc
 100             tincidunt. Pellentesque ut sapien arcu, egestas mollis
 101             massa. Fusce lectus leo, fringilla at aliquet sit amet,
 102             volutpat non erat. Aenean molestie nibh vitae turpis
 103             venenatis vel accumsan nunc tincidunt. Pellentesque ut
 104             sapien arcu, egestas mollis massa. Fusce lectus leo,
 105             fringilla at aliquet.</p>
 106           </article>
 107
 108           <article class="odd">
 109             <img src="images/newspic1.jpg" alt="" class="thumb" />
 110             <p><a href="#" class="title">This is the title of a news
 111             article</a></p><p class="story">Pellentesque ut sapien
 112             arcu, egestas mollis massa. Fusce lectus leo, fringilla at
 113             aliquet sit amet, volutpat non erat. Aenean molestie nibh
 114             vitae turpis venenatis vel accumsan nunc
 115             tincidunt. Pellentesque ut sapien arcu, egestas mollis
 116             massa.</p>
 117           </article>
 118
 119           <article class="even">
 120             <img src="images/newspic2.jpg" alt="" class="thumb" />
 121             <p>
 122               <a href="#" class="title">This is another news
 123               article</a></p><p class="story">Pellentesque ut sapien
 124               arcu, egestas mollis massa. Fusce lectus leo, fringilla
 125               at aliquet sit amet, volutpat non erat. Aenean molestie
 126               nibh vitae turpis venenatis vel accumsan nunc
 127               tincidunt. Pellentesque ut sapien arcu, egestas mollis
 128               massa.
 129             </p>
 130           </article>
 131
 132           <article class="odd">
 133             <img src="images/newspic3.jpg" alt="" class="thumb" />
 134             <p>
 135               <a href="#" class="title">This is a news article
 136               too</a></p><p class="story">Pellentesque ut sapien arcu,
 137               egestas mollis massa. Fusce lectus leo, fringilla at
 138               aliquet sit amet, volutpat non erat. Aenean molestie
 139               nibh vitae turpis venenatis vel accumsan nunc
 140               tincidunt. Pellentesque ut sapien arcu, egestas mollis
 141               massa.
 142             </p>
 143           </article>
 144
 145           <article class="even">
 146             <img src="images/newspic4.jpg" alt="" class="thumb" />
 147             <p>
 148               <a href="#" class="title">This is an older news
 149               article</a></p><p class="story">Pellentesque ut sapien
 150               arcu, egestas mollis massa. Fusce lectus leo, fringilla
 151               at aliquet sit amet, volutpat non erat. Aenean molestie
 152               nibh vitae turpis venenatis vel accumsan nunc
 153               tincidunt. Pellentesque ut sapien arcu, egestas mollis
 154               massa.
 155             </p>
 156           </article>
 157
 158           <article class="odd">
 159             <img src="images/newspic5.jpg" alt="" class="thumb" />
 160             <p>
 161               <a href="#" class="title">This is the last news
 162               article</a></p><p class="story">Pellentesque ut sapien
 163               arcu, egestas mollis massa. Fusce lectus leo, fringilla
 164               at aliquet sit amet, volutpat non erat. Aenean molestie
 165               nibh vitae turpis venenatis vel accumsan nunc
 166               tincidunt. Pellentesque ut sapien arcu, egestas mollis
 167               massa.
 168             </p>
 169           </article>
 170
 171         </section><!-- end of #content -->
 172
 173         <aside id="sidebar"><!-- sidebar -->
 174
 175           <div class="tabwidget">
 176             <ul class="tabs">
 177               <li><a href="#tab1">Recent</a></li>
 178               <li><a href="#tab2">Popular</a></li>
 179               <li><a href="#tab3">About Me</a></li>
 180             </ul>
 181             <div class="tab_container">
 182               <div id="tab1" class="tab_content">
 183                 <h3>Recent Articles</h3>
 184                 <ul>
 185                   <li><a href="#">Interesting Recent Link 1</a></li>
 186                   <li><a href="#">Interesting Recent Link 2</a></li>
 187                   <li><a href="#">Interesting Recent Link 3</a></li>
 188                   <li><a href="#">Interesting Recent Link 4</a></li>
 189                   <li><a href="#">Interesting Recent Link 5</a></li>
 190                   <li><a href="#">Interesting Recent Link 6</a></li>
 191                   <li><a href="#">Interesting Recent Link 7</a></li>
 192                 </ul>
 193               </div>
 194               <div id="tab2" class="tab_content">
 195                 <h3>Our Most Popular</h3>
 196                 <ul>
 197                   <li><a href="#">Most Popular Link 1</a></li>
 198                   <li><a href="#">Most Popular Link 2</a></li>
 199                   <li><a href="#">Most Popular Link 3</a></li>
 200                   <li><a href="#">Most Popular Link 4</a></li>
 201                 </ul>
 202               </div>
 203               <div id="tab3" class="tab_content">
 204                 <h3>Who I Am</h3> <img src="images/me.png" alt=""
 205                 /><p>Lorem ipsum in libris debitis facilis qui, in usu
 206                 esse falli deseruisse. Vel ut vivendo sensibus
 207                 partiendo, liber philosophia ne vim. Viris oblique
 208                 explicari has et. Nam noster iisque discere te, sale
 209                 doming delectus est te, an debet quando eruditi
 210                 pro. Ad dicant praesent persequeris has, ne vel
 211                 minimum petentium periculis.</p>
 212               </div>
 213             </div>
 214           </div>
 215
 216           <div class="standard">
 217             <h3>Things To Do</h3>
 218             <ul>
 219               <li><a href="#">Create</a></li>
 220               <li><a href="#">Have Fun</a></li>
 221               <li><a href="#">Share With Friends</a></li>
 222               <li><a href="#">Play Games</a></li>
 223               <li><a href="#">Upload</a></li>
 224               <li><a href="#">Download</a></li>
 225             </ul>
 226
 227
 228             <h3>Sponsors</h3>
 229             <img src="images/ad180.png" alt="" /><br /><br />
 230
 231             <h3>Connect With Us</h3>
 232             <ul>
 233               <li><a href="#">Twitter</a></li>
 234               <li><a href="#">Facebook</a></li>
 235               <li><a href="#">LinkedIn</a></li>
 236               <li><a href="#">Flickr</a></li>
 237             </ul>
 238           </div>
 239
 240         </aside><!-- end of sidebar -->
 241
 242       </section><!-- end of #main content and sidebar-->
 243
 244       <footer>
 245         <section id="footer-area">
 246
 247           <section id="footer-outer-block">
 248             <aside class="footer-segment">
 249               <h4>Friends</h4>
 250               <ul>
 251                 <li><a href="#">one linkylink</a></li>
 252                 <li><a href="#">two linkylinks</a></li>
 253                 <li><a href="#">three linkylinks</a></li>
 254               </ul>
 255             </aside><!-- end of #first footer segment -->
 256
 257             <aside class="footer-segment">
 258               <h4>Awesome Stuff</h4>
 259               <ul>
 260                 <li><a href="#">one linkylink</a></li>
 261                 <li><a href="#">two linkylinks</a></li>
 262                 <li><a href="#">three linkylinks</a></li>
 263               </ul>
 264             </aside><!-- end of #second footer segment -->
 265
 266             <aside class="footer-segment">
 267               <h4>Coolness</h4>
 268               <ul>
 269                 <li><a href="#">one linkylink</a></li>
 270                 <li><a href="#">two linkylinks</a></li>
 271                 <li><a href="#">three linkylinks</a></li>
 272               </ul>
 273             </aside><!-- end of #third footer segment -->
 274
 275             <aside class="footer-segment">
 276               <h4>Blahdyblah</h4>
 277               <p>© 2010 <a href="#">yoursite.com</a> Praesent
 278               libero. Sed cursus ante dapibus diam. Sed nisi.</p>
 279             </aside><!-- end of #fourth footer segment -->
 280
 281           </section><!-- end of footer-outer-block -->
 282
 283         </section><!-- end of footer-area -->
 284       </footer>
 285
 286     </div><!-- #wrapper -->
 287     <!-- Free template created by http://freehtml5templates.com -->
 288   </body>
 289 </html>