Bulma Components

<section class="section py-24 has-background-light">
  <div class="is-relative container">
    <img class="image is-hidden-mobile is-absolute" style="top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%)" src="bendis-assets/images/line-cross.svg" alt="">
    <div class="is-relative">
      <div class="has-mw-xs px-10 mx-auto mb-16-mobile mb-2-tablet has-text-centered">
        <svg width="38" height="38" viewbox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M19 -0.0633545L0 18.6833L19 37.43L38 18.6833L19 -0.0633545ZM4.47782 18.6833L19 4.35477L25.1417 10.4146L22.9026 12.6239L19 8.77429L8.95708 18.6833L12.8582 22.5339L10.6191 24.7432L4.47782 18.6833ZM24.5665 18.6833L19 24.177L13.4349 18.6833L19 13.1924L24.5665 18.6833ZM12.8582 26.9525L15.0974 24.7432L19 28.5923L29.0444 18.6833L25.1417 14.8327L27.3809 12.6235L33.5222 18.6833L19 33.0119L12.8582 26.9525Z" fill="#3C74F9"></path>
        </svg>
        <div>
          <h3 class="title is-size-5 has-leading-4 has-text-primary is-uppercase mt-5 mb-4">No errors</h3>
          <p class="has-text-grey has-leading-6">Take care to develop resources continually and integrity them with previous projects. More interesting writings for your customers.</p>
        </div>
      </div>
      <div class="columns is-centered mb-16-mobile mb-2-tablet">
        <div class="column is-5-desktop mb-16-mobile">
          <div class="has-mw-xs px-10 mx-auto has-text-centered">
            <svg width="34" height="36" viewbox="0 0 34 36" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M32.8905 1.5705C30.489 -0.947027 24.0668 1.51085 17.2086 7.12064C10.3483 1.51085 3.92603 -0.94572 1.5258 1.5705C-0.877753 4.08803 1.46886 10.8146 6.82169 18.0002C1.47011 25.1861 -0.877753 31.9141 1.5258 34.4299C3.92728 36.9469 10.3512 34.4882 17.209 28.8797C24.0668 34.4882 30.4894 36.9469 32.8909 34.4299C35.2945 31.9123 32.9466 25.1844 27.5929 18.0002C32.9478 10.8146 35.2945 4.08672 32.8905 1.5705ZM30.1819 3.48455C30.6898 3.48455 30.9046 3.59515 30.9316 3.62345C31.0713 3.76931 31.4325 5.41646 29.696 9.20581C28.7542 11.2614 27.4213 13.4658 25.7979 15.6986C24.8407 14.5387 23.8128 13.3792 22.7164 12.231C21.6217 11.0859 20.5144 10.0087 19.4093 9.00639C23.9733 5.36987 27.984 3.48455 30.1819 3.48455ZM24.026 17.9993C23.0111 19.2476 21.923 20.4955 20.7555 21.7186C19.5647 22.9677 18.3765 24.1042 17.2098 25.1422C16.0178 24.0806 14.827 22.9407 13.6604 21.7186C12.4679 20.4702 11.3819 19.225 10.3911 18.0037C11.4044 16.7532 12.4912 15.5075 13.6575 14.2848C14.8511 13.0361 16.039 11.8966 17.2057 10.8586C18.3993 11.9219 19.5905 13.0618 20.7563 14.2835C21.9492 15.5327 23.0356 16.7758 24.026 17.9993ZM3.35247 4.40849C3.35247 3.8786 3.45804 3.65175 3.48464 3.62345C3.62263 3.47889 5.19535 3.09878 8.81336 4.91922C10.7755 5.90586 12.8782 7.30221 15.0112 9.0016C13.9039 10.0052 12.7946 11.0824 11.6986 12.2306C10.6051 13.3775 9.57686 14.5374 8.62176 15.6956C5.15213 10.9122 3.35247 6.71049 3.35247 4.40849ZM4.23443 32.5162C3.72695 32.5162 3.51083 32.4043 3.48464 32.3778C3.34541 32.2315 2.98381 30.5843 4.72154 26.795C5.66335 24.7399 6.99501 22.5354 8.61843 20.3026C9.57645 21.4621 10.6047 22.6233 11.7007 23.7715C12.7942 24.9188 13.901 25.9943 15.0082 26.9966C10.4426 30.6309 6.43183 32.5162 4.23443 32.5162ZM31.0642 31.5919C31.0642 32.1226 30.9574 32.349 30.9316 32.376C30.7924 32.5223 29.2201 32.902 25.6029 31.0816C23.6424 30.0949 21.5381 28.6986 19.4068 26.9979C20.5124 25.9951 21.6208 24.9184 22.7152 23.7711C23.8103 22.6242 24.8382 21.4647 25.7954 20.3052C29.2646 25.0882 31.0642 29.2881 31.0642 31.5919Z" fill="#3C74F9"></path>
            </svg>
            <div>
              <h3 class="title is-size-5 has-leading-4 has-text-primary is-uppercase mt-5 mb-4">Weekly email updates</h3>
              <p class="has-text-grey has-leading-6">Take care to develop resources continually and integrity them with previous projects. More interesting writings for your customers.</p>
            </div>
          </div>

