</head>
<body>
<div id="wrapper"><!-- #wrapper -->
-
<nav><!-- top nav -->
- <ul class="sf-menu">
- <li class="current">
- <a href="#">Home</a>
- </li>
- <li>
- <a href="#">About</a>
- <ul>
- <li>
- <a href="#">Mission</a>
- </li>
- <li>
- <a href="#">Our Team</a>
- <ul>
- <li><a href="#">Joe</a></li>
- <li><a href="#">Jane</a></li>
- <li><a href="#">Tom</a></li>
- </ul>
- </li>
- <li>
- <a href="#">Office Locations</a>
- <ul>
- <li><a href="#">New York</a></li>
- <li><a href="#">Chicago</a></li>
- <li><a href="#">Denver</a></li>
- </ul>
- </li>
- </ul>
- </li>
- <li>
- <a href="#">Products</a>
- <ul>
- <li>
- <a href="#">Widgets</a>
- <ul>
- <li><a href="#">Red</a></li>
- <li><a href="#">Blue</a></li>
- </ul>
- </li>
- <li>
- <a href="#">Wodgets</a>
- <ul>
- <li><a href="#">Basic</a></li>
- <li><a href="#">Advanced</a></li>
- <li><a href="#">Pro</a></li>
- </ul>
- </li>
- </ul>
- </li>
- <li>
- <a href="#">Contact Us</a>
- </li>
- </ul>
+
</nav><!-- end of top nav -->
<header><!-- header -->
<section id="main"><!-- #main content and sidebar area -->
<section id="content"><!-- #content -->
-
<article>
- <h2><a href="#">First Article Title</a></h2> <img
- src="images/flowersky.jpg" alt="flower" 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>
- </article>
- <article>
- <h2><a href="#">Second Article Title</a></h2>
- <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>
- <p>
- 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>
</article>
-
</section><!-- end of #content -->
<aside id="sidebar"><!-- sidebar -->
<nav><!-- top nav -->
<div class="menu">
- <ul>
- <li><a href="#">Home</a></li>
- <li><a href="#">About</a>
- <ul>
- <li><a href="#">The Team</a></li>
- <li><a href="#">History</a></li>
- <li><a href="">Vision</a></li>
- </ul>
- </li>
- <li><a href="#">Products</a>
- <ul>
- <li><a href="#">Widgets</a></li>
- <li><a href="#">Wodgets</a></li>
- </ul>
- </li>
- <li><a href="#">Services</a>
- <ul>
- <li><a href="#">Consulting</a></li>
- <li><a href="#">Troubleshooting</a></li>
- </ul>
- </li>
- <li><a href="#">Support</a></li>
- <li><a href="#">Contact Us</a></li>
- </ul>
+
</div>
</nav><!-- end of top nav -->
<section id="main"><!-- #main content and sidebar area -->
<section id="content"><!-- #content -->
+ <article>
- <section id="lightboxthumbs">
- <a href="images/gallery/falls1.jpg" rel="lightbox"
- title="Waterfall 1 Caption goes here"><img
- src="images/gallery/falls1-thumb.jpg"
- alt="" class="frameit"/></a>
- <a href="images/gallery/falls2.jpg" rel="lightbox"
- title="Waterfall 2 Caption goes here"><img
- src="images/gallery/falls2-thumb.jpg"
- alt="" class="frameit"/></a>
- <a href="images/gallery/falls3.jpg" rel="lightbox"
- title="Waterfall 3 Caption goes here"><img
- src="images/gallery/falls3-thumb.jpg"
- alt="" class="frameit"/></a>
- <a href="images/gallery/falls4.jpg" rel="lightbox"
- title="Waterfall 4 Caption goes here"><img
- src="images/gallery/falls4-thumb.jpg"
- alt="" class="frameit"/></a>
- <a href="images/gallery/falls5.jpg" rel="lightbox"
- title="Waterfall 5 Caption goes here"><img
- src="images/gallery/falls5-thumb.jpg"
- alt="" class="frameit"/></a>
- <a href="images/gallery/falls6.jpg" rel="lightbox"
- title="Waterfall 6 Caption goes here"><img
- src="images/gallery/falls6-thumb.jpg"
- alt="" class="frameitlast"/></a>
- </section>
-
- <article class="featured">
- <img src="images/newspic.jpg" alt="" class="featuredthumb" />
- <p><a href="#" class="featuredtitle">This is the featured
- article</a></p><p class="featuredstory">Pellentesque ut
- sapien arcu, egestas mollis massa. Fusce lectus leo,
- fringilla at aliquet sit amet, volutpat non erat. Aenean
- molestie nibh vitae turpis venenatis vel accumsan nunc
- tincidunt. Pellentesque ut sapien arcu, egestas mollis
- massa. Fusce lectus leo, fringilla at aliquet sit amet,
- volutpat non erat. Aenean molestie nibh vitae turpis
- venenatis vel accumsan nunc tincidunt. Pellentesque ut
- sapien arcu, egestas mollis massa. Fusce lectus leo,
- fringilla at aliquet.</p>
- </article>
-
- <article class="odd">
- <img src="images/newspic1.jpg" alt="" class="thumb" />
- <p><a href="#" class="title">This is the title of a news
- article</a></p><p class="story">Pellentesque ut sapien
- arcu, egestas mollis massa. Fusce lectus leo, fringilla at
- aliquet sit amet, volutpat non erat. Aenean molestie nibh
- vitae turpis venenatis vel accumsan nunc
- tincidunt. Pellentesque ut sapien arcu, egestas mollis
- massa.</p>
</article>
-
- <article class="even">
- <img src="images/newspic2.jpg" alt="" class="thumb" />
- <p>
- <a href="#" class="title">This is another news
- article</a></p><p class="story">Pellentesque ut sapien
- arcu, egestas mollis massa. Fusce lectus leo, fringilla
- at aliquet sit amet, volutpat non erat. Aenean molestie
- nibh vitae turpis venenatis vel accumsan nunc
- tincidunt. Pellentesque ut sapien arcu, egestas mollis
- massa.
- </p>
- </article>
-
- <article class="odd">
- <img src="images/newspic3.jpg" alt="" class="thumb" />
- <p>
- <a href="#" class="title">This is a news article
- too</a></p><p class="story">Pellentesque ut sapien arcu,
- egestas mollis massa. Fusce lectus leo, fringilla at
- aliquet sit amet, volutpat non erat. Aenean molestie
- nibh vitae turpis venenatis vel accumsan nunc
- tincidunt. Pellentesque ut sapien arcu, egestas mollis
- massa.
- </p>
- </article>
-
- <article class="even">
- <img src="images/newspic4.jpg" alt="" class="thumb" />
- <p>
- <a href="#" class="title">This is an older news
- article</a></p><p class="story">Pellentesque ut sapien
- arcu, egestas mollis massa. Fusce lectus leo, fringilla
- at aliquet sit amet, volutpat non erat. Aenean molestie
- nibh vitae turpis venenatis vel accumsan nunc
- tincidunt. Pellentesque ut sapien arcu, egestas mollis
- massa.
- </p>
- </article>
-
- <article class="odd">
- <img src="images/newspic5.jpg" alt="" class="thumb" />
- <p>
- <a href="#" class="title">This is the last news
- article</a></p><p class="story">Pellentesque ut sapien
- arcu, egestas mollis massa. Fusce lectus leo, fringilla
- at aliquet sit amet, volutpat non erat. Aenean molestie
- nibh vitae turpis venenatis vel accumsan nunc
- tincidunt. Pellentesque ut sapien arcu, egestas mollis
- massa.
- </p>
- </article>
-
</section><!-- end of #content -->
<aside id="sidebar"><!-- sidebar -->
<div id="wrapper"><!-- #wrapper -->
<nav><!-- top nav -->
<div class="menu">
- <ul>
- <li><a href="#">Home</a></li>
- <li><a href="#">About</a></li>
- <li><a href="#">Recipes</a></li>
- <li><a href="#">Contact Us</a></li>
- </ul>
+
</div>
</nav><!-- end of top nav -->
<section id="main"><!-- #main content and sidebar area -->
<section id="content"><!-- #content -->
- <b class="benefitsheading">Healthy Eating Benefits</b>
-
- <section class="benefits">
- <a href="#"><img class="thumbnail" src="images/run.png"
- title="run" alt="run"/><span class="caption"><b>Increase
- Energy</b></span></a>
- </section>
-
- <section class="benefits">
- <a href="#"><img class="thumbnail" src="images/scale.png"
- title="scale" alt="scale"/><span class="caption"><b>Maintain
- Weight</b></span></a>
- </section>
-
- <section class="benefits">
- <a href="#"><img class="thumbnail"
- src="images/healthshield.png" title="healthy"
- alt="healthy"/><span class="caption"><b>Prevent
- Disease</b></span></a>
- </section>
-
<article>
- <h2><a href="#">First Article Title</a></h2>
-
- <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>
- </article>
- <article>
- <h2><a href="#">Second Article Title</a></h2>
- <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>
</article>
-
</section><!-- end of #content -->
<aside id="sidebar"><!-- sidebar -->
<div id="description">Your interesting & compelling tag line</div>
<div id="top">
<nav>
- <ul>
- <li><a href="#">Home</a></li>
- <li><a href="#">About</a></li>
- <li><a href="#">Contact</a></li>
- <li><a href="#">Support</a></li>
- </ul>
+
</nav>
</div>
</header>
<div id="container">
<div id="content">
-
<article>
- <h2><a href="#" rel="bookmark">Your Awesome Article Title</a></h2>
- <div class="entry">
- <p>
- Lorem ipsum pri at agam postulant. Vis option
- euismod ut, mucius nominavi noluisse vim in, his ne
- mediocrem qualisque necessitatibus. Has at ubique
- utroque molestie, <a href="#">vim ne ceteros
- ponderum</a> hendrerit. No everti singulis
- disputationi eam, minim iusto cu usu, sint nulla
- harum duo ei. Ut vidit cotidieque ullamcorper mea,
- dolorem oportere vulputate ea mei, eu ius error
- perpetua theophrastus.
- </p>
- <img src="images/turquoise-stone.png" alt=""
- class="alignright framed" />
- <p>
- Quis quaerendum pri no, sit ad noster timeam. An pro
- consul concludaturque, no possim impetus mei. Facer
- oblique referrentur te qui, ornatus postulant
- evertitur ius ea. No sed vero aperiri equidem, pri
- et perpetua erroribus accusamus, doctus menandri ad
- qui. Natum dicunt delenit te vim, has te decore
- deseruisse. Quot malorum legendos ut est, urbanitas
- interpretaris id qui, duo populo animal
- conclusionemque ne.
- </p>
- <p>
- Iriure postulant pro ad. Wisi delectus legendos an
- duo, alia utroque recteque no mel, te sed porro
- alienum. Vix tale suavitate incorrupte at, viris
- tractatos incorrupte pri ad. Veri putant volutpat
- his ad, no doming deserunt persecuti eum, ad nobis
- essent sed. Ad vis mandamus expetenda, salutandi
- iracundia repudiandae mei ei. Alii pericula
- abhorreant mei an, vix dignissim consequuntur ex,
- alienum invenire posidonium nam ei.
- </p>
- <blockquote>
- Minim elitr congue eu mea, quo minimum verterem
- gloriatur in, ex alia cotidieque complectitur
- qui. Eu sit idque quodsi constituto, ex mea omnesque
- adolescens. Sit id fabulas eligendi suscipiantur, eu
- natum perfecto sit, at brute option lucilius mea. Te
- malis disputationi has, ex eum habeo sententiae. An
- est meliore denique voluptatibus, nam putent
- voluptua inciderint in, ne simul graeci nonummy vel.
- </blockquote>
- <p>
- Quod malorum delectus ne duo, an pri facer doming
- quaeque, ancillae omnesque his ei. At sed nibh illum
- placerat. At quod appareat reprehendunt vim, te pri
- velit nonumy antiopam. Exerci placerat est no, cu
- quo affert vidisse democritum. Debitis maiestatis
- referrentur qui ad. Sonet praesent intellegebat mei
- ex, duo meis epicurei cu. Idque volutpat sadipscing
- ut est, eos eu alienum oportere, eum ea dicat ignota
- persequeris.
- </p>
- <p>
- Veritus menandri referrentur est cu. Eos ea mazim
- elaboraret delicatissimi, puto nostrud platonem vis
- an. Mea eirmod torquatos et, ad sonet minimum mea,
- mei eu causae eruditi intellegat. Velit vitae ridens
- et vel, commodo suscipit persequeris sea id, iudico
- persius eruditi in vel. Magna eloquentiam mei et,
- quo erat vituperatoribus ea, in sale audiam quo. Ad
- eum illum tantas volumus, iriure feugiat recteque ei
- est.
- </p>
- </div>
- </article>
+ </article>
</div><!-- #content-->
</div><!-- #container-->