features.html

<section>
  <div id="icon-grid" class="container px-4 py-5">
    <h2 class="pb-2 border-bottom">Key Features</h2>
    <div class="row py-5 row-cols-2 row-cols-lg-3">
      <div class="col d-flex align-items-start">
        <div class="features-icon features-icon-gradient text-body-emphasis  d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
          <img role="img" class="filter-white" alt="Free software" aria-label="Free Software" src="{{ '/assets/vendor/nocc-bootstrap-theme/icons/1.11.0/currency-bitcoin.svg' | relative_url }}" width="45em" height="45em">
        </div>
        <div>
          <h3 class="fs-2 text-body-emphasis">Effortless Static Site Generation</h3>
          <p><strong>Get started in seconds!</strong> Static sites are ideal for hosting on object storages or GitHub Pages.</p>
        </div>
      </div>
      <div class="col d-flex align-items-start">
        <div class="features-icon features-icon-gradient text-body-emphasis  d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
          <img role="img" class="filter-white" alt="Bootstrap 5" aria-label="Bootstrap 5" src="{{ '/assets/vendor/nocc-bootstrap-theme/icons/1.11.0/bootstrap.svg' | relative_url }}" width="45em" height="45em">
        </div>
        <div>
          <h3 class="fs-2 text-body-emphasis">Cutting-edge Frameworks</h3>
          <p>Built upon <strong>Bootstrap 5</strong>, NOCC boasts the latest web development tools and libraries.</p>
        </div>
      </div>
      <div class="col d-flex align-items-start">
        <div class="features-icon features-icon-gradient text-body-emphasis  d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
          <img role="img" class="filter-white" alt="Speedometer" aria-label="Speedometer" src="{{ '/assets/vendor/nocc-bootstrap-theme/icons/1.11.0/speedometer.svg' | relative_url }}" width="45em" height="45em">
        </div>
        <div>
          <h3 class="fs-2 text-body-emphasis">Blazing Fast Performance</h3>
          <p>Performance-enhancing techniques like <strong>inlining critical resources and deferring non-critical ones</strong>.</p>
        </div>
      </div>

      <div class="col d-flex align-items-start">
        <div class="features-icon features-icon-gradient text-body-emphasis  d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
          <img role="img" class="filter-white" alt="Google WebFonts" aria-label="Google WebFonts" src="{{ '/assets/vendor/nocc-bootstrap-theme/icons/1.11.0/google.svg' | relative_url }}" width="45em" height="45em">
        </div>
        <div>
          <h3 class="fs-2 text-body-emphasis">Complete Font Control</h3>
          <p>Own your website's visual identity with <strong>self-hosted web fonts</strong>. Enabling faster loading times and efficient data transmission.</p>
        </div>
      </div>
      <div class="col d-flex align-items-start">
        <div class="features-icon features-icon-gradient text-body-emphasis  d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
          <img role="img" class="filter-white" alt="Magic environments" aria-label="Magic environments" src="{{ '/assets/vendor/nocc-bootstrap-theme/icons/1.11.0/magic.svg' | relative_url }}" width="45em" height="45em">
        </div>
        <div>
          <h3 class="fs-2 text-body-emphasis">Local environment built-in</h3>
          <p>Streamline your development process with the integrated Local environment.</p>
        </div>
      </div>
      <div class="col d-flex align-items-start">
        <div class="features-icon features-icon-gradient text-body-emphasis  d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
          <img role="img" class="filter-white" alt="Next-gen filetypes" aria-label="Next-gen filetypes" src="{{ '/assets/vendor/nocc-bootstrap-theme/icons/1.11.0/filetype-svg.svg' | relative_url }}" width="45em" height="45em">
        </div>
        <div>
          <h3 class="fs-2 text-body-emphasis">Next-Generation File Types</h3>
          <p>Extensive use of <strong>next-generation file formats</strong> like WebP and SVG.</p>
        </div>
      </div>
    </div>
  </div>
  <div class="home-divider"></div>
</section>