Spotify

In this project, I create a clone of Spotify user interface. I created the project with HTML & CSS.

Final Output

Instructions

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.

Assesment Criteria

• ☑ 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.

Extension Criteria

• ☑ 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 and spotify-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.