Make difference
We are
HTML:
<!-- Hero Section -->
<div class="bg-img-hero-center" style="background-image: url(../../assets/img/1920x800/img6.jpg);">
<div class="container space-2 space-4-top--lg space-3-bottom--lg">
<div class="w-md-75">
<!-- Title -->
<div class="mb-7">
<span class="d-block text-white text-uppercase mb-2">Make difference</span>
<h1 class="display-2 font-size-48--md-down text-white">
We are
<strong class="u-text-animation u-text-animation--typing"></strong>
</h1>
</div>
<!-- End Title -->
</div>
<div class="w-md-75 w-lg-50">
<!-- Input -->
<form class="js-validate js-form-message">
<div class="js-focus-state input-group input-group-lg form form--lg form--white-brd">
<input type="email" class="form-control form__input" name="email" required
placeholder="Enter your email address"
aria-label="Enter your email address">
<span class="input-group-append form__append">
<button type="submit" class="btn btn-primary">Get Started</button>
</span>
</div>
</form>
<!-- End Input -->
</div>
</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: ["creative", "funny", "Space"],
typeSpeed: 60,
loop: true,
backSpeed: 25,
backDelay: 3000
});
});
</script>