Bulma Components

<section class="section py-28 has-background-white is-clipped">
  <div class="container">
    <div class="mb-16 mb-20-tablet columns is-vcentered is-multiline">
      <div class="column is-6-tablet">
        <h2 class="title mb-0 is-size-2-touch is-size-1-tablet">Blog</h2>
      </div>
      <div class="column is-6-tablet">
        <p class="subtitle mb-0">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business.</p>
      </div>
    </div>
    <div class="columns is-multiline">
      <div class="column is-6-tablet px-12 mb-8-touch">
        <a href="#">
          <div class="mb-6 is-relative" style="height: 264px;">
            <div class="ml-6 -mt-6 is-absolute is-top-0 is-left-0 has-background-primary-light" style="height: 264px; width: 100%"></div>
            <img class="image is-fullwidth" src="pstls-assets/images/blog/article-big.png" alt="" style="height: 100%">
          </div>
          <div class="mb-2 is-flex is-align-items-center">
            <span class="has-text-primary">6 min read</span>
            <span class="has-text-primary mx-2">•</span>
            <span class="has-text-primary">10 July 2022</span>
          </div>
          <h2 class="title is-size-3 mt-6 mb-2 is-spaced">Lorem ipsum random blog article</h2>
          <p class="subtitle mb-4">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business. If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business.</p>

<section class="section py-28 py-20-widescreen pb-24-widescreen">
  <div class="container">
    <div class="has-mw-xl mx-auto mb-12 has-text-centered">
      <h2 class="title is-size-2 is-spaced">Features List</h2>
      <p class="subtitle">This UI Kit uses attractive colors and modern typography to make you look good, no matter what business you’re in.</p>
    </div>
    <div class="columns is-multiline has-text-centered">
      <div class="column is-6-tablet is-3-widescreen">
        <div class="has-mw-sm mx-auto has-text-centered">
          <img class="image mx-auto" src="pstls-assets/icons/rounded-document-clean.svg" alt="">
          <h5 class="is-size-4 mt-7 mb-6">Layer styles</h5>
          <p class="subtitle has-text-grey-darker">Take care to develop resources continually and integrity them with previous projects.</p>
        </div>
      </div>
      <div class="column is-6-tablet is-3-widescreen">
        <div class="has-mw-sm mx-auto has-text-centered">
          <img class="image mx-auto" src="pstls-assets/icons/rounded-filters.svg" alt="">
          <h5 class="is-size-4 mt-7 mb-6">Change of access</h5>
          <p class="subtitle has-text-grey-darker">Take care to develop resources continually and integrity them with previous projects.</p>
        </div>
      </div>
      <div class="column is-6-tablet is-3-widescreen">
        <div class="has-mw-sm mx-auto has-text-centered">
          <img class="image mx-auto" src="pstls-assets/icons/rounded-users.svg" alt="">

<section class="pt-20 pt-24-tablet has-background-white">
  <div class="container px-5">
    <div class="columns -mb-4 pb-12 is-multiline">
      <div class="column is-6-tablet is-4-widescreen mb-4">
        <a href="#">
          <img class="image" src="pstls-assets/logos/pstls-logo.svg" alt="" width="87">
        </a>
        <p class="has-mw-xs is-size-5 mt-6 mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
      <div class="column is-6-tablet is-3-widescreen mb-4">
        <h5 class="is-size-4 has-text-weight-bold mb-6">Product</h5>
        <ul class="is-size-5">
          <li class="mb-2"><a class="has-text-dark" href="#">Hello</a></li>
          <li class="mb-2"><a class="has-text-dark" href="#">Story</a></li>
          <li class="mb-2"><a class="has-text-dark" href="#">Pricing</a></li>
          <li><a class="has-text-dark" href="#">Applications</a></li>
        </ul>
      </div>
      <div class="column is-6-tablet is-3-widescreen mb-4">
        <h5 class="is-size-4 has-text-weight-bold mb-6">Resources</h5>
        <ul class="is-size-5">
          <li class="mb-2"><a class="has-text-dark" href="#">New account</a></li>
          <li class="mb-2"><a class="has-text-dark" href="#">Log in</a></li>
          <li class="mb-2"><a class="has-text-dark" href="#">Testimonials</a></li>

