From 6b7904b8deb3542e3000bddd38957eb7988132c1 Mon Sep 17 00:00:00 2001
From: Alvaro Ruiz Monfillo <alvaroruizmonfillo@gmail.com>
Date: Sat, 26 Apr 2025 19:10:59 +0200
Subject: [PATCH 1/3] Primeras ediciones de los estilos

---
 starter_code/index.html            |  31 +++---
 starter_code/stylesheets/style.css | 151 +++++++++++++++++++++++++++++
 2 files changed, 164 insertions(+), 18 deletions(-)

diff --git a/starter_code/index.html b/starter_code/index.html
index 2f593610f..53f7a2e52 100644
--- a/starter_code/index.html
+++ b/starter_code/index.html
@@ -20,9 +20,9 @@
   <!-- NAVBAR -->
   <nav>
     <div>
-      <img src="./images/slack-logo.png" alt="Slack logo" />
+      <img src="./images/slack-logo.png" alt="Slack logo" class="imgSlack"/>
 
-      <ul>
+      <ul hidden>
         <li>
           <a href="#">Product</a>
         </li>
@@ -38,14 +38,10 @@
       </ul>
     </div>
 
-    <div>
-      <button>
+    <div class="containerIcon">
         <img src="./images/icon-search.png" alt="Search icon">
-      </button>
 
-      <button>
         <img src="./images/icon-menu.png" alt="Menu icon">
-      </button>
 
       <ul hidden>
         <li>
@@ -64,29 +60,28 @@
     <div>
       <h1>Great teamwork starts with a digital HQ</h1>
 
-      <p>Slack is free to try for as long as you'd like.</p>
+      <p><span class="yellowText">Slack is free to try </span>for as long as you'd like.</p>
 
-      <div>
-        <button>Sign up with email</button>
+      <div class="buttons">
+        <button class="emailSingup">Sign up with email</button>
 
-        <button>
-          <img src="./images/logo-google.png" alt="Google logo" />
+        <button class="googleSignup">
+          <img src="./images/logo-google.png" alt="Google logo"  class="googleIcon"/>
           <span>Sign up with Google</span>
         </button>
       </div>
-
     </div>
 
-    <div>
-      <img src="./images/hero-product-ui.png" alt="Slack app screenshot" />
+    <div >
+      <img src="./images/hero-product-ui.png" alt="Slack app screenshot" class="heroImage" />
     </div>
   </header>
 
   <main>
-    <section>
+    <section class="companies">
       <p>Trusted by companies all over the world</p>
 
-      <div>
+      <div >
         <img src="./images/logo-airbnb.png" alt="Airbnb logo" />
         <img src="./images/logo-nasa.png" alt="NASA logo" />
         <img src="./images/logo-uber.png" alt="Uber logo" />
@@ -97,7 +92,7 @@ <h1>Great teamwork starts with a digital HQ</h1>
 
     </section>
 
-    <section>
+    <section class="teams">
       <h3>Teams large and small rely on Slack</h3>
       <p>Slack securely scales up to support collaboration at the world’s biggest companies.</p>
 
diff --git a/starter_code/stylesheets/style.css b/starter_code/stylesheets/style.css
index 59f4a7798..4667d4054 100644
--- a/starter_code/stylesheets/style.css
+++ b/starter_code/stylesheets/style.css
@@ -8,3 +8,154 @@ paragraph yellow: #ECB12F
 links blue: #2E71A6
 footer links grey: #454245
 */
