## Homepage

## Lorem ipsum dolor sit amet, consectetur adipiscing elit. (72 characters)

## Lorem ipsum dolor sit (37 characters)

## Latest Posts

- ## Lorem ipsum dolor sit (37 characters)

  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.

- ## Lorem ipsum dolor sit (37 characters)

  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.

- ## Lorem ipsum dolor sit (37 characters)

  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.

- ## Lorem ipsum dolor sit (37 characters)

  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.

- ## Lorem ipsum dolor sit (37 characters)

  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.

View more posts

### HTML

                        <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">
    			<div class="block block-hero">
    	<a href="#" class="inner">
    		<div class="b-thumb">
    			<img src="..&#x2F;..&#x2F;images&#x2F;fpo_16x9.png" alt="16x9 Image" />
    		</div>
    		<div class="b-text">
    			<h2 class="headline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. (72 characters)</h2>
    		</div>
    	</a>
    </div>

    		<div class="g g-3up">
    				<div class="gi">
    					<div class="block block-inset">
        <a href="#" class="inner">
    		<div class="b-thumb">
    			<img src="..&#x2F;..&#x2F;images&#x2F;fpo_4x3.png" alt="4x3 Image" />
    		</div>
    		<div class="b-text">
    			<h2 class="headline">Lorem ipsum dolor sit (37 characters)</h2>
    		</div>
    	</a>
    </div>
    				</div>
    				<div class="gi">
    					<div class="block block-inset">
        <a href="#" class="inner">
    		<div class="b-thumb">
    			<img src="..&#x2F;..&#x2F;images&#x2F;fpo_4x3.png" alt="4x3 Image" />
    		</div>
    		<div class="b-text">
    			<h2 class="headline">Lorem ipsum dolor sit (37 characters)</h2>
    		</div>
    	</a>
    </div>
    				</div>
    				<div class="gi">
    					<div class="block block-inset">
        <a href="#" class="inner">
    		<div class="b-thumb">
    			<img src="..&#x2F;..&#x2F;images&#x2F;fpo_4x3.png" alt="4x3 Image" />
    		</div>
    		<div class="b-text">
    			<h2 class="headline">Lorem ipsum dolor sit (37 characters)</h2>
    		</div>
    	</a>
    </div>
    				</div>
    		</div><!--end 3up-->

    		<hr />

    		<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>
    			</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 .l-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>

## Blog

# Our Outdoor Blog

## Latest Posts

- ## Lorem ipsum dolor sit (37 characters)

  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.

- ## Lorem ipsum dolor sit (37 characters)

  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.

- ## Lorem ipsum dolor sit (37 characters)

  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.

- ## Lorem ipsum dolor sit (37 characters)

  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.

- ## Lorem ipsum dolor sit (37 characters)

  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.

View more posts

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7

### HTML

                        <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>

## Article

# Article Headline Lorem ipsum dolor sit aweofij

by Author Name on June 3rd

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla sem a urna porttitor fringilla. Nulla eget justo felis.

Aliquam erat volutpat. Mauris vulputate scelerisque feugiat. Cras a erat a diam venenatis aliquam. Sed tempus, purus ac pretium varius, risus orci sagittis purus, quis auctor libero magna nec magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas eros dolor, rutrum eu sollicitudin eu, commodo at leo. Suspendisse potenti. Sed eu nibh sit amet quam auctor feugiat vel et risus. Maecenas eu urna adipiscing neque dictum mollis suscipit in augue. Praesent pulvinar condimentum sagittis. Maecenas laoreet neque non eros consectetur fringilla. Donec vitae risus leo, vitae pharetra ipsum. Sed placerat eros eget elit iaculis semper. Aliquam congue blandit orci ac pretium.

Aliquam ultrices cursus mauris, eget volutpat justo mattis nec. Sed a orci turpis. Aliquam aliquet placerat dui, consectetur tincidunt leo tristique et. Vivamus enim nisi, blandit a venenatis quis, convallis et arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris libero sapien, placerat in sodales eu, tempor quis dui. Vivamus egestas faucibus pulvinar. Maecenas eget diam nunc. Phasellus at sem eros, ac suscipit neque. Phasellus sollicitudin libero a odio dignissim scelerisque. Aliquam purus nulla, tempor eget ullamcorper quis, rhoncus non dui.