<section class="is-relative section py-24 py-40-tablet has-background-light is-overflow-hidden">
  <div class="is-absolute is-top-0 is-bottom-0 is-left-0 is-flex is-align-items-center is-justify-content-center">
    <h2 class="stroke" style="opacity: 20%;">CONTACTS</h2>
  </div>
  <img class="is-hidden-mobile is-absolute is-top-0 is-right-0 is-fullheight has-mw-md has-mw-3xl-widescreen" src="bendis-assets/images/map2.png" alt="">
  <div class="container">
    <div class="has-mw-md mx-auto-mobile has-mw-2xl-tablet">
      <h2 class="title is-size-4-mobile is-size-3 has-text-primary">Got questions?</h2>
      <p class="has-mw-xs is-size-5 has-text-grey mt-4 mb-10">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh.</p>
      <div class="columns">
        <div class="column is-6">
          <div class="py-20 has-background-dark has-text-centered">
            <h4 class="is-size-5 has-text-white has-text-weight-semibold mb-4">Visit us</h4>
            <p class="has-text-white">1686 Geraldine Lane</p>
            <p class="has-text-white">New York, NY 10013</p>
          </div>
        </div>
        <div class="column is-6">
          <div class="py-20 has-background-dark has-text-centered">
            <h4 class="is-size-5 has-text-white has-text-weight-semibold mb-4">Contacts</h4>
            <p class="has-text-white">hello@wireframes.org</p>
            <p class="has-text-white">+7 843 672 431</p>
          </div>
        </div>

<section class="section py-24 has-background-white">
  <div class="container">
    <div class="columns is-vcentered">
      <div class="column is-6">
        <img class="image clip-path-right-top" src="https://images.unsplash.com/photo-1536851101967-55988a52f455?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1036&amp;q=80" alt="">
      </div>
      <div class="column is-6">
        <div class="has-mw-md ml-auto-desktop">
          <h1 class="title is-size-3 has-leading-3 has-text-primary">Take quick action that increases your brand&apos;s regular profit.</h1>
          <p class="subtitle has-leading-4 mt-8">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="section pt-32-desktop has-background-primary">
  <div class="container">
    <div class="columns is-vcentered mb-16">
      <div class="is-hidden-mobile column is-2-tablet is-1-desktop">
        <a class="button is-outlined is-warning w-16 h-16 p-0" href="#">
          <svg width="12" height="16" viewbox="0 0 12 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M8.75 0L11.25 2.5L5.75 8L11.25 13.5L8.75 16L0.75 8L8.75 0Z" fill="currentColor"></path>
          </svg>
        </a>
      </div>
      <div class="column is-8-tablet is-10-desktop">
        <div class="px-8 has-mw-xl mx-auto has-mw-none-widescreen has-text-centered">
          <div class="has-max-content mx-auto has-text-dark">
            <svg width="236" height="179" viewbox="0 0 236 179" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M137.922 179V105.807L203.052 0H236L193.091 93.6716L226.422 95.5678V179H137.922ZM0 179V105.807L65.513 0H98.461L55.5519 93.6716L88.5 95.5678V179H0Z" fill="currentColor"></path>
            </svg>
          </div>
          <div class="has-mw-xl mx-auto -mt-16">
            <h3 class="title is-size-3 has-leading-4 has-text-weight-semibold has-text-white mb-8">Lorem ipsum dolor sit amet consectutar domor at elis</h3>
            <p class="subtitle is-size-5 has-leading-9 has-text-light mb-12">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dignissim quam ultricies, placerat tellus sed, laoreet orci. Duis luctus quam ac metus gravida sodales. Sed a ex accumsan, pellentesque sem</p>
            <img class="image mx-auto mb-6" style="width: 104px; height: 104px; object-fit: cover;" src="https://images.unsplash.com/photo-1556474835-b0f3ac40d4d1?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
            <h4 class="is-size-5 has-text-weight-semibold has-text-primary-light">Peter Prada</h4>
            <span class="is-size-7 has-text-info">UI Designer</span>
          </div>

