Shuffle Components in Acros library

<section class="section py-16">
  <div class="container">
    <div class="columns is-align-items-center">
      <div class="column mb-12 mb-0-tablet">
        <small class="is-block is-uppercase has-leading-4 has-text-weight-semibold mb-2">
          <span>Develop your</span>
          <span class="has-text-primary">skills</span>
        </small>
        <h2 class="title has-mw-lg mb-6">Get our Free Mobile App</h2>
        <p class="subtitle has-mw-lg mb-12">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec.</p>
        <div class="columns mb-10">
          <div class="column">
            <img class="mb-6" src="acros-assets/icons/applications/protect.svg" alt="">
            <h5 class="title is-size-5 has-leading-3 has-text-weight-medium mb-2">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-6" src="acros-assets/icons/applications/user.svg" alt="">
            <h5 class="title is-size-5 has-leading-3 has-text-weight-medium mb-2">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 class="columns">
          <div class="column">
            <img class="mb-6" src="acros-assets/icons/applications/changes.svg" alt="">
            <h5 class="title is-size-5 has-leading-3 has-text-weight-medium mb-2">Change of access</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-6" src="acros-assets/icons/applications/message.svg" alt="">
            <h5 class="title is-size-5 has-leading-3 has-text-weight-medium mb-2">Weekly email updates</h5>
            <p class="subtitle is-size-6">Take care to develop resources continually and integrity them with previous projects.</p>
          </div>
        </div>
      </div>
      <div class="column">
        <img class="image mx-auto mr-0-tablet" src="acros-assets/images/applications/mobile.png" alt="">
      </div>
    </div>
  </div>
</section>

<section class="section py-10">
  <div class="container">
    <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-desktop is-clipped is-relative">
  <div class="container">
    <div class="columns is-align-items-center is-justify-content-space-between">
      <div class="column is-5 is-4-desktop is-5-widescreen mb-12 mb-0-tablet">
        <div class="pr-5-widescreen">
          <small class="mb-2 is-block has-text-grey-darker is-uppercase has-text-weight-semibold">Sign in</small>
          <h2 class="title has-mw-xs">Join our community</h2>
          <div class="field mb-4">
            <label class="label"><small>E-mail address</small></label>
            <div class="control">
              <input class="input" type="text" placeholder="Type your e-mail">
            </div>
          </div>
          <div class="field mb-4">
            <label class="label"><small>Password</small></label>
            <div class="control">
              <input class="input" type="password" placeholder="Type password">
            </div>
          </div>
          <div class="control">
            <button class="button is-primary is-fullwidth">Sign in</button>
          </div>
          <button class="button has-text-grey-darker has-text-weight-normal py-9" href="#" style=" width: 100%; border: none;">Forgot password</button>
          <div class="buttons is-flex-direction-column">
            <button class="button is-primary is-light has-text-grey-darker has-text-weight-normal is-relative mr-0 is-fullwidth">
              <img class="is-absolute is-left-0 ml-3" src="acros-assets/icons/forms/facebook.svg" alt="">
              <span>Sign in with Facebook</span>
            </button>
            <button class="button is-primary is-light has-text-grey-darker has-text-weight-normal is-relative mr-0 is-fullwidth">
              <img class="is-absolute is-left-0 ml-3" src="acros-assets/icons/forms/twitter.svg" alt="">
              <span>Sign in with Twitter</span>
            </button>
          </div>
        </div>
      </div>
      <div class="column is-narrow-desktop is-hidden-desktop py-0">
        <img class="image ml-auto-tablet" src="acros-assets/images/forms/work-2.jpg" alt="">
      </div>
    </div>
  </div>
  <img class="image is-absolute is-top-0 is-right-0 is-hidden-touch" src="acros-assets/images/forms/work-2.jpg" alt="">
</section>

<section class="is-fixed" style="width: 100%; height: 100%;">
  <div class="has-background-white-ter is-absolute" style="width: 100%; height: 100%;"></div>
  <div class="is-fixed is-top-0 is-right-0 has-background-grey-darker p-8 has-mw-sm m-6" style="border-radius: 6px;">
    <a class="is-absolute is-right-0 is-top-0 mr-6 mt-6" href="#">
      <img src="acros-assets/icons/modals/decline-small-white.svg" alt="">
    </a>
    <h5 class="title is-size-5 has-text-white has-text-weight-medium mb-2">Sign up to our newsletter</h5>
    <p class="has-text-white mb-6">It uses a dictionary of over 200 Latin words, combined</p>
    <div class="buttons"><a class="button is-primary mr-3" href="#">Sign up</a><a class="button is-white is-outlined" href="#">Remind me later</a></div>
  </div>
</section>

