Pricing

Set the price of your business with modern design pricing blocks.

Pricing #1

Pricing plans

No additional costs.
Pay for what you use.

Choose the most suitable service for your needs with reasonable price.

Monthly Yearly 10% OFF

Individual Plan

$ 22 /month
Image Description
  • Community support
  • 400+ pages
  • 100+ header variations
  • 20+ home page options

Enterprise Plan

$ 99 /month
Image Description
  • 24/7 support
  • 400+ pages
  • 200+ header variations
  • 40+ home page options
  • E-commerce

* Terms are subject to change. 

<!-- Pricing Section -->
<div class="container">
  <div class="row">
    <div class="col-lg-5 mb-7 mb-lg-0">
      <!-- Title -->
      <div class="pr-lg-4 mb-7">
        <span class="btn btn-xs btn-soft-success btn-pill mb-2">Pricing plans</span>
        <h2>No additional costs.<br>Pay for what you use.</h2>
        <p>Choose the most suitable service for your needs with reasonable price.</p>
      </div>
      <!-- End Title -->

      <!-- Button Group -->
      <div class="btn-group btn-group-toggle">
        <a class="js-animation-link btn btn-outline-secondary btn-custom-toggle-primary btn-sm-wide active" href="javascript:;"
           data-target="#pricingMonthlyExample1"
           data-link-group="idPricingExample1"
           data-animation-in="slideInUp">Monthly</a>
        <a class="js-animation-link btn btn-outline-secondary btn-custom-toggle-primary btn-sm-wide" href="javascript:;"
           data-target="#pricingYearlyExample1"
           data-link-group="idPricingExample1"
           data-animation-in="slideInUp">
          Yearly
          <span class="badge badge-success badge-pill badge-bigger badge-pos">10% OFF</span>
        </a>
      </div>
      <!-- End Button Group -->
    </div>

    <div class="col-lg-7">
      <!-- Monthly Plans -->
      <div id="pricingMonthlyExample1" class="row align-items-center mb-3" data-target-group="idPricingExample1">
        <div class="col-sm-6 mb-7 mb-sm-0">
          <!-- Pricing -->
          <div class="card border-0 shadow-sm">
            <header id="SVGwave1BottomShapeID1" class="svg-preloader card-header border-0 position-relative bg-primary text-white p-5 pb-11">
              <h3 class="h4 mb-1">Individual Plan</h3>
              <span class="d-block">
                <span class="align-top">$</span>
                <span class="display-4 font-weight-semi-bold">22</span>
                <span>/month</span>
              </span>

              <div class="position-absolute right-0 bottom-0 left-0">
                <figure class="ie-wave-1-bottom">
                  <img class="js-svg-injector" src="../../assets/svg/components/wave-1-bottom.svg" alt="Image Description"
                       data-parent="#SVGwave1BottomShapeID1">
                </figure>
              </div>
            </header>

            <!-- Content -->
            <div class="card-body pt-0 px-5 pb-5">
              <ul class="list-group list-group-flush list-group-borderless mb-4">
                <li class="list-group-item">
                  <div class="d-flex align-items-center">
                    <span class="btn btn-xs btn-icon btn-soft-primary rounded-circle mr-3">
                      <span class="fas fa-check btn-icon__inner"></span>
                    </span>
                    Community support
                  </div>
                </li>
                <li class="list-group-item">
                  <div class="d-flex align-items-center">
                    <span class="btn btn-xs btn-icon btn-soft-primary rounded-circle mr-3">
                      <span class="fas fa-check btn-icon__inner"></span>
                    </span>
                    400+ pages
                  </div>
                </li>
                <li class="list-group-item">
                  <div class="d-flex align-items-center">
                    <span class="btn btn-xs btn-icon btn-soft-primary rounded-circle mr-3">
                      <span class="fas fa-check btn-icon__inner"></span>
                    </span>
                    100+ header variations
                  </div>
                </li>
                <li class="list-group-item disabled py-2">
                  <div class="d-flex align-items-center">
                    <span class="btn btn-xs btn-icon btn-soft-primary rounded-circle mr-3">
                      <span class="fas fa-check btn-icon__inner"></span>
                    </span>
                    20+ home page options
                  </div>
                </li>
              </ul>

              <button type="button" class="btn btn-sm btn-block btn-soft-primary transition-3d-hover">Get Started</button>
            </div>
            <!-- End Content -->
          </div>
          <!-- End Pricing -->
        </div>

        <div class="col-sm-6">
          <!-- Pricing -->
          <div class="card border-0 shadow-sm">
            <header id="SVGwave1BottomShapeID2" class="svg-preloader card-header border-0 position-relative bg-primary text-white p-5 pb-11">
              <h3 class="h4 mb-1">Enterprise Plan</h3>
              <span class="d-block">
                <span class="align-top">$</span>
                <span class="display-4 font-weight-semi-bold">99</span>
                <span>/month</span>
              </span>

              <div class="position-absolute right-0 bottom-0 left-0">
                <figure class="ie-wave-1-bottom">
                  <img class="js-svg-injector" src="../../assets/svg/components/wave-1-bottom.svg" alt="Image Description"
                       data-parent="#SVGwave1BottomShapeID2">
                </figure>
              </div>
            </header>

            <!-- Content -->
            <div class="card-body pt-0 px-5 pb-5">
              <ul class="list-group list-group-flush list-group-borderless mb-4">
                <li class="list-group-item">
                  <div class="d-flex align-items-center">
                    <span class="btn btn-xs btn-icon btn-soft-primary rounded-circle mr-3">
                      <span class="fas fa-check btn-icon__inner"></span>
                    </span>
                    24/7 support
                  </div>
                </li>
                <li class="list-group-item">
                  <div class="d-flex align-items-center">
                    <span class="btn btn-xs btn-icon btn-soft-primary rounded-circle mr-3">
                      <span class="fas fa-check btn-icon__inner"></span>
                    </span>
                    400+ pages
                  </div>
                </li>
                <li class="list-group-item">
                  <div class="d-flex align-items-center">
                    <span class="btn btn-xs btn-icon btn-soft-primary rounded-circle mr-3">
                      <span class="fas fa-check btn-icon__inner"></span>
                    </span>
                    200+ header variations
                  </div>
                </li>
                <li class="list-group-item">
                  <div class="d-flex align-items-center">
                    <span class="btn btn-xs btn-icon btn-soft-primary rounded-circle mr-3">
                      <span class="fas fa-check btn-icon__inner"></span>
                    </span>
                    40+ home page options
                  </div>
                </li>
                <li class="list-group-item">
                  <div class="d-flex align-items-center">
                    <span class="btn btn-xs btn-icon btn-soft-primary rounded-circle mr-3">
                      <span class="fas fa-check btn-icon__inner"></span>
                    </span>
                    E-commerce
                  </div>
                </li>
              </ul>

              <button type="button" class="btn btn-sm btn-block btn-soft-primary transition-3d-hover">Get Started</button>
            </div>
            <!-- End Content -->
          </div>
          <!-- End Pricing -->
        </div>
      </div>
      <!-- End Monthly Plans -->

      <!-- Yearly Plans -->
      <div id="pricingYearlyExample1" class="row align-items-center mb-3" style="display: none; opacity: 0;" data-target-group="idPricingExample1">
        <div class="col-sm-6 mb-7 mb-sm-0">
          <!-- Pricing -->
          <div class="card border-0 shadow-sm">
            <header id="SVGwave1BottomShapeID3" class="svg-preloader card-header border-0 position-relative bg-primary text-white p-5 pb-11">
              <h3 class="h4 mb-1">Individual Plan</h3>
              <span class="d-block">
                <span class="align-top">$</span>
                <span class="display-4 font-weight-semi-bold">242</span>
                <span>/year</span>
              </span>

              <div class="position-absolute right-0 bottom-0 left-0">
                <figure class="ie-wave-1-bottom">
                  <img class="js-svg-injector" src="../../assets/svg/components/wave-1-bottom.svg" alt="Image Description"
                       data-parent="#SVGwave1BottomShapeID3">
                </figure>
              </div>
            </header>

            <!-- Content -->
            <div class="card-body pt-0 px-5 pb-5">
              <ul class="list-group list-group-flush list-group-borderless mb-4">
                <li class="list-group-item">
                  <div class="d-flex align-items-center">
                    <span class="btn btn-xs btn-icon btn-soft-primary rounded-circle mr-3">
                      <span class="fas fa-check btn-icon__inner"></span>
                    </span>
                    24/7 support
                  </div>
                </li>
                <li class="list-group-item">
                  <div class="d-flex align-items-center">
                    <span class="btn btn-xs btn-icon btn-soft-primary rounded-circle mr-3">
                      <span class="fas fa-check btn-icon__inner"></span>
                    </span>
                    400+ pages
                  </div>
                </li>
                <li class="list-group-item">
                  <div class="d-flex align-items-center">
                    <span class="btn btn-xs btn-icon btn-soft-primary rounded-circle mr-3">
                      <span class="fas fa-check btn-icon__inner"></span>
                    </span>
                    100+ header variations
                  </div>
                </li>
                <li class="list-group-item disabled py-2">
                  <div class="d-flex align-items-center">
                    <span class="btn btn-xs btn-icon btn-soft-primary rounded-circle mr-3">
                      <span class="fas fa-check btn-icon__inner"></span>
                    </span>
                    20+ home page options
                  </div>
                </li>
              </ul>

              <button type="button" class="btn btn-sm btn-block btn-soft-primary transition-3d-hover">Get Started</button>
            </div>
            <!-- End Content -->
          </div>
          <!-- End Pricing -->
        </div>

        <div class="col-sm-6">
          <!-- Pricing -->
          <div class="card border-0 shadow-sm">
            <header id="SVGwave1BottomShapeID4" class="svg-preloader card-header border-0 position-relative bg-primary text-white p-5 pb-11">
              <h3 class="h4 mb-1">Enterprise Plan</h3>
              <span class="d-block">
                <span class="align-top">$</span>
                <span class="display-4 font-weight-semi-bold">1089</span>
                <span>/year</span>
              </span>

              <div class="position-absolute right-0 bottom-0 left-0">
                <figure class="ie-wave-1-bottom">
                  <img class="js-svg-injector" src="../../assets/svg/components/wave-1-bottom.svg" alt="Image Description"
                       data-parent="#SVGwave1BottomShapeID4">
                </figure>
              </div>
            </header>

            <!-- Content -->
            <div class="card-body pt-0 px-5 pb-5">
              <ul class="list-group list-group-flush list-group-borderless mb-4">
                <li class="list-group-item">
                  <div class="d-flex align-items-center">
                    <span class="btn btn-xs btn-icon btn-soft-primary rounded-circle mr-3">
                      <span class="fas fa-check btn-icon__inner"></span>
                    </span>
                    24/7 support
                  </div>
                </li>
                <li class="list-group-item">
                  <div class="d-flex align-items-center">
                    <span class="btn btn-xs btn-icon btn-soft-primary rounded-circle mr-3">
                      <span class="fas fa-check btn-icon__inner"></span>
                    </span>
                    400+ pages
                  </div>
                </li>
                <li class="list-group-item">
                  <div class="d-flex align-items-center">
                    <span class="btn btn-xs btn-icon btn-soft-primary rounded-circle mr-3">
                      <span class="fas fa-check btn-icon__inner"></span>
                    </span>
                    200+ header variations
                  </div>
                </li>
                <li class="list-group-item">
                  <div class="d-flex align-items-center">
                    <span class="btn btn-xs btn-icon btn-soft-primary rounded-circle mr-3">
                      <span class="fas fa-check btn-icon__inner"></span>
                    </span>
                    40+ home page options
                  </div>
                </li>
                <li class="list-group-item">
                  <div class="d-flex align-items-center">
                    <span class="btn btn-xs btn-icon btn-soft-primary rounded-circle mr-3">
                      <span class="fas fa-check btn-icon__inner"></span>
                    </span>
                    E-commerce
                  </div>
                </li>
              </ul>

              <button type="button" class="btn btn-sm btn-block btn-soft-primary transition-3d-hover">Get Started</button>
            </div>
            <!-- End Content -->
          </div>
          <!-- End Pricing -->
        </div>
      </div>
      <!-- End Yearly Plans -->

      <p class="small text-muted text-center">
        * <a class="link-muted" href="../pages/terms.html">Terms</a> are subject to change.
      </p>
    </div>
  </div>
