Software for People
Install Front on your own infrastructure.
Asana
Productivity
Slack
Collaboration tool
Spotify
Streaming service
DigitalOcean
Cloud infrastructure
<!-- Hero Section -->
<div class="gradient-y-sm-primary position-relative z-index-2 overflow-hidden">
<div class="container space-top-2 space-top-lg-4 position-relative">
<!-- Title -->
<div class="w-md-80 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
<h1 class="display-4 mb-3">Software for People</h1>
<p class="lead">Install Front on your own infrastructure.</p>
</div>
<!-- End Title -->
<!-- Slick Carousel -->
<div class="js-slick-carousel slick slick-gutters-3 z-index-2"
data-hs-slick-carousel-options='{
"slidesToShow": 5,
"dots": true,
"dotsClass": "slick-pagination d-lg-none",
"responsive": [{
"breakpoint": 1200,
"settings": {
"slidesToShow": 4
}
}, {
"breakpoint": 992,
"settings": {
"slidesToShow": 3
}
}, {
"breakpoint": 768,
"settings": {
"slidesToShow": 2
}
}, {
"breakpoint": 554,
"settings": {
"slidesToShow": 1
}
}]
}'>
<div class="js-slide mt-1">
<!-- Icon Block -->
<article class="card shadow-sm max-w-27rem transition-3d-hover mx-auto mb-5">
<div class="card-header bg-primary text-center rounded-top">
<div class="avatar d-block bg-white rounded p-2 mx-auto">
<img class="avatar-img" src="../../assets/img/160x160/img12.png" alt="Image Description">
</div>
</div>
<div class="card-body">
<div class="mb-3">
<h2 class="h4 mb-1">Atlassian</h2>
<small class="d-block text-body">Developer tools</small>
</div>
<a class="btn btn-sm btn-block btn-primary" href="#">Install</a>
</div>
</article>
<!-- End Icon Block -->
</div>
<div class="js-slide mt-1">
<!-- Icon Block -->
<article class="card shadow-sm max-w-27rem transition-3d-hover mx-auto mb-5">
<div class="card-header bg-danger text-center rounded-top">
<div class="avatar d-block bg-white rounded p-2 mx-auto">
<img class="avatar-img" src="../../assets/img/160x160/img13.png" alt="Image Description">
</div>
</div>
<div class="card-body">
<div class="mb-3">
<h3 class="h4 mb-1">Asana</h3>
<small class="d-block text-body">Productivity</small>
</div>
<a class="btn btn-sm btn-block btn-primary" href="#">Install</a>
</div>
</article>
<!-- End Icon Block -->
</div>
<div class="js-slide mt-1">
<!-- Icon Block -->
<article class="card shadow-sm max-w-27rem transition-3d-hover mx-auto mb-5">
<div class="card-header bg-warning text-center rounded-top">
<div class="avatar d-block bg-white rounded p-2 mx-auto">
<img class="avatar-img" src="../../assets/img/160x160/img14.png" alt="Image Description">
</div>
</div>
<div class="card-body">
<div class="mb-3">
<h4 class="mb-1">Slack</h4>
<small class="d-block text-body">Collaboration tool</small>
</div>
<a class="btn btn-sm btn-block btn-primary" href="#">Install</a>
</div>
</article>
<!-- End Icon Block -->
</div>
<div class="js-slide mt-1">
<!-- Icon Block -->
<article class="card shadow-sm max-w-27rem transition-3d-hover mx-auto mb-5">
<div class="card-header bg-success text-center rounded-top">
<div class="avatar d-block bg-white rounded p-2 mx-auto">
<img class="avatar-img" src="../../assets/img/160x160/img15.png" alt="Image Description">
</div>
</div>
<div class="card-body">
<div class="mb-3">
<h4 class="mb-1">Spotify</h4>
<small class="d-block text-body">Streaming service</small>
</div>
<a class="btn btn-sm btn-block btn-primary" href="#">Install</a>
</div>
</article>
<!-- End Icon Block -->
</div>
<div class="js-slide mt-1">
<!-- Icon Block -->
<article class="card shadow-sm max-w-27rem transition-3d-hover mx-auto mb-5">
<div class="card-header bg-primary text-center rounded-top">
<div class="avatar d-block bg-white rounded p-2 mx-auto">
<img class="avatar-img" src="../../assets/img/160x160/img16.png" alt="Image Description">
</div>
</div>
<div class="card-body">
<div class="mb-3">
<h4 class="mb-1">DigitalOcean</h4>
<small class="d-block text-body">Cloud infrastructure</small>
</div>
<a class="btn btn-sm btn-block btn-primary" href="#">Install</a>
</div>
</article>
<!-- End Icon Block -->
</div>
</div>
<!-- End Slick Carousel -->
<!-- SVG Shapes -->
<figure class="position-absolute z-index-n1" style="top: -35rem; left: 50rem; width: 62rem; height: 62rem;">
<svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 260 260">
<circle fill="#e7eaf3" opacity=".7" cx="130" cy="130" r="130"/>
</svg>
</figure>
<figure class="position-absolute z-index-n1" style="top: 15rem; left: 70rem; width: 20rem; height: 20rem;">
<img class="img-fluid" src="../../assets/svg/components/circled-stripe.svg" alt="Image Description">
</figure>
<figure class="position-absolute z-index-n1" style="bottom: 7rem; left: -3rem; width: 15rem; height: 15rem;">
<img class="img-fluid" src="../../assets/svg/components/dots-3.svg" alt="Image Description">
</figure>
<!-- End SVG Shapes -->
</div>
<!-- SVG Bottom Shape -->
<figure class="position-absolute right-0 bottom-0 left-0">
<svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 1921 273">
<polygon fill="#fff" points="0,273 1921,273 1921,0 "/>
</svg>
</figure>
<!-- End SVG Bottom Shape -->
</div>
<!-- End Hero 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>
$(document).on('ready', function () {
// initialization of slick carousel
$('.js-slick-carousel').each(function() {
var slickCarousel = $.HSCore.components.HSSlickCarousel.init($(this));
});
});
</script>