+
+
+@media(width < 768px){
+
+    body{
+        margin: 0;
+        padding: 0;
+        font-family: Arial, Helvetica, sans-serif;
+    }
+
+    nav{
+        background-color: #540B51;
+        display: flex;
+        justify-content: space-between;
+        padding: 20px;
+    }
+    .imgSlack{
+        width: 180px;
+    }
+
+    header{
+        text-align: center;
+        background-color: #540B51;
+        width: 100%;
+    }
+
+    h1{
+        font-size: 70px;
+        font-weight: 300;
+        color: white;
+        padding: 40px;
+        margin: 0;
+    }
+
+    header p {
+        color: white;
+        font-size: 24px;
+    }
+
+    header span {
+        font-weight: bold;
+        color: #ECB12F;
+    }
+
+    header button {
+        text-transform: uppercase;
+        height: 70px;
+        border-radius: 3px;
+        margin: 10px;
+        font-size: 20px;
+        padding: 8px;
+        border: none;
+    }
+
+    .googleIcon {
+        height: 40px;
+        background-color: white;
+        padding: 10px;
+    }
+
+    .googleSignup {
+        background-color: #4285F4;
+        display: flex;
+        align-items: center;
+        color: white;
+    }
+
+    .googleSignup span {
+        color: white;
+        margin-left: 140px;
+    }
+
+    .emailSingup{
+        color: #540B51;
+        font-weight: bold;
+    }
+    
+    header .buttons {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        margin: 50px;
+    }
+
+    .heroImage{
+        width: 100%;
+        height: 600px;
+        object-fit: cover;
+        object-position: -30% 25%;
+    }
+
+    .companies {
+        background-color: #F3EAE2;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        padding: 30px;
+    }
+    
+    .companies p {
+        text-transform: uppercase;
+        font-size: 20px;
+        font-weight: 600;
+        padding-bottom: 20px;
+    }
+    
+    .companies div {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 20px;
+    }
+
+    .companies img {
+        height: 60px;
+        padding: 5px;
+    }
+
+    .teams {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        padding-right: 150px ;
+        padding-left: 150px ;
+        text-align: center;
+    }
+    
+    .teams h3 {
+        color: #540B51;
+        font-size: 32px;
+    }
+    
+    .teams p {
+        font-size: 22px;
+        margin-bottom: 40px;
+
+    }
+    
+    .teams li {
+        list-style-type: none;
+        text-align: center;
+    }
+    
+    .teams span {
+        font-size: 80px;
+        font-weight: 900;
+        color: #540B51;
+    }
+}
\ No newline at end of file

From 51be07fd2dfc7650756434765216a09f5a13a852 Mon Sep 17 00:00:00 2001
From: Alvaro Ruiz Monfillo <alvaroruizmonfillo@gmail.com>
Date: Sat, 26 Apr 2025 20:53:14 +0200
Subject: [PATCH 2/3] Primera Iteracion hecha

---
 starter_code/index.html            | 49 +++++++++++-------
 starter_code/stylesheets/style.css | 83 ++++++++++++++++++++++++++++++
 2 files changed, 112 insertions(+), 20 deletions(-)

diff --git a/starter_code/index.html b/starter_code/index.html
index 53f7a2e52..8cba18c7e 100644
--- a/starter_code/index.html
+++ b/starter_code/index.html
@@ -118,13 +118,18 @@ <h3>Teams large and small rely on Slack</h3>
           <p><span>88%</span></p>
           <p>
             feel more connected to their teams*
-            <sup>*</sup>
           </p>
         </li>
       </ul>
     </section>
 
-    <section>
+    <section class="info">
+      <p>*Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odio placeat, corporis praesentium accusamus, quas
+        animi omnis necessitatibus itaque sapiente, eligendi aperiam natus? Ad sapiente reiciendis explicabo ipsum!
+        Sunt, corporis minus.</p>
+    </section>
+
+    <section class="digitalHQ">
       <h3>Welcome to your new digital HQ</h3>
 
       <button>Try for free</button>
@@ -134,34 +139,38 @@ <h3>Welcome to your new digital HQ</h3>
   </main>
 
   <footer>
+
+    <hr>
     <ul>
       <li>Status</li>
       <li>Privacy</li>
       <li>Terms</li>
       <li>Cookie Preferences</li>
       <li>Contact Us</li>
-      <li>Change Region</li>
-      <li>Download Slack</li>
+      <li><img src="images/icon-region.png" alt="Change Region">Change Region</li>
+      <li><img src="images/icon-download.png" alt="Download Slack">Download Slack</li>
     </ul>
 
-    <hr>
-
-    <ul>
-      <li>
-        <i class="fab fa-twitter"></i>
-      </li>
-      <li>
-        <i class="fab fa-facebook"></i>
-      </li>
-      <li>
-        <i class="fab fa-youtube"></i>
-      </li>
-      <li>
-        <i class="fab fa-linkedin"></i>
-      </li>
-    </ul>
+    
 
+  <div class="socialMedia">
     <div>
+      <i class="fab fa-twitter"></i>
+    </div>
+    <div>
+      <i class="fab fa-facebook"></i>
+    </div>
+    <div>
+      <i class="fab fa-youtube"></i>
+    </div>
+    <div>
+      <i class="fab fa-linkedin"></i>
+    </div>
+  </div>
+      
+
+
+    <div class="copy">
       <small>
         &copy; 2022 Slack Technologies, LLC, a Salesforce company. All rights reserved. Various trademarks held by
         their respective owners.
