Recriando a interface do site NETFLIX, utilizando as tecnologias: HTML5, CSS3 e JavaScript, e seguindo as aulas ministradas por Felipe Aguiar (na plataforma Digital Innovation One).
Após seguir as aulas do Felipe Aguiar, dei uma nova roupagem (ainda que mantendo a estrutura original da interface) voltado para conteúdos coreanos (algo que gosto bastante), como: Dramas, Filmes e Variedades.
- O projeto inicial do site está no repositório do Felipe Aguiar (o mesmo poderá ser visto clicando aqui).
Em síntese, o que foi adicionado ou alterado na interface foram os seguintes elementos:
- Alterado o nome de NETFLIX para K-FLIX, ou seja, um site voltado para conteúdos coreanos;
- Os menus no canto superior direito da tela, ao serem clicados, irão levá-lo à seção escolhida;
- Logo da série adicionada na aba do menu principal (com responsividade);
- Assim como no site da NETFLIX, eu decidi adicionar o "Em alta" no mesmo campo do filme principal, ou seja, ele se mantém a frente do background (Na NETFLIX, "Em alta" e "Minha Lista" aparecem na frente do background do filme principal);
- Adicionada novas seções de Dramas, Filmes e Variedades, cada um com um breve catálogo e com links clicáveis (que levam para o MyDramaList), além de bordas arrendondadas, assim como na NETFLIX;
- Seção de contatos no final da página;
- Após algumas alterações, o site ainda mantém a responsividade em celulares ou janelas de tamanhos menores.
- Ao clicar no botão "ASSISTIR AGORA", irá abrir uma pop-up com o "trailer" da série "Hotel Del Luna". Por conta dos direitos autorais, decidi colocar outro vídeo no lugar do trailer da série;
- Os menus de "Início", "Dramas", "Filmes" e "Variedades" foram colocados do lado esquerdo, perto da logo, assim como na Netflix;
- Adicionado do lado direito os ícones de "Pesquisa", "Notificação" e "Perfil" semelhantes aos da Netflix;
- A barra dos menus de navegação citados acima possuem responsividade;
- Reorganizados alguns arquivos e pastas do projeto.
- Demonstração da barra de navegação com flexbox e de outros elementos da página com responsividade:
- Responsividade no player de vídeo:
Não tenho nenhuma relação com o site MyDramaList, decidi colocar no meu projeto, pois, além de gostar do site, queria dar vida ao catálogo com links clicáveis. ^^
Comecei a estudar programação a poucas semanas e estou curtindo bastante meu progresso. Ainda mais com os cursos que a DIO proporciona gratuitamente! 😄
Esse é o meu segundo projeto (com HTML, CSS e JavaScript), sendo que tanto o primeiro, quanto esse daqui eu construí por meio de um dos cursos da Digital Innovation One.
Para finalizar, esse é meu perfil no LinkedIn! https://www.linkedin.com/in/rubens-fs/ (ainda estou aprendendo a personalizar o perfil, então ainda está bastante vazio, se quiser me seguir, sinta-se à vontade! 😃).