<section class="section py-16 has-background-white-ter">
  <div class="container">
    <div class="has-mw-3xl mx-auto">
      <div class="is-relative p-6 py-5 pr-8 mb-4">
        <div class="has-background-primary is-absolute is-left-0 is-top-0" style="width: 100%; height: 100%; opacity: 0.1; border-radius: 4px;"></div>
        <div class="columns">
          <div class="column is-narrow">
            <div class="has-background-primary is-relative p-4 is-inline-block" style="border-radius: 2px;">
              <span class="is-absolute is-size-7 has-text-white has-text-weight-medium" style="transform: translate(-50%, -50%)">1</span>
            </div>
          </div>
          <div class="column">
            <div>
              <h5 class="title is-size-5 has-leading-3 has-text-weight-medium mb-4">Fusce eget nunc et libero accumsan rutrum quis nec lectus?</h5>
              <p class="subtitle is-size-6">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>
          </div>
          <div class="column is-narrow">
            <a href="#">
              <img src="acros-assets/icons/faq/arrow-up.svg" alt="">
            </a>
          </div>
        </div>
      </div>
      <div class="is-relative p-6 py-5 pr-8 mb-4">
        <div class="has-background-white is-absolute is-left-0 is-top-0" style="width: 100%; height: 100%; border-radius: 4px;"></div>
        <div class="columns is-align-items-center is-relative" style="z-index: 1;">
          <div class="column is-narrow pb-1">
            <div class="has-background-white-ter is-relative p-4 is-inline-block" style="border-radius: 2px;">
              <span class="is-absolute is-size-7 has-text-weight-medium" style="transform: translate(-50%, -50%)">2</span>
            </div>
          </div>
          <div class="column">
            <h5 class="title is-size-5">Donec sed leo sit amet ante ornare laoreet in quis est?</h5>
          </div>
          <div class="column is-narrow pb-1">
            <a href="#">
              <img src="acros-assets/icons/faq/arrow-down.svg" alt="">
            </a>
          </div>
        </div>
      </div>
      <div class="is-relative p-6 py-5 pr-8 mb-4">
        <div class="has-background-white is-absolute is-left-0 is-top-0" style="width: 100%; height: 100%; border-radius: 4px;"></div>
        <div class="columns is-align-items-center is-relative" style="z-index: 1;">
          <div class="column is-narrow pb-1">
            <div class="has-background-white-ter is-relative p-4 is-inline-block" style="border-radius: 2px;">
              <span class="is-absolute is-size-7 has-text-weight-medium" style="transform: translate(-50%, -50%)">3</span>
            </div>
          </div>
          <div class="column">
            <h5 class="title is-size-5">Mauris vitae ex ut lectus cursus ornare?</h5>
          </div>
          <div class="column is-narrow pb-1">
            <a href="#">
              <img src="acros-assets/icons/faq/arrow-down.svg" alt="">
            </a>
          </div>
        </div>
      </div>
      <div class="is-relative p-6 py-5 pr-8 mb-4">
        <div class="has-background-white is-absolute is-left-0 is-top-0" style="width: 100%; height: 100%; border-radius: 4px;"></div>
        <div class="columns is-align-items-center is-relative" style="z-index: 1;">
          <div class="column is-narrow pb-1">
            <div class="has-background-white-ter is-relative p-4 is-inline-block" style="border-radius: 2px;">
              <span class="is-absolute is-size-7 has-text-weight-medium" style="transform: translate(-50%, -50%)">4</span>
            </div>
          </div>
          <div class="column">
            <h5 class="title is-size-5">Nam consequat, augue sed rutrum faucibus?</h5>
          </div>
          <div class="column is-narrow pb-1">
            <a href="#">
              <img src="acros-assets/icons/faq/arrow-down.svg" alt="">
            </a>
          </div>
        </div>
      </div>
      <div class="is-relative p-6 py-5 pr-8">
        <div class="has-background-white is-absolute is-left-0 is-top-0" style="width: 100%; height: 100%; border-radius: 4px;"></div>
        <div class="columns is-align-items-center is-relative" style="z-index: 1;">
          <div class="column is-narrow pb-1">
            <div class="has-background-white-ter is-relative p-4 is-inline-block" style="border-radius: 2px;">
              <span class="is-absolute is-size-7 has-text-weight-medium" style="transform: translate(-50%, -50%)">5</span>
            </div>
          </div>
          <div class="column">
            <h5 class="title is-size-5">Cras at ante non ligula pharetra elementum?</h5>
          </div>
          <div class="column is-narrow pb-1">
            <a href="#">
              <img src="acros-assets/icons/faq/arrow-down.svg" alt="">
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="section py-16 has-background-white-ter">
  <div class="container">
    <div class="columns">
      <div class="column">
        <div class="has-background-white p-8" style="border-radius: 4px;">
          <div class="is-relative is-inline-block mb-8">
            <img src="acros-assets/icons/how-it-works/change-green.svg" alt="">
            <span class="is-block has-text-weight-semibold has-text-white is-absolute has-background-grey-darker" style="right: -0.7rem; bottom: 0; font-size: 10px; width:24px; height:24px; border-radius: 50%;">
              <span class="is-absolute" style="top: 50%; left: 50%; transform: translate(-50%, -50%)">1</span>
            </span>
          </div>
          <h5 class="mb-4 title is-size-5 has-text-weight-medium pr-8-widescreen">Suspendisse interdum ullamcorper elit, at consequat libero.</h5>
          <p class="has-text-grey-darker pr-10-widescreen">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum, erat augue imperdiet.</p>
        </div>
      </div>
      <div class="column">
        <div class="has-background-white p-8" style="border-radius: 4px;">
          <div class="is-relative is-inline-block mb-8">
            <img src="acros-assets/icons/how-it-works/change-green.svg" alt="">
            <span class="is-block has-text-weight-semibold has-text-white is-absolute has-background-grey-darker" style="right: -0.7rem; bottom: 0; font-size: 10px; width:24px; height:24px; border-radius: 50%;">
              <span class="is-absolute" style="top: 50%; left: 50%; transform: translate(-50%, -50%)">2</span>
            </span>
          </div>
          <h5 class="mb-4 title is-size-5 has-text-weight-medium pr-8-widescreen">Suspendisse interdum ullamcorper elit, at consequat libero.</h5>
          <p class="has-text-grey-darker pr-10-widescreen">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum, erat augue imperdiet.</p>
        </div>
      </div>
      <div class="column">
        <div class="has-background-white p-8" style="border-radius: 4px;">
          <div class="is-relative is-inline-block mb-8">
            <img src="acros-assets/icons/how-it-works/change-green.svg" alt="">
            <span class="is-block has-text-weight-semibold has-text-white is-absolute has-background-grey-darker" style="right: -0.7rem; bottom: 0; font-size: 10px; width:24px; height:24px; border-radius: 50%;">
              <span class="is-absolute" style="top: 50%; left: 50%; transform: translate(-50%, -50%)">3</span>
            </span>
          </div>
          <h5 class="mb-4 title is-size-5 has-text-weight-medium pr-8-widescreen">Suspendisse interdum ullamcorper elit, at consequat libero.</h5>
          <p class="has-text-grey-darker pr-10-widescreen">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum, erat augue imperdiet.</p>
        </div>
      </div>
    </div>
    <div class="columns">
      <div class="column">
        <div class="has-background-white p-8" style="border-radius: 4px;">
          <div class="is-relative is-inline-block mb-8">
            <img src="acros-assets/icons/how-it-works/change-green.svg" alt="">
            <span class="is-block has-text-weight-semibold has-text-white is-absolute has-background-grey-darker" style="right: -0.7rem; bottom: 0; font-size: 10px; width:24px; height:24px; border-radius: 50%;">
              <span class="is-absolute" style="top: 50%; left: 50%; transform: translate(-50%, -50%)">4</span>
            </span>
          </div>
          <h5 class="mb-4 title is-size-5 has-text-weight-medium pr-8-widescreen">Suspendisse interdum ullamcorper elit, at consequat libero.</h5>
          <p class="has-text-grey-darker pr-10-widescreen">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum, erat augue imperdiet.</p>
        </div>
      </div>
      <div class="column">
        <div class="has-background-white p-8" style="border-radius: 4px;">
          <div class="is-relative is-inline-block mb-8">
            <img src="acros-assets/icons/how-it-works/change-green.svg" alt="">
            <span class="is-block has-text-weight-semibold has-text-white is-absolute has-background-grey-darker" style="right: -0.7rem; bottom: 0; font-size: 10px; width:24px; height:24px; border-radius: 50%;">
              <span class="is-absolute" style="top: 50%; left: 50%; transform: translate(-50%, -50%)">5</span>
            </span>
          </div>
          <h5 class="mb-4 title is-size-5 has-text-weight-medium pr-8-widescreen">Suspendisse interdum ullamcorper elit, at consequat libero.</h5>
          <p class="has-text-grey-darker pr-10-widescreen">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum, erat augue imperdiet.</p>
        </div>
      </div>
      <div class="column">
        <div class="has-background-white p-8" style="border-radius: 4px;">
          <div class="is-relative is-inline-block mb-8">
            <img src="acros-assets/icons/how-it-works/change-green.svg" alt="">
            <span class="is-block has-text-weight-semibold has-text-white is-absolute has-background-grey-darker" style="right: -0.7rem; bottom: 0; font-size: 10px; width:24px; height:24px; border-radius: 50%;">
              <span class="is-absolute" style="top: 50%; left: 50%; transform: translate(-50%, -50%)">6</span>
            </span>
          </div>
          <h5 class="mb-4 title is-size-5 has-text-weight-medium pr-8-widescreen">Suspendisse interdum ullamcorper elit, at consequat libero.</h5>
          <p class="has-text-grey-darker pr-10-widescreen">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum, erat augue imperdiet.</p>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="section py-16 has-background-white-ter is-relative 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>
    <h2 class="title mb-12">What people says about us</h2>
    <div class="columns -ml-96-widescreen" style="max-width: 1365px;">
      <div class="column is-4-tablet">
        <div class="has-background-white py-6 px-12" 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 is-4-tablet">
        <div class="has-background-white py-6 px-12" 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 is-4-tablet">
        <div class="has-background-white py-6 px-12" 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 is-4-tablet">
        <div class="has-background-white py-6 px-12" 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="columns -ml-56-widescreen" style="max-width: 1365px;">
      <div class="column is-4-tablet">
        <div class="has-background-white py-6 px-12" 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 is-4-tablet">
        <div class="has-background-white py-6 px-12" 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 is-4-tablet">
        <div class="has-background-white py-6 px-12" 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 is-4-tablet">
        <div class="has-background-white py-6 px-12" 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>
  <img class="image is-absolute is-left-0 is-bottom-0 is-hidden-touch" style="height: 100%;" src="acros-assets/images/testimonials/testimonial-5-shadow-left.png" alt="">
  <img class="image is-absolute is-right-0 is-bottom-0 is-hidden-touch" style="height: 100%;" src="acros-assets/images/testimonials/testimonial-5-shadow-right.png" alt="">
