The easiest way to manage business

Grow your business with the top HTML5 template.

Watch Intro Video

HTML:

          
            <!-- Hero Section -->
            <div class="gradient-overlay-half-dark-v1 bg-img-hero" style="background-image: url(../../assets/img/1920x1080/img5.jpg);">
              <div class="d-lg-flex align-items-lg-center flex-lg-column">
                <div class="container space-3 space-4-top--lg">
                  <!-- Title -->
                  <div class="w-md-50">
                    <h1 class="display-4 font-size-48--md-down text-white">The easiest way to manage business</h1>
                    <p class="lead text-white">Grow your business with the top HTML5 template.</p>
                  </div>
                  <!-- End Title -->
                </div>
              </div>

              <div class="container space-1-bottom">
                <!-- Fancybox -->
                <div class="d-inline-block">
                  <a class="js-fancybox u-media-player media align-items-center text-white" href="javascript:;"
                     data-src="//vimeo.com/167434033"
                     data-speed="700"
                     data-animate-in="zoomIn"
                     data-animate-out="zoomOut"
                     data-caption="Space - Responsive Website Template">
                    <span class="u-media-player__icon mr-3">
                      <span class="fa fa-play u-media-player__icon-inner"></span>
                    </span>
                    <span class="media-body">
                      <small class="d-block text-uppercase">Watch</small>
                      Intro Video
                    </span>
                  </a>
                  <!-- End Fancybox -->
                </div>
              </div>
            </div>
            <!-- End Hero Section -->

CSS library:

        
          <link rel="stylesheet" href="../../assets/vendor/fancybox/jquery.fancybox.css">

JS library and initialization:

        
          <!-- JS Implementing Plugins -->
          <script src="../../assets/vendor/fancybox/jquery.fancybox.min.js"></script>

          <!-- JS Space -->
          <script src="../../assets/js/components/hs.fancybox.js"></script>

          <!-- JS Plugins Init. -->
          <script>
            $(document).on('ready', function () {
              // initialization of fancybox
              $.HSCore.components.HSFancyBox.init('.js-fancybox');
            });
          </script>