Bulma Components

<section class="section py-24 has-background-white is-clipped">
  <div class="container">
    <div class="mb-24 columns is-multiline is-vcentered">
      <div class="column is-6 mb-12 mb-0-tablet">
        <div class="has-mw-md mx-auto">
          <h1 class="title is-size-2-mobile is-size-1-tablet is-spaced">
            <span>Build and launch without</span>
            <span class="has-text-primary">problems</span>
          </h1>
          <p class="subtitle has-mw-sm mb-0">It’s over, maecenas tincidunt malesuada dolor sit amet malesuada.</p>
        </div>
      </div>
      <div class="column is-6">
        <div class="is-flex is-justify-content-center">
          <div class="is-relative has-mw-md mx-auto">
            <img class="image is-fullwidth" src="pstls-assets/images/how-it-works/how-it-works-2-shapes.jpeg" style="z-index: 2" alt="">
            <img class="is-absolute is-top-0 is-left-0 mt-8 ml-8" src="pstls-assets/images/how-it-works/square-colors.png">
          </div>
        </div>
      </div>
    </div>
    <div class="columns is-multiline">
      <div class="column is-4-desktop is-6-tablet">
        <div class="has-mw-xs mb-14">

<section class="section py-24 is-relative" style="background-image: url('pstls-assets/images/testimonials/testimonial-2-shadow.png'); background-size: cover; background-repeat: no-repeat; background-position: center">
  <div class="container">
    <div class="mb-10 px-12 px-24-tablet pt-20 pb-16 is-flex-tablet has-background-black">
      <div class="mb-6 mb-3-tablet mr-8-tablet">
        <img src="pstls-assets/icons/testimonials-quote.svg" alt="">
      </div>
      <div>
        <h2 class="title is-size-3 has-mw-3xl has-text-white mb-10 is-spaced">Recently, the US Federal government banned online casinos from operating in America by making it illegal to transfer money to them through any US bank or payment system</h2>
        <h5 class="is-size-4 has-text-weight-bold has-text-white mb-1">Sophie Kowalsky</h5>
        <span class="mb-6 is-block has-text-grey-light is-size-6">CTO at Shuffle</span>
        <div class="is-flex">
          <a class="p-1 is-inline-block mr-3" href="#" style="border-radius: 50% !important; border: 3px solid #CFBDFF;">
            <img class="image" src="pstls-assets/images/testimonials/woman-circle.png" alt="">
          </a>
          <a class="p-1 is-inline-block mr-3" href="#" style="border-radius: 50% !important;">
            <img class="image" src="pstls-assets/images/testimonials/woman-2-circle.png" alt="">
          </a>
          <a class="p-1" href="#" style="border-radius: 50% !important;">
            <img class="image" src="pstls-assets/images/testimonials/man-circle.png" alt="">
          </a>
        </div>
      </div>
    </div>
    <div class="is-flex is-justify-content-center"><a class="mr-3 has-background-light" style="width: 11px; height: 11px; transform: rotate(45deg)" href="#"></a><a class="mr-3 has-background-primary" style="width: 11px; height: 11px; transform: rotate(45deg)" href="#"></a><a class="mr-3 has-background-light" style="width: 11px; height: 11px; transform: rotate(45deg)" href="#"></a><a class="has-background-light" style="width: 11px; height: 11px; transform: rotate(45deg)" href="#"></a></div>