</section>

<section class="section py-16 has-background-white-ter">
  <div class="container">
    <div class="columns is-7 is-align-items-center mb-6">
      <div class="column">
        <h2 class="title">The latest version of this excellent product is waiting to deploy</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="#">Learn more</a></div>
      </div>
    </div>
    <p class="has-text-grey-darker is-size-5 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">
        <div class="has-background-white p-8" style="border-radius: 4px;">
          <div class="is-relative is-inline-block mb-8">
            <img src="acros-assets/icons/how-it-works/change-green.svg" alt="">
            <span class="is-block has-text-weight-semibold has-text-white is-absolute has-background-grey-darker" style="right: -0.7rem; bottom: 0; font-size: 10px; width:24px; height:24px; border-radius: 50%;">
              <span class="is-absolute" style="top: 50%; left: 50%; transform: translate(-50%, -50%)">1</span>
            </span>
          </div>
          <h5 class="mb-4 title is-size-5 has-text-weight-medium pr-8-widescreen">Suspendisse interdum ullamcorper elit, at consequat libero.</h5>
          <p class="has-text-grey-darker pr-10-widescreen">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum, erat augue imperdiet.</p>
        </div>
      </div>
      <div class="column">
        <div class="has-background-white p-8" style="border-radius: 4px;">
          <div class="is-relative is-inline-block mb-8">
            <img src="acros-assets/icons/how-it-works/change-green.svg" alt="">
            <span class="is-block has-text-weight-semibold has-text-white is-absolute has-background-grey-darker" style="right: -0.7rem; bottom: 0; font-size: 10px; width:24px; height:24px; border-radius: 50%;">
              <span class="is-absolute" style="top: 50%; left: 50%; transform: translate(-50%, -50%)">2</span>
            </span>
          </div>
          <h5 class="mb-4 title is-size-5 has-text-weight-medium pr-8-widescreen">Suspendisse interdum ullamcorper elit, at consequat libero.</h5>
          <p class="has-text-grey-darker pr-10-widescreen">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum, erat augue imperdiet.</p>
        </div>
      </div>
      <div class="column">
        <div class="has-background-white p-8" style="border-radius: 4px;">
          <div class="is-relative is-inline-block mb-8">
            <img src="acros-assets/icons/how-it-works/change-green.svg" alt="">
            <span class="is-block has-text-weight-semibold has-text-white is-absolute has-background-grey-darker" style="right: -0.7rem; bottom: 0; font-size: 10px; width:24px; height:24px; border-radius: 50%;">
              <span class="is-absolute" style="top: 50%; left: 50%; transform: translate(-50%, -50%)">3</span>
            </span>
          </div>
          <h5 class="mb-4 title is-size-5 has-text-weight-medium pr-8-widescreen">Suspendisse interdum ullamcorper elit, at consequat libero.</h5>
          <p class="has-text-grey-darker pr-10-widescreen">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum, erat augue imperdiet.</p>
        </div>
      </div>
    </div>
    <div class="columns">
      <div class="column">
        <div class="has-background-white p-8" style="border-radius: 4px;">
          <div class="is-relative is-inline-block mb-8">
            <img src="acros-assets/icons/how-it-works/change-green.svg" alt="">
            <span class="is-block has-text-weight-semibold has-text-white is-absolute has-background-grey-darker" style="right: -0.7rem; bottom: 0; font-size: 10px; width:24px; height:24px; border-radius: 50%;">
              <span class="is-absolute" style="top: 50%; left: 50%; transform: translate(-50%, -50%)">4</span>
            </span>
          </div>
          <h5 class="mb-4 title is-size-5 has-text-weight-medium pr-8-widescreen">Suspendisse interdum ullamcorper elit, at consequat libero.</h5>
          <p class="has-text-grey-darker pr-10-widescreen">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum, erat augue imperdiet.</p>
        </div>
      </div>
      <div class="column">
        <div class="has-background-white p-8" style="border-radius: 4px;">
          <div class="is-relative is-inline-block mb-8">
            <img src="acros-assets/icons/how-it-works/change-green.svg" alt="">
            <span class="is-block has-text-weight-semibold has-text-white is-absolute has-background-grey-darker" style="right: -0.7rem; bottom: 0; font-size: 10px; width:24px; height:24px; border-radius: 50%;">
              <span class="is-absolute" style="top: 50%; left: 50%; transform: translate(-50%, -50%)">5</span>
            </span>
          </div>
          <h5 class="mb-4 title is-size-5 has-text-weight-medium pr-8-widescreen">Suspendisse interdum ullamcorper elit, at consequat libero.</h5>
          <p class="has-text-grey-darker pr-10-widescreen">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum, erat augue imperdiet.</p>
        </div>
      </div>
      <div class="column">
        <div class="has-background-white p-8" style="border-radius: 4px;">
          <div class="is-relative is-inline-block mb-8">
            <img src="acros-assets/icons/how-it-works/change-green.svg" alt="">
            <span class="is-block has-text-weight-semibold has-text-white is-absolute has-background-grey-darker" style="right: -0.7rem; bottom: 0; font-size: 10px; width:24px; height:24px; border-radius: 50%;">
              <span class="is-absolute" style="top: 50%; left: 50%; transform: translate(-50%, -50%)">6</span>
            </span>
          </div>
          <h5 class="mb-4 title is-size-5 has-text-weight-medium pr-8-widescreen">Suspendisse interdum ullamcorper elit, at consequat libero.</h5>
          <p class="has-text-grey-darker pr-10-widescreen">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum, erat augue imperdiet.</p>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="section-ter 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">
      <div class="column 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 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 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 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>
  </div>
