UI Components – Bendis Library

<section class="section py-24">
  <div class="container">
    <div class="has-mw-4xl mx-auto">
      <div class="mb-2 py-4 px-6 pl-10-tablet pr-14-tablet has-background-light">
        <button class="button is-light p-0 is-fullwidth is-align-items-center is-justify-content-space-between has-background-transparent has-text-left button-wrap-text">
          <span class="is-size-6 has-text-primary-dark">Fusce eget nunc et libero accumsan rutrum quis nec lectus?</span>
          <span>
            <svg width="16" height="12" viewbox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M16 3.25L13.5 0.75L7.99997 6.25L2.49997 0.749999L-3.01679e-05 3.25L7.99997 11.25L16 3.25Z" fill="#3C74F9"></path>
            </svg>
          </span>
        </button>
      </div>
      <div class="mb-2 py-4 px-6 pl-10-tablet pr-14-tablet has-background-info-light">
        <button class="button is-light p-0 is-fullwidth is-align-items-center is-justify-content-space-between has-background-transparent has-text-left button-wrap-text">
          <span class="is-size-5 has-text-info">Quick problem-solving contact</span>
          <span>
            <svg width="17" height="12" viewbox="0 0 17 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M0.00244131 8.75L2.50244 11.25L8.00244 5.75L13.5024 11.25L16.0024 8.75L8.00244 0.75L0.00244131 8.75Z" fill="#1633AB"></path>
            </svg>
          </span>
        </button>
        <div class="has-mw-2xl">
          <p class="has-text-grey">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod orci sed tristique placerat. Fusce in ligula urna. Fusce eget nunc et libero accumsan rutrum quis nec lectus. Quisque luctus sem nibh, quis ornare neque consectetur varius. Maecenas rhoncus consectetur rutrum.</p>

<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 py-12 px-8-mobile px-16-tablet has-background-white">
      <div class="mb-8">
        <h3 class="title is-size-4 has-text-primary mb-2">Cookie Policy</h3>
        <p class="is-size-7 has-text-grey">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="#">Yes, I accept</a><a class="button is-outlined is-primary" href="#">More informations</a></div>
    </div>
  </div>
</div>

<section class="section py-32-desktop">
  <div class="container">
    <div class="columns is-vcentered mb-12">
      <div class="column mb-8-mobile">
        <div class="has-mw-lg">
          <nav class="breadcrumb 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="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">
            <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 class="column">
        <img class="image is-fullwidth clip-path-left-top" style="object-fit: cover; height: 358px;" 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="is-relative has-background-primary">
  <nav class="is-relative navbar py-2 has-background-transparent">
    <div class="navbar-brand is-align-items-center is-flex-grow-1">
      <a class="navbar-item" href="#">
        <svg width="22" height="23" viewbox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M21.7973 20.0328L16.4361 14.4697C18.7112 10.9316 18.2607 6.2297 15.3549 3.22699C13.7105 1.55107 11.548 0.619995 9.22781 0.619995C6.90764 0.619995 4.74515 1.55107 3.12329 3.22699C-0.233072 6.71851 -0.233072 12.3748 3.12329 15.843C6.02913 18.8457 10.5794 19.3112 14.0033 16.9836L19.387 22.5467C19.6348 22.8028 20.0628 22.8028 20.3106 22.5467L21.7973 21.0104C22.0676 20.7311 22.0676 20.2889 21.7973 20.0328ZM13.3726 13.8179C11.0975 16.1689 7.38069 16.1689 5.08304 13.8179C2.80793 11.467 2.80793 7.6263 5.08304 5.25207C7.35816 2.90112 11.0749 2.90112 13.3726 5.25207C15.6477 7.6263 15.6477 11.467 13.3726 13.8179Z" fill="white"></path>
        </svg>
      </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-absolute" style="top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%);">
      <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>
    </div>
    <div class="navbar-menu">
      <div class="navbar-end">
        <a class="navbar-menu-open navbar-burger 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>

