Skip to main content

Space is an easy way to take your business to the next level.

HTML:

          
            <!-- Hero Section -->
            <div class="bg-gray-100">
              <div class="container space-2 space-3--lg">
                <div class="w-md-80 w-lg-60 text-center mx-md-auto">
                  <!-- Title -->
                  <div class="mb-5">
                    <h1>Space is an easy way to take your business to the next level.</h1>
                  </div>
                  <!-- End Title -->

                  <!-- Button -->
                  <button type="button" class="btn btn-xs btn-dark text-left mb-2 mb-md-0 mr-md-2">
                    <span class="media align-items-center">
                      <span class="fab fa-apple fa-3x mr-3"></span>
                      <span class="d-block">
                        <span class="d-block">Download on the</span>
                        <strong class="d-block font-size-14">App Store</strong>
                      </span>
                    </span>
                  </button>
                  <!-- End Button -->

                  <!-- Button -->
                  <button type="button" class="btn btn-xs btn-dark text-left mb-2 mb-md-0">
                    <span class="media align-items-center">
                      <span class="fab fa-google-play fa-3x mr-3"></span>
                      <span class="d-block">
                        <span class="d-block">Get it on</span>
                        <strong class="d-block font-size-14">Google Play</strong>
                      </span>
                    </span>
                  </button>
                  <!-- End Button -->
                </div>
              </div>
            </div>
            <!-- End Hero Section -->

            <!-- Card Section -->
            <div class="bg-gray-100 px-md-9">
              <div class="container-fluid space-2-bottom space-3-bottom--md">
                <div class="row align-items-lg-center no-gutters">
                  <div class="col-lg-6">
                    <!-- Background Video -->
                    <div class="d-none d-lg-block position-relative height-550">
                      <div class="js-bg-video position-absolute w-100 h-100"
                           data-hs-bgv-type="youtube"
                           data-hs-bgv-id="YXNk4gQCPSY"
                           data-hs-bgv-loop="true">
                      </div>
                    </div>
                    <!-- End Background Video -->
                  </div>

                  <div class="col-lg-6">
                    <div class="js-slick-carousel u-slick"
                         data-infinite="true"
                         data-adaptive-height="true"
                         data-fade="true"
                         data-pagi-classes="u-slick__pagination-bordered u-slick__pagination-bordered--white position-absolute-bottom-left-0 pb-3 pb-md-5 pl-8 mb-0">
                      <div class="js-slide">
                        <!-- Card -->
                        <div class="d-lg-flex align-items-lg-end flex-lg-wrap bg-blue height-600--lg rounded space-2 space-0--lg p-5 p-sm-9">
                          <div class="bg-white u-lg-avatar rounded p-3 mb-9 mb-lg-0">
                            <img class="img-fluid d-block" src="../../assets/svg/components/moving-up-blue-icon.svg" alt="Image Description">
                          </div>
                          <div class="mt-lg-auto">
                            <h2 class="display-4 font-size-48--md-down font-weight-medium text-white">Create good things.</h2>
                            <p class="lead text-white">Whether through commerce or just an experience to tell your brand's story, the time has come to start using development languages that fit your projects needs.</p>
                          </div>
                        </div>
                        <!-- End Card -->
                      </div>

                      <div class="js-slide">
                        <!-- Card -->
                        <div class="d-lg-flex align-items-lg-end flex-lg-wrap bg-primary height-600--lg rounded space-2 space-0--lg p-5 p-sm-9">
                          <div class="bg-white u-lg-avatar rounded p-3 mb-9 mb-lg-0">
                            <img class="img-fluid d-block" src="../../assets/svg/components/trophy-primary-icon.svg" alt="Image Description">
                          </div>
                          <div class="mt-lg-auto">
                            <h2 class="display-4 font-size-48--md-down font-weight-medium text-white">High-quality demos.</h2>
                            <p class="lead text-white">From websites and online stores, to marketing tools and analytics, Space is the all-in-one platform to build a beautiful online presence.</p>
                          </div>
                        </div>
                        <!-- End Card -->
                      </div>

                      <div class="js-slide">
                        <!-- Card -->
                        <div class="d-lg-flex align-items-lg-end flex-lg-wrap bg-purple height-600--lg rounded space-2 space-0--lg p-5 p-sm-9">
                          <div class="bg-white u-lg-avatar rounded p-3 mb-9 mb-lg-0">
                            <img class="img-fluid d-block" src="../../assets/svg/components/develop-purple-icon.svg" alt="Image Description">
                          </div>
                          <div class="mt-lg-auto">
                            <h2 class="display-4 font-size-48--md-down font-weight-medium text-white">Easiest way to manage business.</h2>
                            <p class="lead text-white">The time has come to bring those ideas and plans to life. This is where we really begin to visualize your napkin sketches and make them into beautiful pixels.</p>
                          </div>
                        </div>
                        <!-- End Card -->
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- End Card 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">
        
      

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>

          <!-- JS Space -->
          <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.go-to.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 go to
              $.HSCore.components.HSGoTo.init('.js-go-to');
            });
          </script>
        
      

Please sign in

Signin to manage your account.

Do not have an account? Signup

OR