<!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>