<section class="is-relative section py-24 has-background-primary">
  <img class="is-absolute is-top-0 is-right-0" src="bendis-assets/images/line-circle-light.svg" alt="">
  <div class="container">
    <div class="has-mw-4xl mx-auto mb-16">
      <div class="has-mw-lg mb-16">
        <span class="has-text-info has-text-weight-semibold is-uppercase">Lorem ipsum</span>
        <h2 class="title is-size-3 has-leading-3 has-text-white mt-4">Lorem ipsum dolor sit amet consectetur</h2>
      </div>
      <div class="columns is-multiline -mb-8">
        <div class="column is-6-tablet is-4-widescreen mb-8">
          <div class="has-mw-xs mx-auto">
            <div class="is-inline-flex w-20 h-12 mb-4 is-align-items-center is-justify-content-center has-background-warning is-size-4 has-text-weight-bold has-text-primary clip-path-both">
              <span>1</span>
            </div>
            <p class="has-text-white has-leading-6">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
          </div>
        </div>
        <div class="column is-6-tablet is-4-widescreen mb-8">
          <div class="has-mw-xs mx-auto">
            <div class="is-inline-flex w-20 h-12 mb-4 is-align-items-center is-justify-content-center has-background-warning is-size-4 has-text-weight-bold has-text-primary clip-path-both">
              <span>2</span>
            </div>
            <p class="has-text-white has-leading-6">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
          </div>

<div class="is-fixed is-bottom-0 is-left-0 is-right-0" tyle="z-index: 50;">
  <div class="section py-0 mb-12">
    <div class="has-mw-xl p-10 has-background-dark">
      <div class="mb-8">
        <h3 class="title is-size-4 has-text-white mb-2">Cookie Policy</h3>
        <p class="is-size-7 has-text-info-light">We use cookies to personalise content, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners. If you want to change your cookie setting, please see the &lsquo;how to reject cookies&apos; section of our . Otherwise, if you agree to our use of cookies, please continue to use our website.</p>
      </div>
      <div class="buttons"><a class="button is-warning" href="#">Accept</a><a class="button is-outlined is-white" href="#">Decline</a></div>
    </div>
  </div>
</div>

<div>
  <nav class="is-relative navbar py-2 has-background-primary">
    <div class="navbar-brand is-align-items-center">
      <a class="navbar-item" href="#">
        <span class="navbar-item px-0 title is-size-5 has-text-dark">
          <img src="bendis-assets/logos/bendis-light.svg" alt="" style="max-height: initial;">
        </span>
      </a>
      <a class="navbar-menu-open navbar-burger is-hidden-desktop is-flex is-align-items-center is-justify-content-center" role="button" type="button" data-toggle="side-menu">
        <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="6" width="20" height="2" fill="white"></rect><rect x="2" y="11" width="20" height="2" fill="white"></rect><rect x="2" y="16" width="20" height="2" fill="white"></rect></svg>
      </a>
    </div>
    <div class="is-hidden-mobile is-hidden-tablet-only is-absolute" style="top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%);">
      <ul class="navbar-item">
        <li><a class="has-text-weight-semibold navbar-item has-text-white" href="#">About</a></li>
        <li><a class="has-text-weight-semibold navbar-item has-text-white" href="#">Company</a></li>
        <li><a class="has-text-weight-semibold navbar-item has-text-white" href="#">Services</a></li>
        <li><a class="has-text-weight-semibold navbar-item has-text-white" href="#">Testimonials</a></li>
      </ul>
    </div>
    <div class="navbar-menu">
      <div class="navbar-end">
        <div class="navbar-item has-mw-xs has-mw-none-fullhd">
          <div class="field has-addons">