<section class="is-relative section py-24 has-background-light is-overflow-hidden">
  <img class="is-absolute is-top-0 mt-20" style="left: 50%; transform: translateX(-50%);" src="bendis-assets/images/line-triangle-background.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-primary">Take quick action that increases your brand&apos;s regular profit.</h1>
      <p class="subtitle is-size-5 has-leading-4 has-text-grey 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-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 has-mw-xs mx-auto py-6 px-8 has-background-light clip-path-both" style="height: 140px;">
          <img class="image mx-auto" src="bendis-assets/logos/slack-color.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 has-mw-xs mx-auto py-6 px-8 has-background-light clip-path-both" style="height: 140px;">
          <img class="image mx-auto" src="bendis-assets/logos/dropbox-color.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 has-mw-xs mx-auto py-6 px-8 has-background-light clip-path-both" style="height: 140px;">
          <img class="image mx-auto" src="bendis-assets/logos/spotify-color.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 has-mw-xs mx-auto py-6 px-8 has-background-light clip-path-both" style="height: 140px;">
          <img class="image mx-auto" src="bendis-assets/logos/stripe-color.svg" alt="">
        </div>
      </div>
    </div>

<section class="is-relative section py-32">
  <img class="is-absolute is-top-0 is-left-0 mt-16" src="bendis-assets/images/lines-left.png" alt="">
  <div class="container">
    <div class="has-mw-md mx-auto">
      <span class="is-block has-text-info has-text-weight-semibold is-uppercase has-letter-space">Sign in</span>
      <h3 class="title is-size-4 has-text-primary">Sign in to your account</h3>
      <form action="">
        <div class="control mb-2">
          <input class="input pl-6 py-4 has-background-light has-text-primary" type="password" placeholder="Password">
        </div>
        <div class="control mb-6">
          <input class="input pl-6 py-4 has-background-light has-text-primary" type="password" placeholder="Repeat password">
        </div>
        <div class="control mb-4">
          <label class="checkbox has-text-grey">
            <input class="mr-3" type="checkbox">
            <span>By signing up, you agree to our</span>
            <a class="is-link" href="#">Terms, Data Policy and Cookies Policy.</a>
          </label>
        </div>
        <button class="button is-fullwidth is-warning mb-4" type="submit">Try demo</button>
        <div class="has-text-centered mb-4"><a class="is-link" href="#">Forgot password?</a></div>
        <button class="button is-outlined is-primary is-fullwidth is-uppercase has-text-weight-bold mb-2">
          <span>

<section class="section pt-32-desktop has-background-light">
  <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-primary 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-white">
            <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-primary mb-8">Lorem ipsum dolor sit amet consectutar domor at elis</h3>
            <p class="subtitle is-size-5 has-leading-6 has-text-grey 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">Peter Prada</h4>
            <span class="is-size-7 has-text-grey">UI Designer</span>
          </div>

<section>
  <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="image is-fullwidth" style="height: 450px; object-fit: cover;" src="bendis-assets/images/red-image.png" alt="">
</section>

