Bulma Components

<section class="pb-20 pb-32-desktop is-relative">
  <div class="is-absolute is-block-desktop is-hidden-touch is-top-0 is-bottom-0 is-left-0" style="width: 50%; background-image:url('https://images.unsplash.com/photo-1515378791036-0648a3ef77b2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=750&amp;q=80'); background-repeat: no-repeat; background-size: cover;">
    <img class="is-absolute is-top-0 is-right-0" style="z-index: 1;" src="cronos-assets/elements/dark-green-dark-warning-right.svg" alt="">
    <img class="is-absolute is-bottom-0 is-left-0" style="z-index: 1;" src="cronos-assets/elements/dark-green-dark-warning.svg" alt="">
  </div>
  <div class="container px-4">
    <div class="columns is-multiline pt-20">
      <div class="column is-12 is-6-desktop ml-auto">
        <div class="has-mw-md-desktop ml-auto-desktop">
          <h3 class="mb-4 title is-size-3 is-spaced">Lorem ipsum dolor sit amet consectutar domor at elis</h3>
          <p class="subtitle mb-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
          <ul>
            <li class="mb-6 is-flex is-align-items-center">
              <span class="mr-4 is-inline-flex has-background-light is-justify-content-center is-align-items-center is-rounded" style="width: 48px; height: 48px; border-radius: 50% !important;">
                <svg style="width: 24px; height: 24px;" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M7 20H20" stroke="#006251" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M4 20V17L17 4L20 7L7 20H4Z" stroke="#006251" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M17 10L14 7" stroke="#006251" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </span>
              <h6 class="mb-0 has-text-weight-normal">Change of access</h6>
            </li>
            <li class="mb-6 is-flex is-align-items-center">
              <span class="mr-4 is-inline-flex has-background-light is-justify-content-center is-align-items-center is-rounded" style="width: 48px; height: 48px; border-radius: 50% !important;">

<section class="pb-20 pb-32-desktop is-relative">
  <div class="container px-4">
    <div class="columns is-multiline pt-20">
      <div class="column is-12 is-6-desktop">
        <div class="has-mw-md-desktop">
          <h3 class="mb-4 title is-size-3 is-spaced">Lorem ipsum dolor sit amet consectutar domor at elis</h3>
          <p class="subtitle mb-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
          <ul>
            <li class="mb-6 is-flex is-align-items-center">
              <span class="mr-4 is-inline-flex has-background-light is-justify-content-center is-align-items-center is-rounded" style="width: 48px; height: 48px; border-radius: 50% !important;">
                <svg style="width: 24px; height: 24px;" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M7 20H20" stroke="#006251" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M4 20V17L17 4L20 7L7 20H4Z" stroke="#006251" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M17 10L14 7" stroke="#006251" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </span>
              <h6 class="mb-0 has-text-weight-normal">Change of access</h6>
            </li>
            <li class="mb-6 is-flex is-align-items-center">
              <span class="mr-4 is-inline-flex has-background-light is-justify-content-center is-align-items-center is-rounded" style="width: 48px; height: 48px; border-radius: 50% !important;">
                <svg style="width: 24px; height: 24px;" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12 22C12 22 20 18 20 12V5L12 2L4 5V12C4 18 12 22 12 22Z" stroke="#006251" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M8 11.5L11 14.5L17 8.5" stroke="#006251" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>

<section class="pb-20 pb-32-desktop is-relative has-background-light">
  <div class="is-absolute is-block-desktop is-hidden-touch is-top-0 is-bottom-0 is-left-0" style="width: 50%; background-image:url('https://images.unsplash.com/photo-1515378791036-0648a3ef77b2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=750&amp;q=80'); background-repeat: no-repeat; background-size: cover;">
    <img class="is-absolute is-top-0 is-right-0" style="z-index: 1;" src="cronos-assets/elements/dark-green-dark-warning-right.svg" alt="">
    <img class="is-absolute is-bottom-0 is-left-0" style="z-index: 1;" src="cronos-assets/elements/dark-green-dark-warning.svg" alt="">
  </div>
  <div class="container px-4">
    <div class="columns is-multiline pt-20">
      <div class="column is-12 is-6-desktop ml-auto">
        <div class="has-mw-md-desktop ml-auto-desktop">
          <h3 class="mb-4 title is-size-3 is-spaced">Lorem ipsum dolor sit amet consectutar domor at elis</h3>
          <p class="subtitle mb-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
          <ul>
            <li class="mb-6 is-flex is-align-items-center">
              <span class="mr-4 is-inline-flex has-background-light is-justify-content-center is-align-items-center is-rounded" style="width: 48px; height: 48px; border-radius: 50% !important;">
                <svg style="width: 24px; height: 24px;" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M7 20H20" stroke="#006251" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M4 20V17L17 4L20 7L7 20H4Z" stroke="#006251" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M17 10L14 7" stroke="#006251" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </span>
              <h6 class="mb-0 has-text-weight-normal">Change of access</h6>
            </li>
            <li class="mb-6 is-flex is-align-items-center">
              <span class="mr-4 is-inline-flex has-background-light is-justify-content-center is-align-items-center is-rounded" style="width: 48px; height: 48px; border-radius: 50% !important;">