diff --git a/starter_code/stylesheets/style.css b/starter_code/stylesheets/style.css
index 4667d4054..e150d2677 100644
--- a/starter_code/stylesheets/style.css
+++ b/starter_code/stylesheets/style.css
@@ -158,4 +158,87 @@ footer links grey: #454245
         font-weight: 900;
         color: #540B51;
     }
+
+    .info {
+        text-align: center;
+        font-size: 14px;
+        font-weight: 100;
+        color:  #45424597;
+        padding: 0 50px 50px;
+    }
+
+    .digitalHQ{
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        padding: 50px;
+        background-color: #540B51;
+    }
+
+    .digitalHQ h3 {
+        color: white;
+        font-size: 32px;
+        padding-bottom: 30px;
+    }
+
+    .digitalHQ button{
+        border: none;
+        text-transform: uppercase;
+        height: 80px;
+        margin: 10px;
+        font-size: 20px;
+        padding: 8px;
+        font-weight: bold;
+        width: 90%;
+        border-radius: 5px;
+        color: #540B51;
+    }
+
+    .digitalHQ button:hover{
+        background-color: #540B51;
+        transition: 0.3s;
+        border: solid white ;
+        color: white;
+    }
+
+    hr{
+        margin: 50px;
+    }
+
+    footer ul{
+        padding: 20px;
+    }
+
+    footer li{
+        list-style: none;
+        margin: 20px;
+        font-weight: bold;
+        padding: 0;
+    }
+
+    footer li:last-child{
+        color: #2e71a6;
+    }
+    
+      footer li img {
+        padding-right: 10px;
+        object-fit:cover ;
+    }
+
+    .socialMedia{
+        display: flex;
+        justify-content: space-between;
+        margin: 50px;
+    }
+
+    .socialMedia i{
+        font-size: 30px;
+    }
+
+    .copy {
+        text-align: center;
+        margin: 30px;
+        color: #454245;
+    }
 }
\ No newline at end of file

From 0f990c2ef3ba76239f64e811ce512cdaaa4bec33 Mon Sep 17 00:00:00 2001
From: Alvaro Ruiz Monfillo <alvaroruizmonfillo@gmail.com>
Date: Sun, 27 Apr 2025 13:50:24 +0200
Subject: [PATCH 3/3] Iteracion 2 hecha

---
 starter_code/index.html            |   2 +-
 starter_code/stylesheets/style.css | 279 +++++++++++++++++++++++++++--
 2 files changed, 270 insertions(+), 11 deletions(-)

diff --git a/starter_code/index.html b/starter_code/index.html
index 8cba18c7e..c570240f8 100644
--- a/starter_code/index.html
+++ b/starter_code/index.html
@@ -57,7 +57,7 @@
 
   <!-- HEADER -->
   <header>
-    <div>
+    <div class="greatTeam">
       <h1>Great teamwork starts with a digital HQ</h1>
 
       <p><span class="yellowText">Slack is free to try </span>for as long as you'd like.</p>
diff --git a/starter_code/stylesheets/style.css b/starter_code/stylesheets/style.css
index e150d2677..cdde18da3 100644
--- a/starter_code/stylesheets/style.css
+++ b/starter_code/stylesheets/style.css
@@ -8,10 +8,7 @@ paragraph yellow: #ECB12F
 links blue: #2E71A6
 footer links grey: #454245
 */
-
-
 @media(width < 768px){
-
     body{
         margin: 0;
         padding: 0;
@@ -24,6 +21,7 @@ footer links grey: #454245
         justify-content: space-between;
         padding: 20px;
     }
+
     .imgSlack{
         width: 180px;
     }
@@ -62,22 +60,25 @@ footer links grey: #454245
         border: none;
     }
 
-    .googleIcon {
-        height: 40px;
-        background-color: white;
-        padding: 10px;
-    }
-
     .googleSignup {
         background-color: #4285F4;
         display: flex;
         align-items: center;
+        justify-content: space-between;
         color: white;
     }
 
     .googleSignup span {
         color: white;
-        margin-left: 140px;
+        position: absolute;
+        left: 50%; 
+        transform: translateX(-50%);
+    }
+
+    .googleIcon {
+        height: 40px;
+        background-color: white;
+        padding: 10px;
     }
 
     .emailSingup{
@@ -236,6 +237,264 @@ footer links grey: #454245
         font-size: 30px;
     }
 
