Modelo Imobiliária 1 - Banner e Filtro
Componente criado com base no modelo desenhado de sites para imobiliárias
FIDDLE: https://jsfiddle.net/francisco_negrao/6buL52kt/135/
HTML:
<section class="iSectionBannerImob">
<img src="https://images.unsplash.com/photo-1550581190-9c1c48d21d6c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2009&q=80" class="backgroundImage" loading="lazy" />
<div class="container">
<div class="row">
<div class="col-12">
<h1>
Pesquise um imóvel
</h1>
</div>
<div class="col-12">
<form method="get" action="https://www.meuwebsite.com.br/imoveis">
<div class="boxSearch">
<div class="boxInputs">
<label>O que você precisa?</label>
<div class="radioGroup">
<input type="radio" id="compra" name="locacao" value="Compra">
<label for="compra">Comprar</label>
<input type="radio" id="aluguel" name="locacao" value="Aluguel">
<label for="aluguel">Alugar</label>
<input type="radio" id="lancamento" name="locacao" value="Lançamento">
<label for="lancamento">Lançamentos</label>
</div>
</div>
<div class="boxInputs selectInput">
<label for="complemento">Qual tipo?</label>
<select id="complemento" name="complemento">
<option value="">Selecione um complemento</option>
<option value="Casa">Casa</option>
<option value="Apartamento">Apartamento</option>
<option value="Chácara">Chácara</option>
<option value="Terreno">Terreno</option>
</select>
<div class="arrow">
</div>
</div>
<div class="boxInputs">
<label>Onde?</label>
<input type="text" id="search" name="pesquisa" value="" placeholder="Digite uma cidade, bairro ou rua" required="">
</div>
<div class="boxInputs">
<button type="submit">
<i class="fas fa-search"></i> <span>Buscar</span>
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
CSS:
.iSectionBannerImob {
position: relative;
overflow: hidden;
max-height: 700px;
height: 70vh;
display: flex;
align-items: center;
}
.iSectionBannerImob:before {
display: block;
content: "";
height: 100%;
width: 100%;
background-color: rgb(13 101 116 / 75%);
position: absolute;
z-index: -1;
}
.iSectionBannerImob .backgroundImage {
position: absolute;
max-width: 100%;
object-fit: cover;
width: 100%;
height: 100%;
z-index: -2;
}
.iSectionBannerImob .boxSearch {
display: flex;
background-color: rgb(238 245 245 / 75%);
padding: 20px;
justify-content: space-between;
border-radius: 10px;
box-shadow: 0px 3px 20px #00000025;
backdrop-filter: blur(3px);
gap: 20px;
flex-wrap: wrap;
align-items: flex-end;
}
.iSectionBannerImob h1 {
font-size: 30px;
color: #fff;
margin: 0px;
display: flex;
gap: 10px;
align-items: center;
}
.iSectionBannerImob h1:before {
content: "";
height: 30px;
width: 5px;
background-color: #f36639;
border-radius: 5px;
}
/* Inputs CSS */
/* Radio */
.iSectionBannerImob .radioGroup input[type="radio"] {
visibility: hidden;
width: 0px;
height: 0px;
display: none;
}
.iSectionBannerImob label {
font-weight: 600;
color: #1e1e1e;
margin-bottom: 10px;
}
.iSectionBannerImob .radioGroup {
display: flex;
}
.iSectionBannerImob .radioGroup label {
padding: 10px;
background-color: #fff;
border: solid 1px #dbdede;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 400;
text-align: center;
color: #aaa;
margin-bottom: 0px;
}
.iSectionBannerImob .boxInputs .radioGroup label:hover {
background-color: #f36639;
border-color: #f36639;
color: #fff;
}
.iSectionBannerImob .radioGroup input:first-child+label {
padding: 10px;
background-color: #fff;
border: solid 1px #dbdede;
border-right: 0px;
border-radius: 5px 0px 0px 5px;
}
.iSectionBannerImob .radioGroup label:last-child {
padding: 10px;
background-color: #fff;
border: solid 1px #dbdede;
border-left: 0px;
border-radius: 0px 5px 5px 0px;
}
.iSectionBannerImob .radioGroup input[type="radio"]:checked+label {
background-color: #f36639;
color: #fff;
border-color: #f36639;
}
/* Select */
.iSectionBannerImob .boxInputs select:focus-visible,
.iSectionBannerImob .boxInputs input:focus-visible,
.iSectionBannerImob .boxInputs input:focus {
outline: none;
}
.iSectionBannerImob .boxInputs select {
padding: 11px;
padding-right: 30px;
border-radius: 5px;
border-color: #dedede;
color: #aaa;
cursor: pointer;
-moz-appearance: none;
-webkit-appearance: none;
}
.iSectionBannerImob .boxInputs.selectInput {
position: relative;
}
.iSectionBannerImob .boxInputs .arrow {
display: inline-block;
position: absolute;
width: 8px;
height: 8px;
background: transparent;
text-indent: -9999px;
border-top: 3px solid #f36639;
border-left: 3px solid #f36639;
transition: all 250ms ease-in-out;
text-decoration: none;
color: transparent;
right: 10px;
bottom: 17px;
transform: rotateZ(225deg);
}
.iSectionBannerImob .boxInputs select option {
color: #aaa;
}
.iSectionBannerImob .boxInputs select:focus+.arrow {
transform: rotateZ(45deg);
}
.iSectionBannerImob .boxInputs select::-ms-expand {
display: none;
}
/* Input Text */
.iSectionBannerImob .boxInputs input {
padding: 11px;
border-radius: 5px;
border: solid 1px #dedede;
color: #aaa;
}
.iSectionBannerImob .boxInputs input::placeholder {
color: #aaa;
}
.iSectionBannerImob button {
border: none;
padding: 12px 25px;
border-radius: 5px;
display: flex;
gap: 5px;
align-items: center;
background-color: #f36639;
color: #fff;
cursor: pointer;
transition: all 0.3s ease;
}
.iSectionBannerImob button:hover {
color: #fff;
background-color: #de5d33;
}
@media (max-width: 1050px) {
.iSectionBannerImob .boxInputs {
width: 100%;
}
.iSectionBannerImob .boxInputs select, .iSectionBannerImob .boxInputs input {
width: 100%;
}
}