Shuffle Components in Acros library

<section class="is-fixed is-left-0 is-bottom-0 has-mw-xl p-6" style="z-index: 50;">
  <div class="container">
    <div class="has-background-white p-8 has-mw-xl has-text-centered pt-14 pb-12" style="border-radius: 6px;">
      <img class="mb-8" src="acros-assets/icons/cookies/cookie-green.svg" alt="">
      <h5 class="title is-size-5 has-leading-3 mb-8 has-text-grey-darker has-text-weight-medium">We use cookies to personalise content, to provide social media features and to analyse our traffic</h5>
      <div class="buttons is-justify-content-center"><a class="button is-primary py-6 px-7 mr-0 mr-4" href="#">Accept</a><a class="button is-dark is-outlined py-6 px-7" href="#">Decline</a></div>
    </div>
  </div>
</section>

<section class="section py-10">
  <div class="container">
    <h5 class="title is-size-5 has-text-weight-medium ml-1">Trusted by brands all over the world</h5>
    <div class="columns is-multiline">
      <div class="column is-4-tablet is-2-desktop p-4 p-2-desktop">
        <div class="py-12" style="border-radius: 6px;">
          <img class="is-block mx-auto" style="height:32px;" src="acros-assets/logo/slack.svg" alt="">
        </div>
      </div>
      <div class="column is-4-tablet is-2-desktop p-4 p-2-desktop">
        <div class="py-12" style="border-radius: 6px;">
          <img class="is-block mx-auto" style="height:32px;" src="acros-assets/logo/google.svg" alt="">
        </div>
      </div>
      <div class="column is-4-tablet is-2-desktop p-4 p-2-desktop">
        <div class="py-12" style="border-radius: 6px;">
          <img class="is-block mx-auto" style="height:32px;" src="acros-assets/logo/coca-cola.svg" alt="">
        </div>
      </div>
      <div class="column is-4-tablet is-2-desktop p-4 p-2-desktop">
        <div class="py-12" style="border-radius: 6px;">
          <img class="is-block mx-auto" style="height:32px;" src="acros-assets/logo/adidas.svg" alt="">
        </div>
      </div>
      <div class="column is-4-tablet is-2-desktop p-4 p-2-desktop">
        <div class="py-12" style="border-radius: 6px;">
          <img class="is-block mx-auto" style="height:32px;" src="acros-assets/logo/fb.svg" alt="">
        </div>
      </div>
      <div class="column is-4-tablet is-2-desktop p-4 p-2-desktop">
        <div class="py-12" style="border-radius: 6px;">
          <img class="is-block mx-auto" style="height:32px;" src="acros-assets/logo/tinder.svg" alt="">
        </div>
      </div>
    </div>
  </div>
</section>

