In this project, I create a clone of Spotify user interface. I created the project with HTML & CSS.
In the screens
folder you will see images of spotify at different resolutions. The image assets needed to complete the exercise are in the assets/img
folder.
- ☑ The overall structure of the layout reflects the
spotify-lg.png
reference image. - ☑ Fonts, colors and spacings used are similar (they don't need to be identical) to the reference images
- ☑ CSS avoids repetition.
- ☑ CSS class names are descriptive.
- ☑ HTML is semantic and well structured.
- ☑ The left menu collapses as shown in
spotify-xs.png
. - ☑ The list of albums expands and collapses to fill the available page space (see
spotify-md.png
andspotify-s.png
) - ☑ The top navigation list wraps as the page size is reduced.
- ☑ On hovering over cover images, a play icon appears overlaid.
- ☑ Only the main content area scrolls - it moves behind the upgrade bar and the player controls. The side menu also stays fixed as the main content scrolls.