<section class="is-relative has-background-primary is-overflow-hidden">
  <img class="is-absolute is-top-0 mt-24 image" style="left: 50%; opacity: 20%; transform: translateX(-50%);" src="bendis-assets/images/line-triangle-background.svg" alt="">
  <div class="is-absolute is-top-0 is-left-0 mt-28-desktop -ml-4 -ml-12-desktop">
    <h2 class="stroke-light">CONTACTS</h2>
  </div>
  <div class="section pt-28-desktop">
    <div class="container">
      <div class="columns">
        <div class="column is-4 has-text-centered">
          <svg width="40" height="40" viewbox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
            <g clip-path="url(#clip0_241_2434)">
              <path d="M19.9999 0C15.5317 0 11.3456 1.76704 8.19431 4.96682C2.17392 11.0798 1.70357 20.918 7.01845 27.6041C7.11252 27.7951 7.20659 27.9384 7.39473 28.1294L18.683 39.5913C19.0592 39.9256 19.5296 40.1166 19.9999 40.1166C20.4703 40.1166 20.9406 39.9256 21.3169 39.5436L32.6051 28.0817C32.7462 27.9384 32.8873 27.7473 32.9814 27.5563C38.2963 20.8702 37.8259 11.0321 31.8055 4.91906C28.6542 1.76704 24.4682 0 19.9999 0ZM29.8301 25.455C29.7831 25.5505 29.689 25.5982 29.642 25.6938L19.9999 35.5319L10.3109 25.6938C10.2638 25.5982 10.2168 25.5505 10.1227 25.455C5.79556 20.2971 6.07776 12.4648 10.8282 7.64127C13.274 5.15785 16.5664 3.82063 19.9999 3.82063C23.4334 3.82063 26.7258 5.20561 29.1246 7.68902C33.875 12.4648 34.2043 20.2971 29.8301 25.455Z" fill="#EBE050"></path>
              <path d="M19.9999 8.1189C15.3435 8.1189 11.5337 11.9873 11.5337 16.7153C11.5337 21.4434 15.3435 25.3117 19.9999 25.3117C24.6563 25.3117 28.466 21.4434 28.466 16.7153C28.466 11.9873 24.6563 8.1189 19.9999 8.1189ZM19.9999 21.4911C17.413 21.4911 15.2964 19.342 15.2964 16.7153C15.2964 14.0886 17.413 11.9395 19.9999 11.9395C22.5868 11.9395 24.7033 14.0886 24.7033 16.7153C24.7033 19.342 22.5868 21.4911 19.9999 21.4911Z" fill="#EBE050"></path>
            </g>
            <defs><rect width="40" height="40" fill="white"></rect></defs>
          </svg>
          <p class="is-size-5 has-text-white mt-8">1686 Geraldine Lane</p>
          <p class="is-size-5 has-text-white">New York, NY 10013</p>
        </div>
        <div class="column is-4 has-text-centered">
          <svg width="40" height="40" viewbox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M29.4114 10.8069L27.9907 22.7692C27.8844 23.6109 27.8319 24.4168 27.8319 25.188C27.8319 26.3361 28.2467 26.906 29.0762 26.906C30.4001 26.906 31.671 26.0036 32.8886 24.198C34.1062 22.3924 34.706 20.2013 34.706 17.6343C34.706 13.9269 33.3649 10.9035 30.6647 8.59023C27.9644 6.26719 24.6993 5.11097 20.8515 5.11097C16.6334 5.11097 13.0856 6.5483 10.2175 9.42256C7.34047 12.2972 5.91117 15.838 5.91117 20.053C5.91117 23.9878 7.2617 27.4055 9.95292 30.3059C12.6532 33.207 16.4389 34.6619 21.3192 34.6619C25.1136 34.6619 28.9794 33.6539 32.9239 31.6295L34.4504 35.1259C30.2323 37.264 25.8463 38.3334 21.3196 38.3334C15.3013 38.3334 10.5273 36.5282 6.97945 32.9263C3.44066 29.3248 1.66675 25.0218 1.66675 20.0262C1.66675 14.8032 3.52927 10.439 7.25308 6.93371C10.9765 3.41941 15.4773 1.66675 20.7457 1.66675C25.7142 1.66675 29.8881 3.18271 33.2591 6.19753C36.6391 9.2209 38.3334 13.0334 38.3334 17.6343C38.3334 20.973 37.3804 23.9523 35.483 26.5638C33.5856 29.1667 31.2825 30.4725 28.5556 30.4725C26.4375 30.4725 24.9729 29.5876 24.1606 27.8084C22.678 29.6573 20.8692 30.5776 18.7334 30.5776C16.5452 30.5776 14.6654 29.6752 13.1118 27.8525C11.55 26.0383 10.7734 23.6545 10.7734 20.6927C10.7734 17.6428 11.6472 15.1715 13.4035 13.2607C15.1684 11.3504 17.2598 10.395 19.6864 10.395C22.0339 10.395 23.7192 11.1312 24.7518 12.6032L24.9639 10.8065H29.4114V10.8069ZM19.0694 26.3976C20.4458 26.3976 21.6901 25.7319 22.8023 24.3997C23.914 23.0764 24.4703 21.3498 24.4703 19.2289C24.4703 18.0282 24.0466 16.9596 23.1908 16.0042C22.3432 15.0578 21.2934 14.5844 20.0491 14.5844C18.7076 14.5844 17.5954 15.1715 16.713 16.346C15.8391 17.5116 15.3981 19.0366 15.3981 20.9033C15.3981 22.4893 15.7337 23.8036 16.4221 24.838C17.1011 25.8716 17.9835 26.3976 19.0694 26.3976Z" fill="#EBE050"></path>
          </svg>
          <p class="is-size-5 has-text-white mt-12">hello@wireframes.org</p>

