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-code
folder. You might also find it useful to resort to the full length PDF version of the website as reference.
- Fork this repo
- Clone this repo
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.
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 best practices.
The page is split into 4 sections.
- The navbar should be
position: fixed
. float
the logo to the left, and float aul
with the links to the right.
- Check out this guide on centering things.
- It looks like the
div
s take up about a third of the container each. How can you represent this in code?
- 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! ❤️