style/freggies/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>Freggies</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     <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
  10   </head>
  11   <body>
  12     <div id="wrapper"><!-- #wrapper -->
  13       <nav><!-- top nav -->
  14         <div class="menu">
  15           <ul>
  16             <li><a href="#">Home</a></li>
  17             <li><a href="#">About</a></li>
  18             <li><a href="#">Recipes</a></li>
  19             <li><a href="#">Contact Us</a></li>
  20           </ul>
  21         </div>
  22       </nav><!-- end of top nav -->
  23
  24       <header><!-- header -->
  25         <h1><a href="#">Freggies</a></h1>
  26         <h2>Fruits and Veggies = Healthy Freggies</h2>
  27       </header><!-- end of header -->
  28
  29       <section id="main"><!-- #main content and sidebar area -->
  30         <section id="content"><!-- #content -->
  31           <b class="benefitsheading">Healthy Eating Benefits</b>
  32
  33           <section class="benefits">
  34             <a href="#"><img class="thumbnail" src="images/run.png"
  35             title="run" alt="run"/><span class="caption"><b>Increase
  36             Energy</b></span></a>
  37           </section>
  38
  39           <section class="benefits">
  40             <a href="#"><img class="thumbnail" src="images/scale.png"
  41             title="scale" alt="scale"/><span class="caption"><b>Maintain
  42             Weight</b></span></a>
  43           </section>
  44
  45           <section class="benefits">
  46             <a href="#"><img class="thumbnail"
  47             src="images/healthshield.png" title="healthy"
  48             alt="healthy"/><span class="caption"><b>Prevent
  49             Disease</b></span></a>
  50           </section>
  51
  52           <article>
  53             <h2><a href="#">First Article Title</a></h2>
  54
  55             <img src="images/fruits1.jpg" alt="" class="alignright"/>
  56             <p>Lorem ipsum dolor sit amet, consectetur adipiscing
  57             elit. Integer nec odio. Praesent libero. Sed cursus ante
  58             dapibus diam. Sed nisi. Nulla quis sem at nibh elementum
  59             imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec
  60             tellus sed augue semper porta. Mauris massa. Vestibulum
  61             lacinia arcu eget nulla. Class aptent taciti sociosqu ad
  62             litora torquent per conubia nostra, per inceptos
  63             himenaeos. Curabitur sodales ligula in libero. Sed
  64             dignissim lacinia nunc.</p>
  65           </article>
  66
  67           <article>
  68             <h2><a href="#">Second Article Title</a></h2>
  69             <img src="images/veggies1.jpg" alt="" class="alignleft"/>
  70             <p>Lorem ipsum dolor sit amet, consectetur adipiscing
  71             elit. Integer nec odio. Praesent libero. Sed cursus ante
  72             dapibus diam. Sed nisi. Nulla quis sem at nibh elementum
  73             imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec
  74             tellus sed augue semper porta. Mauris massa. Vestibulum
  75             lacinia arcu eget nulla. Class aptent taciti sociosqu ad
  76             litora torquent per conubia nostra, per inceptos
  77             himenaeos. Curabitur sodales ligula in libero. Sed
  78             dignissim lacinia nunc.</p>
  79           </article>
  80
  81         </section><!-- end of #content -->
  82
  83         <aside id="sidebar"><!-- sidebar -->
  84           <h3>Stuff</h3>
  85           <ul>
  86             <li><a href="#">Curabitur sodales</a></li>
  87             <li><a href="#">Sed dignissim</a></li>
  88             <li><a href="#">Fusce nec</a></li>
  89             <li><a href="#">Nulla quis</a></li>
  90           </ul>
  91
  92           <h3>More Stuff</h3>
  93           <ul>
  94             <li><a href="#">Curabitur sodales</a></li>
  95             <li><a href="#">Sed dignissim</a></li>
  96             <li><a href="#">Fusce nec</a></li>
  97             <li><a href="#">Nulla quis</a></li>
  98             <li><a href="#">Blah</a></li>
  99             <li><a href="#">More blah</a></li>
 100           </ul>
 101
 102           <h3>Even More Stuff</h3>
 103           <ul>
 104             <li><a href="#">Curabitur sodales</a></li>
 105             <li><a href="#">Sed dignissim</a></li>
 106             <li><a href="#">Fusce nec</a></li>
 107             <li><a href="#">Nulla quis</a></li>
 108             <li><a href="#">Blah</a></li>
 109             <li><a href="#">More blah</a></li>
 110           </ul>
 111
 112         </aside><!-- end of sidebar -->
 113
 114       </section><!-- end of #main content and sidebar-->
 115
 116       <footer>
 117         <section id="footer-area">
 118
 119           <section id="footer-outer-block">
 120             <aside class="footer-segment">
 121               <h4>Friends</h4>
 122               <ul>
 123                 <li><a href="#">one linkylink</a></li>
 124                 <li><a href="#">two linkylinks</a></li>
 125                 <li><a href="#">three linkylinks</a></li>
 126                 <li><a href="#">four linkylinks</a></li>
 127                 <li><a href="#">five linkylinks</a></li>
 128               </ul>
 129             </aside><!-- end of #first footer segment -->
 130
 131             <aside class="footer-segment">
 132               <h4>Awesome Stuff</h4>
 133               <ul>
 134                 <li><a href="#">one linkylink</a></li>
 135                 <li><a href="#">two linkylinks</a></li>
 136                 <li><a href="#">three linkylinks</a></li>
 137                 <li><a href="#">four linkylinks</a></li>
 138                 <li><a href="#">five linkylinks</a></li>
 139               </ul>
 140             </aside><!-- end of #second footer segment -->
 141
 142             <aside class="footer-segment">
 143               <h4>Coolness</h4>
 144               <ul>
 145                 <li><a href="#">one linkylink</a></li>
 146                 <li><a href="#">two linkylinks</a></li>
 147                 <li><a href="#">three linkylinks</a></li>
 148                 <li><a href="#">four linkylinks</a></li>
 149                 <li><a href="#">five linkylinks</a></li>
 150               </ul>
 151             </aside><!-- end of #third footer segment -->
 152
 153             <aside class="footer-segment">
 154               <h4>Blahdyblah</h4>
 155               <p>Integer nec odio. Praesent libero. Sed cursus ante
 156               dapibus diam. Sed nisi. Nulla quis sem at nibh elementum
 157               imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec
 158               tellus sed augue semper porta.</p>
 159             </aside><!-- end of #fourth footer segment -->
 160
 161           </section><!-- end of footer-outer-block -->
 162
 163         </section><!-- end of footer-area -->
 164         <section class="footerbottom">
 165           <p>©;2010 <a href="#">yoururl.com</a></p>
 166         </section>
 167       </footer>
 168
 169     </div><!-- #wrapper -->
 170     <!-- Free template created by http://freehtml5templates.com -->
 171   </body>
 172 </html>