<section class="is-relative section py-24 has-background-light">
  <img class="image is-absolute is-top-0 is-left-0 is-fullheight is-fullwidth" src="bendis-assets/images/line-frame-blue-light.svg" alt="">
  <div class="container">
    <div class="columns">
      <div class="column is-5 is-4-fullhd mb-16 mb-0-tablet">
        <ul>
          <li class="mb-5"><a class="is-inline-block is-size-4-mobile is-size-3 has-text-weight-semibold has-text-primary" href="#">Lorem ipsum</a></li>
          <li class="mb-5"><a class="is-inline-block is-size-4-mobile is-size-3 has-text-weight-semibold has-text-info" href="#">Dolor Sit</a></li>
          <li class="mb-5"><a class="is-inline-block is-size-4-mobile is-size-3 has-text-weight-semibold has-text-info" href="#">Amet consectutar</a></li>
          <li><a class="is-inline-block is-size-4-mobile is-size-3 has-text-weight-semibold has-text-info" href="#">Domor at elis</a></li>
        </ul>
      </div>
      <div class="column is-7 is-8-fullhd">
        <div class="columns is-mobile is-multiline">
          <div class="column is-4 p-0">
            <img class="image is-fullwidth" style="height: 307px; object-fit: cover;" src="https://images.unsplash.com/photo-1536851101967-55988a52f455?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
          </div>
          <div class="column is-8 p-0">
            <img class="image is-fullwidth" style="height: 307px; object-fit: cover;" src="https://images.unsplash.com/photo-1553949345-eb786bb3f7ba?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
          </div>
          <div class="column is-8 p-0">
            <img class="image is-fullwidth" style="height: 307px; object-fit: cover;" src="https://images.unsplash.com/photo-1552844657-1d8b11fad02e?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1003&amp;q=80" alt="">
          </div>
          <div class="column is-4 p-0">

<section class="is-relative section pt-24 pb-0">
  <img class="image is-absolute is-top-0 mt-16" style="left: 50%; transform: translateX(-50%);" src="bendis-assets/images/frame-lines-center-blue-light.svg" alt="">
  <div class="container">
    <div class="has-mw-4xl mx-auto mb-16 has-text-centered">
      <span class="is-block has-text-info has-text-weight-semibold is-uppercase has-letter-space mb-4">NEW FEATURE</span>
      <h1 class="title is-size-3-mobile is-size-2 has-leading-3 has-text-primary">Take quick action that increases your brand&apos;s regular profit.</h1>
      <p class="has-mw-2xl mx-auto subtitle is-size-5 has-leading-4 mt-6 mb-8">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
      <div class="is-flex is-justify-content-center">
        <a class="is-block mr-4" href="#">
          <img style="height: 50px;" src="bendis-assets/images/app-store-blue.png" alt="">
        </a>
        <a class="is-block" href="#">
          <img style="height: 50px;" src="bendis-assets/images/google-play-blue.png" alt="">
        </a>
      </div>
    </div>
    <img class="image mx-auto" src="bendis-assets/images/3-devices.png" alt="">
  </div>
</section>