> A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.

Cras at fringilla ipsum. Donec nec libero eget est blandit dignissim a eu ante. Morbi augue nulla, luctus eu sagittis vel, malesuada ut felis. Aliquam erat volutpat. Morbi malesuada augue ac massa hendrerit fermentum. Integer scelerisque lacus a dolor convallis lobortis. Curabitur mollis ante in massa ultricies dignissim.

- This is a list item in an unordered list
- An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
- Lists can be nested inside of each other
  - This is a nested list item
  - This is another nested list item in an unordered list
- This is the last list item

1. This is a list item in an ordered list
2. An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
3. Lists can be nested inside of each other
   1. This is a nested list item
   2. This is another nested list item in an ordered list
4. This is the last list item

Donec posuere fringilla nunc, vitae venenatis diam scelerisque vel. Nullam vitae mauris magna. Mauris et diam quis justo volutpat tincidunt congue nec magna. Curabitur vitae orci elit. Ut mollis massa id magna vestibulum consequat. Proin rutrum lectus justo, sit amet tincidunt est. Vivamus vitae lacinia risus.

> A pull quote is a quotation or excerpt from an article

Donec venenatis imperdiet tortor, vitae blandit odio interdum ut. Integer orci metus, lobortis id lacinia eget, rutrum vitae justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In pretium fermentum justo nec pharetra. Maecenas eget dapibus justo. Ut quis est risus. Nullam et eros at odio commodo venenatis quis et augue. Sed sed augue at tortor porttitor hendrerit nec ut nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin sollicitudin enim consectetur mi commodo quis cursus ante pretium. Nunc gravida cursus nisi in gravida. Suspendisse eget tortor sed urna consequat tincidunt. Etiam eget convallis lectus. Suspendisse cursus rutrum massa ac faucibus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, suscipit repellendus nulla accusantium deserunt sed explicabo voluptate sapiente ratione inventore molestiae nihil earum repellat quia odit vitae perspiciatis aliquam amet?

- Like
- Tweet
- Email
- Comment

## Selected Comments

- #### Lacy Way

  We are all in the gutter, but some of us are looking at the stars.

- #### Lacy Way

  A life is like a garden. Perfect moments can be had, but not preserved, except in memory.

## 59 Comments

Name
Email
URL
Comment

- #### Matthias Macguinness

  Sugar plum wafer soufflé ice cream. Wafer topping biscuit pie gummi bears topping. Gummies toffee powder applicake oat cake cookie. Bear claw candy tootsie roll fruitcake danish applicake candy canes macaroon. Liquorice tiramisu danish cotton candy gummies. Tiramisu dessert gummi bears macaroon sweet roll jelly-o gummi bears marzipan.

- #### Teun Richard

  Boudin sausage jerky pastrami ground round salami biltong. Sausage fatback strip steak doner pork loin, pork belly drumstick ham short loin hamburger shankle. Short ribs sirloin rump tri-tip beef biltong. Meatball pig salami, jowl pork loin fatback short loin drumstick andouille.

- #### Plinius Sloane

  The Knights Who Say Ni demand a sacrifice! …Are you suggesting that coconuts migrate? Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods. You don't frighten us, English pig-dogs! Go and boil your bottoms, sons of a silly person! I blow my nose at you, so-called Ah-thoor Keeng, you and all your silly English K-n-n-n-n-n-n-n-niggits!

- #### Junius Koolen

  Fizzle crazy tortor. Sed rizzle. Ass pimpin' dolor dapibizzle turpis tempizzle fo shizzle my nizzle. Maurizzle pellentesque its fo rizzle izzle turpis. Get down get down we gonna chung nizzle. Shizzlin dizzle eleifend rhoncizzle break it down. In yo ghetto platea dictumst. Bling bling dapibizzle. Curabitur break yo neck, yall fo, pretizzle eu, go to hizzle dope, own yo' vitae, nunc. Bizzle suscipizzle. Ass semper velit sizzle fo.