</section>

<section class="section py-16 has-background-grey-darker">
  <div class="container">
    <small class="mb-2 is-block has-text-white is-uppercase has-text-weight-semibold">Faq</small>
    <h2 class="title has-text-white">Questions and Answers</h2>
    <p class="subtitle has-text-white has-mw-xl mb-12">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec.</p>
    <div class="columns">
      <div class="column">
        <div class="p-6 has-background-grey-dark" style="border-radius: 6px;">
          <img class="mb-6" src="acros-assets/icons/faq/key-dark.svg" alt="">
          <h5 class="title is-size-5 has-leading-3 has-text-white has-text-weight-medium mb-4 has-mw-xs">Mauris vitae ex ut lectus cursus ornare?</h5>
          <ul>
            <li class="is-flex is-align-items-center has-text-white mb-2">
              <img class="mr-2" src="acros-assets/icons/faq/arrow-forward.svg" alt="">
              Etiam pellentesque non nibh
            </li>
            <li class="is-flex is-align-items-center has-text-white mb-2">
              <img class="mr-2" src="acros-assets/icons/faq/arrow-forward.svg" alt="">
              Mauris posuere
            </li>
            <li class="is-flex is-align-items-center has-text-white mb-2">
              <img class="mr-2" src="acros-assets/icons/faq/arrow-forward.svg" alt="">
              Tellus sit amet tempus vestibulum
            </li>
            <li class="is-flex is-align-items-center has-text-white">
              <img class="mr-2" src="acros-assets/icons/faq/arrow-forward.svg" alt="">
              Erat augue imperdiet neque
            </li>
          </ul>
        </div>
      </div>
      <div class="column">
        <div class="p-6 has-background-grey-dark" style="border-radius: 6px;">
          <img class="mb-6" src="acros-assets/icons/faq/chat-dark.svg" alt="">
          <h5 class="title is-size-5 has-leading-3 has-text-white has-text-weight-medium mb-4 has-mw-xs">All the Lorem Ipsum generators on the Internet tend</h5>
          <ul>
            <li class="is-flex is-align-items-center has-text-white mb-2">
              <img class="mr-2" src="acros-assets/icons/faq/arrow-forward.svg" alt="">
              Etiam pellentesque non nibh
            </li>
            <li class="is-flex is-align-items-center has-text-white mb-2">
              <img class="mr-2" src="acros-assets/icons/faq/arrow-forward.svg" alt="">
              Mauris posuere
            </li>
            <li class="is-flex is-align-items-center has-text-white mb-2">
              <img class="mr-2" src="acros-assets/icons/faq/arrow-forward.svg" alt="">
              Tellus sit amet tempus vestibulum
            </li>
            <li class="is-flex is-align-items-center has-text-white">
              <img class="mr-2" src="acros-assets/icons/faq/arrow-forward.svg" alt="">
              Erat augue imperdiet neque
            </li>
          </ul>
        </div>
      </div>
      <div class="column">
        <div class="p-6 has-background-grey-dark" style="border-radius: 6px;">
          <img class="mb-6" src="acros-assets/icons/faq/shop-dark.svg" alt="">
          <h5 class="title is-size-5 has-leading-3 has-text-white has-text-weight-medium mb-4 has-mw-xs">It uses a dictionary of over 200 Latin words</h5>
          <ul>
            <li class="is-flex is-align-items-center has-text-white mb-2">
              <img class="mr-2" src="acros-assets/icons/faq/arrow-forward.svg" alt="">
              Etiam pellentesque non nibh
            </li>
            <li class="is-flex is-align-items-center has-text-white mb-2">
              <img class="mr-2" src="acros-assets/icons/faq/arrow-forward.svg" alt="">
              Mauris posuere
            </li>
            <li class="is-flex is-align-items-center has-text-white mb-2">
              <img class="mr-2" src="acros-assets/icons/faq/arrow-forward.svg" alt="">
              Tellus sit amet tempus vestibulum
            </li>
            <li class="is-flex is-align-items-center has-text-white">
              <img class="mr-2" src="acros-assets/icons/faq/arrow-forward.svg" alt="">
              Erat augue imperdiet neque
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="columns">
      <div class="column">
        <div class="p-6 has-background-grey-dark" style="border-radius: 6px;">
          <img class="mb-6" src="acros-assets/icons/faq/file-dark.svg" alt="">
          <h5 class="title is-size-5 has-leading-3 has-text-white has-text-weight-medium mb-4 has-mw-xs">The generated Lorem Ipsum is therefore always</h5>
          <ul>
            <li class="is-flex is-align-items-center has-text-white mb-2">
              <img class="mr-2" src="acros-assets/icons/faq/arrow-forward.svg" alt="">
              Etiam pellentesque non nibh
            </li>
            <li class="is-flex is-align-items-center has-text-white mb-2">
              <img class="mr-2" src="acros-assets/icons/faq/arrow-forward.svg" alt="">
              Mauris posuere
            </li>
            <li class="is-flex is-align-items-center has-text-white mb-2">
              <img class="mr-2" src="acros-assets/icons/faq/arrow-forward.svg" alt="">
              Tellus sit amet tempus vestibulum
            </li>
            <li class="is-flex is-align-items-center has-text-white">
              <img class="mr-2" src="acros-assets/icons/faq/arrow-forward.svg" alt="">
              Erat augue imperdiet neque
            </li>
          </ul>
        </div>
      </div>
      <div class="column">
        <div class="p-6 has-background-grey-dark" style="border-radius: 6px;">
          <img class="mb-6" src="acros-assets/icons/faq/user-dark.svg" alt="">
          <h5 class="title is-size-5 has-leading-3 has-text-white has-text-weight-medium mb-4 has-mw-xs">The standard chunk of Lorem Ipsum used since the 1500s</h5>
          <ul>
            <li class="is-flex is-align-items-center has-text-white mb-2">
              <img class="mr-2" src="acros-assets/icons/faq/arrow-forward.svg" alt="">
              Etiam pellentesque non nibh
            </li>
            <li class="is-flex is-align-items-center has-text-white mb-2">
              <img class="mr-2" src="acros-assets/icons/faq/arrow-forward.svg" alt="">
              Mauris posuere
            </li>
            <li class="is-flex is-align-items-center has-text-white mb-2">
              <img class="mr-2" src="acros-assets/icons/faq/arrow-forward.svg" alt="">
              Tellus sit amet tempus vestibulum
            </li>
            <li class="is-flex is-align-items-center has-text-white">
              <img class="mr-2" src="acros-assets/icons/faq/arrow-forward.svg" alt="">
              Erat augue imperdiet neque
            </li>
          </ul>
        </div>
      </div>
      <div class="column">
        <div class="p-6 has-background-grey-dark" style="border-radius: 6px;">
          <img class="mb-6" src="acros-assets/icons/faq/settings-dark.svg" alt="">
          <h5 class="title is-size-5 has-leading-3 has-text-white has-text-weight-medium mb-4 has-mw-xs">Many desktop publishing packages and web page editors</h5>
          <ul>
            <li class="is-flex is-align-items-center has-text-white mb-2">
              <img class="mr-2" src="acros-assets/icons/faq/arrow-forward.svg" alt="">
              Etiam pellentesque non nibh
            </li>
            <li class="is-flex is-align-items-center has-text-white mb-2">
              <img class="mr-2" src="acros-assets/icons/faq/arrow-forward.svg" alt="">
              Mauris posuere
            </li>
            <li class="is-flex is-align-items-center has-text-white mb-2">
              <img class="mr-2" src="acros-assets/icons/faq/arrow-forward.svg" alt="">
              Tellus sit amet tempus vestibulum
            </li>
            <li class="is-flex is-align-items-center has-text-white">
              <img class="mr-2" src="acros-assets/icons/faq/arrow-forward.svg" alt="">
              Erat augue imperdiet neque
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="section pt-16 pb-44" style="background-image: url('acros-assets/images/contacts/dark-bg.jpg'); background-size: cover; background-position: center; background-size: cover;">
    <div class="container">
      <div class="mb-12">
        <small class="mb-2 is-block has-text-white is-uppercase has-text-weight-semibold">
          <span>Feel free to</span>
          <span class="has-text-primary">contact us</span>
        </small>
        <h2 class="title has-text-white has-mw-sm">Let&rsquo;s discuss about your needs</h2>
      </div>
    </div>
  </div>
  <div class="-mt-44">
    <section class="section py-0 -mb-36">
      <div class="container">
        <div class="columns">
          <div class="column">
            <div class="has-background-white p-8 has-text-centered" style="border-radius: 6px; height: 262px;">
              <h5 class="title is-size-5 has-leading-3 has-text-weight-medium mb-8">Address</h5>
              <img class="mb-4" src="acros-assets/icons/contacts/location.svg" alt="">
              <p>1686, Geraldine Lane</p>
              <p>New York, NY 10013</p>
            </div>
          </div>
          <div class="column">
            <div class="has-background-white p-8 has-text-centered" style="border-radius: 6px; height: 262px;">
              <h5 class="title is-size-5 has-leading-3 has-text-weight-medium mb-8">Contact info</h5>
              <img class="mb-4" src="acros-assets/icons/contacts/phone.svg" alt="">
              <p>1686, Geraldine Lane</p>
              <p>New York, NY 10013</p>
            </div>
          </div>
          <div class="column">
            <div class="has-background-white p-8 has-text-centered" style="border-radius: 6px; height: 262px;">
              <h5 class="title is-size-5 has-leading-3 has-text-weight-medium mb-8">Social media</h5>
              <ul class="is-flex is-justify-content-center mb-6">
                <li>
                  <a href="#">
                    <img src="acros-assets/icons/contacts/facebook.svg" alt="">
                  </a>
                </li>
                <li class="mx-4">
                  <a href="#">
                    <img src="acros-assets/icons/contacts/twitter.svg" alt="">
                  </a>
                </li>
                <li>
                  <a href="#">
                    <img src="acros-assets/icons/contacts/instagram.svg" alt="">
                  </a>
                </li>
              </ul>
              <p>Stay in touch!</p>
            </div>
          </div>
        </div>
      </div>
    </section>
    <div class="has-background-white-ter" style="height: 200px;"></div>
  </div>
