brunofamiliar / clone-netflix

Projeto de uma página do Netflix proposto pela digital innovation one

Clone do Netflix 🔺

Este projeto foi realizado seguindo as orientações do desafio "Recriando a Interface do Netflix" da Digital Innovation One, do Bootcamp da Everis.

Este projeto foi realizado através de: HTML5, CSS3 e JavaScript (Jquery)

Foi muito interessante realizar este desafio pois aprendi muitas coisas novas, como utilizar o owl-caroseul do Jquery, como adicionar vídeo pelo HTML e estilizar ele com o CSS, como reaproveitar páginas CSS, além de aprender mais um pouco sobre estilização de imagens.

Objetivos 📔

• Criar uma página semelhante a principal ​d​a​ ​N​e​t​fl​i​x:heavy_check_mark:
• Fazer a página ser responsiva ✔️

Além do esperado

• Criei mais 11 telas sendo uma de login, uma inicial e layout correspondente ao filme ou série (no total existem 10 conteúdos desses gêneros). ✔️
• Todas as telas são responsivas, podendo ser utilizadas em computador, tablet e celular. ✔️
• Adicionei efeitos visuais no carrossel. ✔️
• Interliguei todo o site. ✔️
• Adicionei vídeo (podem ser acessados clicando no player ou em "assistir agora") e funcionalidade em alguns botões (início, sair, todos os filmes/séries e assistir agora). ✔️

Como o projeto ficou

Podemos ver como ele ficou no computador, tablet e celular:

Página de login:

Tela no notebook

Tela no celular

Página principal

Tela no computador

Tela no tablet

Tela no celular

Imagens dos filmes ou séries

Imagem no computador

Imagem no celular

Imagem no computador

Imagem no celular

Imagem no computador

Imagem no celular

Imagem no computador

Imagem no celular

Imagem no computador

Imagem no celular

Imagem no computador

Imagem no celular

Imagem no computador

Imagem no celular

Imagem no computador

Imagem no celular

Imagem no computador

Imagem no celular

Imagem no computador

Imagem no tablet (todas as outras também ficam nesse formato, só ocultei para o README não ficar tão grande!)

Imagem no celular

Efeitos visuais

Com o CSS3, utilizando o hover, consegui criar alguns efeitos visuais quando o mouse passa pelo objeto

Este eu criei, ele destaca o filme o qual o mouse está, isso é muito interessante para facilitar a visualização do usuário.

Esses dois foram criados pelo instrutor.

Problemas para resolver

Podemos reparar que acima do logo do facebook, existe uma pequena linha branca, não consegui tirar ela, até o momento.

A imagem original é essa, no formato svg.

No final do carrossel, na tela do computador, percebemos que pega uma pequena parte do próximo filme, tentei resolver isto aumentando a distância entre eles e utilizando "overflow-x: hidden;" no CSS, mas não deu certo. 😓

Também preciso diminuir a perda de qualidade da imagem principal do filme, quando passo do layout do computador para celular (ou vice versa).

Como o projeto estava no início

Podemos ver que o carrossel estava gigante e ficava cortado, só existia essa página, os botões não possuíam funcionalidade (como agora, o início vai para a tela principal, sair vai para a de login, clicando em algum filme vai para o layout dele e clicando em assistir agora, em outra aba abre o trailer dele no Youtube).