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.url }}{{ 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 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>