<section class="section pt-24 py-24-desktop px-0-desktop is-relative has-background-white is-clipped">
  <img class="column is-6 p-0 is-absolute is-hidden-touch is-top-0 is-right-0" src="pstls-assets/images/contacts/shadows-big.png" alt="">
  <div class="container">
    <div class="columns is-multiline">
      <div class="column is-6-desktop mb-12-touch">
        <div class="has-mw-md">
          <h2 class="title mb-12 is-size-2-mobile is-size-1-tablet">Form</h2>
          <form action="">
            <div class="field">
              <div class="control mb-6">
                <input class="input" style="border: none; border-bottom: 1px solid #DFDFDF;" type="text" placeholder="Name">
              </div>
              <div class="control mb-6">
                <input class="input" style="border: none; border-bottom: 1px solid #DFDFDF;" type="text" placeholder="Surname">
              </div>
              <div class="control mb-6">
                <input class="input" style="border: none; border-bottom: 1px solid #DFDFDF;" type="text" placeholder="Mail address">
              </div>
              <div class="control mb-6"><textarea class="input" style="border: none; border-bottom: 1px solid #DFDFDF; resize: none; height: 240px;" name="" cols="30" rows="10" placeholder="Form message"></textarea></div>
            </div>
            <button class="button mb-6 is-ghost p-0 is-flex is-align-items-center has-text-dark">
              <svg class="mr-3" width="19" height="19" viewbox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M18 8.96959L9.96279 16.5497C8.97817 17.4783 7.64274 18 6.25028 18C4.85782 18 3.52239 17.4783 2.53777 16.5497C1.55315 15.6211 1 14.3616 1 13.0483C1 11.7351 1.55315 10.4756 2.53777 9.54697L10.575 1.96687C11.2314 1.34779 12.1217 1 13.05 1C13.9783 1 14.8686 1.34779 15.525 1.96687C16.1814 2.58595 16.5502 3.4256 16.5502 4.30111C16.5502 5.17662 16.1814 6.01628 15.525 6.63535L7.47904 14.2154C7.15083 14.525 6.70569 14.6989 6.24154 14.6989C5.77738 14.6989 5.33224 14.525 5.00403 14.2154C4.67583 13.9059 4.49144 13.4861 4.49144 13.0483C4.49144 12.6106 4.67583 12.1907 5.00403 11.8812L12.429 4.88674" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>

<section>
  <div class="pt-20 pt-24-tablet px-5 pb-12 has-background-white">
    <div class="container">
      <div class="columns is-multiline is-mobile">
        <div class="column is-12-mobile is-3-desktop is-4-widescreen">
          <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 class="mt-6 is-flex is-flex-direction-row">
            <a href="#">
              <img class="image" src="pstls-assets/logos/twitter.svg" alt="">
            </a>
            <a class="mx-7" href="#">
              <img class="image" src="pstls-assets/logos/google.svg" alt="">
            </a>
            <a href="#">
              <img class="image" src="pstls-assets/logos/facebook.svg" alt="">
            </a>
          </div>
        </div>
        <div class="column is-6-mobile is-2-desktop is-2-widescreen">
          <h5 class="is-size-4 has-text-weight-bold mb-6">Product</h5>
          <ul class="is-size-5">

<section class="section py-24 is-relative is-clipped">
  <div class="container is-relative" style="z-index: 1;">
    <div class="px-4 py-20-tablet">
      <div class="has-mw-2xl mx-auto mb-8 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 class="buttons is-centered"><a class="button is-primary" href="#">Activate Demo</a><a class="button is-primary is-outlined has-text-dark" href="#">Share with friends</a></div>
      </div>
    </div>
  </div>
  <div class="is-absolute is-top-0 is-left-0">
    <div class="p-14-tablet p-32-desktop mb-8 has-background-primary-light is-hidden-touch"></div>
    <div class="p-14-tablet p-32-desktop mb-8 has-background-warning-light is-hidden-touch"></div>
    <div class="p-10 p-14-tablet p-32-desktop has-background-danger-light"></div>
  </div>
  <div class="is-absolute is-top-0 is-right-0">
    <div class="p-14-tablet p-32-desktop mb-8 has-background-danger-light is-hidden-touch"></div>
    <div class="p-14-tablet p-32-desktop mb-8 has-background-info-light is-hidden-touch"></div>
    <div class="p-10 p-14-tablet p-32-desktop has-background-primary-light"></div>

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

<section class="section py-28 has-background-white is-clipped">
  <div class="container">
    <div class="mb-16 mb-20-tablet columns is-multiline is-vcentered">
      <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">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="-mb-12 columns is-multiline">
      <div class="column is-4-desktop is-6-tablet mb-12">
        <a href="#">
          <div class="has-mw-xs mx-auto px-10">
            <div class="mb-12 is-relative" style="height: 264px;">
              <div class="mt-6 -ml-6 is-absolute is-top-0 is-left-0 has-background-primary-light" style="height: 264px; width: 100%"></div>
              <img class="image" src="pstls-assets/images/blog/blog-photo1.png" alt="" style="height: 100%">
            </div>
            <h2 class="title mb-4 is-size-3">Lorem ipsum random blog article</h2>
            <div class="mb-4 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>