<section class="pb-20 pb-32-desktop is-relative has-background-light">
  <div class="container px-4">
    <div class="columns is-multiline pt-20">
      <div class="column is-12 is-6-desktop">
        <div class="has-mw-md-desktop">
          <h3 class="mb-4 title is-size-3 is-spaced">Lorem ipsum dolor sit amet consectutar domor at elis</h3>
          <p class="subtitle mb-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
          <ul>
            <li class="mb-6 is-flex is-align-items-center">
              <span class="mr-4 is-inline-flex has-background-light is-justify-content-center is-align-items-center is-rounded" style="width: 48px; height: 48px; border-radius: 50% !important;">
                <svg style="width: 24px; height: 24px;" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M7 20H20" stroke="#006251" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M4 20V17L17 4L20 7L7 20H4Z" stroke="#006251" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M17 10L14 7" stroke="#006251" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </span>
              <h6 class="mb-0 has-text-weight-normal">Change of access</h6>
            </li>
            <li class="mb-6 is-flex is-align-items-center">
              <span class="mr-4 is-inline-flex has-background-light is-justify-content-center is-align-items-center is-rounded" style="width: 48px; height: 48px; border-radius: 50% !important;">
                <svg style="width: 24px; height: 24px;" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12 22C12 22 20 18 20 12V5L12 2L4 5V12C4 18 12 22 12 22Z" stroke="#006251" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M8 11.5L11 14.5L17 8.5" stroke="#006251" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>

<section class="pb-20 pb-32-desktop is-relative has-background-warning-light">
  <div class="is-absolute is-block-desktop is-hidden-touch is-top-0 is-bottom-0 is-left-0" style="width: 50%; background-image:url('https://images.unsplash.com/photo-1515378791036-0648a3ef77b2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=750&amp;q=80'); background-repeat: no-repeat; background-size: cover;">
    <img class="is-absolute is-top-0 is-right-0" style="z-index: 1;" src="cronos-assets/elements/dark-green-dark-warning-right.svg" alt="">
    <img class="is-absolute is-bottom-0 is-left-0" style="z-index: 1;" src="cronos-assets/elements/dark-green-dark-warning.svg" alt="">
  </div>
  <div class="container px-4">
    <div class="columns is-multiline pt-20">
      <div class="column is-12 is-6-desktop ml-auto">
        <div class="has-mw-md-desktop ml-auto-desktop">
          <h3 class="mb-4 title is-size-3 is-spaced">Lorem ipsum dolor sit amet consectutar domor at elis</h3>
          <p class="subtitle mb-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
          <ul>
            <li class="mb-6 is-flex is-align-items-center">
              <span class="mr-4 is-inline-flex has-background-light is-justify-content-center is-align-items-center is-rounded" style="width: 48px; height: 48px; border-radius: 50% !important;">
                <svg style="width: 24px; height: 24px;" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M7 20H20" stroke="#006251" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M4 20V17L17 4L20 7L7 20H4Z" stroke="#006251" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M17 10L14 7" stroke="#006251" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </span>
              <h6 class="mb-0 has-text-weight-normal">Change of access</h6>
            </li>
            <li class="mb-6 is-flex is-align-items-center">
              <span class="mr-4 is-inline-flex has-background-light is-justify-content-center is-align-items-center is-rounded" style="width: 48px; height: 48px; border-radius: 50% !important;">

