Why Front?
Front is an incredibly beautiful, fully responsive, and mobile-first projects on the web – it is the perfect starting point for any creative and professional sites.
Powerful features
Top-notch code
Excellent design
Goal driven
<!-- Learn Section -->
<div class="clearfix border-bottom space-top-2 space-top-md-4 space-top-lg-3">
<div class="container">
<!-- Title -->
<div class="w-md-75 w-lg-50 text-center mx-md-auto mb-9">
<h2 class="h1 font-weight-normal">Why Front?</h2>
<p>Front is an incredibly beautiful, fully responsive, and mobile-first projects on the web – it is the perfect starting point for any creative and professional sites.</p>
</div>
<!-- End Title -->
<div id="SVGicons" class="svg-preloader w-lg-75 mx-md-auto mb-11">
<div class="row">
<div class="col-6 col-sm-3 mb-5 mb-sm-0">
<!-- Icon Blocks -->
<div class="text-center">
<figure class="ie-height-40 w-100 max-width-6 mx-auto mb-3">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-6.svg" alt="SVG"
data-parent="#SVGicons">
</figure>
<h3 class="h6 font-weight-normal">Powerful features</h3>
</div>
<!-- End Icon Blocks -->
</div>
<div class="col-6 col-sm-3 mb-5 mb-sm-0">
<!-- Icon Blocks -->
<div class="text-center">
<figure class="ie-height-40 w-100 max-width-6 mx-auto mb-3">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-26.svg" alt="SVG"
data-parent="#SVGicons">
</figure>
<h3 class="h6 font-weight-normal">Top-notch code</h3>
</div>
<!-- End Icon Blocks -->
</div>
<div class="col-6 col-sm-3">
<!-- Icon Blocks -->
<div class="text-center">
<figure class="ie-height-40 w-100 max-width-6 mx-auto mb-3">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-21.svg" alt="SVG"
data-parent="#SVGicons">
</figure>
<h3 class="h6 font-weight-normal">Excellent design</h3>
</div>
<!-- End Icon Blocks -->
</div>
<div class="col-6 col-sm-3">
<!-- Icon Blocks -->
<div class="text-center">
<figure class="ie-height-40 w-100 max-width-6 mx-auto mb-3">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-8.svg" alt="SVG"
data-parent="#SVGicons">
</figure>
<h3 class="h6 font-weight-normal">Goal driven</h3>
</div>
<!-- End Icon Blocks -->
</div>
</div>
</div>
</div>
<!-- Showcase Mockup -->
<figure id="SVGshowcaseMockup3" class="svg-preloader ie-showcase-mockup-3">
<img class="js-svg-injector" src="../../assets/svg/illustrations/showcase-mockup-3.svg" alt="Image Description"
data-img-paths='[
{"targetId": "#SVGshowcaseMockup3Img1", "newPath": "../../assets/img/755x470/img2.jpg"}
]'
data-parent="#SVGshowcaseMockup3">
</figure>
<!-- End Showcase Mockup -->
</div>
<!-- End Learn Section -->
<link rel="stylesheet" href="../../assets/vendor/fancybox/jquery.fancybox.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/fancybox/jquery.fancybox.min.js"></script>
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.fancybox.js"></script>
<script src="../../assets/js/components/hs.svg-injector.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 popups
$.HSCore.components.HSFancyBox.init('.js-fancybox');
});
</script>