</div>
<!-- End Pricing Section -->
Copy
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>

<!-- JS Implementing Plugins -->
<script src="../../assets/js/components/hs.slick-carousel.js"></script>
<script src="../../assets/js/components/hs.show-animation.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // initialization of slick carousel
    $.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');

    // initialization of show animations
    $.HSCore.components.HSShowAnimation.init('.js-animation-link');
  });
</script>
Copy

Pricing #2

Starter

$22 per month
  • Community support
  • 400+ pages

Basic

$44 per month
  • Community support
  • 400+ pages
  • 100+ header variations

Company

$69 per month
  • Community support
  • 400+ pages
  • 100+ header variations
  • 20+ home page options

Enterprise

Contact Us no user limit
  • Community support
  • 400+ pages
  • 100+ header variations
  • 20+ home page options
  • Priority Support
<!-- Pricing Section -->
<div class="container">
  <!-- Pricing Carousel -->
  <div class="js-slick-carousel u-slick u-slick--gutters-2 mb-4"
       data-adaptive-height="true"
       data-slides-show="4"
       data-slides-scroll="1"
       data-pagi-classes="d-lg-none text-center u-slick__pagination mt-7 mb-0"
       data-responsive='[{
         "breakpoint": 1200,
         "settings": {
           "slidesToShow": 3
         }
       }, {
         "breakpoint": 992,
         "settings": {
           "slidesToShow": 2
         }
       }, {
         "breakpoint": 768,
         "settings": {
           "slidesToShow": 1
         }
       }, {
         "breakpoint": 554,
         "settings": {
           "slidesToShow": 1
         }
       }]'>
    <div class="js-slide">
      <!-- Pricing -->
      <div class="card transition-3d-hover">
        <!-- Header -->
        <header class="card-header text-center p-5">
          <h4 class="h6 text-primary mb-3">Starter</h4>
          <span class="d-block">
            <span class="display-4 text-dark font-weight-normal">
              <span class="align-top font-size-2">$</span>22
            </span>
            <span class="d-block text-secondary font-size-1">per month</span>
          </span>
        </header>
        <!-- End Header -->

        <!-- Content -->
        <div class="card-body p-5">
          <ul class="list-group list-group-flush list-group-borderless mb-4">
            <li class="list-group-item">Community support</li>
            <li class="list-group-item">400+ pages</li>
          </ul>

          <button type="button" class="btn btn-sm btn-block btn-soft-primary transition-3d-hover">Start Starter</button>
        </div>
        <!-- End Content -->
      </div>
      <!-- End Pricing -->
    </div>

    <div class="js-slide">
      <!-- Pricing -->
      <div class="card transition-3d-hover">
        <!-- Header -->
        <header class="card-header text-center p-5">
          <h4 class="h6 text-warning mb-3">Basic</h4>
          <span class="d-block">
            <span class="display-4 text-dark font-weight-normal">
              <span class="align-top font-size-2">$</span>44
            </span>
            <span class="d-block text-secondary font-size-1">per month</span>
          </span>
        </header>
        <!-- End Header -->

        <!-- Content -->
        <div class="card-body p-5">
          <ul class="list-group list-group-flush list-group-borderless mb-4">
            <li class="list-group-item">Community support</li>
            <li class="list-group-item">400+ pages</li>
            <li class="list-group-item">100+ header variations</li>
          </ul>

          <button type="button" class="btn btn-sm btn-block btn-soft-primary transition-3d-hover">Start Basic</button>
        </div>
        <!-- End Content -->
      </div>
      <!-- End Pricing -->
    </div>

    <div class="js-slide">
      <!-- Pricing -->
      <div class="card transition-3d-hover">
        <!-- Header -->
        <header class="card-header text-center p-5">
          <h4 class="h6 text-success mb-3">Company</h4>
          <span class="d-block">
            <span class="display-4 text-dark font-weight-normal">
              <span class="align-top font-size-2">$</span>69
            </span>
            <span class="d-block text-secondary font-size-1">per month</span>
          </span>
        </header>
        <!-- End Header -->

        <!-- Content -->
        <div class="card-body p-5">
          <ul class="list-group list-group-flush list-group-borderless mb-4">
            <li class="list-group-item">Community support</li>
            <li class="list-group-item">400+ pages</li>
            <li class="list-group-item">100+ header variations</li>
            <li class="list-group-item">20+ home page options</li>
          </ul>

          <button type="button" class="btn btn-sm btn-block btn-soft-primary transition-3d-hover">Start Free Trial</button>
        </div>
        <!-- End Content -->
      </div>
      <!-- End Pricing -->
    </div>

    <div class="js-slide">
      <!-- Pricing -->
      <div class="card transition-3d-hover">
        <!-- Header -->
        <header class="card-header text-center p-5">
          <h4 class="h6 text-danger mb-3">Enterprise</h4>
          <span class="d-block">
            <span class="h2 text-dark font-weight-normal">
              Contact Us
            </span>
            <span class="d-block text-secondary font-size-1">no user limit</span>
          </span>
        </header>
        <!-- End Header -->

        <!-- Content -->
        <div class="card-body p-5">
          <ul class="list-group list-group-flush list-group-borderless mb-4">
            <li class="list-group-item">Community support</li>
            <li class="list-group-item">400+ pages</li>
            <li class="list-group-item">100+ header variations</li>
            <li class="list-group-item">20+ home page options</li>
            <li class="list-group-item">Priority Support</li>
          </ul>

          <button type="button" class="btn btn-sm btn-block btn-warning transition-3d-hover">Contact Us</button>
        </div>
        <!-- End Content -->
      </div>
      <!-- End Pricing -->
    </div>
  </div>
  <!-- End Pricing Carousel -->