<section class="section py-16 py-0-tablet has-background-white-ter is-clipped is-relative" style="height: 600px;">
  <div class="container">
    <div class="columns">
      <div class="column is-6 mb-12 mt-48-tablet">
        <small class="mb-2 is-block is-uppercase has-text-weight-semibold">
          <span>Our</span>
          <span class="has-text-primary">testimonials</span>
        </small>
        <h2 class="title mb-6 has-mw-sm">What people says about us</h2>
        <p class="subtitle has-mw-sm">If you have ever wondered how to develop your brand, this is the place for you.</p>
      </div>
      <div class="column is-flex">
        <div class="-mt-64-tablet">
          <div class="column">
            <div class="has-background-white py-6 px-8" style="border-radius: 6px;">
              <img src="acros-assets/icons/testimonials/quote-24x24.svg" alt="">
              <h5 class="title is-size-5 mb-4">The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</h5>
              <div class="is-flex is-align-items-center">
                <img class="mr-4" src="acros-assets/images/testimonials/man-32x32.png" alt="">
                <div>
                  <h6 class="is-size-6 has-text-weight-medium mb-0"><small>Denny Bailey</small></h6>
                  <p class="has-text-grey-light"><small>CEO &amp; Founder</small></p>
                </div>
              </div>
            </div>
          </div>
          <div class="column">
            <div class="has-background-white py-6 px-8" style="border-radius: 6px;">
              <img src="acros-assets/icons/testimonials/quote-24x24.svg" alt="">
              <h5 class="title is-size-5 mb-4">The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</h5>
              <div class="is-flex is-align-items-center">
                <img class="mr-4" src="acros-assets/images/testimonials/man-32x32.png" alt="">
                <div>
                  <h6 class="is-size-6 has-text-weight-medium mb-0"><small>Denny Bailey</small></h6>
                  <p class="has-text-grey-light"><small>CEO &amp; Founder</small></p>
                </div>
              </div>
            </div>
          </div>
          <div class="column">
            <div class="has-background-white py-6 px-8" style="border-radius: 6px;">
              <img src="acros-assets/icons/testimonials/quote-24x24.svg" alt="">
              <h5 class="title is-size-5 mb-4">The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</h5>
              <div class="is-flex is-align-items-center">
                <img class="mr-4" src="acros-assets/images/testimonials/man-32x32.png" alt="">
                <div>
                  <h6 class="is-size-6 has-text-weight-medium mb-0"><small>Denny Bailey</small></h6>
                  <p class="has-text-grey-light"><small>CEO &amp; Founder</small></p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="-mt-36-tablet">
          <div class="column">
            <div class="has-background-white py-6 px-8" style="border-radius: 6px;">
              <img src="acros-assets/icons/testimonials/quote-24x24.svg" alt="">
              <h5 class="title is-size-5 mb-4">The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</h5>
              <div class="is-flex is-align-items-center">
                <img class="mr-4" src="acros-assets/images/testimonials/man-32x32.png" alt="">
                <div>
                  <h6 class="is-size-6 has-text-weight-medium mb-0"><small>Denny Bailey</small></h6>
                  <p class="has-text-grey-light"><small>CEO &amp; Founder</small></p>
                </div>
              </div>
            </div>
          </div>
          <div class="column">
            <div class="has-background-white py-6 px-8" style="border-radius: 6px;">
              <img src="acros-assets/icons/testimonials/quote-24x24.svg" alt="">
              <h5 class="title is-size-5 mb-4">The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</h5>
              <div class="is-flex is-align-items-center">
                <img class="mr-4" src="acros-assets/images/testimonials/man-32x32.png" alt="">
                <div>
                  <h6 class="is-size-6 has-text-weight-medium mb-0"><small>Denny Bailey</small></h6>
                  <p class="has-text-grey-light"><small>CEO &amp; Founder</small></p>
                </div>
              </div>
            </div>
          </div>
          <div class="column">
            <div class="has-background-white py-6 px-8" style="border-radius: 6px;">
              <img src="acros-assets/icons/testimonials/quote-24x24.svg" alt="">
              <h5 class="title is-size-5 mb-4">The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</h5>
              <div class="is-flex is-align-items-center">
                <img class="mr-4" src="acros-assets/images/testimonials/man-32x32.png" alt="">
                <div>
                  <h6 class="is-size-6 has-text-weight-medium mb-0"><small>Denny Bailey</small></h6>
                  <p class="has-text-grey-light"><small>CEO &amp; Founder</small></p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <img class="image is-absolute is-right-0 is-top-0 is-fullwidth" style="height:96px;" src="acros-assets/images/testimonials/testimonial-8-shadow-top.png" alt="">
  <img class="image is-absolute is-right-0 is-bottom-0 is-fullwidth" style="height:96px;" src="acros-assets/images/testimonials/testimonial-8-shadow-bottom.png" alt="">
</section>

<section class="section py-16">
  <div class="container">
    <img class="is-absolute" src="acros-assets/images/call-to-action/cta-8-bg.png" alt="">
    <div class="has-background-primary py-16 px-8" style="border-radius: 6px;">
      <div class="has-mw-2xl mx-auto has-text-centered is-relative" style="z-index: 1;">
        <h2 class="title has-text-white">Ready to get started?</h2>
        <p class="mb-10 subtitle has-text-white has-mw-lg mx-auto">If you have ever wondered how to develop your brand, this is the place for you.</p>
        <div class="buttons is-centered"><a class="button is-white has-text-grey-darker" href="#">Try Demo</a><a class="button is-white is-outlined ml-3" href="#">Learn more</a></div>
      </div>
    </div>
  </div>
</section>

<section class="section py-16 has-background-white-ter">
  <div class="container">
    <small class="mb-2 is-block has-text-grey-darker is-uppercase has-text-weight-semibold">
      <span>Our</span>
      <span class="has-text-primary">clients</span>
    </small>
    <h2 class="title has-mw-lg mb-10">Trusted by brands all over the world</h2>
    <div class="columns is-multiline">
      <div class="column is-4-tablet is-2-desktop p-4">
        <div class="has-background-white py-12" style="border-radius: 6px;">
          <img class="is-block mx-auto" style="height: 32px;" src="acros-assets/logo/slack.svg" alt="">
        </div>
      </div>
      <div class="column is-4-tablet is-2-desktop p-4">
        <div class="has-background-white py-12" style="border-radius: 6px;">
          <img class="is-block mx-auto" style="height: 32px;" src="acros-assets/logo/google.svg" alt="">
        </div>
      </div>
      <div class="column is-4-tablet is-2-desktop p-4">
        <div class="has-background-white py-12" style="border-radius: 6px;">
          <img class="is-block mx-auto" style="height: 32px;" src="acros-assets/logo/coca-cola.svg" alt="">
        </div>
      </div>
      <div class="column is-4-tablet is-2-desktop p-4">
        <div class="has-background-white py-12" style="border-radius: 6px;">
          <img class="is-block mx-auto" style="height: 32px;" src="acros-assets/logo/adidas.svg" alt="">
        </div>
      </div>
      <div class="column is-4-tablet is-2-desktop p-4">
        <div class="has-background-white py-12" style="border-radius: 6px;">
          <img class="is-block mx-auto" style="height: 32px;" src="acros-assets/logo/fb.svg" alt="">
        </div>
      </div>
      <div class="column is-4-tablet is-2-desktop p-4">
        <div class="has-background-white py-12" style="border-radius: 6px;">
          <img class="is-block mx-auto" style="height: 32px;" src="acros-assets/logo/tinder.svg" alt="">
        </div>
      </div>
    </div>
  </div>