</section>

<section>
  <nav class="navbar py-2 has-background-grey-darker">
    <div class="container px-8-mobile px-32-widescreen">
      <div class="navbar-brand is-align-items-center">
        <a class="navbar-item" href="#">
          <span class="px-0 title is-size-4 has-text-white">
            <img src="acros-assets/logo/logo-acros-white.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-white has-text-weight-normal navbar-item" href="#">About</a></li>
            <li><a class="title is-size-6 has-text-white has-text-weight-normal navbar-item" href="#">Company</a></li>
            <li><a class="title is-size-6 has-text-white has-text-weight-normal navbar-item" href="#">Services</a></li>
            <li><a class="title is-size-6 has-text-white 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-grey-dark 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-white.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;" 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>

<div>
  <section class="section pt-16 pb-0" style="background-image: url('acros-assets/images/call-to-action/cta-5-bg.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center;">
    <div class="container has-text-centered">
      <h2 class="mb-6 title has-mw-2xl mx-auto has-text-white">The latest version of this excellent product is waiting to deploy</h2>
      <p class="mb-12 subtitle has-mw-xl mx-auto has-text-white">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="columns">
        <div class="column">
          <div class="has-background-white p-10 px-16" style="min-height: 262px; border-radius: 4px;">
            <img class="mb-5" src="acros-assets/icons/call-to-action/changes.svg" alt="">
            <h5 class="title is-size-5 has-text-weight-semibold mb-4">Easy changes</h5>
            <p class="subtitle is-size-6">Options settings for customers convenience</p>
          </div>
        </div>
        <div class="column">
          <div class="has-background-white p-10 px-16" style="min-height: 262px; border-radius: 4px;">
            <img class="mb-5" src="acros-assets/icons/call-to-action/sharable.svg" alt="">
            <h5 class="title is-size-5 has-text-weight-semibold mb-4">Sharable showcase</h5>
            <p class="subtitle is-size-6">Options settings for customers convenience</p>
          </div>
        </div>
        <div class="column">
          <div class="has-background-white p-10 px-16" style="min-height: 262px; border-radius: 4px;">
            <img class="mb-5" src="acros-assets/icons/call-to-action/messages.svg" alt="">
            <h5 class="title is-size-5 has-text-weight-semibold mb-4">Generate new messages</h5>
            <p class="subtitle is-size-6">Options settings for customers convenience</p>
          </div>
        </div>
      </div>
    </div>
  </section>
  <div class="has-background-white-ter -mt-32 py-24"></div>