<section class="is-relative section py-24">
  <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-primary 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-grey 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-grey has-leading-6">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
          </div>

<section class="section py-24 has-background-light">
  <div class="container">
    <div class="has-mw-xl mx-auto mb-10 has-text-centered">
      <span class="is-block has-text-info is-uppercase has-text-weight-semibold has-letter-space mb-5">Lorem ipsum</span>
      <h2 class="title is-size-3 has-leading-3 has-text-primary">Lorem ipsum dolor sit amet consectutar.</h2>
      <p class="subtitle is-size-5 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 has-mw-3xl-tablet mx-auto">
      <div class="columns">
        <div class="column is-5-tablet is-5-widescreen">
          <div class="control">
            <input class="input has-background-white" type="email" placeholder="Type your e-mail">
          </div>
        </div>
        <div class="column is-4-tablet is-5-widescreen">
          <div class="control">
            <input class="input has-background-white" type="text" placeholder="Type your phone number">
          </div>
        </div>
        <div class="column is-3-tablet is-2-widescreen">
          <div class="control">
            <button class="button is-warning" type="submit">Action</button>
          </div>
        </div>

<section class="section py-24 has-background-light">
  <div class="container">
    <div class="pb-10 border-b-grey has-text-centered">
      <a class="is-inline-block title is-5 has-text-dark" href="#">
        <img class="image" src="bendis-assets/logos/bendis-blue.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-primary" href="#">Company</a></li>
        <li class="mr-4 mr-10-desktop mb-2"><a class="is-size-7 has-text-weight-medium has-text-primary" href="#">Pages</a></li>
        <li class="mr-4 mr-10-desktop mb-2"><a class="is-size-7 has-text-weight-medium has-text-primary" href="#">Legal</a></li>
        <li class="mb-2"><a class="is-size-7 has-text-weight-medium has-text-primary" href="#">Resources</a></li>
      </ul>
      <div class="buttons mt-8 is-justify-content-center">
        <a class="button p-0 is-light has-text-primary has-background-white 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-primary has-background-white 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-primary has-background-white w-12 h-12" href="#">

<section class="section py-24 has-background-light">
  <div class="container">
    <div class="columns is-multiline is-vcentered mb-8">
      <div class="column is-12-tablet is-6-widescreen">
        <div class="has-mw-md mx-auto">
          <h1 class="title is-size-3 has-leading-3 has-text-primary">Lorem ipsum dolor sit amet consectutar</h1>
        </div>
      </div>
      <div class="column is-12-tablet is-6-widescreen">
        <div class="has-mw-md has-mw-sm-widescreen mx-auto has-text-right-widescreen">
          <p class="subtitle has-leading-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
        </div>
      </div>
    </div>
    <div class="has-mw-md mx-auto has-mw-none-widescreen">
      <div class="columns is-multiline px-8-mobile px-16-tablet py-5 mb-4 is-vcentered has-background-white">
        <div class="column is-12 is-3-widescreen">
          <h3 class="title is-size-4 has-text-primary">Starter</h3>
        </div>
        <div class="column is-12 is-4-widescreen py-5">
          <ul>
            <li class="mb-4">
              <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">