</section>

<section class="section py-12">
  <div class="container">
    <div class="columns is-mobile is-justify-content-center">
      <div class="column is-narrow">
        <div class="has-background-primary" style="width: 4px; height: 204px;"></div>
      </div>
      <div class="column is-narrow-tablet">
        <h4 class="title is-size-4 has-mw-2xl mb-7">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.</h4>
        <div class="columns is-align-items-center is-mobile">
          <div class="column pr-4 is-narrow">
            <img src="acros-assets/images/blog-content/man-32x32.png" alt="">
          </div>
          <div class="column is-narrow p-0"><small class="is-block has-text-weight-medium">Denny Bailey</small><small class="is-block" style="opacity: 0.6;">CEO &amp; Founder at Wireframes</small></div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="section py-16">
  <div class="container">
    <img class="is-absolute" src="acros-assets/images/call-to-action/cta-8-bg.png" alt="">
    <div class="py-16 px-8" style="border-radius: 6px; background: #CCF5ED;">
      <div class="has-mw-2xl mx-auto has-text-centered is-relative" style="z-index: 1;">
        <h2 class="title">Ready to get started?</h2>
        <p class="mb-10 subtitle has-mw-lg mx-auto">If you have ever wondered how to develop your brand, this is the place for you.</p>
        <div class="buttons is-centered"><a class="button is-primary has-text-white" href="#">Try Demo</a><a class="button is-dark is-outlined ml-3" href="#">Learn more</a></div>
      </div>
    </div>
  </div>
</section>

<section class="section py-16">
  <div class="container">
    <small class="mb-2 is-block is-uppercase has-text-weight-semibold">
      <span>Develop your</span>
      <span class="has-text-primary">skills</span>
    </small>
    <div class="columns is-align-items-center mb-6">
      <div class="column is-7">
        <h2 class="title has-mw-xl">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
      </div>
      <div class="column is-5">
        <div class="buttons"><a class="button is-primary is-outlined has-text-grey-darker ml-auto-tablet" href="#">Check all posts</a></div>
      </div>
    </div>
    <p class="subtitle has-mw-xl mb-12">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
    <div class="columns is-centered">
      <div class="column is-narrow-widescreen">
        <img class="image is-fullwidth mb-6" src="acros-assets/images/blog/work-man-350x262.jpg" alt="">
        <small class="is-block is-uppercase has-text-weight-semibold mb-2 has-text-grey-lighter">10 Jun 2020</small>
        <h5 class="title is-size-5 has-leading-3 has-text-weight-medium mb-4 has-mw-xs">There are many variations of passages of Lorem Ipsum available</h5>
        <p class="subtitle is-size-6 mb-4 has-mw-xs">There are many variations of passages of Lorem Ipsum available.</p>
        <a class="title is-size-6 has-text-weight-medium has-text-grey-darker is-flex is-align-items-center">
          Read more
          <img class="ml-4" src="acros-assets/icons/blog/arrow-right-green.svg" alt="">
        </a>
      </div>
      <div class="column is-narrow-widescreen">
        <img class="image is-fullwidth mb-6" src="acros-assets/images/blog/woman-350x262.jpg" alt="">
        <small class="is-block is-uppercase has-text-weight-semibold mb-2 has-text-grey-lighter">10 Jun 2020</small>
        <h5 class="title is-size-5 has-leading-3 has-text-weight-medium mb-4 has-mw-xs">There are many variations of passages of Lorem Ipsum available</h5>
        <p class="subtitle is-size-6 mb-4 has-mw-xs">There are many variations of passages of Lorem Ipsum available.</p>
        <a class="title is-size-6 has-text-weight-medium has-text-grey-darker is-flex is-align-items-center">
          Read more
          <img class="ml-4" src="acros-assets/icons/blog/arrow-right-green.svg" alt="">
        </a>
      </div>
      <div class="column is-narrow-widescreen">
        <img class="image is-fullwidth mb-6" src="acros-assets/images/blog/robot-350x262.jpg" alt="">
        <small class="is-block is-uppercase has-text-weight-semibold mb-2 has-text-grey-lighter">10 Jun 2020</small>
        <h5 class="title is-size-5 has-leading-3 has-text-weight-medium mb-4 has-mw-xs">There are many variations of passages of Lorem Ipsum available</h5>
        <p class="subtitle is-size-6 mb-4 has-mw-xs">There are many variations of passages of Lorem Ipsum available.</p>
        <a class="title is-size-6 has-text-weight-medium has-text-grey-darker is-flex is-align-items-center">
          Read more
          <img class="ml-4" src="acros-assets/icons/blog/arrow-right-green.svg" alt="">
        </a>
      </div>
    </div>
  </div>
</section>