<section class="section" style="background-image: url('https://images.unsplash.com/photo-1602115175636-1957cf9fa231?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80'); background-repeat: no-repeat; background-size: cover;">
  <div class="container">
    <div class="columns is-multiline">
      <div class="column is-12 is-6-desktop mb-8 mb-0-desktop">
        <div class="p-8 p-12-desktop has-background-white">
          <svg width="48" height="48" viewbox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M14 40H40" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M8 40V34L34 8L40 14L14 40H8Z" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M34 20L28 14" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
          <h6 class="mt-6 mb-4 has-text-weight-normal is-size-4">Change of access</h6>
          <p class="subtitle mb-4">Focus on your business with a large number of useful tools to take care of your company's development. Share your difficulties with us, and we will help you.</p>
          <a class="has-text-weight-bold" href="#">
            <span>Learn More</span>
            <span class="ml-2 is-inline-block">
              <svg width="4" height="8" viewbox="0 0 4 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M2.84147 4.00001L0.120381 0.825405C-0.0593303 0.615742 -0.0350495 0.300092 0.174613 0.120381C0.384276 -0.0593303 0.699926 -0.0350495 0.879637 0.174613L3.87964 3.67461C4.04013 3.86186 4.04013 4.13816 3.87964 4.3254L0.879637 7.8254C0.699926 8.03507 0.384276 8.05935 0.174613 7.87964C-0.0350495 7.69993 -0.0593303 7.38428 0.120381 7.17461L2.84147 4.00001Z" fill="#006251"></path>
              </svg>
            </span>
          </a>
        </div>
      </div>
      <div class="column is-12 is-6-desktop pl-4-desktop">
        <div class="p-8 p-12-desktop has-background-white">

<section class="section" style="background-image: url('https://images.unsplash.com/photo-1602115175636-1957cf9fa231?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80'); background-repeat: no-repeat; background-size: cover;">
  <div class="container">
    <div class="columns is-multiline">
      <div class="column is-12 is-6-desktop">
        <div class="p-8 p-12-desktop has-background-white">
          <svg width="48" height="48" viewbox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M14 40H40" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M8 40V34L34 8L40 14L14 40H8Z" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M34 20L28 14" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
          <h6 class="mt-6 mb-4 is-size-4">Change of access</h6>
          <p class="subtitle mb-4">Focus on your business with a large number of useful tools to take care of your company's development. Share your difficulties with us, and we will help you.</p>
          <a class="has-text-weight-bold" href="#">
            <span>Learn More</span>
            <span class="ml-2 is-inline-block">
              <svg width="4" height="8" viewbox="0 0 4 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M2.84147 4.00001L0.120381 0.825405C-0.0593303 0.615742 -0.0350495 0.300092 0.174613 0.120381C0.384276 -0.0593303 0.699926 -0.0350495 0.879637 0.174613L3.87964 3.67461C4.04013 3.86186 4.04013 4.13816 3.87964 4.3254L0.879637 7.8254C0.699926 8.03507 0.384276 8.05935 0.174613 7.87964C-0.0350495 7.69993 -0.0593303 7.38428 0.120381 7.17461L2.84147 4.00001Z" fill="#006251"></path>
              </svg>
            </span>
          </a>
        </div>
      </div>
      <div class="column is-12 is-6-desktop pl-4-desktop">
        <div class="p-8 p-12-desktop has-background-white">

<section class="section pt-0">
  <nav class="navbar py-4">
    <div class="navbar-brand">
      <a class="navbar-item" href="#">
        <img class="image" src="bulma-plain-assets/logos/plainb-logo.svg" alt="" width="96px">
      </a>
      <a class="navbar-burger" role="button" aria-label="menu" aria-expanded="false">
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
      </a>
    </div>
    <div class="navbar-menu">
      <div class="navbar-end"><a class="navbar-item" href="#">About</a><a class="navbar-item" href="#">Company</a><a class="navbar-item" href="#">Services</a><a class="navbar-item" href="#">Testimonials</a></div>
      <div class="navbar-item"><a class="button is-primary" href="#">Contact Us</a></div>
    </div>
  </nav>
  <div class="container pt-5">
    <div class="mb-5 is-vcentered columns is-multiline">
      <div class="column is-12 is-5-desktop mb-5 mr-auto">
        <h2 class="mb-6 is-size-1 is-size-3-mobile has-text-weight-bold">Take care of your performance every day.</h2>
        <p class="subtitle has-text-grey mb-6">Build a well-presented brand that everyone will love. Take care to develop resources continually and integrity them with previous projects.</p>
        <div class="buttons"><a class="button is-primary" href="#">Track your performance</a><a class="button" href="#">Learn more</a></div>
      </div>

