» Visualize a página web clicando aqui «
"Use ctrl + click para abri-la numa nova janela!"
• Repositório do projeto de uma página-web sobre o anime "Cyberpunk Edgerunners",
feito no VSCode e com as linguagens de HTML, CSS e JavaScript.
A página foi inicialmente criada como parte da primeira avaliação para a disciplina de Tópicos Especiais em Tecnologia e utilizando apenas HTML e CSS. Clique aqui para ir ao repositório com o código original.
No entanto, continuei trabalhando nela como um projeto pessoal de onde havia parado anteriormente, expandindo-a e adicionando mais conteúdo à página, além de fazer experimentos com JavaScript.
A página tem como foco representar o anime Cyberpunk Edgerunners, produzido pelo estúdio de animação japonês Studio Trigger e inspirado no jogo Cyberpunk 2077, da desenvolvedora polonesa CD Projekt Red. A página aborda diversos aspectos do anime como Trilha Sonora, Personagens, Sobre o Jogo e Onde Assistir o anime.
A página inclui as seguintes principais funcionalidades:
- Barra de navegação dinâmica no canto superior que "se esconde e aparece" conforme o usuário navega pela página.
- Seções dedicadas para a trilha sonora, personagens, sobre o jogo e onde assistir o anime.
- Vídeos embed do youtube ativadas por uma modal na seção da Trilha Sonora.
- Botão de "voltar ao topo" que faz o usuário voltar ao topo da página de forma suave.
- Responsividade para diferentes tamanhos de tela.
O projeto segue uma estrutura extensa, composta por arquivos HTML, CSS, JavaScript, fontes e imagens.
Abaixo está a organização dos arquivos:
|-- src
| |-- css
| | |-- animation.css
| | |-- fonts.css
| | |-- modalVideo.css
| | |-- pseudoElementStyles.css
| | |-- reset.css
| | |-- responsive.css
| | |-- style.css
| |-- fonts
| | |-- Cyberpunk-Regular.ttf
| | |-- Refinery25-Regular.ttf
| |-- images
| | |-- AdamSmasher.jpeg
| | |-- classificacaoIndicativa16.png
| | |-- cyberpunk2077ArtCover.jpg
| | |-- CyberpunkEdgerunnersLogoImage.png
| | |-- DavidMartinez.jpeg
| | |-- DavidSandevistanBackgroundImage.png
| | |-- Dorio.jpeg
| | |-- edgeRunnersLogo.png
| | |-- Falco.jpeg
| | |-- Faraday.jpeg
| | |-- GloriaMartinez.jpeg
| | |-- IMDbLogo.png
| | |-- Julio.jpeg
| | |-- Kiwi.jpeg
| | |-- Lucy.jpeg
| | |-- mainBackgroundImage.png
| | |-- Maine.jpeg
| | |-- music1Image.jpeg
| | |-- music2Image.jpeg
| | |-- netflixCyberpunkEdgerunnersLogo.png
| | |-- Pilar.jpeg
| | |-- platformPCSVG.svg
| | |-- platformPS4SVG.svg
| | |-- platformPS5SVG.svg
| | |-- platformXboxOneSVG.svg
| | |-- platformXboxSeriesSXSSVG.svg
| | |-- Rebecca.jpeg
| | |-- rottenTomatoesFreshCriticsScore.png
| | |-- rottenTomatoesPositiveAudienceScore.png
| | |-- yellowCyberpunkIcon.ico
| | |-- yellowCyberpunkImage.png
| |-- js
| | |-- script.js
|-- index.html
|