<section>
  <nav class="navbar py-2 has-background-white">
    <div class="container px-8-mobile">
      <div class="navbar-brand is-align-items-center">
        <a class="navbar-item" href="#">
          <span class="px-0 title is-size-4 has-text-dark">
            <img src="acros-assets/logo/logo-acros-black.svg" width="auto" style="max-height: initial;" alt="">
          </span>
        </a>
        <a class="navbar-menu-open navbar-burger" role="button" type="button" data-toggle="side-menu">
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </a>
      </div>
      <div class="navbar-menu">
        <div class="navbar-start">
          <ul class="navbar-item pl-0">
            <li><a class="title is-size-6 has-text-grey-darker has-text-weight-normal navbar-item" href="#">About</a></li>
            <li><a class="title is-size-6 has-text-grey-darker has-text-weight-normal navbar-item" href="#">Company</a></li>
            <li><a class="title is-size-6 has-text-grey-darker has-text-weight-normal navbar-item" href="#">Services</a></li>
            <li><a class="title is-size-6 has-text-grey-darker has-text-weight-normal navbar-item" href="#">Testimonials</a></li>
          </ul>
        </div>
        <div class="navbar-end">
          <div class="navbar-item">
            <div class="control has-icons-right">
              <input class="input has-background-white-ter pl-4 pr-12" style="border: none; height: 56px; border-radius:2px;" placeholder="Search here">
              <span class="icon is-right pr-4" style="height: 100%;">
                <img src="acros-assets/icons/navigations/search-black.svg" alt="">
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </nav>
  <div class="navbar-side is-hidden is-fixed is-top-0 is-left-0 has-background-blur" style="z-index: 50; width:100%; height: 100%;">
    <div class="is-absolute" style="z-index: -1;"></div>
    <div class="container is-relative">
      <a class="navbar-close is-absolute is-right-0 mt-6 mr-6" href="#">
        <img src="acros-assets/icons/mobile-decline.svg" alt="">
      </a>
    </div>
    <aside class="py-6 px-6 pb-8 has-background-white is-flex is-flex-direction-column is-justify-content-space-between" style="height: 100%; width: 288px; overflow-y: auto">
      <div class="mb-8">
        <a class="navbar-item title is-size-4 has-text-dark pl-4 mb-5" href="#">
          <img src="acros-assets/logo/logo-acros-black.svg" width="auto" style="max-height: initial" alt="">
        </a>
        <div class="control has-icons-right mb-8">
          <input class="input has-background-white-ter pl-4 pr-12" style="border: none; height: 56px; border-radius:2px;" placeholder="Search here">
          <span class="icon is-right pr-4" style="height: 100%;">
            <img src="acros-assets/icons/navigations/search-black.svg" alt="">
          </span>
        </div>
        <ul class="menu-list title is-size-6">
          <li><a class="py-4 px-6 has-text-grey-darker" href="#">About</a></li>
          <li><a class="py-4 px-6 has-text-grey-darker" href="#">Company</a></li>
          <li><a class="py-4 px-6 has-text-grey-darker" href="#">Services</a></li>
          <li><a class="py-4 px-6 has-text-grey-darker" href="#">Testimonials</a></li>
        </ul>
      </div>
      <div><small class="has-text-grey-darker ml-6">2021 &copy; Shuffle</small></div>
    </aside>
  </div>
</section>

<section class="section py-16">
  <div class="container">
    <div class="columns is-justify-content-space-between mb-0">
      <div class="column is-narrow-widescreen">
        <img class="image mx-auto ml-0-tablet is-fullwidth" src="acros-assets/images/features/black-woman-man.jpg" alt="">
      </div>
      <div class="column is-narrow-widescreen mb-16 mb-0-tablet">
        <div class="has-mw-xl">
          <h2 class="title mb-6 has-mw-lg">Lorem Ipsum dolor sit amet boulique</h2>
          <p class="subtitle has-mw-md mb-12">If you have ever wondered how to develop your brand, this is the place for you.</p>
          <div class="columns">
            <div class="column mb-6 mb-0-tablet">
              <img class="mb-8" src="acros-assets/icons/features/auth-green-light.svg" alt="">
              <h5 class="mb-4 title is-size-5 has-text-weight-medium">Frequent authentication</h5>
              <p class="subtitle is-size-6">Take care to develop resources continually and integrity them with previous projects.</p>
            </div>
            <div class="column">
              <img class="mb-8" src="acros-assets/icons/features/user-green-light.svg" alt="">
              <h5 class="mb-4 title is-size-5 has-text-weight-medium">List of regular users</h5>
              <p class="subtitle is-size-6">Take care to develop resources continually and integrity them with previous projects.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="section py-16">
  <div class="container">
    <div class="columns has-text-centered is-align-items-center">
      <div class="is-hidden-mobile column is-1">
        <a href="#">
          <img src="acros-assets/icons/testimonials/arrow-left-green.svg" alt="">
        </a>
      </div>
      <div class="column">
        <div>
          <img class="mb-2" src="acros-assets/icons/testimonials/quote.svg" alt="">
          <h3 class="title is-size-3 mb-8">The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from &quot;de Finibus Bonorum et Malorum</h3>
          <div>
            <img src="acros-assets/images/testimonials/man-48x48.png" alt="">
            <div>
              <h6 class="title is-size-6 has-leading-3 has-text-weight-medium mb-0">Denny Bailey</h6>
              <small class="has-text-grey-light">CEO &amp; Founder</small>
            </div>
          </div>
        </div>
      </div>
      <div class="is-hidden-mobile column is-1">
        <a href="#">
          <img class="image ml-auto-tablet" src="acros-assets/icons/testimonials/arrow-right-green.svg" alt="">
        </a>
      </div>
    </div>
    <div class="is-flex is-justify-content-space-between is-hidden-tablet">
      <a href="#">
        <img class="image" src="acros-assets/icons/testimonials/arrow-left-green.svg" alt="">
      </a>
      <a href="#">
        <img class="image" src="acros-assets/icons/testimonials/arrow-right-green.svg" alt="">
      </a>
    </div>
  </div>
