Shuffle Components in Acros library

<div class="is-fixed" style="width: 100%; height: 100%;">
  <div class="has-background-grey-darker is-absolute" style="width: 100%; height: 100%; opacity: 0.6; z-index: -1;"></div>
  <div class="section">
    <section class="has-background-white p-8 px-14 has-mw-md mx-auto" style="border-radius: 6px;">
      <img src="acros-assets/icons/modals/delete.svg" alt="">
      <h4 class="title is-size-4 has-text-weight-medium">Do you want to delete your account?</h4>
      <p class="has-text-grey-darker mb-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <div class="buttons is-justify-content-end"><a class="button is-dark is-outlined mr-4" href="#">Cancel</a><a class="button is-danger" href="#">Yes, delete</a></div>
    </section>
  </div>
</div>

<section class="is-fixed is-left-0 is-bottom-0 p-6 has-mw-3xl" style="z-index: 50;">
  <div class="has-background-grey-darker py-6 px-8" style="border-radius: 6px;">
    <div class="columns is-align-items-center">
      <div class="column">
        <h6 class="title is-size-6 has-leading-3 has-text-white">We use cookies to personalise content, to provide social media features and to analyse our traffic.</h6>
      </div>
      <div class="column is-narrow">
        <div class="buttons"><a class="button is-primary py-6 mr-2" href="#">Accept</a><a class="button is-white is-outlined py-6" href="#">Decline</a></div>
      </div>
    </div>
  </div>
</section>

<section class="section py-16 has-background-white-ter">
  <div class="container">
    <div class="columns is-align-items-center mb-16">
      <div class="column mb-5 mb-0-tablet">
        <h2 class="title">The latest version of this excellent product</h2>
      </div>
      <div class="column">
        <p class="subtitle is-size-6 has-mw-md ml-auto-tablet">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</p>
      </div>
    </div>
    <div class="columns">
      <div class="column mb-6 mb-0-tablet">
        <img class="mb-8" src="acros-assets/icons/features/auth.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 mb-6 mb-0-tablet">
        <img class="mb-8" src="acros-assets/icons/features/users.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 class="column">
        <img class="mb-8" src="acros-assets/icons/features/exchange.svg" alt="">
        <h5 class="mb-4 title is-size-5 has-text-weight-medium">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>
  </div>
</section>

<section class="section py-20 has-background-grey-darker">
  <div class="container">
    <div class="columns mb-0">
      <div class="column is-4 mb-12 mb-0-tablet mb-20-tablet">
        <a class="is-block mb-4 title is-size-4 has-text-white" href="#">
          <img src="acros-assets/logo/logo-acros-white.svg" alt="" width="auto">
        </a>
        <p class="title is-size-6 has-text-white" style="opacity: 0.5;">2021 &copy; Shuffle</p>
        <ul class="is-flex">
          <li><a class="title is-size-6 has-text-white" href="#">Terms</a></li>
          <li class="ml-9"><a class="title is-size-6 has-text-white" href="#">Privacy</a></li>
        </ul>
      </div>
      <div class="column is-8">
        <div class="columns">
          <div class="column is-4 mb-4 mb-0-tablet">
            <h5 class="title is-size-5 has-text-white has-text-weight-medium">Contact</h5>
            <ul class="mb-4">
              <li class="mb-2">
                <a class="title is-size-6 is-flex is-align-items-center has-text-white" href="#">
                  <img class="mr-3" src="acros-assets/icons/footers/contact.svg" alt="">
                  <span>+44 20 6024 2068</span>
                </a>
              </li>
              <li>
                <a class="title is-size-6 is-flex is-align-items-center has-text-white" href="#">
                  <img class="mr-3" src="acros-assets/icons/footers/email.svg" alt="">
                  <span>office@neonic.co</span>
                </a>
              </li>
            </ul>
            <ul class="has-text-white">
              <li style="opacity: 0.6;"><small>Neonic Ltd</small></li>
              <li style="opacity: 0.6;"><small>Mokotowska 64</small></li>
              <li style="opacity: 0.6;"><small>01-357 Warsaw</small></li>
            </ul>
          </div>
          <div class="column is-4 mb-4 mb-0-tablet">
            <h5 class="mb-8 title is-size-5 has-text-white">Pages</h5>
            <ul>
              <li class="mb-6"><a class="title is-size-6 has-text-white" href="#">About</a></li>
              <li class="mb-6"><a class="title is-size-6 has-text-white" href="#">Services</a></li>
              <li class="mb-6"><a class="title is-size-6 has-text-white" href="#">Testimonials</a></li>
              <li><a class="title is-size-6 has-text-white" href="#">Contact</a></li>
            </ul>
          </div>
          <div class="column is-4">
            <h5 class="mb-8 title is-size-5 has-text-white">Follow us</h5>
            <ul class="is-flex">
              <li>
                <a href="#">
                  <img src="acros-assets/logo/facebook.svg" alt="">
                </a>
              </li>
              <li class="ml-2">
                <a href="#">
                  <img src="acros-assets/logo/twitter.svg" alt="">
                </a>
              </li>
              <li class="ml-2">
                <a href="#">
                  <img src="acros-assets/logo/instagram.svg" alt="">
                </a>
              </li>
              <li class="ml-2">
                <a href="#">
                  <img src="acros-assets/logo/linkedin.svg" alt="">
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="section-ter py-10">
  <div class="container">
    <div class="columns">
      <div class="column p-4 p-2-tablet">
        <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-narrow p-2-tablet is-hidden-mobile">
        <div class="has-background-light" style="width: 1px; height:100% "></div>
      </div>
      <div class="column p-4 p-2-tablet">
        <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-narrow p-2-tablet is-hidden-mobile">
        <div class="has-background-light" style="width: 1px; height:100% "></div>
      </div>
      <div class="column p-4 p-2-tablet">
        <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-narrow p-2-tablet is-hidden-mobile">
        <div class="has-background-light" style="width: 1px; height:100% "></div>
      </div>
      <div class="column p-4 p-2-tablet">
        <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>
  </div>
