UI Components – Bendis Library

<section class="is-relative section pb-0 py-40-desktop is-overflow-hidden">
  <div class="is-hidden-mobile is-hidden-tablet-only has-mw-xl-desktop has-mw-3xl-widescreen is-absolute is-right-0 -mr-20" style="top: 50%; transform: translateY(-50%);">
    <img class="image" style="object-fit: cover;" src="bendis-assets/images/computer-large.png" alt="">
  </div>
  <div class="container">
    <div class="has-mw-md mx-auto ml-0-desktop">
      <h2 class="title is-size-3-mobile is-size-2 has-leading-3 has-text-primary">Lorem Ipsum dolor sit amet</h2>
      <p class="subtitle is-size-5 has-leading-6 mt-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
      <div class="is-flex is-align-items-center mb-6">
        <div class="is-inline-flex w-20 h-12 pl-5 mr-6 is-align-items-center has-background-warning is-size-4 has-text-weight-bold has-text-primary clip-path-right-top">
          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <g clip-path="url(#clip0_252_2665)">
              <path d="M12 -0.0400009L0 11.8L12 23.64L24 11.8L12 -0.0400009ZM2.8281 11.8L12 2.75039L15.879 6.57767L14.4648 7.97301L12 5.54167L5.6571 11.8L8.121 14.2319L6.7068 15.6273L2.8281 11.8ZM15.5157 11.8L12 15.2697L8.4852 11.8L12 8.33206L15.5157 11.8ZM8.121 17.0226L9.5352 15.6273L12 18.0583L18.3438 11.8L15.879 9.36806L17.2932 7.97272L21.1719 11.8L12 20.8496L8.121 17.0226Z" fill="#1633AB"></path>
            </g>
            <defs><rect width="24" height="24" fill="white"></rect></defs>
          </svg>
        </div>
        <p class="is-size-5 has-text-grey has-text-weight-medium">Lorem Ipsum dolor</p>
      </div>
      <div class="is-flex is-align-items-center mb-6">
        <div class="is-inline-flex w-20 h-12 pl-5 mr-6 is-align-items-center has-background-warning is-size-4 has-text-weight-bold has-text-primary clip-path-right-top">
          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M13 0V1.98083C18.055 2.47811 22 6.70233 22 11.84C22 16.9768 18.055 21.2007 13 21.698V23.68C19.1593 23.1762 24.0001 18.0714 24.0001 11.84C24.0001 5.60772 19.1593 0.504976 13 0Z" fill="#1633AB"></path>
            <path d="M11.0001 21.698C5.9472 21.2007 2.0001 16.9768 2.0001 11.84C2.0001 6.70262 5.9472 2.47811 11.0001 1.98083V0C4.842 0.504976 0 5.60772 0 11.84C0 18.0714 4.842 23.1762 11.0001 23.68V21.698Z" fill="#1633AB"></path>

<section class="section">
  <div class="container">
    <div class="has-mw-3xl mx-auto">
      <h2 class="title is-size-4-mobile is-size-3 has-leading-3 has-text-primary">When I was a developer, I often had a hundred questions when</h2>
      <p class="is-size-5 has-leading-6 has-text-grey-dark mb-10">Building websites from wireframes that I had received. Some of those questions were:</p>
      <ul class="mb-10">
        <li class="is-flex mb-6">
          <div class="is-flex-shrink-0 is-inline-flex w-16 h-10 mr-6 is-align-items-center is-justify-content-center has-background-warning is-size-4 has-text-weight-bold has-text-primary clip-path-right-top">
            <span class="-ml-4">1</span>
          </div>
          <p class="is-size-4">How will this design scale when I shrink the browser window?</p>
        </li>
        <li class="is-flex mb-6">
          <div class="is-flex-shrink-0 is-inline-flex w-16 h-10 mr-6 is-align-items-center is-justify-content-center has-background-warning is-size-4 has-text-weight-bold has-text-primary clip-path-right-top">
            <span class="-ml-4">2</span>
          </div>
          <p class="is-size-4">What happens when this shape is filled out incorrectly?</p>
        </li>
        <li class="is-flex">
          <div class="is-flex-shrink-0 is-inline-flex w-16 h-10 mr-6 is-align-items-center is-justify-content-center has-background-warning is-size-4 has-text-weight-bold has-text-primary clip-path-right-top">
            <span class="-ml-4">3</span>
          </div>
          <p class="is-size-4">What are the options in this sorting filter, and what do they do?</p>
        </li>

