Bulma Components

<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-2">
      <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>
    <p class="subtitle has-mw-xl mb-12">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
    <div class="has-mw-4xl mx-auto">
      <div class="columns mb-9 is-align-items-center is-justify-content-space-between">
        <div class="column is-narrow">
          <img class="image is-fullwidth" src="acros-assets/images/blog/robot-445x318.jpg" alt="">
        </div>
        <div class="column is-narrow">
          <div class="has-mw-xs-tablet">
            <span class="is-block title is-size-6 has-text-primary mb-2">#family</span>
            <h4 class="title is-size-4 has-leading-3 mb-2">There are many variations of passages of Lorem Ipsum available</h4>

<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-2">Building websites from wireframes that I had received. Some of those questions were:</h5>
      <ul class="mb-8 ml-2">
        <li class="is-size-5 is-flex mb-2">
          <img class="mr-4" src="acros-assets/icons/blog-content/list-dot.svg" alt="">
          How will this design scale when I shrink the browser window?
        </li>
        <li class="is-size-5 is-flex mb-2">
          <img class="mr-4" src="acros-assets/icons/blog-content/list-dot.svg" alt="">
          What happens when this shape is filled out incorrectly?
        </li>
        <li class="is-size-5 is-flex mb-2">
          <img class="mr-4" src="acros-assets/icons/blog-content/list-dot.svg" alt="">
          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 mb-0">
      <div class="column mb-16 mb-0-tablet">
        <h2 class="title mb-6 has-mw-md">Lorem Ipsum dolor sit amet boulique</h2>
        <p class="subtitle has-mw-md mb-12">If you have ever wondered how to develop your brand, this is the place for you.</p>
        <div class="columns">
          <div class="column mb-6 mb-0-tablet">
            <img class="mb-8" src="acros-assets/icons/features/auth-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 class="column">
            <img class="mb-8" src="acros-assets/icons/features/user-green-light.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>
      </div>
      <div class="column is-narrow-widescreen">
        <img class="image mx-auto mr-0-tablet is-fullwidth" src="acros-assets/images/features/black-woman-man.jpg" alt="">
      </div>
    </div>
  </div>

<section class="section py-32" style="background-image: url('acros-assets/images/call-to-action/cta-7-bg.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center;">
  <div class="container">
    <div class="has-mw-xl ml-auto">
      <h2 class="mb-6 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-20">
  <div class="container">
    <div class="has-mw-xl mx-auto">
      <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 has-mw-xs">Join our community</h2>
      <div class="columns mb-4">
        <div class="column pb-0-tablet">
          <div class="field">
            <label class="label"><small>First name</small></label>
            <div class="control">
              <input class="input" type="text" placeholder="First name">
            </div>
          </div>
        </div>
        <div class="column pb-0-tablet">
          <div class="field">
            <label class="label"><small>Last name</small></label>
            <div class="control">
              <input class="input" type="text" placeholder="Last name">
            </div>
          </div>

<section class="section py-16">
  <div class="container">
    <div class="has-mw-3xl mx-auto">
      <small class="mb-2 is-block is-uppercase has-text-weight-semibold">Faq</small>
      <h2 class="title mb-10">Questions and Answers</h2>
      <nav class="navbar mb-10" role="navigation" aria-label="main navigation">
        <div id="navbarBasicExample" style="width: 100%;">
          <div class="navbar-start is-justify-content-space-between p-2" style="border: 1px solid #EAEAEA; border-radius: 4px;"><a class="navbar-item title is-size-6 has-text-primary has-text-weight-medium py-3 px-11 mb-0" style="border-radius: 2px; background: #E6FAF6; ">General</a><a class="navbar-item title is-size-6 has-text-weight-normal py-3 mb-0">Tools</a><a class="navbar-item title is-size-6 has-text-weight-normal py-3 mb-0">Payments</a><a class="navbar-item title is-size-6 has-text-weight-normal py-3 mb-0">Returns</a><a class="navbar-item title is-size-6 has-text-weight-normal py-3 mb-0">Refunds</a></div>
        </div>
      </nav>
      <div class="p-4 mb-4 pr-6" style="border: 1px solid #EAEAEA; border-radius: 4px;">
        <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">

