New
Blogs - with Carousel
Component #1
Success stories
See how Front is helping teams get organized and work smarter
Front Projects has proved to be most efficient cloud based project tracking and bug tracking tool.
Front Projects has proved to be most efficient cloud based project tracking and bug tracking tool.
Front Projects has proved to be most efficient cloud based project tracking and bug tracking tool.
Google is an innovator in public safety technology. First-to-market with TASER conducted energy weapons (CEWs).
Visitors can build a form or survey before signing up, but in order to save and share it.
<!-- Features Section -->
<div class="bg-navy rounded mx-3 mx-xl-10" style="background-image: url(../../assets/svg/components/abstract-shapes-20.svg);">
<div class="container-xl container-fluid space-1 space-md-2 px-4 px-md-8 px-lg-10">
<div class="px-3">
<!-- Title -->
<div class="w-md-80 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
<span class="d-block small text-white-70 font-weight-bold text-cap mb-2">Success stories</span>
<h2 class="text-white">See how Front is helping teams get organized and work smarter</h2>
</div>
<!-- End Title -->
<!-- Slick Carousel -->
<div class="js-slick-carousel slick slick-equal-height ie-slick-equal-height slick-gutters-3"
data-hs-slick-carousel-options='{
"prevArrow": "<span class=\"fas fa-arrow-left slick-arrow slick-arrow-primary-white slick-arrow-left slick-arrow-centered-y shadow-soft rounded-circle ml-n2\"></span>",
"nextArrow": "<span class=\"fas fa-arrow-right slick-arrow slick-arrow-primary-white slick-arrow-right slick-arrow-centered-y shadow-soft rounded-circle mr-n2\"></span>",
"slidesToShow": 3,
"infinite": true,
"dots": true,
"dotsClass": "slick-pagination slick-pagination-white d-none mt-5",
"responsive": [{
"breakpoint": 992,
"settings": {
"slidesToShow": 2
}
}, {
"breakpoint": 768,
"settings": {
"slidesToShow": 2
}
}, {
"breakpoint": 554,
"settings": {
"slidesToShow": 1
}
}]
}'>
<div class="js-slide mb-4">
<!-- Card Info -->
<div class="card h-100">
<img class="card-img-top" src="../../assets/img/480x320/img7.jpg" alt="Image Description">
<div class="card-body">
<div class="max-w-13rem w-100 mb-3">
<img class="img-fluid" src="../../assets/svg/clients-logo/airbnb-original.svg" alt="Logo">
</div>
<p class="mb-0">Front Projects has proved to be most efficient cloud based project tracking and bug tracking tool.</p>
</div>
<div class="card-footer border-0 pt-0">
<a class="font-weight-bold" href="#">Read story <i class="fas fa-angle-right fa-sm ml-1"></i></a>
</div>
</div>
<!-- End Card Info -->
</div>
<div class="js-slide mb-4">
<!-- Card Info -->
<div class="card h-100">
<img class="card-img-top" src="../../assets/img/480x320/img6.jpg" alt="Image Description">
<div class="card-body">
<div class="max-w-13rem w-100 mb-3">
<img class="img-fluid" src="../../assets/svg/clients-logo/slack-original.svg" alt="Logo">
</div>
<p class="mb-0">Front Projects has proved to be most efficient cloud based project tracking and bug tracking tool.</p>
</div>
<div class="card-footer border-0 pt-0">
<a class="font-weight-bold" href="#">Read story <i class="fas fa-angle-right fa-sm ml-1"></i></a>
</div>
</div>
<!-- End Card Info -->
</div>
<div class="js-slide mb-4">
<!-- Card Info -->
<div class="card h-100">
<img class="card-img-top" src="../../assets/img/480x320/img14.jpg" alt="Image Description">
<div class="card-body">
<div class="max-w-13rem w-100 mb-3">
<img class="img-fluid" src="../../assets/svg/clients-logo/paypal-original.svg" alt="Logo">
</div>
<p class="mb-0">Front Projects has proved to be most efficient cloud based project tracking and bug tracking tool.</p>
</div>
<div class="card-footer border-0 pt-0">
<a class="font-weight-bold" href="#">Read story <i class="fas fa-angle-right fa-sm ml-1"></i></a>
</div>
</div>
<!-- End Card Info -->
</div>
<div class="js-slide mb-4">
<!-- Card Info -->
<div class="card h-100">
<img class="card-img-top" src="../../assets/img/480x320/img12.jpg" alt="Image Description">
<div class="card-body">
<div class="max-w-13rem w-100 mb-3">
<img class="img-fluid" src="../../assets/svg/clients-logo/fitbit-original.svg" alt="Logo">
</div>
<p class="mb-0">Google is an innovator in public safety technology. First-to-market with TASER conducted energy weapons (CEWs).</p>
</div>
<div class="card-footer border-0 pt-0">
<a class="font-weight-bold" href="#">Read story <i class="fas fa-angle-right fa-sm ml-1"></i></a>
</div>
</div>
<!-- End Card Info -->
</div>
<div class="js-slide mb-4">
<!-- Card Info -->
<div class="card h-100">
<img class="card-img-top" src="../../assets/img/480x320/img27.jpg" alt="Image Description">
<div class="card-body">
<div class="max-w-13rem w-100 mb-3">
<img class="img-fluid" src="../../assets/svg/clients-logo/hubspot-original.svg" alt="Logo">
</div>
<p class="mb-0">Visitors can build a form or survey before signing up, but in order to save and share it.</p>
</div>
<div class="card-footer border-0 pt-0">
<a class="font-weight-bold" href="#">Read story <i class="fas fa-angle-right fa-sm ml-1"></i></a>
</div>
</div>
<!-- End Card Info -->
</div>
</div>
<!-- End Slick Carousel -->
</div>
</div>
</div>
<!-- End Features Section -->
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>
<!-- JS Front -->
<script src="../../assets/js/hs.slick-carousel.js"></script>
<!-- JS Plugins Init. -->
<script>
// initialization of slick carousel
$('.js-slick-carousel').each(function() {
var slickCarousel = $.HSCore.components.HSSlickCarousel.init($(this));
});
</script>
Component #2
Check out our newest and most popular programs
<!-- Popular Categories Section -->
<div class="space-2" style="background: url(../../assets/svg/components/abstract-shapes-9.svg) center no-repeat;">
<div class="position-relative">
<div class="container space-2">
<!-- Title -->
<div class="row align-items-md-center mb-7">
<div class="col-md-6 mb-4 mb-md-0">
<h2>Check out our newest and most popular programs</h2>
</div>
<div class="col-md-6 text-md-right">
<a class="font-weight-bold" href="#">See all Programs <i class="fa fa-angle-right fa-sm ml-1"></i></a>
</div>
</div>
<!-- End Title -->
<div class="js-slick-carousel slick slick-equal-height slick-gutters-3 slick-center-mode-right slick-center-mode-right-offset"
data-hs-slick-carousel-options='{
"prevArrow": "<span class=\"fa fa-arrow-left slick-arrow slick-arrow-primary-white slick-arrow-left slick-arrow-centered-y shadow-soft rounded-circle ml-sm-n2\"></span>",
"nextArrow": "<span class=\"fa fa-arrow-right slick-arrow slick-arrow-primary-white slick-arrow-right slick-arrow-centered-y shadow-soft rounded-circle mr-sm-2 mr-xl-4\"></span>",
"slidesToShow": 5,
"infinite": true,
"responsive": [{
"breakpoint": 1200,
"settings": {
"slidesToShow": 4
}
}, {
"breakpoint": 992,
"settings": {
"slidesToShow": 3
}
}, {
"breakpoint": 768,
"settings": {
"slidesToShow": 2
}
}, {
"breakpoint": 554,
"settings": {
"slidesToShow": 1
}
}]
}'>
<!-- Article -->
<article class="js-slide pt-2">
<a class="card bg-img-hero w-100 min-h-270rem transition-3d-hover" href="#" style="background-image: url(../../assets/img/400x500/img14.jpg);">
<div class="card-body">
<span class="d-block small text-white-70 font-weight-bold text-cap mb-2">New</span>
<h3 class="text-white">Cloud computing</h3>
</div>
<div class="card-footer border-0 bg-transparent pt-0">
<span class="text-white font-size-1 font-weight-bold">Read now</span>
</div>
</a>
</article>
<!-- End Article -->
<!-- Article -->
<article class="js-slide pt-2">
<a class="card bg-img-hero w-100 min-h-270rem transition-3d-hover" href="#" style="background-image: url(../../assets/img/400x500/img13.jpg);">
<div class="card-body">
<span class="d-block small text-white-70 font-weight-bold text-cap mb-2">Phython</span>
<h3 class="text-white">What's new in Phython 3.7.2</h3>
</div>
<div class="card-footer border-0 bg-transparent pt-0">
<span class="text-white font-size-1 font-weight-bold">Read now</span>
</div>
</a>
</article>
<!-- End Article -->
<!-- Article -->
<article class="js-slide pt-2">
<a class="card bg-img-hero w-100 min-h-270rem transition-3d-hover" href="#" style="background-image: url(../../assets/img/400x500/img15.jpg);">
<div class="card-body">
<span class="d-block small text-white-70 font-weight-bold text-cap mb-2">Tooling</span>
<h3 class="text-white">Build a staging server</h3>
</div>
<div class="card-footer border-0 bg-transparent pt-0">
<span class="text-white font-size-1 font-weight-bold">Read now</span>
</div>
</a>
</article>
<!-- End Article -->
<!-- Article -->
<article class="js-slide pt-2">
<a class="card bg-img-hero w-100 min-h-270rem transition-3d-hover" href="#" style="background-image: url(../../assets/img/400x500/img16.jpg);">
<div class="card-body">
<span class="d-block small text-white-70 font-weight-bold text-cap mb-2">JavaScript</span>
<h3 class="text-white">Laravel, Vue and SPAs</h3>
</div>
<div class="card-footer border-0 bg-transparent pt-0">
<span class="text-white font-size-1 font-weight-bold">Read now</span>
</div>
</a>
</article>
<!-- End Article -->
<!-- Article -->
<article class="js-slide pt-2">
<a class="card bg-img-hero w-100 min-h-270rem transition-3d-hover" href="#" style="background-image: url(../../assets/img/400x500/img17.jpg);">
<div class="card-body">
<span class="d-block small text-white-70 font-weight-bold text-cap mb-2">Popular</span>
<h3 class="text-white">Artificial Intelligence</h3>
</div>
<div class="card-footer border-0 bg-transparent pt-0">
<span class="text-white font-size-1 font-weight-bold">Read now</span>
</div>
</a>
</article>
<!-- End Article -->
<!-- Article -->
<article class="js-slide pt-2">
<a class="card bg-img-hero w-100 min-h-270rem transition-3d-hover" href="#" style="background-image: url(../../assets/img/400x500/img18.jpg);">
<div class="card-body">
<span class="d-block small text-white-70 font-weight-bold text-cap mb-2">PHP</span>
<h3 class="text-white">Programming terms explained</h3>
</div>
<div class="card-footer border-0 bg-transparent pt-0">
<span class="text-white font-size-1 font-weight-bold">Read now</span>
</div>
</a>
</article>
<!-- End Article -->
</div>
</div>
<div class="w-100 w-md-65 bg-light position-absolute top-0 right-0 bottom-0 rounded-left z-index-n1"></div>
</div>
</div>
<!-- End Popular Categories Section -->
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>
<!-- JS Front -->
<script src="../../assets/js/hs.slick-carousel.js"></script>
<!-- JS Plugins Init. -->
<script>
// initialization of slick carousel
$('.js-slick-carousel').each(function() {
var slickCarousel = $.HSCore.components.HSSlickCarousel.init($(this));
});
</script>