<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">Take quick action that increases your brand&apos;s regular profit.</h1>
      <p class="has-mw-2xl mx-auto is-size-5 subtitle has-leading-6 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-2xl-desktop mx-auto has-mw-none-widescreen">
      <div class="columns is-multiline">
        <div class="column is-6-tablet is-4-widescreen">
          <div class="p-10 has-mw-md mx-auto has-background-white">
            <div class="mb-6">
              <svg width="51" height="39" viewbox="0 0 51 39" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M28.5519 38V38.5H29.0519H47.0519H47.5519V38V20.7542V20.2823L47.0808 20.2551L41.0272 19.9051L49.4558 1.20546L49.7738 0.5H49H42.2987H42.017L41.871 0.740967L28.6243 22.6117L28.5519 22.7311V22.8708V38ZM0.5 38V38.5H1H19H19.5V38V20.7542V20.2826L19.0292 20.2551L13.053 19.9056L21.4818 1.20546L21.7998 0.5H21.026H14.3247H14.0438L13.8977 0.739855L0.573005 22.6106L0.5 22.7304V22.8708V38Z" stroke="#EBE050"></path>
              </svg>
            </div>
            <p class="has-text-grey has-leading-6 mb-10">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>
            <div class="is-flex is-align-items-center">
              <img class="image w-12 h-12" style="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-primary-dark">Peter Prada</h4>
                <span class="is-size-7 has-text-grey-light has-text-weight-medium">UI Designer</span>
              </div>
            </div>

<section class="section py-24 has-background-primary">
  <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="columns is-multiline">
      <div class="column is-6-tablet is-4-widescreen">
        <div class="has-mw-md mx-auto">
          <img class="image is-fullwidth" style="height: 220px; object-fit: cover;" src="https://images.unsplash.com/photo-1529068755536-a5ade0dcb4e8?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=801&amp;q=80" alt="">
          <div class="pt-6 pb-16 px-6 has-background-dark has-text-centered">
            <h3 class="is-size-4 has-text-weight-semibold has-text-white mb-1">Peter Prada</h3>
            <span class="has-text-info has-text-weight-medium">CEO &amp; Founder</span>
            <div class="mt-8 buttons is-centered">
              <a class="button py-0 px-4 is-ghost has-text-warning" href="#">
                <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="M13.6347 20.7272V12.766H16.3581L16.7666 9.66243H13.6347V7.68126C13.6347 6.78299 13.888 6.17083 15.2027 6.17083L16.8769 6.17015V3.39421C16.5874 3.35731 15.5935 3.27271 14.4368 3.27271C12.0215 3.27271 10.3679 4.71878 10.3679 7.37389V9.66243H7.63623V12.766H10.3679V20.7272H13.6347Z" fill="currentColor"></path>
                  <mask id="mask0_236_2077" style="mask-type:alpha" maskunits="userSpaceOnUse" x="7" y="3" width="10" height="18">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M13.6347 20.7272V12.766H16.3581L16.7666 9.66243H13.6347V7.68126C13.6347 6.78299 13.888 6.17083 15.2027 6.17083L16.8769 6.17015V3.39421C16.5874 3.35731 15.5935 3.27271 14.4368 3.27271C12.0215 3.27271 10.3679 4.71878 10.3679 7.37389V9.66243H7.63623V12.766H10.3679V20.7272H13.6347Z" fill="white"></path>
                  </mask>
                </svg>
              </a>
              <a class="button py-0 px-4 is-ghost has-text-warning" href="#">

<section class="section py-24 pb-32-desktop has-background-light">
  <div class="container">
    <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>
            </div>
          </div>
        </div>
        <div class="column is-6 mb-14">
          <div class="columns">