<section class="section py-24 has-background-white-bis" style="background-image: url('pstls-assets/images/forms/form-2-shadow.png'); background-repeat: no-repeat; background-size: cover; z-index: -1;">
  <div class="container">
    <div class="has-mw-xl mx-auto p-8-touch p-16-desktop has-background-white">
      <div class="has-mw-sm mx-auto">
        <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>
  <div style="background-image: url('pstls-assets/images/portfolio/banner-colors.png'); background-repeat: no-repeat; background-size: cover; background-position: center;">
    <div class="section pt-24 pb-16">
      <div class="container">
        <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="is-flex -mb-6 is-flex-wrap-wrap">
          <li class="mb-6 mr-4 mr-10-tablet">
            <a class="title has-text-dark is-size-3" href="#">
              <span>All</span>
              <span class="ml-4 is-size-7 has-text-dark is-inline-flex is-align-items-center is-justify-content-center has-text-weight-bold has-background-primary-light" style="width: 24px; height:24px; border-radius: 50% !important;">41</span>
            </a>
          </li>
          <li class="mb-6 mr-4 mr-10-tablet">
            <a class="title has-text-primary is-size-3" href="#">Art Direction</a>
            <span class="ml-4 is-size-7 has-text-dark is-inline-flex is-align-items-center is-justify-content-center has-text-weight-bold has-background-primary-light" style="width: 24px; height:24px; border-radius: 50% !important;">6</span>
          </li>
          <li class="mb-6 mr-4 mr-10-tablet">
            <a class="title has-text-dark is-size-3" href="#">Branding</a>
            <span class="ml-4 is-size-7 has-text-dark is-inline-flex is-align-items-center is-justify-content-center has-text-weight-bold has-background-primary-light" style="width: 24px; height:24px; border-radius: 50% !important;">4</span>
          </li>
          <li class="mb-6 mr-4 mr-10-tablet">
            <a class="title has-text-dark is-size-3" href="#">Video</a>
            <span class="ml-4 is-size-7 has-text-dark is-inline-flex is-align-items-center is-justify-content-center has-text-weight-bold has-background-primary-light" style="width: 24px; height:24px; border-radius: 50% !important;">12</span>

<section class="section pt-32 pb-24 has-background-white is-clipped">
  <div class="container is-relative">
    <div class="-ml-32-widescreen -mt-32 is-absolute is-hidden-touch is-top-0 is-left-0 has-background-warning-light" style="width: 256px; height: 256px;"></div>
    <div class="-mr-32-widescreen -mt-32 is-absolute is-hidden-touch is-top-0 is-right-0 has-background-link-light" style="width: 256px; height: 256px;"></div>
    <div class="is-relative">
      <div class="columns is-multiline">
        <div class="column is-3-widescreen is-6-tablet mb-14 mb-0-widescreen">
          <div class="has-mw-xs mx-auto px-7 px-0-widescreen is-relative">
            <div class="-ml-6 is-absolute is-left-0 is-hidden-touch is-hidden-desktop-only" style="top: 50%; transform: translateY(-50%); z-index: 1;">
              <a class="button p-0 is-black is-relative" style="width: 50px; height: 50px;" href="#">
                <img class="image mx-auto" src="pstls-assets/icons/testimonials-arrow-left.svg" alt="">
              </a>
            </div>
            <img class="image is-fullwidth" src="pstls-assets/images/teams/team-1-photo.jpg" alt="">
          </div>
        </div>
        <div class="column is-3-widescreen is-6-tablet mb-14 mb-0-widescreen">
          <div class="has-mw-xs mx-auto px-7 px-0-widescreen">
            <img class="image is-fullwidth" src="pstls-assets/images/teams/team-1-photo-2.jpg" alt="">
            <div class="p-6 has-background-black">
              <h5 class="mb-2 is-size-4 has-text-white">Sophie Kowalsky</h5>
              <span class="is-block mb-6 has-text-grey-light is-size-6">CTO at Shuffle</span>
              <div class="mb-6 is-flex">
                <a href="#">

