HTML Foo

foo.html

<h1 id="headerlevel1">Header Level 1</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis fugiat, accusamus aut tempora nam <a href="http://docs.emmet.io/abbreviations/lorem-ipsum/">maiores</a> totam. Dolorum unde, ipsum consectetur quas quia officiis, dolore, cum molestias magnam nobis voluptatem sequi?</p>
<pre><code class="(null)">echo &apos;foobar&apos;;</code></pre>

<h2 id="headerlevel2">Header Level 2</h2>

<p>Ipsa dicta illo, <a href="http://docs.emmet.io/abbreviations/lorem-ipsum/">maiores</a> animi reiciendis cum expedita iure. Saepe eos tempora commodi veritatis accusamus ipsa, <em>recusandae quod quibusdam cumque</em>, quia doloremque <code>laborum debitis dolorum dolore veniam natus animi</code> sunt.</p>

<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, optio deserunt. Rerum suscipit, fuga exercitationem.</li>
<li>Dolore deleniti, illo molestiae perspiciatis, non voluptatem atque eligendi beatae provident temporibus voluptatibus, accusantium omnis!</li>
<li>Fugit sapiente inventore alias quos ut quod repellendus saepe earum, praesentium, commodi veritatis adipisci! Sapiente!</li>
</ul>

<blockquote>
<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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</blockquote>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum odio a nesciunt dolorum magni qui.</p>

<h3 id="headerlevel3">Header Level 3</h3>

<p>Error minus voluptate laudantium ab delectus cum, dicta voluptatem expedita quaerat neque ipsa a <a href="http://docs.emmet.io/abbreviations/lorem-ipsum/">maiores</a> laborum quidem cumque esse animi, culpa ducimus. Recusandae rem ipsa nemo possimus assumenda! Eum, cum.</p>

<ol>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, quas!</li>
<li>A cum necessitatibus soluta debitis, dolorem. Harum sapiente, facilis inventore.</li>
<li>Nam soluta, molestias ullam atque iusto alias sapiente culpa eos.</li>
<li>Sint aspernatur tempora illum, inventore ad aliquid, temporibus animi nesciunt.</li>
<li>Vitae voluptatibus architecto debitis quae ad, iusto, provident delectus eaque.</li>
</ol>

<h4 id="headerlevel4">Header Level 4</h4>

<p><strong>Quam magnam rerum neque nesciunt architecto</strong> in laudantium quisquam debitis sapiente ea, rem et, quas quo, qui minima eaque voluptates amet <a href="http://docs.emmet.io/abbreviations/lorem-ipsum/">maiores</a>. Nostrum fugiat aliquid voluptatibus velit autem.</p>

<dl>
<dt>Lorem ipsum dolor.</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, nihil?</dd>

<dt>Aspernatur, nesciunt, voluptatibus?</dt>
<dd>Quam, quia, culpa. Veritatis, explicabo placeat illum officia totam, in.</dd>

<dt>Beatae, saepe, laudantium.</dt>
<dd>Temporibus delectus, perferendis accusamus non explicabo ab perspiciatis nesciunt ad?</dd>

<dt>Inventore, hic, animi.</dt>
<dd>Rem dolorum dolores, laboriosam dicta autem nam praesentium dolorem soluta!</dd>
</dl>

<h5 id="headerlevel5">Header Level 5</h5>

<p>Repudiandae deleniti explicabo esse molestias ipsa eveniet commodi laboriosam recusandae obcaecati dolor impedit, adipisci delectus illum labore consequuntur aspernatur, voluptas accusantium aliquam harum. Asperiores officia iste, nesciunt nisi soluta laboriosam!</p>

<p>Lorem ipsum dolor. Possimus error, enim. Cupiditate, nisi, dolorem.</p>

<table>
<colgroup>
<col style="text-align:left;"/>
<col style="text-align:right;"/>
<col style="text-align:right;"/>
</colgroup>

<thead>
<tr>
	<th style="text-align:left;">description</th>
	<th style="text-align:right;">value</th>
	<th style="text-align:right;">points</th>
</tr>
</thead>

<tbody>
<tr>
	<td style="text-align:left;">Participation, reviews and in-class work</td>
	<td style="text-align:right;">20%</td>
	<td style="text-align:right;">100 pts</td>
</tr>
<tr>
	<td style="text-align:left;">Quizzes</td>
	<td style="text-align:right;">10%</td>
	<td style="text-align:right;">50 pts</td>
</tr>
<tr>
	<td style="text-align:left;">Projects</td>
	<td style="text-align:right;">30%</td>
	<td style="text-align:right;">150 pts</td>
</tr>
<tr>
	<td style="text-align:left;">Final Project</td>
	<td style="text-align:right;">40%</td>
	<td style="text-align:right;">200 pts</td>
</tr>
</tbody>
</table>

<h6 id="headerlevel6">Header Level 6</h6>

<p>Ut saepe laborum explicabo consequuntur, fugiat, voluptatem. Optio facere dolores est ipsa nobis expedita nisi consectetur aliquid error. Perspiciatis enim cupiditate unde, repellendus accusantium dolorum quaerat at harum iusto eos.</p>
<pre><code class="(null)">.task-bar {
      border-top: 1px solid $border;
      &gt;.pad {
          width: $fixed-width;
          padding: 1rem 0;
          margin: 0 auto;
          position: relative;
      }
      &gt;.pad &gt;.title {
          margin: 0;
          line-height: 1;
          font-size: 1.8rem;
          font-style: 100;
          text-align: center;
          width: 100%;
      }
}</code></pre>