style/freggies/index.html

   1 <!doctype html>
   2 <html lang="en">
   3 <head>
   4         <meta charset="utf-8" />
   5         <title>Freggies</title>
   6         <link rel="stylesheet" href="styles.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"><!-- #wrapper -->
  12
  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
  32                         <b class="benefitsheading">Healthy Eating Benefits</b>
  33
  34                                         <section class="benefits">
  35                                                 <a href="#"><img class="thumbnail" src="images/run.png" title="run" alt="run"/><span class="caption"><b>Increase Energy</b></span></a>
  36                                         </section>
  37
  38                                         <section class="benefits">
  39                                                 <a href="#"><img class="thumbnail" src="images/scale.png" title="scale" alt="scale"/><span class="caption"><b>Maintain Weight</b></span></a>
  40                                         </section>
  41
  42                                         <section class="benefits">
  43                                                 <a href="#"><img class="thumbnail" src="images/healthshield.png" title="healthy" alt="healthy"/><span class="caption"><b>Prevent Disease</b></span></a>
  44                                         </section>
  45
  46                         <article>
  47                                                         <h2><a href="#">First Article Title</a></h2>
  48
  49                                                         <img src="images/fruits1.jpg" alt="" class="alignright" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.</p>
  50                                                 </article>
  51
  52                         <article>
  53                                                         <h2><a href="#">Second Article Title</a></h2>
  54                                                         <img src="images/veggies1.jpg" alt="" class="alignleft" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.</p>
  55                                                 </article>
  56
  57                         </section><!-- end of #content -->
  58
  59                 <aside id="sidebar"><!-- sidebar -->
  60                                 <h3>Stuff</h3>
  61                                         <ul>
  62                                                 <li><a href="#">Curabitur sodales</a></li>
  63                                                 <li><a href="#">Sed dignissim</a></li>
  64                                                 <li><a href="#">Fusce nec</a></li>
  65                                                 <li><a href="#">Nulla quis</a></li>
  66                                         </ul>
  67
  68                                 <h3>More Stuff</h3>
  69                                         <ul>
  70                                                 <li><a href="#">Curabitur sodales</a></li>
  71                                                 <li><a href="#">Sed dignissim</a></li>
  72                                                 <li><a href="#">Fusce nec</a></li>
  73                                                 <li><a href="#">Nulla quis</a></li>
  74                                                 <li><a href="#">Blah</a></li>
  75                                                 <li><a href="#">More blah</a></li>
  76                                         </ul>
  77
  78                                 <h3>Even More Stuff</h3>
  79                                         <ul>
  80                                                 <li><a href="#">Curabitur sodales</a></li>
  81                                                 <li><a href="#">Sed dignissim</a></li>
  82                                                 <li><a href="#">Fusce nec</a></li>
  83                                                 <li><a href="#">Nulla quis</a></li>
  84                                                 <li><a href="#">Blah</a></li>
  85                                                 <li><a href="#">More blah</a></li>
  86                                         </ul>
  87
  88                 </aside><!-- end of sidebar -->
  89
  90         </section><!-- end of #main content and sidebar-->
  91
  92                 <footer>
  93                 <section id="footer-area">
  94
  95                         <section id="footer-outer-block">
  96                                         <aside class="footer-segment">
  97                                                         <h4>Friends</h4>
  98                                                                 <ul>
  99                                                                         <li><a href="#">one linkylink</a></li>
 100                                                                         <li><a href="#">two linkylinks</a></li>
 101                                                                         <li><a href="#">three linkylinks</a></li>
 102                                                                         <li><a href="#">four linkylinks</a></li>
 103                                                                         <li><a href="#">five linkylinks</a></li>
 104                                                                 </ul>
 105                                         </aside><!-- end of #first footer segment -->
 106
 107                                         <aside class="footer-segment">
 108                                                         <h4>Awesome Stuff</h4>
 109                                                                 <ul>
 110                                                                         <li><a href="#">one linkylink</a></li>
 111                                                                         <li><a href="#">two linkylinks</a></li>
 112                                                                         <li><a href="#">three linkylinks</a></li>
 113                                                                         <li><a href="#">four linkylinks</a></li>
 114                                                                         <li><a href="#">five linkylinks</a></li>
 115                                                                 </ul>
 116                                         </aside><!-- end of #second footer segment -->
 117
 118                                         <aside class="footer-segment">
 119                                                         <h4>Coolness</h4>
 120                                                                 <ul>
 121                                                                         <li><a href="#">one linkylink</a></li>
 122                                                                         <li><a href="#">two linkylinks</a></li>
 123                                                                         <li><a href="#">three linkylinks</a></li>
 124                                                                         <li><a href="#">four linkylinks</a></li>
 125                                                                         <li><a href="#">five linkylinks</a></li>
 126                                                                 </ul>
 127                                         </aside><!-- end of #third footer segment -->
 128
 129                                         <aside class="footer-segment">
 130                                                         <h4>Blahdyblah</h4>
 131                                                                 <p>Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.</p>
 132                                         </aside><!-- end of #fourth footer segment -->
 133
 134                         </section><!-- end of footer-outer-block -->
 135
 136                 </section><!-- end of footer-area -->
 137                 <section class="footerbottom">
 138                         <p>&copy;2010 <a href="#">yoururl.com</a>
 139                 </section>
 140         </footer>
 141
 142 </div><!-- #wrapper -->
 143 <!-- Free template created by http://freehtml5templates.com -->
 144 </body>
 145 </html>