Skip to content

Simple Spotify Web Player clone using HTML and CSS, with responsive design and basic music playback features.

Notifications You must be signed in to change notification settings

apvastava/Spotify-UI-Clone

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Spotify Web Player Clone

This project is a simplified clone of the Spotify web player. It includes a sidebar with navigation options, a main content area displaying recently played and trending music, and a fixed music player at the bottom of the screen.

Project Structure

HTML

The HTML structure consists of:

  • A <head> section with metadata and links to stylesheets and fonts.
  • A <body> section with the main content divided into three parts:
    • sidebar: Contains navigation options and a library section.
    • main-content: Displays the recently played and trending music, along with Spotify playlists.
    • music-player: A fixed bottom music player with album details and playback controls.

CSS

The CSS file provides the styling for the following elements:

  • Global styles: Font, margin, padding, and box-sizing settings.
  • body: Background color and text color.
  • main: Flexbox layout for the main container.
  • sidebar: Styles for the sidebar, including background color, width, and padding.
  • main-content: Styles for the main content area, including background color, padding, and margins.
  • music-player: Styles for the fixed bottom music player, including layout and padding.
  • Additional styles for navigation options, library sections, cards, footer, and playback controls.

Dependencies

Contributing

If you want to contribute to this project, feel free to open issues and submit pull requests.

About

Simple Spotify Web Player clone using HTML and CSS, with responsive design and basic music playback features.

Topics

Resources

Stars

Watchers

Forks