Real estate search header.

Real_ estate_ search
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- font-awesome  -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
  <style>
    /* Basic Styling */
    body {
      font-family: sans-serif;
      margin: 0;
    }

    .container {
      width: 80%;
      margin: 0 auto; 
    }

    .row {
      display: flex;
      flex-wrap: wrap;
    }

    .col-12 {
      flex: 100%; 
    }

    .col-lg-6 {
      flex: 50%;
    }

    .text-center-md {
      text-align: center;
    }

    .text-center-xs {
      text-align: center;
    }

    .d-middle {
      align-items: center; 
    }

    .justify-content-start {
      justify-content: flex-start; 
    }

    .text-white {
      color: white;
    }

    .mb-5 {
      margin-bottom: 30px; /* Adjust as needed */
    }

    .display-4 {
      font-size: 3.5rem; /* Adjust as needed */
    }

    .fw-bold {
      font-weight: bold;
    }

    .d-inline-block {
      display: inline-block;
    }

    .h6 {
      font-size: 1rem; 
    }

    .fw-normal {
      font-weight: normal;
    }

    .d-block {
      display: block;
    }

    .text-align-end {
      text-align: right;
    }

    .text-danger {
      color: red; /* Adjust color if needed */
    }

    .h3 {
      font-size: 1.75rem;
    }

    .text-align-start {
      text-align: left;
    }

    .bg-white {
      background-color: white;
    }

    .shadow-primary-xs {
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Adjust values as needed */
    }

    .rounded {
      border-radius: 5px; 
    }

    .p-4 {
      padding: 1.5rem;
    }

    .p-md-5 {
      padding: 3rem;
    }

    .w-100 {
      width: 100%;
    }

    .max-w-450 {
      max-width: 450px;
    }

    .h5 {
      font-size: 1.25rem;
    }

    .fi { /* Assuming you're using Font Awesome - replace with your icon classes */
      margin-right: 5px;
    }

    .px-2 {
      padding-left: 0.5rem; 
      padding-right: 0.5rem; 
    }

    .clearfix::after { 
      content: "";
      clear: both; 
      display: table;
    }

    .form-radio {
      display: inline-block;
      margin-right: 10px;
    }

    .form-radio-secondary input[type="radio"] + i { 
      background-color: #ccc; 
    } 

    .ml-3 {
      margin-left: 1rem;
    }

    .form-floating > label {
      position: absolute;
      top: 0;
      left: 0;
      padding: 10px;
      pointer-events: none;
      transition: 0.2s ease all; 
    }

    .form-floating > input:focus ~ label,
    .form-floating > input:not(:placeholder-shown) ~ label,
    .form-floating > select:focus ~ label,
    .form-floating > select:not([value=""]) ~ label { 
      transform: translateY(-20px); 
      font-size: 0.8rem; 
    }

    .form-control:focus {
      box-shadow: none; 
    }

    .gutters-xs > .col-*,
    .gutters-xs {
      padding-right: 5px; 
    }

    .btn { 
      padding: 0.5rem 1rem;
      border: none; 
      border-radius: 5px; 
      cursor: pointer; 
    }

    .btn-lg {
      padding: 0.75rem 1.5rem; 
      font-size: 1.25rem; 
    } 

    .btn-danger {
      background-color: #dc3545; /* Default Bootstrap danger color */
      color: white;
    }

    .bg-gradient-danger {
      background-image: linear-gradient(to right, #dc3545, #c82333); 
    }


    /* Section Specific Styles */
    .section {
      padding: 50px 0; 
      position: relative; 
    }

    .bg-theme-color-light {
      background-color: #f8f9fa; 
    }

    .overlay-dark {
      position: absolute; 
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5); 
    } 

    .overlay-opacity-8 {
      opacity: 0.8; 
    }

    .bg-cover {
      background-size: cover; 
    }

    .lazy { 
      /* Add your lazy loading styles here if needed */
    }
  </style>
</head>
<body>

  <div class="section bg-theme-color-light overlay-dark overlay-opacity-8 bg-cover lazy" 
       style="background-image: url(https://bootdey.com/img/Content/bg1.jpg);"> 

    <div class="container">
      <div class="row text-center-md text-center-xs d-middle justify-content-start">

        <div class="col-12 col-lg-6 mb-5 text-white"> 
          <h1 class="display-4 fw-bold mb-0">
            <span class="d-inline-block">
              <span class="h6 fw-normal d-block text-align-end text-center-xs">
                Over 28.988 Properties
              </span>
              <span class="text-danger">CodeZillaYe</span> Real Estate
            </span>
          </h1>
          <p class="h3 fw-normal mb-0">Your home, one click away</p>
        </div>

        <div class="col-12 col-lg-6 text-align-end text-center-md text-center-xs">
          <div class="d-inline-block bg-white shadow-primary-xs rounded p-4 p-md-5 w-100 max-w-450 text-align-start"> 
            <h2 class="h5 mb-5">
              <i class="fas fa-home"></i> <span class="d-inline-block px-2">Property Search</span>
            </h2>

            <form novalidate="" class="bs-validate" method="get" action="#">
              <div class="clearfix mb-3">
                <label class="form-radio form-radio-secondary">
                  <input type="radio" name="s_type" value="1" checked="">
                  <i></i> Buy
                </label>
                <label class="form-radio form-radio-secondary ml-3">
                  <input type="radio" name="s_type" value="2">
                  <i></i> Rent
                </label>
              </div>

              <div class="form-floating mb-3">
                <select required="" id="s_location" class="form-control" data-live-search="true" title="No City Selected">
                  <option value="">No City Selected</option>
                  <option value="1">New York City</option>
                  <option value="2">Washington, DC Area</option>
                </select>
                <label for="s_location">Select a City</label>
              </div>

              <div class="form-floating mb-3">
                <select id="s_rooms" class="form-control" title="No. of Rooms">
                  <option value="1">Studio</option>
                  <option value="2">2 Rooms</option>
                  </select>
                <label for="s_rooms">No. of Rooms</label>
              </div>

              <div class="row gutters-xs">
                <div class="col-12 col-lg-6">
                  <div class="form-floating mb-3">
                    <select id="s_baths" class="form-control" title="Bathrooms">
                      <option value="0" selected="">Any</option>
                      <option value="2">2 Baths</option>
                    </select>
                    <label for="s_baths">Bathrooms</label>
                  </div>
                </div>
                <div class="col-12 col-lg-6">
                  <div class="form-floating mb-3">
                    <input placeholder="Max. Price" id="s_max_price" type="number" value="" class="form-control">
                    <label for="s_max_price">Max. Price</label>
                  </div>
                </div>
              </div>

              <div class="form-floating mb-3">
                <input placeholder="Address or Zipcode" id="s_address" type="text" value="" class="form-control">
                <label for="s_address">Address or Zipcode</label>
              </div>

              <button type="submit" class="btn w-100 btn-lg btn-danger bg-gradient-danger">
                <i class="fas fa-search"></i> 
                Search
              </button>
            </form>

          </div>
        </div> 

      </div> 
    </div> 

  </div> 

</body>
</html>