Bulma Components

<section class="section py-16 has-background-white-ter">
  <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" style="border-radius: 6px;">
          <img class="mb-6" src="acros-assets/icons/faq/key-green.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 is-clipped is-relative">
  <div class="container">
    <small class="mb-2 is-block is-uppercase has-text-weight-semibold">
      <span>Our</span>
      <span class="has-text-primary">testimonials</span>
    </small>
    <h2 class="title mb-12">What people says about us</h2>
    <div class="columns -ml-96-widescreen" style="max-width: 1365px;">
      <div class="column is-4-tablet">
        <div class="has-background-white py-6 px-12" style="border-radius: 6px;">
          <img src="acros-assets/icons/testimonials/quote-24x24.svg" alt="">
          <h5 class="title is-size-5 mb-4">The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</h5>
          <div class="is-flex is-align-items-center">
            <img class="mr-4" src="acros-assets/images/testimonials/man-32x32.png" alt="">
            <div>
              <h6 class="is-size-6 has-text-weight-medium mb-0"><small>Denny Bailey</small></h6>
              <p class="has-text-grey-light"><small>CEO &amp; Founder</small></p>
            </div>
          </div>
        </div>
      </div>
      <div class="column is-4-tablet">
        <div class="has-background-white py-6 px-12" style="border-radius: 6px;">
          <img src="acros-assets/icons/testimonials/quote-24x24.svg" alt="">

<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-align-items-center mb-12">
      <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="control is-align-items-center is-flex">
          <div class="is-flex is-align-items-center">
            <label class="mb-0 title has-text-weight-medium is-size-6 radio">
              <input type="radio" name="answer" checked="">
              <span>Lifetime license</span>
            </label>
            <div class="ml-2 mt-1 px-2" style="background: #CCF5ED; border-radius: 4px;">
              <div class="has-text-weight-medium">$150</div>
            </div>
          </div>
          <div class="ml-10 is-flex is-align-items-center">
            <label class="mb-0 title radio is-size-6">
              <input type="radio" name="answer">
              <span>Monthly license</span>
            </label>
            <div class="ml-2 mt-1 px-2 has-background-light" style="border-radius: 4px;">

<section class="is-fixed is-bottom-0 is-left-0" style="z-index: 50; width: 100%; height: 100%;">
  <div class="container">
    <div class="has-background-white p-8" style="border-radius: 6px;">
      <div class="columns">
        <div class="column is-narrow">
          <h4 class="title is-size-4 has-text-grey-darker has-text-weight-medium">Cookie Policy</h4>
        </div>
        <div class="column is-7"><small class="has-text-grey-darker">We use cookies to personalise content, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners. If you want to change your cookie setting, please see the &lsquo;how to reject cookies&apos; section of our . Otherwise, if you agree to our use of cookies, please continue to use our website.</small></div>
        <div class="column">
          <div class="buttons"><a class="button is-primary mr-0 is-fullwidth" href="#">Accept</a><a class="button is-dark is-outlined is-fullwidth" href="#">Decline</a></div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="section-ter py-10">
  <div class="container">
    <h5 class="title is-size-5 has-text-weight-medium ml-1">Trusted by brands all over the world</h5>
    <div class="columns">
      <div class="column p-4 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>

<section class="section py-32" style="background-image: url('acros-assets/images/call-to-action/cta-5-bg.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center;">
  <div class="container">
    <div class="has-mw-xl">
      <h2 class="title has-text-white">Expand your brand with this excellent extension tool</h2>
      <p class="mb-10 subtitle has-text-white">With this tool, you will get much better results at work and develop new skills. Will you take the risk of trying the latest version of our application?</p>
      <div class="buttons"><a class="button is-primary" href="#">Try demo</a><a class="button is-white is-outlined ml-2" href="#">Learn more</a></div>
    </div>
  </div>
</section>

<section class="section py-16 is-relative has-background-white-ter">
  <div class="is-absolute is-left-0 is-top-0 has-background-grey-darker" style="width: 100%; height:50%; opacity: 0.02;"></div>
  <div class="container">
    <div class="has-mw-xl mx-auto has-background-white p-10 px-24-tablet" style="border-radius: 6px;">
      <small class="mb-2 is-block has-text-grey-darker is-uppercase has-text-weight-semibold">
        <span>Create an</span>
        <span class="has-text-primary">account</span>
      </small>
      <h2 class="title">Join our community</h2>
      <div class="field mb-4">
        <label class="label"><small>E-mail address</small></label>
        <div class="control">
          <input class="input" type="text" placeholder="E-mail">
        </div>
      </div>
      <div class="field mb-6">
        <label class="label"><small>Password</small></label>
        <div class="control">
          <input class="input" type="password" placeholder="Password">
        </div>
      </div>
      <div class="field mb-0">
        <div class="control">
          <button class="button is-primary is-fullwidth">Sign in</button>