<section class="section pt-0 pb-20 px-0 has-background-white">
  <div class="mb-14 py-24 px-5 has-text-centered" style="background-image: url('pstls-assets/images/blog-content/background.png'); background-size: cover; background-repeat: no-repeat; background-position: center;">
    <div class="container">
      <div class="has-mw-4xl mx-auto">
        <span class="has-text-primary">Published 02 September 2022</span>
        <h2 class="title mt-2 is-size-2 is-spaced">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
        <p class="subtitle">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>
      </div>
    </div>
  </div>
  <div class="container px-5">
    <div class="content has-mw-xl mx-auto">
      <div class="mb-8 pb-8" style="border-bottom: 1px solid #DFDFDF;">
        <p class="subtitle mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</p>
      </div>
      <h2 class="title is-size-3 is-spaced">Lorem ipsum</h2>
      <p class="subtitle mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</p>
      <img class="mb-4 image" src="https://images.unsplash.com/photo-1532274402911-5a369e4c4bb5?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=870&amp;q=80" alt="">
      <p class="is-size-6 mb-8">
        <span>Brown wooden dock by Mark Harpur via</span>
        <a class="is-primary" href="#">Unsplash</a>
      </p>
      <p class="subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam auctor commodo arcu id ullamcorper. Aliquam vestibulum lobortis venenatis. Aenean in pharetra risus, id iaculis leo. Proin id risus sit amet mauris hendrerit tincidunt. Vestibulum pulvinar nec leo nec sagittis. Duis vestibulum sit amet odio sodales consequat. Nam eget elit tempus, cursus lorem vel, sollicitudin massa. Sed varius condimentum massa, et volutpat ante eleifend a. Praesent purus justo, finibus eu suscipit in, vulputate quis est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin euismod tellus quam, eget interdum diam consectetur eget. Phasellus felis quam, iaculis at malesuada nec, varius nec massa. Integer rhoncus sapien faucibus turpis bibendum, quis maximus magna vehicula. Quisque pharetra, tortor sit amet vestibulum tincidunt, tortor lectus pretium ipsum, a elementum risus libero id diam. Morbi ut sem elementum, blandit augue eu, vehicula nunc. Ut et pellentesque mauris.</p>
      <ol class="mb-12">

<section class="section py-24 is-relative is-clipped">
  <div class="container">
    <div class="has-mw-2xl mx-auto mb-12 has-text-centered">
      <span class="heading">New feature</span>
      <h1 class="title mt-2 is-size-2-touch is-size-1-tablet is-spaced">
        <span>Take</span>
        <span class="has-text-primary">quick action</span>
        <span>that increases your brand's regular profit.</span>
      </h1>
      <p class="subtitle">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
    </div>
    <div class="is-relative">
      <img class="image is-fullwidth" src="pstls-assets/images/call-to-action/sofa.jpeg" alt="">
      <a class="is-hidden-touch is-absolute button is-primary p-0 is-flex is-size-3 is-justify-content-center is-align-items-center title" href="#" style="top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 100% !important; width: 200px; height: 200px;">
        Try
        <br>
        Demo
      </a>
      <a class="is-hidden-tablet is-absolute button is-primary p-0 is-flex is-size-4 is-justify-content-center is-align-items-center title" href="#" style="top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 100% !important; width: 100px; height: 100px;">
        Try
        <br>
        Demo
      </a>
    </div>