<section class="section py-24 has-background-light">
  <div class="container">
    <div class="has-mw-2xl mx-auto mb-10 has-text-centered">
      <span class="is-block has-text-info has-text-weight-semibold is-uppercase has-letter-space mb-4">NEW FEATURE</span>
      <h2 class="title is-size-3 has-leading-3 has-text-primary">Lorem ipsum dolor</h2>
    </div>
    <div class="has-mw-4xl mx-auto">
      <div class="columns is-multiline is-mobile mb-10">
        <div class="column is-6-mobile is-4-tablet is-one-fifth-desktop">
          <a class="button is-flex-direction-column is-fullwidth is-fullheight py-5 px-2 is-primary is-uppercase" href="#">
            <span class="is-block mb-2">
              <svg width="29" height="26" viewbox="0 0 29 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g clip-path="url(#clip0_250_2376)">
                  <path d="M14.5022 -0.043335L0.608398 12.7833L14.5022 25.61L28.3959 12.7833L14.5022 -0.043335ZM3.88281 12.7833L14.5022 2.97959L18.9933 7.12581L17.3559 8.63743L14.5022 6.00348L7.15826 12.7833L10.011 15.4179L8.37362 16.9296L3.88281 12.7833ZM18.5727 12.7833L14.5022 16.5422L10.4327 12.7833L14.5022 9.0264L18.5727 12.7833ZM10.011 18.4412L11.6484 16.9296L14.5022 19.5632L21.8471 12.7833L18.9933 10.1487L20.6307 8.63711L25.1215 12.7833L14.5022 22.5871L10.011 18.4412Z" fill="#A0CDFA"></path>
                </g>
                <defs><rect width="27.7875" height="26" fill="white" transform="translate(0.608398)"></rect></defs>
              </svg>
            </span>
            <span>General</span>
          </a>
        </div>
        <div class="column is-6-mobile is-4-tablet is-one-fifth-desktop">
          <a class="button is-flex-direction-column is-fullwidth is-fullheight py-5 px-2 is-outlined is-primary is-uppercase" href="#">
            <span class="is-block mb-2">

<section class="section py-12">
  <div class="container">
    <div class="columns is-mobile is-multiline">
      <div class="column is-6-mobile is-4-tablet is-2-widescreen">
        <div class="is-flex has-mw-xs mx-auto is-align-items-center py-6 px-8" style="height: 140px;">
          <img class="image mx-auto" src="bendis-assets/logos/slack-color.svg" alt="">
        </div>
      </div>
      <div class="column is-6-mobile is-4-tablet is-2-widescreen">
        <div class="is-flex has-mw-xs mx-auto is-align-items-center py-6 px-8" style="height: 140px;">
          <img class="image mx-auto" src="bendis-assets/logos/dropbox-color.svg" alt="">
        </div>
      </div>
      <div class="column is-6-mobile is-4-tablet is-2-widescreen">
        <div class="is-flex has-mw-xs mx-auto is-align-items-center py-6 px-8" style="height: 140px;">
          <img class="image mx-auto" src="bendis-assets/logos/spotify-color.svg" alt="">
        </div>
      </div>
      <div class="column is-6-mobile is-4-tablet is-2-widescreen">
        <div class="is-flex has-mw-xs mx-auto is-align-items-center py-6 px-8" style="height: 140px;">
          <img class="image mx-auto" src="bendis-assets/logos/amazon-color.svg" alt="">
        </div>
      </div>
      <div class="column is-6-mobile is-4-tablet is-2-widescreen">

<section class="py-24 is-overflow-hidden">
  <div class="section py-0 mb-14">
    <div class="container">
      <div class="has-mw-3xl mx-auto">
        <div class="columns is-align-items-end">
          <div class="column is-7">
            <div class="has-mw-md">
              <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-primary mt-3">Lorem ipsum dolor sit amet consectutar</h2>
            </div>
          </div>
          <div class="column is-5">
            <div class="is-flex is-justify-content-end">
              <a class="button is-outlined is-primary 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>
              <a class="button is-outlined is-primary 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="M3.25 0L0.75 2.5L6.25 8L0.75 13.5L3.25 16L11.25 8L3.25 0Z" fill="currentColor"></path>
                </svg>
              </a>
            </div>