Skip to content

Landing page responsiva da Blizzard, desenvolvida para o desafio da BRChallenges. Utiliza HTML5, CSS3, JavaScript, React.js, Material-UI, Sass, TypeScript e Axios para apresentar os principais jogos da Blizzard de forma dinâmica.

Notifications You must be signed in to change notification settings

Sub-Dev/blizzard-br-challenges

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

28 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

💻 Projeto

Esse projeto é uma landing page da empresa Blizzard, ela é composta por um menu de navegação, um banner hero com as informações dos principais jogos da empresa(Diablo, HearthStone e World of Warcraft), a listagem dos jogos exclusivos e um rodapé com informações do download do app battle.net.

Para facilitar a codificação do projeto foi usado um protótipo do figma como base, o autor do layout é o design Gilberto Prado, clique aqui para saber mais detalhes do desafio.

Descrição

O objetivo deste desafio é criar uma landing page que apresente os principais jogos da empresa Blizzard, conforme detalhado na página do desafio no site BRChallenges. Utilizarei as tecnologias listadas abaixo para garantir que todas as funcionalidades e requisitos propostos pelo desafio sejam contemplados.

🎨 Tecnologias utilizadas

  • HTML HTML5: Para a estrutura e layout da interface do jogo.
  • CSS CSS3: Para estilizar e tornar o jogo visualmente atraente com animações e transições.
  • Js JavaScript: Para adicionar funcionalidade e lógica ao jogo.
  • ReactJS React.js: Para criar uma experiência de usuário responsiva e interativa.
  • Material-UIMaterial-UI: Biblioteca de componentes React utilizada para implementar o design com base no Material Design da Google, proporcionando uma UI consistente e moderna.
  • SaasSaas: Utilizado para escrever estilos CSS de forma mais eficiente e organizada, aproveitando recursos como variáveis e aninhamento.
  • SaasTypescript: Adicionado para adicionar tipagem estática opcional ao JavaScript, aumentando a robustez e a escalabilidade do código.
  • AxiosAxios: Cliente HTTP baseado em Promise utilizado para fazer requisições HTTP de forma simplificada e eficiente para a conexão com a API.

📝 Requisitos do desafio

Nível Fácil

  • Criar as seções: Menu, Banner hero, Footer.

  • O texto e o ícone do botão “Baixar jogo” devem ser alterados conforme o sistema operacional do usuário que estiver acessando a página. ( material de apoio)

  • Aplicar efeito de hover nas opções do menu de navegação.

  • Aplicar responsividade para as seguintes resoluções: [x] 1920px, [x] 1440px, [x] 768px e [x] 375px.

Nível Médio

  • Todos os requisitos do nivel fácil.

  • Criar as seções: Menu, Banner hero, Jogos Exclusivo, Footer.

  • Buscar a lista de jogos via api. (acessar endpoint)

  • Aplicar efeito de hover nas imagens dos jogos da seção Jogos Exclusivos.

  • Alterar as informações da seção Banner Hero ao selecionar uma opção no menu lateral. Os jogos disponíveis são Diablo, HearthStone e World of Warcraft.

Nível Difícil

  • Todos os requisitos do nivel fácil e médio.

  • Ao clicar no botão Logar do menu de navegação, deverá ser exibido o modal de login.

  • Criar componente de dropdown para as opções Jogos e Esportes do menu de navegação.

  • Deverá ser executado um gif do jogo quando ocorrer o evento de hover na capa do trailer

👥 Autores

Anthony-Marin Anthony Marin (Sub-Dev) - Perfil no GitHub

💬 Obrigado

Obrigado ao BRChallenges pelo desafio envolvente que inspirou este projeto e ao Gilberto Prado pelo design base Agradecimentos especiais à comunidade de código aberto pelos recursos e ferramentas inestimáveis ​​que tornaram este projeto possível.

🌐 Links

About

Landing page responsiva da Blizzard, desenvolvida para o desafio da BRChallenges. Utiliza HTML5, CSS3, JavaScript, React.js, Material-UI, Sass, TypeScript e Axios para apresentar os principais jogos da Blizzard de forma dinâmica.

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published