</section>

<section>
  <nav class="navbar has-background-white">
    <div class="container py-2 px-8-mobile">
      <div class="is-flex is-justify-content-between is-align-items-center" style="width: 100%;">
        <button class="button is-ghost">
          <img src="acros-assets/icons/navigations/search-circle-light.svg" alt="">
        </button>
        <a class="mx-auto" href="#">
          <span class="navbar-item px-0 title is-size-4 has-text-dark">
            <img src="acros-assets/icons/navigations/logo-acros-center-black.svg" alt="" width="auto" style="max-height: initial;">
          </span>
        </a>
        <div>
          <button class="button navbar-menu-open is-ghost has-text-dark">
            <img src="acros-assets/icons/navigations/hamburger-circle-light.svg" alt="" style="max-height: initial;">
          </button>
        </div>
      </div>
    </div>
  </nav>
  <div class="navbar-side is-hidden is-fixed is-top-0 is-left-0 has-background-blur" style="z-index: 50; width:100%; height: 100%;">
    <div class="is-absolute" style="z-index: -1;"></div>
    <div class="container is-relative">
      <a class="navbar-close is-absolute is-right-0 mt-6 mr-6" href="#">
        <img src="acros-assets/icons/mobile-decline.svg" alt="">
      </a>
    </div>
    <aside class="py-6 px-6 pb-8 has-background-white is-flex is-flex-direction-column is-justify-content-space-between" style="height: 100%; width: 288px; overflow-y: auto">
      <div>
        <a class="navbar-item title is-size-4 has-text-dark pl-4 mb-5" href="#">
          <img src="acros-assets/logo/logo-acros-black.svg" width="auto" style="max-height: initial" alt="">
        </a>
        <div class="control has-icons-right mb-8">
          <input class="input has-background-white-ter pl-4 pr-12" style="border: none; height: 56px;" placeholder="Search here">
          <span class="icon is-right pr-4" style="height: 100%;">
            <img src="acros-assets/icons/navigations/search-black.svg" alt="">
          </span>
        </div>
      </div>
      <div><small class="has-text-grey-darker ml-6">2021 &copy; Shuffle</small></div>
    </aside>
  </div>
</section>

<section class="section py-16">
  <div class="container">
    <img class="is-absolute" src="acros-assets/images/call-to-action/cta-10-bg.png" alt="">
    <div class="py-16 px-8 has-background-grey-darker" style="border-radius: 6px;">
      <div class="has-mw-2xl mx-auto has-text-centered is-relative" style="z-index: 1;">
        <h2 class="title has-text-white">Ready to get started?</h2>
        <p class="mb-10 subtitle has-text-white has-mw-lg mx-auto">If you have ever wondered how to develop your brand, this is the place for you.</p>
        <div class="buttons is-centered"><a class="button is-primary has-text-white" href="#">Try Demo</a><a class="button is-white is-outlined ml-3" href="#">Learn more</a></div>
      </div>
    </div>
  </div>
</section>

<section class="section py-12">
  <div class="container">
    <div class="has-mw-3xl mx-auto">
      <h4 class="title is-size-4 has-text-weight-medium mb-8">When I was a developer, I often had a hundred questions when</h4>
      <p class="subtitle mb-6">These types of questions led me to miss numerous deadlines, and I wasted time and energy in back-and-forth communication. Sadly, this situation could have been avoided if the wireframes had provided enough detail.</p>
      <img class="image is-fullwidth mb-2" src="acros-assets/images/blog-content/work-730x400.jpg" alt="">
      <small class="is-block has-text-grey-lighter has-text-weight-medium mb-6">
        Source:
        <span>unsplash.com</span>
      </small>
      <p class="subtitle mb-6">These types of questions led me to miss numerous deadlines, and I wasted time and energy in back-and-forth communication. Sadly, this situation could have been avoided if the wireframes had provided enough detail.</p>
      <p class="subtitle">Now that I am a UX designer, I notice that some designers tend to forget that wireframes are equally creative and technical. We are responsible for designing great ideas, but we are also responsible for creating product specifications. I admit that there can be so many details to remember that it&rsquo;s easy to lose track. To save time and energy for myself, I gathered all of my years of wireframing knowledge into a single checklist that I refer to throughout the process. And now I am sharing this knowledge with you, so that you can get back to being creative.</p>
    </div>
  </div>
</section>

