Projeto desenvolvido na parte 2 da maratona de programação da Kenzie Academy Brasil.
Como utilizar o codepen e o VSCode
- kenzieflix
- README.md
- index.html
- /assets
- /css
- style.css
- /img
- /css
- 'Roboto', sans-serif;
- Preto: #141414
- Bege: #E5E5E5
- Branco: #FFFFFF
- Cinza escuro: #6D6D6E
- Vermelho: #B9090B
- Cinza claro: #808080
Adicione os ícones ao cabeçalho. As imagens necessárias já foram baixadas e estão nesse projeto. Você vai encontrar essas imagens em /assets/img.
Seu trabalho aqui, é apenas adicioná-las ao cabeçalho, assim como está o layout dao figma. Veja um exemplo abaixo:
Esse desafio é dividido em duas partes.
Você deve ter percebido que o botão "Mais informações", possui um estilo um pouco diferente do botão "Assistir". Seu trabalho nesse desafio, é adicionar os estilos que diferenciam o botão "Mais informações".
*Dica: note que a cor de fundo do botão mais informações possui um transparência, não é uma cor sólida(opaca)
Esses dois botões possuem um ícone. Nessa parte do desafio você precisa adicionar os devidos ícones aos devidos botões.
Os ícones já foram baixados no projeto e você os encontra em /assets/img.
Veja abaixo um exemplo do resultado final, ao finalizar as duas partes do desafio 2:
Na aula mostramos o desenvolvimento de duas seções de lista de filmes. Seu trabalho nesse desafio é utilizar o que mostramos na aula, como referência para adicionar mais duas seções, "Só na Netflix" e "Top 10 no Brasil hoje".
As imagens necessárias para a finalização desse desafio, também já foram baixadas e salvas nesse projeto. Você vai encontrá-las em /assets/img.
Veja um exemplo abaixo do resultado esperado:
Seu trabalho nesse desafio é adicionar os elementos faltantes no rodapé.
Veja abaixo um exemplo do resultado final esperado:
Para aplicar o efeito de carrossel às seções de filmes, foi adicionado uma scrollbar em cada uma das seções. Mas o estilo padrão não é lá muito agradável, estéticamente falando.
Para evitar que isso estrague seu layout, adicione um estilo que combine com a cara do seu site. Para isso, você pode adicionar o seguinte código ao seu CSS:
*{
scrollbar-width: thin;
scrollbar-color: #fff #141414;
}
*::-webkit-scrollbar {
width: 9px;
}
*::-webkit-scrollbar-track {
background: #141414;
}
*::-webkit-scrollbar-thumb {
background-color: #fff;
border-radius: 20px;
border: 2px solid #141414;
}