</div>
<!-- End Pricing Section -->
Copy
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>

<!-- JS Implementing Plugins -->
<script src="../../assets/js/components/hs.slick-carousel.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // initialization of slick carousel
    $.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
  });
</script>
Copy

Pricing #3

14-Day free trial

$0 month
Image Description

Enterprise

$44 month
Image Description 
<!-- Pricing Section -->
<div class="container">
  <div class="w-lg-65 mx-lg-auto">
    <div class="card-deck d-block d-md-flex card-md-gutters-3 mb-5">
      <!-- Pricing -->
      <div class="card text-center mb-5 mb-md-0">
        <!-- Header -->
        <header class="card-header p-5">
          <h4 class="h5 text-success">14-Day free trial</h4>
          <div>
            <span class="h1 text-dark font-weight-medium">
              <span class="align-top font-size-2">$</span>0
            </span>
            <span class="text-secondary">month</span>
          </div>
        </header>
        <!-- End Header -->

        <!-- Content -->
        <div class="card-body p-5">
          <!-- SVG Icon -->
          <figure id="SVGfreeTrial" class="svg-preloader w-80 mx-auto mb-5">
            <img class="js-svg-injector" src="../../assets/svg/flat-icons/free-trial.svg" alt="Image Description"
                 data-parent="#SVGfreeTrial">
          </figure>
          <!-- End SVG Icon -->

          <button type="button" class="btn btn-sm btn-block btn-success transition-3d-hover">Start 14-Day Free Trial</button>
        </div>
        <!-- End Content -->
      </div>
      <!-- End Pricing -->

      <!-- Pricing -->
      <div class="card card-frame-highlighted text-center">
        <!-- Header -->
        <header class="card-header p-5">
          <h4 class="h5 text-primary">Enterprise</h4>
          <div>
            <span class="h1 text-dark font-weight-medium">
              <span class="align-top font-size-2">$</span>44
            </span>
            <span class="text-secondary">month</span>
          </div>
        </header>
        <!-- End Header -->

        <!-- Content -->
        <div class="card-body p-5">
          <!-- SVG Icon -->
          <figure id="SVGenterprise" class="svg-preloader w-80 mx-auto mb-5">
            <img class="js-svg-injector" src="../../assets/svg/flat-icons/enterprise-1.svg" alt="Image Description"
                 data-parent="#SVGenterprise">
          </figure>
          <!-- End SVG Icon -->

          <button type="button" class="btn btn-sm btn-block btn-primary transition-3d-hover">Start Enterprise</button>
        </div>
        <!-- End Content -->
      </div>
      <!-- End Pricing -->
    </div>
  </div>
</div>
<!-- End Pricing Section -->
Copy

Pricing #4

Subscription plans

Monthly Yearly
Starter $22 per month
  • Community support
  • 400+ pages
  • 100+ header variations
  • 20+ home page options
Pro $44 per month
  • Community support
  • 400+ pages
  • 100+ header variations
  • 20+ home page options
Enterprise $69 per month
  • Community support
  • 400+ pages
  • 100+ header variations
  • 20+ home page options 
<!-- Title -->
<div class="row justify-content-between align-items-center mb-3">
  <div class="col-sm-6 mb-3 mb-sm-0">
    <h2 class="h5 mb-0">Subscription plans</h2>
  </div>

  <div class="col-sm-6 text-sm-right">
    <div class="btn-group btn-group-toggle">
      <a class="js-animation-link btn btn-sm btn-outline-primary btn-sm-wide active" href="javascript:;"
         data-target="#pricingMonthlyExample2"
         data-link-group="idPricingExample2">
        Monthly
      </a>
      <a class="js-animation-link btn btn-sm btn-outline-primary btn-sm-wide" href="javascript:;"
         data-target="#pricingYearlyExample2"
         data-link-group="idPricingExample2">
        Yearly
      </a>
    </div>
  </div>
</div>
<!-- End Title -->