<div class="is-relative has-background-primary">
  <nav class="navbar py-2 has-background-transparent">
    <div class="container">
      <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="navbar-menu">
        <div class="navbar-end">
          <div class="navbar-item">
            <button class="navbar-menu-open button is-ghost p-0">
              <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>
            </button>
          </div>
        </div>
      </div>
    </div>
  </nav>

<section class="section py-24 has-background-light">
  <div class="container">
    <div class="columns">
      <div class="column is-4">
        <div class="has-mw-md mx-auto has-background-white is-fullheight">
          <img class="image is-fullwidth" style="height: 231px; object-fit: cover;" src="https://images.unsplash.com/photo-1615866369373-8d232ea5a028?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=634&amp;q=80" alt="">
          <div class="has-mw-xs mx-auto px-6 px-10-desktop pt-16 pb-20 has-text-centered">
            <h3 class="is-size-5 has-leading-4 has-text-primary has-text-weight-bold is-uppercase mb-4">Change of access</h3>
            <p class="has-text-grey has-leading-6">Take care to develop resources continually and integrity them with previous projects.</p>
          </div>
        </div>
      </div>
      <div class="column is-4">
        <div class="has-mw-md mx-auto has-background-white is-fullheight">
          <img class="image is-fullwidth" style="height: 231px; object-fit: cover;" src="https://images.unsplash.com/photo-1615866431878-500cc9e74d82?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=634&amp;q=80" alt="">
          <div class="has-mw-xs mx-auto px-6 px-10-desktop pt-16 pb-20 has-text-centered">
            <h3 class="is-size-5 has-leading-4 has-text-primary has-text-weight-bold is-uppercase mb-4">Frequent authentication</h3>
            <p class="has-text-grey has-leading-6">Take care to develop resources continually and integrity them with previous projects.</p>
          </div>
        </div>
      </div>
      <div class="column is-4">
        <div class="has-mw-md mx-auto has-background-white is-fullheight">
          <img class="image is-fullwidth" style="height: 231px; object-fit: cover;" src="https://images.unsplash.com/photo-1615072870329-51396f9838a2?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1051&amp;q=80" alt="">

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

<section class="section py-24 has-background-light">
  <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-8">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 has-leading-4 is-size-5 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>
    <img class="image is-fullwidth" style="max-height: 573px; 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=1036&amp;q=80" alt="">
  </div>
</section>

<section class="section pt-24 pb-16 has-background-primary">
  <div class="container">
    <div class="has-mw-md mx-auto mb-8 has-text-centered">
      <span class="has-text-info has-text-weight-semibold is-uppercase">Lorem ipsum</span>
      <h2 class="title is-size-4-mobile is-size-3 has-text-white mt-3">Lorem ipsum dolor sit amet consectutar</h2>
    </div>
    <div class="buttons is-centered mb-16"><a class="button is-white" href="#">Active demo</a><a class="button is-dark has-background-dark" href="#">Normal Tab</a><a class="button is-dark has-background-dark" href="#">Normal Tab</a><a class="button is-dark has-background-dark" href="#">Normal Tab</a></div>
    <div class="has-mw-2xl has-mw-none-widescreen mx-auto mb-16">
      <div class="columns is-multiline">
        <div class="column is-12 is-6-widescreen">
          <div class="columns is-multiline">
            <div class="column is-12 p-0">
              <img class="image is-fullwidth" style="height: 555px; 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-6 p-0">
              <img class="image is-fullwidth" style="height: 277px; 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-6 p-0">
              <img class="image is-fullwidth" style="height: 277px; 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>
        </div>
        <div class="column is-12 is-6-widescreen">
          <div class="columns is-multiline">

<section class="section py-24 has-background-light">
  <div class="container">
    <div class="columns is-multiline mb-16">
      <div class="column is-6-tablet is-4-widescreen">
        <div class="has-mw-sm mx-auto has-background-white">
          <div class="is-relative">
            <img class="image is-fullwidth" style="height: 220px; object-fit: cover;" src="https://images.unsplash.com/photo-1506464253090-7af30fe60a71?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=334&amp;q=80" alt="">
            <div class="is-absolute is-top-0 is-left-0 is-flex is-align-items-center is-justify-content-center py-2 has-background-info-light clip-path-right-top-sm" style="width: 161px;">
              <span class="is-size-7 has-text-grey is-uppercase has-text-weight-semibold">Development</span>
            </div>
          </div>
          <div class="pt-10 px-10 pb-8">
            <h2 class="is-size-4 has-text-weight-semibold has-text-primary mb-2">Vestibulum sapien diam, fermentum</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-4">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>

