Bulma Components

<section class="section py-6 has-background-grey-darker is-fixed is-left-0 is-bottom-0" style="width: 100%; z-index: 50;">
  <div class="container">
    <div class="columns is-align-items-center">
      <div class="column pr-4 is-narrow">
        <img src="acros-assets/icons/cookies/cookie.svg" alt="">
      </div>
      <div class="column pl-4">
        <h5 class="title is-size-5 has-text-white has-text-weight-medium mb-2">Cookie Policy</h5>
        <p class="subtitle is-size-6 has-text-white mb-0">We use cookies to personalise content, to provide social media features and to analyse our traffic.</p>
        <p class="subtitle is-size-6 has-text-white">We also share information about your use of our site with our social media, advertising and analytics partners.</p>
      </div>
      <div class="column is-narrow">
        <div class="buttons"><a class="button is-primary py-6 mr-4" href="#">Accept</a><a class="button is-white is-outlined py-6" href="#">Decline</a></div>
      </div>
    </div>
  </div>
</section>

<section class="section py-20 has-background-white-ter">
  <div class="container">
    <div class="columns">
      <div class="column px-4">
        <div class="has-text-centered has-text-left-tablet">
          <h2 class="title mb-4">4.5K+</h2>
          <p class="subtitle is-size-6">Lorem Ipsum generators on the Internet</p>
        </div>
      </div>
      <div class="column px-4">
        <div class="has-text-centered has-text-left-tablet">
          <h2 class="title mb-4">400+</h2>
          <p class="subtitle is-size-6">Contrary to popular belief, Lorem Ipsum</p>
        </div>
      </div>
      <div class="column px-4">
        <div class="has-text-centered has-text-left-tablet">
          <h2 class="title mb-4">1K+</h2>
          <p class="subtitle is-size-6">De Finibus Bonorum et Malorum</p>
        </div>
      </div>
      <div class="column px-4">
        <div class="has-text-centered has-text-left-tablet">
          <h2 class="title mb-4">4,5K+</h2>

<section class="is-fixed is-left-0 is-bottom-0 has-mw-md p-6" style="z-index: 50;">
  <div class="has-background-grey-darker p-8" style="border-radius: 6px;">
    <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 class="buttons"><a class="button is-primary py-6 mr-4" href="#">Accept</a><a class="button is-white is-outlined py-6" href="#">Decline</a></div>
  </div>
</section>

<section class="section py-16 has-background-grey-darker">
  <div class="container">
    <img class="mb-2" src="acros-assets/icons/testimonials/quote.svg" alt="">
    <h3 class="title is-size-3 has-text-white 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-white has-text-weight-medium mb-0">Danny Bailey</h6>
        <p class="has-text-grey-light">CEO &amp; Founder</p>
      </div>
    </div>
  </div>
</section>

<section class="section py-16">
  <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">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>
    <div class="columns mb-0 is-justify-content-center is-multiline">
      <div class="column is-narrow">
        <a href="#">
          <img class="image mx-auto" src="acros-assets/images/portfolio/diagram.jpg" alt="">
        </a>
      </div>
      <div class="column is-narrow is-relative">
        <a href="#">
          <div class="is-absolute pl-10" style="top: 50%; transform: translateY(-50%);">
            <p class="is-size-6 title mb-2">
              <span>#people</span>
              <span class="ml-4">#family</span>
            </p>

<div>
  <section class="section py-20 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"><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>
      </div>
    </div>
  </section>
  <img class="image is-fullwidth" src="acros-assets/images/http-codes/mountains-row.jpg" alt="">
</div>