<!-- Pricing Carousel -->
<div id="pricingMonthlyExample2" data-target-group="idPricingExample2">
  <div class="js-slick-carousel u-slick u-slick--gutters-2 z-index-2"
       data-slides-show="3"
       data-slides-scroll="1"
       data-pagi-classes="d-lg-none text-center u-slick__pagination mt-7 mb-0"
       data-responsive='[{
         "breakpoint": 1200,
         "settings": {
           "slidesToShow": 3
         }
       }, {
         "breakpoint": 992,
         "settings": {
           "slidesToShow": 2
         }
       }, {
         "breakpoint": 768,
         "settings": {
           "slidesToShow": 1
         }
       }, {
         "breakpoint": 554,
         "settings": {
           "slidesToShow": 1
         }
       }]'>
    <!-- Pricing -->
    <div class="js-slide">
      <div class="card">
        <!-- Header -->
        <header class="card-header bg-primary text-white text-center p-5">
          <span class="btn btn-xs btn-soft-white mb-3">Starter</span>
          <span class="d-block">
            <span class="display-4 font-weight-normal">
              <span class="align-top font-size-2">$</span>22
            </span>
            <span class="d-block text-white-50 font-size-1">per month</span>
          </span>
        </header>
        <!-- End Header -->

        <!-- Content -->
        <div class="card-body p-5">
          <ul class="list-unstyled font-size-1 mb-4">
            <li class="media py-2">
              <span class="fas fa-info-circle text-muted mt-1 mr-2" data-toggle="tooltip" data-placement="bottom" title="Understanding the task at hand and ironing out the wrinkles is key."></span>
              <div class="media-body">
                Community support
              </div>
            </li>
            <li class="media py-2">
              <span class="fas fa-info-circle text-muted mt-1 mr-2" data-toggle="tooltip" data-placement="bottom" title="Understanding the task at hand and ironing out the wrinkles is key."></span>
              <div class="media-body">
                400+ pages
              </div>
            </li>
            <li class="media py-2">
              <span class="fas fa-info-circle text-muted mt-1 mr-2" data-toggle="tooltip" data-placement="bottom" title="Understanding the task at hand and ironing out the wrinkles is key."></span>
              <div class="media-body">
                100+ header variations
              </div>
            </li>
            <li class="media py-2">
              <span class="fas fa-info-circle text-muted mt-1 mr-2" data-toggle="tooltip" data-placement="bottom" title="Understanding the task at hand and ironing out the wrinkles is key."></span>
              <div class="media-body">
                20+ home page options
              </div>
            </li>
          </ul>

          <button type="button" class="btn btn-sm btn-block btn-soft-primary transition-3d-hover">Get Started</button>
        </div>
      </div>
      <!-- End Content -->
    </div>
    <!-- End Pricing -->

    <!-- Pricing -->
    <div class="js-slide">
      <div class="card">
        <!-- Header -->
        <header class="card-header bg-primary text-white text-center p-5">
          <span class="btn btn-xs btn-soft-white mb-3">Pro</span>
          <span class="d-block">
            <span class="display-4 font-weight-normal">
              <span class="align-top font-size-2">$</span>44
            </span>
            <span class="d-block text-white-50 font-size-1">per month</span>
          </span>
        </header>
        <!-- End Header -->

        <!-- Content -->
        <div class="card-body p-5">
          <ul class="list-unstyled font-size-1 mb-4">
            <li class="media py-2">
              <span class="fas fa-info-circle text-muted mt-1 mr-2" data-toggle="tooltip" data-placement="bottom" title="Understanding the task at hand and ironing out the wrinkles is key."></span>
              <div class="media-body">
                Community support
              </div>
            </li>
            <li class="media py-2">
              <span class="fas fa-info-circle text-muted mt-1 mr-2" data-toggle="tooltip" data-placement="bottom" title="Understanding the task at hand and ironing out the wrinkles is key."></span>
              <div class="media-body">
                400+ pages
              </div>
            </li>
            <li class="media py-2">
              <span class="fas fa-info-circle text-muted mt-1 mr-2" data-toggle="tooltip" data-placement="bottom" title="Understanding the task at hand and ironing out the wrinkles is key."></span>
              <div class="media-body">
                100+ header variations
              </div>
            </li>
            <li class="media py-2">
              <span class="fas fa-info-circle text-muted mt-1 mr-2" data-toggle="tooltip" data-placement="bottom" title="Understanding the task at hand and ironing out the wrinkles is key."></span>
              <div class="media-body">
                20+ home page options
              </div>
            </li>
          </ul>

          <button type="button" class="btn btn-sm btn-block btn-soft-primary transition-3d-hover">Get Started</button>
        </div>
      </div>
      <!-- End Content -->
    </div>
    <!-- End Pricing -->

    <!-- Pricing -->
    <div class="js-slide">
      <div class="card">
        <!-- Header -->
        <header class="card-header bg-primary text-white text-center p-5">
          <span class="btn btn-xs btn-soft-white mb-3">Enterprise</span>
          <span class="d-block">
            <span class="display-4 font-weight-normal">
              <span class="align-top font-size-2">$</span>69
            </span>
            <span class="d-block text-white-50 font-size-1">per month</span>
          </span>
        </header>
        <!-- End Header -->

        <!-- Content -->
        <div class="card-body p-5">
          <ul class="list-unstyled font-size-1 mb-4">
            <li class="media py-2">
              <span class="fas fa-info-circle text-muted mt-1 mr-2" data-toggle="tooltip" data-placement="bottom" title="Understanding the task at hand and ironing out the wrinkles is key."></span>
              <div class="media-body">
                Community support
              </div>
            </li>
            <li class="media py-2">
              <span class="fas fa-info-circle text-muted mt-1 mr-2" data-toggle="tooltip" data-placement="bottom" title="Understanding the task at hand and ironing out the wrinkles is key."></span>
              <div class="media-body">
                400+ pages
              </div>
            </li>
            <li class="media py-2">
              <span class="fas fa-info-circle text-muted mt-1 mr-2" data-toggle="tooltip" data-placement="bottom" title="Understanding the task at hand and ironing out the wrinkles is key."></span>
              <div class="media-body">
                100+ header variations
              </div>
            </li>
            <li class="media py-2">
              <span class="fas fa-info-circle text-muted mt-1 mr-2" data-toggle="tooltip" data-placement="bottom" title="Understanding the task at hand and ironing out the wrinkles is key."></span>
              <div class="media-body">
                20+ home page options
              </div>
            </li>
          </ul>

          <button type="button" class="btn btn-sm btn-block btn-soft-primary transition-3d-hover">Get Started</button>
        </div>
      </div>
      <!-- End Content -->
    </div>
    <!-- End Pricing -->
  </div>
</div>
<!-- End Pricing Carousel -->