<section class="section pt-0 is-relative">
  <img class="is-hidden-touch image is-fullwidth" style="position: absolute; top; 0; bottom: 0; left: 0; object-fit: cover; height: 100%; width: 50%;" src="bulma-plain-assets/images/green-400-vertical.png" alt="">
  <div class="is-relative">
    <nav class="navbar py-4" style="background-color: transparent;">
      <div class="navbar-brand">
        <a class="navbar-item is-hidden-touch" href="#">
          <img class="image is-fullwidth" style="width: 96px" src="bulma-plain-assets/logos/plainb-logo-white.svg" alt="" width="96px">
        </a>
        <a class="navbar-item is-hidden-desktop" href="#">
          <img class="image" src="bulma-plain-assets/logos/plainb-logo.svg" alt="" width="96px">
        </a>
        <a class="navbar-burger" role="button" aria-label="menu" aria-expanded="false">
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </a>
      </div>
      <div class="navbar-menu">
        <div class="navbar-end"><a class="navbar-item" href="#">About</a><a class="navbar-item" href="#">Company</a><a class="navbar-item" href="#">Services</a><a class="navbar-item" href="#">Testimonials</a></div>
        <div class="navbar-item"><a class="button is-primary" href="#">Contact Us</a></div>
      </div>
    </nav>
    <div class="container">
      <div class="pt-5 columns is-multiline">

<section style="padding-bottom: 256px;">
  <nav class="navbar is-light px-6 py-4">
    <div class="navbar-brand">
      <a class="navbar-item" href="#">
        <img class="image" src="bulma-plain-assets/logos/plainb-logo.svg" alt="" width="96px">
      </a>
      <a class="navbar-burger" role="button" aria-label="menu" aria-expanded="false">
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
      </a>
    </div>
    <div class="navbar-menu">
      <div class="navbar-end"><a class="navbar-item" href="#">About</a><a class="navbar-item" href="#">Company</a><a class="navbar-item" href="#">Services</a><a class="navbar-item" href="#">Testimonials</a></div>
      <div class="navbar-item"><a class="button is-primary" href="#">Contact Us</a></div>
    </div>
  </nav>
  <div class="has-background-light" style="padding-bottom: 256px;">
    <div class="section">
      <div class="container mb-5">
        <div class="columns is-multiline is-centered is-relative">
          <div class="column is-8 mb-6 has-text-centered">
            <h2 class="mb-6 is-size-1 is-size-3-mobile has-text-weight-bold">Finish what you started today before you forget to do it.</h2>
            <p class="subtitle has-text-grey mb-6">Correct annotation helps your customers find their way around new features. Getting familiar with the project is the first step towards development.</p>

<section class="section pt-0 has-background-light">
  <nav class="navbar py-4" style="background-color: transparent;">
    <div class="navbar-brand">
      <a class="navbar-item" href="#">
        <img class="image" src="bulma-plain-assets/logos/plainb-logo.svg" alt="" width="96px">
      </a>
      <a class="navbar-burger" role="button" aria-label="menu" aria-expanded="false">
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
      </a>
    </div>
    <div class="navbar-menu">
      <div class="navbar-end"><a class="navbar-item" href="#">About</a><a class="navbar-item" href="#">Company</a><a class="navbar-item" href="#">Services</a><a class="navbar-item" href="#">Testimonials</a></div>
      <div class="navbar-item">
        <div class="buttons"><a class="button" href="#">Sign In</a><a class="button is-primary" href="#">Sign Up</a></div>
      </div>
    </div>
  </nav>
  <div class="container pt-5">
    <div class="columns is-multiline is-centered mb-6">
      <div class="column is-8 is-6-desktop">
        <div class="has-text-centered">
          <span class="has-text-grey-dark">Develop your skill</span>

