No more complex thing for your product
No complicated packages. An afforable flat fee every month.
Early release
$69 billed annually- Community support
- 400+ pages
- 100+ header variations
HTML:
<!-- Hero Section -->
<div class="bg-purple bg-img-hero" style="background-image: url(../../assets/img/bg/bg2.png);">
<div class="container text-center space-2-top space-4-top--lg space-3-bottom">
<div class="w-lg-75 mx-lg-auto">
<h1 class="text-white">No more complex thing for your product</h1>
<p class="lead text-light">No complicated packages. An afforable flat fee every month.</p>
</div>
</div>
</div>
<!-- End Hero Section -->
<!-- Pricing Section -->
<div class="container">
<div class="row justify-content-lg-between align-items-md-center">
<div class="col-md-6 col-lg-5 order-md-2 mt-n9">
<div class="position-relative">
<div class="position-relative z-index-2 w-90 w-sm-75 mx-auto">
<!-- Pricing -->
<div class="card text-center shadow border-0">
<!-- Header -->
<header class="card-header p-5">
<h2 class="h6 text-uppercase mb-4">Early release</h2>
<span class="d-block">
<span class="display-4 text-primary">
$69
</span>
<span class="d-block text-primary font-size-14">billed annually</span>
</span>
</header>
<!-- End Header -->
<!-- Content -->
<div class="card-body p-5">
<ul class="list-unstyled mb-4">
<li class="font-size-14 py-2">Community support</li>
<li class="font-size-14 py-2">400+ pages</li>
<li class="font-size-14 py-2">100+ header variations</li>
</ul>
<button type="button" class="btn btn-sm btn-block btn-primary">Sign Up for Free Trial</button>
</div>
<!-- End Content -->
</div>
<!-- End Pricing -->
</div>
<!-- SVG Shape -->
<div class="w-100 h-100 content-centered">
<img class="img-fluid" src="../../assets/svg/shapes/shape3.svg" alt="SVG Shape">
</div>
<!-- End SVG Shape -->
</div>
</div>
<div class="col-md-6 order-md-1 space-2-top">
<!-- Slick Carousel - Testimonials -->
<div class="js-slick-carousel u-slick"
data-fade="true"
data-autoplay="true"
data-speed="7500"
data-pagi-classes="u-slick__pagination justify-content-start mt-7">
<div class="js-slide">
<!-- Testimonials -->
<blockquote class="lead mb-5">"I love Space! I love the ease of use, I love the fact that I have total creative freedom. The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly."</blockquote>
<div class="media">
<img class="u-avatar rounded-circle mr-3" src="../assets/img/100x100/img1.jpg" alt="Image Description">
<div class="media-body">
<h3 class="h6 mb-0">Maria Muszynska</h3>
<span class="text-secondary">Senior developer at <a href="#">Google</a></span>
</div>
</div>
<!-- End Testimonials -->
</div>
<div class="js-slide">
<!-- Testimonials -->
<blockquote class="lead mb-5">"We are incredibly impressed with Space and how well it supports its customers with amazing products and services. One simple subscription gives you access to all our tools, plus so much more."</blockquote>
<div class="media">
<img class="u-avatar rounded-circle mr-3" src="../assets/img/100x100/img4.jpg" alt="Image Description">
<div class="media-body">
<h3 class="h6 mb-0">Mark McManus</h3>
<span class="text-secondary">Software engineer at <a href="#">Slack</a></span>
</div>
</div>
<!-- End Testimonials -->
</div>
<div class="js-slide">
<!-- Testimonials -->
<blockquote class="lead mb-5">"One simple subscription gives you access to all our tools, plus so much more. Space brings so many benefits to any team that does anything following a process. It is the easiest way for teams to build cool things work—and get results."</blockquote>
<div class="media">
<img class="u-avatar rounded-circle mr-3" src="../assets/img/100x100/img14.jpg" alt="Image Description">
<div class="media-body">
<h3 class="h6 mb-0">Ella Brown</h3>
<span class="text-secondary">Head of IT department at <a href="#">Apple</a></span>
</div>
</div>
<!-- End Testimonials -->
</div>
</div>
<!-- End Slick Carousel - Testimonials -->
</div>
</div>
</div>
<!-- End Pricing Section -->
CSS library:
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>
<!-- JS Space -->
<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>