<section class="section py-12">
  <div class="container">
    <div class="has-mw-3xl mx-auto">
      <h4 class="title is-size-4 has-text-weight-medium mb-8">When I was a developer, I often had a hundred questions when</h4>
      <h5 class="subtitle has-text-weight-medium mb-4">Building websites from wireframes that I had received. Some of those questions were:</h5>
      <ul class="mb-8">
        <li class="is-size-5 is-flex mb-2">
          <div class="has-background-primary is-relative px-3 py-1 mr-4" style="border-radius: 4px;"><small class="has-text-white">1</small></div>
          How will this design scale when I shrink the browser window?
        </li>
        <li class="is-size-5 is-flex mb-2">
          <div class="has-background-primary is-relative px-3 py-1 mr-4" style="border-radius: 4px;"><small class="has-text-white">2</small></div>
          What happens when this shape is filled out incorrectly?
        </li>
        <li class="is-size-5 is-flex">
          <div class="has-background-primary is-relative px-3 py-1 mr-4" style="border-radius: 4px;"><small class="has-text-white">3</small></div>
          What are the options in this sorting filter, and what do they do?
        </li>
      </ul>
      <p class="subtitle mb-6">These types of questions led me to miss numerous deadlines, and I wasted time and energy in back-and-forth communication. Sadly, this situation could have been avoided if the wireframes had provided enough detail.</p>
      <p class="subtitle">Now that I am a UX designer, I notice that some designers tend to forget that wireframes are equally creative and technical. We are responsible for designing great ideas, but we are also responsible for creating product specifications. I admit that there can be so many details to remember that it&rsquo;s easy to lose track. To save time and energy for myself, I gathered all of my years of wireframing knowledge into a single checklist that I refer to throughout the process. And now I am sharing this knowledge with you, so that you can get back to being creative.</p>
    </div>
  </div>
</section>

<section class="section py-16">
  <div class="container">
    <div class="columns is-align-items-center">
      <div class="column mb-12 mb-0-tablet">
        <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 pr-5-widescreen">The latest version of this excellent product is waiting to deploy</h2>
        <p class="subtitle has-mw-md mb-8">If you have ever wondered how to develop your brand, this is the place for you.</p>
        <div class="buttons"><a class="button is-primary is-outlined has-text-grey-darker" href="#">Learn more</a></div>
      </div>
      <div class="column has-background-white-ter py-12" style="border-radius: 6px;">
        <div class="is-relative columns mb-12 has-mw-sm mx-auto">
          <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>
            </div>
          </div>
          <div class="column py-0">
            <h5 class="mb-4 title is-size-5 has-text-grey-darker has-text-weight-medium">Repeat predefined</h5>

<section class="section py-16">
  <div class="container">
    <div class="has-text-centered">
      <small class="is-block is-uppercase has-leading-4 has-text-weight-semibold mb-4">
        <span>Develop your</span>
        <span class="has-text-primary">skills</span>
      </small>
      <h2 class="title mb-6">See what this extension tool looks like</h2>
      <p class="subtitle has-mw-xl mx-auto mb-10">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec.</p>
      <div class="buttons is-justify-content-center mb-16"><a class="button is-primary mr-4" href="#">Track your performance</a><a class="button is-dark is-outlined" href="#">Learn more</a></div>
      <img class="image mx-auto" src="acros-assets/images/applications/macbook.png" alt="">
    </div>
  </div>
</section>

<section class="section py-16 has-background-white-ter">
  <div class="container">
    <div class="columns mb-0">
      <div class="column mb-16 mb-0-tablet">
        <h2 class="title mb-6 has-mw-md">Expand your brand with this excellent extension tool</h2>
        <div class="buttons"><a class="button is-success is-outlined has-text-grey-darker" href="#">Learn more</a></div>
      </div>
      <div class="column">
        <div class="columns mb-6 mb-12-tablet">
          <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">Change of access</h5>
            <p class="subtitle is-size-6">Take care to develop resources continually and integrity them with previous projects.</p>
          </div>
          <div class="column">
            <img class="mb-8" src="acros-assets/icons/features/users.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-6 mb-0-tablet">
            <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-3 is-flex-tablet is-flex-direction-column mb-12 is-justify-content-space-between mb-0-tablet">
        <div>
          <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>
        </div>
        <div>
          <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>
      <div class="column is-9">
        <div class="columns">
          <div class="column is-3 mb-4 mb-0-tablet">
            <ul>
              <li class="mb-6"><a class="title is-size-6 has-text-white" href="#">About us</a></li>
              <li class="mb-6"><a class="title is-size-6 has-text-white" href="#">Careers</a></li>
              <li class="mb-6"><a class="title is-size-6 has-text-white" href="#">Press</a></li>

