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.
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.
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.
- Font Awesome for icons.
- Google Fonts for the Montserrat font.
If you want to contribute to this project, feel free to open issues and submit pull requests.