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.
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 HTM e CSS.
Baixe a extensão go live para renderizar o projeto.
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").
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.
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").
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).
- Implemente o modo responsivo.
- Adicionar um botão para alternar entre temas claro e escuro.
Temos uma sugestão de design no Figma. Entretanto, fique à vontade para montar a aplicação conforme a sua criatividade.
- Estruturação de conteúdo
- Uso de tags semânticas
- Layout responsivo
- Estilização avançada
Conhecimento em HTML e CSS