<section>
  <nav class="navbar has-background-grey-darker">
    <div class="container py-2 px-8-mobile px-32-widescreen">
      <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">
  <div class="container">
    <div class="columns mb-12">
      <div class="column">
        <div class="columns">
          <div class="column pr-4 is-narrow">
            <img class="image is-fullwidth" src="acros-assets/images/blog/work-man-160x160.jpg" alt="">
          </div>
          <div class="column pl-4">
            <small class="is-block is-uppercase has-text-weight-semibold mb-2 has-text-grey-lighter">10 Jun 2020</small>
            <h5 class="title is-size-5 has-leading-3 has-text-weight-medium mb-4">There are many variations of passages of Lorem Ipsum available</h5>
            <p class="subtitle is-size-6 mb-6">There are many variations of passages of Lorem Ipsum available.</p>
            <a class="title is-size-6 has-text-weight-medium has-text-grey-darker is-flex is-align-items-center">
              Read more
              <img class="ml-4" src="acros-assets/icons/blog/arrow-right-green.svg" alt="">
            </a>
          </div>
        </div>
      </div>
      <div class="column">
        <div class="columns">
          <div class="column pr-4 is-narrow">
            <img class="image is-fullwidth" src="acros-assets/images/blog/woman-160x160.jpg" alt="">
          </div>

<section class="is-fixed is-bottom-0 is-left-0" style="z-index: 50; width: 100%; height: 100%;">
  <div class="container">
    <div class="has-background-white p-8" style="border-radius: 6px;">
      <div class="columns is-align-items-center is-justify-content-space-between">
        <div class="column is-9">
          <h5 class="title is-size-5 has-text-weight-medium mb-2">Cookie Policy</h5>
          <small>We use cookies to personalise content, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners. If you want to change your cookie setting, please see the &lsquo;how to reject cookies&apos; section of our . Otherwise, if you agree to our use of cookies, please continue to use our website.</small>
        </div>
        <div class="column">
          <div class="buttons"><a class="button is-primary is-fullwidth" href="#">Accept</a><a class="button is-dark is-outlined is-fullwidth" href="#">Decline</a></div>
        </div>
      </div>
    </div>
  </div>
</section>

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

<section class="section py-10 has-background-white-ter">
  <div class="container">
    <h5 class="title is-size-5 has-text-weight-medium ml-1">Trusted by brands all over the world</h5>
    <div class="columns is-multiline">
      <div class="column is-4-tablet is-2-desktop p-4">
        <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>

<section class="section py-16">
  <div class="container">
    <div class="columns is-align-items-center">
      <div class="column mb-12 mb-0-tablet">
        <img class="image mx-auto ml-0-tablet" src="acros-assets/images/applications/double-mobile.png" alt="">
      </div>
      <div class="column">
        <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>
  </div>

<section class="section py-20">
  <div class="container">
    <div class="columns mb-0">
      <div class="column is-3 is-flex-tablet is-flex-direction-column mb-12 is-justify-content-space-between mb-0-tablet">
        <div>
          <a class="is-block mb-4 title is-size-4 has-text-dark" href="#">
            <img src="acros-assets/logo/logo-acros-black.svg" alt="">
          </a>
        </div>
        <div>
          <p class="title is-size-6 has-text-grey-darker" style="opacity: 0.5;">2021 &copy; Shuffle</p>
          <ul class="is-flex">
            <li><a class="title is-size-6 has-text-grey-darker" href="#">Terms</a></li>
            <li class="ml-9"><a class="title is-size-6 has-text-grey-darker" href="#">Privacy</a></li>
          </ul>
        </div>
      </div>
      <div class="column is-9">
        <div class="columns">
          <div class="column is-3 mb-4 mb-0-tablet">
            <ul>
              <li class="mb-6"><a class="title is-size-6 has-text-grey-darker" href="#">About us</a></li>
              <li class="mb-6"><a class="title is-size-6 has-text-grey-darker" href="#">Careers</a></li>
              <li class="mb-6"><a class="title is-size-6 has-text-grey-darker" href="#">Press</a></li>