<section class="section py-24 is-relative">
  <div class="container">
    <div class="columns is-multiline is-justify-content-center">
      <div class="column is-2-desktop is-4-tablet">
        <div class="py-10 py-16-tablet has-background-white">
          <div class="has-text-centered">
            <p class="is-size-6 mb-1 has-text-light has-text-weight-bold">Subscribers</p>
            <h2 class="title mb-0 is-size-3">12 350</h2>
          </div>
        </div>
      </div>
      <div class="column is-2-desktop is-4-tablet">
        <div class="py-10 py-16-tablet has-background-white">
          <div class="has-text-centered">
            <p class="is-size-6 mb-1 has-text-light has-text-weight-bold">Messages</p>
            <h2 class="title mb-0 is-size-3">12 350</h2>
          </div>
        </div>
      </div>
      <div class="column is-2-desktop is-4-tablet">
        <div class="py-10 py-16-tablet has-background-white">
          <div class="has-text-centered">
            <p class="is-size-6 mb-1 has-text-light has-text-weight-bold">Projects</p>
            <h2 class="title mb-0 is-size-3">5 065</h2>

<section class="section py-24">
  <div class="container is-relative">
    <div class="is-flex is-relative is-align-items-center">
      <div class="has-mw-xl mx-auto is-relative has-text-centered" style="z-index: 3;">
        <h3 class="title is-size-2 has-text-primary">Error 404</h3>
        <p class="subtitle mb-10">Sorry, we can't find that page or something has gone wrong...</p>
        <a class="button is-dark" href="#">Go back to Homepage</a>
      </div>
    </div>
    <img class="is-absolute is-top-0 is-left-0" style="object-fit: contain; height: 100%" src="pstls-assets/images/http-codes/404.png" alt="">
    <img class="is-absolute is-top-0 is-right-0" src="pstls-assets/images/http-codes/http-codes-shadow.png" alt="" style="height: 100%">
  </div>
</section>

<section class="section py-24 has-background-white-bis" style="background-image: url('pstls-assets/images/faq/faq-shadow.png'); background-repeat: no-repeat; background-size: cover; z-index: -1;">
  <div class="container">
    <div class="has-mw-xl-tablet mb-20 mb-16-widescreen">
      <h1 class="title is-size-2-mobile is-size-1-tablet is-spaced">Frequently asked questions</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="mb-10 mb-24-widescreen columns is-multiline">
      <div class="column is-6">
        <div class="px-6 px-16-tablet py-12 has-background-white">
          <img class="image" src="pstls-assets/icons/faq-info.svg" alt="">
          <h5 class="title is-size-5 mt-6 is-spaced">Fusce eget nunc et libero accumsan rutrum?</h5>
          <p class="subtitle has-text-grey-darker">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod orci sed tristique placerat.</p>
        </div>
      </div>
      <div class="column is-6">
        <div class="px-6 px-16-tablet py-12 has-background-white">
          <img class="image" src="pstls-assets/icons/faq-info.svg" alt="">
          <h5 class="title is-size-5 mt-6 is-spaced">Fusce eget nunc et libero accumsan rutrum?</h5>
          <p class="subtitle has-text-grey-darker">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod orci sed tristique placerat.</p>
        </div>
      </div>
      <div class="column is-6">
        <div class="px-6 px-16-tablet py-12 has-background-white">
          <img class="image" src="pstls-assets/icons/faq-info.svg" alt="">