<section class="section pt-0 pb-5 is-relative has-background-light">
  <nav class="navbar py-4" style="background-color: transparent;">
    <div class="navbar-brand">
      <a class="navbar-item" href="#">
        <img class="image" src="bulma-plain-assets/logos/plainb-logo.svg" alt="" width="96px">
      </a>
      <a class="navbar-burger" role="button" aria-label="menu" aria-expanded="false">
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
      </a>
    </div>
    <div class="navbar-end is-hidden-mobile">
      <button class="button is-light is-flex-direction-column">
        <span class="block px-3 mb-1 has-background-black" style="padding: 1px;"></span>
        <span class="block px-3 mb-1 has-background-black" style="padding: 1px;"></span>
        <span class="block px-3 has-background-black" style="padding: 1px;"></span>
      </button>
    </div>
  </nav>
  <div class="container pt-5">
    <div class="is-vcentered columns is-multiline">
      <div class="column is-6 is-5-desktop mb-5 mr-auto">
        <h2 class="mb-6 is-size-1 is-size-3-mobile has-text-weight-bold">Take care of your performance every day.</h2>

<section class="section pt-0 pb-6 is-relative has-background-light">
  <nav class="navbar py-4" style="background-color: transparent;">
    <div class="navbar-brand">
      <a class="navbar-item" href="#">
        <img class="image" src="bulma-plain-assets/logos/plainb-logo.svg" alt="" width="96px">
      </a>
      <a class="navbar-burger" role="button" aria-label="menu" aria-expanded="false">
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
      </a>
    </div>
    <div class="navbar-menu">
      <div class="navbar-end"><a class="navbar-item" href="#">About</a><a class="navbar-item" href="#">Company</a><a class="navbar-item" href="#">Services</a><a class="navbar-item" href="#">Testimonials</a></div>
      <div class="navbar-item">
        <div class="buttons"><a class="button" href="#">Sign In</a><a class="button is-primary" href="#">Sign Up</a></div>
      </div>
    </div>
  </nav>
  <div class="container pt-5">
    <div class="columns is-multiline is-centered">
      <div class="column is-6 mx-auto mb-5 has-text-centered">
        <span class="has-text-grey-dark">Develop your skill</span>
        <h2 class="mt-2 mb-6 is-size-1 is-size-3-mobile has-text-weight-bold">Take care of your performance every day.</h2>

<section class="section">
  <div class="container">
    <div class="columns is-multiline">
      <div class="column is-6 is-4-desktop mb-5">
        <div class="is-flex">
          <span class="mr-4">
            <svg width="48" height="48" viewbox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M25.6 22.9C25.7 23 25.8 23 26 23H33C33.6 23 34 22.6 34 22C34 21.8 34 21.7 33.9 21.6L30.4 14.6C30.1 14.1 29.5 13.9 29 14.2C28.9 14.3 28.7 14.4 28.6 14.6L25.1 21.6C24.9 22 25.1 22.6 25.6 22.9ZM29.5 17.2L31.4 21H27.6L29.5 17.2ZM18.5 14C16 14 14 16 14 18.5C14 21 16 23 18.5 23C21 23 23 21 23 18.5C23 16 21 14 18.5 14ZM18.5 21C17.1 21 16 19.9 16 18.5C16 17.1 17.1 16 18.5 16C19.9 16 21 17.1 21 18.5C21 19.9 19.9 21 18.5 21ZM22.7 25.3C22.3 24.9 21.7 24.9 21.3 25.3L18.5 28.1L15.7 25.3C15.3 24.9 14.7 24.9 14.3 25.3C13.9 25.7 13.9 26.3 14.3 26.7L17.1 29.5L14.3 32.3C13.9 32.7 13.9 33.3 14.3 33.7C14.7 34.1 15.3 34.1 15.7 33.7L18.5 30.9L21.3 33.7C21.7 34.1 22.3 34.1 22.7 33.7C23.1 33.3 23.1 32.7 22.7 32.3L19.9 29.5L22.7 26.7C23.1 26.3 23.1 25.7 22.7 25.3ZM33 25H26C25.4 25 25 25.4 25 26V33C25 33.6 25.4 34 26 34H33C33.6 34 34 33.6 34 33V26C34 25.4 33.6 25 33 25ZM32 32H27V27H32V32Z" fill="#00d1b2"></path>
              <circle cx="24" cy="24" r="23.5" stroke="#00d1b2"></circle>
            </svg>
          </span>
          <div>
            <h4 class="is-size-5 has-text-weight-bold mb-2">Security in saving</h4>
            <p class="has-text-grey-dark">Take care to develop resources continually and integrity them with previous projects. More interesting writings for your customers.</p>
          </div>
        </div>
      </div>
      <div class="column is-6 is-4-desktop mb-5">
        <div class="is-flex">
          <span class="mr-4">
            <svg width="48" height="48" viewbox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M25.6 22.9C25.7 23 25.8 23 26 23H33C33.6 23 34 22.6 34 22C34 21.8 34 21.7 33.9 21.6L30.4 14.6C30.1 14.1 29.5 13.9 29 14.2C28.9 14.3 28.7 14.4 28.6 14.6L25.1 21.6C24.9 22 25.1 22.6 25.6 22.9ZM29.5 17.2L31.4 21H27.6L29.5 17.2ZM18.5 14C16 14 14 16 14 18.5C14 21 16 23 18.5 23C21 23 23 21 23 18.5C23 16 21 14 18.5 14ZM18.5 21C17.1 21 16 19.9 16 18.5C16 17.1 17.1 16 18.5 16C19.9 16 21 17.1 21 18.5C21 19.9 19.9 21 18.5 21ZM22.7 25.3C22.3 24.9 21.7 24.9 21.3 25.3L18.5 28.1L15.7 25.3C15.3 24.9 14.7 24.9 14.3 25.3C13.9 25.7 13.9 26.3 14.3 26.7L17.1 29.5L14.3 32.3C13.9 32.7 13.9 33.3 14.3 33.7C14.7 34.1 15.3 34.1 15.7 33.7L18.5 30.9L21.3 33.7C21.7 34.1 22.3 34.1 22.7 33.7C23.1 33.3 23.1 32.7 22.7 32.3L19.9 29.5L22.7 26.7C23.1 26.3 23.1 25.7 22.7 25.3ZM33 25H26C25.4 25 25 25.4 25 26V33C25 33.6 25.4 34 26 34H33C33.6 34 34 33.6 34 33V26C34 25.4 33.6 25 33 25ZM32 32H27V27H32V32Z" fill="#00d1b2"></path>
              <circle cx="24" cy="24" r="23.5" stroke="#00d1b2"></circle>
            </svg>

