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.

SVG

Powerful features

SVG

Top-notch code

SVG

Excellent design

SVG

Goal driven

Image Description
<!-- 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.HSPopup.init('.js-fancybox');
  });
</script>