<section class="section py-28 is-relative">
  <div class="container">
    <div class="columns is-multiline">
      <div class="column is-3-desktop is-6-tablet mb-8 mb-0-desktop">
        <div class="is-relative">
          <div class="is-flex is-justify-content-center">
            <img class="image is-fullwidth" src="pstls-assets/images/stats/background1.png" alt="">
          </div>
          <div class="is-absolute has-text-centered" style="top: 50%; left: 50%; transform: translate(-50%, -50%);">
            <p class="has-text-primary is-size-6 mb-1 has-text-weight-bold">Subscribers</p>
            <h2 class="title is-size-3 mb-0">12 350</h2>
          </div>
        </div>
      </div>
      <div class="column is-3-desktop is-6-tablet mb-8 mb-0-desktop">
        <div class="is-relative">
          <div class="is-flex is-justify-content-center">
            <img class="image is-fullwidth" src="pstls-assets/images/stats/background4.png" alt="">
          </div>
          <div class="is-absolute has-text-centered" style="top: 50%; left: 50%; transform: translate(-50%, -50%);">
            <p class="has-text-danger is-size-6 mb-1 has-text-weight-bold">Projects</p>
            <h2 class="title is-size-3 mb-0">5 065</h2>
          </div>
        </div>

<section class="section pb-40-mobile pb-64-tablet is-relative">
  <div class="container is-relative" style="background-image: url('pstls-assets/images/applications/background-pstls.png'); background-repeat: no-repeat; background-size: cover; background-position: center;">
    <div class="pt-20 px-6 is-relative">
      <div class="has-mw-xl mx-auto has-text-centered">
        <h2 class="title mb-12 is-size-2-mobile is-size-1-tablet">Build and launch without problems</h2>
        <div class="buttons is-centered">
          <a class="button is-ghost p-0" href="#">
            <img src="pstls-assets/images/applications/appstore.svg" alt="">
          </a>
          <a class="button is-ghost p-0" href="#">
            <img src="pstls-assets/images/applications/googleplay.svg" alt="">
          </a>
        </div>
      </div>
      <div class="has-mw-2xl mx-auto mt-16">
        <img class="mx-auto -mb-20-mobile -mb-40-tablet" src="pstls-assets/images/applications/three-phones.png" alt="">
      </div>
    </div>
  </div>
</section>

<section class="is-relative">
  <nav class="navbar py-8 is-relative">
    <div class="container">
      <div class="is-hidden-desktop navbar-item">
        <a class="navbar-item" href="#">
          <img src="pstls-assets/logos/pstls-logo-md.svg" alt="" width="116">
        </a>
      </div>
      <div class="is-hidden-touch navbar-item is-absolute" style="top: 50%; left: 50%; transform: translate(-50%, -50%);">
        <a class="navbar-item" href="#">
          <img src="pstls-assets/logos/pstls-logo-md.svg" alt="" width="116">
        </a>
      </div>
      <div class="navbar-item is-hidden-desktop is-absolute is-top-0 is-right-0">
        <button class="button is-ghost navbar-menu-open">
          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 7C3.22386 7 3 6.77614 3 6.5C3 6.22386 3.22386 6 3.5 6H20.5C20.7761 6 21 6.22386 21 6.5C21 6.77614 20.7761 7 20.5 7H3.5ZM3.5 12C3.22386 12 3 11.7761 3 11.5C3 11.2239 3.22386 11 3.5 11H20.5C20.7761 11 21 11.2239 21 11.5C21 11.7761 20.7761 12 20.5 12H3.5ZM3 16.5C3 16.7761 3.22386 17 3.5 17H20.5C20.7761 17 21 16.7761 21 16.5C21 16.2239 20.7761 16 20.5 16H3.5C3.22386 16 3 16.2239 3 16.5Z" fill="#000"></path>
          </svg>
        </button>
      </div>
      <div class="navbar-item is-hidden-touch">
        <button class="button is-light py-4">
          <img src="pstls-assets/images/navigations/menu.svg" alt="">
        </button>

