Spotify UI Clone

A high-fidelity replica of the Spotify web player's user interface, built entirely with HTML and CSS. This project focuses on mastering advanced CSS layout techniques, including Flexbox and Grid, to recreate a complex, responsive, and aesthetically pleasing design without any JavaScript functionality.

• Built exclusively with HTML and CSS to focus on pure styling and layout replication, proving a strong grasp of foundational web technologies.
• Utilized CSS Grid for the main page structure (sidebar, main content, player) to ensure a robust and scalable layout.
• Employed CSS Flexbox for component-level layouts, such as navigation items and player controls, for fine-tuned alignment and spacing.
• Focused on pixel-perfect details, including custom scrollbars, hover effects, and font consistency, to match the original Spotify design.

1. Structured the entire layout using semantic HTML, dividing the UI into three main sections: sidebar, main content, and music player.
2. Styled the sidebar, implementing navigation links and the user's library section.
3. Developed the main content area, creating reusable card components for albums and playlists.
4. Built the music player bar, including playback controls, progress bar, and volume sliders.
5. Ensured the layout is responsive and adapts cleanly to different screen sizes.