Front business
Install Front on your own infrastructure
<!-- Hero Section -->
<div id="SVGheroBottomShape" class="svg-preloader position-relative gradient-half-primary-v5 z-index-2 overflow-hidden">
<div class="container space-top-2 space-top-md-3">
<!-- Title -->
<div class="w-md-80 w-lg-50 text-center mx-md-auto mb-9">
<h1 class="display-4 font-size-md-down-5 text-white">Front <strong class="font-weight-semi-bold">business</strong></h1>
<p class="lead text-white-70">Install Front on your own infrastructure</p>
</div>
<!-- End Title -->
<!-- Slick Carousel -->
<div class="js-slick-carousel u-slick u-slick--gutters-3 z-index-2"
data-slides-show="5"
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": 4
}
}, {
"breakpoint": 992,
"settings": {
"slidesToShow": 3
}
}, {
"breakpoint": 768,
"settings": {
"slidesToShow": 2
}
}, {
"breakpoint": 480,
"settings": {
"slidesToShow": 1
}
}]'>
<div class="js-slide mt-1">
<!-- Icon Block -->
<article class="card border-0 shadow-sm transition-3d-hover mb-3">
<div class="card-body bg-primary rounded-top p-5">
<div class="u-avatar bg-white rounded p-2 mx-auto">
<img class="img-fluid" src="../../assets/img/160x160/img12.png" alt="Image Description">
</div>
</div>
<div class="card-body p-4">
<div class="mb-3">
<h2 class="h6 mb-0">Atlassian</h2>
<small class="d-block text-secondary">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 border-0 shadow-sm transition-3d-hover mb-3">
<div class="card-body bg-danger rounded-top p-5">
<div class="u-avatar bg-white rounded p-2 mx-auto">
<img class="img-fluid" src="../../assets/img/160x160/img13.png" alt="Image Description">
</div>
</div>
<div class="card-body p-4">
<div class="mb-3">
<h2 class="h6 mb-0">Asana</h2>
<small class="d-block text-secondary">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 border-0 shadow-sm transition-3d-hover mb-3">
<div class="card-body bg-warning rounded-top p-5">
<div class="u-avatar bg-white rounded p-2 mx-auto">
<img class="img-fluid" src="../../assets/img/160x160/img14.png" alt="Image Description">
</div>
</div>
<div class="card-body p-4">
<div class="mb-3">
<h2 class="h6 mb-0">Slack</h2>
<small class="d-block text-secondary">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 border-0 shadow-sm transition-3d-hover mb-3">
<div class="card-body bg-success rounded-top p-5">
<div class="u-avatar bg-white rounded p-2 mx-auto">
<img class="img-fluid" src="../../assets/img/160x160/img15.png" alt="Image Description">
</div>
</div>
<div class="card-body p-4">
<div class="mb-3">
<h2 class="h6 mb-0">Spotify</h2>
<small class="d-block text-secondary">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 border-0 shadow-sm transition-3d-hover mb-3">
<div class="card-body bg-primary rounded-top p-5">
<div class="u-avatar bg-white rounded p-2 mx-auto">
<img class="img-fluid" src="../../assets/img/160x160/img16.png" alt="Image Description">
</div>
</div>
<div class="card-body p-4">
<div class="mb-3">
<h2 class="h6 mb-0">DigitalOcean</h2>
<small class="d-block text-secondary">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 -->
</div>
<!-- SVG Bottom Shape -->
<figure class="position-absolute right-0 bottom-0 left-0">
<img class="js-svg-injector" src="../../assets/svg/components/irregular-shape-1-bottom.svg" alt="Image Description"
data-parent="#SVGheroBottomShape">
</figure>
<!-- End SVG Bottom Shape -->
<!-- SVG Background Element -->
<figure class="position-absolute top-0 right-0 left-0 z-index-n1">
<img class="js-svg-injector" src="../../assets/svg/components/bg-elements-9.svg" alt="Image Description"
data-parent="#SVGheroBottomShape">
</figure>
<!-- End SVG Background Element -->
</div>
<!-- End Hero Section -->
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.slick-carousel.js"></script>
<script src="../../assets/js/components/hs.svg-injector.js"></script>
<script src="../../assets/js/components/hs.go-to.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 slick carousel
$.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
// initialization of go to
$.HSCore.components.HSGoTo.init('.js-go-to');
});
</script>