Skip to content

Recreation of Spotify's web interface using only HTML and CSS.

Notifications You must be signed in to change notification settings

AtikoSpeed/html-spotify-challenge

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

34 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Spotify Web Interface Clone

A pixel-perfect recreation of Spotify's web interface using only HTML and CSS. This project showcases responsive design and CSS Grid/Flexbox mastery without any external libraries.

Key Features

  • Responsive layout that adapts from mobile to desktop
  • Interactive hover states and animations using pure CSS
  • Identical UI components matching Spotify's design
  • Custom audio player controls
  • Grid-based album layouts
  • Side navigation with collapsible menu

Screenshots

Desktop View

Desktop Screenshot

Mobile View

Mobile Screenshot

Preview

Clone and open index.html to see the interface in action.

Technologies

  • Pure HTML5
  • Vanilla CSS3 with:
    • CSS Grid
    • Flexbox
    • Media Queries
    • Custom Properties
    • Animations

Credits

Design inspiration from Spotify

Built as a frontend development exercise focusing on CSS layout and responsive design principles.

About

Recreation of Spotify's web interface using only HTML and CSS.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • HTML 55.7%
  • CSS 44.3%