</section>

<section class="section py-16">
  <div class="container">
    <div class="columns is-justify-content-space-between is-align-items-center">
      <div class="column mb-12 mb-0-tablet is-narrow-widescreen">
        <img class="image mx-auto ml-0-tablet is-fullwidth" src="acros-assets/images/contacts/location-small.jpg" alt="">
      </div>
      <div class="column">
        <div class="has-mw-xl mx-auto">
          <small class="mb-2 is-block is-uppercase has-text-weight-semibold">
            <span>Feel free to</span>
            <span class="has-text-primary">contact us</span>
          </small>
          <h2 class="title mb-4">Got questions?</h2>
          <p class="subtitle mb-16 has-mw-md">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec.</p>
          <div class="columns">
            <div class="column">
              <img class="mb-8" src="acros-assets/icons/contacts/location.svg" alt="">
              <h5 class="title is-size-5 has-leading-3 has-text-weight-semibold mb-2">Visit us</h5>
              <p>1686, Geraldine Lane</p>
              <p>NY 10013</p>
            </div>
            <div class="column">
              <img class="mb-8" src="acros-assets/icons/contacts/phone.svg" alt="">
              <h5 class="title is-size-5 has-leading-3 has-text-weight-semibold mb-2">Contact info</h5>
              <p>hello@wireframes.org</p>
              <p>+7-843-672-431</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<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">See what this extension tool looks like</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="buttons">
          <a class="mr-4" href="#">
            <img src="acros-assets/icons/applications/app-store.svg" alt="">
          </a>
          <a href="#">
            <img src="acros-assets/icons/applications/google-play.svg" alt="">
          </a>
        </div>
      </div>
      <div class="column">
        <img class="image mx-auto mr-0-tablet" src="acros-assets/images/applications/double-mobile.png" alt="">
      </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 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 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="field mb-0">
            <div class="control">
              <button class="button is-primary is-fullwidth">Sign in</button>
            </div>
          </div>
          <button class="button has-text-grey-darker has-text-weight-normal py-9 is-fullwidth" href="#" style="box-shadow: none; 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-relative py-0 is-hidden-desktop is-clipped">
        <div class="is-absolute is-bottom-0 p-8-mobile p-14-tablet p-20-desktop" style="z-index: 1;">
          <h2 class="title has-text-white mb-4 has-mw-sm">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
          <p class="subtitle has-text-white is-hidden-mobile">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
        </div>
        <img class="image ml-auto-tablet" src="acros-assets/images/forms/work.jpg" alt="">
      </div>
    </div>
  </div>
  <div class="is-absolute is-top-0 is-right-0 is-hidden-touch">
    <div class="is-absolute is-bottom-0 p-8-mobile p-14-tablet p-20-desktop" style="z-index: 1;">
      <h2 class="title has-text-white mb-4 has-mw-sm">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
      <p class="subtitle has-text-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
    </div>
    <img class="image ml-auto-tablet" src="acros-assets/images/forms/work.jpg" alt="">
  </div>
