Discover a place you'll

Search through over 125,000 listings
Image Description
Image Description 
<!-- Hero Section -->
<div class="position-relative overflow-hidden space-top-md-3">
  <div class="container position-relative space-top-3 space-bottom-2 space-bottom-md-3 space-bottom-xl-5">
    <div class="row position-relative mt-md-n5">
      <div class="col-md-8 mb-7 mb-md-0">
        <!-- Title -->
        <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-text-animation"
                    data-hs-typed-options='{
                      "strings": ["love to live", "enjoy living"],
                      "typeSpeed": 90,
                      "loop": true,
                      "backSpeed": 30,
                      "backDelay": 2500
                    }'></span>
            </span>
          </h1>
        </div>
        <!-- End Title -->

        <!-- Card -->
        <div class="card p-2 mb-3">
          <!-- Input Group -->
          <div class="form-row">
            <div class="col-sm mb-2 mb-sm-0">
              <div class="input-group input-group-merge input-group-borderless">
                <div class="input-group-prepend">
                  <div class="input-group-text">
                    <i class="fas fa-search"></i>
                  </div>
                </div>

                <input type="text" class="form-control" name="buyAddress" placeholder="Enter location" aria-label="Enter location">
              </div>
            </div>

            <div class="col-sm-auto">
              <button type="button" class="btn btn-block btn-primary px-5">Search</button>
            </div>
          </div>
          <!-- End Input Group -->
        </div>
        <!-- End Card -->

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

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

      <figure class="max-w-15rem w-100 position-absolute bottom-0 right-0 z-index-n1">
        <div class="mb-n7 mr-n7">
          <img class="img-fluid" src="../../assets/svg/components/dots-1.svg" alt="Image Description">
        </div>
      </figure>
    </div>
  </div>

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