ironhack-labs · TheUnknown-31996 · Sep 5, 2025
diff --git a/lab-css-spotify-clone/README.md b/lab-css-spotify-clone/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/lab-css-spotify-clone/images/devices-icon.png b/lab-css-spotify-clone/images/devices-icon.png
diff --git a/lab-css-spotify-clone/images/high-quality-icon.png b/lab-css-spotify-clone/images/high-quality-icon.png
diff --git a/lab-css-spotify-clone/images/landing.jpg b/lab-css-spotify-clone/images/landing.jpg
diff --git a/lab-css-spotify-clone/images/music-icon.png b/lab-css-spotify-clone/images/music-icon.png
diff --git a/lab-css-spotify-clone/images/spotify-app.jpg b/lab-css-spotify-clone/images/spotify-app.jpg
diff --git a/lab-css-spotify-clone/images/spotify-icon-white.png b/lab-css-spotify-clone/images/spotify-icon-white.png
diff --git a/lab-css-spotify-clone/images/spotify-logo.png b/lab-css-spotify-clone/images/spotify-logo.png
diff --git a/lab-css-spotify-clone/index.html b/lab-css-spotify-clone/index.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+  <title>Spotify Clone - Let's go!</title>
+  <link rel="stylesheet" href="styles/style.css">
+</head>
+<header class="navbar">
+  <img src="images/spotify-logo.png" alt="Spotify Logo" class="logo">
+  <nav>
+    <ul>
+      <li><a href="#">Premium</a></li>
+      <li><a href="#">Discover</a></li>
+      <li><a href="#">Download</a></li>
+      <li><a href="#">Help</a></li>
+    </ul>
+  </nav>
+</header>
+
+<section class="hero">
+  <div class="hero-content">
+    <img src="images/spotify-icon-white.png" alt="Spotify Icon" class="hero-icon">
+    <h1>Music for everyone.</h1>
+    <p>Spotify is now free on mobile, tablet and computer.<br>
+      Listen to the right music, wherever you are.
+    </p>
+  </div>
+</section>
+
+<section class="features">
+  <h2>What’s on Spotify?</h2>
+  <div class="features-container">
+    <div class="feature">
+      <img src="images/music-icon.png" alt="Millions of Songs">
+      <h3>Millions of Songs</h3>
+      <p>There are millions of songs on Spotify</p>
+    </div>
+    <div class="feature">
+      <img src="images/high-quality-icon.png" alt="HD Music">
+      <h3>HD Music</h3>
+      <p>Listen to music as if you were listening live</p>
+    </div>
+
+    <div class="feature">
+      <img src="images/devices-icon.png" alt="Stream Everywhere">
+      <h3>Stream Everywhere</h3>
+      <p>Stream music on your smartphone, tablet or computer</p>
+    </div>
+  </div>
+</section>
+
+<section class="highlight">
+  <div class="highlight-left">
+    <h2>It’s as yeezy as Kanye West.</h2>
+
+    <div class="highlight-features">
+      <div class="h-feature">
+        <h3>Search</h3>
+        <p>Know what you want to listen to?</br>
+          Just search and hit play.</p>
+      </div>
+      <div class="h-feature">
+        <h3>Browse</h3>
+        <p>Check out the latest charts, brand new releases and great playlists for right now.</p>
+      </div>
+      <div class="h-feature">
+        <h3>Discover</h3>
+        <p>Enjoy new music every Monday with your own personal playlist.<br>
+          Or sit back and enjoy Radio.</p>
+      </div>
+    </div>
+  </div>
+
+  <div class="highlight-center">
+    <img src="images/spotify-icon-white.png" alt="Spotify Icon">
+  </div>
+
+  <div class="highlight-right">
+    <img src="images/spotify-app.jpg" alt="Spotify App Screenshot" class="app-img">
+  </div>
+</section>
+
+</body>
+
+</html>
diff --git a/lab-css-spotify-clone/styles/style.css b/lab-css-spotify-clone/styles/style.css
@@ -0,0 +1,188 @@
+/*
+Colors:
+
+Text: 1A1A1A
+Green: #00B172
+White: #FFF
+
+/* Reset & Basics */
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+body {
+  font-family: Arial, sans-serif;
+  color: #1a1a1a;
+  background-color: #fff;
+  line-height: 1.6;
+}
+
+.navbar {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  background: #fff;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px 40px;
+  border-bottom: 1px solid #ddd;
+  z-index: 1000;
+}
+
+.logo {
+  height: 40px;
+}
+.navbar ul {
+  display: flex;
+  list-style: none;
+  gap: 20px;
+}
+.navbar a {
+  text-decoration: none;
+  color: #1a1a1a;
+  font-weight: bold;
+}
+.navbar a:hover {
+  color: #00b172;
+}
+
+.hero {
+  background: url("../images/landing.jpg") center/cover no-repeat;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  padding-top: 80px;
+  color: #fff;
+}
+.hero-icon {
+  width: 120px;
+  margin-bottom: 20px;
+}
+.hero h1 {
+  font-size: 3rem;
+  margin-bottom: 20px;
+}
+.hero p {
+  font-size: 1.2rem;
+}
+
+.features {
+  padding: 80px 20px;
+  text-align: center;
+}
+.features h2 {
+  font-size: 2rem;
+  margin-bottom: 50px;
+  border-bottom: 3px solid #00b172;
+  display: inline-block;
+  padding-bottom: 10px;
+}
+.features-container {
+  display: flex;
+  justify-content: center;
+  gap: 40px;
+}
+.feature {
+  max-width: 250px;
+}
+.feature img {
+  width: 80px;
+  margin-bottom: 20px;
+}
+.feature h3 {
+  font-size: 1.4rem;
+  color: #00b172;
+  margin-bottom: 10px;
+}
+.feature p {
+  font-size: 1rem;
+}
+
+.highlight {
+  background: #00b172;
+  color: #fff;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 60px;
+  padding: 80px 60px;
+}
+
+.highlight-left {
+  flex: 1;
+  text-align: left;
+}
+
+.highlight-left h2 {
+  font-size: 32px;
+  font-weight: bold;
+  margin-bottom: 50px;
+  border-bottom: 3px solid #fff;
+  display: inline-block;
+  padding-bottom: 8px;
+}
+
+.highlight-features {
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+}
+
+.h-feature h3 {
+  font-size: 22px;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+.h-feature p {
+  font-size: 16px;
+  line-height: 1.4;
+}
+
+.highlight-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.highlight-center img {
+  width: 80px;
+}
+
+.highlight-right {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+}
+
+.app-img {
+  max-width: 280px;
+  border-radius: 8px;
+}
+
+@media (max-width: 1000px) {
+  .highlight {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    gap: 40px;
+  }
+
+  .highlight-left {
+    text-align: center;
+  }
+
+  .highlight-features {
+    align-items: center;
+    text-align: center;
+  }
+
+  .highlight-center {
+    margin: 20px 0;
+  }
+}