Space - Creative agency

Space makes you look at things from a different perspectives.

Get Started with Space

HTML:

          
            <!-- Hero Section -->
            <div class="gradient-overlay-half-dark-video-v1 bg-img-hero" style="background-image: url(../../assets/img/1920x1080/img5.jpg);">
              <!-- Video Background -->
              <div class="js-bg-video d-none d-md-block position-absolute w-100 h-100"
                   data-hs-bgv-type="youtube"
                   data-hs-bgv-id="0qisGSwZym4"
                   data-hs-bgv-loop="true">
              </div>
              <!-- End Video Background -->

              <div class="position-relative z-index-2">
                <!-- Content -->
                <div class="d-lg-flex align-items-lg-center height-100vh--lg">
                  <div class="container text-center space-2-top space-3-bottom space-3-top--lg">
                    <div class="w-md-80 mx-md-auto mb-7">
                      <h1 class="display-3 font-size-48--md-down text-white mb-4">Space - Creative agency</h1>
                      <p class="lead text-white font-weight-light">Space makes you look at things from a different perspectives.</p>
                    </div>

                    <!-- Fancybox Video Popup -->
                    <div class="mb-7">
                      <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">
                          <span class="fa fa-play u-media-player__icon-inner"></span>
                        </span>
                      </a>
                    </div>
                    <!-- End Fancybox Video Popup -->

                    <a class="btn btn-primary" href="https://themes.getbootstrap.com/product/space-multipurpose-responsive-template/">Get Started with Space</a>
                  </div>
                </div>
                <!-- End Content -->
              </div>

              <div class="bg-white position-absolute-bottom-0 z-index-2">
                <!-- Bottom Content -->
                <div class="container space-1">
                  <!-- Slick Carousel -->
                  <div class="js-slick-carousel u-slick"
                       data-autoplay="true"
                       data-speed="5000"
                       data-infinite="true"
                       data-slides-show="6"
                       data-responsive='[{
                         "breakpoint": 1200,
                         "settings": {
                           "slidesToShow": 4
                         }
                       }, {
                         "breakpoint": 992,
                         "settings": {
                           "slidesToShow": 4
                         }
                       }, {
                         "breakpoint": 768,
                         "settings": {
                           "slidesToShow": 3
                         }
                       }, {
                         "breakpoint": 576,
                         "settings": {
                           "slidesToShow": 3
                         }
                       }, {
                         "breakpoint": 480,
                         "settings": {
                           "slidesToShow": 2
                         }
                       }]'>
                    <div class="js-slide">
                      <img class="u-clients" src="../../assets/img/clients/amazon.png" alt="Image Description">
                    </div>
                    <div class="js-slide">
                      <img class="u-clients" src="../../assets/img/clients/google.png" alt="Image Description">
                    </div>
                    <div class="js-slide">
                      <img class="u-clients" src="../../assets/img/clients/paypal.png" alt="Image Description">
                    </div>
                    <div class="js-slide">
                      <img class="u-clients" src="../../assets/img/clients/slack.png" alt="Image Description">
                    </div>
                    <div class="js-slide">
                      <img class="u-clients" src="../../assets/img/clients/samsung.png" alt="Image Description">
                    </div>
                    <div class="js-slide">
                      <img class="u-clients" src="../../assets/img/clients/airbnb.png" alt="Image Description">
                    </div>
                    <div class="js-slide">
                      <img class="u-clients" src="../../assets/img/clients/lenovo.png" alt="Image Description">
                    </div>
                    <div class="js-slide">
                      <img class="u-clients" src="../../assets/img/clients/spotify.png" alt="Image Description">
                    </div>
                  </div>
                  <!-- End Slick Carousel -->
                </div>
                <!-- End Bottom Content -->
              </div>
            </div>
            <!-- End Hero Section -->
          
        

CSS library:

        
          <link rel="stylesheet" href="assets/vendor/hs-bg-video/hs-bg-video.css">
          <link rel="stylesheet" href="assets/vendor/slick-carousel/slick/slick.css">
          <link rel="stylesheet" href="assets/vendor/fancybox/jquery.fancybox.css">
        
      

JS library and initialization:

        
          <!-- JS Implementing Plugins -->
          <script src="assets/vendor/hs-bg-video/hs-bg-video.js"></script>
          <script src="assets/vendor/hs-bg-video/vendor/player.min.js"></script>
          <script src="assets/vendor/slick-carousel/slick/slick.js"></script>
          <script src="assets/vendor/fancybox/jquery.fancybox.min.js"></script>

          <!-- JS Implementing Plugins -->
          <script src="assets/js/helpers/hs.bg-video.js"></script>
          <script src="assets/js/components/hs.slick-carousel.js"></script>
          <script src="assets/js/components/hs.fancybox.js"></script>

          <!-- JS Plugins Init. -->
          <script>
            $(document).on('ready', function () {
              // initialization of video on background
              $.HSCore.helpers.HSBgVideo.init('.js-bg-video');

              // initialization of slick carousel
              $.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');

              // initialization of fancybox
              $.HSCore.components.HSFancyBox.init('.js-fancybox');
            });
          </script>