<section class="section py-24 has-background-light">
  <div class="container">
    <div class="columns mb-10 pb-10 border-b-grey">
      <div class="column is-8">
        <div class="columns is-mobile is-multiline">
          <div class="column is-6-mobile is-3-tablet mb-2">
            <h3 class="mb-4 title is-size-6 has-text-primary">Company</h3>
            <ul>
              <li class="mb-4"><a class="is-size-7 has-text-primary" href="#">About Us</a></li>
              <li class="mb-4"><a class="is-size-7 has-text-primary" href="#">Careers</a></li>
              <li class="mb-4"><a class="is-size-7 has-text-primary" href="#">Press</a></li>
              <li class="mb-4"><a class="is-size-7 has-text-primary" href="#">Blog</a></li>
            </ul>
          </div>
          <div class="column is-6-mobile is-3-tablet mb-4">
            <h3 class="mb-4 title is-size-6 has-text-primary">Pages</h3>
            <ul>
              <li class="mb-4"><a class="is-size-7 has-text-primary" href="#">Login</a></li>
              <li class="mb-4"><a class="is-size-7 has-text-primary" href="#">Register</a></li>
              <li class="mb-4"><a class="is-size-7 has-text-primary" href="#">Add list</a></li>
              <li class="mb-4"><a class="is-size-7 has-text-primary" href="#">Contact</a></li>
            </ul>
          </div>
          <div class="column is-6-mobile is-3-tablet mb-4">

<section class="section pt-24 pb-16">
  <div class="container">
    <div class="has-mw-md mx-auto mb-8 has-text-centered">
      <span class="has-text-info has-text-weight-semibold is-uppercase">Lorem ipsum</span>
      <h2 class="title is-size-4-mobile is-size-3 has-text-primary mt-3">Lorem ipsum dolor sit amet consectutar</h2>
    </div>
    <div class="buttons is-centered mb-16"><a class="button is-primary" href="#">Active demo</a><a class="button is-white has-text-primary has-background-light" href="#">Normal Tab</a><a class="button is-white has-text-primary has-background-light" href="#">Normal Tab</a><a class="button is-white has-text-primary has-background-light" href="#">Normal Tab</a></div>
    <div class="has-mw-2xl has-mw-none-widescreen mx-auto mb-16">
      <div class="columns is-multiline">
        <div class="column is-12 is-6-widescreen">
          <div class="columns is-multiline">
            <div class="column is-12 p-0">
              <img class="image is-fullwidth" style="height: 555px; 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-6 p-0">
              <img class="image is-fullwidth" style="height: 277px; 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-6 p-0">
              <img class="image is-fullwidth" style="height: 277px; 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>
        </div>
        <div class="column is-12 is-6-widescreen">
          <div class="columns is-multiline">

<section class="section">
  <div class="container">
    <div class="has-mw-4xl mx-auto">
      <div class="py-4 px-6 pl-10-tablet pr-14-tablet">
        <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-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="py-4 px-6 pl-10-tablet pr-14-tablet">
        <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>

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

<div class="is-relative has-background-primary">
  <nav class="navbar py-2 has-background-transparent">
    <div class="is-relative container">
      <div class="navbar-brand is-align-items-center is-flex-grow-1">
        <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%);">
        <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>
      </div>
      <div class="navbar-menu is-hidden-mobile">
        <div class="navbar-end"><a class="navbar-item has-text-white" href="#">Sign In</a><a class="navbar-item has-text-white" href="#">Support</a></div>
      </div>
    </div>
  </nav>
  <div class="is-hidden navbar-side is-fixed is-top-0 is-bottom-0 is-left-0 has-mw-md" style="width: 75%; z-index: 9999;">