<section class="section pt-10-tablet pb-12-tablet py-14-mobile has-background-grey-darker">
  <div class="container">
    <div class="columns is-4 is-align-items-center mb-10">
      <div class="column is-4">
        <ul class="is-flex-tablet">
          <li class="mb-6 mb-0-tablet"><a class="title is-size-6 has-text-white" href="#">About</a></li>
          <li class="ml-16-tablet"><a class="title is-size-6 has-text-white" href="#">Company</a></li>
        </ul>
      </div>
      <div class="column is-4 is-flex-tablet is-justify-content-center">
        <a class="title is-size-4 has-text-white" href="#">
          <img src="acros-assets/logo/logo-acros-column-white.svg" alt="" width="auto">
        </a>
      </div>
      <div class="column is-4">
        <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="#">Services</a></li>
          <li class="ml-16-tablet"><a class="title is-size-6 has-text-white" href="#">Testimonials</a></li>
        </ul>
      </div>
    </div>
    <div class="columns is-align-items-center mb-0">
      <div class="column is-4">
        <p class="mb-0 title is-size-6 has-text-white" style="opacity: 0.5;">2021 &copy; Shuffle</p>

<section class="section py-16 has-background-white-ter">
  <div class="container">
    <img class="is-absolute" src="acros-assets/images/call-to-action/cta4-bg.png" alt="">
    <div class="columns is-align-items-center is-relative" style="z-index: 1;">
      <div class="column mb-10">
        <small class="is-block has-text-weight-semibold is-uppercase mb-2">
          <span>Our</span>
          <span class="has-text-primary">features</span>
        </small>
        <h2 class="mb-10 title has-mw-md">The latest version of this excellent product is waiting to deploy</h2>
        <div class="buttons"><a class="button is-primary" href="#">Try demo</a></div>
      </div>
      <div class="column is-flex-desktop is-align-items-center is-justify-content-flex-end is-relative" style="z-index: 1;">
        <div class="mb-8 mb-0-desktop mr-8-desktop">
          <div class="mb-8 has-background-white p-6 mx-auto" style="border-radius: 4px;">
            <img class="mb-4" src="acros-assets/icons/call-to-action/changes.svg" alt="">
            <h6 class="title is-size-6 has-text-weight-semibold mb-2">Easy changes</h6>
            <small>Take care to develop resources continually and integrity them with previous projects.</small>
          </div>
          <div class="has-background-white p-6 mx-auto" style="border-radius: 4px;">
            <img class="mb-4" src="acros-assets/icons/call-to-action/sharable.svg" alt="">
            <h6 class="title is-size-6 has-text-weight-semibold mb-2">Sharable showcase</h6>
            <small>Take care to develop resources continually and integrity them with previous projects.</small>
          </div>

<section class="section pt-16 pb-8 has-background-white-ter">
  <div class="is-relative container">
    <img class="is-absolute" src="acros-assets/images/features/features-5-bg.png" style="top: 50%; transform: translateY(-50%);" alt="">
    <h2 class="title has-mw-2xl">The latest version of this excellent product is waiting to deploy</h2>
    <p class="subtitle mb-12">If you have ever wondered how to develop your brand, this is the place for you.</p>
    <div class="columns mb-0 is-relative" style="z-index: 1;">
      <div class="column">
        <div class="has-background-white p-8" style="border-radius: 4px;">
          <img class="mb-8" src="acros-assets/icons/features/exchange-green-light.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="column">
        <div class="has-background-white p-8" style="border-radius: 4px;">
          <img class="mb-8" src="acros-assets/icons/features/updates-green-light.svg" alt="">
          <h5 class="mb-4 title is-size-5 has-text-weight-medium">Frequent authentication</h5>
          <p class="subtitle is-size-6">Take care to develop resources continually and integrity them with previous projects.</p>
        </div>
      </div>
      <div class="column">
        <div class="has-background-white p-8" style="border-radius: 4px;">
          <img class="mb-8" src="acros-assets/icons/features/users-green-light.svg" alt="">
          <h5 class="mb-4 title is-size-5 has-text-weight-medium">List of regular users</h5>

