This project is a clone of the Spotify web player, built using HTML and CSS. The design replicates the key components of the Spotify interface, including the sidebar, main content area, and music player at the bottom.
- Responsive Design: The layout adapts to different screen sizes.
- Sidebar Navigation: Includes options for Home, Search, and Your Library.
- Main Content Area: Displays recently played, trending, and featured charts.
- Music Player: A fixed music player at the bottom with album art, playback controls, and volume adjustment.
- HTML5
- CSS3
- Font Awesome: For icons used in the navigation and music player.
- Google Fonts: Montserrat is used for typography.
- Clone the repository:
git clone https://github.com/yourusername/spotify-web-player-clone.git
Folder structure: ├── index.html ├── style.css ├── assets │ ├── logo.png │ ├── library_icon.png │ ├── card1img.jpeg │ ├── card2img.jpeg │ ├── card3img.jpeg │ ├── card4img.jpeg │ ├── card5img.jpeg │ ├── card6img.jpeg │ ├── backward_icon.png │ ├── forward_icon.png │ ├── player_icon1.png │ ├── player_icon2.png │ ├── player_icon3.png │ ├── player_icon4.png │ ├── player_icon5.png │ └── screenshot.png
- Replace
yourusername
with your actual GitHub username in the repository link. - If you have a screenshot of the project, save it in the
assets
folder asscreenshot.png
and update the path accordingly. - Ensure all images and icons used in the project are placed in the
assets
folder as indicated in theREADME.md
.