<section class="section py-24 has-background-primary">
  <div class="container">
    <div class="columns is-vcentered">
      <div class="column is-6 mb-14 mb-0-tablet">
        <div class="has-mw-md mx-auto">
          <span class="is-block has-text-info is-uppercase has-text-weight-semibold has-letter-space mb-4">Sign up</span>
          <h2 class="title is-size-3 has-leading-3 has-text-white">Take quick action that increases your brand&apos;s regular profit.</h2>
          <p class="subtitle is-size-5 has-leading-4 has-text-white mt-8">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
        </div>
      </div>
      <div class="column is-6">
        <div class="has-mw-md has-mw-lg-widescreen mx-auto py-12 px-8-mobile px-16-tablet has-background-white">
          <span class="is-block has-text-info is-uppercase has-text-weight-semibold has-letter-space mb-2">Sign up</span>
          <h2 class="title is-size-4 has-text-primary">Sign up to our newsletter</h2>
          <p class="has-mw-xs subtitle has-leading-6 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          <form action="">
            <div class="control mb-2">
              <input class="input pl-6 py-4 has-background-light has-text-primary" type="email" placeholder="E-mail has-addons">
            </div>
            <button class="button is-fullwidth is-warning" type="submit">Action</button>
          </form>
        </div>
      </div>
    </div>

<section class="is-relative section pt-24 pb-24-desktop">
  <div class="is-hidden-mobile is-hidden-tablet-only is-absolute is-top-0 is-right-0 clip-path-left-top has-mw-xl has-mw-xl-desktop has-mw-3xl-fullhd is-fullwidth is-fullheight" style="background-image: url('https://images.unsplash.com/photo-1613946642700-36bde627698e?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80');">
    <div class="is-flex pl-24 is-align-items-center is-justify-content-center is-fullwidth is-fullheight">
      <div class="has-mw-sm">
        <svg width="55" height="42" viewbox="0 0 55 42" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M30.8896 41V41.5H31.3896H50.8896H51.3896V41V22.3559V21.884L50.9184 21.8568L44.3006 21.4749L53.4557 1.20582L53.7745 0.5H53H45.7403H45.4588L45.3128 0.740573L30.9622 24.3846L30.8896 24.5042V24.6441V41ZM0.5 41V41.5H1H20.5H21V41V22.3559V21.8843L20.5291 21.8568L13.9952 21.4754L23.1505 1.20582L23.4693 0.5H22.6948H15.4351H15.1545L15.0083 0.73946L0.573246 24.3835L0.5 24.5035V24.6441V41Z" stroke="#EBE050"></path>
        </svg>
        <h3 class="is-size-4 has-text-white has-text-weight-medium mt-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh.</h3>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="columns is-multiline is-vcentered">
      <div class="column is-12-tablet is-6-desktop">
        <div class="has-mw-md mx-auto">
          <span class="is-block has-text-info has-text-weight-semibold is-uppercase has-letter-space mb-2">Sign up</span>
          <h3 class="title is-size-3 has-leading-3 has-text-primary">Create new account</h3>
          <form action="">
            <div class="columns mb-2 is-gapless">
              <div class="column mb-2 mb-0-tablet mr-2-tablet">
                <div class="control">
                  <input class="input" type="text" placeholder="First name">
                </div>
              </div>

<section>
  <div class="section">
    <div class="container">
      <div class="has-mw-2xl mx-auto">
        <nav class="breadcrumb is-centered has-succeeds-separator mb-6" aria-label="breadcrumbs">
          <ul class="is-uppercase has-text-weight-semibold">
            <li><a href="#">Home</a></li>
            <li><a href="#">Blog</a></li>
            <li class="is-active"><a href="#" aria-current="page">Article</a></li>
          </ul>
        </nav>
        <h1 class="has-text-centered title is-size-3-mobile is-size-2 has-leading-3 has-text-primary mb-8">Lorem ipsum dolor sit amet consectutar</h1>
        <div class="is-flex is-align-items-center is-justify-content-center">
          <img class="image" style="width: 57px; height: 57px; object-fit: cover;" src="https://images.unsplash.com/photo-1556474835-b0f3ac40d4d1?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
          <div class="pl-6">
            <h4 class="is-size-5 has-text-weight-semibold has-text-grey">Peter Prada</h4>
            <span class="is-size-7 has-text-info has-text-weight-semibold">10 jun 2022 | 19:40</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <img class="image is-fullwidth" style="object-fit: cover; height: 600px;" src="https://images.unsplash.com/photo-1458080767772-b1011d305557?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1043&amp;q=80" alt="">
  <div class="section">

