daedraMex · jaimes1br · Oct 20, 2021 · Oct 21, 2021 · Oct 23, 2021 · Oct 24, 2021
diff --git a/index.html b/index.html
@@ -1,18 +1,123 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="es">
   <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>
-    <!-- don't forget to link your styles -->
-  </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.
-  </body>
+    <!-- Don't forget to link your styles -->
+    <link rel="stylesheet" href="./styles/style.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;700;900&display=swap" rel="stylesheet"> <body>
+
+
+<body>
+
+    <section id = 'nav'>  
+
+
+      <div class="nav__logo">
+        <img src="./images/spotify-logo.png" alt="...">
+      </div><!--logo Spotify-->
+
+      <nav class="nav__list">
+        <ul> 
+          <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><!--Nav-->
+    </section><!--Nav bar-->
+
+    <section id = 'coverPage'>
+      <div class="coverPage__txt">
+          <h1>Music for everyone. </h1>
+          <p>Spotify is now free on mobile, tablet and computer. 
+            Listen to the right music, wherever you are. </p>
+      </div>
+    </section><!--Portada Music-->
+
+    <section  id = 'whatsSpot'>
+      <div class="whatsSpot__text">
+        <h1>What’s on Spotify? </h1>
+      </div>
+      <div class="whatsSpot__div">
+          <div class="whatsSpot__div-element">
+            <div class="whatsSpot__div-element-img">
+                <img src="./images/music-icon.png" class="whatsSpot__div-element-img--img" alt="...">
+            </div>
+            <div class="whatsSpot__div-element-txt">
+                <h2>Millions of Songs </h2>
+                <p>There are millions of songs on Spotify </p>
+            </div>
+          </div>
+
+          <div class="whatsSpot__div-element">
+            <div class="whatsSpot__div-element-img">
+                <img src="./images/high-quality-icon.png" class="whatsSpot__div-element-img--img" alt="...">
+            </div>
+            <div class="whatsSpot__div-element-txt">
+                <h2>HD Music </h2>
+                <p>Listen to music as if you were listening live</p>
+            </div>
+          </div>
+
+          <div class="whatsSpot__div-element">
+            <div class="whatsSpot__div-element-img">
+                <img src="./images/devices-icon.png" class="whatsSpot__div-element-img--img" alt="...">
+            </div>
+            <div class="whatsSpot__div-element-txt">
+                <h2>Stream Everywhere</h2>
+                <p>Stream music on your smartphone, tablet or computer</p>
+            </div>
+          </div>
+
+
+      </div> 
+
+    </section><!-- What's on Spotify-->
+
+
+    <section  id="seccionGreen">
+      <div class="seccionGreen__div">
+          <div class="seccionGreen__div-txt">
+            <div class="seccionGreen__div-txt-tittle">
+              <h2>It’s as yeezy as Kanye West. </h2>
+            </div> 
+            <div class="seccionGreen__div-txt-elem">
+              <h2>Search</h2>
+              <p>Know what you want to listen to? <br> Just search and hit play.</p>
+            </div>
+            <div class="seccionGreen__div-txt-elem">
+              <h2>Browse </h2>
+              <p>Check out the latest charts, <br> brand new releases and great <br> playlists for right now.</p>
+            </div>
+            <div class="seccionGreen__div-txt-elem">
+              <h2>Discover</h2>
+              <p>Enjoy new music every Monday <br> with your own personal playlist. <br> Or sit back and enjoy Radio.</p>
+            </div>
+          </div>
+
+          <div class="seccionGreen__div-back">
+            <img class="seccionGreen__div-back--img" src="./images/spotify-icon-white.png" alt="...">
+          </div>
+
+          <div class="seccionGreen__div-img">
+            <img class="seccionGreen__div-img--img" src="images/spotify-app.jpg" alt="...">
+          </div>
+      </div>
+    </section><!--it's as yezzy as Kanye-->
+
+
+</body>
 </html>
