# Discover a place you'll

Search location

Search through over 125,000 listings

- HTML
- JS

                    <!-- Hero -->
                    <div class="position-relative overflow-hidden content-space-t-md-3">
                      <div class="container">
                        <div class="position-relative content-space-t-2 content-space-t-md-0 content-space-t-lg-3 content-space-b-2 content-space-b-md-3 content-space-b-xl-5">
                          <div class="row position-relative zi-2 mt-md-n5">
                            <div class="col-md-8 mb-7 mb-md-0">
                              <!-- Heading -->
                              <div class="w-md-75 mb-7">
                                <h1 class="display-4">Discover a place you'll
                                  <span class="text-primary text-highlight-warning">
                                    <span class="js-typedjs"
                                          data-hs-typed-options='{
                                            "strings": ["love to live", "enjoy living"],
                                            "typeSpeed": 90,
                                            "loop": true,
                                            "backSpeed": 30,
                                            "backDelay": 2500
                                          }'></span>
                                  </span>
                                </h1>
                              </div>
                              <!-- End Heading -->

                              <form>
                                <!-- Input Card -->
                                <div class="input-card">
                                  <div class="input-card-form">
                                    <label for="searchLocationForm" class="form-label visually-hidden">Search location</label>
                                    <div class="input-group input-group-merge">
                                      <span class="input-group-prepend input-group-text">
                                        <i class="bi-search"></i>
                                      </span>
                                      <input type="text" class="form-control form-control-lg" id="searchLocationForm" placeholder="Enter location" aria-label="Enter location">
                                    </div>
                                  </div>
                                  <button type="button" class="btn btn-primary btn-lg">Search</button>
                                </div>
                                <!-- End Input Card -->
                              </form>

                              <p class="form-text small">Search through over 125,000 listings</p>
                            </div>
                            <!-- End Col -->
                          </div>
                          <!-- End Row -->

                          <div class="col-md-6 position-md-absolute top-0 end-0">
                            <img class="img-fluid" src="../assets/img/900x900/img20.jpg" alt="Image Description">

                            <!-- SVG Shape -->
                            <div class="position-absolute bottom-0 end-0 zi-n1 mb-n10 me-n7" style="width: 12rem;">
                              <img class="img-fluid" src="../assets/svg/components/dots-lg.svg" alt="Image Description">
                            </div>
                            <!-- End SVG Shape -->
                          </div>
                        </div>
                      </div>

                      <div class="col-md-10 position-absolute top-0 start-0 zi-n1 gradient-y-three-sm-primary h-100" style="background-size: calc(1000px + (100vw - 1000px) / 2);"></div>
                    </div>
                    <!-- End Hero -->

                    <!-- JS Implementing Plugins -->
                    <script src="../node_modules/typed.js/lib/typed.min.js"></script>

                    <!-- JS Front -->
                    <script src="../assets/js/hs.typed.js"></script>

                    <!-- JS Plugins Init. -->
                    <script>
                      (function() {
                        // INITIALIZATION OF TEXT ANIMATION (TYPING)
                        // =======================================================
                        HSCore.components.HSTyped.init('.js-typedjs')
                      })()
                    </script>