<section>
  <img class="is-hidden-mobile image is-fullwidth" style="height: 450px; object-fit: cover;" src="bendis-assets/images/red-image.png" alt="">
  <div class="section py-24">
    <div class="container">
      <div class="has-mw-sm mx-auto has-text-centered">
        <span class="is-block is-size-7 has-text-info has-text-weight-semibold is-uppercase mb-4">Error 404</span>
        <h2 class="title is-size-3 has-leading-3 has-text-primary">Page not found</h2>
        <p class="has-mw-xs mx-auto subtitle is-size-5 mt-2 mb-5">Sorry! We are unable to find the page you are looking for</p>
        <div class="buttons is-centered"><a class="button is-warning" href="#">Go to back home</a><a class="button is-outlined is-primary" href="#">Try again</a></div>
      </div>
    </div>
  </div>
  <img class="is-hidden-tablet image is-fullwidth" style="height: 450px; object-fit: cover;" src="bendis-assets/images/red-image.png" alt="">
</section>

<section class="section py-12">
  <div class="container">
    <div class="columns is-multiline">
      <div class="column is-6-tablet is-3-widescreen">
        <div class="is-flex has-mw-xs mx-auto is-align-items-center py-6 px-8 has-background-light clip-path-both" style="height: 140px;">
          <img class="image mx-auto" src="bendis-assets/logos/slack.svg" alt="">
        </div>
      </div>
      <div class="column is-6-tablet is-3-widescreen">
        <div class="is-flex has-mw-xs mx-auto is-align-items-center py-6 px-8 has-background-light clip-path-both" style="height: 140px;">
          <img class="image mx-auto" src="bendis-assets/logos/dropbox.svg" alt="">
        </div>
      </div>
      <div class="column is-6-tablet is-3-widescreen">
        <div class="is-flex has-mw-xs mx-auto is-align-items-center py-6 px-8 has-background-light clip-path-both" style="height: 140px;">
          <img class="image mx-auto" src="bendis-assets/logos/spotify.svg" alt="">
        </div>
      </div>
      <div class="column is-6-tablet is-3-widescreen">
        <div class="is-flex has-mw-xs mx-auto is-align-items-center py-6 px-8 has-background-light clip-path-both" style="height: 140px;">
          <img class="image mx-auto" src="bendis-assets/logos/stripe.svg" alt="">
        </div>
      </div>
    </div>

<section class="is-relative section py-24 has-background-primary is-overflow-hidden">
  <img class="is-absolute is-top-0 mt-20" style="left: 50%; transform: translateX(-50%);" src="bendis-assets/images/line-triangle-light.svg" alt="">
  <div class="container">
    <div class="has-mw-2xl mx-auto has-text-centered mb-20">
      <span class="is-block has-text-info has-text-weight-semibold is-uppercase has-letter-space mb-4">Lorem ipsum</span>
      <h1 class="title is-size-3 has-leading-3 has-text-white">Take quick action that increases your brand&apos;s regular profit.</h1>
      <p class="subtitle is-size-5 has-leading-4 has-text-white mt-6">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
    </div>
    <div class="has-mw-4xl mx-auto">
      <div class="is-relative">
        <div class="is-relative columns is-vcentered mb-20">
          <div class="is-absolute is-top-0 is-left-0 is-fullwidth is-fullheight has-background-white clip-path-right-top-sm"></div>
          <div class="is-relative column is-4 p-0">
            <img class="image has-mw-xs is-fullwidth clip-path-right-top" style="height: 286px; object-fit: cover;" src="https://images.unsplash.com/photo-1612282131240-6e878907d0f6?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1008&amp;q=80" alt="">
          </div>
          <div class="is-relative column is-8 px-6 pl-8-desktop pt-8-mobile pb-24-mobile">
            <div class="has-mw-xs mx-auto-mobile">
              <h3 class="is-size-3 has-text-weight-semibold has-text-primary mb-1">Sara Manson</h3>
              <span class="has-text-info">UI Designer</span>
              <p class="has-text-primary has-leading-6 mt-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh.</p>
            </div>
          </div>
        </div>
        <div class="is-absolute is-bottom-0 is-right-0 is-flex is-justify-content-end">