<!-- Pricing Carousel -->
<div id="pricingYearlyExample2" style="display: none; opacity: 0;" data-target-group="idPricingExample2">
  <div class="js-slick-carousel u-slick u-slick--gutters-2 z-index-2"
       data-slides-show="3"
       data-slides-scroll="1"
       data-pagi-classes="d-lg-none text-center u-slick__pagination mt-7 mb-0"
       data-responsive='[{
         "breakpoint": 1200,
         "settings": {
           "slidesToShow": 3
         }
       }, {
         "breakpoint": 992,
         "settings": {
           "slidesToShow": 2
         }
       }, {
         "breakpoint": 768,
         "settings": {
           "slidesToShow": 1
         }
       }, {
         "breakpoint": 554,
         "settings": {
           "slidesToShow": 1
         }
       }]'>
    <!-- Pricing -->
    <div class="js-slide">
      <div class="card">
        <!-- Header -->
        <header class="card-header bg-primary text-white text-center p-5">
          <span class="btn btn-xs btn-soft-white mb-3">Starter</span>
          <span class="d-block">
            <span class="display-4 font-weight-normal">
              <span class="align-top font-size-2">$</span>242
            </span>
            <span class="d-block text-white-50 font-size-1">per month</span>
          </span>
        </header>
        <!-- End Header -->

        <!-- Content -->
        <div class="card-body p-5">
          <ul class="list-unstyled font-size-1 mb-4">
            <li class="media py-2">
              <span class="fas fa-info-circle text-muted mt-1 mr-2" data-toggle="tooltip" data-placement="bottom" title="Understanding the task at hand and ironing out the wrinkles is key."></span>
              <div class="media-body">
                Community support
              </div>
            </li>
            <li class="media py-2">
              <span class="fas fa-info-circle text-muted mt-1 mr-2" data-toggle="tooltip" data-placement="bottom" title="Understanding the task at hand and ironing out the wrinkles is key."></span>
              <div class="media-body">
                400+ pages
              </div>
            </li>
            <li class="media py-2">
              <span class="fas fa-info-circle text-muted mt-1 mr-2" data-toggle="tooltip" data-placement="bottom" title="Understanding the task at hand and ironing out the wrinkles is key."></span>
              <div class="media-body">
                100+ header variations
              </div>
            </li>
            <li class="media py-2">
              <span class="fas fa-info-circle text-muted mt-1 mr-2" data-toggle="tooltip" data-placement="bottom" title="Understanding the task at hand and ironing out the wrinkles is key."></span>
              <div class="media-body">
                20+ home page options
              </div>
            </li>
          </ul>

          <button type="button" class="btn btn-sm btn-block btn-soft-primary transition-3d-hover">Get Started</button>
        </div>
      </div>
      <!-- End Content -->
    </div>
    <!-- End Pricing -->

    <!-- Pricing -->
    <div class="js-slide">
      <div class="card">
        <!-- Header -->
        <header class="card-header bg-primary text-white text-center p-5">
          <span class="btn btn-xs btn-soft-white mb-3">Pro</span>
          <span class="d-block">
            <span class="display-4 font-weight-normal">
              <span class="align-top font-size-2">$</span>442
            </span>
            <span class="d-block text-white-50 font-size-1">per month</span>
          </span>
        </header>
        <!-- End Header -->

        <!-- Content -->
        <div class="card-body p-5">
          <ul class="list-unstyled font-size-1 mb-4">
            <li class="media py-2">
              <span class="fas fa-info-circle text-muted mt-1 mr-2" data-toggle="tooltip" data-placement="bottom" title="Understanding the task at hand and ironing out the wrinkles is key."></span>
              <div class="media-body">
                Community support
              </div>
            </li>
            <li class="media py-2">
              <span class="fas fa-info-circle text-muted mt-1 mr-2" data-toggle="tooltip" data-placement="bottom" title="Understanding the task at hand and ironing out the wrinkles is key."></span>
              <div class="media-body">
                400+ pages
              </div>
            </li>
            <li class="media py-2">
              <span class="fas fa-info-circle text-muted mt-1 mr-2" data-toggle="tooltip" data-placement="bottom" title="Understanding the task at hand and ironing out the wrinkles is key."></span>
              <div class="media-body">
                100+ header variations
              </div>
            </li>
            <li class="media py-2">
              <span class="fas fa-info-circle text-muted mt-1 mr-2" data-toggle="tooltip" data-placement="bottom" title="Understanding the task at hand and ironing out the wrinkles is key."></span>
              <div class="media-body">
                20+ home page options
              </div>
            </li>
          </ul>

          <button type="button" class="btn btn-sm btn-block btn-soft-primary transition-3d-hover">Get Started</button>
        </div>
      </div>
      <!-- End Content -->
    </div>
    <!-- End Pricing -->

    <!-- Pricing -->
    <div class="js-slide">
      <div class="card">
        <!-- Header -->
        <header class="card-header bg-primary text-white text-center p-5">
          <span class="btn btn-xs btn-soft-white mb-3">Enterprise</span>
          <span class="d-block">
            <span class="display-4 font-weight-normal">
              <span class="align-top font-size-2">$</span>1089
            </span>
            <span class="d-block text-white-50 font-size-1">per month</span>
          </span>
        </header>
        <!-- End Header -->

        <!-- Content -->
        <div class="card-body p-5">
          <ul class="list-unstyled font-size-1 mb-4">
            <li class="media py-2">
              <span class="fas fa-info-circle text-muted mt-1 mr-2" data-toggle="tooltip" data-placement="bottom" title="Understanding the task at hand and ironing out the wrinkles is key."></span>
              <div class="media-body">
                Community support
              </div>
            </li>
            <li class="media py-2">
              <span class="fas fa-info-circle text-muted mt-1 mr-2" data-toggle="tooltip" data-placement="bottom" title="Understanding the task at hand and ironing out the wrinkles is key."></span>
              <div class="media-body">
                400+ pages
              </div>
            </li>
            <li class="media py-2">
              <span class="fas fa-info-circle text-muted mt-1 mr-2" data-toggle="tooltip" data-placement="bottom" title="Understanding the task at hand and ironing out the wrinkles is key."></span>
              <div class="media-body">
                100+ header variations
              </div>
            </li>
            <li class="media py-2">
              <span class="fas fa-info-circle text-muted mt-1 mr-2" data-toggle="tooltip" data-placement="bottom" title="Understanding the task at hand and ironing out the wrinkles is key."></span>
              <div class="media-body">
                20+ home page options
              </div>
            </li>
          </ul>

          <button type="button" class="btn btn-sm btn-block btn-soft-primary transition-3d-hover">Get Started</button>
        </div>
      </div>
      <!-- End Content -->
    </div>
    <!-- End Pricing -->
  </div>
</div>
<!-- End Pricing Carousel -->
Copy
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>

<!-- JS Implementing Plugins -->
<script src="../../assets/js/components/hs.slick-carousel.js"></script>
<script src="../../assets/js/components/hs.show-animation.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // initialization of slick carousel
    $.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');

    // initialization of show animations
    $.HSCore.components.HSShowAnimation.init('.js-animation-link', {
      afterShow: function() {
        $('.js-slick-carousel').slick('setPosition');
      }
    });
  });
</script>
Copy

Pricing #5

Monthly Yearly Save 20%
Users
$

Have 175+ Users?

Contact us for bigger user plan, and enterprise security features.

SVG

Quality

This is where we sit down, grab a cup of coffee and dial in the details.

Security

We aim high at being focused on building relationships with our clients and community.

SVG
SVG

Reliability

Now that we've aligned the details, it's time to get things mapped out and organized.

<!-- Pricing Section -->
<div class="dzsparallaxer auto-init height-is-based-on-content use-loading mode-scroll bg-white" data-options='{direction: "normal"}'>
  <!-- Apply your Parallax background image here -->
  <div class="dzsparallaxer--target" style="height: 120%; background-image: url(../../assets/svg/components/bg-elements-7.svg);"></div>

  <div class="container space-2">
    <!-- Card Group -->
    <div class="card-group card-group-md-break rounded shadow-soft">
      <div class="card">
        <div class="card-body text-center pt-9 px-7">
          <!-- Button Group -->
          <div class="btn-group btn-group-toggle mb-7">
            <a class="js-animation-link btn btn-sm btn-outline-secondary btn-custom-toggle-primary btn-pill active" href="javascript:;"
               data-target="#pricingMonthly"
               data-link-group="idPricing">Monthly</a>
            <a class="js-animation-link btn btn-sm btn-outline-secondary btn-custom-toggle-primary btn-pill" href="javascript:;"
               data-target="#pricingYearly"
               data-link-group="idPricing">
              Yearly
              <span class="badge badge-success badge-pill badge-pos">Save 20%</span>
            </a>
          </div>
          <!-- End Button Group -->

          <!-- Monthly Plans -->
          <div id="pricingMonthly" data-target-group="idPricing">
            <!-- Range Slider -->
            <div class="text-secondary font-weight-semi-bold mb-4">
              <span id="rangeSliderSecondaryResult1" class="mr-2"></span>
              <span class="ml-n2">Users</span>
            </div>
            <div class="display-4 text-primary font-weight-semi-bold mb-5">
              <span>$</span>
              <span id="rangeSliderResult1" class="ml-n2"></span>
            </div>
            <input class="js-range-slider" type="text"
                   data-extra-classes="u-range-slider"
                   data-type="single"
                   data-step="25"
                   data-min="250"
                   data-max="750"
                   data-from="500"
                   data-prefix="$"
                   data-secondary-value='{
                      "steps": [250,275,300,325,350,375,400,425,450,475,500,525,550,575,600,625,650,675,700,725,750],
                      "values": [25,27,30,32,35,37,40,42,45,47,50,52,55,57,60,62,65,67,70,72,75]
                    }'
                   data-result-secondary="#rangeSliderSecondaryResult1"
                   data-result-min="#rangeSliderResult1">
            <!-- End Range Slider -->
          </div>
          <!-- End Monthly Plans -->

          <!-- Yearly Plans -->
          <div id="pricingYearly" style="display: none; opacity: 0;" data-target-group="idPricing">
            <!-- Range Slider -->
            <div class="text-secondary font-weight-semi-bold mb-4">
              <span id="rangeSliderSecondaryResult2" class="mr-2"></span>
              <span class="ml-n2">Users</span>
            </div>
            <div class="display-4 text-primary font-weight-semi-bold mb-5">
              <span>$</span>
              <span id="rangeSliderResult2" class="ml-n2"></span>
            </div>
            <input class="js-range-slider" type="text"
                   data-extra-classes="u-range-slider"
                   data-type="single"
                   data-step="240"
                   data-min="2400"
                   data-max="7200"
                   data-from="2400"
                   data-prefix="$"
                   data-secondary-value='{
                      "steps": [2400,2640,2880,3120,3360,3600,3840,4080,4320,4560,4800,5040,5280,5520,5760,6000,6240,6480,6720,6960,7200],
                      "values": [25,27,30,32,35,37,40,42,45,47,50,52,55,57,60,62,65,67,70,72,75]
                    }'
                   data-result-secondary="#rangeSliderSecondaryResult2"
                   data-result-min="#rangeSliderResult2">
            <!-- End Range Slider -->
          </div>
          <!-- End Yearly Plans -->
        </div>
        <div class="card-footer border-0 pt-0 pb-9 px-7">
          <!-- Icon Blocks -->
          <div class="media align-items-center">
            <figure id="icon13" class="svg-preloader ie-height-56 w-100 max-width-8 mr-4">
              <img class="js-svg-injector" src="../../assets/svg/icons/icon-13.svg" alt="SVG"
                   data-parent="#icon13">
            </figure>
            <div class="media-body">
              <h4 class="h6 mb-1">Have 175+ Users?</h4>
              <p class="small mb-0"><a class="font-size-1" href="../pages/contacts-start-up.html">Contact us</a> for bigger user plan, and enterprise security features.</p>
            </div>
          </div>
          <!-- End Icon Blocks -->
        </div>
      </div>

      <div class="card">
        <div class="card-body py-9 px-7">
          <!-- Icon Blocks -->
          <div class="media align-items-center border-bottom pb-4 mb-4">
            <figure id="icon21" class="svg-preloader ie-height-56 w-100 max-width-8 mr-4">
              <img class="js-svg-injector" src="../../assets/svg/icons/icon-21.svg" alt="SVG"
                   data-parent="#icon21">
            </figure>
            <div class="media-body">
              <h3 class="h5">Quality</h3>
              <p class="mb-0">This is where we sit down, grab a cup of coffee and dial in the details.</p>
            </div>
          </div>
          <!-- End Icon Blocks -->

          <!-- Icon Blocks -->
          <div class="media align-items-center border-bottom pb-4 mb-4">
            <div class="media-body">
              <h3 class="h5">Security</h3>
              <p class="mb-0">We aim high at being focused on building relationships with our clients and community.</p>
            </div>
            <figure id="icon20" class="svg-preloader ie-height-56 w-100 max-width-8 ml-4">
              <img class="js-svg-injector" src="../../assets/svg/icons/icon-20.svg" alt="SVG"
                   data-parent="#icon20">
            </figure>
          </div>
          <!-- End Icon Blocks -->

          <!-- Icon Blocks -->
          <div class="media align-items-center">
            <figure id="icon22" class="svg-preloader ie-height-56 w-100 max-width-8 mr-4">
              <img class="js-svg-injector" src="../../assets/svg/icons/icon-22.svg" alt="SVG"
                   data-parent="#icon22">
            </figure>
            <div class="media-body">
              <h3 class="h5">Reliability</h3>
              <p class="mb-0">Now that we've aligned the details, it's time to get things mapped out and organized.</p>
            </div>
          </div>
          <!-- End Icon Blocks -->
        </div>
      </div>
    </div>
    <!-- End Card Group -->
  </div>
