Introducing Front

Your company will look |
Attract more visitors, and win more business with Front template.

Image Description
<!-- Hero Section -->
<div class="d-lg-flex position-relative">
  <div class="container d-lg-flex align-items-lg-center space-top-2 space-top-md-5 space-lg-0 min-height-lg-100vh">
    <!-- Content -->
    <div class="row w-100">
      <div class="col-lg-5">
        <h1 class="display-4 font-size-md-down-5 mb-3">Introducing Front</h1>
        <p>
          Your company will look
          <span class="text-primary">
            <strong class="u-text-animation u-text-animation--typing"></strong>
          </span>
          <br>
          Attract more visitors, and win more business with Front template.
        </p>

        <div class="d-flex align-items-center flex-wrap">
          <a class="btn btn-soft-primary btn-wide transition-3d-hover" href="../pages/login-simple.html">Get Started</a>

          <!-- Fancybox -->
          <a class="js-fancybox media align-items-center u-media-player ml-3" href="javascript:;"
             data-src="//vimeo.com/167434033"
             data-speed="700"
             data-animate-in="zoomIn"
             data-animate-out="zoomOut"
             data-caption="Front - Responsive Website Template">
            <span class="u-media-player__icon u-media-player__icon--success mr-3">
              <span class="fas fa-play u-media-player__icon-inner"></span>
            </span>
            <span class="media-body">
              Play video
            </span>
          </a>
          <!-- End Fancybox -->
        </div>
      </div>
    </div>
    <!-- End Content -->

    <!-- SVG Background -->
    <div id="SVGMainHero" class="col-lg-9 col-xl-7 svg-preloader d-none d-lg-block position-absolute top-0 right-0 pr-0" style="margin-top: 105.6px;">
      <figure class="ie-main-hero">
        <img class="js-svg-injector" src="../../assets/svg/illustrations/main-hero.svg" alt="Image Description"
             data-img-paths='[
               {"targetId": "#SVGMainHeroImg1", "newPath": "../../assets/img/750x750/img2.jpg"}
             ]'
             data-parent="#SVGMainHero">
      </figure>
    </div>
    <!-- End SVG Background -->
  </div>
</div>
<!-- End Hero Section -->
<link rel="stylesheet" href="../../assets/vendor/fancybox/jquery.fancybox.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<script src="../../assets/vendor/fancybox/jquery.fancybox.min.js"></script>
<script src="../../assets/vendor/typed.js/lib/typed.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');

    // initialization of text animation (typing)
    var typed = new Typed(".u-text-animation.u-text-animation--typing", {
      strings: ["more professional.", "perfect in every way.", "astonishing."],
      typeSpeed: 60,
      loop: true,
      backSpeed: 25,
      backDelay: 1500
    });
  });
</script>