<section class="is-relative section pb-0 py-40-desktop is-overflow-hidden">
  <div class="is-hidden-mobile is-hidden-tablet-only has-mw-xl-desktop has-mw-3xl-widescreen is-absolute is-left-0 -ml-20" style="top: 50%; transform: translateY(-50%);">
    <img class="image" style="object-fit: cover;" src="bendis-assets/images/computer-large.png" alt="">
  </div>
  <div class="container">
    <div class="has-mw-md mx-auto-mobile mx-auto-tablet-only ml-auto">
      <h2 class="title is-size-3-mobile is-size-2 has-leading-3 has-text-primary">Lorem Ipsum dolor sit amet</h2>
      <p class="subtitle is-size-5 has-leading-6 mt-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
      <div class="is-flex is-align-items-center mb-6">
        <div class="is-inline-flex w-20 h-12 pl-5 mr-6 is-align-items-center has-background-warning is-size-4 has-text-weight-bold has-text-primary clip-path-right-top">
          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <g clip-path="url(#clip0_252_2665)">
              <path d="M12 -0.0400009L0 11.8L12 23.64L24 11.8L12 -0.0400009ZM2.8281 11.8L12 2.75039L15.879 6.57767L14.4648 7.97301L12 5.54167L5.6571 11.8L8.121 14.2319L6.7068 15.6273L2.8281 11.8ZM15.5157 11.8L12 15.2697L8.4852 11.8L12 8.33206L15.5157 11.8ZM8.121 17.0226L9.5352 15.6273L12 18.0583L18.3438 11.8L15.879 9.36806L17.2932 7.97272L21.1719 11.8L12 20.8496L8.121 17.0226Z" fill="#1633AB"></path>
            </g>
            <defs><rect width="24" height="24" fill="white"></rect></defs>
          </svg>
        </div>
        <p class="is-size-5 has-text-grey has-text-weight-medium">Lorem Ipsum dolor</p>
      </div>
      <div class="is-flex is-align-items-center mb-6">
        <div class="is-inline-flex w-20 h-12 pl-5 mr-6 is-align-items-center has-background-warning is-size-4 has-text-weight-bold has-text-primary clip-path-right-top">
          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M13 0V1.98083C18.055 2.47811 22 6.70233 22 11.84C22 16.9768 18.055 21.2007 13 21.698V23.68C19.1593 23.1762 24.0001 18.0714 24.0001 11.84C24.0001 5.60772 19.1593 0.504976 13 0Z" fill="#1633AB"></path>
            <path d="M11.0001 21.698C5.9472 21.2007 2.0001 16.9768 2.0001 11.84C2.0001 6.70262 5.9472 2.47811 11.0001 1.98083V0C4.842 0.504976 0 5.60772 0 11.84C0 18.0714 4.842 23.1762 11.0001 23.68V21.698Z" fill="#1633AB"></path>

<section class="is-relative section py-24 has-background-primary">
  <img class="image is-absolute is-top-0 is-left-0" src="bendis-assets/images/frame-line-light.svg" alt="">
  <div class="container">
    <div class="has-mw-4xl mx-auto mb-16 has-text-centered">
      <h1 class="title is-size-3-mobile is-size-2 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">
      <div class="column is-4">
        <div class="has-mw-md mx-auto has-background-dark is-fullheight">
          <img class="image is-fullwidth" style="height: 231px; object-fit: cover;" src="https://images.unsplash.com/photo-1615866369373-8d232ea5a028?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=634&amp;q=80" alt="">
          <div class="has-mw-xs mx-auto px-6 px-10-desktop pt-16 pb-20 has-text-centered">
            <h3 class="is-size-5 has-text-white has-text-weight-bold is-uppercase mb-4">Change of access</h3>
            <p class="has-text-white">Take care to develop resources continually and integrity them with previous projects.</p>
          </div>
        </div>
      </div>
      <div class="column is-4">
        <div class="has-mw-md mx-auto has-background-dark is-fullheight">
          <img class="image is-fullwidth" style="height: 231px; object-fit: cover;" src="https://images.unsplash.com/photo-1615866431878-500cc9e74d82?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=634&amp;q=80" alt="">
          <div class="has-mw-xs mx-auto px-6 px-10-desktop pt-16 pb-20 has-text-centered">
            <h3 class="is-size-5 has-text-white has-text-weight-bold is-uppercase mb-4">Frequent authentication</h3>
            <p class="has-text-white">Take care to develop resources continually and integrity them with previous projects.</p>
          </div>