+    .copy {
+        text-align: center;
+        margin: 30px;
+        color: #454245;
+    }
+}
+
+/*------Pantallas medianas-------*/
+
+@media((min-width: 760px) and (max-width: 1024px)){
+    body{
+        margin: 0;
+        padding: 0;
+        font-family: Arial, Helvetica, sans-serif;
+    }
+
+    nav{
+        background-color: #540B51;
+        display: flex;
+        justify-content: space-between;
+        padding: 20px;
+    }
+
+    .imgSlack{
+        width: 180px;
+    }
+
+    header{
+        text-align: center;
+        background-image: url(../images/background-singup.png);
+        background-size: 150vw 72vh;
+        background-repeat: no-repeat;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .greatTeam {
+        display: flex;
+        flex-direction: column;
+        max-width: 80%;
+        color: white;
+        text-align: left;
+      }
+
+    h1{
+        font-size: 70px;
+        font-weight: 300;
+        color: white;
+        padding: 40px;
+        margin: 0;
+    }
+
+    header p {
+        color: white;
+        font-size: 24px;
+        margin-left: 50px;
+    }
+
+    header span {
+        font-weight: bold;
+        color: #ECB12F;
+    }
+
+    header button {
+        text-transform: uppercase;
+        height: 70px;
+        border-radius: 3px;
+        margin: 10px;
+        font-size: 20px;
+        padding: 8px;
+        border: none;
+    }
+
+    .googleSignup {
+        background-color: #4285F4;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        color: white;
+    }
+
+    .googleSignup span {
+        color: white;
+        margin-right:90px ;
+    }
+
+    .googleIcon {
+        height: 40px;
+        background-color: white;
+        padding: 10px;
+    }
+
+    .emailSingup{
+        color: #540B51;
+        font-weight: bold;
+    }
+    
+    header .buttons {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        margin: 50px;
+    }
+
+    .heroImage{
+        width: 100%;
+        height: 600px;
+        object-fit: cover;
+        object-position: 0;
+    }
+
+    .companies {
+        background-color: #F3EAE2;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        padding: 30px;
+    }
+    
+    .companies p {
+        text-transform: uppercase;
+        font-size: 20px;
+        font-weight: 600;
+        padding-bottom: 20px;
+    }
+    
+    .companies div {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        gap: 20px;
+    }
+
+    .companies img {
+        height: 50px;
+        padding: 5px;
+    }
+
+    .teams {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+        margin: 5%;
+    }
+    
+    .teams h3 {
+        color: #540B51;
+        font-size: 32px;
+    }
+    
+    .teams p {
+        font-size: 22px;
+        margin-bottom: 40px;
+    }
+    
+    .teams ul{
+        display: flex;
+        flex-direction: row;
+        font-weight: bold;
+        justify-content: space-evenly;
+        padding: 0;
+    }
+
+    .teams li {
+        list-style-type: none;
+        text-align: center;
+    }
+    
+    .teams span {
+        font-size: 80px;
+        font-weight: 900;
+        color: #540B51;
+    }
+
+    .info {
+        text-align: center;
+        font-size: 14px;
+        font-weight: 100;
+        color:  #45424597;
+        padding: 0 50px 50px;
+        display: none;
+    }
+
+    .digitalHQ{
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        padding: 50px;
+        background-color: #540B51;
+    }
+
+    .digitalHQ h3 {
+        color: white;
+        font-size: 32px;
+        padding-bottom: 30px;
+    }
+
+    .digitalHQ button{
+        border: none;
+        text-transform: uppercase;
+        height: 80px;
+        margin: 10px;
+        font-size: 20px;
+        padding: 8px;
+        font-weight: bold;
+        width: 90%;
+        border-radius: 5px;
+        color: #540B51;
+    }
+
+    .digitalHQ button:hover{
+        background-color: #540B51;
+        transition: 0.3s;
+        border: solid white ;
+        color: white;
+    }
+
+    hr{
+        margin: 50px;
+    }
+
+    footer ul{
+        padding: 20px;
+        display: flex;
+        flex-direction: row;
+    }
+
+    footer li{
+        list-style: none;
+        margin: 20px;
+        font-weight: bold;
+        padding: 0;
+    }
+
+    footer li:last-child{
+        color: #2e71a6;
+    }
+    
+      footer li img {
+        padding-right: 10px;
+        object-fit:cover ;
+    }
+
+    .socialMedia{
+        display: flex;
+        justify-content: space-between;
+        margin: 50px;
+    }
+
+    .socialMedia i{
+        font-size: 30px;
+    }
+
     .copy {
         text-align: center;
         margin: 30px;