bulma/docs/_includes/home/intro.html

<section class="bd-home-intro">
  <div class="bd-home-circles">
    <div class="bd-circles">
      <div class="bd-circle js-animated is-one"></div>
      <div class="bd-circle js-animated is-two"></div>
      <div class="bd-circle js-animated is-three"></div>

      <div data-id="cssvars" class="bd-dot js-ready js-dot">
        <div class="bd-dot-bounce is-1">
          <div class="thing is-cssvars">CSS Variables</div>
        </div>
      </div>

      <div data-id="dark" class="bd-dot js-ready js-dot">
        <div class="bd-dot-bounce is-2">
          {% include website/darkmode-toggle.html %}
        </div>
      </div>

      <div data-id="dartsass" class="bd-dot js-ready js-dot">
        <div class="bd-dot-bounce is-3">
          <div class="thing is-dartsass">Dart Sass</div>
        </div>
      </div>

      <div data-id="flexbox" class="bd-dot js-ready js-dot">
        <div class="bd-dot-bounce is-4">
          <div class="thing is-flexbox">Flexbox</div>
        </div>
      </div>

      <div data-id="modular" class="bd-dot js-ready js-dot">
        <div class="bd-dot-bounce is-5">
          <div class="thing is-modular">Modular</div>
        </div>
      </div>

      <div data-id="opensource" class="bd-dot js-ready js-dot">
        <div class="bd-dot-bounce is-6">
          <div class="thing is-opensource">Open Source</div>
        </div>
      </div>

      <div data-id="responsive" class="bd-dot js-ready js-dot">
        <div class="bd-dot-bounce is-7">
          <div class="thing is-responsive">Responsive</div>
        </div>
      </div>

      <div data-id="free" class="bd-dot js-ready js-dot">
        <div class="bd-dot-bounce is-8">
          <div class="thing is-free">Free</div>
        </div>
      </div>

      <div data-id="smartgrid" class="bd-dot js-ready js-dot">
        <div class="bd-dot-bounce is-9">
          <div class="thing is-smartgrid">Smart Grid</div>
        </div>
      </div>

      <div data-id="autocolor" class="bd-dot js-ready js-dot">
        <div class="bd-dot-bounce is-10">
          <div class="thing is-autocolor">Auto Color</div>
        </div>
      </div>

      <div data-id="skeletons" class="bd-dot js-ready js-dot">
        <div class="bd-dot-bounce is-11">
          <div class="thing is-skeletons">Skeletons</div>
        </div>
      </div>

      <div data-id="themes" class="bd-dot js-ready js-dot">
        <div class="bd-dot-bounce is-12">
          <div class="thing is-themes">Themes</div>
        </div>
      </div>

      <div data-id="axbom" class="bd-dot js-ready js-dot">
        {% include home/bubble.html id="axbom" %}
      </div>

      <div data-id="ale_codes" class="bd-dot js-ready js-dot">
        {% include home/bubble.html id="ale_codes" %}
      </div>

      <div data-id="MyTopSecretName" class="bd-dot js-ready js-dot">
        {% include home/bubble.html id="MyTopSecretName" %}
      </div>

      <div data-id="jesseschoff" class="bd-dot js-ready js-dot">
        {% include home/bubble.html id="jesseschoff" %}
      </div>

      <div data-id="infinitysearch" class="bd-dot js-ready js-dot">
        {% include home/bubble.html id="infinitysearch" %}
      </div>

      <div data-id="bruhandle" class="bd-dot js-ready js-dot">
        {% include home/bubble.html id="bruhandle" %}
      </div>
    </div>
  </div>

  {% include global/header.html %}

  <div class="bd-home-intro-body">
    <div class="bd-home-intro-content">
      <h1 class="bd-home-title js-animated">
        The Modern<br />
        CSS Framework
      </h1>

      <p class="bd-home-tagline">
        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>

      <span class="thing bd-home-knowledge">
        <span class="icon"> <i class="fas fa-circle-check"></i></span>
        <strong>No CSS knowledge required!</strong>
      </span>

      <div class="bd-home-buttons buttons is-centered">
        <a
          class="button is-primary"
          href="{{ site.url }}{{ site.data.meta.documentation }}"
        >
          <strong>Get Started</strong>
        </a>

        <a class="button" href="{{ site.data.meta.download }}">
          <strong>Download</strong>
        </a>
      </div>

      <div class="bd-home-features things">
        <div class="thing is-cssvars">CSS Variables</div>
        {% include website/darkmode-toggle.html %}
        <div class="thing is-dartsass">Dart Sass</div>
        <div class="thing is-flexbox">Flexbox</div>
        <div class="thing is-modular">Modular</div>
        <div class="thing is-opensource">Open Source</div>
        <div class="thing is-responsive">Responsive</div>
        <div class="thing is-smartgrid">Smart Grid</div>
      </div>
    </div>
  </div>

  {% include home/features.html %}
</section>