Este projeto é uma homenagem interativa e responsiva ao clássico da Disney Hércules (1997). Com um layout moderno, seções animadas e uma trilha sonora imersiva, a página convida os visitantes a explorarem o universo mitológico e encantador do jovem semideus.
Ao final do ReadMe
🔗 Links
Esta página inclui:
- Navegação com menu responsivo e menu hamburguer em dispositivos móveis
- Seção de sinopse com imagens destacadas
- Trailer embutido via YouTube
- Galeria com personagens principais
- Carrossel de imagens do filme
- Trilha sonora com áudios interativos
- Lista de prêmios e indicações
- Rodapé com créditos e menção à Disney
- HTML5 — Estrutura semântica
- SCSS — Estilização modular com uso de variáveis, mixins e placeholders
- CSS Flexbox e Grid — Layout responsivo
- Google Fonts — Montserrat
- Media Queries — Adaptação a diferentes tamanhos de tela
A interface foi projetada para funcionar perfeitamente em dispositivos móveis, tablets e desktops. Técnicas aplicadas:
- Uso de
clamp()para fontes fluidas flex-wrap,grid-template-columnseminmax()para a estrutura visual- Breakpoints definidos para layouts abaixo de 768px e 480px
- Organização de código através de SCSS
- Uso avançado de pseudoelementos (
::before) para texturas de fundo - Estruturação de componentes reutilizáveis para cards de personagens
- Inclusão de áudio interativo com
<audio>HTML
- Adicionar animações com JavaScript para scroll e interações
- Incluir modo escuro 🌙 e acessibilidade com teclado
- Otimização de imagens e pré-carregamento
- GitHub - @chryspenalber
- Frontend Mentor - @chryspenalber
- LinkedIn - Chrystiana Penalber
Este site é uma homenagem não oficial ao filme Hércules (1997) da Disney. Todos os direitos de imagem, som e personagens pertencem à The Walt Disney Company.