<section class="has-text-white py-24 pt-48-tablet is-clipped">
  <div class="container">
    <div class="mr-auto pt-16 pb-24 is-relative has-background-black">
      <div class="is absolute is-top-0 is-right-0 -mt-40 -mr-52-widescreen">
        <img class="has-mw-sm image ml-auto" src="pstls-assets/images/features/features-women-2.png" alt="">
      </div>
      <div class="has-mw-md-tablet -mt-96 is-hidden-touch is-top-0 is-right-0" style="z-index: -1;"></div>
      <div class="has-mw-sm has-mw-3xl-desktop has-mw-5xl-widescreen mx-auto mt-12-mobile pr-96-desktop px-4 px-64-widescreen">
        <div class="columns is-multiline">
          <div class="column is-10-widescreen">
            <h2 class="title is-size-3 has-text-white">Lorem ipsum dolor sit amet conscetutar domor at elis</h2>
          </div>
        </div>
        <div class="mt-12 columns is-multiline">
          <div class="column is-12 is-6-widescreen mb-10">
            <img class="image" src="pstls-assets/icons/document-clean.svg" alt="">
            <h5 class="is-size-4 has-text-white mt-8 mb-6">Layer styles</h5>
            <p class="subtitle has-text-grey-light">Take care to develop resources continually and integrity them with previous projects.</p>
          </div>
          <div class="column is-12 is-6-widescreen mb-10">
            <img class="image" src="pstls-assets/icons/check-circle.svg" alt="">
            <h5 class="is-size-4 has-text-white mt-8 mb-6">No errors</h5>
            <p class="subtitle has-text-grey-light">Take care to develop resources continually and integrity them with previous projects.</p>
          </div>

<section class="section py-52-desktop is-relative">
  <img class="column is-5-tablet is-6-desktop p-0 is-absolute is-hidden-touch is-top-0 is-right-0 image" style="object-fit: contain; height: 100%;" src="pstls-assets/images/applications/group-phones.png" alt="">
  <div class="container">
    <div class="columns is-multiline">
      <div class="column is-6-tablet py-6">
        <div class="has-mw-md mx-auto">
          <h2 class="title is-size-2-mobile is-size-1-tablet is-spaced">Build and launch without problems</h2>
          <p class="subtitle mb-6">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 class="buttons">
            <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>
      <div class="is-hidden-desktop mt-8">
        <img class="image" src="pstls-assets/images/applications/group-phones.png" alt="">
      </div>
    </div>
  </div>
</section>

<section class="is-relative">
  <nav class="navbar py-8">
    <div class="container">
      <div class="navbar-brand">
        <a class="navbar-item" href="#">
          <img src="pstls-assets/logos/pstls-logo-md.svg" alt="" width="116">
        </a>
        <div class="navbar-item ml-auto is-hidden-desktop">
          <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>
      <div class="navbar-menu">
        <div class="navbar-start"><a class="navbar-item is-size-5 has-text-weight-bold" aria-current="page" href="#">Home</a><a class="navbar-item is-size-5 has-text-weight-bold" href="#">Products</a><a class="navbar-item is-size-5 has-text-weight-bold" href="#">Resources</a><a class="navbar-item is-size-5 has-text-weight-bold" href="#">Pricing</a></div>
        <div class="navbar-end">
          <div class="navbar-item">
            <div class="field has-addons">
              <div class="control">
                <input class="input" type="search" placeholder="Search" aria-label="Search" aria-describedby="search-addon">
              </div>
              <div class="control"></div>

<section class="section py-24 has-background-white" style="background-image: url('pstls-assets/images/pricing/big-background.png'); background-size: cover; background-repeat: repeat; background-position: center;">
  <div class="container">
    <div class="columns is-multiline is-vcentered mb-16">
      <div class="column is-5-widescreen is-6-tablet">
        <h2 class="title is-size-2-mobile is-size-1-tablet">Choose a plan</h2>
      </div>
      <div class="column is-6-tablet is-7-widescreen">
        <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 class="columns is-multiline is-vcentered is-justify-content-flex-end">
      <div class="column is-narrow">
        <div class="py-7-touch py-10-desktop px-8 px-20-tablet has-background-white">
          <ul class="mb-0 is-justify-content-around is-flex-direction-column">
            <li class="mb-8-tablet mr-5 mr-0-tablet"><a class="title is-size-3 has-text-dark" href="#">Free</a></li>
            <li class="mb-8-tablet mr-5 mr-0-tablet"><a class="title is-size-3 has-text-dark" href="#">Basic</a></li>
            <li class="mb-8-tablet mr-5 mr-0-tablet"><a class="title is-size-3 has-text-dark" href="#">Pro</a></li>
            <li><a class="title is-size-3 has-text-warning" href="#">Premium</a></li>
          </ul>
        </div>
      </div>
      <div class="column is-narrow">
        <div class="-ml-12-tablet p-12 has-background-black">
          <div class="is-flex is-flex-wrap-wrap -mx-2">

