Bulma Components

<section class="section py-16">
  <div class="container">
    <small class="mb-2 is-block is-uppercase has-text-weight-semibold">Faq</small>
    <h2 class="title">Questions and Answers</h2>
    <p class="subtitle 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-white-ter" style="border-radius: 6px;">
          <img class="mb-6" src="acros-assets/icons/faq/key.svg" alt="">
          <h5 class="title is-size-5 has-leading-3 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 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 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 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">

<section class="section py-16 has-background-white-ter">
  <div class="container">
    <div class="columns is-align-items-center">
      <div class="column is-narrow mb-12 mb-0-tablet">
        <img class="image mx-auto ml-0-tablet is-fullwidth" src="acros-assets/images/http-codes/loupe.jpg" alt="">
      </div>
      <div class="column">
        <div class="has-mw-md-tablet mx-auto">
          <small class="is-block is-uppercase has-leading-4 has-text-weight-semibold mb-2">
            <span>Error</span>
            <span class="has-text-primary">404</span>
          </small>
          <h2 class="title">Page not found</h2>
          <p class="subtitle mb-10">Sorry! We are unable to find the page you are looking for</p>
          <div class="buttons"><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>
    </div>
  </div>
</section>

<section class="section py-16 has-background-white-ter">
  <div class="container">
    <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 has-mw-xl">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
    <p class="subtitle is-size-6 has-mw-md mb-20">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin</p>
    <div class="columns mb-9 mb-3-tablet">
      <div class="column mb-6 mb-0-tablet">
        <div class="has-background-white has-text-centered pt-10 pb-8" style="border-radius: 6px;">
          <img class="mb-8" src="acros-assets/images/teams/man-1-medium-circle.png" alt="">
          <h5 class="title is-size-5 has-leading-3 has-text-weight-medium mb-2">Steven Johson</h5>
          <p class="has-text-grey-light mb-6">CEO &amp; Founder</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>

<section class="section py-20 has-background-primary">
  <div class="container">
    <div class="columns is-align-items-center">
      <div class="column is-4-tablet is-4-desktop">
        <h2 class="title has-text-white mb-4 has-mw-xs">Sign up to our newsletter</h2>
      </div>
      <div class="column is-3-tablet is-4-desktop mb-12 mb-0-tablet">
        <p class="subtitle has-text-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
      <div class="column is-4-tablet is-4-desktop">
        <div class="columns">
          <div class="column">
            <div class="field">
              <div class="control">
                <input class="input is-primary has-background-white-ter" type="text" placeholder="Type your e-mail">
              </div>
            </div>
          </div>
          <div class="column is-3">
            <div class="field">
              <div class="control">
                <button class="button is-white has-text-grey-darker">Sign up</button>
              </div>
            </div>

<section class="section py-16 has-background-white-ter">
  <div class="container">
    <div class="columns mb-16">
      <div class="column">
        <small class="mb-2 is-block is-uppercase has-text-weight-semibold has-text-grey-darker">
          <span>How it</span>
          <span class="has-text-primary">works</span>
        </small>
        <h2 class="title has-mw-lg">The latest version of this excellent product is waiting to deploy</h2>
        <p class="subtitle has-mw-md">If you have ever wondered how to develop your brand, this is the place for you.</p>
      </div>
      <div class="column is-narrow-widescreen">
        <img class="image is-fullwidth" src="acros-assets/images/how-it-works/work.jpg" alt="">
      </div>
    </div>
    <div class="columns mb-16">
      <div class="column mb-12 mb-0-tablet">
        <div class="columns">
          <div class="column is-narrow py-0 pr-7-tablet">
            <div class="is-relative mb-9 is-inline-block">
              <img src="acros-assets/icons/how-it-works/security-small.svg" alt="">
              <span class="is-block has-text-weight-semibold has-background-white-bis has-text-grey-darker is-absolute" 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>

<section class="section py-16">
  <div class="container">
    <div class="columns is-centered is-vcentered">
      <div class="column is-narrow-widescreen">
        <a class="is-block is-relative" href="#">
          <div class="is-absolute p-8 is-bottom-0" style="z-index: 1;">
            <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 mb-4">Take care of the relationship</h3>
            <p class="subtitle has-text-white has-mw-sm mb-6 is-hidden-touch">The best way to archive better skills is by challenging yourself with exciting projects on the side.</p>
            <p class="title is-size-6 has-text-weight-medium has-text-white is-flex is-align-items-center">
              Read more
              <img class="ml-4" src="acros-assets/icons/blog/arrow-right-light.svg" alt="">
            </p>
          </div>
          <img class="image is-fullwidth" src="acros-assets/images/blog/robot-540x540.jpg" alt="">
        </a>
      </div>
      <div class="column is-narrow-widescreen">
        <a class="is-block is-relative" href="#">
          <div class="is-absolute p-8 is-bottom-0" style="z-index: 1;">
            <p class="has-text-white is-size-6 title mb-2">

