Thinking the way forward with affordable price.
Delivering the world what matters,
HTML:
<!-- Hero Section -->
<div class="d-lg-flex bg-img-hero gradient-overlay-half-dark-v3" style="background-image: url(../../assets/img/1920x1080/img36.jpg);">
<div class="container d-lg-flex align-items-lg-center flex-lg-wrap height-100vh--lg space-2 space-4-top--md space-3-bottom--md">
<div class="w-md-60 mb-9">
<span class="d-block lead text-white mb-2">Thinking the way forward with affordable price.</span>
<h1 class="display-4 font-size-48--md-down text-white font-weight-medium">
Delivering the world what matters,
<span class="border-bottom border-3 pb-1">
<strong class="u-text-animation u-text-animation--typing"></strong>
</span>
</h1>
</div>
<!-- Search Form -->
<form class="js-validate w-100">
<div class="row mb-7">
<div class="col-sm-6 col-lg-4 mb-4 mb-lg-0">
<!-- Input -->
<label class="d-block text-white font-weight-medium text-uppercase">Place of departure</label>
<div class="input-group form">
<div class="input-group-prepend form__prepend">
<span class="input-group-text form__text">
<span class="fas fa-map-marker-alt text-purple" id="keywordInputAddon"></span>
</span>
</div>
<input type="text" class="form-control form__input" placeholder="Enter city" aria-label="Enter city" aria-describedby="keywordInputAddon">
</div>
<!-- End Input -->
</div>
<div class="col-sm-6 col-lg-4 mb-4 mb-lg-0">
<!-- Input -->
<label class="d-block text-white font-weight-medium text-uppercase">Arrival point</label>
<div class="input-group form">
<div class="input-group-prepend form__prepend">
<span class="input-group-text form__text">
<span class="fas fa-map-marker-alt text-primary" id="locationInputAddon"></span>
</span>
</div>
<input type="text" class="form-control form__input" placeholder="Enter destination" aria-label="Enter destination" aria-describedby="locationInputAddon">
</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">Get a Quote</button>
</div>
</div>
<p class="small text-white">or just call us at +1 707 112 82 82</p>
</form>
<!-- End Search Form -->
</div>
</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: ["safely.", "conveniently.", "in time."],
typeSpeed: 60,
loop: true,
backSpeed: 25,
backDelay: 1500
});
});
</script>