It is an

Easy business with Space template

Get Started with Space
Play intro video

HTML:

          
            <!-- Hero Section -->
            <div class="dzsparallaxer auto-init height-is-based-on-content use-loading mode-scroll" data-options='{direction: "normal"}'>
              <!-- Apply your Parallax background image here -->
              <div class="divimage dzsparallaxer--target gradient-overlay-half-white-v1 bg-img-hero" style="height: 120%; background-image: url(../../assets/img/1920x1080/img19.jpg);"></div>

              <div class="container position-relative z-index-2 space-2-top space-3-bottom space-4--lg">
                <div class="row justify-content-lg-between align-items-lg-center">
                  <div class="col-lg-6 mb-9 mb-lg-0">
                    <!-- Description -->
                    <div class="mb-5">
                      <span class="d-block text-uppercase mb-2">It is an</span>
                      <h1 class="display-4 font-size-48--md-down">Easy business with Space template</h1>
                    </div>
                    <a class="btn btn-primary" href="https://themes.getbootstrap.com/product/space-multipurpose-responsive-template/">Get Started with Space</a>
                    <!-- End Description -->
                  </div>

                  <div class="col-lg-3 text-center">
                    <!-- Fancybox -->
                    <a class="js-fancybox u-media-player" 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 u-media-player__icon--xl">
                        <span class="fa fa-play u-media-player__icon-inner"></span>
                      </span>
                      <span class="d-block lead text-white mt-2">Play intro video</span>
                    </a>
                    <!-- End Fancybox -->
                  </div>
                </div>
              </div>
            </div>
            <!-- End Hero Section -->

CSS library:

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

JS library and initialization:

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

          <!-- JS Implementing Plugins -->
          <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>