<section class="section py-24 is-relative">
  <img class="is-absolute is-top-0 image" src="pstls-assets/images/teams/team-3-shadow.png" style="object-fit: cover;" alt="">
  <div class="container is-relative">
    <div class="columns is-multiline is-vcentered">
      <div class="column is-6-tablet mb-20 mb-0-tablet">
        <ul class="mb-0">
          <li class="is-flex">
            <span class="is-block mr-3 has-text-grey-light is-size-6">01</span>
            <a class="title is-size-3-touch is-size-2-desktop has-text-primary" href="#">Wanda Hurt</a>
          </li>
          <li class="mt-6 is-flex">
            <span class="is-block mr-3 has-text-grey-light is-size-6">02</span>
            <a class="title is-size-3-touch is-size-2-desktop has-text-dark" href="#">Jeffrey Helms</a>
          </li>
          <li class="mt-6 is-flex">
            <span class="is-block mr-3 has-text-grey-light is-size-6">03</span>
            <a class="title is-size-3-touch is-size-2-desktop has-text-dark" href="#">Keith Shen</a>
          </li>
          <li class="mt-6 is-flex">
            <span class="is-block mr-3 has-text-grey-light is-size-6">04</span>
            <a class="title is-size-3-touch is-size-2-desktop has-text-dark" href="#">Patricia Greenberg</a>
          </li>
          <li class="mt-6 is-flex">
            <span class="is-block mr-3 has-text-grey-light is-size-6">05</span>

<section class="section py-24 has-background-white" style="background-image: url('pstls-assets/images/testimonials/testimonial-3-shadow.png'); background-size: cover; background-repeat: no-repeat; background-position: center">
  <div class="container">
    <div class="has-mw-2xl mx-auto mb-12 px-14-widescreen has-text-centered">
      <h2 class="title is-size-2 is-spaced">Testimonials</h2>
      <p class="subtitle">This UI Kit uses attractive colors and modern typography to make you look good, no matter what business you’re in.</p>
    </div>
    <div class="columns is-multiline">
      <div class="column is-3-desktop is-6-tablet mb-8 mb-0-desktop">
        <div class="has-mw-xs mx-auto py-10-tablet px-6">
          <img class="image mb-2" src="pstls-assets/images/testimonials/testimonials-3-photo-circle-2.png" alt="">
          <h4 class="mb-1">John Doe</h4>
          <p class="mb-6 has-text-grey-light is-size-6">Front-end developer</p>
          <p class="has-text-grey-light">Many people were hoping that if the Democrats won control of Congress they would reverse the online</p>
        </div>
      </div>
      <div class="column is-3-desktop is-6-tablet mb-8 mb-0-desktop">
        <div class="has-mw-xs mx-auto py-10-tablet px-6 has-background-primary-light">
          <img class="image mb-2" src="pstls-assets/images/testimonials/testimonials-3-photo-circle.png" alt="">
          <h4 class="mb-1">Sophie Kovalsky</h4>
          <p class="mb-6 has-text-primary is-size-6">UI/UX Designer</p>
          <p class="has-text-dark">Many people were hoping that if the Democrats won control of Congress they would reverse the online</p>
          <div class="mt-8 is-flex">
            <a href="#">
              <img class="image" src="pstls-assets/logos/twitter.svg" alt="">

<section>
  <div class="is-relative" style="background-image: url('pstls-assets/images/how-it-works/shadows-colors2.png'); background-repeat: no-repeat; background-position: center; background-size: cover;">
    <div class="section pt-24 pb-16">
      <div class="container">
        <div class="has-mw-2xl mx-auto has-text-centered">
          <h1 class="title is-size-2-mobile is-size-1-tablet is-spaced">Build and launch without problems</h1>
          <p class="subtitle">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
        </div>
      </div>
    </div>
  </div>
  <div class="pt-16 pb-24 has-background-white">
    <div class="container">
      <div class="columns is-multiline is-relative">
        <div class="column is-3-widescreen is-6-tablet mb-14 mb-0-widescreen">
          <div class="has-mw-sm has-mw-xs-widescreen mx-auto px-8-widescreen has-text-centered is-relative">
            <div class="mb-4 is-inline-flex is-align-items-center is-justify-content-center is-relative" style="width: 64px; height: 64px;">
              <div class="is-absolute is-top-0 is-left-0 has-background-primary-light" style="width: 100%; height: 100%; border-radius: 50%;"></div>
              <h2 class="is-size-5 has-text-weight-bold has-text-primary-dark is-relative">1</h2>
            </div>
            <h2 class="title is-size-3 is-spaced">Register account</h2>
            <p class="subtitle has-text-grey-light">It’s over, maecenas tincidunt malesuada dolor sit amet malesuada.</p>
            <img class="is-absolute is-hidden-mobile is-top-0 is-right-0 mt-8 image" style="transform: translateX(50%)" src="pstls-assets/images/how-it-works/how-it-works-3-line.png" alt="">
          </div>

