clone-hbomax

📎 Sumário

• ✨ Features
• 📦 Temas abordados
• Demonstração

• 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

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:

• Raleway
• Quicksand

@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.