├── .github └── stale.yml ├── README.md ├── images ├── devices-icon.png ├── high-quality-icon.png ├── landing.jpg ├── music-icon.png ├── spotify-app.jpg ├── spotify-icon-white.png └── spotify-logo.png ├── index.html └── styles └── style.css /.github/stale.yml: -------------------------------------------------------------------------------- 1 | # Configuration for probot-stale - https://github.com/probot/stale 2 | 3 | # Number of days of inactivity before an Issue or Pull Request becomes stale 4 | daysUntilStale: 21 5 | 6 | # Issues or Pull Requests with these labels will never be considered stale. Set to `[]` to disable 7 | exemptLabels: 8 | - bug 9 | - enhancement 10 | 11 | # Only issues or pull requests with all of these labels are check if stale. Defaults to `[]` (disabled) 12 | # onlyLabels: 13 | # - TestLabel 14 | 15 | # Number of days of inactivity before an Issue or Pull Request with the stale label is closed. 16 | # Set to false to disable. If disabled, issues still need to be closed manually, but will remain marked as stale. 17 | daysUntilClose: 7 18 | 19 | # Label to use when marking as stale 20 | staleLabel: stale 21 | 22 | # Comment to post when marking as stale. Set to `false` to disable 23 | markComment: > 24 | This pull request has been automatically marked as stale because it didn't have any recent activity. It will be closed if no further activity occurs. Thank you 25 | for your contributions. 26 | closeComment: > 27 | This pull request is closed. Thank you. 28 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![logo_ironhack_blue 7](https://user-images.githubusercontent.com/23629340/40541063-a07a0a8a-601a-11e8-91b5-2f13e4e6b441.png) 2 | 3 | # LAB | HTML & CSS - Spotify Clone 4 | 5 |
6 | 7 |

Learning Goals

8 | 9 | 10 | This exercise allows you to practice and apply the concepts and techniques taught in class. 11 | 12 | Upon completion of this exercise, you will be able to: 13 | 14 | - Create a webpage based on provided design and assets. 15 | - Create and link an external CSS stylesheet with an HTML document. 16 | - Display images in a webpage using HTML image tags and CSS `background` property. 17 | - Use the CSS `position` property to position elements on a webpage. 18 | - Use Flexbox to layout and position elements on a webpage. 19 | - Center content on a webpage, including images and text. 20 | - Submit completed work using Git and GitHub by creating a Pull Request. 21 | 22 |
23 |
24 | 25 |
26 | 27 | ## Introduction 28 | 29 | Everybody likes music, right? So the odds are that you have heard of **Spotify**. 30 | 31 | In this lab, we will be building a simplified version of the Spotify landing page: 32 | 33 | ![Spotify image](https://i.imgur.com/xVD0bm6.jpg) 34 | 35 |
36 | 37 | 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 a reference. 38 | 39 | ## Requirements 40 | 41 | - Fork this repo 42 | - Clone this repo 43 | 44 | ## Submission 45 | 46 | Upon completion, run the following commands: 47 | 48 | ```shell 49 | git add . 50 | git commit -m "done" 51 | git push origin master 52 | ``` 53 | 54 | Create Pull Request so your TAs can check up your work. 55 | 56 | ## Instructions 57 | 58 | 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. Again, remember to follow the best practices. 59 | 60 | The page is split into 4 sections, and we have generously cut it down into pieces! 61 | 62 | In general, website designs don't just come out of the wild, so you will likely have mockups/sketches that you will have to integrate. Therefore, it is a good practice to help you cut the website into pieces before coding to help you _**structuring**_ your HTML. 63 | 64 | _**The last section isn't as detailed as the others ones, good luck**_ :smile: 65 | 66 | :muscle: :muscle: :muscle: 67 |
68 | ![](https://res.cloudinary.com/ihwebdeb/image/upload/v1571085836/Ironhack/spotify-prototype_1x_ahk8ep.jpg) 69 | 70 | Let's do this! 71 | 72 | ### Iteration 1: Navbar 73 | 74 | - The navbar should be `position: fixed`. 75 | - Align the logo to the left and the `ul` with the links to the right, either using `float` or `flex`. 76 | 77 | ### Iteration 2: Large image background with text 78 | 79 | - Check out [this guide](https://css-tricks.com/centering-css-complete-guide/) on centering things. 80 | 81 | ### Iteration 3: What is on Spotify section 82 | 83 | - It looks like the `div`s take up about a third of the container each. How can you represent this in code? 84 | 85 | ### Iteration 4: The green section 86 | 87 | - 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. 88 | - Position the Spotify logo absolutely according to the _green_ `div`. 89 | 90 |
91 | 92 | **Happy coding!** :heart: -------------------------------------------------------------------------------- /images/devices-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ironhack-labs/lab-css-spotify-clone/7643881be90a457377305f7ed1b356bcec0acc8b/images/devices-icon.png -------------------------------------------------------------------------------- /images/high-quality-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ironhack-labs/lab-css-spotify-clone/7643881be90a457377305f7ed1b356bcec0acc8b/images/high-quality-icon.png -------------------------------------------------------------------------------- /images/landing.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ironhack-labs/lab-css-spotify-clone/7643881be90a457377305f7ed1b356bcec0acc8b/images/landing.jpg -------------------------------------------------------------------------------- /images/music-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ironhack-labs/lab-css-spotify-clone/7643881be90a457377305f7ed1b356bcec0acc8b/images/music-icon.png -------------------------------------------------------------------------------- /images/spotify-app.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ironhack-labs/lab-css-spotify-clone/7643881be90a457377305f7ed1b356bcec0acc8b/images/spotify-app.jpg -------------------------------------------------------------------------------- /images/spotify-icon-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ironhack-labs/lab-css-spotify-clone/7643881be90a457377305f7ed1b356bcec0acc8b/images/spotify-icon-white.png -------------------------------------------------------------------------------- /images/spotify-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ironhack-labs/lab-css-spotify-clone/7643881be90a457377305f7ed1b356bcec0acc8b/images/spotify-logo.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Spotify Clone 8 | 9 | 10 | 11 | Premium Discover Help Download Music for everyone. Spotify is now free on mobile, tablet and computer. Listen to the 12 | right music, wherever you are. What’s on Spotify? Millions of Songs There are millions of songs on Spotify HD Music 13 | Listen to music as if you were listening live Stream Everywhere Stream music on your smartphone, tablet or computer 14 | It’s as yeezy as Kanye West. Search Know what you want to listen to? Just search and hit play. Browse Check out the 15 | latest charts, brand new releases and great playlists for right now. Discover Enjoy new music every Monday with your 16 | own personal playlist. Or sit back and enjoy Radio. 17 | 18 | 19 | -------------------------------------------------------------------------------- /styles/style.css: -------------------------------------------------------------------------------- 1 | /* 2 | Colors: 3 | 4 | Text: 1A1A1A 5 | Green: #00B172 6 | White: #FFF 7 | 8 | */ 9 | --------------------------------------------------------------------------------