<p class="badge-android">Google Play</p>
<p class="badge-ios">App Store</p>

<a href="#" class="button [modifier class]">Download</a>

  <div class="card-50">
    <figure><img class="aligncenter" src="/static/images/iphone.png" alt="iPhone"></figure>
    <div class="flex-content">
      <h2>iPhone 7</h2>
      <p class="text-intro">3D Touch, 12MP photos, and 4K video.</p>
      <p>Every iPhone they have made was built on the same belief. That a phone should be more than a collection of features. That, above all, a phone should be absolutely simple, beautiful, and magical to use.</p>
    </div>
  </div>

<div class="cta">
  <div class="number">
    <p><span><sup>$</sup>40</span></p>
  </div>
  <div class="benefit">
    <h2>Watch TV shows anytime, anywhere</h2>
    <p>Lorem ipsum</p>
  </div>
</div>

<div class="cta-cover">
  <h1><strong>HTML Presentations</strong> Made Easy</h1>
  <p class="alignright">
    <a class="button" href="https://webslides.tv/webslides-latest.zip" title="Download WebSlides">
      WebSlides
    </a>
    <span class="try"><a href="/demos/" title="WebSlides Demos">Demos</a> · <a href="https://github.com/webslides/webslides" title="Github">Github</a></span>
  </p>
</div>

<blockquote>
  <p>"I feel guilty as a web designer when I have to use PowerPoint and Keynote. So I made #WebSlides."</p>
</blockquote>
<cite> <img class="avatar-40" src="http://webslides.tv/static/images/avatar.jpg" alt="Avatar"> <a href="http://twitter.com/jlantunez/">@jlantunez</a></cite>

<ul class="work">
  <li class="work-label">
    <p class="work-title">Work</p>
    <p class="work-client">Client</p>
    <p class="work-services">Services</p>
    <p class="work-date">Year</p>
  </li>
  <li>
    <a href="#" rel="external">
      <p class="work-title"><span>Redesign of Netflix</span></p>
      <p class="work-client"><span>Netflix</span></p>
      <p class="work-services"><span>Frontend</span></p>
      <p class="work-date"><span>2015-2016</span></p>
    </a>
  </li>
  <li>
    <a href="#" rel="external">
      <p class="work-title"><span>Airbnb TV Commercials</span></p>
      <p class="work-client"><span>Airbnb</span></p>
      <p class="work-services"><span>Video, Storytelling</span></p>
      <p class="work-date"><span>2015</span></p>
    </a>
  </li>
</ul>

<div class="toc">
  <ol>
    <li>
      <a href="#" title="Go to Learning to see">
      <span class="chapter">Prologue: Learning to See</span>
      <span class="toc-page">01</span>
      </a>
    </li>
    <li><a href="#" title="Go to What is Design?"><span class="chapter">What is Design?</span>
      <span class="toc-page">04</span></a>
    </li>
    <li>
      <a href="#" title="Go to What is Beauty?"><span class="chapter">What is Beauty?</span>
      <span class="toc-page">08</span></a>
      <ol>
        <li><a href="#" title="Go to Harmony"><span class="chapter">Harmony</span>
          <span class="toc-page">12</span></a>
        </li>
        <li><a href="#" title="Go to Simplicity vs. Clarity"><span class="chapter">Simplicity vs. Clarity</span>
          <span class="toc-page">14</span></a>
        </li>
      </ol>
    </li>
  </ol>
</div>