<section class="section py-16">
  <div class="container">
    <div class="has-mw-xl mx-auto">
      <small class="mb-2 is-block has-text-grey-darker is-uppercase has-text-weight-semibold">Sign in</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="Type your email">
        </div>
      </div>
      <div class="field mb-6">
        <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>
      <div class="field mb-0">
        <div class="control">

<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-11 -ml-3">Decisions To Consider Before Wireframing</h4>
      <div class="columns is-align-items-center has-background-white-ter px-3 mb-7" style="border-radius: 4px;">
        <div class="column py-4">
          <h5 class="title is-size-5 mb-1">Creating Content Wireframes For Responsive Design</h5>
        </div>
        <div class="column py-4 is-narrow">
          <a href="#">
            <img src="acros-assets/icons/blog-content/arrow-down.svg" alt="">
          </a>
        </div>
      </div>
      <div class="columns px-3 mb-7" style="border: 1px solid #EAEAEA; border-radius: 4px;">
        <div class="column py-4">
          <h5 class="title is-size-5 has-text-weight-medium mb-5">The Skeptic&rsquo;s Guide To Low-Fidelity Prototyping</h5>
          <p class="subtitle is-size-6">Low-fidelity prototypes, in particular, are rough representations of concepts that help us to validate those concepts early on in the design process. Throughout this article, we will look at some of the features that make low-fidelity prototyping a unique tool to radically improve your work and to build an environment in which users&rsquo; needs can be truly realized.</p>
        </div>
        <div class="column py-4 is-narrow">
          <a href="#">
            <img src="acros-assets/icons/blog-content/arrow-up.svg" alt="">
          </a>
        </div>

<section class="section py-16">
  <div class="container">
    <div class="columns is-align-items-center mb-0">
      <div class="column mb-16 mb-0-tablet">
        <h2 class="title mb-6 has-mw-lg">Lorem Ipsum dolor sit amet boulique</h2>
        <p class="subtitle has-mw-md mb-12">If you have ever wondered how to develop your brand, this is the place for you.</p>
        <div class="columns">
          <div class="column mb-6 mb-0-tablet">
            <img class="mb-8" src="acros-assets/icons/features/auth-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 class="column">
            <img class="mb-8" src="acros-assets/icons/features/user-green-light.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>
      </div>
      <div class="column">
        <img class="image mx-auto mr-0-tablet" src="acros-assets/images/features/space-discovery.png" alt="">
      </div>
    </div>
  </div>

<section class="section py-24 is-clipped is-relative">
  <div class="is-hidden-touch is-absolute is-top-0 is-left-0 mt-20 -ml-40-desktop">
    <img class="image mr-64-desktop" src="acros-assets/images/applications/macbook.png" alt="">
  </div>
  <div class="container">
    <div class="columns is-align-items-center">
      <div class="column mb-12 mb-0-tablet">
        <img class="image is-fullwidth is-hidden-desktop" src="acros-assets/images/applications/macbook.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="columns is-mobile mb-1 is-align-items-center">
          <div class="column is-narrow">
            <img src="acros-assets/icons/applications/protect.svg" alt="">
          </div>
          <div class="column">
            <h6 class="title is-size-6 has-text-weight-medium">Lorem Ipsum dolor</h6>
          </div>
        </div>

<section class="section py-16">
  <div class="container">
    <div class="has-mw-4xl mx-auto">
      <div class="columns mb-9 is-align-items-center is-justify-content-space-between">
        <div class="column is-narrow">
          <img class="image is-fullwidth" src="acros-assets/images/blog/robot-445x318.jpg" alt="">
        </div>
        <div class="column is-narrow">
          <div class="has-mw-xs-tablet">
            <span class="is-block title is-size-6 has-text-primary mb-2">#family</span>
            <h4 class="title is-size-4 has-leading-3 mb-2">There are many variations of passages of Lorem Ipsum available</h4>
            <small class="is-block is-uppercase has-text-weight-semibold mb-2 has-text-grey-lighter">10 Jun 2020</small>
            <p class="subtitle is-size-6 mb-4">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="columns mb-9 is-align-items-center is-justify-content-space-between">
        <div class="column is-narrow">
          <div class="has-mw-xs-tablet">
            <span class="is-block title is-size-6 has-text-primary mb-2">#family</span>

