<div>
  <img src="../../../static/images/iphone.png" class="size-50 [modifier class]" />
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dignissim libero ac egestas. Vivamus pretium, mauris non commodo dapibus, purus elit gravida justo, at hendrerit arcu turpis in libero. Curabitur lacinia diam est, id eleifend turpis ornare quis. Sed a metus id ligula bibendum scelerisque vel at velit. Duis congue mattis nibh at pharetra. Cras hendrerit, enim ac tristique finibus, mauris dui placerat nulla, a porttitor sapien metus eu arcu. Ut pharetra justo et felis gravida vulputate. Nulla facilisi.</p>
</div>

<section>
  <span class="[modifier class] bg-gray" style="background-image:url('http://lorempixel.com/800/800/city/')"></span>
</section>

<section class="aligncenter bg-black">
  <div class="kss-container-background-anim">
    <span class="background anim" style="background-image:url('https://source.unsplash.com/n9WPPWiPPJw/')"></span>
  </div>
</section>

<section>
  <video class="background-video" autoplay poster="https://webslides.tv/static/images/working.jpg">
    <source src="https://webslides.tv/static/videos/working.mp4" type="video/mp4">
  </video>
  <div class="wrap">
    <p><code>.background-video</code></p>
    <h2><strong>WebSlides is the easiest way to make HTML presentations. Inspire and engage.</strong></h2>
  </div>
</section>

<span class="bg-primary">Primary #44d</span>
<span class="bg-secondary">Secondary #67d</span>
<span class="bg-light">Light #f7f9fb</span>
<span class="bg-black">Black #000</span>
<span class="bg-black-blue">Black blue #123</span>
<span class="bg-blue">Blue #346</span>
<span class="bg-brown">Brown #f9f8f2</span>
<span class="bg-gray">Gray #d5d9e2</span>
<span class="bg-green">Green #077</span>
<span class="bg-purple">Purple #62b</span>
<span class="bg-red">Red #c23</span>
<span class="bg-white">White #fff</span>
<span class="bg-facebook">Facebook #3b5998</span>

  <div class="bg-gradient-h">Horizontal</div>
  <div class="bg-gradient-v">Vertical</div>
  <div class="bg-gradient-r">Radial</div>
Demos:
[Horizontal](https://webslides.tv/demos/classes#slide=29)
[Vertical](https://webslides.tv/demos/classes#slide=32)
[Radial](https://webslides.tv/demos/classes#slide=31)

<div class="bg-red">
  <div class="bg-trans-dark">Dark</div>
  <div class="bg-trans-light">Light</div>
  <div class="bg-trans-gradient">Gradient</div>
</div>

<div class="grid [modifier class]">
  <div class="column">
    <h3><strong>WebSlides is really easy</strong></h3>
    <p class="text-intro">Each parent <code>&lt;section&gt;</code> in the #webslides element is an individual slide.</p>
    <p>Code is neat, scalable, and well documented. It uses <strong>intuitive markup with popular naming conventions</strong>. There's no need to overuse classes or nesting. <strong>Based on <a href="https://github.com/jennschiffer/SimpleSlides">SimpleSlides</a>, by <a href="http://jennmoney.biz">Jenn Schiffer</a></strong> :)</p>
  </div>
  <div class="column">
    <h3><strong>WebSlides is the clean</strong></h3>
    <p class="text-intro">Each parent <code>&lt;section&gt;</code> in the #webslides element is an individual slide.</p>
  </div>
</div>

<nav role="navigation" class="[modifier class]">
  <ul>
    <li><a href="">About</a></li>
    <li><a href="">Clients</a></li>
    <li class="facebook">
      <a rel="external" href="https://facebook.com/webslides" title="Facebook">
        Facebook
      </a>
    </li>
    <li class="twitter">
      <a rel="external" href="https://twitter.com/webslides" title="Twitter">
        @WebSlides
      </a>
    </li>
  </ul>
</nav>

<img src="../../../static/images/iphone.png" class="[modifier class]" />

<div id="navigation">
  <a id="next" href="#" title="Arrow Keys">→</a>
  <a id="previous" href="#" title="Arrow Keys">←</a>
  <span id="counter"><a href="#" title="View all slides">53 / 120</a></span>
</div>

<section>
  <p>Content</p>
</section>

<section class="slide-bottom">
  <p>Content</p>
</section>

<section class="fullscreen">
  <p>Content</p>
</section>

<section class="slide-top">
  <p>Content</p>
</section>