ironhack-labs · Martinaziza · Oct 20, 2025 · Oct 20, 2025
diff --git a/lab-css-spotify-clone-master - 1/lab-css-spotify-clone-master/README.md b/lab-css-spotify-clone-master - 1/lab-css-spotify-clone-master/README.md
@@ -0,0 +1,92 @@
+![logo_ironhack_blue 7](https://user-images.githubusercontent.com/23629340/40541063-a07a0a8a-601a-11e8-91b5-2f13e4e6b441.png)
+
+# LAB | HTML & CSS - Spotify Clone
+
+<details>
+  <summary>
+   <h2>Learning Goals</h2>
+  </summary>
+
+  This exercise allows you to practice and apply the concepts and techniques taught in class. 
+
+  Upon completion of this exercise, you will be able to:
+
+  - Create a webpage based on provided design and assets.
+  - Create and link an external CSS stylesheet with an HTML document.
+  - Display images in a webpage using HTML image tags and CSS `background` property.
+  - Use the CSS `position` property to position elements on a webpage.
+  - Use Flexbox to layout and position elements on a webpage.
+  - Center content on a webpage, including images and text.
+  - Submit completed work using Git and GitHub by creating a Pull Request.
+
+  <br>
+  <hr> 
+
+</details>
+
+## Introduction
+
+Everybody likes music, right? So the odds are that 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)
+
+<br>
+
+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.
+
+## 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 your TAs 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. Again, 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 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.
+
+_**The last section isn't as detailed as the others ones, good luck**_ :smile:
+
+:muscle: :muscle: :muscle:
+<br>
+![](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`.
+
+<br>
+
+**Happy coding!** :heart:
diff --git a/...s-spotify-clone-master - 1/lab-css-spotify-clone-master/images/devices-icon.png b/...s-spotify-clone-master - 1/lab-css-spotify-clone-master/images/devices-icon.png
diff --git a/...tify-clone-master - 1/lab-css-spotify-clone-master/images/high-quality-icon.png b/...tify-clone-master - 1/lab-css-spotify-clone-master/images/high-quality-icon.png
diff --git a/lab-css-spotify-clone-master - 1/lab-css-spotify-clone-master/images/landing.jpg b/lab-css-spotify-clone-master - 1/lab-css-spotify-clone-master/images/landing.jpg
diff --git a/...css-spotify-clone-master - 1/lab-css-spotify-clone-master/images/music-icon.png b/...css-spotify-clone-master - 1/lab-css-spotify-clone-master/images/music-icon.png
diff --git a/...ss-spotify-clone-master - 1/lab-css-spotify-clone-master/images/spotify-app.jpg b/...ss-spotify-clone-master - 1/lab-css-spotify-clone-master/images/spotify-app.jpg
diff --git a/...ify-clone-master - 1/lab-css-spotify-clone-master/images/spotify-icon-white.png b/...ify-clone-master - 1/lab-css-spotify-clone-master/images/spotify-icon-white.png
diff --git a/...s-spotify-clone-master - 1/lab-css-spotify-clone-master/images/spotify-logo.png b/...s-spotify-clone-master - 1/lab-css-spotify-clone-master/images/spotify-logo.png
diff --git a/lab-css-spotify-clone-master - 1/lab-css-spotify-clone-master/index.html b/lab-css-spotify-clone-master - 1/lab-css-spotify-clone-master/index.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Spotify Clone</title>
+    <link rel="stylesheet" href="/lab-css-spotify-clone-master/styles/style.css">
+  </head>
+  <body>
+
+ <!----------------------------------------------NAVBAR---------------------------------------------------->
+
+    <header>
+        <nav class="navbar">
+          <div class="navdiv">
+            <div class="Spotify-Logo"> <img src="./images/spotify-logo.png" alt="Spotify-Logo"></div>
+        <ul>
+        <li>Premium</li>
+        <li>Discover</li>
+        <li>Help</li>
+        <li>Download</li>
+        </ul>
+            </div>
+          </div>
+      </nav>
+    </header>
+<!---------------------------------------------Main Display------------------------------------------>
+      <div class="main-image">
+      <h1 class="main-text"> Music for everyone.</h1>
+
+      <p class="main-paragraph">Spotify is now free on mobile, tablet and computer. Listen to the
+    right music, wherever you are.</p>
+      </div>
+
+
+
+<!--------------------------- Whats on Spotify ------------------------------->
+    <section >
+      <div class="white-box">
+    <h2 class="spotify-title">
+    What's on Spotify?
+   </h2>
+   <div class="articles">
+    <article>
+      <img src="images/music-icon.png" alt="music icon" class="music-icon">
+      <h3> Millions of Songs </h3>
+      <p>
+There are millions of songs on Spotify
+</p>
+    </article>
+
+    <article>
+      <img src="images/high-quality-icon.png" alt="high quality icon" class="music-icon">
+    <h3>
+HD Music
+</h3>
+<p>
+  Listen to music as if you were listening live
+</p>
+    </article>
+
+    <article>
+      <img src="images/devices-icon.png" alt="devices icon" class="music-icon"> 
+<h3>
+Stream Everywhere
+</h3>
+<p>
+  Stream music on your smartphone, tablet or computer
+</p>
+    </article>
+   </div>
+</div>
+
+    </section>
+
+    <section>
+      <div class="green-bkg">
+        <div class="yeezy">
+        <img src="images/spotify-icon-white.png" alt="spotify-icon-white" class="spotify-icon">
+        <h2 class="west"> It's as yeezy as Kanye West.</h2>
+        <br>
+        <div class="kanye">
+      <h3>Search </h3>
+        <p> Know what you want to listen to? Just search and hit play.</p>
+        </div>
+        <div class="kanye">
+            <h3>
+        Browse
+        </h3>
+        <p>
+Check out the
+    latest charts, brand new releases and great playlists for right now.
+        </p>
+        </div>
+      <div class="kanye">
+        <h3>
+           Discover 
+        </h3>
+        <p>
+          Enjoy new music every Monday with your
+    own personal playlist. Or sit back and enjoy Radio.
+        </p>
+      </div>
+        </div>
+        <div class="album-cover-div">
+          <img src="images/spotify-app.jpg" alt="spotify-app" class="album-cover"> 
+        </div>
+      </div>
+    </section>
+  </body>
+</html>
diff --git a/lab-css-spotify-clone-master - 1/lab-css-spotify-clone-master/styles/style.css b/lab-css-spotify-clone-master - 1/lab-css-spotify-clone-master/styles/style.css
@@ -0,0 +1,125 @@
+/*
+Colors:
+
+Text: 1A1A1A
+Green: #00B172
+White: #FFF
+
+*/
+/* ----------- NAVBAR---------*/
+
+* {
+    color: 1A1A1A;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+.navdiv{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+img{
+    height: 45px;
+    padding: 10px;
+}
+
+ul{
+    list-style-type: none;
+    display: flex;
+}
+li{
+    padding: 10px;
+}
+
+/*MAIN MAIN*/
+.main-image{
+    background-image: url(../images/landing.jpg);
+    background-size: cover;
+    background-position: center;
+    height: 600px;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    position: relative;
+
+}
+
+.main-text{
+    text-align: center;
+    color: white;
+    font-size: 60px;
+    margin: 0;
+    padding: 0;
+
+}
+
+.main-paragraph{
+    font-size: 25px;
+    color: white;
+    text-align: center;
+    font-weight: lighter;
+}
+
+/* Whats on Spotify */
+
+h2 {
+    text-decoration: underline #00B172 3px;
+    text-underline-offset: 7px;;
+}
+
+
+.articles {
+    display: flex;
+    justify-content: space-around;
+
+}
+article {
+    width: 20vw;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.spotify-title {
+    text-align: center;
+}
+
+.green-bkg {
+    background-color: #00B172;
+    margin: 0 15px;
+    height: 500px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+
+.yeezy {
+    margin-left: -1%;
+}
+
+.spotify-icon {
+    position: absolute;
+    left: 50%;
+    top: 132%;
+    height: 60px;
+
+}
+.kanye {
+    width: 35vw;
+    color: white;
+
+}
+
+.west {
+    color: white;
+    text-decoration: underline white 3px;
+    text-underline-offset: 7px;
+}
+
+.album-cover-div, .album-cover {
+    width: 250px;
+    height: 430px;
+}