SpotifyClone

A responsive and visually accurate clone of the Spotify web player interface, built using pure HTML and CSS. This project demonstrates advanced CSS styling techniques and layout structures to recreate the popular music streaming platform's user interface.

    ## Features

- Pixel-perfect recreation of Spotify's visual design
- Fully responsive layout
- Custom audio player controls
- Dynamic sidebar navigation
- Recently played section with hover effects
- Trending music cards with album artwork
- Featured charts section
- Sticky navigation with user controls

## Technical Highlights

- CSS Flexbox for responsive layouts
- Custom-styled audio controls
- Hover effects and transitions for interactive elements
- CSS Grid for card layouts
- Sticky positioning for navigation
- Custom scrollbar styling
- SVG icons integration

## Components

1. Sidebar Navigation
- Home and Search options
- Library section with playlist creation prompts
- Podcast discovery section

2. Main Content Area
- Sticky top navigation with forward/backward controls
- Premium upgrade and app installation options
- Multiple content sections (Recently Played, Trending, Featured Charts)

3. Music Player
- Currently playing track information
- Playback controls
- Volume control
- Additional controls for lyrics, queue, and devices

## Usage

This project serves as an excellent template for learning advanced CSS techniques or as a starting point for building music streaming interfaces. The code is well-structured and commented, making it easy to understand and modify.

## Styling Details

- Dark theme with careful attention to Spotify's color palette
- Consistent spacing and typography
- Hover states for interactive elements
- Custom styling for buttons and control elements

Feel free to use this project as a reference or starting point for your own web development projects!