jsblanco / lab-css-spotify-clone

A CSS exercise to practice positioning and layout

LAB | CSS Spotify Clone

Introduction

Everybody likes music, right? Odds are, if you do, you've heard of Spotify.

In this lab, we'll be building a simplified version of the Spotify landing page:

All of the necessary assets and images are included in the starter-codefolder. You might also find it useful to resort to the full length PDF version of the website as reference.

Exercise

Requirements

• Fork this repo
• Clone this repo

Submission

Upon completion, run the following commands:

$ git add .
$ git commit -m "done"
$ git push origin master

Create Pull Request so your TAs can check up your work.

Instructions

The starting files are included in the starter-code directory. Write your HTML and CSS in the index.html and css/main.css files respectively. Remember to follow the best practices.

Steps

The page is split into 4 sections.

Iteration 1: Navbar

• The navbar should be position: fixed.
• Align the logo to the left and the ul with the links to the right, either using float or flex.

Iteration 2: Large image background with text

• Check out this guide on centering things.

Iteration 3: What's on Spotify section

• It looks like the divs take up about a third of the container each. How can you represent this in code?

Iteration 4: The green section

• It looks like we have 2 main sections, a containing element with the text flowing from top to bottom, and the image of the Spotify player on the right.
• Position the Spotify logo absolutely according to the green div.

Happy coding! 💙