<section class="section py-24 is-relative has-background-white">
  <div class="container is-relative" style="z-index: 1;">
    <div>
      <span class="heading is-size-5 has-text-primary has-text-weight-bold">Our works</span>
      <h1 class="title is-size-2-mobile is-size-1-tablet mb-16">Discover our recent projects</h1>
      <ul class="mb-0 is-flex-tablet">
        <li class="mr-6-tablet mr-16-desktop"><a class="button p-0 is-ghost has-text-dark is-uppercase" href="#">All</a></li>
        <li class="mr-6-tablet mr-16-desktop"><a class="button p-0 is-ghost has-text-primary is-uppercase" href="#">Art direction</a></li>
        <li class="mr-6-tablet mr-16-desktop"><a class="button p-0 is-ghost has-text-dark is-uppercase" href="#">Branding</a></li>
        <li class="mr-6-tablet mr-16-desktop"><a class="button p-0 is-ghost has-text-dark is-uppercase" href="#">Video</a></li>
        <li><a class="button p-0 is-ghost has-text-dark is-uppercase" href="#">Development</a></li>
      </ul>
    </div>
    <div class="mb-20">
      <div class="has-mw-md has-mw-3xl-tablet has-mw-4xl-desktop mx-auto mt-20">
        <div class="columns is-multiline">
          <div class="column is-6 mb-3">
            <img class="image is-fullwidth mb-6" src="pstls-assets/images/portfolio/portfolio-3-img.jpg" alt="">
            <h5 class="title is-size-4 mb-2">Lorem Ipsum Random Name</h5>
            <p class="is-size-7 has-text-grey-light is-uppercase">Art direction</p>
          </div>
          <div class="column is-6 mb-3">
            <img class="image is-fullwidth mb-6" src="pstls-assets/images/portfolio/portfolio-3-img-2.jpg" alt="">
            <h5 class="title is-size-4 mb-2">Lorem Ipsum Random Name</h5>

<section class="is-fixed-bottom is-bottom-0 is-left-0 is-right-0 pb-8" style="z-index: 50;">
  <div class="container">
    <div class="card">
      <div class="py-10 px-5">
        <div class="has-mw-3xl mx-auto">
          <div class="has-text-centered">
            <h3 class="title mb-2 is-size-4-touch is-size-3-desktop is-spaced">Cookies settings</h3>
            <p class="subtitle is-size-6-touch is-size-5-desktop">By clicking “Accept”, you agree to the storing of cookies on your device to enhance site navigation...</p>
            <div class="buttons is-centered"><a class="button is-dark" href="#">Accept</a><a class="button is-ghost has-text-grey-light" href="#">Show more</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="section p-0-desktop has-background-white is-clipped" style="background-image: url('pstls-assets/images/forms/form-3-shadow.png'); background-repeat: no-repeat; background-size: cover; z-index: -1;">
  <div class="columns is-multiline is-vcentered">
    <div class="column is-6">
      <div class="has-mw-sm mx-auto px-5-mobile">
        <div class="has-text-centered">
          <img class="image mx-auto" src="pstls-assets/logos/pstls-logo-form.svg" alt="">
          <h2 class="title is-size-3 mt-6 mb-2 is-spaced">Log in to your account</h2>
          <p class="subtitle mb-6">Please enter your details to proceed.</p>
        </div>
        <form action="">
          <div class="field mb-4">
            <label class="label" for="">Email</label>
            <div class="control">
              <input class="input" type="email" placeholder="Your email address">
            </div>
          </div>
          <div class="field mb-4">
            <label class="label" for="">Password</label>
            <div class="control">
              <input class="input" type="password" placeholder="Your password">
            </div>
          </div>
          <label class="checkbox is-flex mb-6">
            <input class="mr-4" type="checkbox" name="terms" value="1">