</div>
<!-- End Pricing Section -->
Copy
<link rel="stylesheet" href="../../assets/vendor/ion-rangeslider/css/ion.rangeSlider.css">
<link rel="stylesheet" href="../../assets/vendor/dzsparallaxer/dzsparallaxer.css">
Copy
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/ion-rangeslider/js/ion.rangeSlider.min.js"></script>
<script src="../../assets/vendor/dzsparallaxer/dzsparallaxer.js"></script>

<!-- JS Implementing Plugins -->
<script src="../../assets/js/components/hs.range-slider.js"></script>
<script src="../../assets/js/components/hs.show-animation.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // initialization of show animations
    $.HSCore.components.HSShowAnimation.init('.js-animation-link');

    // initialization of forms
    $.HSCore.components.HSRangeSlider.init('.js-range-slider');
  });
</script>
Copy

Pricing #6

$ 59 .00 month

Start your Front business now. 100% guaranteed money back. No questions asked.

Get Started

No credit card required.

Image Description
SVG

Hundreds of components

Achieve maximum productivity with minimum effort with Front and create robust limitless products.

SVG

Sketch file included

Sketch is small bonus that has some of the theme. Front's Sketch file comes with all demo pages design only.

SVG

Cancel anytime

If its not for you, just cancel, no hidden costs or fees.

SVG

Money back

100% guaranteed money back. No questions asked.

What people are saying

Image Description

The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly. Thank you!

Maria Muszynska
UX designer

I love Front! I love the ease of use, I love the fact that I have total creative freedom...

Charlotte Moore
Developer
Image Description
Image Description

It's beautiful and the coding is done quickly and seamlessly. Keep it up!

