O projeto é um clone do site HBO Max, com o intuito de reproduzir a interface, com algumas modificações, aplicando os temas abordados ao longo das aulas de CSS da plataforma da Digital Innovation One.
O clone do site HBO Max serve como desafio para os alunos da plataforma testarem seus conhecimentos e colocarem em prática os recursos de HTML e CSS abordados nos cursos.
- Menu de navegação
- Cabeçalho com animação gradiente
- Cards com os planos de assinatura animados
- Lista de filmes e séries disponíveis na plataforma
- Formulário de login
- Rodapé com links importantes
- UI Responsiva
As features são visuais, não possuindo integração com nenhuma API. O intuito do projeto é reproduzir a interface do site original, com algumas modificações.
O projeto possui como intuito aplicar os conceitos abordados na Trilha de CSS da DIO, ministrada pela instrutora Michele Ambrosio.
Recursos CSS presentes no projeto:
- Fundamentos do CSS
- Grid Layout
- Flexbox
- Responsividade
- Pseudo-elementos
- Pseudo-classes
- Transformações 2D e 3D
- Transições e animações
- Tratamento de campos inválidos no formulário
Como parte do desafio final da Trilha de CSS, o desenvolvedor deve reproduzir esse projeto, sem realizar uma consulta do código final do site, presente na branch master deste repositório.
Para auxiliar na reprodução, utilize a branch template-desafio. Faça um fork do projeto em sua conta do GitHub.
Dentro da branch template-desafio, você encontrará na pasta assets/images todos os arquivos de imagens que você irá precisar para utilizar no projeto.
Caso deseje, adicione as variáveis CSS abaixo, que contém todas as cores e gradientes utilizados no projeto:
:root {
--primary-color: #020228;
--secondary-color: #ff00e5;
--tertiary-color: #b535f6;
--btn-bg-color-gradient: linear-gradient(
45deg,
#9b34ef 0%,
#490cb0 20%,
transparent 50%
);
--btn-link-bg-color: #fff;
--btn-link-color: #000;
--card-bg-color: linear-gradient(0deg, transparent, #3b1e63);
--divider-bg-color: linear-gradient(
90deg,
#5516ba,
rgba(255, 0, 229, 0.5) 80%
);
--nav-bg-color: rgba(0, 0, 0, 0.3);
--text-color: #fff;
--link-color: #9e86ff;
--form-bg-color: rgba(211, 211, 211, 0.06);
--form-field-bg-color: rgba(0, 0, 0, 0.2);
--form-field-border: 1px solid rgba(255, 255, 255, 0.7);
--form-field-placeholder: rgba(255, 255, 255, 0.7);
--form-field-error: rgb(255, 76, 76);
scroll-behavior: smooth;
}A propriedade scroll-behavior: smooth irá fazer com que os links que levam para uma outra sessão do site, da mesma página, faça uma transição suave ao realizar a rolagem.
Para implementar a barra de rolagem personalizada, como no exemplo, adicione na sua folha de estilos o seguinte trecho CSS:
/* Custom Scroll */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-thumb {
background: var(--tertiary-color);
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--secondary-color);
}O resultado final do projeto deve contemplar todas as features presentes no resultado final.
As fontes utilizadas no projeto foram:
@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;700&display=swap");Para melhor orientação, assista ao vídeo de instruções do desafio, que está disponibilizado no Módulo 3 da Trilha de CSS.
Você pode acessar ao resultado final do projeto clicando aqui.
Michele Queiroz Ambrosio
Instagram | GitHub | LinkedIn | Twitch
⌨️ com ❤️ por Michele Ambrosio 😊