snippets.html

<!-- SECTION ARROWS -->
<article class="section-nav">
  <a class="button-rounded upper" href="about.html">&larr; Prev section</a>
  <a style="margin-left:10px" class="button-rounded upper" href="relevance.html">Next section &rarr;</a>
</article>

<!-- QUOTATION -->
<blockquote>
  Automata theory represented for him a synthesis of his
  early interest in logic and proof theory and his later work,
  during World War II and after, on large scale electronic
  computers.
</blockquote>
<a href="references.html#1.2.2" class="quote-ref">C E Shannon<br> Ref. 1.2.2</a>

<!-- IMAGE W/ REF -->
<div class="block-reference">
  <span class="block-reference-content">
    <img class="article-image--pop" src="img/img.jpg" alt="" />
  </span>
  <span class="block-reference-comment">
    <a href="references.html#1.2.1">Ref. 1.2.1</a>
  </span>
</div>

<!-- VERTICAL NAV -->
<nav class="v-nav">
  <ol>
    <li><a href="#facts">Factfile</a></li>
    <li><a href="#early">Early Life</a></li>
    <li><a href="#late">Later Life</a></li>
  </ol>
</nav>

<!-- VIDEO W/ OVERLAY -->
<div class="tutorial">
  <div class="video-overlay" style="background:rgb(35,44,50)">
    <div class="text">
      <h3 class="video-title">Timesuite Tutorial</h3>
      <a class="button-rounded upper play-button">Play Video</a>
    </div>
  </div>
  <video poster="img/timesuite-tutorial.png">
    <source src="vid/timesuite.mp4" type="video/mp4">
    <source src="vid/timesuite.webm" type="video/webm">
    <source src="vid/timesuite.ogg" type="video/ogg">
    Your browser doesn't support the <code>video</code> tag.
  </video>
</div>

<!-- OVERLAPPING IMAGES -->
<a class="screenshots">
  <img class="main" src="img/timesuite-dashboard.png"/>
  <img class="secondary" src="img/timesuite.png"/>
</a>