https://github.com/carla-coder/espaco_gamer
Tarefa Fron-end - 100 de 100
https://github.com/carla-coder/espaco_gamer
css html javascript
Last synced: 25 days ago
JSON representation
Tarefa Fron-end - 100 de 100
- Host: GitHub
- URL: https://github.com/carla-coder/espaco_gamer
- Owner: Carla-coder
- Created: 2024-06-05T01:14:31.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-11-30T14:25:22.000Z (over 1 year ago)
- Last Synced: 2025-03-11T16:22:09.102Z (over 1 year ago)
- Topics: css, html, javascript
- Language: HTML
- Homepage: https://espaco-gamer.vercel.app
- Size: 17.2 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Homepage Espaço Gamer
- Bem-vindo ao projeto Espaço Gamer! Esta é uma Homepage dedicada aos entusiastas de jogos, oferecendo alguns jogos interativos e de conhecimento.
## Descrição
- A Homepage Espaço Gamer é um site simples em fase de construção para implementação de jogos educativos, interativos e de conhecimentos em geral. Aqui está uma visão geral das funcionalidades e recursos implementados neste projeto.
## Funcionalidades
- **Navegação**: A barra de navegação superior permite que os usuários acessem facilmente diferentes seções do site, incluindo informações sobre Quem Somos, uma lista de Jogos disponíveis e como nos Contatar.
- **Modal "Quem Somos"**: Um modal é aberto fornecendo algumas informações sobre o Espaço Gamer.
- **Logo em Destaque**: Uma logo centralizada e destacada adiciona identidade visual à página inicial.
- **Integração com Redes Sociais**: Ícones de redes sociais conectam os usuários às plataformas de mídia social, permitindo que eles se envolvam e interajam conosco em diversas plataformas.
- **Botão de Áudio**: Um botão de controle de áudio permite que os usuários reproduzam e pausem a música de fundo enquanto navegam pela página, proporcionando uma experiência auditiva agradável.
## Tecnologias utilizadas
- **HTML5**: Utilizado para estruturar o conteúdo da página e definir sua semântica.
- **CSS3**: Responsável pela estilização e aparência visual do site, incluindo layout, cores e animações.
- **JavaScript**: Implementação de interatividade na página, como modais, botão de controle de áudio e funcionalidades de navegação.
## Créditos
- Agradecemos às seguintes fontes pelas inspirações e recursos utilizados neste projeto:
- **Font Awesome** - Ícones de redes sociais.
- **Free Pik** - Imagens de fundo de alta qualidade.
- **Canva** - Criação da Logo.
- **https://pixabay.com/** - Áudio de música para games grátis para download. **Música utilizada**: Neon Gaming/dopestuff
## Como rodar o projeto
- Clone este repositório para a sua máquina local.
```
git clone https://github.com/seu-usuario/Espaco_Gamer.git`
```
- Abra o VSCode.
- Abra o arquivo 'inicial.html' com o Live Server.
- Se preferir é só clicar no Deploy, o link está disponível para acesso rápido ao navegador.
```
espaco-gamer.vercel.app
```
## Aprendizados
### Construir o projeto Espaço Gamer foi uma experiência valiosa que me permitiu aprender várias coisas interessantes. Aqui estão algumas lições que aprendi durante o processo de desenvolvimento:
- **Gerenciamento de Layout**: Aprendi a criar layouts estilizados usando HTML e CSS. Isso incluiu interação de elementos na página e a implementação de estilos visuais.
- **Interatividade com JavaScript**: Implementei funcionalidades interativas usando JavaScript, como modais, botões de controle de áudio e navegação. Isso permitiu criar uma experiência de usuário mais interativa.
- **Manipulação de Mídia**: Aprendi a incorporar e controlar elementos de mídia, como áudio, para fornecer uma experiência multimídia aos usuários. Isso incluiu a seleção adequada de formatos de arquivo e a implementação de controles de reprodução.
- **Estilização Avançada com CSS**: Explorei técnicas avançadas de estilização CSS, como animações, degradês e efeitos visuais, para criar uma aparência atraente para o site.
## Desafios que enfrentei:
- **Gerenciamento de Código**: Manter o código organizado e legível foi importante para facilitar o desenvolvimento contínuo e a colaboração. Adotei boas práticas de codificação e usei ferramentas de controle de versão para gerenciar o código de forma eficaz.
- **Estilização Criativa**: Desenvolver uma estética visual atraente para o site foi um desafio criativo. Experimentei diferentes estilos de cores e elementos visuais até encontrar uma aparência que refletisse a identidade e os objetivos do projeto.
- O desafio maior agora é tornar o site responsivo, que se adapte a diferentes tamanhos de telas e dispositivos.
- Além disso, pratiquei persistência e paciência ao resolver problemas técnicos e experimentar novas abordagens de design e desenvolvimento.
## Print das Telas
- Página Inicial
- Modal "Quem Somos"
- Página de Jogos
- Página de Contato
## Autores
- [@Carla-coder](https://www.github.com/Carla-coder)
## Instituição de Ensino
- Escola Senai unidade Jaguariúna - Curso Técnico em Desenvolvimento de Sistemas FullStack - Segundo Semestre (2024)
- Professor responsável pelo Projeto: Robson B. Souza https://github.com/robsonbsouzaa