<section class="section py-24 has-background-primary">
  <div class="container">
    <div class="pb-10 border-b-primary-light has-text-centered">
      <a class="is-inline-block title is-5 has-text-dark" href="#">
        <img class="image" src="bendis-assets/logos/bendis-light.svg" alt="" style="height: 28px" width="auto">
      </a>
      <ul class="is-flex is-flex-wrap-wrap is-justify-content-center -mb-2">
        <li class="mr-4 mr-10-desktop mb-2"><a class="is-size-7 has-text-weight-medium has-text-white" href="#">Company</a></li>
        <li class="mr-4 mr-10-desktop mb-2"><a class="is-size-7 has-text-weight-medium has-text-white" href="#">Pages</a></li>
        <li class="mr-4 mr-10-desktop mb-2"><a class="is-size-7 has-text-weight-medium has-text-white" href="#">Legal</a></li>
        <li class="mb-2"><a class="is-size-7 has-text-weight-medium has-text-white" href="#">Resources</a></li>
      </ul>
      <div class="buttons mt-8 is-justify-content-center">
        <a class="button p-0 is-light has-text-warning has-background-primary-dark w-12 h-12" href="#">
          <svg width="10" height="18" viewbox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M6.63469 17.7274V9.76612H9.35806L9.76664 6.66255H6.63469V4.68138C6.63469 3.78311 6.88796 3.17095 8.20273 3.17095L9.87687 3.17027V0.394337C9.58735 0.357434 8.59354 0.272827 7.43684 0.272827C5.02146 0.272827 3.36785 1.71891 3.36785 4.37401V6.66255H0.63623V9.76612H3.36785V17.7274H6.63469Z" fill="currentColor"></path>
          </svg>
        </a>
        <a class="button p-0 is-light has-text-warning has-background-primary-dark w-12 h-12" href="#">
          <svg width="19" height="16" viewbox="0 0 19 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M18.8181 2.14598C18.1356 2.44844 17.4032 2.65356 16.6336 2.74513C17.4194 2.27462 18.0208 1.52831 18.3059 0.641769C17.5689 1.0775 16.7553 1.39389 15.8885 1.56541C15.1943 0.82489 14.2069 0.363647 13.1118 0.363647C11.0108 0.363647 9.30722 2.06719 9.30722 4.16707C9.30722 4.46489 9.34083 4.75577 9.40573 5.03392C6.24434 4.87513 3.44104 3.3605 1.56483 1.05895C1.23686 1.61986 1.05028 2.27344 1.05028 2.9711C1.05028 4.29107 1.72243 5.45574 2.74225 6.13713C2.11877 6.11629 1.53237 5.94477 1.01901 5.65968V5.70719C1.01901 7.5498 2.33086 9.08762 4.07031 9.43762C3.75161 9.52338 3.41555 9.57089 3.06789 9.57089C2.82222 9.57089 2.58464 9.54656 2.3517 9.5002C2.8361 11.0125 4.24067 12.1123 5.90483 12.1424C4.6034 13.1623 2.96243 13.7683 1.1801 13.7683C0.873008 13.7683 0.570523 13.7498 0.272705 13.7162C1.95655 14.7974 3.95561 15.4279 6.10416 15.4279C13.1026 15.4279 16.928 9.63117 16.928 4.60398L16.9153 4.11147C17.6627 3.57835 18.3094 2.90853 18.8181 2.14598Z" fill="currentColor"></path>
          </svg>
        </a>
        <a class="button p-0 is-light has-text-warning has-background-primary-dark w-12 h-12" href="#">

