<!-- Hero Section -->
<div class="position-relative">
<!-- Slick Carousel -->
<div class="js-slick-carousel u-slick"
data-fade="true"
data-autoplay="true"
data-speed="5000"
data-infinite="true">
<div class="js-slide">
<div class="bg-img-hero min-height-620" style="background-image: url(../../assets/img/1920x800/img18.jpg);"></div>
</div>
<div class="js-slide">
<div class="bg-img-hero min-height-620" style="background-image: url(../../assets/img/1920x800/img17.jpg);"></div>
</div>
</div>
<!-- End Slick Carousel -->
<div class="container position-absolute right-0 bottom-0 left-0 space-top-5 space-bottom-2">
<!-- Info Link -->
<a class="d-sm-inline-flex align-items-center bg-primary text-white shadow rounded-pill p-2 pr-3 mb-3" href="#">
<span class="btn btn-xs btn-soft-white btn-pill font-weight-semi-bold mr-3">Start Now</span>
<span class="d-block d-sm-inline-block">
Find the job that fits your life faster with our advanced tools.
</span>
</a>
<!-- End Info Link -->
<div class="card border-0">
<div class="card-body p-7">
<!-- Search Jobs Form -->
<form class="js-validate">
<div class="row">
<div class="col-lg-5 mb-4 mb-lg-0">
<!-- Input -->
<label class="d-block">
<span class="h4 d-block text-dark font-weight-semi-bold mb-0">what</span>
<small class="d-block text-secondary">job title, keywords, or company</small>
</label>
<div class="js-focus-state">
<div class="input-group">
<input type="text" class="form-control" placeholder="Keyword or title" aria-label="Keyword or title" aria-describedby="keywordInputAddon">
<div class="input-group-append">
<span class="input-group-text">
<span class="fas fa-search" id="keywordInputAddon"></span>
</span>
</div>
</div>
</div>
<!-- End Input -->
</div>
<div class="col-lg-5 mb-4 mb-lg-0">
<!-- Input -->
<label class="d-block">
<span class="h4 d-block text-dark font-weight-semi-bold mb-0">where</span>
<small class="d-block text-secondary">city, state, or zip code</small>
</label>
<div class="js-focus-state">
<div class="input-group">
<input type="text" class="form-control" placeholder="City, state, or zip" aria-label="City, state, or zip" aria-describedby="locationInputAddon">
<div class="input-group-append">
<span class="input-group-text">
<span class="fas fa-map-marker-alt" id="locationInputAddon"></span>
</span>
</div>
</div>
</div>
<!-- End Input -->
</div>
<div class="col-lg-2 align-self-lg-end">
<button type="submit" class="btn btn-block btn-primary transition-3d-hover">Find Jobs</button>
</div>
</div>
<!-- End Checkbox -->
</form>
<!-- End Search Jobs Form -->
</div>
</div>
</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>
<!-- JS Front -->
<script src="../../assets/js/components/hs.focus-state.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 slick carousel
$.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
});
</script>
