HTML:
<!-- Hero Section -->
<div class="u-bg-img-hero" style="background-image: url(../../assets/img/1920x800/img14.jpg);">
<div class="u-gradient-overlay-half-primary-v1">
<div class="container u-space-4-top u-space-5-top--md u-space-3-bottom">
<div class="w-md-80 w-lg-60 text-center mx-auto">
<!-- Title -->
<div class="mb-5">
<h1 class="display-4 font-size-48--md-down text-white mb-0">How can we <span class="font-weight-bold">help?</span></h1>
</div>
<!-- End Title -->
<!-- Input -->
<form class="js-focus-state input-group input-group-lg u-form u-form--lg u-form--position u-form--no-brd mb-5">
<div class="input-group-prepend u-form__prepend">
<span class="input-group-text u-form__text">
<span class="fa fa-search u-form__text-inner"></span>
</span>
</div>
<input type="search" class="form-control u-form__input" placeholder="Ask a question" aria-label="Ask a question">
</form>
<!-- End Input -->
<!-- Text/Links -->
<p class="u-text-light">
Popular help topics:
<a class="u-link-light" href="#">pricing,</a>
<a class="u-link-light ml-1" href="#">upgrade,</a>
<a class="u-link-light ml-1" href="#">hosting,</a>
<a class="u-link-light ml-1" href="#">membership</a>
</p>
<!-- End Text/Links -->
</div>
</div>
</div>
</div>
<!-- End Hero Section -->
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="assets/js/helpers/hs.focus-state.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of forms
$.HSCore.helpers.HSFocusState.init();
});
</script>
