<!-- 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>