<section class="section py-16 is-clipped">
  <div class="container">
    <small class="mb-2 is-block is-uppercase has-text-weight-semibold">
      <span>Our</span>
      <span class="has-text-primary">testimonials</span>
    </small>
    <div class="columns is-align-items-center mb-12">
      <div class="column">
        <h2 class="title">What people says about us</h2>
      </div>
      <div class="column">
        <ul class="is-flex is-align-items-center is-justify-content-end">
          <li><a class="is-block" style="border: 1px solid #2B3031; width: 16px; height:16px; border-radius: 50%;" href="#"></a></li>
          <li><a class="mx-4 is-block has-background-grey-darker" style="width:4px; height:4px; border-radius: 50%;" href="#"></a></li>
          <li><a class="is-block has-background-grey-darker" style="width:4px; height:4px; border-radius: 50%;" href="#"></a></li>
          <li>
            <a class="ml-9 is-block">
              <img src="acros-assets/icons/testimonials/arrow-dark-right.svg" alt="">
            </a>
          </li>
        </ul>
      </div>
    </div>
    <div class="has-mw-4xl mx-auto">
      <div class="columns">
        <div class="column">
          <div class="has-background-white-ter pt-8 pb-6 px-10" style="border-radius: 6px;">
            <img src="acros-assets/icons/testimonials/quote-24x24.svg" alt="">
            <h5 class="title is-size-5 mb-4">The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</h5>
            <div class="is-flex is-align-items-center">
              <img class="mr-4" src="acros-assets/images/testimonials/man-32x32.png" alt="">
              <div>
                <h6 class="is-size-6 has-text-weight-medium mb-0"><small>Denny Bailey</small></h6>
                <p class="has-text-grey-light"><small>CEO &amp; Founder</small></p>
              </div>
            </div>
          </div>
        </div>
        <div class="column">
          <div class="has-background-white-ter pt-8 pb-6 px-10" style="border-radius: 6px;">
            <img src="acros-assets/icons/testimonials/quote-24x24.svg" alt="">
            <h5 class="title is-size-5 mb-4">The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</h5>
            <div class="is-flex is-align-items-center">
              <img class="mr-4" src="acros-assets/images/testimonials/man-32x32.png" alt="">
              <div>
                <h6 class="is-size-6 has-text-weight-medium mb-0"><small>Denny Bailey</small></h6>
                <p class="has-text-grey-light"><small>CEO &amp; Founder</small></p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="section py-16">
  <div class="container">
    <div class="columns is-align-items-center mb-0">
      <div class="column">
        <img class="image mx-auto ml-0-tablet" src="acros-assets/images/features/meditation.png" alt="">
      </div>
      <div class="column mb-16 mb-0-tablet">
        <h2 class="title mb-6 has-mw-lg">Lorem Ipsum dolor sit amet boulique</h2>
        <p class="subtitle has-mw-md mb-12">If you have ever wondered how to develop your brand, this is the place for you.</p>
        <div class="columns">
          <div class="column mb-6 mb-0-tablet">
            <img class="mb-8" src="acros-assets/icons/features/auth-green-light.svg" alt="">
            <h5 class="mb-4 title is-size-5 has-text-weight-medium">Frequent authentication</h5>
            <p class="subtitle is-size-6">Take care to develop resources continually and integrity them with previous projects.</p>
          </div>
          <div class="column">
            <img class="mb-8" src="acros-assets/icons/features/user-green-light.svg" alt="">
            <h5 class="mb-4 title is-size-5 has-text-weight-medium">List of regular users</h5>
            <p class="subtitle is-size-6">Take care to develop resources continually and integrity them with previous projects.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="section py-16">
  <div class="container">
    <small class="mb-2 is-block has-text-grey-darker is-uppercase has-text-weight-semibold">
      <span>Our</span>
      <span class="has-text-primary">clients</span>
    </small>
    <h2 class="title has-mw-lg mb-10">Trusted by brands all over the world</h2>
    <div class="columns is-multiline">
      <div class="column is-4-tablet is-2-desktop p-4 p-2-desktop">
        <div class="py-12" style="border-radius: 6px;">
          <img class="is-block mx-auto" style="height:32px;" src="acros-assets/logo/slack.svg" alt="">
        </div>
      </div>
      <div class="column is-4-tablet is-2-desktop p-4 p-2-desktop">
        <div class="py-12" style="border-radius: 6px;">
          <img class="is-block mx-auto" style="height:32px;" src="acros-assets/logo/google.svg" alt="">
        </div>
      </div>
      <div class="column is-4-tablet is-2-desktop p-4 p-2-desktop">
        <div class="py-12" style="border-radius: 6px;">
          <img class="is-block mx-auto" style="height:32px;" src="acros-assets/logo/coca-cola.svg" alt="">
        </div>
      </div>
      <div class="column is-4-tablet is-2-desktop p-4 p-2-desktop">
        <div class="py-12" style="border-radius: 6px;">
          <img class="is-block mx-auto" style="height:32px;" src="acros-assets/logo/adidas.svg" alt="">
        </div>
      </div>
      <div class="column is-4-tablet is-2-desktop p-4 p-2-desktop">
        <div class="py-12" style="border-radius: 6px;">
          <img class="is-block mx-auto" style="height:32px;" src="acros-assets/logo/fb.svg" alt="">
        </div>
      </div>
      <div class="column is-4-tablet is-2-desktop p-4 p-2-desktop">
        <div class="py-12" style="border-radius: 6px;">
          <img class="is-block mx-auto" style="height:32px;" src="acros-assets/logo/tinder.svg" alt="">
        </div>
      </div>
    </div>
  </div>
