Card de Imóvel Premium
Card imobiliário de alto padrão com badge NOVO, ícones de metragem, quartos e vagas, preço em destaque e elevação suave no hover.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="flutua">
<article class="imovel">
<div class="foto">
<img src="https://picsum.photos/seed/imovel-fachada/600/400" alt="" />
<span class="badge">Novo</span>
</div>
<div class="corpo">
<h2>Cobertura Duplex · Moema</h2>
<p class="endereco">Av. dos Eucaliptos, 120 — São Paulo</p>
<ul class="atributos">
<li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round">
<rect x="3.5" y="3.5" width="17" height="17" rx="2" />
<path d="M3.5 20.5 20.5 3.5M8 20.5v-3M12.5 20.5v-3M17 20.5v-3" />
</svg>
182 m²
</li>
<li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round">
<path d="M3 18v-6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v6M3 18h18M3 18v2M21 18v2" />
<path d="M6 10V8a2 2 0 0 1 2-2h3v4" />
</svg>
3 suítes
</li>
<li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round">
<path d="M4 16l1.6-5A2 2 0 0 1 7.5 9h9a2 2 0 0 1 1.9 2l1.6 5M4 16h16M4 16v3M20 16v3" />
<circle cx="8" cy="16" r="0.5" />
<circle cx="16" cy="16" r="0.5" />
</svg>
2 vagas
</li>
</ul>
<div class="rodape">
<div>
<span class="apartir">A partir de</span>
<p class="preco">R$ 2.450.000</p>
<span class="cond">Cond. R$ 1.850 · IPTU incluso</span>
</div>
<a class="visita" href="#">Agendar visita <i>→</i></a>
</div>
</div>
</article>
</div>
</body>
</html>Efeitos relacionados
Planta baixa estilo blueprint em que os cômodos acendem sozinhos ou no hover, revelando a foto e a metragem de cada ambiente ao lado.
Mini Tour pela Planta do Imóvel
CSS / TailwindPlanta baixa estilo blueprint em que os cômodos acendem sozinhos ou no hover, revelando a foto e a metragem de cada ambiente ao lado.
Card fofinho de petshop com patinhas caindo ao fundo, foto redonda do pet, tags de serviço e botão que solta latidos visuais em loop.
Card de Petshop com Patinhas
CSS / TailwindCard fofinho de petshop com patinhas caindo ao fundo, foto redonda do pet, tags de serviço e botão que solta latidos visuais em loop.
Seção hero de escritório de advocacia: serifada elegante sobre grafite e a balança da justiça desenhada em linhas douradas que se traçam em loop.
Hero Sóbrio de Advocacia
CSS / TailwindSeção hero de escritório de advocacia: serifada elegante sobre grafite e a balança da justiça desenhada em linhas douradas que se traçam em loop.