Pricing - Interactive
Set the price of your business with modern design pricing blocks.
Interactive #1
Pricing plans
No additional costs.
No additional costs.
Pay for what you use.
Choose the most suitable service for your needs with reasonable price.
Individual Plan
$ 22 /month
-
Community support
-
400+ pages
-
100+ header variations
-
20+ home page options
Enterprise Plan
$ 99 /month
-
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 -->
<!-- JS Implementing Plugins -->
<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');
});
</script>
Interactive #2
<!-- 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-primary transition-3d-hover">Contact Us</button>
</div>
<!-- End Content -->
</div>
<!-- End Pricing -->
</div>
</div>
<!-- End Pricing Carousel -->
</div>
<!-- End Pricing Section -->
<!-- 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>
Interactive #3
$
59
.00
month
Get Started
Start your Front business now. 100% guaranteed money back. No questions asked.
No credit card required.
Hundreds of components
Achieve maximum productivity with minimum effort with Front and create robust limitless products.
Sketch file included
Sketch is small bonus that has some of the theme. Front's Sketch file comes with all demo pages design only.
Cancel anytime
If its not for you, just cancel, no hidden costs or fees.
Money back
100% guaranteed money back. No questions asked.
What people are saying
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 designerI love Front! I love the ease of use, I love the fact that I have total creative freedom...
Charlotte Moore
Developer
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>
<!-- 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>
Interactive #4
<!-- 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 -->
<!-- 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 show animations
$.HSCore.components.HSShowAnimation.init('.js-animation-link', {
afterShow: function() {
$('.js-slick-carousel').slick('setPosition');
}
});
});
</script>
Interactive #5
Users
$
Have 175+ Users?
Contact us for bigger user plan, and enterprise security features.
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.
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 -->
<link rel="stylesheet" href="../../assets/vendor/ion-rangeslider/css/ion.rangeSlider.css">
<link rel="stylesheet" href="../../assets/vendor/dzsparallaxer/dzsparallaxer.css">
<!-- 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>