<section class="section py-24 is-relative">
  <img class="column is-8 p-0 is-absolute is-top-0 is-bottom-0 is-left-0" src="pstls-assets/images/contacts/shadow-small.png" alt="" style="height: 100%">
  <div class="container">
    <div class="columns is-vcentered is-multiline">
      <div class="column is-6-tablet mb-12 mb-0-desktop">
        <div class="has-mw-md">
          <h3 class="title is-size-3 has-text-primary">Get in touch with us</h3>
          <h2 class="title is-size-2-mobile is-size-1-tablet">Is the answer to your question missing?</h2>
        </div>
      </div>
      <div class="column is-6-tablet">
        <div class="columns is-multiline">
          <div class="column is-6-tablet mb-12">
            <p class="is-size-5 has-text-grey-light mb-0">E-mail</p>
            <a class="is-size-5 has-text-dark" href="mailto:contact@pstls.com">contact@pstls.com</a>
          </div>
          <div class="column is-6-tablet mb-12">
            <p class="is-size-5 has-text-grey-light mb-0">Phone</p>
            <p class="is-size-5">+1-2020-555-109</p>
          </div>
          <div class="column is-12">
            <p class="is-size-5 has-text-grey-light mb-2">Socials</p>
            <div class="is-flex">
              <a class="button is-ghost p-0" href="#">

<section class="section py-28 has-background-white is-clipped">
  <div class="container">
    <div class="columns is-multiline is-vcentered">
      <div class="column is-6 mb-12 mb-0-desktop">
        <div class="has-mw-sm mx-auto ml-0-tablet">
          <h3 class="title is-size-2 has-text-primary mb-12">Error 404</h3>
          <h4 class="title is-size-2 mb-12">Sorry, we can't find that page or something has gone wrong...</h4>
          <a class="button is-dark" href="#">Go back to Homapage</a>
        </div>
      </div>
      <div class="column is-6">
        <figure class="mb-0 is-relative">
          <img class="is-relative image is-fullwidth" src="pstls-assets/images/http-codes/placeholder1.png" alt="" style="z-index: 2;">
          <div class="is-absolute is-top-0 is-left-0 mt-10 ml-10 is-fullwidth has-background-primary-light" style="z-index: 1; height: 100%; width: 100%;"></div>
        </figure>
      </div>
    </div>
  </div>
</section>

<section class="section py-24 has-background-white-bis" style="background-image: url('pstls-assets/images/faq/faq-shadow.png'); background-repeat: no-repeat; background-size: cover; z-index: -1;">
  <div class="container">
    <div class="has-mw-xl mx-auto mb-20 mb-16-widescreen has-text-centered">
      <h1 class="title is-size-2-mobile is-size-1-tablet is-spaced">Frequently asked questions</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="mb-6 px-6 px-12-tablet py-8 has-background-white">
      <div class="columns is-multiline">
        <div class="column is-10 is-11-desktop">
          <h5 class="title is-size-4 is-spaced">Fusce eget nunc et libero accumsan rutrum quis nec lectus?</h5>
          <p class="subtitle has-text-grey-darker mb-0">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 class="column is-2 is-1-desktop is-flex is-justify-content-end">
          <a href="#">
            <img class="image" src="pstls-assets/icons/faq-chevron-up.svg" alt="">
          </a>
        </div>
      </div>
    </div>
    <div class="mb-6 px-6 px-12-tablet py-8 has-background-white">
      <div class="columns is-multiline">
        <div class="column is-10 is-11-desktop">
          <h5 class="title is-size-4">Donec sed leo sit amet ante ornare laoreet in quis est?</h5>
        </div>