Skip to content

Latest commit

 

History

History
59 lines (34 loc) · 1.87 KB

README.md

File metadata and controls

59 lines (34 loc) · 1.87 KB
Raw

logo_ironhack_blue 7

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:

Spotify image

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

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! 💙