<section class="section py-16 has-background-grey-darker">
  <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-white is-uppercase has-text-weight-semibold">
          <span>Sign up to our</span>
          <span class="has-text-primary">newsletter</span>
        </small>
        <h2 class="title has-text-white 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>

<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">
        <p class="has-mw-md">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 is-align-items-center">
      <div class="column is-4 mb-6 mb-0-tablet">
        <h6 class="title is-size-6 has-text-weight-medium">It uses a dictionary of over</h6>
        <ul>
          <li class="mb-4 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-4 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-4 is-flex is-align-items-center has-grey-darker">

<section class="section py-16">
  <div class="container">
    <div class="columns">
      <div class="column mb-12 mb-0-tablet">
        <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 has-mw-sm">Let&rsquo;s discuss about your needs</h2>
        <p class="subtitle has-mw-md mb-12">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec.</p>
        <div class="columns">
          <div class="column is-4">
            <img class="mb-6" src="acros-assets/icons/contacts/location.svg" alt="">
            <h6 class="title is-size-5 has-text-weight-semibold mb-2">Address</h6>
            <p class="is-block">1686, Geraldine Lane</p>
            <p class="is-block">New York, NY 10013</p>
          </div>
          <div class="column is-4">
            <img class="mb-6" src="acros-assets/icons/contacts/phone.svg" alt="">
            <h6 class="title is-size-5 has-text-weight-semibold mb-2">Contact info</h6>
            <p class="is-block">hello@wireframes.org</p>
            <p class="is-block">+7-843-672-431</p>
          </div>
        </div>

<section>
  <nav class="navbar py-1 has-background-grey-darker">
    <div class="container px-8-mobile">
      <div class="navbar-brand is-align-items-center">
        <a class="navbar-item" href="#">
          <span class="navbar-item px-0 title is-size-4 has-text-white">
            <img src="acros-assets/logo/logo-acros-white.svg" alt="" width="auto" style="max-height: initial;">
          </span>
        </a>
        <a class="navbar-menu-open navbar-burger" role="button" type="button" data-toggle="side-menu">
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </a>
      </div>
      <div class="navbar-menu">
        <div class="navbar-start ml-auto mr-0">
          <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>

<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>
    <img class="mb-8 image is-fullwidth" src="acros-assets/images/blog-content/work-1100x400.jpg" alt="">
    <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">
        <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">

<section class="section py-16">
  <div class="container">
    <div class="columns mb-12">
      <div class="column">
        <small class="is-block is-uppercase has-text-weight-semibold mb-2 has-text-grey-lighter" style="letter-spacing: 0.05em">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="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 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 has-text-grey-darker is-flex is-align-items-center">
          Read more
          <img class="ml-4" src="acros-assets/icons/blog/arrow-right-green.svg" alt="">
        </a>
      </div>
      <div class="column">
        <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>

<section class="section py-16">
  <div class="container">
    <div class="columns is-align-items-center mb-12">
      <div class="column">
        <small class="mb-2 is-block is-uppercase has-text-weight-semibold">
          <span>Our</span>
          <span class="has-text-primary">team</span>
        </small>
        <h2 class="title pr-20 mb-0">Meet our awesome team.</h2>
        <h2 class="title pr-20">Lorem ipsum dolor sit amet boulique</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.</p>
      </div>
    </div>
    <div class="columns is-centered is-vcentered mb-6 mb-8-tablet">
      <div class="column mb-6 mb-0-tablet is-narrow-widescreen">
        <img class="mb-4" src="acros-assets/images/teams/man-1-medium.jpg" style="width: 100%;" alt="">
        <h5 class="title is-size-5 has-leading-3 has-text-weight-medium mb-0">Steven Johson</h5>
        <p class="has-text-grey-light mb-4">CEO &amp; Founder</p>
        <ul class="is-flex">
          <li>
            <a href="#">
              <img src="acros-assets/icons/teams/twitter.svg" alt="">

<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">

<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">

<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">

<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>