</section>

<section class="section pt-24 pb-16 has-background-white">
  <div class="container">
    <small class="mb-2 is-block is-uppercase has-text-weight-semibold">Projects</small>
    <div class="columns is-align-items-center mb-16">
      <div class="column is-7">
        <h2 class="title">Finish what you started today before you forget to do it.</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>
    <div class="columns">
      <div class="column is-3">
        <ul>
          <li class="title is-size-5 mb-4 is-flex is-align-items-center">
            <span class="mr-4 is-block has-background-primary" style="width:8px; height:2px;"></span>
            <a class="has-text-primary has-text-weight-medium" href="#">Sheridan</a>
          </li>
          <li class="title is-size-5 mb-4"><a class="has-text-grey-darker" href="#">Neonic</a></li>
          <li class="title is-size-5 mb-4"><a class="has-text-grey-darker" href="#">Torf</a></li>
          <li class="title is-size-5"><a class="has-text-grey-darker" href="#">Klakier</a></li>
        </ul>
      </div>
      <div class="column is-9 is-flex is-justify-content-end">
        <div>
          <a class="is-block is-relative mb-6" href="#">
            <div class="is-absolute pl-10" style="top: 50%; transform: translateY(-50%);">
              <p class="title is-size-5 mb-4"><small>#people</small><small class="ml-4">#family</small></p>
              <h3 class="title is-size-3 mb-4">Sheridan</h3>
              <p class="subtitle is-size-6 mb-6 has-mw-xs is-hidden-mobile is-block-tablet">The best way to archive better skills is by challenging yourself with exciting projects.</p>
              <p class="title is-size-6 has-text-weight-medium is-flex is-align-items-center">
                Check project
                <img class="ml-4" src="acros-assets/icons/portfolio/arrow-right-green.svg" alt="">
              </p>
            </div>
            <img src="acros-assets/images/portfolio/diagram-2-wide.jpg" alt="">
          </a>
          <a class="is-block is-relative mb-6" href="#">
            <div class="is-absolute pl-10" style="top: 50%; transform: translateY(-50%);">
              <p class="title is-size-5 mb-4"><small>#people</small><small class="ml-4">#family</small></p>
              <h3 class="title is-size-3 mb-4">Neonic</h3>
              <p class="subtitle is-size-6 mb-6 has-mw-xs is-hidden-mobile is-block-tablet">The best way to archive better skills is by challenging yourself with exciting projects.</p>
              <p class="title is-size-6 has-text-weight-medium is-flex is-align-items-center">
                Check project
                <img class="ml-4" src="acros-assets/icons/portfolio/arrow-right-green.svg" alt="">
              </p>
            </div>
            <img src="acros-assets/images/portfolio/robot-wide.jpg" alt="">
          </a>
          <a class="is-block is-relative" href="#">
            <div class="is-absolute pl-10" style="top: 50%; transform: translateY(-50%);">
              <p class="title is-size-5 mb-4"><small>#people</small><small class="ml-4">#family</small></p>
              <h3 class="title is-size-3 mb-4">Sheridan</h3>
              <p class="subtitle is-size-6 mb-6 has-mw-xs is-hidden-mobile is-block-tablet">The best way to archive better skills is by challenging yourself with exciting projects.</p>
              <p class="title is-size-6 has-text-weight-medium is-flex is-align-items-center">
                Check project
                <img class="ml-4" src="acros-assets/icons/portfolio/arrow-right-green.svg" alt="">
              </p>
            </div>
            <img src="acros-assets/images/portfolio/diagram-2-wide.jpg" alt="">
          </a>
        </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>
          <h4 class="mb-4 title is-size-4 has-text-grey-darker has-mw-md-widescreen pr-5-widescreen">Suspendisse interdum ullamcorper elit, at consequat libero.</h4>
          <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>
          <h4 class="mb-4 title is-size-4 has-text-grey-darker has-mw-md-widescreen pr-5-widescreen">Suspendisse interdum ullamcorper elit, at consequat libero.</h4>
          <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%)">3</span>
            </span>
          </div>
          <h4 class="mb-4 title is-size-4 has-text-grey-darker has-mw-md-widescreen pr-5-widescreen">Suspendisse interdum ullamcorper elit, at consequat libero.</h4>
          <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%)">4</span>
            </span>
          </div>
          <h4 class="mb-4 title is-size-4 has-text-grey-darker has-mw-md-widescreen pr-5-widescreen">Suspendisse interdum ullamcorper elit, at consequat libero.</h4>
          <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 mb-0">
      <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>
          <h4 class="mb-4 title is-size-4 has-text-grey-darker has-mw-md-widescreen pr-5-widescreen">Suspendisse interdum ullamcorper elit, at consequat libero.</h4>
          <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>
          <h4 class="mb-4 title is-size-4 has-text-grey-darker has-mw-md-widescreen pr-5-widescreen">Suspendisse interdum ullamcorper elit, at consequat libero.</h4>
          <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">
  <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">
      <div class="column">
        <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 is-flex is-align-items-center has-text-grey-darker">
          Read more
          <img class="ml-4" src="acros-assets/icons/blog/arrow-right-green.svg" alt="">
        </a>
      </div>
      <div class="column">
        <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 is-flex is-align-items-center has-text-grey-darker">
          Read more
          <img class="ml-4" src="acros-assets/icons/blog/arrow-right-green.svg" alt="">
        </a>
      </div>
      <div class="column">
        <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 is-flex is-align-items-center has-text-grey-darker">
          Read more
          <img class="ml-4" src="acros-assets/icons/blog/arrow-right-green.svg" alt="">
        </a>
      </div>
    </div>
  </div>
