Este mini-projeto consiste na criação de um componente de interface para exibir informações de um imóvel em um card. O objetivo é praticar a construção de interfaces utilizando HTML e CSS.

🤓 Antes de começar

Para rodar o projeto, basta abrir o arquivo index.html em qualquer navegador. Não é necessário instalar dependências adicionais, pois o projeto utiliza apenas HTML e CSS.

Baixe a extensão go live para renderizar o projeto.

🔨 Requisitos

Requisito 1

Comece criando a primeira sessão do card:

• O cartão deve exibir uma imagem principal da propriedade.
• Exibir o título da propriedade (ex: "Apartamento moderno").

Requisito 2

Para esse segundo requisito, é necessário:

• Mostrar a avaliação da propriedade em estrelas (ex: 4.8) e o número de avaliações.
• Incluir uma breve descrição da propriedade.

Requisito 3

Inclua uma sessão para os detalhes adicionais:

• Exibir detalhes como metragem (ex: 85m²), número de quartos e banheiros.
• Mostrar a localização da propriedade com um ícone de mapa.
• Incluir tags que descrevem características da propriedade (ex: Varanda, Mobiliado, Pet-friendly).

Requisito 4

Crie a última sessão do card que contenha:

• Exibir o preço da propriedade em destaque, com formatação adequada (ex: R$250,000).
• Incluir botões para "Agendar visita" e "Contatar corretor".
• O botão "Agendar visita" deve ter um estilo primário (verde).
• O botão "Contatar corretor" deve ter um estilo secundário (borda verde e fundo branco).

🔨 Desafio extra para quem quer ir além

• Implemente o modo responsivo.
• Adicionar um botão para alternar entre temas claro e escuro.

🎨Design sugerido

Temos uma sugestão de design no Figma. Mas sinta-se livre para utilizar a criatividade e fazer o seu próprio design.

Figma

🔗 Link do design

👉🏽 Sobre esse mini-projeto

O que você irá praticar:

HTML

• Estruturação de conteúdo
• Uso de tags semânticas

CSS

• Layout responsivo
• Estilização avançada

Pré-requisitos

Conhecimento em HTML e CSS