<section class="bd-hello">
  <div class="bd-hello-body">
    <div class="bd-hello-content bd-index-content">
      <h1 class="title has-text-black">
        <strong>Bulma</strong>: the <strong>modern</strong>
        <br>
        CSS framework that
        <br>
        just <strong>works</strong>.
      </h1>

      <div class="content">
        <p>
          Bulma is a free, open source framework that provides ready-to-use frontend components that you can easily combine to build responsive web interfaces.
        </p>
        <div class="icon-text has-text-success">
          <span class="icon">
            <i class="fas fa-check-square"></i>
          </span>
          <strong>No CSS knowledge required.</strong>
        </div>
      </div>

      <div id="ghbtns" class="bd-hello-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' %}

      {% highlight bash %}{{ npmInstall }}{% endhighlight %}

      <nav class="bd-hello-buttons buttons">
        <a class="button bd-fat-button is-primary" href="{{ site.url }}{{ site.data.meta.documentation }}">
          <span>
            Getting started
          </span>
        </a>

        <a class="button bd-fat-button is-primary is-light" href="{{ site.data.meta.download }}">
          <span>
            <strong>Download</strong>
            <small>v{{ site.data.meta.version }}</small>
          </span>
        </a>
      </nav>
    </div>

    <div class="bd-hello-media">
      <div id="introVideo" class="bd-hello-video">
        <div class="bd-hello-shadow" style="background-image: url(data:image/jpeg;base64,[encoded data, 7628 characters]);"></div>
        <div class="bd-hello-spinner"></div>
        <div class="bd-hello-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="bd-hello-author">
        <span>Video by <a href="http://www.vuemastery.com/" target="_blank">Vue Mastery</a></span>
      </p>
    </div>
  </div>
</section>