</section>

<section class="section py-20 has-background-white-ter">
  <div class="container">
    <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 pt-24 pb-16 is-clipped">
  <div class="container">
    <small class="mb-2 is-block is-uppercase has-text-weight-semibold">Projects</small>
    <div class="columns is-align-items-center mb-16">
      <div class="column is-7">
        <h2 class="title">Finish what you started today before you forget to do it.</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>
    <div class="columns">
      <div class="column is-narrow-widescreen">
        <a class="is-block is-relative" href="#">
          <div class="is-absolute pl-8 pb-8" style="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">Take care of the relationship</h3>
            <p class="title is-size-6 has-text-weight-medium has-text-white is-flex is-align-items-center">
              Check project
              <img class="ml-4" src="acros-assets/icons/portfolio/arrow-right-light.svg" alt="">
            </p>
          </div>
          <img src="acros-assets/images/portfolio/robot-slider.jpg" style="width: 100%;" alt="">
        </a>
      </div>
      <div class="column is-narrow-widescreen">
        <a class="is-block is-relative" href="#">
          <div class="is-absolute pl-8 pb-8" style="z-index: 1; bottom: 0;">
            <p class="has-text-white is-size-6 title mb-2">
              <span>#work</span>
              <span class="ml-4">#productivity</span>
            </p>
            <h3 class="title is-size-3 has-text-white">Say &lsquo;No&rsquo; for procrastination</h3>
            <p class="title is-size-6 has-text-weight-medium has-text-white is-flex is-align-items-center">
              Check project
              <img class="ml-4" src="acros-assets/icons/portfolio/arrow-right-white.svg" alt="">
            </p>
          </div>
          <img src="acros-assets/images/portfolio/work-slider.jpg" style="width: 100%;" alt="">
        </a>
      </div>
      <div class="column is-narrow-widescreen">
        <a class="is-block is-relative" href="#">
          <div class="is-absolute pl-8 pb-8" style="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">Take care of the relationship</h3>
            <p class="title is-size-6 has-text-weight-medium has-text-white is-flex is-align-items-center">
              Check project
              <img class="ml-4" src="acros-assets/icons/portfolio/arrow-right-light.svg" alt="">
            </p>
          </div>
          <img src="acros-assets/images/portfolio/couple-slider.jpg" style="width: 100%;" alt="">
        </a>
      </div>
    </div>
  </div>
