🎧 Spotify Web Player Clone
A Spotify Web Player UI clone built using HTML and CSS as part of my CSS Major Project.
This project focuses on recreating the look and structure of a real-world music player interface while strengthening my CSS layout and styling skills.
At this stage, the project is purely UI-based. Interactive features like play, pause, or volume control will be added later using JavaScript.
👤 Author
Satyanarayan Beshra
📌 About This Project
I built this project to get hands-on experience with CSS by cloning Spotify’s web player design.
It helped me practice Flexbox layouts, positioning elements, hover effects, and organizing a clean UI structure similar to a real application.
✨ Features
- Spotify-inspired dark and modern UI
- Sidebar with Home, Search, and Library sections
- Playlist and album card layout
- Sticky top navigation bar
- Bottom music player section
- Hover effects on icons and buttons
- Tooltips on player controls (Lyrics, Queue, Volume, etc.)
- Responsive layout using Flexbox
🛠️ Tech Used
- HTML5
- CSS3
- Font Awesome (CDN)
- Google Fonts (Montserrat)
Clone the repository:
git clone https://github.com/Satya-098/spotify-clone-css.git Open the project folder and launch index.html in your browser.
(Using Live Server in VS Code is recommended.)
📚 What I Learned
- Building structured layouts using Flexbox
- Writing clean and reusable CSS
- Creating hover effects and tooltips with pure CSS
- Designing UI inspired by real-world applications
🚀 What’s Next
- Add JavaScript functionality (play, pause, seek, volume)
- Improve mobile responsiveness
- Enhance animations and UI interactions
Note
This project is created only for learning purposes. All branding, images, and design inspiration belong to Spotify.
⭐ If you like this project, feel free to star the repository!