ironhack-labs · lmaccaro-maker · Mar 22, 2025 · Mar 22, 2025 · Mar 22, 2025 · Mar 22, 2025
diff --git a/.DS_Store b/.DS_Store
diff --git a/index.html b/index.html
@@ -5,14 +5,83 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>Spotify Clone</title>
-    <!-- don't forget to link your styles -->
+    <link rel="stylesheet" href="styles/style.css">
   </head>
+
   <body>
-    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.
+
+    <header>
+
+    <nav class="navbar">
+
+        <img src="images/spotify-logo.png" alt="logo" class="spotify-logo"/> </div>
+
+        <ul class="nav-links">
+
+          <li>Premium</li>
+          <li>Discover</li>
+          <li>Help</li>
+          <li>Download</li>
+        </ul>
+
+    </nav>
+
+    </header>
+
+    <section class="img-back">
+
+      <h1>Music for everyone. </h1>
+
+      <h2 class="h2">
+          <p>Spotify is now free on mobile, tablet and computer.</p>
+          <p>Listen to the right music, wherever you are</p> </h2>
+
+          </section>
+
+
+
+      <h3 class="h3"> <u> What's on Spotify? </u></h3>
+
+      <section class="box-container">
+
+        <div class="box"> 
+          <img src="images/music-icon.png" alt="music-icon" class="logo">
+            <h4>Millions of Songs</h4>
+          <p >There are millions of songs on Spotify </p>
+        </div>
+        <div class="box"> 
+          <img src="images/high-quality-icon.png"alt="high-quality-icon" class="logo">
+            <h4>HD Music</h4>
+            <p>Listen to music as if you were listening live</p>
+        </div>
+        <div class="box"> 
+          <img src="images/devices-icon.png"alt="devices-icon" class="logo">
+            <h4>Stream everywhere</h4>
+            <p>Stream music on your smartphone, tablet or computer</p>
+        </div>
+    </div>
+    </section>
+
+
+    <section class="container">
+
+<h5><u>It's as yeezy as Kanye West.</u></h5>
+<ul>
+  <li>Search</li>
+        </div>
+<p class="search-browse-discover">Know what you want to listen to?</p>
+<p class="search-browse-discover">Just search and hit play.</p>
+  <li>Browser</li>
+<p class="search-browse-discover">Check out the latest charts, brand new realeses and great playlists for right now.</p>
+  <li>Discover</li>
+<p class="search-browse-discover">Enjoy new music every Monday with your own personal playlist.</p>
+<p class="search-browse-discover">Or sit back and enjoy Radio.</p> </ul>
+
+<img src="images/spotify-icon-white.png" alt="spotify-logo-alone" class="spotify-logo-alone">
+
+<img src="images/spotify-app.jpg" alt="spotify-app" class="spotify-app">
+    </section>
+
+
   </body>
 </html>
diff --git a/styles/style.css b/styles/style.css
@@ -6,3 +6,208 @@ Green: #00B172
 White: #FFF
 
 */
+
+ul {
+  list-style-type: none;
+}
+
+.navbar {
+  display: flex;
+  padding: 50px;
+  top: 0;
+  flex-wrap: wrap;
+  flex-direction: row;
+  align-content: center;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.spotify-logo {
+  width: 400px;
+  height: 150px;
+ color: rgb(67, 151, 67);
+
+}
+
+.nav-links {
+  display: flex;
+  align-items: flex-end;
+  align-content: space-around;
+  flex-direction: row;
+  gap: 40px;
+  font-size: 40px;
+}
+
+.img-back {
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  background-image: url("../images/landing.jpg");
+  width:auto;
+  height: 1500px;
+  align-content:center
+
+}
+
+header {
+  justify-content: center;
+}
+
+h1 {
+  display: flex;
+  font-size:100px;
+  font-family: system-ui, sans-serif;
+  padding: 10px;
+  margin-bottom: 0px;
+  word-spacing: 15px;
+  color: white;
+  align-items: center;
+  align-content: center;
+  text-align: center;
+  justify-content: center;
+}
+
+
+h2 {
+  display: flex;
+  margin-top:5px;
+  font-size:700px;
+  font-family: system-ui, sans-serif;
+  color:white;
+  align-items: center;
+  text-align: center;
+  justify-content: flex-end;
+  flex-direction: column;
+
+}
+
+h3 {
+  align-items: center;
+  text-align: center;
+  font-size: 50px;      
+  margin: 50px;
+  font-family:  system-ui, sans-serif;
+}
+
+.h3 {
+  color: black;
+  text-decoration: underline;
+  text-decoration-color: green;
+  gap:15px;
+  margin:10px;
+  text-decoration-thickness: 10px;  
+  text-decoration-style:solid;      
+}
+
+.box-container {
+  display: flex; 
+  gap: 20px; 
+  align-content: space-around;
+  flex-wrap: nowrap;
+  flex-direction: row;
+  justify-content: center;
+  height: 500px;
+
+
+}
+
+
+.box {
+
+  padding: 120px; /* Espacio interno alrededor del contenido de cada caja */
+  width: 400px; 
+  height:1000px;
+  text-align: center; 
+  font-size: 30px;
+
+
+}
+
+h4 {
+  color: green;
+  font-family:  system-ui, sans-serif;
+font-size: 30px;
+
+}
+
+
+.logo {
+  width: 80px; /* Ajusta el tamaño del logo según sea necesario */
+  height: auto; /* Mantiene la proporción del logo */
+  margin-bottom: 15px; /* Espacio debajo del logo */
+}
+
+ul{
+
+text-align:left;
+
+}
+
+.container {
+  margin-top: none;
+  margin-left:30px;
+  font-size: 120px;
+  background-color: rgb(67, 151, 67);
+  text-align: left;
+  color:white;
+  padding:500px:
+ /* Tamaño máximo que no excederá */
+  height: 100px; /* Ajusta la altura de acuerdo a tu diseño */
+  margin: 0 auto; /* Centraliza horizontalmente si es menor que el contenedor padre */
+  padding: 10px;
+  margin:60px 60px 60px 60px;
+
+}
+
+h5 {
+  align-items: stretch;
+  gap: none;
+  justify-content: left;
+  align-content: space-around;
+  flex-direction: column;
+  font-size: 60px;
+  color: white;
+  font-family:  system-ui, sans-serif;
+margin-left:40px;
+padding:70px;
+
+}
+
+p {
+  gap:700px:
+  padding:15px;
+  color:white
+  font-family: system-ui, sans-serif;
+  font-size: 35px;
+  text-align:center;
+  margin-left:30px;
+}
+
+.search-browse-discover {
+
+  font-family: system-ui, sans-serif;
+  font-size: 60px;
+  text-align: left;
+  text-align: column;
+  padding:none;
+}
+
+.spotify-logo-alone {
+  display: flex;
+  width: 250px;
+  margin-left: 1700px;
+
+}
+
+.spotify-app {
+  display: flex;
+  position: relative;
+  margin-left: 1800px;
+  width: 1000px;
+  height: auto;
+  top: -1800px;
+  margin-right: 2000px;
+  margin-left: 2500px;
+
+}