</section>

<section class="section py-16 has-background-white-ter">
  <div class="container">
    <div class="columns is-align-items-center mb-16">
      <div class="column mb-5 mb-0-tablet">
        <h2 class="title">The latest version of this excellent product</h2>
      </div>
      <div class="column">
        <div class="buttons"><a class="button is-success is-outlined has-text-grey-darker ml-auto-tablet" href="#">Learn more</a></div>
      </div>
    </div>
    <div class="columns mb-12">
      <div class="column mb-12 mb-0-tablet">
        <img class="mb-8" src="acros-assets/icons/features/auth.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 mb-12 mb-0-tablet">
        <img class="mb-8" src="acros-assets/icons/features/users.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 class="column">
        <img class="mb-8" src="acros-assets/icons/features/exchange.svg" alt="">
        <h5 class="mb-4 title is-size-5 has-text-weight-medium">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>
    <div class="columns">
      <div class="column mb-12 mb-0-tablet">
        <img class="mb-8" src="acros-assets/icons/features/auth.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 mb-12 mb-0-tablet">
        <img class="mb-8" src="acros-assets/icons/features/users.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 class="column">
        <img class="mb-8" src="acros-assets/icons/features/exchange.svg" alt="">
        <h5 class="mb-4 title is-size-5 has-text-weight-medium">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>
  </div>
</section>

<section class="section py-16">
  <div class="container">
    <div class="py-12 px-24" style="background: #E6FAF6; border-radius: 6px;">
      <img class="mb-2" src="acros-assets/icons/testimonials/quote.svg" alt="">
      <h3 class="title is-size-3 has-mw-4xl 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 class="is-flex">
        <img class="mr-6" src="acros-assets/images/testimonials/man-56x56.png" alt="">
        <div>
          <h6 class="title is-size-6 has-leading-3 has-text-weight-medium mb-0">Danny Bailey</h6>
          <p class="has-text-grey-light">CEO &amp; Founder</p>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="section py-14 has-background-grey-darker">
  <div class="container">
    <div class="columns is-4 is-align-items-center mb-0 pb-8" style="border-bottom: 1px solid rgba(255,255,255,0.15)">
      <div class="column mb-12 mb-0-tablet">
        <a class="title is-size-4 has-text-white" href="#">
          <img src="acros-assets/logo/logo-acros-white.svg" alt="" width="auto">
        </a>
      </div>
      <div class="column is-8">
        <ul class="is-flex-tablet is-justify-content-end">
          <li class="mb-6 mb-0-tablet"><a class="title is-size-6 has-text-white" href="#">About</a></li>
          <li class="mb-6 mb-0-tablet ml-16-tablet"><a class="title is-size-6 has-text-white" href="#">Services</a></li>
          <li class="mb-6 mb-0-tablet ml-16-tablet"><a class="title is-size-6 has-text-white" href="#">Testimonials</a></li>
          <li><a class="title is-size-6 has-text-white ml-16-tablet" href="#">Contact</a></li>
        </ul>
      </div>
    </div>
    <div class="columns is-align-items-center mb-0 pt-14">
      <div class="column">
        <ul class="is-flex">
          <li>
            <a href="#">
              <img src="acros-assets/logo/facebook.svg" alt="">
            </a>
          </li>
          <li class="ml-2">
            <a href="#">
              <img src="acros-assets/logo/twitter.svg" alt="">
            </a>
          </li>
          <li class="ml-2">
            <a href="#">
              <img src="acros-assets/logo/instagram.svg" alt="">
            </a>
          </li>
          <li class="ml-2">
            <a href="#">
              <img src="acros-assets/logo/github.svg" alt="">
            </a>
          </li>
          <li class="ml-2">
            <a href="#">
              <img src="acros-assets/logo/linkedin.svg" alt="">
            </a>
          </li>
        </ul>
      </div>
      <div class="column has-text-right">
        <p class="mb-0 title is-size-6 has-text-white" style="opacity: 0.5;">2021 &copy; Shuffle</p>
      </div>
    </div>
  </div>
</section>

