Sell your house online

<!-- Hero Section -->
<div class="d-md-flex bg-img-hero" style="background-image: url(../../assets/img/1920x1080/img32.jpg);">
  <div class="container d-md-flex align-items-md-center height-md-100vh position-relative space-top-2 space-bottom-3 space-top-md-5 space-md-0">
    <div class="w-lg-65 mb-9">
      <div class="w-lg-65 w-xl-50 mb-5">
        <h1 class="display-4 text-white">Sell your <strong class="font-weight-semi-bold">house</strong> online</h1>
      </div>

      <!-- Form -->
      <form class="js-validate">
        <div class="form-row mb-2">
          <div class="col-6 col-md-5 mb-2">
            <div class="js-form-message">
              <label class="sr-only" for="signupSrName">Name</label>
              <div class="input-group">
                <input type="text" class="form-control" name="name" id="signupSrName" placeholder="Name" aria-label="Name" required
                       data-msg="Name must contain only letters.">
              </div>
            </div>
          </div>

          <div class="col-6 col-md-5 mb-2">
            <div class="js-form-message">
              <label class="sr-only" for="signupSrEmail">Email</label>
              <div class="input-group">
                <input type="email" class="form-control" name="email" id="signupSrEmail" placeholder="Email" aria-label="Email" required
                       data-msg="Please enter a valid email address.">
              </div>
            </div>
          </div>

          <div class="col-md-2 mb-2">
            <button type="submit" class="btn btn-block btn-primary transition-3d-hover">Signup</button>
          </div>
        </div>

        <!-- Checkbox -->
        <div class="js-form-message">
          <div class="custom-control custom-checkbox d-flex align-items-center text-muted">
            <input type="checkbox" class="custom-control-input" id="termsCheckbox" name="termsCheckbox" required
                   data-msg="Please accept our Terms and Conditions.">
            <label class="custom-control-label text-white" for="termsCheckbox">
              <small>
                I agree to the
                <a class="link-white" href="../pages/terms.html">Terms and Conditions</a>
              </small>
            </label>
          </div>
        </div>
        <!-- End Checkbox -->
      </form>
      <!-- End Form -->
    </div>

    <!-- Clients -->
    <div class="container position-absolute right-0 bottom-0 left-0 space-2">
      <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 ml-0" src="../../assets/svg/clients-logo/airbnb-white.svg" alt="Image Description">
        </div>
        <div class="js-slide">
          <img class="u-clients ml-0" src="../../assets/svg/clients-logo/paypal-white.svg" alt="Image Description">
        </div>
        <div class="js-slide">
          <img class="u-clients ml-0" src="../../assets/svg/clients-logo/mapbox-white.svg" alt="Image Description">
        </div>
        <div class="js-slide">
          <img class="u-clients ml-0" src="../../assets/svg/clients-logo/boring-company-white.svg" alt="Image Description">
        </div>
        <div class="js-slide">
          <img class="u-clients ml-0" src="../../assets/svg/clients-logo/google-white.svg" alt="Image Description">
        </div>
        <div class="js-slide">
          <img class="u-clients ml-0" src="../../assets/svg/clients-logo/embark-white.svg" alt="Image Description">
        </div>
        <div class="js-slide">
          <img class="u-clients ml-0" src="../../assets/svg/clients-logo/spotify-white.svg" alt="Image Description">
        </div>
        <div class="js-slide">
          <img class="u-clients ml-0" src="../../assets/svg/clients-logo/stripe-white.svg" alt="Image Description">
        </div>
      </div>
    </div>
    <!-- End Clients -->
  </div>
</div>
<!-- End Hero Section -->
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>
<script src="../../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>

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

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

    // initialization of form validation
    $.HSCore.components.HSValidation.init('.js-validate');

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