<section class="section py-24 has-background-light">
  <div class="container">
    <div class="has-mw-2xl mx-auto has-text-centered mb-16">
      <span class="is-block has-text-info has-text-weight-semibold is-uppercase has-letter-space mb-4">Lorem ipsum</span>
      <h1 class="title is-size-3 has-leading-3 has-text-primary">Lorem ipsum dolor sit amet consectutar</h1>
      <p class="subtitle is-size-5 has-leading-4 mt-6 mb-10">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
    </div>
    <div class="has-mw-4xl mx-auto">
      <div class="columns mb-6">
        <div class="column is-8 py-16 px-10 pl-16-desktop pr-20-desktop has-background-primary">
          <div class="has-mw-md">
            <h3 class="title is-size-3 has-leading-3 has-text-white">Premium Membership</h3>
            <p class="has-text-white mt-4 mb-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
            <div class="has-mw-sm">
              <div class="columns is-multiline -mb-4">
                <div class="column is-6 mb-4">
                  <div class="is-flex">
                    <span class="mr-4 has-text-info">
                      <svg width="20" height="15" viewbox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M6.775 10.9984L17.975 0L20 1.98854L6.775 15L0 8.37152L2.05 6.35843L6.775 10.9984Z" fill="currentColor"></path>
                      </svg>
                    </span>
                    <div>
                      <span class="is-size-7 has-text-white has-text-weight-semibold">Complete documentation</span>

<section class="section py-24 pb-32-desktop has-background-light">
  <div class="container">
    <div class="has-mw-2xl mx-auto has-text-centered mb-16">
      <span class="is-block has-text-info has-text-weight-semibold is-uppercase has-letter-space mb-5">Lorem ipsum</span>
      <h1 class="title is-size-3 has-leading-3 has-text-primary">Lorem ipsum dolor sit amet consectutar</h1>
      <p class="subtitle is-size-5 has-leading-4 mt-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
    </div>
    <div class="has-mw-sm mx-auto has-mw-none-tablet">
      <div class="columns is-multiline">
        <div class="column is-6 mb-14">
          <div class="columns">
            <div class="column">
              <img class="image is-fullwidth" style="max-width: 160px; height: 160px; object-fit: cover;" src="https://images.unsplash.com/photo-1581279219053-6c0ef420e10b?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
            </div>
            <div class="column is-8 pl-8-widescreen">
              <h2 class="is-size-4 has-text-weight-semibold has-text-primary mb-2">Quick problem-solving contact</h2>
              <span class="is-block is-size-7 has-text-info has-text-weight-semibold mb-2">10 jun 2022 | 19:40</span>
              <p class="has-text-grey has-leading-6 mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
              <a class="is-inline-flex is-align-items-center is-size-7 has-text-primary is-uppercase has-text-weight-bold" href="#">
                <span class="mr-2">Read more</span>
                <svg width="8" height="12" viewbox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M1.875 0L0 1.875L4.125 6L0 10.125L1.875 12L7.875 6L1.875 0Z" fill="#3C74F9"></path>
                </svg>
              </a>

<section class="section py-24 has-background-white">
  <div class="container">
    <div class="columns is-vcentered">
      <div class="column is-6">
        <div class="has-mw-md">
          <h1 class="title is-size-3 has-leading-3 has-text-primary">Take quick action that increases your brand&apos;s regular profit.</h1>
          <p class="subtitle has-leading-4 mt-8">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
        </div>
      </div>
      <div class="column is-6">
        <img class="image clip-path-left-top" src="https://images.unsplash.com/photo-1536851101967-55988a52f455?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1036&amp;q=80" alt="">
      </div>
    </div>
  </div>
</section>

<section class="is-relative section py-24 has-background-primary is-overflow-hidden">
  <img class="image is-absolute is-top-0 mt-16" style="left: 50%; transform: translateX(-50%);" src="bendis-assets/images/frame-center-light.svg" alt="">
  <div class="container">
    <div class="columns is-vcentered">
      <div class="column is-5-widescreen">
        <img class="image is-fullwidth has-mw-sm mx-auto" src="bendis-assets/images/phones-left.png" alt="">
      </div>
      <div class="column is-7-widescreen">
        <div class="has-mw-md has-mw-none-widescreen mx-auto">
          <h2 class="title is-size-3-mobile is-size-2 has-leading-3 has-text-white">Get our Free Mobile App</h2>
          <p class="has-mw-md subtitle is-size-5 has-leading-6 has-text-light mt-6 mb-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
          <div class="is-flex">
            <a class="is-block mr-4" href="#">
              <img style="height: 50px;" src="bendis-assets/images/app-store.png" alt="">
            </a>
            <a class="is-block" href="#">
              <img style="height: 50px;" src="bendis-assets/images/google-play.png" alt="">
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>