diff --git a/styles/coverPage.css b/styles/coverPage.css
@@ -0,0 +1,30 @@
+.coverPage__txt h1{
+    position: absolute;
+    top: 69%;
+    left: 51%;
+    transform: translate(-50%, -50%);
+
+    width: 70vw;
+    margin: 0 auto;
+    color: var(--colorWhite);
+    font: var(--textTitle);
+    text-align: center;
+}
+
+.coverPage__txt p{
+    position: absolute;
+    top: 87%;
+    left: 51%;
+    height: 1em;
+    transform: translate(-50%, -50%);
+
+    width: 55vw;
+    margin: 0 auto;
+    color: var(--colorWhite);
+    font: var(--textNormal);
+    text-align: center;
+}
+
+
+
+
diff --git a/styles/navBar.css b/styles/navBar.css
@@ -0,0 +1,54 @@
+
+#nav{
+    background-image: url(./../images/landing.jpg) ;
+    height: 100em;
+    width: 100vw;
+    background-position: top;
+    background-size: cover;
+    background-repeat: no-repeat;
+}
+
+.nav__logo{
+    position: absolute;
+    top: 0;
+    left: 0;
+    justify-content: flex-start;
+    width: 100%;
+    height: 19%;
+    background-color: var(--colorWhite);
+    position: fixed;
+}
+
+.nav__logo img{
+    padding-left: 3em;
+    margin-top: 3em;
+    width: 22em;
+    height: 6em;
+}
+
+.nav__list{
+    position: absolute;
+    top: 0;
+    left: 88em; 
+    position: fixed;
+}
+
+.nav__list ul{
+    list-style-type: none;
+    margin-top: 5mm;
+    padding: 0;
+    overflow: hidden;
+} 
+
+.nav__list li{
+    float: left;
+}
+
+.nav__list ul li a{
+    display: block;
+    text-align: center;
+    padding: 1.4em 0.5em;
+    color: var(--colorText);
+    font: var(--textNav);
+    text-decoration: none; 
+}
diff --git a/styles/screanGreen.css b/styles/screanGreen.css
@@ -0,0 +1,77 @@
+#seccionGreen{
+    margin: 0em 3em;
+    background-color: var(--colorGreen);
+    padding: 10em 8em;
+}
+
+.seccionGreen__div{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+
+.seccionGreen__div-txt{
+    justify-content: flex-start;
+    display: inline-block;
+    width: 42em;
+}
+
+
+.seccionGreen__div-txt-tittle h2{
+    font: var(--textNormal);
+    color: var(--colorWhite);
+    font-weight: 700;
+    display: block;
+    border-bottom: 2px solid white;
+    text-align: center;
+}
+
+.seccionGreen__div-txt-elem{
+    color: var(--colorWhite);
+    text-align: left;
+    margin: 2em 0;
+    width: 42em;
+    display: inline-block;
+}
+
+.seccionGreen__div-txt-elem h2{
+    font: var(--textNormal);
+    font-weight: 500;
+    margin-top: 1em;
+    margin-bottom: 1em;
+}
+
+.seccionGreen__div-txt-elem p{
+    font: var(--textDescrip);
+    color: var(--colorWhite);
+    font-size: 2em;
+    margin-bottom: 0;
+}
+
+.seccionGreen__div-back{    
+    display: block;
+    justify-content: center;
+}
+
+.seccionGreen__div-back--img{
+    width: 12em;
+    height: 12em;
+    margin: auto;
+    display: block;
+    position: relative;
+    top: 40%;
+    left: 1em;
+}
+
+.seccionGreen__div-img{
+   display: block;
+   justify-content: flex-end;
+}
+
+.seccionGreen__div-img--img{
+    width: 35em;
+    height: 60em;
+    margin-left: 18em;
+    margin-top: 5em;
+}   
diff --git a/styles/style.css b/styles/style.css
@@ -3,4 +3,31 @@ Colors:
 Text: 1A1A1A
 Green: #00B172
 White: #FFF
-*/
+*/
+
+
+@import url(./navBar.css);
+@import url(./coverPage.css);
+@import url(./whatsSpotify.css);
+@import url(./screanGreen.css);
+
+:root{
+    --fontBase: 'Poppins', sans-serif;
+    --colorText: #1A1A1A;
+    --colorGreen: #00B172;
+    --colorWhite: #FFF;
+    font-size: 10px;
+    --textNav: 400 2.3em/1em var(--fontBase);
+    --textNormal: 300 2.8em/1.4em var(--fontBase);
+    --textTitle: 500 8.2em/1em var(--fontBase);
+    --textDescrip: 200 2.2em/1.2em var(--fontBase);
+
+}
+
+
+*{
+    margin: 0;
+    padding: 0;
+}
+
+
diff --git a/styles/whatsSpotify.css b/styles/whatsSpotify.css
@@ -0,0 +1,54 @@
+#whatsSpot{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin: 5em;
+}
+
+.whatsSpot__text{
+    padding-top: 1em;
+    padding-bottom: 2em;
+    font: var(--textNormal);
+    color: var(--colorText);
+    text-align: center;
+
+}
+
+.whatsSpot__div{
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    gap: 8em;
+}
+
+.whatsSpot__div-element{
+    width: 30em;
+    height: 30em;
+    justify-content: center;
+}
+
+.whatsSpot__div-element-img--img{
+    width: 10em;
+    height: 10em;
+    margin: auto;
+    display: block;    
+}
+
+
+.whatsSpot__div-element-txt h2{
+    font: var(--textNormal);
+    color: var(--colorGreen);
+    text-align: center;
+    font-weight: 700;
+    padding: 1em 0;
+
+}
+
+.whatsSpot__div-element-txt p{
+    font: var(--textDescrip);
+    color: var(--colorText);
+    text-align: center;
+
+}
+
+