From c54ae2faba0e58855da8493a20e840aa0d0e5867 Mon Sep 17 00:00:00 2001
From: amalia barrigas <amaliabarrigas@gmail.com>
Date: Wed, 21 May 2025 15:55:02 +0200
Subject: [PATCH] cambios en slack

---
 starter_code/index.html            |  44 +++----
 starter_code/stylesheets/style.css | 196 +++++++++++++++++++++++++++++
 2 files changed, 218 insertions(+), 22 deletions(-)

diff --git a/starter_code/index.html b/starter_code/index.html
index 2f593610f..f4299109c 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 id="slack-logo" src="./images/slack-logo.png" alt="Slack logo" />
 
-      <ul>
+      <ul id="menu">
         <li>
           <a href="#">Product</a>
         </li>
@@ -39,11 +39,11 @@
     </div>
 
     <div>
-      <button>
+      <button id="button-search">
         <img src="./images/icon-search.png" alt="Search icon">
       </button>
 
-      <button>
+      <button id="button-menu">
         <img src="./images/icon-menu.png" alt="Menu icon">
       </button>
 
@@ -64,12 +64,12 @@
     <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 id="free-try-text"><span>Slack is free to try</span> for as long as you'd like.</p>
 
       <div>
-        <button>Sign up with email</button>
+        <button id="sign-email">Sign up with email</button>
 
-        <button>
+        <button id="sign-google">
           <img src="./images/logo-google.png" alt="Google logo" />
           <span>Sign up with Google</span>
         </button>
@@ -78,15 +78,15 @@ <h1>Great teamwork starts with a digital HQ</h1>
     </div>
 
     <div>
-      <img src="./images/hero-product-ui.png" alt="Slack app screenshot" />
+      <img id="screen-shot" src="./images/hero-product-ui.png" alt="Slack app screenshot" />
     </div>
   </header>
 
   <main>
-    <section>
-      <p>Trusted by companies all over the world</p>
+    <section id="partners">
+      <p id="main-companies">Trusted by companies all over the world</p>
 
-      <div>
+      <div id="logos">
         <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,31 +97,31 @@ <h1>Great teamwork starts with a digital HQ</h1>
 
     </section>
 
-    <section>
+    <section id="estadisticas">
       <h3>Teams large and small rely on Slack</h3>
       <p>Slack securely scales up to support collaboration at the world’s biggest companies.</p>
 
 
       <ul>
         <li>
-          <p><span>85%</span></p>
-          <p>
+          <p class="porcentaje"><span>85%</span></p>
+          <p class="porcentaje-descripcion">
             of users say Slack has improved communication
             <sup>*</sup>
           </p>
         </li>
 
         <li>
-          <p><span>86%</span></p>
-          <p>
+          <p class="porcentaje"><span>86%</span></p>
+          <p class="porcentaje-descripcion">
             feel their ability to work remotely has improved has improved
             <sup>*</sup>
           </p>
         </li>
 
         <li>
-          <p><span>88%</span></p>
-          <p>
+          <p class="porcentaje"><span>88%</span></p>
+          <p class="porcentaje-descripcion">
             feel more connected to their teams*
             <sup>*</sup>
           </p>
@@ -129,17 +129,17 @@ <h3>Teams large and small rely on Slack</h3>
       </ul>
     </section>
 
-    <section>
+    <section id="welcomeHQ">
       <h3>Welcome to your new digital HQ</h3>
 
-      <button>Try for free</button>
-      <button>Talk to sales</button>
+      <button id="try-free">Try for free</button>
+      <button id="talk-sales">Talk to sales</button>
     </section>
 
   </main>
 
   <footer>
-    <ul>
+    <ul id="private-terms">
       <li>Status</li>
       <li>Privacy</li>
       <li>Terms</li>
