Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/erichidekimiyahara/mapascs2

Esse repositório contém um site responsivo sobre os mapas competitivos do Counter-Strike (CS2) com HTML, CSS e JavaScript puros.
https://github.com/erichidekimiyahara/mapascs2

css gemini html javascript

Last synced: 2 days ago
JSON representation

Esse repositório contém um site responsivo sobre os mapas competitivos do Counter-Strike (CS2) com HTML, CSS e JavaScript puros.

Awesome Lists containing this project

README 

        
[HTML5]: https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white

[CSS3]: https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white

[JAVASCRIPT]: https://img.shields.io/badge/JavaScript-323330?style=for-the-badge&logo=javascript&logoColor=F7DF1E

Mapas Competitivos do CS2



![html][HTML5]

![css][CSS3]

![javascript][JAVASCRIPT]





 Sobre • 

 Como ela funciona? •

 Instrução de uso •

 Tecnologias utilizadas •

 Contribuição •

 Links úteis 






   Página principal






📌 Sobre



Este site foi criado com o objetivo de fornecer informações resumidas sobre os mapas do Counter-Strike (CS2). Aqui, você pode pesquisar seus mapas favoritos e conhecer mais sobre eles!



Basta realizar a pesquisa pelo nome do mapa que procura. A busca pode ser realizada por palavras-chave, mas é sempre recomendado digitar o nome corretamente para obter os melhores resultados. Caso não encontre o mapa em minha base de dados, me envie um e-mail para que possamos ajustar a página e incluir esses dados.



Como ela funciona?



- Digite e pesquise: Você digita o nome de um mapa competitivo que você quer encontrar na caixinha de pesquisa.

- Mágica acontece: A aplicação vasculha um banco de dados (que está no arquivo dados.js) e procura por tudo que tenha a ver com o que você digitou.

- Resultados na tela: Se a aplicação encontrar algo, ela mostra pra você um card com o nome do mapa e uma bela descrição. Se não encontrar nada, ela te avisa que não teve sorte dessa vez.



Instrução de uso



Aqui você decide como rodar seu próprio projeto.



Pré-requisitos



Aqui está a lista de todos os pré-requisitos necessários para rodar seu projeto. Por exemplo:



- Instalação do [Visual Studio Code (VS Code)](https://code.visualstudio.com/download)

- Instalação da imagem background.jpeg da pasta img, localizado no meu [repositório](https://github.com/EricHidekiMiyahara/mapasCS2/tree/main/img).

- Instalação dos ícones globo.png, instagram.png e linkedin.png, localizados no meu [repositório](https://github.com/EricHidekiMiyahara/mapasCS2/tree/main/icon).



Tutorial



1. Crie o arquivo index.html.

2. Crie o arquivo styles.css.

3. Crie o arquivo index.js.

4. Crie o arquivo dados.js.

5. Crie a pasta img.

6. Dentro da pasta img, anexe a imagem background.jpeg.

7. Crie a pasta icon.

8. Dentro da pasta icon, anexe os ícones globo.png, instagram.png e linkedin.png.



Tecnologias utilizadas



- **HTML5:** Estrutura da página. 🌐

- **CSS3:** Estilização e animações. 🎨

- **JavaScript:** Funcionalidades interativas. 💻

- **EmojiPedia:** Para os ícones. 👍

- **Gemini:** Prompts de comandos. 💻



📫 Contribuição



Agradeço a contribuição para o projeto. Se você está corrigindo um bug, adicionando uma funcionalidade, ou melhorando a documentação, sua contribuição é valiosa. Veja como você pode contribuir:



1. **Criar uma nova funcionalidade**



A adição das respectivas imagens com os cards do mapa é um boa ideia para tornar a busca mais elegante e informativa visualmente.



2. **Siga os padrões de codificação**



Consistência é fundamental! Aderir aos padrões de codificação e padrões estabelecidos no projeto. Isso garante a legibilidade e a manutenção do código.



3. **Espere pela revisão**



Irei rever a sua solicitação de pull. Participe da discussão e faça as alterações solicitadas. Suas contribuições serão mescladas no projeto uma vez aprovada!



Links Úteis



- [Projeto](https://mapascs2.vercel.app)

- [Layout](https://github.com/guilhermeonrails/olimpiadas-github)

- [Layout como referência](https://github.com/jeferson-paz/projeto_final_alura_gemini)