Este projeto foi uma das atividades do Bootcamp HTML Web Developer da Digital Innovation One.
O objetivo foi recriar a interface da Netflix utilizando HTML5, CSS3 e JavaScript.
Em relação ao modelo original, desenvolvido pelo instrutor Felipe Aguiar, eu fiz três alterações.
- Alterei o tema e as capas dos filmes: escolhi como tema uma seleção de filmes dos anos 1990. Não consegui encontrar no Google uma imagem pronta que combinasse com o que eu tinha em mente, então decidi "criar" uma por conta própria, usando o Microsoft Paint mesmo 😁.
- Adicionei um efeito hover overlay: quando o indicador do mouse é posicionado sobre a capa de um filme, esta se escurece um pouco e surge uma espécie de tooltip, com alguns dados do filme (título, ano de lançamento e direção). Vejo esse efeito em outras plataformas de streaming e achei bacana tentar fazer algo parecido.
- E por último, na parte do design responsivo, achei legal acrescentar outros seletores e declarações. Tenho um smartphone antigo com uma tela bem pequena e verifiquei que, no projeto original, a visualização da página ficava um pouco prejudicada, com elementos "invadindo" o espaço de outros. Após as modificações este detalhe foi resolvido 👍.
O projeto concluído você pode conferir no link abaixo.