style/turquoiseswirls/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>my title</title>
   7     <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
   8     <link rel="stylesheet" type="text/css" href="print.css" media="print" />
   9     <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
  10   </head>
  11
  12   <body>
  13
  14     <div id="wrapper">
  15
  16       <header>
  17         <h1 id="sitename"><a href="#">Turquoise Swirls</a></h1>
  18         <div id="description">Your interesting &amp; compelling tag line</div>
  19         <div id="top">
  20           <nav>
  21
  22           </nav>
  23         </div>
  24       </header>
  25
  26       <section>
  27
  28         <div id="container">
  29           <div id="content">
  30             <article>
  31
  32             </article>
  33           </div><!-- #content-->
  34         </div><!-- #container-->
  35
  36         <aside id="left"><!-- start left sidebar -->
  37           <div class="box">
  38             <h3>Main Menu</h3>
  39             <div class="inner">
  40               <ul>
  41                 <li><a href="#">Products</a></li>
  42                 <li><a href="#">Support</a></li>
  43                 <li><a href="#">Popular Uses</a></li>
  44               </ul>
  45             </div>
  46           </div><!-- .box -->
  47
  48           <div class="box">
  49             <h3>Our Sponsor</h3>
  50             <div class="inner">
  51               <br />
  52               <a href="#"><img src="images/ad600.jpg" alt="" class="aligncenter" /></a>
  53               <br />
  54             </div>
  55           </div><!-- .box -->
  56
  57         </aside><!-- end left sidebar -->
  58
  59         <aside id="right"><!-- start right sidebar -->
  60
  61           <div class="box">
  62             <h3>Connect With Us</h3>
  63             <div class="inner">
  64               <ul>
  65                 <li><a href="#">Twitter</a></li>
  66                 <li><a href="#">Facebook</a></li>
  67               </ul>
  68             </div>
  69           </div><!-- .box -->
  70
  71           <div class="box">
  72             <h3>Recent Articles</h3>
  73             <div class="inner">
  74               <ul>
  75                 <li><a href="#">How To Clean Anything</a></li>
  76                 <li><a href="#">Get The Most Out of Widgets</a></li>
  77               </ul>
  78             </div>
  79           </div><!-- .box -->
  80
  81           <div class="box">
  82             <h3>Recommended</h3>
  83             <div class="inner">
  84               <br />
  85               <a href="#"><img src="images/ad125.jpg" alt="" class="aligncenter" /></a>
  86               <br />
  87               <a href="#"><img src="images/ad125.jpg" alt="" class="aligncenter" /></a>
  88               <br />
  89               <a href="#"><img src="images/ad125.jpg" alt="" class="aligncenter" /></a>
  90               <br />
  91             </div>
  92           </div><!-- .box -->
  93
  94         </aside><!-- end right sidebar -->
  95
  96       </section>
  97
  98       <footer>
  99         <div id="copyright">
 100           <span>© 2010 All rights reserved <a href="#">yoursite.com</a></span>
 101         </div>
 102       </footer>
 103
 104     </div><!-- #wrapper -->
 105     <!-- Free template created by http://freehtml5templates.com -->
 106   </body>
 107 </html>