🎵 Spotify Web Player – Frontend Clone

A frontend-only clone of Spotify Web Player, built to replicate Spotify’s modern UI and layout using HTML and CSS.
This project focuses on UI design, layout structuring, and visual consistency, without any backend or real music streaming functionality.

---

✨ Project Overview

This project recreates the look and feel of Spotify’s web interface, including:

• Sidebar navigation
• Card-based music sections
• Featured charts and trending sections
• Responsive, clean, dark-themed UI styling

⚠️ Note: This is a static frontend clone.
It does not include authentication, backend services, APIs, or audio playback.

---

🚀 Features

• 🎧 Spotify-inspired sidebar (Home, Search, Your Library)
• 🃏 Card-based layout for albums & playlists
• 📊 Sections like Featured Charts, Recently Played, Trending
• 🎨 Dark theme UI similar to Spotify
• 📱 Basic responsive layout

---

🛠 Tech Stack

• HTML5
• CSS3
• Font Awesome (icons)
• Google Fonts

📁 Project Structure

Spotify-Clone/
│
├── src/
│   ├── main.html
│   └── main.css
│
├── assets/
│   ├── images/
│   └── icons/
│
├── screenshots/
│   ├── home.png
│   └── featured.png
│
└── README.md

📸 Screenshots

Home Page

Featured & Trending Sections

---

▶️ How to Run Locally

1. Clone the repository:

   git clone https://github.com/your-username/Spotify-Clone.git
   

2. Navigate to the project folder: cd Spotify-Clone

3. Open src/main.html in your browser to view the Spotify Web Player frontend clone.

📘 What I Learned

• Structuring large layouts using HTML & CSS
• Improved understanding of real-world UI replication and design consistency

👤 Author

Vinay
Aspiring Software Engineer | Frontend Developer
GitHub: vinay-d9

⚠️ Disclaimer

This project is created solely for educational purposes.
All product names, logos, and images belong to their respective owners (Spotify).

No copyright infringement intended.

⭐ Acknowledgements

Inspired by the official Spotify Web Player UI.