Modelo Imobiliária 1 - Banner e Filtro

Componente criado com base no modelo desenhado de sites para imobiliárias

Francisco Negrão

#modelos

Em 18/05/2022 às 17h45 - Atualizado em 16/08/2022 às 09h09

#modelos

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%; }}