<section class="section py-16 has-background-white-ter">
  <div class="container">
    <div class="columns is-align-items-center">
      <div class="column mb-12 mb-0-tablet">
        <small class="mb-4 is-block has-text-grey-darker is-uppercase has-text-weight-semibold">
          <span>Sign up to our</span>
          <span class="has-text-primary">newsletter</span>
        </small>
        <h2 class="title has-mw-md">The standard chunk of Lorem Ipsum used since the 1500s</h2>
      </div>
      <div class="column">
        <div class="has-mw-md mx-auto mr-0-tablet has-background-white py-10 px-12" style="border-radius: 6px;">
          <h4 class="title is-size-4 has-text-grey-darker has-mw-xs has-text-weight-medium mb-4">Sign up to our newsletter</h4>
          <p class="has-text-grey-darker mb-8">There are many variations of passages of Lorem Ipsum available</p>
          <div class="field mb-4">
            <div class="control">
              <input class="input" type="text" placeholder="Name">
            </div>
          </div>
          <div class="field mb-4">
            <div class="control">
              <input class="input" type="text" placeholder="E-mail">
            </div>
          </div>
          <div class="field">
            <div class="control">
              <button class="button is-primary is-fullwidth">Sign up</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="section py-16">
  <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="z-index: -1; 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-ter is-absolute is-left-0 is-top-0" style="z-index: -1; width: 100%; height: 100%; border-radius: 4px;"></div>
        <div class="columns is-align-items-center">
          <div class="column is-narrow pb-1">
            <div class="has-background-white 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-ter is-absolute is-left-0 is-top-0" style="z-index: -1; width: 100%; height: 100%; border-radius: 4px;"></div>
        <div class="columns is-align-items-center">
          <div class="column is-narrow pb-1">
            <div class="has-background-white 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-ter is-absolute is-left-0 is-top-0" style="z-index: -1; width: 100%; height: 100%; border-radius: 4px;"></div>
        <div class="columns is-align-items-center">
          <div class="column is-narrow pb-1">
            <div class="has-background-white 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-ter is-absolute is-left-0 is-top-0" style="z-index: -1; width: 100%; height: 100%; border-radius: 4px;"></div>
        <div class="columns is-align-items-center">
          <div class="column is-narrow pb-1">
            <div class="has-background-white 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-light">
  <div class="container">
    <small class="mb-2 is-block is-uppercase has-text-weight-semibold">Pricing</small>
    <div class="columns mb-12 is-align-items-center">
      <div class="column mb-6 mb-0-tablet">
        <h2 class="title">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
      </div>
      <div class="column is-flex-tablet is-justify-content-end">
        <div class="is-flex is-align-items-center">
          <a class="title is-size-6 mb-0" style="opacity: 0.75;" href="#">Annualy</a>
          <a class="is-relative py-5 px-8 mx-6" style="border-radius: 20px; background: #B3EFE4;">
            <div class="is-absolute has-background-primary p-3" style="border-radius: 50%; top: 50%; transform: translateY(-50%);" href="#"></div>
          </a>
          <a class="title is-size-6 has-text-weight-medium" href="#">Monthly</a>
        </div>
      </div>
    </div>
    <div class="columns has-mw-3xl-tablet mx-auto">
      <div class="column has-text-centered p-8 mb-12 mb-0-tablet has-background-white mr-4-tablet" style="border-radius: 6px;">
        <h6 class="mb-2 title is-size-6 has-text-weight-medium">Free</h6>
        <h3 class="title is-size-3 has-text-weight-medium mb-8 is-flex is-justify-content-center">
          <span class="is-size-6 mr-1 mt-1">$</span>
          0
        </h3>
        <div class="buttons mb-8"><a class="button button is-primary is-outlined py-7 mb-0 is-fullwidth" href="#">Get started</a></div>
        <ul>
          <li class="mb-2 is-flex is-align-items-center has-grey-darker">
            <img class="mr-3" src="acros-assets/icons/pricing/check-circle.svg" alt="">
            <small>Complete documentation</small>
          </li>
          <li class="mb-2 is-flex is-align-items-center has-grey-darker">
            <img class="mr-3" src="acros-assets/icons/pricing/check-circle.svg" alt="">
            <small>Working materials in Figma</small>
          </li>
          <li class="mb-2 is-flex is-align-items-center has-grey-darker">
            <img class="mr-3" src="acros-assets/icons/pricing/check-circle.svg" alt="">
            <small>100GB cloud storage</small>
          </li>
          <li class="mb-2 is-flex is-align-items-center has-text-grey-lighter">
            <img class="mr-3" src="acros-assets/icons/pricing/check-circle-grey.svg" alt="">
            <small>500 team members</small>
          </li>
          <li class="is-flex is-align-items-center has-text-grey-lighter">
            <img class="mr-3" src="acros-assets/icons/pricing/check-circle-grey.svg" alt="">
            <small>Premium support</small>
          </li>
        </ul>
      </div>
      <div class="column is-relative has-text-centered p-8 has-background-white ml-4-tablet" style="border: 2px solid #00CBA6; border-radius: 6px;">
        <img class="is-absolute is-left-0 is-top-0" style="top: -6px; left: -6px;" src="acros-assets/icons/pricing/bestseller.svg" alt="">
        <h6 class="mb-2 title is-size-6 has-text-weight-medium">Premium</h6>
        <h3 class="title is-size-3 has-text-weight-medium mb-8 is-flex is-justify-content-center">
          <span class="is-size-6 mr-1 mt-1">$</span>
          14,99
        </h3>
        <div class="buttons mb-8"><a class="button button is-primary py-7 mb-0 is-fullwidth" href="#">Try it for free</a></div>
        <ul>
          <li class="mb-2 is-flex is-align-items-center has-grey-darker">
            <img class="mr-3" src="acros-assets/icons/pricing/check-circle.svg" alt="">
            <small>Complete documentation</small>
          </li>
          <li class="mb-2 is-flex is-align-items-center has-grey-darker">
            <img class="mr-3" src="acros-assets/icons/pricing/check-circle.svg" alt="">
            <small>Working materials in Figma</small>
          </li>
          <li class="mb-2 is-flex is-align-items-center has-grey-darker">
            <img class="mr-3" src="acros-assets/icons/pricing/check-circle.svg" alt="">
            <small>100GB cloud storage</small>
          </li>
          <li class="mb-2 is-flex is-align-items-center has-grey-darker">
            <img class="mr-3" src="acros-assets/icons/pricing/check-circle.svg" alt="">
            <small>500 team members</small>
          </li>
          <li class="is-flex is-align-items-center has-grey-darker">
            <img class="mr-3" src="acros-assets/icons/pricing/check-circle.svg" alt="">
            <small>Premium support</small>
          </li>
        </ul>
      </div>
    </div>
  </div>