</section>

<section class="section py-16">
  <div class="container">
    <div class="columns is-centered mb-12">
      <div class="column is-narrow-widescreen">
        <img class="mb-6 image is-fullwidth" src="acros-assets/images/blog/work-man-350x262.jpg" alt="">
        <small class="is-block is-uppercase has-text-weight-semibold mb-2" style="letter-spacing: 0.05em; color: #AAACAD;">10 Jun 2020</small>
        <h5 class="title is-size-5 has-leading-3 has-text-weight-medium mb-4 has-mw-xs">There are many variations of passages of Lorem Ipsum available</h5>
        <p class="subtitle is-size-6 mb-4 has-mw-xs">There are many variations of passages of Lorem Ipsum available.</p>
        <a class="title is-size-6 has-text-weight-medium has-text-grey-darker is-flex is-align-items-center">
          Read more
          <img class="ml-4" src="acros-assets/icons/blog/arrow-right-green.svg" alt="">
        </a>
      </div>
      <div class="column is-narrow-widescreen">
        <img class="mb-6 image is-fullwidth" src="acros-assets/images/blog/woman-350x262.jpg" alt="">
        <small class="is-block is-uppercase has-text-weight-semibold mb-2" style="letter-spacing: 0.05em; color: #AAACAD;">10 Jun 2020</small>
        <h5 class="title is-size-5 has-leading-3 has-text-weight-medium mb-4 has-mw-xs">There are many variations of passages of Lorem Ipsum available</h5>
        <p class="subtitle is-size-6 mb-4 has-mw-xs">There are many variations of passages of Lorem Ipsum available.</p>
        <a class="title is-size-6 has-text-weight-medium has-text-grey-darker is-flex is-align-items-center">
          Read more
          <img class="ml-4" src="acros-assets/icons/blog/arrow-right-green.svg" alt="">
        </a>
      </div>
      <div class="column is-narrow-widescreen">
        <img class="mb-6 image is-fullwidth" src="acros-assets/images/blog/robot-350x262.jpg" alt="">
        <small class="is-block is-uppercase has-text-weight-semibold mb-2" style="letter-spacing: 0.05em; color: #AAACAD;">10 Jun 2020</small>
        <h5 class="title is-size-5 has-leading-3 has-text-weight-medium mb-4 has-mw-xs">There are many variations of passages of Lorem Ipsum available</h5>
        <p class="subtitle is-size-6 mb-4 has-mw-xs">There are many variations of passages of Lorem Ipsum available.</p>
        <a class="title is-size-6 has-text-weight-medium has-text-grey-darker is-flex is-align-items-center">
          Read more
          <img class="ml-4" src="acros-assets/icons/blog/arrow-right-green.svg" alt="">
        </a>
      </div>
    </div>
    <div class="columns is-centered">
      <div class="column is-narrow-widescreen">
        <img class="mb-6 image is-fullwidth" src="acros-assets/images/blog/work-man-350x262.jpg" alt="">
        <small class="is-block is-uppercase has-text-weight-semibold mb-2" style="letter-spacing: 0.05em; color: #AAACAD;">10 Jun 2020</small>
        <h5 class="title is-size-5 has-leading-3 has-text-weight-medium mb-4 has-mw-xs">There are many variations of passages of Lorem Ipsum available</h5>
        <p class="subtitle is-size-6 mb-4 has-mw-xs">There are many variations of passages of Lorem Ipsum available.</p>
        <a class="title is-size-6 has-text-weight-medium has-text-grey-darker is-flex is-align-items-center">
          Read more
          <img class="ml-4" src="acros-assets/icons/blog/arrow-right-green.svg" alt="">
        </a>
      </div>
      <div class="column is-narrow-widescreen">
        <img class="mb-6 image is-fullwidth" src="acros-assets/images/blog/woman-350x262.jpg" alt="">
        <small class="is-block is-uppercase has-text-weight-semibold mb-2" style="letter-spacing: 0.05em; color: #AAACAD;">10 Jun 2020</small>
        <h5 class="title is-size-5 has-leading-3 has-text-weight-medium mb-4 has-mw-xs">There are many variations of passages of Lorem Ipsum available</h5>
        <p class="subtitle is-size-6 mb-4 has-mw-xs">There are many variations of passages of Lorem Ipsum available.</p>
        <a class="title is-size-6 has-text-weight-medium has-text-grey-darker is-flex is-align-items-center">
          Read more
          <img class="ml-4" src="acros-assets/icons/blog/arrow-right-green.svg" alt="">
        </a>
      </div>
      <div class="column is-narrow-widescreen">
        <img class="mb-6 image is-fullwidth" src="acros-assets/images/blog/robot-350x262.jpg" alt="">
        <small class="is-block is-uppercase has-text-weight-semibold mb-2" style="letter-spacing: 0.05em; color: #AAACAD;">10 Jun 2020</small>
        <h5 class="title is-size-5 has-leading-3 has-text-weight-medium mb-4 has-mw-xs">There are many variations of passages of Lorem Ipsum available</h5>
        <p class="subtitle is-size-6 mb-4 has-mw-xs">There are many variations of passages of Lorem Ipsum available.</p>
        <a class="title is-size-6 has-text-weight-medium has-text-grey-darker is-flex is-align-items-center">
          Read more
          <img class="ml-4" src="acros-assets/icons/blog/arrow-right-green.svg" alt="">
        </a>
      </div>
    </div>
  </div>
