https://github.com/fvandrad/catalogo

Catálogo interativo
https://github.com/fvandrad/catalogo

ai catalogo css html ia interative interatividade js page pagina site webdesign website

Last synced: 10 days ago
JSON representation

Catálogo interativo

• Host: GitHub
• URL: https://github.com/fvandrad/catalogo
• Owner: fvandrad
• License: mit
• Created: 2024-12-26T02:31:30.000Z (about 1 month ago)
• Default Branch: main
• Last Pushed: 2025-01-23T17:39:19.000Z (13 days ago)
• Last Synced: 2025-01-23T18:32:58.696Z (13 days ago)
• Topics: ai, catalogo, css, html, ia, interative, interatividade, js, page, pagina, site, webdesign, website
• Language: CSS
• Homepage: https://fvandrad.github.io/catalogo/
• Size: 255 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# 📚 Catálogo Interativo

Este projeto é um catálogo interativo que permite aos usuários filtrar e pesquisar itens por categorias. O design é responsivo e utiliza HTML, CSS e JavaScript para fornecer uma experiência de usuário dinâmica.

## 📁 Estrutura do Projeto

- **📄 index.html**: Contém a estrutura principal do catálogo, incluindo o cabeçalho, navegação de categorias, área principal dos itens e rodapé.

- **🎨 style.css**: Define o estilo visual do catálogo, incluindo fontes, cores e layout.

- **🛠️ script.js**: Contém a lógica para filtragem de categorias e pesquisa de texto.

## ⚙️ Funcionalidades

- **🔍 Filtro de Categorias**: Os usuários podem clicar nos botões de categoria para filtrar os itens exibidos. A categoria "Todos" exibe todos os itens.

- **✏️ Pesquisa de Texto**: Um campo de entrada permite que os usuários pesquisem itens por texto.

- **📱 Design Responsivo**: O layout se adapta a diferentes tamanhos de tela, garantindo uma boa experiência em dispositivos móveis e desktops.

## 🚀 Como Usar

1. **🖱️ Navegação de Categorias**: Clique em qualquer botão de categoria para filtrar os itens exibidos. O botão "Todos" limpa outros filtros.

2. **🔤 Pesquisa**: Digite no campo de pesquisa para filtrar itens por texto. A lista de itens será atualizada conforme você digita.

## 🛠️ Tecnologias Utilizadas

- **HTML5**: Estrutura do documento.

- **CSS3**: Estilização e layout.

- **JavaScript**: Interatividade e lógica de filtragem.

## 📥 Como Executar o Projeto

1. Clone o repositório para o seu ambiente local.

2. Abra o arquivo `index.html` em um navegador web.

## 🤝 Contribuição

Contribuições são bem-vindas! Envie um pull request ou abra uma issue.

## Apoie Nosso Projeto

Ajude-nos a continuar criando projetos incríveis e apoiando o desenvolvimento de código aberto. Considere se tornar um patrocinador e juntos alcançaremos grandes conquistas!

## 📜 Licença

Este projeto está licenciado sob a licença MIT.

## 📬 Contato

Para mais informações, entre em contato através do botão de patrocínio no rodapé ou pelas redes sociais listadas.