In this project I created the front-end design of Spotify using HTML and CSS only.
Link ---> https://xohail-spotify.netlify.app
Screenshots :-
There are three main files in this Project :-
-
Index.html - It consists of the html code for the home screen of the music player.
-
Playlist_Screen.html - It consits of the html code for the Single Playlist Screen which is linked to the first html page. By clicking on any of the artist's icon below the latest release section you can go to this page.
-
Style.css - It consists of the extrenal CSS stylesheet that is applied commonly to both the webpages.
All the relevant images are contained in the Images folder.
A) Index.html :
This has 4 main parts :
-
Navigation bar - Which contains the logo, search bar etc.
-
Main Section - This has furthur sections
a) Home Screen Carousel
b) Latest Releases Section - If you click on any of the song icon or the dropdown menu's Play now the bottom music bar will pop up.
c) Popular Artist Section
d) Playlists Section
e) Genre Section
f) Latest Songs section
-
Aside Section - This conists of the queue of songs.
-
Bottom Music Player
B) Style.css :
It has got the common navigation and music player sections from Index.html apart from that it displays artist details and their songs in main section. In the aside section it shows the similar artists and recenty played songs.
Proper responsiveness have been added to both the pages.