<section class="section">
  <div class="container">
    <div class="mb-5 columns is-multiline is-centered">
      <div class="column is-10 is-6-desktop has-text-centered">
        <span class="has-text-grey-dark">Lorem ipsum</span>
        <h2 class="mt-2 mb-4 is-size-1 is-size-3-mobile has-text-weight-bold">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
        <p class="mb-6 subtitle has-text-grey">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
        <ul class="buttons is-centered">
          <li><a class="button is-primary" href="#">General</a></li>
          <li><a class="button is-white has-text-primary" href="#">Payments</a></li>
          <li><a class="button is-white has-text-primary" href="#">Returns</a></li>
          <li><a class="button is-white has-text-primary" href="#">Refunds</a></li>
        </ul>
      </div>
    </div>
    <div class="columns is-multiline is-centered">
      <div class="column is-10 is-8-desktop">
        <ul>
          <li class="mb-4">
            <button class="button is-fullwidth is-flex is-justify-content-between is-align-items-center is-primary has-text-left" style="height: auto; white-space: unset;" type="button">
              <h2 class="pr-4 mr-auto">Fusce eget nunc et libero accumsan rutrum quis nec lectus?</h2>
              <svg class="is-flex-shrink-0 ml-auto" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M19.2498 10C19.2498 4.892 15.1088 0.75 9.99976 0.75C4.89176 0.75 0.749756 4.892 0.749756 10C0.749756 15.108 4.89176 19.25 9.99976 19.25C15.1088 19.25 19.2498 15.108 19.2498 10Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M13.4709 11.4423L9.99995 7.95626L6.52895 11.4423" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>

<section class="section">
  <div class="container">
    <div class="columns is-centered">
      <div class="column is-10 is-8-desktop mb-5 has-text-centered">
        <span class="has-text-grey-dark">Lorem ipsum</span>
        <h2 class="mt-2 mb-4 is-size-1 is-size-3-mobile has-text-weight-bold">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
        <p class="subtitle has-text-grey mb-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
        <div class="buttons is-centered"><a class="button is-primary" href="#">Monthly</a><a class="button" href="#">Yearly</a></div>
      </div>
    </div>
    <div class="is-vcentered columns is-multiline">
      <div class="column is-6 is-4-desktop mb-5">
        <div class="box has-background-light has-text-centered">
          <h4 class="has-text-grey-dark">Starter</h4>
          <span class="mb-5 is-inline-block is-size-1 is-size-3-mobile has-text-weight-bold">$34,99</span>
          <ul class="mb-5">
            <li class="mb-3 is-flex is-align-items-center">
              <svg class="has-text-grey mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor" style="width: 24px;height: 24px">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
              <p class="mb-0">Complete documentation</p>
            </li>
            <li class="mb-3 is-flex is-align-items-center">
              <svg class="has-text-grey mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor" style="width: 24px;height: 24px">

