HTML:
<!-- Hero Section -->
<div class="position-relative gradient-overlay-half-dark-v2 bg-img-hero" style="background-image: url(../../assets/img/1920x800/img7.jpg);">
<!-- Title -->
<div class="d-lg-flex align-items-lg-center height-100vh--lg">
<div class="container text-center space-2 space-0--lg">
<h1 class="display-3 font-size-48--md-down text-white mb-4">
<strong class="u-text-animation u-text-animation--typing"></strong>
for everyone
</h1>
<div class="w-md-75 w-lg-60 mx-md-auto">
<p class="lead text-white">We are driven by this purpose, and we uphold our cultural values of collaboration, innovation, wellness and inclusion as our guide for making decisions and conducting business every day.</p>
</div>
</div>
</div>
<!-- End Title -->
<!-- Careers Section -->
<div class="position-absolute-bottom-0--lg bg-white z-index-2">
<div class="container space-1">
<!-- Job Positions - Filter -->
<form class="row align-items-md-center">
<div class="col-lg-4 mb-4 mb-lg-0">
<!-- Department Search Field -->
<div class="js-focus-state input-group form">
<input type="search" class="form-control form__input" placeholder="Search for jobs by keyword" aria-label="Search for jobs by keyword">
</div>
<!-- End Department Search Field -->
</div>
<div class="col-sm-6 col-lg-3 mb-4 mb-lg-0">
<!-- Locations -->
<select class="custom-select">
<option selected>All locations</option>
<option value="location1">Chicago, US</option>
<option value="location2">New York, US</option>
<option value="location3">Seattle/Kirkland, US</option>
<option value="location4">Los Angles, US</option>
<option value="location5">Moscow, Russia</option>
<option value="location6">Sydney, Australia</option>
<option value="location7">Birmingham, UK</option>
<option value="location7">Manchester, UK</option>
<option value="location8">Beijing, China</option>
</select>
<!-- End Locations -->
</div>
<div class="col-sm-6 col-lg-3 mb-4 mb-lg-0">
<!-- Departments List -->
<select class="custom-select">
<option selected>All departments</option>
<option value="department1">Analytics</option>
<option value="department2">Business Strategy</option>
<option value="department3">Data Center & Network</option>
<option value="department4">Developer Relations</option>
<option value="department5">Engineering</option>
<option value="department6">Hardware Engineering</option>
<option value="department7">IT & Data Management</option>
<option value="department8">Legal & Government Relations</option>
<option value="department9">Manufacturing & Supply Chain</option>
<option value="department10">Marketing & Communications</option>
<option value="department11">Network Engineering</option>
<option value="department12">Partnerships</option>
<option value="department13">Web</option>
</select>
<!-- End Departments List -->
</div>
<div class="col-lg-2 text-lg-right">
<a class="btn btn-block btn-primary" href="#">Search</a>
</div>
</form>
<!-- End Job Positions - Filter -->
</div>
</div>
<!-- End Careers Section -->
</div>
<!-- End Hero Section -->
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/typed.js/lib/typed.min.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of text animation (typing)
var typed = new Typed(".u-text-animation.u-text-animation--typing", {
strings: ["Build", "Design", "Code"],
typeSpeed: 130,
loop: true,
backSpeed: 50,
backDelay: 3000
});
});
</script>