Everyone likes music, right? Odds are if you do, you've heard of Spotify. Today we're going to copy an older (and simpler) version of the Spotify home page:
All of the necessary assets and images are included in the starter code. If you'd like a full length PDF version of the webite as reference, check out this link.
- Fork this repo
- Clone this repo into your
~/code/labs - You must use 1 descendant selector, and 1 multi selector. You can use more.
- Animate the green Spotify logo in the upper left-hand corner to jump up and down when a user hovers over it.
Upon completion, run the following commands
$ git add .
$ git commit -m "done"
$ git push origin master
Navigate to your repo and create a Pull Request -from your master branch to the original repository master branch.
In the Pull request name, add your name and last names separated by a dash "-"
You will receive the images and resources in the starter code. Write your CSS and HTML in the provided files. Remember to follow good practices.
The page is split into 4 sections.
- The navbar should be
position: fixed. - Float the image left, and float a
ulwith the links right.
- Check out this guide on centering things.
- It looks like the
divs take up about a third of the container each. How can you represent this in code?
- It looks like we have 2 main pieces, a
divwith the text content, and the image of the Spotify player. Position these according to the surrounding greendiv. - Position the Spotify logo absolutely according to the Green
div.
The starter-code contains all the files, images, and text content needed to create the page. The text is in the index.html, and a css file is created in main.css with colors.