Join the change

Space service that moves work forward

Get started for free

HTML:

          
            <!-- Hero Section -->
            <div class="gradient-overlay-half-dark-v3 bg-img-hero" style="background-image: url(../../assets/img/1920x1080/img4.jpg);">
              <!-- Main Content -->
              <div class="d-lg-flex align-items-lg-center height-85vh--lg">
                <div class="container space-2 space-0--lg mt-lg-8">
                  <div class="row justify-content-lg-between align-items-lg-center">
                    <div class="col-lg-5 mb-7 mb-lg-0">
                      <!-- Title -->
                      <span class="d-block text-white text-uppercase mb-2">Join the change</span>
                      <h1 class="display-4 font-size-48--md-down text-white mb-0">Space service that moves work forward</h1>
                      <!-- End Title -->
                    </div>

                    <div class="col-lg-5">
                      <!-- Signup Form -->
                      <div class="bg-white shadow-sm rounded p-6">
                        <form class="js-validate">
                          <div class="mb-4">
                            <h2 class="h4">Get started for free</h2>
                          </div>

                          <!-- Input -->
                          <div class="js-form-message mb-3">
                            <div class="js-focus-state input-group input-group form">
                              <input type="text" class="form-control form__input" name="username" required
                                     placeholder="Enter your username"
                                     aria-label="Enter your username">
                            </div>
                          </div>
                          <!-- End Input -->

                          <!-- Input -->
                          <div class="js-form-message mb-3">
                            <div class="js-focus-state input-group input-group form">
                              <input type="email" class="form-control form__input" name="email" required
                                     placeholder="Enter your email address"
                                     aria-label="Enter your email address">
                            </div>
                          </div>
                          <!-- End Input -->

                          <!-- Input -->
                          <div class="js-form-message mb-3">
                            <div class="js-focus-state input-group input-group form">
                              <input type="password" class="form-control form__input" name="password" required
                                     placeholder="Enter your password"
                                     aria-label="Enter your password">
                            </div>
                          </div>
                          <!-- End Input -->

                          <button type="submit" class="btn btn-block btn-primary">Get Started</button>
                        </form>
                      </div>
                      <!-- End Signup Form -->
                    </div>
                  </div>
                </div>
              </div>
              <!-- End Main Content -->
            </div>

            <div class="d-lg-flex align-items-lg-center height-15vh--lg">
              <!-- Bottom Content -->
              <div class="container space-2 space-0--lg">
                <!-- 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>
            <!-- End Hero Section -->
          
        

CSS library:

        
          <link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
        
      

JS library and initialization:

        
          <!-- JS Implementing Plugins -->
          <script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>
          <script src="../../assets/vendor/query-validation/dist/jquery.validate.min.js"></script>

          <!-- JS Space -->
          <script src="../../assets/js/components/hs.slick-carousel.js"></script>
          <script src="../../assets/js/components/hs.validation.js"></script>
          <script src="../../assets/js/helpers/hs.focus-state.js"></script>

          <!-- JS Plugins Init. -->
          <script>
            $(document).on('ready', function () {
              // initialization of form validation
              $.HSCore.components.HSValidation.init('.js-validate');

              // initialization of forms
              $.HSCore.helpers.HSFocusState.init();

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