<section class="section py-24 has-background-white">
  <div class="container">
    <p class="has-text-grey-dark mb-0 has-text-centered">Trusted by brands all over the world</p>
    <div class="mt-6 columns is-multiline is-mobile">
      <div class="column is-2-widescreen is-4-tablet is-6-mobile">
        <div class="px-4 is-flex is-justify-content-center is-align-items-center has-background-primary-light" style="height: 205px;">
          <img class="image" src="pstls-assets/logos/coca-cola-b-md.svg" alt="">
        </div>
      </div>
      <div class="column is-2-widescreen is-4-tablet is-6-mobile">
        <div class="px-4 is-flex is-justify-content-center is-align-items-center has-background-warning-light" style="height: 205px;">
          <img class="image" src="pstls-assets/logos/apple-b-md.svg" alt="">
        </div>
      </div>
      <div class="column is-2-widescreen is-4-tablet is-6-mobile">
        <div class="px-4 is-flex is-justify-content-center is-align-items-center has-background-success-light" style="height: 205px;">
          <img class="image" src="pstls-assets/logos/champion-b-md.svg" alt="">
        </div>
      </div>
      <div class="column is-2-widescreen is-4-tablet is-6-mobile">
        <div class="px-4 is-flex is-justify-content-center is-align-items-center has-background-warning-light" style="height: 205px;">
          <img class="image" src="pstls-assets/logos/sony-b-md.svg" alt="">
        </div>
      </div>

<section class="section">
  <div class="container">
    <div class="has-mw-xl mx-auto px-14 py-16 has-background-white has-text-centered">
      <img class="image" src="pstls-assets/images/modals/modal-preview.jpg" alt="">
      <h2 class="title is-size-2 mt-8 mb-4">Welcome to our project</h2>
      <p class="subtitle mb-6">We’re glad to have you onboard. Here are some quick tips to get you up and running.</p>
      <div class="mb-6 is-flex is-justify-content-center"><a class="mr-3 has-background-dark" href="#" style="width: 6px; height: 6px; border-radius: 50% !important;"></a><a class="mr-3 has-background-light" href="#" style="width: 6px; height: 6px; border-radius: 50% !important;"></a><a class="mr-3 has-background-light" href="#" style="width: 6px; height: 6px; border-radius: 50% !important;"></a><a class="has-background-light" href="#" style="width: 6px; height: 6px; border-radius: 50% !important;"></a></div>
      <div class="mt-6 buttons is-centered"><a class="button px-10" href="#">Skip</a><a class="button px-10 is-dark" href="#">Next</a></div>
    </div>
  </div>
  <div class="is-absolute is-top-0 is-left-0 has-background-dark is-fullwidth is-covered" style="z-index: -1; opacity: 0.7; height: 100%"></div>
</section>

<section class="section py-24">
  <div class="container">
    <div class="columns is-multiline is-mobile">
      <div class="column is-3-desktop is-6-touch">
        <div class="mb-8">
          <div class="has-background-link-light" style="width: 100%; height: 264px;"></div>
        </div>
        <div class="mb-8">
          <img class="image mb-4 is-fullwidth" style="height: 264px; object-fit: cover;" src="pstls-assets/images/teams/team-1-photo.jpg" alt="">
          <h5 class="is-size-4 has-text-weight-bold mb-2">Sophie Kowalsky</h5>
          <span class="has-text-grey-light is-size-6">CTO at Shuffle</span>
        </div>
        <div class="mb-8">
          <div class="has-background-danger-light" style="width: 100%; height: 264px;"></div>
        </div>
        <div class="mb-8">
          <img class="image mb-4 is-fullwidth" style="height: 264px; object-fit: cover;" src="pstls-assets/images/teams/team-1-photo-2.jpg" alt="">
          <h5 class="is-size-4 has-text-weight-bold mb-2">Sophie Kowalsky</h5>
          <span class="has-text-grey-light is-size-6">CTO at Shuffle</span>
        </div>
      </div>
      <div class="column is-3-desktop is-6-touch">
        <div class="mb-8">
          <img class="image mb-4 is-fullwidth" style="height: 264px; object-fit: cover;" src="pstls-assets/images/teams/team-1-photo-2.jpg" alt="">

