Bulma Components in Pstls library

<section class="pt-0 pb-20 is-relative is-clipped">
  <nav class="navbar py-8">
    <div class="container">
      <div class="navbar-brand">
        <a class="navbar-item" href="#">
          <img src="pstls-assets/logos/pstls-logo-md.svg" alt="" width="116">
        </a>
        <div class="navbar-item ml-auto is-hidden-desktop">
          <button class="button is-ghost navbar-menu-open">
            <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 7C3.22386 7 3 6.77614 3 6.5C3 6.22386 3.22386 6 3.5 6H20.5C20.7761 6 21 6.22386 21 6.5C21 6.77614 20.7761 7 20.5 7H3.5ZM3.5 12C3.22386 12 3 11.7761 3 11.5C3 11.2239 3.22386 11 3.5 11H20.5C20.7761 11 21 11.2239 21 11.5C21 11.7761 20.7761 12 20.5 12H3.5ZM3 16.5C3 16.7761 3.22386 17 3.5 17H20.5C20.7761 17 21 16.7761 21 16.5C21 16.2239 20.7761 16 20.5 16H3.5C3.22386 16 3 16.2239 3 16.5Z" fill="#000"></path>
            </svg>
          </button>
        </div>
      </div>
      <div class="navbar-menu">
        <div class="navbar-start ml-32"><a class="navbar-item is-size-5 has-text-weight-bold" aria-current="page" href="#">Home</a><a class="navbar-item is-size-5 has-text-weight-bold" href="#">Products</a><a class="navbar-item is-size-5 has-text-weight-bold" href="#">Resources</a><a class="navbar-item is-size-5 has-text-weight-bold" href="#">Pricing</a></div>
        <div class="navbar-end">
          <div class="navbar-item">
            <div class="buttons"><a class="button is-ghost has-text-dark has-text-weight-bold" href="#">Log In</a><a class="button is-dark" href="#">Sign Up</a></div>
          </div>
        </div>
      </div>
    </div>
  </nav>
  <div class="section py-0">
    <div class="container">
      <div class="columns is-multiline is-vcentered">
        <div class="column -ml-32 is-hidden-touch is-relative">
          <div class="is-absolute is-bottom-0 is-left-0" style="transform: translateX(50%);">
            <div class="is-flex" style="transform: rotate(-90deg);"><a class="has-text-dark is-size-7 mr-14 has-text-weight-bold" href="#">Facebook</a><a class="has-text-dark is-size-7 mr-14 has-text-weight-bold" href="#">Twitter</a><a class="has-text-dark is-size-7 has-text-weight-bold" href="#">Instagram</a></div>
          </div>
        </div>
        <div class="column is-12 is-flex is-hidden-desktop">
          <ul class="has-mw-lg mx-auto mt-0-tablet mb-0 is-flex is-justify-content-center has-text-centered">
            <li class="mr-10"><a class="has-text-dark is-size-7 has-text-weight-bold" href="#">Twitter</a></li>
            <li class="mr-10"><a class="has-text-dark is-size-7 has-text-weight-bold" href="#">Facebook</a></li>
            <li><a class="has-text-dark is-size-7 has-text-weight-bold" href="#">Instagram</a></li>
          </ul>
        </div>
        <div class="column is-5-desktop is-6-tablet">
          <div class="is-flex is-align-items-center is-flex-direction-column">
            <div>
              <img class="image" src="pstls-assets/images/headers/header-1-woman.jpg" alt="">
            </div>
            <ul class="mt-9 is-flex is-justify-content-center">
              <li class="mr-3 is-flex"><a class="has-background-dark" href="#" style="width: 8px; height: 8px; border-radius: 50% !important;"></a></li>
              <li class="mr-3 is-flex"><a class="has-background-light" href="#" style="width: 8px; height: 8px; border-radius: 50% !important;"></a></li>
              <li class="mr-3 is-flex"><a class="has-background-light" href="#" style="width: 8px; height: 8px; border-radius: 50% !important;"></a></li>
              <li class="is-flex"><a class="has-background-light" href="#" style="width: 8px; height: 8px; border-radius: 50% !important;"></a></li>
            </ul>
          </div>
        </div>
        <div class="column is-5-desktop is-6-tablet">
          <div class="has-mw-sm-tablet mx-auto">
            <h1 class="title is-size-2-mobile is-size-1-tablet is-spaced">
              <span>Created for</span>
              <span class="has-text-primary">ambitious</span>
              <span>businesses.</span>
            </h1>
            <p class="subtitle has-mw-xs mb-6">Pstls. Kit uses attractive colors and modern typography to make you look good, no matter what business you’re in.</p>
            <a class="button is-dark" href="#">Details</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="is-hidden navbar-side has-mw-md is-fixed is-top-0 is-bottom-0 is-left-0" style="z-index: 9999; width: 100%;">
    <div class="navbar-backdrop is-fixed is-top-0 is-bottom-0 is-left-0 is-right-0 has-background-black" style="opacity: 75%;"></div>
    <nav class="px-6 py-10 is-flex is-relative has-background-white is-flex-direction-column is-fullwidth is-covered" style="height: 100%; overflow-y: auto;">
      <div class="mb-12 is-flex is-align-items-center">
        <a class="mb-0 mr-auto is-size-4" href="#">
          <img src="pstls-assets/logos/pstls-logo-md-success.svg" alt="" width="102">
        </a>
        <button class="button is-ghost p-0 navbar-close" type="button" aria-label="Close">
          <img src="pstls-assets/images/navigations/x2.svg" alt="">
        </button>
      </div>
      <div>
        <ul class="is-flex-direction-column">
          <li class="navbar-item py-3"><a class="is-size-5 has-text-dark has-text-weight-bold" href="#">Home</a></li>
          <li class="navbar-item py-3"><a class="is-size-5 has-text-dark has-text-weight-bold" href="#">Products</a></li>
          <li class="navbar-item py-3"><a class="is-size-5 has-text-dark has-text-weight-bold" href="#">Resources</a></li>
          <li class="navbar-item py-3"><a class="is-size-5 has-text-dark has-text-weight-bold" href="#">Pricing</a></li>
        </ul>
      </div>
      <div class="mt-auto">
        <div class="py-6"><a class="button is-ghost has-text-dark is-fullwidth" href="#">Log In</a><a class="button is-dark is-fullwidth" href="#">Sign Up</a></div>
      </div>
    </nav>
  </div>
</section>