diff --git a/starter_code/stylesheets/style.css b/starter_code/stylesheets/style.css
index 59f4a7798..4161d6cc6 100644
--- a/starter_code/stylesheets/style.css
+++ b/starter_code/stylesheets/style.css
@@ -8,3 +8,199 @@ paragraph yellow: #ECB12F
 links blue: #2E71A6
 footer links grey: #454245
 */
+
+/*Version moviles 768*/
+
+body{
+    max-width: 100%;
+    margin: 0;
+    padding: 0;
+    font-family: sans-serif;
+
+}
+
+button{
+    background-color: transparent;
+    border: none;
+}
+
+@media (width <768px){
+    nav {
+        padding: 30px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        background-color: #540B51;
+    }
+    nav #slack-logo {
+        max-width: 100px;
+    }
+    nav #menu {
+        display: none;
+    }
+
+    
+    nav #button-search{
+        margin-right: 30px;
+    }
+
+    header {
+        background-color: #540B51;
+        padding: 15px;
+        text-align: center;
+        overflow: hidden;
+    }
+
+    header h1 {
+        color: #fff;
+        font-size: 43px;
+    }
+
+    header #free-try-text {
+        color: #fff;
+        font-size: 20px;
+    }
+
+    header #free-try-text span {
+        color: #ECB12F;
+        font-weight: bold;
+    }
+
+    header button {
+        width: 100%;
+        border-radius: 5px;
+        font-size: 20px;
+        text-align: center;
+        text-transform: uppercase;
+        padding: 15px 0;
+        margin: 10px 0;
+    }
+
+    header #sign-email {
+        background-color: #fff;
+        color:#540B51;
+    }
+
+    header #sign-google {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        background-color: #4285F4;
+        color: #fff;
+    }
+
+    header #sign-google span {
+        width: 100%;
+    }
+
+    header #sign-google img {
+        background-color: #fff;
+        margin-left: 15px;
+        width: 30px;
+        padding: 5px;
+    }
+
+    main {
+        text-align: center;
+    }
+
+    #partners {
+        background-color: #F3EAE2;
+        padding-bottom: 30px;
+    }
+
+    #main-companies {
+        text-transform: uppercase;
+        font-size: 15px;
+        font-weight: bold;
+        margin-top: -15px;
+        padding-top: 15px; 
+    }
+
+    #logos {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-around;
+    }
+
+    #logos img {
+        max-height: 45px;
+        margin-top: 10px;
+        margin-bottom: 10px;
+        
+    }
+
+    #estadisticas h3 {
+        color:#540B51;
+        font-size: 36px;
+    }
+
+    #estadisticas p {
+        text-align: center; 
+        font-weight: initial;
+        margin-left: 10px;
+        margin-right: 10px;
+    }
+
+    #estadisticas ul {
+        list-style: none;
+        padding: 0;
+    }
+
+    #estadisticas ul li .porcentaje span  {
+        color: #540B51;
+        font-weight: bold;
+        font-size: 50px;
+        margin-top: 50px;
+
+    }
+
+    #estadisticas ul li .porcentaje-descripcion {
+        font-weight: bold;
+        text-align: center;
+        max-width: 200px;
+        margin: 0 auto;
+    }
+
+    #welcomeHQ {
+        background-color: #540B51;
+        color: #fff;
+        padding: 15px;
+        text-align: center;
+        font-size: 30px;
+
+    }
+
+    #welcomeHQ button {
+        width: 100%;
+        border-radius: 5px;
+        font-size: 20px;
+        text-align: center;
+        text-transform: uppercase;
+        padding: 15px 0;
+        margin: 10px 0;
+    }
+
+    #try-free {
+        background-color: #fff;
+        color:#540B51;
+    }
+
+    #talk-sales {
+        border-width: 2px;
+        border-style: solid; 
+        border-color:#fff;
+        color: #fff;
+
+    }
+
+    #private-terms {
+        list-style: none;
+        padding: 0;
+        font-weight: bold;
+        margin: 10px;
+        padding: 10px;
+    }
+
+
+}