<nav class="navbar py-4">
  <div class="container">
    <div class="navbar-brand mx-auto">
      <a class="navbar-item" href="#">
        <img class="image" src="bulma-plain-assets/logos/plainb-logo.svg" alt="" width="96px">
      </a>
    </div>
  </div>
</nav>

<section class="section">
  <div class="container">
    <div class="box p-6 has-background-light">
      <div class="is-vcentered columns is-multiline">
        <div class="column is-8-desktop mb-3">
          <div>
            <h3 class="is-size-2 is-size-3-mobile mb-2 has-text-weight-bold">Sign up to our newsletter</h3>
            <p class="has-text-grey-dark">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </div>
        </div>
        <div class="column is-4-desktop">
          <form action="#">
            <div class="is-flex">
              <div class="control mr-2 is-flex-grow-1">
                <input class="input" type="email" placeholder="Type your e-mail">
              </div>
              <button class="button is-primary">Action</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="section">
  <div class="container">
    <div class="is-vcentered columns is-multiline is-centered">
      <div class="column is-3 mb-4">
        <div class="box is-flex is-align-items-center has-background-light" style="height: 128px;">
          <img class="mx-auto is-block image is-fullwidth" style="height: 34px;" src="bulma-plain-assets/logos/slack.svg" alt="">
        </div>
      </div>
      <div class="column is-3 mb-4">
        <div class="box is-flex is-align-items-center has-background-light" style="height: 128px;">
          <img class="mx-auto is-block image is-fullwidth" style="height: 34px;" src="bulma-plain-assets/logos/dropbox.svg" alt="">
        </div>
      </div>
      <div class="column is-3 mb-4">
        <div class="box is-flex is-align-items-center has-background-light" style="height: 128px;">
          <img class="mx-auto is-block image is-fullwidth" style="height: 34px;" src="bulma-plain-assets/logos/spotify.svg" alt="">
        </div>
      </div>
      <div class="column is-3 mb-4">
        <div class="box is-flex is-align-items-center has-background-light" style="height: 128px;">
          <img class="mx-auto is-block image is-fullwidth img-fluid" style="height: 34px;" src="bulma-plain-assets/logos/stripe.svg" alt="">
        </div>
      </div>
    </div>

<section class="section">
  <div class="container">
    <div class="is-vcentered columns is-multiline">
      <div class="column is-6 is-5-desktop mb-5">
        <img class="image is-fullwidth" src="bulma-plain-assets/images/green-400-square.png" alt="">
      </div>
      <div class="column is-6 ml-auto">
        <div>
          <h2 class="mb-6 is-size-1 is-size-3-mobile has-text-weight-bold">Lorem ipsum dolor sit amet consectetur</h2>
          <div class="columns is-multiline">
            <div class="column is-6 mb-5">
              <span class="has-text-white mb-2 is-flex has-background-primary is-justify-content-center is-align-items-center" style="width: 48px;height: 48px; border-radius: 50% !important;">1</span>
              <p class="subtitle has-text-grey mt-3 mb-0">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
            </div>
            <div class="column is-6 mb-5">
              <span class="has-text-white mb-2 is-flex has-background-primary is-justify-content-center is-align-items-center" style="width: 48px;height: 48px; border-radius: 50% !important;">2</span>
              <p class="subtitle has-text-grey mt-3 mb-0">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
            </div>
            <div class="column is-6 mb-5">
              <span class="has-text-white mb-2 is-flex has-background-primary is-justify-content-center is-align-items-center" style="width: 48px;height: 48px; border-radius: 50% !important;">3</span>
              <p class="subtitle has-text-grey mt-3 mb-0">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
            </div>
            <div class="column is-6 mb-5">
              <span class="has-text-white mb-2 is-flex has-background-primary is-justify-content-center is-align-items-center" style="width: 48px;height: 48px; border-radius: 50% !important;">4</span>