<article>
  <header>
    <h1>My Article</h1>
  </header>
  <section class="typeset">
    <p class="lead">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    </p>
    <p>
      Curabitur ullamcorper velit et nisl fermentum <a href="#">molestie</a>.
      Maecenas justo orci, rutrum et vestibulum at, consectetur id ex.
      Aliquam erat volutpat. Mauris eleifend sed odio eu lacinia.
      Donec non dolor tempus, finibus velit vel, <a href="#">consequat
      justo</a>. Mauris at nisl metus. Donec sit amet lacus tincidunt,
      pulvinar velit sollicitudin, lacinia urna. Praesent nisi dolor,
      mollis convallis pellentesque non, blandit quis ligula. Nam sed purus
      lacinia, blandit felis et, vehicula nisi. Donec consequat augue est,
      mattis fringilla ipsum facilisis eget.
    </p>
    <blockquote>
      <p>
        Light thinks it travels faster than anything but it is wrong.
        No matter how fast light travels, it finds the darkness has always
        got there first, and is waiting for it.
      </p>
      <p>&mdash; <a href="https://en.wikipedia.org/wiki/Terry_Pratchett">Terry Pratchett</a></p>
    </blockquote>
    <p>
      Integer est velit, condimentum id urna quis, placerat molestie diam.
      Quisque tempus, augue in laoreet tempus, turpis nibh <a href="#">placerat
      elit</a>, et malesuada augue lectus sed augue. Etiam vel sem nec mi
      accumsan rutrum. Nullam sed egestas sem. Nam pulvinar tortor a purus
      fringilla, eu posuere tortor porttitor. Nulla sit amet magna porttitor,
      lobortis urna a, hendrerit nulla. Sed sed dictum augue, et facilisis
      risus. Quisque sed sem sodales, consequat tellus id, mattis nulla.
      Proin quis hendrerit nisi, eget mollis tellus. Sed dapibus elementum
      ex vel mollis.
    </p>
    <pre><code>.css-example {
  color: red;
  background: url(/foo/bar.jpg);
}</code></pre>
    <p>
      Curabitur ullamcorper velit et nisl fermentum <a href="#">molestie</a>.
      Maecenas justo orci, rutrum et vestibulum at, consectetur id ex. Aliquam
      erat volutpat. Mauris eleifend sed odio eu lacinia. Donec non dolor tempus,
      finibus velit vel, <a href="#">consequat justo</a>. Mauris at nisl metus.
      Donec sit amet lacus tincidunt, pulvinar velit sollicitudin, lacinia urna.
      Praesent nisi dolor, mollis convallis pellentesque non, blandit quis ligula.
      Nam sed purus lacinia, blandit felis et, vehicula nisi. Donec consequat
      augue est, mattis fringilla ipsum facilisis eget.
    </p>
    <ul>
      <li>Foo</li>
      <li>Bar</li>
      <li>Baz</li>
    </ul>
    <p>
      Integer est velit, condimentum id urna quis, placerat molestie diam.
      Quisque tempus, augue in laoreet tempus, turpis nibh <a href="#">placerat
      elit</a>, et malesuada augue lectus sed augue. Etiam vel sem nec mi
      accumsan rutrum. Nullam sed egestas sem. Nam pulvinar tortor a purus
      fringilla, eu posuere tortor porttitor. Nulla sit amet magna porttitor,
      lobortis urna a, hendrerit nulla. Sed sed dictum augue, et facilisis
      risus. Quisque sed sem sodales, consequat tellus id, mattis nulla. Proin
      quis hendrerit nisi, eget mollis tellus. Sed dapibus elementum ex vel
      mollis.
    </p>
    <ol>
      <li>Foo</li>
      <li>Bar</li>
      <li>Baz</li>
    </ol>
    <p>
      Curabitur ullamcorper velit et nisl fermentum <a href="#">molestie</a>.
      Maecenas justo orci, rutrum et vestibulum at, consectetur id ex. Aliquam
      erat volutpat. Mauris eleifend sed odio eu lacinia. Donec non dolor
      tempus, finibus velit vel, <a href="#">consequat justo</a>. Mauris at
      nisl metus. Donec sit amet lacus tincidunt, pulvinar velit sollicitudin,
      lacinia urna. Praesent nisi dolor, mollis convallis pellentesque non,
      blandit quis ligula. Nam sed purus lacinia, blandit felis et, vehicula
      nisi. Donec consequat augue est, mattis fringilla ipsum facilisis eget.
    </p>
  </section>
</article>

<section>
  <h1>Foobar</h1>
  <h2>Foobar</h2>
  <h3>Foobar</h3>
  <h4>Foobar</h4>
  <h5>Foobar</h5>
  <h6>Foobar</h6>
</section>

<div class="typeset">
  <h1 class="h1-counter">Foobar</h1>
  <h2 class="h2-counter">Foobar</h2>
  <h2 class="h2-counter">Foobar</h2>
  <h2 class="h2-counter">Foobar</h2>
  <h3 class="h3-counter">Foobar</h3>
  <h3 class="h3-counter">Foobar</h3>
  <h4 class="h4-counter">Foobar</h4>
  <h5 class="h5-counter">Foobar</h5>

  <h1 class="h1-counter">Foobar</h1>
  <h2 class="h2-counter">Foobar</h2>
  <h4 class="h4-counter">Foobar</h4>
  <h5 class="h5-counter">Foobar</h5>
  <h6 class="h6-counter">Foobar</h6>
</div>