for everyone

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.

Search

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>