Um site para o jogo do Dininho

Este é um simples website para o jogo do dininho (Dininho Adventures).

O website foi desenvolvido apenas com html, css e javascript. Ou seja, ele é apenas uma página estática.

O projeto está online! Confira aqui!

Este projeto foi um desafio proposto pela CollabCode: #QuarentenaCode 0 - FrontEnd

Páginas

Há apenas uma página neste website, que é a própria landing page.

Ações do usuário

• Navegação para páginas oficiais do jogo
• Checar prévias do jogo (imagens e trailer)
• Checar informações gerais sobre o jogo
• Ver easter egg

Conteúdo

• Informações descritivas sobre o jogo
• Prévias (imagens e vídeos) do jogo
• Link para a página do jogo na steam
• Links para redes sociais

Features

• Responsividade

  O layout se adapta bem aos diversos tamanhos de tela:

  • Smartphones,
  • Tablets,
  • Televisões,
  • Monitores de tamanho normal,
  • Telas muito grandes (Ultra-wide screens)

• Carousel gallery

  Uma galeria com previas do jogo (video e fotos) no formato carousel/slider. A navegação pelo carousel pode se dar tanto por gestos em dispositivos móveis (deslizar para a direita ou para esquerda), quanto por botões nas suas laterais e o próprio clique/touch no item pode mover para o alvo.

• Easter egg

  Ao clicar nos ovos (separadores de seções) que estão espalhados pela página, uma surpresa aparece para o usuário.

---

To do

• Parallax hero background

  Configurar um background dinâmico com efeito paralax para o banner inicial no lugar da imagem estática atual.

• Video controller

  Remover controles padrões e implementar controles personalizados ao player de vídeo e adicionar 'autocontroles' de acordo com a navegação no carousel: se o vídeo estiver tocando e o usuário passar para a próxima imagem (ou anterior), o player deverá pausar automaticamente. Também é importante que os controles não impeçam a navegação padrão no carousel, ou seja, os controles não devem impedir que o usuário consiga passar para a próxima imagem com o gesto de swipe.

• Full view

  Adicionar uma nova feature: ao clicar na imagem que está sendo exibida no centro do carousel, ela deve aparecer ampliada (em tela cheia). Um backdrop deve ser criado para ressaltar a imagem e desfocar o fundo. Ao clicar nele (backdrop) a imagem deve voltar ao estado original. Opcionalmente também pode haver um botão de close para fechar. Este efeito não deve ser aplicado ao vídeo, pois o vídeo em si já deve possuir o recurso de full screen em seus controles e o comportamento padrão de clique sobre o player deve ser de play/pause.

---

Agradecimentos

Agradeço a CollabCode pela realização do desafio e pela chance de ter participado deste evento.

CollabCode: #QuarentenaCode 0 - FrontEnd

Confira aqui o Figma do projeto