<section class="section py-24 has-background-black is-relative">
  <img class="is-absolute is-top-0 is-left-0 mt-80-touch mt-0-desktop" src="pstls-assets/images/pricing/shadow.png" alt="">
  <div class="container">
    <div class="has-mw-xl mx-auto mb-16 has-text-centered">
      <h1 class="title is-size-2-mobile is-size-1-tablet mb-6 has-text-white is-spaced">Choose a plan</h1>
      <p class="subtitle has-text-white">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
    </div>
    <div class="columns is-multiline is-vcentered">
      <div class="column is-12-touch is-4-desktop">
        <div class="has-mw-md mx-auto p-8-touch p-8-desktop p-12-widescreen has-background-black">
          <div class="mb-12 is-flex is-justify-content-space-between is-align-items-flex-end">
            <h2 class="title is-size-3 mb-0 has-text-white">Free</h2>
            <h5 class="title is-size-5 is-size-4-widescreen has-text-primary mb-0">$0,00</h5>
          </div>
          <ul class="mb-10">
            <li class="has-text-white mb-2 is-flex">
              <img class="mr-2" src="pstls-assets/icons/pricing-1-check-circle.svg" alt="">
              <span>1 component categorie</span>
            </li>
            <li class="has-text-white mb-2 is-flex">
              <img class="mr-2" src="pstls-assets/icons/pricing-1-check-circle.svg" alt="">
              <span>1 mobile component</span>
            </li>
            <li class="has-text-white is-flex">

<section class="section py-28 has-background-white">
  <div class="container">
    <div class="columns is-multiline">
      <div class="column is-5 mb-20 mb-0-desktop">
        <div class="has-mw-sm mx-auto">
          <h2 class="title is-size-2-mobile is-size-1-tablet is-spaced">Trusted by brands all over the world</h2>
          <p class="subtitle">This UI Kit uses attractive colors and modern typography to make you look good, no matter what business you’re in.</p>
        </div>
      </div>
      <div class="column is-7">
        <div class="columns is-multiline is-vcentered">
          <div class="column is-3-tablet">
            <div class="mb-8">
              <div class="px-4 is-flex is-justify-content-center is-align-items-center has-background-primary-light" style="height: 166px;">
                <img class="image" src="pstls-assets/logos/coca-cola-b-xs.svg" alt="">
              </div>
            </div>
            <div>
              <div class="px-4 is-flex is-justify-content-center is-align-items-center has-background-warning-light" style="height: 166px;">
                <img class="image" src="pstls-assets/logos/champion-b-xs.svg" alt="">
              </div>
            </div>
          </div>
          <div class="column is-5-tablet">

<section class="py-28 is-relative">
  <div class="container">
    <div class="columns is-multiline is-mobile">
      <div class="column is-3-desktop is-6-touch mb-8-touch mb-0-desktop">
        <div class="py-16" style="background-image: url('pstls-assets/images/stats/stat-background1.png'); background-size: contain; background-repeat: no-repeat; background-position: center;">
          <div class="has-text-centered">
            <p class="has-text-primary is-size-6 mb-1 has-text-weight-bold">Subscribers</p>
            <h2 class="title is-size-3 mb-0">75%</h2>
          </div>
        </div>
      </div>
      <div class="column is-3-desktop is-6-touch mb-8-touch mb-0-desktop">
        <div class="py-16" style="background-image: url('pstls-assets/images/stats/stat-background4.png'); background-size: contain; background-repeat: no-repeat; background-position: center;">
          <div class="has-text-centered">
            <p class="has-text-danger is-size-6 mb-1 has-text-weight-bold">Subscribers Rate</p>
            <h2 class="title is-size-3 mb-0">50%</h2>
          </div>
        </div>
      </div>
      <div class="column is-3-desktop is-6-touch mb-8-touch mb-0-desktop">
        <div class="py-16" style="background-image: url('pstls-assets/images/stats/stat-background3.png'); background-size: contain; background-repeat: no-repeat; background-position: center;">
          <div class="has-text-centered">
            <p class="has-text-info is-size-6 mb-1 has-text-weight-bold">Subscribers Rate</p>
            <h2 class="title is-size-3 mb-0">65%</h2>