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.HSFancyBox.init('.js-fancybox');
                  });
                </script>