Modelo Imobiliária 1 - Grade de Produtos e Imóveis

Grade de Produtos - Estilo do Modelo Imobiliária 01 - Responsivo e Otimizado com Webvitals

Francisco Negrão

#Cards

Postado: 10/06/2022 às 16h06

FIDDLE: https://jsfiddle.net/francisco_negrao/g1drxvmz/48/

HTML:

<section class="iCardModel01 py-5">

<div class="container">

<div class="row">

<div class="col-12">
<h1>
Imóveis em destaque
</h1>
</div>

<div class="col-6 col-lg-4">

<div class="cardRealState">
<a href="imoveis/alameda-67a-quadra-z-18-lote-191a-setor-popular" title="Acessar o produto">
<div class="cardRealStateImage">
<img class="imgFluid" src="https://images.unsplash.com/photo-1558036117-15d82a90b9b1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="Imagem do produto">
</div>
<div class="cardRealStateDsc">
<span class="realStateId">23955</span>
<p class="realStateLocation">Venda</p>
<p><span class="realStateComplement">Casa</span> em <span class="realStateCity">São Simão - GO</span></p>
<p class="realStateLocal">Alameda 67A, Quadra Z-18, Lote 191A, Setor Popular</p>
<h2 class="realStatePrice" value="169000.00">R$169.000,00</h2>
<ul>
<li class="realStateBedroom"><img src="https://www.interago.com.br/App/Sites/1/mc/001-Componentes - Mídias/svg-icons/Icon awesome-bed.svg" width="16" height="16" alt="Ícone Banheiro" /><span>2</span> Quartos</li>
<li class="realStateGarage"><img src="https://www.interago.com.br/App/Sites/1/mc/001-Componentes - Mídias/svg-icons/Icon awesome-car.svg" width="16" height="16" alt="Ícone Vagas" /><span>2</span> Vagas</li>
<li class="realStateWashroom"><img src="https://www.interago.com.br/App/Sites/1/mc/001-Componentes - Mídias/svg-icons/Icon awesome-bath.svg" width="16" height="16" alt="Ícone Banheiro" /><span>1</span> Banheiro</li>
<li class="realStateArea"><img src="https://www.interago.com.br/App/Sites/1/mc/001-Componentes - Mídias/svg-icons/Icon awesome-ruler-combined.svg" width="16" height="16" alt="Ícone Área" /><span>133,25</span> m²</li>
</ul>
</div>
</a>
</div>
</div>

<div class="col-6 col-lg-4">

<div class="cardRealState iCardModel01">
<a href="imoveis/alameda-67a-quadra-z-18-lote-191a-setor-popular" title="Acessar o produto">
<div class="cardRealStateImage">
<img class="imgFluid" src="https://images.unsplash.com/photo-1558036117-15d82a90b9b1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="Imagem do produto">
</div>
<div class="cardRealStateDsc">
<span class="realStateId">23955</span>
<p class="realStateLocation">Venda</p>
<p><span class="realStateComplement">Casa</span> em <span class="realStateCity">São Simão - GO</span></p>
<p class="realStateLocal">Alameda 67A, Quadra Z-18, Lote 191A, Setor Popular</p>
<h2 class="realStatePrice" value="169000.00">R$169.000,00</h2>
<ul>
<li class="realStateBedroom"><img src="https://www.interago.com.br/App/Sites/1/mc/001-Componentes - Mídias/svg-icons/Icon awesome-bed.svg" width="16" height="16" alt="Ícone Banheiro" /><span>2</span> Quartos</li>
<li class="realStateGarage"><img src="https://www.interago.com.br/App/Sites/1/mc/001-Componentes - Mídias/svg-icons/Icon awesome-car.svg" width="16" height="16" alt="Ícone Vagas" /><span>2</span> Vagas</li>
<li class="realStateWashroom"><img src="https://www.interago.com.br/App/Sites/1/mc/001-Componentes - Mídias/svg-icons/Icon awesome-bath.svg" width="16" height="16" alt="Ícone Banheiro" /><span>1</span> Banheiro</li>
<li class="realStateArea"><img src="https://www.interago.com.br/App/Sites/1/mc/001-Componentes - Mídias/svg-icons/Icon awesome-ruler-combined.svg" width="16" height="16" alt="Ícone Área" /><span>133,25</span> m²</li>
</ul>
</div>
</a>
</div>
</div>

<div class="col-6 col-lg-4">

</div>

</section>

CSS:

/* CSS Cartões M1 */

.iCardModel01 h1 {
font-size: 25px;
margin-bottom: 0px;
}

.iCardModel01 .cardRealState {
border-radius: 10px;
box-shadow: 5px 5px 35px rgb(0 0 0 / 10%);
background-color: #fff;
display: flex;
flex-direction: column;
min-height: 500px;
}

.iCardModel01 .cardRealState a {
color: #1e1e1e;
}

.iCardModel01 .cardRealState .cardRealStateDsc {
padding: 20px;
position: relative;
padding-bottom: 15px;
}

.iCardModel01 .cardRealState .cardRealStateImage {
overflow: hidden;
height: 250px;
}

.iCardModel01 .cardRealState .cardRealStateImage img {
object-fit: cover;
object-position: center;
width: 100%;
height: inherit;
border-radius: 10px 10px 0px 0px;
}

.iCardModel01 .cardRealState .cardRealStateDsc p {
margin-block: 10px;
color: #000;
}

.iCardModel01 .cardRealState .realStateId {
color: #444;
font-size: 14px;
font-weight: bold;
}

.iCardModel01 .cardRealState .realStatePrice {
font-size: 24px;
font-weight: bold;
}

.iCardModel01 .cardRealState .cardRealStateDsc ul li {
text-align: center;
font-size: 14px;
margin-inline: 10px;
display: flex;
gap: 8px;
align-items: center;
color: #888;
}

.iCardModel01 .cardRealState .cardRealStateDsc ul {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: 10px;
}

.iCardModel01 .cardRealState .cardRealStateDsc ul li img {
filter: brightness(0) invert(0.6);
}

.iCardModel01 .realStateCity {
font-weight: bold;
}

@media (max-width: 992px) {
.iCardModel01 .row {
grid-gap: 5px;
}

.iCardModel01 .cardRealState {
margin-top: 15px;
min-height: 450px;
}
.iCardModel01 .cardRealState .cardRealStateDsc p {
font-size: 14px;
margin-block: 6px;
}
.iCardModel01 .cardRealState .realStatePrice {
font-size: 16px;
}
.iCardModel01 .cardRealState .cardRealStateDsc {
padding: 10px;
padding-bottom: 10px;
}
.iCardModel01 .cardRealState .cardRealStateDsc ul li {
margin-inline: 0px;
gap: 5px;
}
.iCardModel01 .cardRealState .cardRealStateImage {
height: 200px;
}
.iCardModel01 .cardRealState .realStateId {
font-size: 12px;
}
}

Modelo Imobiliária 1 - Grade de Produtos e Imóveis

Grade de Produtos - Estilo do Modelo Imobiliária 01 - Responsivo e Otimizado com Webvitals

Francisco Negrão

#Cards

Você também pode gostar de ler

Cartão Estilo Salão de Beleza