James Austin
Manager 
<!-- Pricing Section -->
<div id="pricingSection" class="svg-preloader border-bottom">
  <div class="container space-2">
    <div class="row">
      <div id="stickyBlockStartPoint" class="col-md-5 mb-9 mb-md-0">
        <!-- Sticky Block -->
        <div class="js-sticky-block"
             data-has-sticky-header="true"
             data-offset-target="#logoAndNav"
             data-sticky-view="md"
             data-start-point="#stickyBlockStartPoint"
             data-end-point="#stickyBlockEndPoint"
             data-offset-top="24"
             data-offset-bottom="24">
          <!-- Pricing -->
          <div class="position-relative bg-primary shadow-primary-lg text-white rounded z-index-2 p-7">
            <span class="d-block">
              <span class="align-top">$</span>
              <span class="display-4 font-weight-semi-bold">59</span>
              <span class="font-size-3">.00</span>
              <span class="d-block">month</span>
            </span>

            <hr class="opacity-md my-4">

            <div class="mb-5">
              <p class="text-light">Start your Front business now. 100% guaranteed money back. No questions asked.</p>
            </div>

            <a class="btn btn-white btn-pill transition-3d-hover mb-2" href="https://themes.getbootstrap.com/product/front-multipurpose-responsive-template/">
              Get Started
              <span class="fas fa-arrow-right text-primary font-size-1 ml-2"></span>
            </a>

            <p class="small text-white-70">No credit card required.</p>

            <!-- SVG Shape -->
            <div class="position-absolute bottom-0 right-0 w-100 max-width-15 z-index-n1">
              <figure class="ie-abstract-shapes-11">
                <img class="js-svg-injector rounded-bottom" src="../../assets/svg/components/abstract-shapes-11.svg" alt="Image Description"
                     data-parent="#pricingSection">
              </figure>
            </div>
            <!-- End SVG Shape -->
          </div>
          <!-- End Pricing -->
        </div>
        <!-- End Sticky Block -->
      </div>

      <div class="col-md-7">
        <div class="pl-lg-6">
          <div class="row">
            <div class="col-sm-6 mb-5">
              <!-- Icon Blocks -->
              <figure class="ie-height-40 w-100 max-width-6 mb-3">
                <img class="js-svg-injector" src="../../assets/svg/icons/icon-29.svg" alt="SVG"
                     data-parent="#pricingSection">
              </figure>
              <h4 class="h5">Hundreds of components</h4>
              <p>Achieve maximum productivity with minimum effort with Front and create robust limitless products.</p>
              <!-- End Icon Blocks -->
            </div>
            <div class="col-sm-6 mb-5">
              <!-- Icon Blocks -->
              <figure class="ie-height-40 w-100 max-width-6 mb-3">
                <img class="js-svg-injector" src="../../assets/svg/icons/icon-30.svg" alt="SVG"
                     data-parent="#pricingSection">
              </figure>
              <h4 class="h5">Sketch file included</h4>
              <p>Sketch is small bonus that has some of the theme. Front's Sketch file comes with all demo pages design only.</p>
              <!-- End Icon Blocks -->
            </div>
          </div>

          <div class="row mb-9">
            <div class="col-sm-6 mb-5">
              <!-- Icon Blocks -->
              <figure class="ie-height-40 w-100 max-width-6 mb-3">
                <img class="js-svg-injector" src="../../assets/svg/icons/icon-32.svg" alt="SVG"
                     data-parent="#pricingSection">
              </figure>
              <h4 class="h5">Cancel anytime</h4>
              <p>If its not for you, just cancel, no hidden costs or fees.</p>
              <!-- End Icon Blocks -->
            </div>
            <div class="col-sm-6">
              <!-- Icon Blocks -->
              <figure class="ie-height-40 w-100 max-width-6 mb-3">
                <img class="js-svg-injector" src="../../assets/svg/icons/icon-31.svg" alt="SVG"
                     data-parent="#pricingSection">
              </figure>
              <h4 class="h5">Money back</h4>
              <p>100% guaranteed money back. No questions asked.</p>
              <!-- End Icon Blocks -->
            </div>
          </div>

          <div class="mb-4">
            <h4 class="h5">What people are saying</h4>
          </div>

          <!-- Review -->
          <div class="media mb-3">
            <div class="u-avatar mr-3">
              <img class="img-fluid rounded-circle" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
            </div>
            <div class="media-body">
              <div class="card shadow p-3 mb-2">
                <p class="font-size-1">The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly. Thank you!</p>
                <div class="media align-items-center">
                  <!-- SVG Quote -->
                  <figure class="mr-3">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="30px" height="30px"
                       viewBox="0 0 8 8" style="enable-background:new 0 0 8 8;" xml:space="preserve">
                      <path class="fill-gray-500" d="M3,1.3C2,1.7,1.2,2.7,1.2,3.6c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5
                        C1.4,6.9,1,6.6,0.7,6.1C0.4,5.6,0.3,4.9,0.3,4.5c0-1.6,0.8-2.9,2.5-3.7L3,1.3z M7.1,1.3c-1,0.4-1.8,1.4-1.8,2.3
                        c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5c-0.7,0-1.1-0.3-1.4-0.8
                        C4.4,5.6,4.4,4.9,4.4,4.5c0-1.6,0.8-2.9,2.5-3.7L7.1,1.3z"/>
                    </svg>
                  </figure>
                  <!-- End SVG Quote -->

                  <!-- Reviewer Info -->
                  <div class="media-body">
                    <h5 class="font-size-1 mb-0">Maria Muszynska</h5>
                    <small class="d-block text-secondary">UX designer</small>
                  </div>
                  <!-- End Reviewer Info -->
                </div>
              </div>
            </div>
          </div>
          <!-- End Review -->

          <!-- Review -->
          <div class="media mb-3">
            <div class="card shadow p-3 mb-2 mr-3">
              <p class="font-size-1">I love Front! I love the ease of use, I love the fact that I have total creative freedom...</p>
              <div class="media align-items-center">
                <!-- SVG Quote -->
                <figure class="mr-3">
                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="30px" height="30px"
                     viewBox="0 0 8 8" style="enable-background:new 0 0 8 8;" xml:space="preserve">
                    <path class="fill-gray-500" d="M3,1.3C2,1.7,1.2,2.7,1.2,3.6c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5
                      C1.4,6.9,1,6.6,0.7,6.1C0.4,5.6,0.3,4.9,0.3,4.5c0-1.6,0.8-2.9,2.5-3.7L3,1.3z M7.1,1.3c-1,0.4-1.8,1.4-1.8,2.3
                      c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5c-0.7,0-1.1-0.3-1.4-0.8
                      C4.4,5.6,4.4,4.9,4.4,4.5c0-1.6,0.8-2.9,2.5-3.7L7.1,1.3z"/>
                  </svg>
                </figure>
                <!-- End SVG Quote -->

                <!-- Reviewer Info -->
                <div class="media-body">
                  <h5 class="font-size-1 mb-0">Charlotte Moore</h5>
                  <small class="d-block text-secondary">Developer</small>
                </div>
                <!-- End Reviewer Info -->
              </div>
            </div>

            <div class="media-body">
              <div class="u-avatar">
                <img class="img-fluid rounded-circle" src="../../assets/img/100x100/img8.jpg" alt="Image Description">
              </div>
            </div>
          </div>
          <!-- End Review -->

          <!-- Review -->
          <div class="media">
            <div class="u-avatar mr-3">
              <img class="img-fluid rounded-circle" src="../../assets/img/100x100/img10.jpg" alt="Image Description">
            </div>
            <div class="media-body">
              <div class="card shadow p-3 mb-2">
                <p class="font-size-1">It's beautiful and the coding is done quickly and seamlessly. Keep it up!</p>
                <div class="media align-items-center">
                  <!-- SVG Quote -->
                  <figure class="mr-3">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="30px" height="30px"
                       viewBox="0 0 8 8" style="enable-background:new 0 0 8 8;" xml:space="preserve">
                      <path class="fill-gray-500" d="M3,1.3C2,1.7,1.2,2.7,1.2,3.6c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5
                        C1.4,6.9,1,6.6,0.7,6.1C0.4,5.6,0.3,4.9,0.3,4.5c0-1.6,0.8-2.9,2.5-3.7L3,1.3z M7.1,1.3c-1,0.4-1.8,1.4-1.8,2.3
                        c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5c-0.7,0-1.1-0.3-1.4-0.8
                        C4.4,5.6,4.4,4.9,4.4,4.5c0-1.6,0.8-2.9,2.5-3.7L7.1,1.3z"/>
                    </svg>
                  </figure>
                  <!-- End SVG Quote -->

                  <!-- Reviewer Info -->
                  <div class="media-body">
                    <h5 class="font-size-1 mb-0">James Austin</h5>
                    <small class="d-block text-secondary">Manager</small>
                  </div>
                  <!-- End Reviewer Info -->
                </div>
              </div>
            </div>
          </div>
          <!-- End Review -->
        </div>
      </div>
    </div>
  </div>
</div>
<!-- End Pricing Section -->

<!-- Sticky End Point -->
<div id="stickyBlockEndPoint"></div>
Copy
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>

<!-- JS Implementing Plugins -->
<script src="../../assets/js/components/hs.svg-injector.js"></script>
<script src="../../assets/js/components/hs.sticky-block.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(window).on('load', function () {
    // initialization of svg injector module
    $.HSCore.components.HSSVGIngector.init('.js-svg-injector');
  });

  $(document).on('ready', function () {
    // initialization of sticky blocks
    $.HSCore.components.HSStickyBlock.init('.js-sticky-block');
  });
</script>
Copy

Pricing #7

1.5% +0.5 USD

per successful transaction

SVG

Account creation

+
SVG

Professional account

Included for 3 months,
then $2.5/monthly included VAT

  • 135+ currencies

    Process charges and display prices in your customer's.

  • Global support

    Businesses in 25+ countries can accept payments.

  • Secure payment info collection

    Use our libraries to collect payment information without sensitive data.

