bulma/docs/_includes/index/intro.html

<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,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);"></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>