</section>

<section>
  <nav class="navbar py-1 has-background-white">
    <div class="container px-8-mobile">
      <div class="navbar-brand is-align-items-center">
        <a class="navbar-item" href="#">
          <span class="navbar-item px-0 title is-size-4 has-text-dark">
            <img src="acros-assets/logo/logo-acros-black.svg" alt="" width="auto" style="max-height: initial;">
          </span>
        </a>
        <a class="navbar-menu-open navbar-burger" role="button" type="button" data-toggle="side-menu">
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </a>
      </div>
      <div class="navbar-menu">
        <div class="navbar-start">
          <ul class="navbar-item pl-0">
            <li><a class="title is-size-6 has-text-grey-darker has-text-weight-normal navbar-item" href="#">About</a></li>
            <li><a class="title is-size-6 has-text-grey-darker has-text-weight-normal navbar-item" href="#">Company</a></li>
            <li><a class="title is-size-6 has-text-grey-darker has-text-weight-normal navbar-item" href="#">Services</a></li>
            <li><a class="title is-size-6 has-text-grey-darker has-text-weight-normal navbar-item" href="#">Testimonials</a></li>
          </ul>
        </div>
        <div class="navbar-end">
          <div class="navbar-item is-hidden-mobile">
            <div class="buttons"><a class="button is-ghost has-text-dark" href="#" style="text-decoration: none;">Log In</a><a class="button is-primary" href="#">Sign Up</a></div>
          </div>
        </div>
      </div>
    </div>
  </nav>
  <div class="navbar-side is-hidden is-fixed is-top-0 is-left-0 has-background-blur" style="z-index: 50; width:100%; height: 100%;">
    <div class="is-absolute" style="z-index: -1;"></div>
    <div class="container is-relative">
      <a class="navbar-close is-absolute is-right-0 mt-6 mr-6" href="#">
        <img src="acros-assets/icons/mobile-decline.svg" alt="">
      </a>
    </div>
    <aside class="py-6 px-6 pb-8 has-background-white is-flex is-flex-direction-column is-justify-content-space-between" style="height: 100%; width: 288px; overflow-y: auto">
      <div>
        <a class="navbar-item title is-size-4 has-text-dark pl-4 mb-5" href="#">
          <img src="acros-assets/logo/logo-acros-black.svg" width="auto" style="max-height: initial" alt="">
        </a>
        <ul class="menu-list title is-size-6">
          <li><a class="py-4 px-6 has-text-grey-darker" href="#">About</a></li>
          <li><a class="py-4 px-6 has-text-grey-darker" href="#">Company</a></li>
          <li><a class="py-4 px-6 has-text-grey-darker" href="#">Services</a></li>
          <li><a class="py-4 px-6 has-text-grey-darker" href="#">Testimonials</a></li>
        </ul>
      </div>
      <div>
        <div class="buttons mb-8"><a class="button is-dark is-outlined is-fullwidth mb-4" href="#">Log In</a><a class="button is-primary is-fullwidth" href="#">Sign up</a></div>
        <small class="has-text-grey-darker ml-6">2021 &copy; Shuffle</small>
      </div>
    </aside>
  </div>
</section>

<section class="section py-16">
  <div class="container">
    <img class="is-absolute" src="acros-assets/images/call-to-action/cta-11-bg.png" alt="">
    <div class="columns is-align-items-center">
      <div class="column mb-10 mb-0-tablet is-relative" style="z-index: 1;">
        <small class="is-block has-text-weight-semibold is-uppercase mb-2">
          <span>Lorem</span>
          <span class="has-text-primary">ipsum</span>
        </small>
        <h2 class="title has-mw-lg">The latest version of this excellent product is waiting to deploy</h2>
        <p class="mb-12 subtitle has-mw-md">If you have ever wondered how to develop your brand, this is the place for you.</p>
        <div class="buttons"><a class="button is-primary" href="#">Active demo</a><a class="button is-dark is-outlined ml-3-tablet" href="#">Share with friends</a></div>
      </div>
      <div class="column is-narrow-widescreen">
        <img class="image mx-auto mr-0-tablet is-fullwidth" src="acros-assets/images/call-to-action/cta-11-people.jpg" alt="">
      </div>
    </div>
  </div>
</section>