- #### Bertil Aaij

  Especially dogs. Dogs are the best. Every time you come home, they act like they haven't seen you in a year. And the good thing about dogs... is they got different dogs for different people. Like pit bulls. The dog of dogs. Pit bull can be the right man's best friend... or the wrong man's worst enemy. You going to give me a dog for a pet, give me a pit bull.

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7

### HTML

                        <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">
    		<div class="l-two-col">
    			<div class="l-main">
    				<article class="article">
    					<header class="article-header">
    						<h1>Article Headline Lorem ipsum dolor sit aweofij</h1>
    						<div class="byline">by Author Name on <time datetime="2013-04-06T12:32+00:00">June 3rd</time></div>
    					</header>
    					<p class="intro">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla sem a urna porttitor fringilla. Nulla eget justo felis. </p>

    <p><a href="#">Aliquam erat volutpat.</a> Mauris vulputate scelerisque feugiat. Cras a erat a diam venenatis aliquam. Sed tempus, purus ac pretium varius, risus orci sagittis purus, quis auctor libero magna nec magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas eros dolor, rutrum eu sollicitudin eu, commodo at leo. Suspendisse potenti. Sed eu nibh sit amet quam auctor feugiat vel et risus. Maecenas eu urna adipiscing neque dictum mollis suscipit in augue. Praesent pulvinar condimentum sagittis. Maecenas laoreet neque non eros consectetur fringilla. Donec vitae risus leo, vitae pharetra ipsum. Sed placerat eros eget elit iaculis semper. Aliquam congue blandit orci ac pretium.</p>

    <img src="..&#x2F;..&#x2F;images&#x2F;fpo_16x9.png" alt="16x9 Image" />

    <p>Aliquam ultrices cursus mauris, eget volutpat justo mattis nec. Sed a orci turpis. Aliquam aliquet placerat dui, consectetur tincidunt leo tristique et. Vivamus enim nisi, blandit a venenatis quis, convallis et arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris libero sapien, placerat in sodales eu, tempor quis dui. Vivamus egestas faucibus pulvinar. Maecenas eget diam nunc. Phasellus at sem eros, ac suscipit neque. Phasellus sollicitudin libero a odio dignissim scelerisque. Aliquam purus nulla, tempor eget ullamcorper quis, rhoncus non dui.
    </p>

    <blockquote>
    	<p>A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.</p>
    </blockquote>

    <p>Cras at fringilla ipsum. Donec nec libero eget est blandit dignissim a eu ante. Morbi augue nulla, luctus eu sagittis vel, malesuada ut felis. Aliquam erat volutpat. Morbi malesuada augue ac massa hendrerit fermentum. Integer scelerisque lacus a dolor convallis lobortis. Curabitur mollis ante in massa ultricies dignissim.
    </p>

    <div class="text">
    	<ul>
    		<li>This is a list item in an unordered list</li>
    		<li>An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line. </li>
    		<li>
    			Lists can be nested inside of each other
    			<ul>
    				<li>This is a nested list item</li>
    				<li>This is another nested list item in an unordered list</li>
    			</ul>
    		</li>
    		<li>This is the last list item</li>
    	</ul>
    </div>

    <div class="text">
    	<ol>
    		<li>This is a list item in an ordered list</li>
    		<li>An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.</li>
    		<li>
    			Lists can be nested inside of each other
    			<ol>
    				<li>This is a nested list item</li>
    				<li>This is another nested list item in an ordered list</li>
    			</ol>
    		</li>
    		<li>This is the last list item</li>
    	</ol>
    </div>

    <p>Donec posuere fringilla nunc, vitae venenatis diam scelerisque vel. Nullam vitae mauris magna. Mauris et diam quis justo volutpat tincidunt congue nec magna. Curabitur vitae orci elit. Ut mollis massa id magna vestibulum consequat. Proin rutrum lectus justo, sit amet tincidunt est. Vivamus vitae lacinia risus.
    </p>

    <blockquote class="pullquote">
       	<p>A pull quote is a quotation or excerpt from an article</p>
    </blockquote>

    <p>Donec venenatis imperdiet tortor, vitae blandit odio interdum ut. Integer orci metus, lobortis id lacinia eget, rutrum vitae justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In pretium fermentum justo nec pharetra. Maecenas eget dapibus justo. Ut quis est risus. Nullam et eros at odio commodo venenatis quis et augue. Sed sed augue at tortor porttitor hendrerit nec ut nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin sollicitudin enim consectetur mi commodo quis cursus ante pretium. Nunc gravida cursus nisi in gravida. Suspendisse eget tortor sed urna consequat tincidunt. Etiam eget convallis lectus. Suspendisse cursus rutrum massa ac faucibus.
    </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, suscipit repellendus nulla accusantium deserunt sed explicabo voluptate sapiente ratione inventore molestiae nihil earum repellat quia odit vitae perspiciatis aliquam amet?</p>
    				</article><!--end .article-->
    				<div class="social-share">
    	<ul class="social-share-list">
    		<li><a href="#">Like</a></li>
    		<li><a href="#">Tweet</a></li>
    		<li><a href="#">Email</a></li>
    		<li><a href="#">Comment</a></li>
    	</ul>
    </div>
    				<section class="comments section">
    	<div class="comments-container" id="comments-container">
    		<h2 class="section-title">Selected Comments</h2>
    		<ul class="comment-list">
    				<li class="comment-container">
    	<div class="comment-meta">
    <img src="..&#x2F;..&#x2F;images&#x2F;fpo_avatar.png" alt="Avatar" />		<h4 class="comment-name"><a href="#">Lacy Way</a></h4>
    	</div>
    	<div class="comment-text">
    		<p>We are all in the gutter, but some of us are looking at the stars.</p>
    	</div>
    </li>
            <li class="comment-container">
    	<div class="comment-meta">
    <img src="..&#x2F;..&#x2F;images&#x2F;fpo_avatar.png" alt="Avatar" />		<h4 class="comment-name"><a href="#">Lacy Way</a></h4>
    	</div>
    	<div class="comment-text">
    		<p>A life is like a garden. Perfect moments can be had, but not preserved, except in memory.</p>
    	</div>
    </li>
    		</ul>
    	</div>
    </section>

    				<section class="comments section">
    	<div class="comments-container" id="comments-container">
    		<h2 class="section-title">59 Comments</h2>
    		<form class="comment-form">
    	<fieldset>
    		<div class="field-container">
    			<label for="comment-name">Name</label>
    			<input id="comment-name" type="text" placeholder="Enter Your Name" />
    		</div>
    		<div class="field-container">
    			<label for="comment-email">Email</label>
    			<input id="comment-email" type="email" placeholder="Your email address" />
    		</div>
    		<div class="field-container">
    			<label for="comment-url">URL</label>
    			<input id="comment-url" type="url" placeholder="Website if you got one" />
    		</div>
    		<div class="field-container">
    			<label for="comment-field">Comment</label>
    			<textarea id="comment-field" rows="5" placeholder="Write you comment here"></textarea>
    		</div>
    	</fieldset>
    </form>
    		<ul class="comment-list">
    			<li class="comment-container">
    	<div class="comment-meta">
    		<img src="http:&#x2F;&#x2F;placeimg.com&#x2F;100&#x2F;100&#x2F;tech&#x2F;sepia" alt="Avatar" />
    		<h4 class="comment-name"><a href="#">Matthias Macguinness</a></h4>
    	</div>
    	<div class="comment-text">
    		<p>Sugar plum wafer soufflé ice cream. Wafer topping biscuit pie gummi bears topping. Gummies toffee powder applicake oat cake cookie. Bear claw candy tootsie roll fruitcake danish applicake candy canes macaroon. Liquorice tiramisu danish cotton candy gummies. Tiramisu dessert gummi bears macaroon sweet roll jelly-o gummi bears marzipan.</p>
    	</div>
    </li><li class="comment-container">
    	<div class="comment-meta">
    		<img src="http:&#x2F;&#x2F;placeimg.com&#x2F;100&#x2F;100&#x2F;tech" alt="Avatar" />
    		<h4 class="comment-name"><a href="#">Teun Richard</a></h4>
    	</div>
    	<div class="comment-text">
    		<p>Boudin sausage jerky pastrami ground round salami biltong. Sausage fatback strip steak doner pork loin, pork belly drumstick ham short loin hamburger shankle. Short ribs sirloin rump tri-tip beef biltong. Meatball pig salami, jowl pork loin fatback short loin drumstick andouille.</p>
    	</div>
    </li><li class="comment-container">
    	<div class="comment-meta">
    		<img src="http:&#x2F;&#x2F;placeimg.com&#x2F;100&#x2F;100&#x2F;tech&#x2F;grayscale" alt="Avatar" />
    		<h4 class="comment-name"><a href="#">Plinius Sloane</a></h4>
    	</div>
    	<div class="comment-text">
    		<p>The Knights Who Say Ni demand a sacrifice! …Are you suggesting that coconuts migrate? Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods. You don&#39;t frighten us, English pig-dogs! Go and boil your bottoms, sons of a silly person! I blow my nose at you, so-called Ah-thoor Keeng, you and all your silly English K-n-n-n-n-n-n-n-niggits!</p>
    	</div>
    </li><li class="comment-container">
    	<div class="comment-meta">
    		<img src="http:&#x2F;&#x2F;placeimg.com&#x2F;100&#x2F;100&#x2F;people" alt="Avatar" />
    		<h4 class="comment-name"><a href="#">Junius Koolen</a></h4>
    	</div>
    	<div class="comment-text">
    		<p>Fizzle crazy tortor. Sed rizzle. Ass pimpin&#39; dolor dapibizzle turpis tempizzle fo shizzle my nizzle. Maurizzle pellentesque its fo rizzle izzle turpis. Get down get down we gonna chung nizzle. Shizzlin dizzle eleifend rhoncizzle break it down. In yo ghetto platea dictumst. Bling bling dapibizzle. Curabitur break yo neck, yall fo, pretizzle eu, go to hizzle dope, own yo&#39; vitae, nunc. Bizzle suscipizzle. Ass semper velit sizzle fo.</p>
    	</div>
    </li><li class="comment-container">
    	<div class="comment-meta">
    		<img src="http:&#x2F;&#x2F;placeimg.com&#x2F;100&#x2F;100&#x2F;any" alt="Avatar" />
    		<h4 class="comment-name"><a href="#">Bertil Aaij</a></h4>
    	</div>
    	<div class="comment-text">
    		<p>Especially dogs. Dogs are the best. Every time you come home, they act like they haven&#39;t seen you in a year. And the good thing about dogs... is they got different dogs for different people. Like pit bulls. The dog of dogs. Pit bull can be the right man&#39;s best friend... or the wrong man&#39;s worst enemy. You going to give me a dog for a pet, give me a pit bull.</p>
    	</div>
    </li>
    		</ul>
    	</div>
    	<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>
    </section>
    			</div><!--end l-main-->

    			<div class="l-sidebar">
    				<section class="section related-posts">
    	<h3 class="section-title">Related Posts</h3>
    	<ul class="headline-list">
    		<li><h4><a href="#">Headline Lorem ipsum dolor sit amet</a></h4></li>
    		<li><h4><a href="#">Laborum, molestiae, rerum, dolores eveniet </a></h4></li>
    		<li><h4><a href="#">quae est fugit distinctio iure odit minus non ipsum </a></h4></li>
    		<li><h4><a href="#">dolorum deserunt omnis voluptates voluptatum</a></h4></li>
    		<li><h4><a href="#">nventore dignissimos vel molestiae, rerum, dolore</a></h4></li>
    		<li><h4><a href="#"></a></h4></li>
    	</ul>
    </section>
    				<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 l-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>