</div>

<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-12">
      <div class="column is-7">
        <h2 class="title has-mw-md">See what this extension tool looks like</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>
    <div class="columns mb-12">
      <div class="column">
        <div class="columns">
          <div class="column pr-4 is-narrow">
            <img class="image is-fullwidth" src="acros-assets/images/blog/work-man-160x160.jpg" alt="">
          </div>
          <div class="column pl-4">
            <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">There are many variations of passages of Lorem Ipsum available</h5>
            <p class="subtitle is-size-6 mb-6">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>
      <div class="column">
        <div class="columns">
          <div class="column pr-4 is-narrow">
            <img class="image is-fullwidth" src="acros-assets/images/blog/woman-160x160.jpg" alt="">
          </div>
          <div class="column pl-4">
            <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">There are many variations of passages of Lorem Ipsum available</h5>
            <p class="subtitle is-size-6 mb-6">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>
    </div>
    <div class="columns">
      <div class="column">
        <div class="columns">
          <div class="column pr-4 is-narrow">
            <img class="image is-fullwidth" src="acros-assets/images/blog/robot-160x160.jpg" alt="">
          </div>
          <div class="column pl-4">
            <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">There are many variations of passages of Lorem Ipsum available</h5>
            <p class="subtitle is-size-6 mb-6">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>
      <div class="column">
        <div class="columns">
          <div class="column pr-4 is-narrow">
            <img class="image is-fullwidth" src="acros-assets/images/blog/programming-160x160.jpg" alt="">
          </div>
          <div class="column pl-4">
            <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">There are many variations of passages of Lorem Ipsum available</h5>
            <p class="subtitle is-size-6 mb-6">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>
    </div>
  </div>
</section>

<section class="section py-16 has-background-light">
  <div class="container">
    <small class="mb-2 is-block is-uppercase has-text-weight-semibold">Pricing</small>
    <h2 class="title has-mw-xl mb-12">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
    <div class="columns p-8 has-background-white has-mw-4xl mx-auto mb-16 mb-0-tablet" style="border-radius: 6px;">
      <div class="column is-4">
        <h3 class="mb-2 title is-size-3">Free</h3>
      </div>
      <div class="column is-5">
        <ul class="mb-6 mb-0-tablet">
          <li class="mb-2 is-flex is-align-items-center">
            <img class="mr-3" src="acros-assets/icons/pricing/check-fill-white.svg" alt="">
            <small>Complete documentation</small>
          </li>
          <li class="mb-2 is-flex is-align-items-center">
            <img class="mr-3" src="acros-assets/icons/pricing/check-fill-white.svg" alt="">
            <small>Working materials in Figma</small>
          </li>
          <li class="mb-2 is-flex is-align-items-center">
            <img class="mr-3" src="acros-assets/icons/pricing/check-fill-white.svg" alt="">
            <small>100GB cloud storage</small>
          </li>
          <li class="is-flex is-align-items-center">
            <img class="mr-3" src="acros-assets/icons/pricing/check-fill-white.svg" alt="">
            <small>500 team members</small>
          </li>
        </ul>
      </div>
      <div class="column is-3 has-text-centered p-4" style="border-radius: 4px; background: #E6FAF6;">
        <h4 class="mb-2 title is-size-4 has-text-weight-medium is-flex is-justify-content-center">
          <span class="is-size-6 mr-1">$</span>
          0
        </h4>
        <p class="mb-4">per month</p>
        <div class="buttons"><a class="button is-white has-text-primary py-7 is-fullwidth" href="#">Get started</a></div>
      </div>
    </div>
    <div class="columns is-relative p-8 has-background-grey-darker has-mw-5xl mx-auto mb-16 mb-0-tablet" style="border-radius: 6px;">
      <img class="is-absolute is-left-0 is-top-0" style="top: -4px; left: -4px;" src="acros-assets/icons/pricing/bestseller.svg" alt="">
      <div class="column is-4">
        <h3 class="mb-2 title is-size-3 has-text-white">Pro</h3>
      </div>
      <div class="column is-5">
        <ul class="mb-6 mb-0-tablet">
          <li class="mb-2 is-flex is-align-items-center has-text-white">
            <img class="mr-3" src="acros-assets/icons/pricing/check-fill-black.svg" alt="">
            <small>Complete documentation</small>
          </li>
          <li class="mb-2 is-flex is-align-items-center has-text-white">
            <img class="mr-3" src="acros-assets/icons/pricing/check-fill-black.svg" alt="">
            <small>Working materials in Figma</small>
          </li>
          <li class="mb-2 is-flex is-align-items-center has-text-white">
            <img class="mr-3" src="acros-assets/icons/pricing/check-fill-black.svg" alt="">
            <small>100GB cloud storage</small>
          </li>
          <li class="is-flex is-align-items-center has-text-white">
            <img class="mr-3" src="acros-assets/icons/pricing/check-fill-black.svg" alt="">
            <small>500 team members</small>
          </li>
        </ul>
      </div>
      <div class="column is-3 has-text-centered p-4 has-background-white" style="border-radius: 4px;">
        <h4 class="mb-2 title is-size-4 has-text-weight-medium is-flex is-justify-content-center">
          <span class="is-size-6 mr-1">$</span>
          14,99
        </h4>
        <p class="mb-4">per month</p>
        <div class="buttons"><a class="button is-primary has-text-white py-7 is-fullwidth" href="#">Try it for free</a></div>
      </div>
    </div>
    <div class="columns p-8 has-background-white has-mw-4xl mx-auto" style="border-radius: 6px;">
      <div class="column is-4">
        <h3 class="mb-2 title is-size-3">Premium</h3>
      </div>
      <div class="column is-5">
        <ul class="mb-6 mb-0-tablet">
          <li class="mb-2 is-flex is-align-items-center">
            <img class="mr-3" src="acros-assets/icons/pricing/check-fill-white.svg" alt="">
            <small>Complete documentation</small>
          </li>
          <li class="mb-2 is-flex is-align-items-center">
            <img class="mr-3" src="acros-assets/icons/pricing/check-fill-white.svg" alt="">
            <small>Working materials in Figma</small>
          </li>
          <li class="mb-2 is-flex is-align-items-center">
            <img class="mr-3" src="acros-assets/icons/pricing/check-fill-white.svg" alt="">
            <small>100GB cloud storage</small>
          </li>
          <li class="is-flex is-align-items-center">
            <img class="mr-3" src="acros-assets/icons/pricing/check-fill-white.svg" alt="">
            <small>500 team members</small>
          </li>
        </ul>
      </div>
      <div class="column is-3 has-text-centered p-4" style="border-radius: 4px; background: #E6FAF6;">
        <h4 class="mb-2 title is-size-4 has-text-weight-medium is-flex is-justify-content-center">
          <span class="is-size-6 mr-1">$</span>
          9,99
        </h4>
        <p class="mb-4">per month</p>
        <div class="buttons"><a class="button is-primary has-text-white py-7 is-fullwidth" href="#">Try it for free</a></div>
      </div>
    </div>
  </div>