<section class="is-relative section pt-24 pb-46-mobile pb-64 pb-96-tablet has-background-primary">
  <img class="image is-absolute is-bottom-0 is-left-0 is-fullwidth" style="object-fit: cover; height: 500px;" src="https://images.unsplash.com/photo-1562785072-c65ab858fcbc?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=967&amp;q=80" alt="">
  <img class="image is-absolute is-top-0 is-right-0" src="bendis-assets/images/frame-line-light.svg" alt="">
  <div class="container">
    <div class="has-mw-4xl mx-auto has-text-centered mb-16">
      <h1 class="has-text-white title is-size-3-mobile is-size-2">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 has-text-white 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>
      <a class="button is-warning" href="#">Try demo</a>
    </div>
    <div class="columns has-background-white has-mw-md-mobile mx-auto">
      <div class="column py-10 is-4">
        <div class="has-mw-xs mx-auto px-10 has-text-centered">
          <svg width="32" height="33" viewbox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M16 0.585693L0 16.3724L16 32.159L32 16.3724L16 0.585693ZM3.7708 16.3724L16 4.30622L21.172 9.40926L19.2864 11.2697L16 8.02792L7.5428 16.3724L10.828 19.6149L8.9424 21.4754L3.7708 16.3724ZM20.6876 16.3724L16 20.9986L11.3136 16.3724L16 11.7484L20.6876 16.3724ZM10.828 23.3359L12.7136 21.4754L16 24.7168L24.4584 16.3724L21.172 13.1298L23.0576 11.2693L28.2292 16.3724L16 28.4385L10.828 23.3359Z" fill="#FA5158"></path>
          </svg>
          <h3 class="is-size-5 has-text-primary has-text-weight-semibold is-uppercase mt-4 mb-1">Spectacular team plan</h3>
          <p class="has-text-grey has-leading-6">Fairly assigning daily tasks to your employees</p>
        </div>
      </div>
      <div class="column py-10 is-4">
        <div class="has-mw-xs mx-auto px-10 has-text-centered">
          <svg width="32" height="33" viewbox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M17.333 0V2.66556C24.073 3.33474 29.333 9.01918 29.333 15.9328C29.333 22.8453 24.073 28.5293 17.333 29.1985V31.8657C25.5454 31.1877 31.9998 24.3183 31.9998 15.9328C31.9998 7.54619 25.5454 0.679536 17.333 0Z" fill="#FA5158"></path>
            <path d="M14.6668 29.1985C7.9296 28.5293 2.6668 22.8453 2.6668 15.9328C2.6668 9.01958 7.9296 3.33474 14.6668 2.66556V0C6.456 0.679536 0 7.54619 0 15.9328C0 24.3183 6.456 31.1877 14.6668 31.8657V29.1985Z" fill="#FA5158"></path>

<section class="is-relative section pt-24">
  <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">
      <h1 class="title is-size-3-mobile is-size-2 has-leading-3 has-text-primary">Get our Free Mobile App</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>
    <div class="columns is-vcentered">
      <div class="column is-5-tablet is-4-widescreen">
        <div class="is-flex has-mw-sm mx-auto mb-10">
          <div class="is-flex-shrink-0 is-inline-flex w-20 h-12 pl-5 mr-6 is-align-items-center has-background-warning is-size-4 has-text-weight-bold has-text-primary clip-path-right-top">
            <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <g clip-path="url(#clip0_252_2665)">
                <path d="M12 -0.0400009L0 11.8L12 23.64L24 11.8L12 -0.0400009ZM2.8281 11.8L12 2.75039L15.879 6.57767L14.4648 7.97301L12 5.54167L5.6571 11.8L8.121 14.2319L6.7068 15.6273L2.8281 11.8ZM15.5157 11.8L12 15.2697L8.4852 11.8L12 8.33206L15.5157 11.8ZM8.121 17.0226L9.5352 15.6273L12 18.0583L18.3438 11.8L15.879 9.36806L17.2932 7.97272L21.1719 11.8L12 20.8496L8.121 17.0226Z" fill="#1633AB"></path>
              </g>
              <defs><rect width="24" height="24" fill="white"></rect></defs>

