🎧 Spotify Clone

Um projeto front-end inspirado na interface do Spotify, recriado com HTML, CSS e JavaScript para fins de estudo e prática de design responsivo e manipulação dinâmica da DOM.

Figma

https://www.figma.com/design/uxzjL79vJHy2Nb7CbUDwpr/consumo-api?node-id=0-1&t=SLJeqOlDruvPIqzx-1

📜 Índice

• Sobre o Projeto
• Funcionalidades
• Tecnologias Utilizadas
• Estrutura de Pastas
• Como Executar o Projeto
• Melhorias Futuras
• Autor
• Licença

💡 Sobre o Projeto

Este projeto é uma recriação da interface do Spotify Web, com foco em:

• Reproduzir a experiência visual do Spotify Desktop.
• Aplicar conceitos de layout flexível e responsivo.
• Simular interações básicas de um player musical (sem backend real).

O objetivo principal foi praticar HTML semântico, CSS moderno (Flexbox e Grid) e JavaScript puro para manipulação de componentes dinâmicos.

⚙️ Funcionalidades

✔️ Interface semelhante ao Spotify oficial

✔️ Menu lateral com ícones interativos

✔️ Área principal com lista de álbuns e playlists

✔️ Barra inferior simulando o player (play/pause, progresso, etc.)

✔️ Design totalmente responsivo

✔️ Ícones animados e suaves transições com hover

🧩 Tecnologias Utilizadas

• HTML5 — Estrutura semântica e organizada
• CSS3 — Layouts modernos usando Flexbox e Grid
• JavaScript (ES6+) — Manipulação da DOM e interações
• Google Fonts / Spotify Colors — Tipografia e identidade visual inspiradas na marca original

📂 Estrutura de Pastas

📁 spotify-clone/
┣ 📂 src/
┃ ┣ 📂 img/           \# Imagens e ícones do projeto
┃ ┣ 📂 css/
┃ ┃ ┗ 📜 style.css    \# Estilos principais
┃ ┣ 📂 js/
┃ ┃ ┗ 📜 app.js       \# Scripts de interatividade
┣ 📜 index.html        \# Página principal
┗ 📜 README.md         \# Este arquivo

🚀 Como Executar o Projeto

1. Faça o download ou clone o repositório:

   git clone [https://github.com/seu-usuario/spotify-clone.git](https://github.com/seu-usuario/spotify-clone.git)

2. Entre na pasta do projeto:

   cd spotify-clone

3. Abra o arquivo index.html em seu navegador preferido.

   • Clique duas vezes no arquivo index.html, ou
   • Utilize uma extensão como Live Server (VS Code) para melhor experiência.

👨‍💻 Autor

• Roger Ribeiro de Oliveira
• 📍 Desenvolvedor de Sistemas — SENAI
• 💼 LinkedIn
• 💻 GitHub

🪪 Licença

Este projeto é de uso educacional e não comercial. Sinta-se à vontade para clonar, modificar e aprender com ele!