diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 000000000..e391d85dd
Binary files /dev/null and b/.DS_Store differ
diff --git a/index.html b/index.html
index 0697f92fe..db0d37013 100644
--- a/index.html
+++ b/index.html
@@ -1,18 +1,112 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
+    <link rel="stylesheet" href="styles/style.css">
     <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>
-    <!-- don't forget to link your styles -->
+    <link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
   </head>
   <body>
-    Premium Discover Help Download Music for everyone. Spotify is now free on mobile, tablet and computer. Listen to the
+    <!-- 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.
+    own personal playlist. Or sit back and enjoy Radio. -->
+
+    <nav class="navegador">
+      <div class="logo">
+        <img class="logo-spoty" src="images/spotify-logo.png" alt="spotify-logo">
+      </div>
+        <ul class="enlaces">
+          <li>
+            <a href="#">
+              Premium
+            </a>
+          </li>
+          <li>
+            <a href="#">
+              Discover
+            </a>
+          </li>
+          <li>
+            <a href="#">
+              Help
+            </a>
+          </li>
+          <li>
+            <a href="#">
+              Download
+            </a>
+          </li>
+        </ul>
+    </nav>
+    
+    <header class="background">
+      
+      <h1 class="titulo">MUSIC FOR EVERYONE</h1>
+      <h3 class="titulo"> Spotify is now free on mobile, table and computer.
+        <br> Listen to the right music wherever you are.
+      </h3>
+    </header>
+
+    <!--Sección 2-->
+
+    <section>
+      <h2 class="whatOn">What's on Spotify?</h2>
+      <hr color="#00B172">
+      <div class="qualities">
+
+        <div class="iconos-box">
+          <img class="iconos" src="images/music-icon.png" alt="Icon Music">
+          <h3>Millions of songs</h3>
+          <p>There are millions of songs on Spotify</p>
+        </div>
+
+        <div class="iconos-box">
+          <img class="iconos" src="images/high-quality-icon.png" alt="Icon  high-quality-icon">
+          <h3>HD Music</h3>
+          <p>Listen to music as if you were listening live</p>
+        </div>
+
+        <div class="iconos-box">
+          <img class="iconos" src="images/devices-icon.png" alt="devices-icon">
+          <h3>Stream Everywhere</h3>
+          <p>Stream music on your smartphone, tablet or computer</p>
+        </div>
+      </div>
+    </section>
+
+    <!--Sección 3-->
+
+    <section class="footer">
+      <div id="copyBlanco">
+        <h2 id="hrfinal">It's as yeezy as Kanye West</h2>
+        <h3>Search</h3>
+        <p>Know what you want to listen to? <br>
+          Just search and hit play. </p>
+        <h3>Browse</h3>
+        <p>Check out the latest charts, <br>
+          brand new releases and great <br>
+          playlist for right now. </p>
+        <h3>Discover</h3>
+        <p>Enjoy new muis every Monday <br>
+          with your own personal playlist.<br>
+          Or sit back and enjoy Radio. </p>
+
+
+      </div>
+
+      <div>
+        <img id="logoBlanco" src="images/spotify-icon-white.png" alt="spotify-icon-white">
+      </div>
+
+      <div>
+        <img id="app" src="images/spotify-app.jpg" alt="App">
+      </div>
+
+    </section>
   </body>
 </html>
diff --git a/styles/style.css b/styles/style.css
index 55efb32c6..495c7ce70 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -6,3 +6,146 @@ Green: #00B172
 White: #FFF
 
 */
+body{
+    font-family: 'Raleway', sans-serif;
+}
+
+.enlaces{
+    color: #1A1A1A;
+    display: flex;
+    flex-direction: row;
+    text-decoration: none;
+    list-style: none;
+    justify-content: flex-end;
+}
+
+.navegador{
+    position: static;
+    top: 0;
+    height: 45;
+    padding: 10px;
+    display: flex;
+    flex-direction: row;
+    background-color: white;
+    top: 0;
+}
+.enlaces a {
+    display: flex;
+    color: #1A1A1A;
+    text-decoration: none;
+    align-items: center;
+    letter-spacing: 2px;
+}
+
+.background{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    position:relative;
+    background-image: url(../images/landing.jpg);
+    background-position: 0 0;
+    background-repeat: no-repeat;
+    background-size:cover;
+    height: 800px;
+    padding-top:50px;
+  }
+.logo-spoty{
+    width: 10%;
+    padding-right: 2%;
+}
+
+.titulo{
+    text-align: center;
+    color: white;
+}
+
+.titulo h4{
+    font-weight: lighter;
+}
+
+.whatOn{
+    text-align: center;
+}
+hr{
+    width: 15%;
+    height: 3px;
+}
+
+li{
+    margin: 0 10px;
+}
+
+.iconos{
+    width: 125px;
+}
+
+.qualities{
+    display: flex;
+    justify-content: space-evenly;
+    flex-wrap: wrap;
+}
+
+.qualititesOrder{
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+}
+
+.iconos-box{
+    font-size: 20px;
+    text-align: center;
+    /*RETO DE CLASES AGREGADAS*/
+    box-sizing: border-box;
+    padding: 10px;
+    width: 25%;
+}
+
+.iconos-box h3{
+    font-weight: bolder;
+    color: #00B172;
+}
+
+.iconos-box p{
+    font-weight:normal ;
+    color: #1A1A1A;
+}
+
+.footer{
+    flex-wrap: wrap;
+    padding: 2%;
+    display: flex;
+    flex-direction: row;
+    background-color: #00B172;
+    justify-content:space-around;
+    align-items: center;
+}
+
+#logoBlanco{
+    width: 30%;
+}
+
+.footer div{
+    width: 20%;
+    margin: 0 10px;
+}
+
+#app{
+    width: 60%;
+}
+
+#copyBlanco{
+    color: white;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+}
+
+.lineaFinal{
+    border-bottom: white 3px;
+}
+
+#hrfinal{
+border-bottom: 3px solid white;
+padding-bottom: 5px;
+}
\ No newline at end of file