<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 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="is-fixed is-left-0 is-bottom-0 has-mw-xl p-6" style="z-index: 50;">
  <div class="container">
    <div class="has-background-white p-8 has-mw-xl has-text-centered pt-14 pb-12" style="border-radius: 6px;">
      <img class="mb-8" src="acros-assets/icons/cookies/cookie-green.svg" alt="">
      <h5 class="title is-size-5 has-leading-3 mb-8 has-text-grey-darker has-text-weight-medium">We use cookies to personalise content, to provide social media features and to analyse our traffic</h5>
      <div class="buttons is-justify-content-center"><a class="button is-primary py-6 px-7 mr-0 mr-4" href="#">Accept</a><a class="button is-dark is-outlined py-6 px-7" href="#">Decline</a></div>
    </div>
  </div>
</section>

<section class="section 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 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>

<section class="section py-16 py-0-tablet has-background-white-ter is-clipped is-relative" style="height: 600px;">
  <div class="container">
    <div class="columns">
      <div class="column is-6 mb-12 mt-48-tablet">
        <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 has-mw-sm">What people says about us</h2>
        <p class="subtitle has-mw-sm">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-64-tablet">
          <div class="column">
            <div class="has-background-white 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-16">
  <div class="container">
    <img class="is-absolute" src="acros-assets/images/call-to-action/cta-8-bg.png" alt="">
    <div class="has-background-primary py-16 px-8" style="border-radius: 6px;">
      <div class="has-mw-2xl mx-auto has-text-centered is-relative" style="z-index: 1;">
        <h2 class="title has-text-white">Ready to get started?</h2>
        <p class="mb-10 subtitle has-text-white has-mw-lg mx-auto">If you have ever wondered how to develop your brand, this is the place for you.</p>
        <div class="buttons is-centered"><a class="button is-white has-text-grey-darker" href="#">Try Demo</a><a class="button is-white is-outlined ml-3" href="#">Learn more</a></div>
      </div>
    </div>
  </div>
</section>

<section class="section py-16 has-background-white-ter">
  <div class="container">
    <small class="mb-2 is-block has-text-grey-darker is-uppercase has-text-weight-semibold">
      <span>Our</span>
      <span class="has-text-primary">clients</span>
    </small>
    <h2 class="title has-mw-lg mb-10">Trusted by brands all over the world</h2>
    <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">

<section class="section py-12">
  <div class="container">
    <div class="columns is-mobile is-justify-content-center">
      <div class="column is-narrow">
        <div class="has-background-primary" style="width: 4px; height: 204px;"></div>
      </div>
      <div class="column is-narrow-tablet">
        <h4 class="title is-size-4 has-mw-2xl mb-7">On the other hand, perfection can also haunt some of us to the point of inaction. While some are too quick to act and end up wasting resources, others are completely paralyzed by the &ldquo;excessive&rdquo; amount of work behind building something new.</h4>
        <div class="columns is-align-items-center is-mobile">
          <div class="column pr-4 is-narrow">
            <img src="acros-assets/images/blog-content/man-32x32.png" alt="">
          </div>
          <div class="column is-narrow p-0"><small class="is-block has-text-weight-medium">Denny Bailey</small><small class="is-block" style="opacity: 0.6;">CEO &amp; Founder at Wireframes</small></div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="section py-16">
  <div class="container">
    <img class="is-absolute" src="acros-assets/images/call-to-action/cta-8-bg.png" alt="">
    <div class="py-16 px-8" style="border-radius: 6px; background: #CCF5ED;">
      <div class="has-mw-2xl mx-auto has-text-centered is-relative" style="z-index: 1;">
        <h2 class="title">Ready to get started?</h2>
        <p class="mb-10 subtitle has-mw-lg mx-auto">If you have ever wondered how to develop your brand, this is the place for you.</p>
        <div class="buttons is-centered"><a class="button is-primary has-text-white" href="#">Try Demo</a><a class="button is-dark is-outlined ml-3" href="#">Learn more</a></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-6">
      <div class="column is-7">
        <h2 class="title has-mw-xl">Lorem ipsum dolor sit amet consectutar domor at elis</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>
    <p class="subtitle has-mw-xl mb-12">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
    <div class="columns is-centered">
      <div class="column is-narrow-widescreen">
        <img class="image is-fullwidth mb-6" src="acros-assets/images/blog/work-man-350x262.jpg" alt="">
        <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 has-mw-xs">There are many variations of passages of Lorem Ipsum available</h5>
        <p class="subtitle is-size-6 mb-4 has-mw-xs">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="">