</section>

<section class="section py-16 has-background-white-ter">
  <div class="container">
    <div class="has-text-centered">
      <small class="is-block is-uppercase has-leading-4 has-text-weight-semibold mb-4">
        <span>Error</span>
        <span class="has-text-primary">404</span>
      </small>
      <h1 class="title is-size-1">Page not found</h1>
      <p class="subtitle mb-10">Sorry! We are unable to find the page you are looking for</p>
      <div class="buttons is-justify-content-center mb-12"><a class="button is-primary mr-4" href="#">Go back to home page</a><a class="button is-dark is-outlined" href="#">Try again</a></div>
      <img class="image is-fullwidth" src="acros-assets/images/http-codes/loupe-row.jpg" alt="">
    </div>
  </div>
</section>

<section class="section py-16">
  <div class="container">
    <div class="columns is-align-items-center mb-10">
      <div class="column is-7">
        <h2 class="title">The latest version of this excellent product is waiting to deploy</h2>
      </div>
      <div class="column is-5">
        <div class="buttons"><a class="button is-success is-outlined has-text-grey-darker ml-auto-tablet" href="#">Check all posts</a></div>
      </div>
    </div>
    <ul class="is-flex mb-10">
      <li><a class="is-inline-block title is-size-6 has-background-primary has-text-white px-6 py-4" style="border-radius: 28px;" href="#">All</a></li>
      <li><a class="mx-2 is-inline-block title is-size-6 px-6 py-4 has-text-grey-darker" style="border: 1px solid #D5D6D6; border-radius: 28px;" href="#">People</a></li>
      <li><a class="is-inline-block title is-size-6 px-6 py-4 has-text-grey-darker" style="border: 1px solid #D5D6D6; border-radius: 28px;" href="#">Tech</a></li>
    </ul>
    <div class="columns mb-0 is-justify-content-center multiline">
      <div class="column is-narrow-widescreen">
        <div class="columns">
          <div class="column">
            <div class="columns">
              <div class="column">
                <a class="is-block is-relative" href="#">
                  <div class="is-absolute p-6" style="z-index: 1; bottom: 0;">
                    <p class="has-text-white is-size-6 title mb-2">
                      <span>#people</span>
                      <span class="ml-4">#family</span>
                    </p>
                    <h5 class="title is-size-5 has-text-white has-text-weight-medium">Compooter</h5>
                  </div>
                  <img class="image mx-auto" src="acros-assets/images/portfolio/diagram-md.jpg" style="width: 100%" alt="">
                </a>
              </div>
              <div class="column">
                <a class="is-block is-relative" href="#">
                  <div class="is-absolute p-6" style="z-index: 1; bottom: 0;">
                    <p class="has-text-white is-size-6 title mb-2">
                      <span>#people</span>
                      <span class="ml-4">#family</span>
                    </p>
                    <h5 class="title is-size-5 has-text-white has-text-weight-medium">Sheridan</h5>
                  </div>
                  <img class="image mx-auto" src="acros-assets/images/portfolio/hand-md.jpg" style="width: 100%" alt="">
                </a>
              </div>
            </div>
            <div class="columns">
              <div class="column">
                <a class="is-block is-relative" href="#">
                  <div class="is-absolute p-6" style="z-index: 1; bottom: 0;">
                    <p class="has-text-white is-size-6 title mb-2">
                      <span>#people</span>
                      <span class="ml-4">#family</span>
                    </p>
                    <h3 class="title is-size-3 has-text-white">Neonic</h3>
                  </div>
                  <img class="image mx-auto" src="acros-assets/images/portfolio/robot-md.jpg" style="width: 100%" alt="">
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="column is-narrow-widescreen">
        <div class="columns">
          <div class="column">
            <div class="columns">
              <div class="column">
                <a class="is-block is-relative" href="#">
                  <div class="is-absolute p-6" style="z-index: 1; bottom: 0;">
                    <p class="has-text-white is-size-6 title mb-2">
                      <span>#people</span>
                      <span class="ml-4">#family</span>
                    </p>
                    <h3 class="title is-size-3 has-text-white">Sheridan</h3>
                  </div>
                  <img class="image mx-auto" src="acros-assets/images/portfolio/work-md.jpg" style="width: 100%" alt="">
                </a>
              </div>
            </div>
            <div class="columns">
              <div class="column">
                <a class="is-block is-relative" href="#">
                  <div class="is-absolute p-6" style="z-index: 1; bottom: 0;">
                    <p class="has-text-white is-size-6 title mb-2">
                      <span>#people</span>
                      <span class="ml-4">#family</span>
                    </p>
                    <h5 class="title is-size-5 has-text-white has-text-weight-medium">Klakier</h5>
                  </div>
                  <img class="image mx-auto" src="acros-assets/images/portfolio/vr-md.jpg" style="width: 100%" alt="">
                </a>
              </div>
              <div class="column">
                <a class="is-block is-relative" href="#">
                  <div class="is-absolute p-6" style="z-index: 1; bottom: 0;">
                    <p class="has-text-white is-size-6 title mb-2">
                      <span>#people</span>
                      <span class="ml-4">#family</span>
                    </p>
                    <h5 class="title is-size-5 has-text-white has-text-weight-medium">Sheridan</h5>
                  </div>
                  <img class="image mx-auto" src="acros-assets/images/portfolio/hand-md.jpg" style="width: 100%" alt="">
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="section is-relative py-16 pt-24 has-background-white-ter is-clipped">
  <img class="is-hidden-mobile is-block-tablet is-absolute is-right-0" style="z-index: 1;" src="acros-assets/images/teams/shadow.png" alt="">
  <div class="container">
    <div class="columns is-align-items-center">
      <div class="column is-4-tablet mb-16 mb-0-tablet">
        <div class="has-background-white has-text-centered pb-6 px-10" style="border-radius: 6px;">
          <img class="-mt-12 mb-6" src="acros-assets/images/teams/man-1-small-circle.png" alt="">
          <h5 class="title is-size-5 has-leading-3 has-text-weight-medium mb-0">Steve Johnson</h5>
          <p class="has-text-grey-light mb-4">CEO &amp; Founder</p>
          <p class="mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
          <ul class="is-flex is-justify-content-center">
            <li>
              <a href="#">
                <img src="acros-assets/icons/teams/twitter.svg" alt="">
              </a>
            </li>
            <li class="mx-2">
              <a href="#">
                <img src="acros-assets/icons/teams/linkedin.svg" alt="">
              </a>
            </li>
            <li>
              <a href="#">
                <img src="acros-assets/icons/teams/instagram.svg" alt="">
              </a>
            </li>
          </ul>
        </div>
      </div>
      <div class="column is-4-tablet mb-16 mb-0-tablet">
        <div class="has-background-white has-text-centered pb-6 px-10" style="border-radius: 6px;">
          <img class="-mt-12 mb-6" src="acros-assets/images/teams/woman-1-small-circle.png" alt="">
          <h5 class="title is-size-5 has-leading-3 has-text-weight-medium mb-0">Justine Loren</h5>
          <p class="has-text-grey-light mb-4">Assistant</p>
          <p class="mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
          <ul class="is-flex is-justify-content-center">
            <li>
              <a href="#">
                <img src="acros-assets/icons/teams/twitter.svg" alt="">
              </a>
            </li>
            <li class="mx-2">
              <a href="#">
                <img src="acros-assets/icons/teams/linkedin.svg" alt="">
              </a>
            </li>
            <li>
              <a href="#">
                <img src="acros-assets/icons/teams/instagram.svg" alt="">
              </a>
            </li>
          </ul>
        </div>
      </div>
      <div class="column is-4-tablet mb-16 mb-0-tablet">
        <div class="has-background-white has-text-centered pb-6 px-10" style="border-radius: 6px;">
          <img class="-mt-12 mb-6" src="acros-assets/images/teams/man-1-small-circle.png" alt="">
          <h5 class="title is-size-5 has-leading-3 has-text-weight-medium mb-0">Carl Axel</h5>
          <p class="has-text-grey-light mb-4">Team Leader</p>
          <p class="mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
          <ul class="is-flex is-justify-content-center">
            <li>
              <a href="#">
                <img src="acros-assets/icons/teams/twitter.svg" alt="">
              </a>
            </li>
            <li class="mx-2">
              <a href="#">
                <img src="acros-assets/icons/teams/linkedin.svg" alt="">
              </a>
            </li>
            <li>
              <a href="#">
                <img src="acros-assets/icons/teams/instagram.svg" alt="">
              </a>
            </li>
          </ul>
        </div>
      </div>
      <div class="column is-4-tablet">
        <div class="has-background-white has-text-centered pb-6 px-10" style="border-radius: 6px;">
          <img class="-mt-12 mb-6" src="acros-assets/images/teams/woman-1-small-circle.png" alt="">
          <h5 class="title is-size-5 has-leading-3 has-text-weight-medium mb-0">Justine Loren</h5>
          <p class="has-text-grey-light mb-4">Assistant</p>
          <p class="mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
          <ul class="is-flex is-justify-content-center">
            <li>
              <a href="#">
                <img src="acros-assets/icons/teams/twitter.svg" alt="">
              </a>
            </li>
            <li class="mx-2">
              <a href="#">
                <img src="acros-assets/icons/teams/linkedin.svg" alt="">
              </a>
            </li>
            <li>
              <a href="#">
                <img src="acros-assets/icons/teams/instagram.svg" alt="">
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="section py-16 is-relative has-background-white-ter">
  <div class="is-absolute is-left-0 is-top-0 has-background-grey-darker" style="width: 100%; height:50%; opacity: 0.02;"></div>
  <div class="container">
    <div class="has-mw-xl mx-auto has-background-white p-10 px-24-tablet" style="border-radius: 6px;">
      <small class="mb-2 is-block has-text-grey-darker is-uppercase has-text-weight-semibold">
        <span>Create an</span>
        <span class="has-text-primary">account</span>
      </small>
      <h2 class="title">Join our community</h2>
      <div class="columns mb-4">
        <div class="column pb-0-tablet">
          <div class="field">
            <label class="label"><small>First name</small></label>
            <div class="control">
              <input class="input" type="text" placeholder="First name">
            </div>
          </div>
        </div>
        <div class="column pb-0-tablet">
          <div class="field">
            <label class="label"><small>Last name</small></label>
            <div class="control">
              <input class="input" type="text" placeholder="Last name">
            </div>
          </div>
        </div>
      </div>
      <div class="field mb-4">
        <label class="label"><small>E-mail address</small></label>
        <div class="control">
          <input class="input" type="text" placeholder="E-mail">
        </div>
      </div>
      <div class="field mb-6">
        <label class="label"><small>Password</small></label>
        <div class="control">
          <input class="input" type="password" placeholder="Password">
        </div>
      </div>
      <label class="is-flex mb-6 checkbox">
        <input class="mr-4" style="width: 20px; height: 20px;" type="checkbox">
        <small>
          <span>By signing up, you agree to our</span>
          <a class="has-text-weight-medium has-text-grey-darker" href="#">Terms, Data Policy</a><a class="has-text-weight-medium has-text-grey-darker" href="#">and Cookies Policy.</a>
        </small>
      </label>
      <div class="field">
        <div class="control has-text-right">
          <button class="button is-success has-text-white is-fullwidth">Get started</button>
        </div>
      </div>
    </div>
  </div>
</section>

<div 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>
      <h5 class="subtitle has-text-weight-medium mb-6">Building websites from wireframes that I had received. Some of those questions were:</h5>
      <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>
</div>