2 <html xmlns="http://www.w3.org/1999/xhtml"
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">
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">
19 $('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
24 <div id="wrapper"><!-- #wrapper -->
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=""/>
31 </header><!-- end of header -->
37 </nav><!-- end of top nav -->
39 <section id="main"><!-- #main content and sidebar area -->
41 <section id="content"><!-- #content -->
45 </section><!-- end of #content -->
47 <aside id="sidebar"><!-- sidebar -->
49 <div class="tabwidget">
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>
55 <div class="tab_container">
56 <div id="tab1" class="tab_content">
57 <h3>Recent Articles</h3>
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>
68 <div id="tab2" class="tab_content">
69 <h3>Our Most Popular</h3>
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>
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>
90 <div class="standard">
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>
103 <img src="images/ad180.png" alt="" /><br /><br />
105 <h3>Connect With Us</h3>
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>
114 </aside><!-- end of sidebar -->
116 </section><!-- end of #main content and sidebar-->
119 <section id="footer-area">
121 <section id="footer-outer-block">
122 <aside class="footer-segment">
125 <li><a href="#">one linkylink</a></li>
126 <li><a href="#">two linkylinks</a></li>
127 <li><a href="#">three linkylinks</a></li>
129 </aside><!-- end of #first footer segment -->
131 <aside class="footer-segment">
132 <h4>Awesome Stuff</h4>
134 <li><a href="#">one linkylink</a></li>
135 <li><a href="#">two linkylinks</a></li>
136 <li><a href="#">three linkylinks</a></li>
138 </aside><!-- end of #second footer segment -->
140 <aside class="footer-segment">
143 <li><a href="#">one linkylink</a></li>
144 <li><a href="#">two linkylinks</a></li>
145 <li><a href="#">three linkylinks</a></li>
147 </aside><!-- end of #third footer segment -->
149 <aside class="footer-segment">
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 -->
155 </section><!-- end of footer-outer-block -->
157 </section><!-- end of footer-area -->
160 </div><!-- #wrapper -->
161 <!-- Free template created by http://freehtml5templates.com -->