<section class="section py-12">
  <div class="container">
    <nav class="breadcrumb has-succeeds-separator mb-4 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="columns is-align-items-center is-justify-content-space-between">
      <div class="column is-5 mb-12 mb-0-tablet">
        <span class="is-block title is-size-5 has-text-primary mb-2">#family</span>
        <h2 class="title mb-8 has-mw-md-widescreen">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="has-background-white-ter p-8" style="border-radius: 6px;">
      <div class="columns is-align-items-center">
        <div class="column is-5 mb-12 mb-0-tablet is-narrow-widescreen">
          <img class="image mx-auto ml-0-tablet is-fullwidth" src="acros-assets/images/testimonials/man-small.jpg" alt="">
        </div>
        <div class="column">
          <div class="has-mw-xl mx-auto">
            <img class="mb-2" src="acros-assets/icons/testimonials/quote.svg" alt="">
            <h4 class="title is-size-4 has-mw-xl">The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</h4>
            <p class="subtitle is-size-6 mb-10 has-mw-sm">If you have ever wondered how to develop your brand, this is the place for you.</p>
            <div class="is-flex is-justify-content-space-between">
              <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-text-weight-medium mb-1">Denny Bailey</h6>
                  <p class="has-text-grey-light">CEO &amp; Founder</p>
                </div>
              </div>
              <ul class="is-flex is-align-items-center mr-24-widescreen">
                <li><a class="is-block" style="border: 1px solid #2B3031; width: 16px; height:16px; border-radius: 50%;" href="#"></a></li>
                <li><a class="mx-4 is-block has-background-grey-darker" style="width:4px; height:4px; border-radius: 50%;" href="#"></a></li>
                <li><a class="is-block has-background-grey-darker" style="width:4px; height:4px; border-radius: 50%;" href="#"></a></li>

<section>
  <nav class="navbar has-background-grey-darker">
    <div class="container py-2 px-8-mobile">
      <div class="is-flex is-justify-content-between is-align-items-center" style="width: 100%;">
        <button class="button is-ghost">
          <img src="acros-assets/icons/navigations/search-circle-black.svg" alt="">
        </button>
        <a class="mx-auto" href="#">
          <span class="navbar-item px-0 title is-size-4 has-text-white">
            <img src="acros-assets/icons/navigations/logo-acros-center-white.svg" alt="" width="auto" style="max-height: initial;">
          </span>
        </a>
        <div>
          <button class="button navbar-menu-open is-ghost has-text-dark">
            <img src="acros-assets/icons/navigations/hamburger-circle-black.svg" alt="" style="max-height: initial;">
          </button>
        </div>
      </div>
    </div>
  </nav>
  <div class="navbar-side is-hidden is-fixed is-top-0 is-left-0 has-background-blur" style="z-index: 50; width:100%; height: 100%;">
    <div class="is-absolute" style="z-index: -1;"></div>
    <div class="container is-relative">
      <a class="navbar-close is-absolute is-right-0 mt-6 mr-6" href="#">

<section class="section py-16 has-background-white-ter">
  <div class="container">
    <div class="columns">
      <div class="column">
        <div class="has-text-centered has-text-left-tablet">
          <img class="mb-6" src="acros-assets/icons/stats/percent.svg" alt="">
          <h4 class="title is-size-4 mb-2">Looked</h4>
          <p class="subtitle is-size-6">Dolor sit amet consectutar</p>
        </div>
      </div>
      <div class="column">
        <div class="has-text-centered has-text-left-tablet">
          <img class="mb-6" src="acros-assets/icons/stats/percent.svg" alt="">
          <h4 class="title is-size-4 mb-2">Reproduced</h4>
          <p class="subtitle is-size-6">Obscure Latin words, consectetur</p>
        </div>
      </div>
      <div class="column">
        <div class="has-text-centered has-text-left-tablet">
          <img class="mb-6" src="acros-assets/icons/stats/percent.svg" alt="">
          <h4 class="title is-size-4 mb-2">Generated</h4>
          <p class="subtitle is-size-6">The first line of Lorem Ipsum</p>
        </div>
      </div>

<section class="section py-16 has-background-white-ter">
  <div class="container">
    <small class="mb-2 is-block is-uppercase has-text-weight-semibold">Pricing</small>
    <div class="columns is-6 mb-11 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-6 is-flex-tablet is-justify-content-end">
        <div class="is-inline-block p-2 has-background-light" style="border-radius: 4px;"><a class="button is-white px-8 py-6 mb-0 has-text-primary has-background-white has-text-weight-semibold" style="border-radius: 2px;">Monthly</a><a class="button is-light px-8 py-6 has-text-grey-dark text-decoration-none" style="border-radius: 2px;">Yearly</a></div>
      </div>
    </div>
    <div class="columns has-mw-5xl mx-auto is-align-items-center">
      <div class="column is-relative has-text-centered p-8 mb-12 mb-0-tablet" style="border-radius: 6px;">
        <div class="is-absolute has-background-primary is-left-0 is-top-0" style="border-radius: 6px; width: 100%; height:100%; opacity: 0.1;"></div>
        <div class="is-relative" style="z-index: 1;">
          <h5 class="mb-2 title is-size-5 has-text-weight-medium">Starter</h5>
          <h3 class="title is-size-3 has-text-weight-medium mb-20 is-flex is-justify-content-center">
            <span class="is-size-6 mr-1 mt-1">$</span>
            9,99
          </h3>
          <ul class="mb-8">
            <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>

<section class="is-relative section py-16">
  <div class="container">
    <img class="is-absolute" src="acros-assets/images/call-to-action/cta-2-bg.png">
    <div class="has-mw-2xl mx-auto has-text-centered is-relative" style="z-index: 1;">
      <small class="is-block has-text-weight-semibold is-uppercase mb-2">New feature</small>
      <h2 class="mb-6 title">
        <span>Take quick action that</span>
        <span class="has-text-primary">increases</span>
        <span>your brand&apos;s regular profit.</span>
      </h2>
      <p class="subtitle mb-12">If you have ever wondered how to develop your brand, this is the place for you. Take a&nbsp;big step forward in growing your business with this great tool.</p>
      <div class="buttons is-centered"><a class="button is-primary has-text-white mr-3" href="#">Active Demo</a><a class="button is-dark is-outlined" href="#">Share with friends</a></div>
    </div>
  </div>
</section>

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

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

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

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

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