<section class="hero is-medium intro">
  <div class="hero-body">
    <div class="container">
      <div class="intro-columns">
        <div class="intro-column is-content">
          <div class="intro-content">
            <h1 class="title intro-title">
              <strong>Bulma</strong> is a free, open source CSS framework based on <strong>Flexbox</strong> and used by more than <strong>150,000</strong> developers.
            </h1>

            <div id="ghbtns" class="intro-ghbtns">
              <iframe src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
              <a href="https://www.npmjs.com/package/bulma" target="_blank" rel="nofollow">
                <img src="https://img.shields.io/npm/dm/bulma.svg">
              </a>
            </div>

            {% assign npmInstall = 'npm install bulma' %}

            <pre id="npm" class="intro-npm"><code>{{ npmInstall }}</code><code id="npmCopy" class="intro-npm-copy" data-clipboard-text="{{ npmInstall }}">copy</code></pre>

            <nav class="intro-buttons">
              <a class="button is-primary is-large" href="{{ site.data.meta.download }}">
                <span>
                  <strong>Download</strong>
                  <small>v{{ site.data.meta.version }}</small>
                </span>
              </a>
              <a class="button is-light is-large" href="{{ site.data.meta.documentation }}">
                <span>
                  <span>View</span>
                  <strong>docs</strong>
                </span>
              </a>
            </nav>
          </div>
        </div>

        <div class="intro-column is-video">
          <div id="introVideo" class="intro-video">
            <div class="intro-shadow" style="background-image: url(data:image/jpeg;base64,[encoded data, 7628 characters]);"></div>
            <div class="intro-spinner"></div>
            <div class="intro-iframe">
              <iframe id="introIframe" src="https://player.vimeo.com/video/237608586?color=00d1b2" width="640" height="338" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
            </div>
          </div>
          <p class="intro-author">
            <span>Video by <a href="http://www.vuemastery.com/" target="_blank">Vue Mastery</a></span>
          </p>
        </div>
      </div>

      {% include index/focus.html %}
    </div>
  </div>
</section>