<!-- Pricing Section -->
<div class="container space-2">
  <!-- Pricing -->
  <div class="row no-gutters align-items-lg-center">
    <div class="col-lg-7 shadow-lg rounded">
      <div class="text-center py-11 px-5 px-sm-9">
        <header class="mb-9">
          <div class="mb-1">
            <span class="display-4 text-primary font-weight-medium">1.5%</span>
            <span class="badge badge-indigo badge-pill align-top ml-1">+0.5 USD</span>
          </div>
          <p>per successful transaction</p>
        </header>

        <div class="row justify-content-sm-center align-items-sm-center mb-5">
          <div class="col-sm-5">
            <!-- Icon Block -->
            <figure id="iconAccount" class="svg-preloader ie-height-56 max-width-8 mx-auto mb-2">
              <img class="js-svg-injector" src="../../assets/svg/illustrations/account-creation.svg" alt="SVG"
                   data-parent="#iconAccount">
            </figure>
            <h4 class="h6">Account creation</h4>
            <!-- End Icon Block -->
          </div>

          <div class="col-sm-1 my-3 my-sm-0">
            <span class="font-size-3 text-primary font-weight-medium">+</span>
          </div>

          <div class="col-sm-5">
            <!-- Icon Block -->
            <figure id="iconProAccount" class="svg-preloader ie-height-56 max-width-8 mx-auto mb-2">
              <img class="js-svg-injector" src="../../assets/svg/illustrations/pro-account.svg" alt="SVG"
                   data-parent="#iconProAccount">
            </figure>
            <h4 class="h6">Professional account</h4>
            <!-- End Icon Block -->
          </div>
        </div>

        <div class="mb-7">
          <p class="small">Included for 3 months,<br>then $2.5/monthly included VAT</p>
        </div>

        <button type="button" class="btn btn-primary btn-wide btn-pill transition-3d-hover">Get Started</button>
      </div>
    </div>

    <div class="col-lg-5 bg-primary">
      <div class="py-9 px-5 px-sm-9">
        <!-- Info -->
        <ul class="list-unstyled">
          <li class="media pb-3">
            <span class="btn btn-icon btn-xs btn-soft-white rounded-circle mt-1 mr-3">
              <span class="fas fa-angle-right btn-icon__inner"></span>
            </span>
            <div class="media-body">
              <h4 class="h6 text-white mb-1">135+ currencies</h4>
              <p class="text-white-70">Process charges and display prices in your customer's.</p>
            </div>
          </li>
          <li class="border-top opacity-md py-3"></li>
          <li class="media">
            <span class="btn btn-icon btn-xs btn-soft-white rounded-circle mt-1 mr-3">
              <span class="fas fa-angle-right btn-icon__inner"></span>
            </span>
            <div class="media-body">
              <h4 class="h6 text-white mb-1">Global support</h4>
              <p class="text-white-70">Businesses in 25+ countries can accept payments.</p>
            </div>
          </li>
          <li class="border-top opacity-md py-3"></li>
          <li class="media">
            <span class="btn btn-icon btn-xs btn-soft-white rounded-circle mt-1 mr-3">
              <span class="fas fa-angle-right btn-icon__inner"></span>
            </span>
            <div class="media-body">
              <h4 class="h6 text-white mb-1">Secure payment info collection</h4>
              <p class="text-white-70 mb-0">Use our libraries to collect payment information without sensitive data.</p>
            </div>
          </li>
        </ul>
        <!-- End Info -->
      </div>
    </div>
  </div>
  <!-- End Pricing -->
</div>
<!-- End Pricing Section -->
Copy
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>

<!-- JS Implementing Plugins -->
<script src="../../assets/js/components/hs.svg-injector.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(window).on('load', function () {
    // initialization of svg injector module
    $.HSCore.components.HSSVGIngector.init('.js-svg-injector');
  });
</script>
Copy

Pricing #8

Starter $0/mon Growth Hot $60/mon Scale Custom
Cross-platform UI toolkit
14-days free trial
No user limit
Long-term support
Email support Add-on available
Developer tools
Removal of Front branding
Active maintenance & support
Data storage for 365 days Add-on available 
<!-- Pricing Section -->
<div class="container space-2 space-lg-3">
  <!-- Table -->
  <div class="table-responsive-lg w-lg-75 mx-lg-auto">
    <table class="table table-striped table-borderless">
      <thead class="text-center">
        <tr>
          <th scope="col" class="w-40"></th>
          <th scope="col" class="w-20">
            Starter
            <small class="d-block text-secondary">$0/mon</small>
          </th>
          <th scope="col" class="w-20 border-left border-right">
            Growth
            <span class="badge badge-warning font-weight-medium badge-pill ml-1">Hot</span>
            <small class="d-block text-secondary">$60/mon</small>
          </th>
          <th scope="col" class="w-20">
            Scale
            <small class="d-block text-secondary">Custom</small>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr class="border-top border-bottom">
          <th scope="row" class="h6 bg-white pt-5 pb-3 px-4 mb-0">Cross-platform UI toolkit</th>
          <td class="bg-white"></td>
          <td class="bg-white border-left border-right"></td>
          <td class="bg-white"></td>
        </tr>
        <tr>
          <th scope="row" class="font-size-1 font-weight-normal py-3 px-4">14-days free trial</th>
          <td class="text-center text-success p-3">
            <small class="fas fa-check"></small>
          </td>
          <td class="text-center text-success border-left border-right p-3">
            <small class="fas fa-check"></small>
          </td>
          <td class="text-success text-center p-3">
            <small class="fas fa-check"></small>
          </td>
        </tr>
        <tr>
          <th scope="row" class="font-size-1 font-weight-normal py-3 px-4">No user limit</th>
          <td class="text-center text-secondary p-3"></td>
          <td class="text-center text-success border-left border-right p-3">
            <small class="fas fa-check"></small>
          </td>
          <td class="text-success text-center p-3">
            <small class="fas fa-check"></small>
          </td>
        </tr>
        <tr>
          <th scope="row" class="font-size-1 font-weight-normal py-3 px-4">Long-term support</th>
          <td class="text-center text-secondary py-3 px-4"></td>
          <td class="text-center text-secondary border-left border-right py-3 px-4"></td>
          <td class="text-success text-center p-3">
            <small class="fas fa-check"></small>
          </td>
        </tr>
        <tr>
          <th scope="row" class="font-size-1 font-weight-normal py-3 px-4">Email support</th>
          <td class="text-center text-secondary p-3">
            <span class="btn btn-xs btn-soft-primary btn-pill font-weight-medium text-uppercase py-1 px-2">Add-on available</span>
          </td>
          <td class="text-center text-secondary border-left border-right py-3 px-4"></td>
          <td class="text-success text-center p-3">
            <small class="fas fa-check"></small>
          </td>
        </tr>
        <tr>
          <th scope="row" class="h6 bg-white pt-5 pb-3 px-4 mb-0">Developer tools</th>
          <td class="bg-white"></td>
          <td class="bg-white border-left border-right"></td>
          <td class="bg-white"></td>
        </tr>
        <tr>
          <th scope="row" class="font-size-1 font-weight-normal py-3 px-4">Removal of Front branding</th>
          <td class="text-center text-secondary p-3"></td>
          <td class="text-center text-success border-left border-right p-3">
            <small class="fas fa-check"></small>
          </td>
          <td class="text-success text-center p-3">
            <small class="fas fa-check"></small>
          </td>
        </tr>
        <tr>
          <th scope="row" class="font-size-1 font-weight-normal py-3 px-4">Active maintenance & support</th>
          <td class="text-center text-success p-3">
            <small class="fas fa-check"></small>
          </td>
          <td class="text-center text-success border-left border-right p-3">
            <small class="fas fa-check"></small>
          </td>
          <td class="text-success text-center p-3">
            <small class="fas fa-check"></small>
          </td>
        </tr>
        <tr>
          <th scope="row" class="font-size-1 font-weight-normal py-3 px-4">Data storage for 365 days</th>
          <td class="text-center text-secondary p-3"></td>
          <td class="text-center text-secondary border-left border-right p-3">
            <span class="btn btn-xs btn-soft-primary btn-pill font-weight-medium text-uppercase py-1 px-2">Add-on available</span>
          </td>
          <td class="text-success text-center p-3">
            <small class="fas fa-check"></small>
          </td>
        </tr>
        <tr>
          <th scope="row" class="bg-white p-3"></th>
          <td class="bg-white text-center p-3">
            <button type="button" class="btn btn-xs btn-soft-indigo transition-3d-hover">Choose Plan</button>
          </td>
          <td class="bg-white text-center border-left border-right p-3">
            <button type="button" class="btn btn-xs btn-soft-indigo transition-3d-hover">Choose Plan</button>
          </td>
          <td class="bg-white text-center p-3">
            <button type="button" class="btn btn-xs btn-primary transition-3d-hover">Contact Us</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <!-- End Table -->
</div>
<!-- End Pricing Section -->
Copy