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. Entretanto, fique à vontade para montar a aplicação conforme a sua criatividade.

🔗 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