diff --git a/README.md b/README.md index f4a9e69..08517f1 100644 --- a/README.md +++ b/README.md @@ -3,132 +3,10 @@ # LAB | HTML & CSS - Spotify Clone - - -## Introduction - - - -Everybody likes music, right? Odds are, if you do, you have heard of **Spotify**. - - - -In this lab, we will be building a simplified version of the Spotify landing page: - - - -![Spotify image](https://i.imgur.com/xVD0bm6.jpg) - - - -
- - - -All of the necessary assets and images are already provided. You might also find it useful to resort to the **[full-length PDF version of the website](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/spotify-prototype.pdf)** as reference. - - - -## Requirements - - - -- Fork this repo - -- Clone this repo - - - -## Submission - - - -Upon completion, run the following commands: - - - -```shell - -$ git add . - -$ git commit -m "done" - -$ git push origin master - -``` - - - -Create Pull Request so we can check up your work. - - - -## Instructions - - - -You are provided with some assets - in the `images` folder, you will find the necessary images, and the text is ready for you in the `index.html` file. Write your HTML and CSS code in the `index.html` and `styles/style.css` files, respectively. Remember to follow the best practices. - - - -The page is split into 4 sections, and we have generously cut it down into pieces! - - - -In general, website designs don't just come out the wild, so you will most likely be having mockups/sketches that you will have to integrate. It is a good practice to help you out before coding to cut the website into pieces in order to help you out _**structuring**_ your HTML. - - - -_**The last section isn't as detailed as the others ones, good luck**_ :smile: - - - -:muscle: :muscle: :muscle: +Created this static Spotify Webpage using HTML and CSS for
![](https://res.cloudinary.com/ihwebdeb/image/upload/v1571085836/Ironhack/spotify-prototype_1x_ahk8ep.jpg) - -Let's do this! - - - -### 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](https://css-tricks.com/centering-css-complete-guide/) on centering things. - - - -### Iteration 3: What is on Spotify section - - - -- It looks like the `div`s 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! :heart: diff --git a/index.html b/index.html index 0697f92..346f2ff 100644 --- a/index.html +++ b/index.html @@ -1,18 +1,67 @@ - - - - - Spotify Clone - - - - Premium Discover Help Download Music for everyone. Spotify is now free on mobile, tablet and computer. Listen to the - right music, wherever you are. What’s on Spotify? Millions of Songs There are millions of songs on Spotify HD Music - Listen to music as if you were listening live Stream Everywhere Stream music on your smartphone, tablet or computer - It’s as yeezy as Kanye West. Search Know what you want to listen to? Just search and hit play. Browse Check out the - latest charts, brand new releases and great playlists for right now. Discover Enjoy new music every Monday with your - own personal playlist. Or sit back and enjoy Radio. - + + + + Spotify - Music for everyone + + + +
+ +
+ +
+
+

Music for everyone.

+

Spotify is now free on mobile, tablet and computer.
Listen to the right music, wherever you are.

+
+ +
+

What's on Spotify?

+
+
+ Music Icon +

Millions of Songs

+

There are millions of songs on Spotify

+
+
+ HD Music Icon +

HD Music

+

Listen to music as if you were listening live

+
+
+ Devices Icon +

Stream Everywhere

+

Stream music on your smartphone, tablet or computer

+
+
+
+ +
+
+

It's as yeezy as Kanye West.

+

Search

+

Know what you want to listen to?
Just search and hit play.

+

Browse

+

Check out the latest charts,
brand new releases and great
playlists for right now.

+

Discover

+

Enjoy new music every Monday
with your own personal playlist.
Or sit back and enjoy Radio.

+
+
+ Spotify Icon + Spotify App +
+
+
+ + diff --git a/styles/style.css b/styles/style.css index 55efb32..17b13cf 100644 --- a/styles/style.css +++ b/styles/style.css @@ -1,8 +1,157 @@ -/* -Colors: -Text: 1A1A1A -Green: #00B172 -White: #FFF +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: Arial, sans-serif; + line-height: 1.6; +} + + +header { + background-color:white; + padding: 20px 50px; + position: fixed; + width: 100%; + top: 0; + z-index: 1000; +} + +nav { + display: flex; + justify-content: space-between; + align-items: center; +} + +.logo { + height: 40px; +} + +nav ul { + display: flex; + list-style-type: none; +} + +nav ul li { + margin-left: 20px; +} + +nav ul li a { + color: black; + text-decoration: none; + font-size: 2rem; +} + + +.hero { + background-size: cover; + background-position: center; + height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + color: #fff; + padding-top: 80px; +} + +.hero h1 { + font-size: 3rem; + margin-bottom: 20px; +} + +.features h2 { + font-size: 3rem; + margin-bottom: 20px; +} +.features { + padding: 50px 0; + text-align: center; +} + +.feature-container { + display: flex; + justify-content: space-around; + margin-top: 50px; +} +.feature-container h3 { + font-size: 4rem; + color: #00B172; + margin-bottom: 20px; +} +.feature-container p { + font-size: 2rem; + margin-bottom: 20px; +} +.hero h1 { + font-size: 10rem; + margin-bottom: 20px; +} +.hero p { + font-size: 3rem; + margin-bottom: 20px; +} + +.feature { + flex-basis: 30%; +} + +.feature img { + width: 100px; + margin-bottom: 20px; +} + + +.kanye { + background-color: #00B172; + color: #fff; + padding: 50px; + display: flex; + justify-content: space-between; + position: relative; +} + +.kanye-text { + flex-basis: 50%; + +} + +.kanye-text h2 { + font-size: 4rem; + margin-bottom: 30px; +} + +.kanye-text h3 { + font-size: 3rem; + margin-top: 20px; +} +.kanye-text p { + font-size: 2rem; + margin-top: 20px; +} + +.kanye-image { + flex-basis: 40%; + position: relative; + +} + +.kanye-image img { + max-width: 100%; + float: right; + +} + +.spotify-icon-white { + position: absolute; + bottom: 50%; + right: 130%; + transform: translate(50%, 50%); + width: 200px; + height: 200px; +} -*/