<div class="page" id="page"> <!-- Begin .header --> <header class="header cf" role="banner"> <a href="/"><img src="../../images/logo.png" class="logo" alt="Logo Alt Text" /></a> <a href="#" class="nav-toggle nav-toggle-search icon-search"><span class="is-vishidden">Search</span></a> <a href="#" class="nav-toggle nav-toggle-menu icon-menu"><span class="is-vishidden">Menu</span></a> <nav id="nav" class="nav"> <ul> <li><a href="&#x2F;patterns&#x2F;04-pages-00-homepage&#x2F;04-pages-00-homepage.html">Home</a></li> <li><a href="#">About</a></li> <li><a href="&#x2F;patterns&#x2F;04-pages-01-blog&#x2F;04-pages-01-blog.html">Blog</a></li> <li><a href="#">Contact</a></li> </ul> </nav><!--end .nav--> <form action="#" method="post" class="inline-form search-form"> <fieldset> <legend class="is-vishidden">Search</legend> <label for="search-field" class="is-vishidden">Search</label> <input type="search" placeholder="Search" id="search-field" class="search-field" /> <button class="search-submit"> <span class="icon-search" aria-hidden="true"></span> <span class="is-vishidden">Search</span> </button> </fieldset> </form> </header> <!-- End .header --> <div role="main"> <h1 class="section-title">Our Outdoor Blog</h1> <div class="l-two-col"> <div class="l-main"> <section class="section latest-posts"> <h2 class="section-title">Latest Posts</h2> <ul class="post-list"> <li><div class="block block-thumb"> <a href="#" class="b-inner"> <div class="b-thumb"> <img src="..&#x2F;..&#x2F;images&#x2F;fpo_square.png" alt="Square Thumbnail" /> </div> <div class="b-text"> <h2 class="headline">Lorem ipsum dolor sit (37 characters)</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </a> </div></li> <li><div class="block block-thumb"> <a href="#" class="b-inner"> <div class="b-thumb"> <img src="..&#x2F;..&#x2F;images&#x2F;fpo_square.png" alt="Square Thumbnail" /> </div> <div class="b-text"> <h2 class="headline">Lorem ipsum dolor sit (37 characters)</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </a> </div></li> <li><div class="block block-thumb"> <a href="#" class="b-inner"> <div class="b-thumb"> <img src="..&#x2F;..&#x2F;images&#x2F;fpo_square.png" alt="Square Thumbnail" /> </div> <div class="b-text"> <h2 class="headline">Lorem ipsum dolor sit (37 characters)</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </a> </div></li> <li><div class="block block-thumb"> <a href="#" class="b-inner"> <div class="b-thumb"> <img src="..&#x2F;..&#x2F;images&#x2F;fpo_square.png" alt="Square Thumbnail" /> </div> <div class="b-text"> <h2 class="headline">Lorem ipsum dolor sit (37 characters)</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </a> </div></li> <li><div class="block block-thumb"> <a href="#" class="b-inner"> <div class="b-thumb"> <img src="..&#x2F;..&#x2F;images&#x2F;fpo_square.png" alt="Square Thumbnail" /> </div> <div class="b-text"> <h2 class="headline">Lorem ipsum dolor sit (37 characters)</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </a> </div></li> </ul> <a href="#" class="text-btn">View more posts</a> </section> <ol class="pagination"> <li class="current"><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> <li><a href="#">7</a></li> </ol> </div><!--end l-main--> <div class="l-sidebar"> <section class="section related-posts"> <h3 class="section-title">Recent Tweets</h3> <ul class="headline-list"> <li><h4><a href="#">Headline Lorem ipsum dolor sit amet</a></h4> <time datetime="2013-04-06T12:32+00:00">2 weeks ago</time></li> <li><h4><a href="#">Laborum, molestiae, rerum, dolores eveniet </a></h4> <time datetime="2013-04-06T12:32+00:00">2 weeks ago</time></li> <li><h4><a href="#">quae est fugit distinctio iure odit minus non ipsum </a></h4> <time datetime="2013-04-06T12:32+00:00">2 weeks ago</time></li> <li><h4><a href="#">dolorum deserunt omnis voluptates voluptatum</a></h4> <time datetime="2013-04-06T12:32+00:00">2 weeks ago</time></li> <li><h4><a href="#">nventore dignissimos vel molestiae, rerum, dolore</a></h4> <time datetime="2013-04-06T12:32+00:00">2 weeks ago</time></li> <li><h4><a href="#"></a></h4></li> </ul> <a href="#" class="text-btn">Follow us on Twitter</a> </section> </div><!--end l-sidebar--> </div><!--end two-col--> </div><!--End role=main--> <!-- Begin Footer --> <footer class="footer" role="contentinfo"> <div class="lc"> <p class="copyright">&copy; 2015 Company Name. All rights reserved.</p> </div> </footer> <!-- End Footer --> </div>