</section>

<section class="section py-12">
  <div class="container">
    <nav class="breadcrumb has-succeeds-separator mb-8 py-4" aria-label="breadcrumbs">
      <ul class="is-align-items-center is-uppercase has-text-weight-medium is-size-7">
        <li><a class="has-text-grey-darker" href="#">Home</a></li>
        <li><a class="has-text-grey-darker" href="#">Blog</a></li>
        <li><a class="has-text-grey-darker" href="#" style="opacity: 0.5;">Article</a></li>
      </ul>
    </nav>
    <div class="has-mw-3xl mx-auto">
      <span class="is-block title is-size-5 has-text-primary mb-2">#family</span>
      <h2 class="title has-mw-3xl mb-8">The generated Lorem Ipsum is therefore always free from repetition</h2>
      <div class="columns is-vcentered is-mobile mb-12">
        <div class="column is-narrow">
          <div class="is-flex is-align-items-center">
            <img class="mr-2" src="acros-assets/images/blog-content/man-32x32.png" alt="">
            <small class="has-text-weight-medium">Denny Bailey</small>
          </div>
        </div>
        <div class="column is-narrow px-5">
          <div class="has-background-grey-darker" style="width: 1px; height: 32px; opacity: 0.25;"></div>
        </div>
        <div class="column is-narrow">
          <div class="is-flex is-align-items-center">
            <img class="mr-2" src="acros-assets/icons/blog-content/calendar.svg" alt="">
            <small class="has-text-weight-medium">27 Feb, 21</small>
          </div>
        </div>
      </div>
    </div>
    <img class="image is-fullwidth" src="acros-assets/images/blog-content/people-1100x480.jpg" alt="">
    <div class="has-mw-3xl py-12 mx-auto">
      <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 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>