A visually appealing and partially responsive clone of the Spotify Web Player built with HTML5, CSS3, and Font Awesome. This project emulates the clean layout and interactive design elements of the original Spotify platform — including a sidebar, music cards, and footer player UI — and is deployed live for demonstration.
🟢 Live Project:
🌐 https://karanray444.github.io/spotify-clone/
- 🎵 Left-aligned sidebar with navigation (Home, Search, Your Library)
- 📚 Scrollable content area with categorized music cards
- 🎚️ Fixed bottom player bar with control icons and volume slider
- 📱 Responsive layout for tablet and smaller screen widths (under development)
- 🎨 Spotify-inspired modern UI theme
- ✅ Font Awesome icon integration
| Technology | Description |
|---|---|
| HTML5 | Markup structure |
| CSS3 | Styling and layout management |
| Font Awesome | Scalable icons and UI symbols |
| GitHub Pages | Live deployment platform |
| Device Type | Support Level | Notes |
|---|---|---|
| Desktop | ✅ Full support | Optimized and polished layout |
| Tablet | ✅ Partial support | Sidebar hides for smaller widths |
| Mobile | Some UI elements still need adaptation |
To run this project locally:
- Clone the repository: git clone https://github.com/karanray444/spotify-clone.git Navigate into the project folder:
cd spotify-clone Open index.html in your browser, or use Live Server (VSCode)
📂 Project Structure php Copy Edit spotify-clone/ │ ├── assets/ # Images, icons, and assets ├── index.html # Core HTML file ├── style.css # Custom styles └── README.md # Project documentation
📜 License This UI clone is created strictly for educational and portfolio purposes. Spotify® is a registered trademark of Spotify AB.