🐾 Lumie - Resgate e Adoção de Animais
📝 Descrição do Projeto
A Lumie é uma plataforma desenvolvida com o objetivo de conectar voluntários e doadores à nossa organização de resgate e adoção de animais. O site apresenta a missão e os valores da ONG, detalha as formas de apoio (Voluntariado, Doação, Adoção e Resgate) e oferece um formulário de cadastro completo.
O desenvolvimento deste projeto focou em:
- Acessibilidade: Implementação de Modo Alto Contraste e navegação semântica.
- Responsividade: Design adaptável a dispositivos móveis (Mobile-First).
- Usabilidade: Máscaras de input e validação de consistência de dados (maioridade, CPF, telefone).
🛠️ Tecnologias Utilizadas
- HTML5: Estrutura e Semântica.
- CSS3: Design Responsivo (uso de Flexbox, Grid e Media Queries) e Design System com Variáveis CSS.
- JavaScript (Puro): Interatividade, Máscaras de Input, Validação de Formulário e Funcionalidades de Acessibilidade (Menu Hambúrguer e Alto Contraste).
🔗 Acesso ao Projeto
Link para o Deploy (Site Online): https://francielebrs-13.github.io/Aula01.desenvolvimento.frontend/
Repositório Git: https://github.com/francielebrs-13/Aula01.desenvolvimento.frontend
📋 Como Testar e Validar
Para garantir a funcionalidade completa do site, siga os passos abaixo:
- Acessibilidade (Alto Contraste): Clique no botão "Alto Contraste" no cabeçalho e verifique se as cores mudam para um esquema de alta legibilidade.
- Responsividade: Redimensione a janela do navegador (ou use o modo de visualização mobile). O Menu Hambúrguer deve aparecer e funcionar corretamente.
- Formulário (Página
cadastro.html):
- Preencha os campos e observe o funcionamento das máscaras automáticas (CPF, Telefone e CEP).
- Tente cadastrar uma data de nascimento que o torne menor de 18 anos. A validação customizada deverá bloquear o envio e exibir a mensagem de erro.
- Preencha corretamente e submeta para ver a mensagem de sucesso.
🧑💻 Autor
- Franciele Nayara Barros dos Santos - # Aula01.desenvolvimento.frontend