O desafio proposto consistia em criar uma landing Page, aplicando os conhecimentos aprendidos de animações em CSS. Foram explorados os conceitos de CSS Transitions, utilizando pseudo elementos e pseudo classes, e CSS @keyframes para desenvolver animações com regras específicas. A página de portifólio, contém o hamburguer menu ensinado no bootcamp da DIO, além de efeitos manipulando filters nas imagens.
Para finalizar a página, foram inseridos links para outros projetos contidos em meu Github com um breve descritivo de cada atividade.
Figura 01: Landing Page
Figura 02: Resultado do desafio.
Figura 02: Versão para dispositivos móveis.
- Background animado;
- Card principal com efeito Glassmorph e interativo ao clique em desktops;
- Efeito de transição hover nos cards entre .gif e .jpg.;
- Links do menu hamburguer funcionais;
- Efeitos sonoros nos links e menu;
- Modificações no layout e dimensões da navbar em dispositivos mobiles;
- Condição que monitora o evento scroll da tela para esconder a navbar em dispositivos mobile;
- Responsividade para telas menores e dispositivos móveis;
- O design e a disposição dos botões muda para adequar a funcionalidade para tablets e celulares;
- Link das atividades de Keyframes & Transitions;
- Customização da scrollbar;