Thinking the way forward with affordable price.

Delivering the world what matters,

or just call us at +1 707 112 82 82

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>