<section class="is-relative section pt-24 pb-46-mobile pb-64 pb-96-tablet has-background-light">
  <img class="image is-absolute is-bottom-0 is-left-0 is-fullwidth" style="object-fit: cover; height: 500px;" src="https://images.unsplash.com/photo-1562785072-c65ab858fcbc?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=967&amp;q=80" alt="">
  <img class="image is-absolute is-top-0 is-right-0" src="bendis-assets/images/frame-line-light.svg" alt="">
  <div class="container">
    <div class="has-mw-4xl mx-auto has-text-centered mb-16">
      <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-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>
      <a class="button is-warning" href="#">Try demo</a>
    </div>
    <div class="columns has-background-white has-mw-md-mobile mx-auto">
      <div class="column py-10 is-4">
        <div class="has-mw-xs mx-auto px-10-widescreen has-text-centered">
          <svg width="32" height="33" viewbox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M16 0.585693L0 16.3724L16 32.159L32 16.3724L16 0.585693ZM3.7708 16.3724L16 4.30622L21.172 9.40926L19.2864 11.2697L16 8.02792L7.5428 16.3724L10.828 19.6149L8.9424 21.4754L3.7708 16.3724ZM20.6876 16.3724L16 20.9986L11.3136 16.3724L16 11.7484L20.6876 16.3724ZM10.828 23.3359L12.7136 21.4754L16 24.7168L24.4584 16.3724L21.172 13.1298L23.0576 11.2693L28.2292 16.3724L16 28.4385L10.828 23.3359Z" fill="#FA5158"></path>
          </svg>
          <h3 class="is-size-5 has-text-primary has-text-weight-semibold is-uppercase mt-4 mb-1">Spectacular team plan</h3>
          <p class="has-text-grey has-leading-6">Fairly assigning daily tasks to your employees</p>
        </div>
      </div>
      <div class="column py-10 is-4">
        <div class="has-mw-xs mx-auto px-10-widescreen has-text-centered">
          <svg width="32" height="33" viewbox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M17.333 0V2.66556C24.073 3.33474 29.333 9.01918 29.333 15.9328C29.333 22.8453 24.073 28.5293 17.333 29.1985V31.8657C25.5454 31.1877 31.9998 24.3183 31.9998 15.9328C31.9998 7.54619 25.5454 0.679536 17.333 0Z" fill="#FA5158"></path>
            <path d="M14.6668 29.1985C7.9296 28.5293 2.6668 22.8453 2.6668 15.9328C2.6668 9.01958 7.9296 3.33474 14.6668 2.66556V0C6.456 0.679536 0 7.54619 0 15.9328C0 24.3183 6.456 31.1877 14.6668 31.8657V29.1985Z" fill="#FA5158"></path>

<section class="is-relative section py-24 has-background-light">
  <img class="image is-absolute is-top-0 is-left-0" src="bendis-assets/images/frame-line-light.svg" alt="">
  <div class="container">
    <div class="has-mw-4xl mx-auto mb-16 has-text-centered">
      <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="subtitle is-size-5 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">
      <div class="column is-4">
        <div class="has-mw-md mx-auto has-background-dark is-fullheight">
          <img class="image is-fullwidth" style="height: 231px; object-fit: cover;" src="https://images.unsplash.com/photo-1615866369373-8d232ea5a028?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=634&amp;q=80" alt="">
          <div class="has-mw-xs mx-auto px-6 px-10-desktop pt-16 pb-20 has-text-centered">
            <h3 class="is-size-5 has-text-white has-text-weight-bold is-uppercase mb-4">Change of access</h3>
            <p class="has-text-white has-leading-6">Take care to develop resources continually and integrity them with previous projects.</p>
          </div>
        </div>
      </div>
      <div class="column is-4">
        <div class="has-mw-md mx-auto has-background-dark is-fullheight">
          <img class="image is-fullwidth" style="height: 231px; object-fit: cover;" src="https://images.unsplash.com/photo-1615866431878-500cc9e74d82?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=634&amp;q=80" alt="">
          <div class="has-mw-xs mx-auto px-6 px-10-desktop pt-16 pb-20 has-text-centered">
            <h3 class="is-size-5 has-text-white has-text-weight-bold is-uppercase mb-4">Frequent authentication</h3>
            <p class="has-text-white has-leading-6">Take care to develop resources continually and integrity them with previous projects.</p>
          </div>

<section class="section">
  <div class="container">
    <div class="has-mw-2xl mx-auto">
      <div class="is-flex-tablet">
        <div>
          <svg width="73" height="55" viewbox="0 0 73 55" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M42.6623 55V32.5106L62.8084 0H73L59.7273 28.7818L70.0373 29.3644V55H42.6623ZM0 55V32.5106L20.2646 0H30.4562L17.1834 28.7818L27.375 29.3644V55H0Z" fill="#F6FAFD"></path>
          </svg>
        </div>
        <div class="pl-10">
          <h3 class="is-size-4 has-leading-6 has-text-primary has-text-weight-medium mb-6">On the other hand, perfection can also haunt some of us to the point of inaction. While some are too quick to act and end up wasting resources, others are completely paralyzed by the &ldquo;excessive&rdquo; amount of work behind building something new.</h3>
          <span class="is-size-5 has-text-weight-semibold has-text-info">Danny Bailey, CEO &amp; Founder at Wireframes</span>
        </div>
      </div>
    </div>
  </div>
</section>