Este projeto é uma recriação do clássico Super Mario Bros, inspirado no filme. Desenvolvido com HTML, CSS e JavaScript, ele traz à vida algumas das cenas e elementos visuais do universo de Mario, proporcionando uma experiência nostálgica para os fãs do jogo e do filme. Este projeto faz parte do desafio da comunidade Dev Em Dobro e da Guild Dev Em Dobro.
- Objetivo do Projeto
- Tecnologias Utilizadas 🛠️
- Estrutura do Projeto 📂
- Descrição dos Arquivos 📄
- Funcionalidades 🌟
- Modelo de Inspiração da Página Inicial 🎨
- Como Usar 🚀
- Links Úteis 🌐
- Testes 🔍
- Contribuição 🤝
- Licença 📜
- Agradecimentos 🙏
Reviver a magia do universo de Super Mario, apresentando suas características icônicas de forma interativa e visualmente atraente.
- HTML: Estrutura o conteúdo do projeto.
- CSS: Responsável pela estilização e apresentação visual.
- JavaScript: Adiciona interatividade e funcionalidades dinâmicas.
super-mario-bros-o-filme/
│
├── src/
│ ├── css/
│ │ ├── reset.css
│ │ ├── style.css
│ │ ├── personagens.css
│ │ ├── jogo.css
│ │ └── avaliacao.css
│ │
│ ├── js/
│ │ ├── index.js
│ │ ├── personagens.js
│ │ ├── jogo.js
│ │ └── avaliacao.js
│ │
| ├── sounds/
| ├── video/
│ └── video-mario.mp4
│ └── images/
│ ├── mario.png
│ ├── luigi.png
│ ├── peach.png
│ ├── bowser.png
│ ├── koopa.png
│ ├── goomba.png
│ ├── yoshi.png
│ ├── toad.png
│ ├── titulo.png
│ ├── coin.png
│ ├── mario-block.png
│ ├── super-mario-chars.png
│ ├── logo-mario.png
│ ├── logo-luigi.png
│ ├── logo-peach.png
│ └── logo-blue-toad.png
│
├── index.html
├── personagens.html
├── jogo.html
├── avaliacao.html
└── README.md
- reset.css: Garantia de consistência nos estilos entre diferentes navegadores.
- style.css: Estilos específicos para a página inicial.
- personagens.css: Estilos para a página dos personagens.
- jogo.css: Estilos para a página do jogo.
- avaliacao.css: Estilos para a página de avaliação.
- index.js: JavaScript para a interatividade da página inicial.
- personagens.js: JavaScript para interações na página de personagens.
- jogo.js: JavaScript para funcionalidades do jogo.
- avaliacao.js: JavaScript para gerenciamento da avaliação.
- images/: Pasta com imagens de personagens e cenários.
- sounds/: Efeitos sonoros relacionados ao tema.
- video/: Contém o vídeo do trailer do filme.
- Modal Interativa: Informações adicionais sobre os personagens e cenas.
- Responsividade: Otimização para dispositivos móveis.
- Efeitos Sonoros: Sons do jogo e do filme.
- Trailer do Filme: Link para o trailer oficial.
A página inicial foi inspirada no visual do jogo Super Mario Bros, utilizando cores vibrantes e elementos característicos. Abaixo está uma captura de tela do modelo de inspiração:
.png)
- Clone este repositório:
git clone https://github.com/paulaPSOx/super-mario-bros-o-filme.git
- Navegue até a pasta do projeto:
cd super-mario-bros-o-filme - Abra o arquivo
index.htmlem um navegador para visualizar o projeto.
- Visualizar o projeto: Super Mario Bros - O Filme
- Repositório no GitHub: paulaPSOx/super-mario-bros-o-filme
Para testar o projeto:
- Certifique-se de que todos os arquivos estão carregados corretamente.
- Navegue pelas páginas e interaja com as funcionalidades.
- Verifique a responsividade em diferentes dispositivos.
Contribuições são bem-vindas! Se você deseja contribuir, envie um pull request.
Este projeto é licenciado sob a MIT License - veja o arquivo LICENSE para mais detalhes.
Agradeço à comunidade Dev Em Dobro e à Guild Dev Em Dobro pelo apoio e recursos durante o desenvolvimento deste projeto!
Espero que você goste do projeto e se divirta explorando o mundo de Super Mario Bros! 🍄✨