style/awesomesauce/index.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <meta charset="UTF-8"/>
   5     <title>my title</title>
   6     <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
   7     <link rel="stylesheet" type="text/css" href="print.css" media="print" />
   8     <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
   9   </head>
  10   <body>
  11     <div id="wrapper">
  12       <header>
  13         <div id="headerlogo"><img src="images/yourlogo.png" alt="logo" /></div>
  14         <h1 id="sitename"><a href="#">Awesome Sauce</a></h1>
  15         <div id="description">Your interesting & compelling tag line</div>
  16         <div id="top">
  17           <nav>
  18             <ul>
  19               <li><a href="#">Home</a></li>
  20               <li><a href="#">About</a></li>
  21               <li><a href="#">Contact</a></li>
  22             </ul>
  23           </nav>
  24         </div>
  25       </header>
  26       <section>
  27         <div id="container">
  28           <div id="content">
  29             <article>
  30               <h2><a href="#" rel="bookmark">My Article Title</a></h2>
  31               <div class="entry">
  32                 <p>
  33                   Lorem ipsum pri at agam postulant. Vis option
  34                   euismod ut, mucius nominavi noluisse vim in, his ne
  35                   mediocrem qualisque necessitatibus. Has at ubique
  36                   utroque molestie, <a href="#">vim ne ceteros
  37                   ponderum</a> hendrerit. No everti singulis
  38                   disputationi eam, minim iusto cu usu, sint nulla
  39                   harum duo ei. Ut vidit cotidieque ullamcorper mea,
  40                   dolorem oportere vulputate ea mei, eu ius error
  41                   perpetua theophrastus.
  42                 </p>
  43                 <img src="images/hotpeppers.jpg" alt="" class="alignleft" />
  44                 <p>
  45                   Quis quaerendum pri no, sit ad noster timeam. An pro
  46                   consul concludaturque, no possim impetus mei. Facer
  47                   oblique referrentur te qui, ornatus postulant
  48                   evertitur ius ea. No sed vero aperiri equidem, pri
  49                   et perpetua erroribus accusamus, doctus menandri ad
  50                   qui. Natum dicunt delenit te vim, has te decore
  51                   deseruisse. Quot malorum legendos ut est, urbanitas
  52                   interpretaris id qui, duo populo animal
  53                   conclusionemque ne.
  54                 </p>
  55                 <p>
  56                   Iriure postulant pro ad. Wisi delectus legendos an
  57                   duo, alia utroque recteque no mel, te sed porro
  58                   alienum. Vix tale suavitate incorrupte at, viris
  59                   tractatos incorrupte pri ad. Veri putant volutpat
  60                   his ad, no doming deserunt persecuti eum, ad nobis
  61                   essent sed. Ad vis mandamus expetenda, salutandi
  62                   iracundia repudiandae mei ei. Alii pericula
  63                   abhorreant mei an, vix dignissim consequuntur ex,
  64                   alienum invenire posidonium nam ei.
  65                 </p>
  66                 <blockquote>
  67                   Minim elitr congue eu mea, quo minimum verterem
  68                   gloriatur in, ex alia cotidieque complectitur
  69                   qui. Eu sit idque quodsi constituto, ex mea omnesque
  70                   adolescens. Sit id fabulas eligendi suscipiantur, eu
  71                   natum perfecto sit, at brute option lucilius mea. Te
  72                   malis disputationi has, ex eum habeo sententiae. An
  73                   est meliore denique voluptatibus, nam putent
  74                   voluptua inciderint in, ne simul graeci nonummy vel.
  75                 </blockquote>
  76                 <p>
  77                   Quod malorum delectus ne duo, an pri facer doming
  78                   quaeque, ancillae omnesque his ei. At sed nibh illum
  79                   placerat. At quod appareat reprehendunt vim, te pri
  80                   velit nonumy antiopam. Exerci placerat est no, cu
  81                   quo affert vidisse democritum. Debitis maiestatis
  82                   referrentur qui ad. Sonet praesent intellegebat mei
  83                   ex, duo meis epicurei cu. Idque volutpat sadipscing
  84                   ut est, eos eu alienum oportere, eum ea dicat ignota
  85                   persequeris.
  86                 </p>
  87                 <p>
  88                   Veritus menandri referrentur est cu. Eos ea mazim
  89                   elaboraret delicatissimi, puto nostrud platonem vis
  90                   an. Mea eirmod torquatos et, ad sonet minimum mea,
  91                   mei eu causae eruditi intellegat. Velit vitae ridens
  92                   et vel, commodo suscipit persequeris sea id, iudico
  93                   persius eruditi in vel. Magna eloquentiam mei et,
  94                   quo erat vituperatoribus ea, in sale audiam quo. Ad
  95                   eum illum tantas volumus, iriure feugiat recteque ei
  96                   est.
  97                 </p>
  98               </div>
  99             </article>
 100           </div><!-- #content-->
 101         </div><!-- #container-->
 102         <aside id="left"><!-- start left sidebar -->
 103           <div class="box">
 104             <h3>Main Menu</h3>
 105             <div class="inner">
 106               <ul>
 107                 <li><a href="#">Products</a></li>
 108                 <li><a href="#">Support</a></li>
 109                 <li><a href="#">Popular Uses</a></li>
 110               </ul>
 111             </div>
 112           </div><!-- .box -->
 113           <div class="box">
 114             <h3>Our Sponsor</h3>
 115             <div class="inner">
 116               <br />
 117               <a href="#"><img src="images/ad600.jpg" alt="" class="aligncenter" /></a>
 118               <br />
 119             </div>
 120           </div><!-- .box -->
 121         </aside><!-- end left sidebar -->
 122         <aside id="right"><!-- start right sidebar -->
 123           <div class="box">
 124             <h3>Connect With Us</h3>
 125             <div class="inner">
 126               <ul>
 127                 <li><a href="#">Twitter</a></li>
 128                 <li><a href="#">Facebook</a></li>
 129               </ul>
 130             </div>
 131           </div><!-- .box -->
 132           <div class="box">
 133             <h3>Recent Articles</h3>
 134             <div class="inner">
 135               <ul>
 136                 <li><a href="#">How To Clean Anything</a></li>
 137                 <li><a href="#">Get The Most Out of Widgets</a></li>
 138               </ul>
 139             </div>
 140           </div><!-- .box -->
 141           <div class="box">
 142             <h3>Recommended</h3>
 143             <div class="inner">
 144               <br />
 145               <a href="#"><img src="images/ad125.jpg" alt="" class="aligncenter" /></a>
 146               <br />
 147               <a href="#"><img src="images/ad125.jpg" alt="" class="aligncenter" /></a>
 148               <br />
 149               <a href="#"><img src="images/ad125.jpg" alt="" class="aligncenter" /></a>
 150               <br />
 151             </div>
 152           </div><!-- .box -->
 153         </aside><!-- end right sidebar -->
 154       </section>
 155       <footer>
 156         <div id="copyright">
 157           <span>&copy; 2010 All rights reserved <a href="#">yoursite.com</a></span>
 158         </div>
 159       </footer>
 160     </div><!-- #wrapper -->
 161     <!-- Free template created by http://freehtml5templates.com -->
 162   </body>
 163 </html>