diff --git a/starter_code/index.html b/starter_code/index.html
index 2f593610f..f908dd387 100644
--- a/starter_code/index.html
+++ b/starter_code/index.html
@@ -19,10 +19,10 @@
 <body>
   <!-- NAVBAR -->
   <nav>
-    <div>
-      <img src="./images/slack-logo.png" alt="Slack logo" />
+    <div id="caja-foto">
+      <img src="./images/slack-logo.png" alt="Slack logo" class="slack-logo"/>
 
-      <ul>
+      <ul id="desplegados" hidden>
         <li>
           <a href="#">Product</a>
         </li>
@@ -38,13 +38,13 @@
       </ul>
     </div>
 
-    <div>
+    <div id="caja-botones">
       <button>
-        <img src="./images/icon-search.png" alt="Search icon">
+        <img src="./images/icon-search.png" alt="Search icon" id="boton-busqueda">
       </button>
 
       <button>
-        <img src="./images/icon-menu.png" alt="Menu icon">
+        <img src="./images/icon-menu.png" alt="Menu icon" id="boton-menu">
       </button>
 
       <ul hidden>
@@ -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><span class="texto-naranja">Slack is free to try for</span> as long as you'd like.</p>
 
       <div>
-        <button>Sign up with email</button>
+        <button id="boton-email">Sign up with email</button>
 
-        <button>
+        <button id="boton-google">
           <img src="./images/logo-google.png" alt="Google logo" />
           <span>Sign up with Google</span>
         </button>
@@ -77,7 +77,7 @@ <h1>Great teamwork starts with a digital HQ</h1>
 
     </div>
 
-    <div>
+    <div class="foto-slack">
       <img src="./images/hero-product-ui.png" alt="Slack app screenshot" />
     </div>
   </header>
@@ -97,7 +97,7 @@ <h1>Great teamwork starts with a digital HQ</h1>
 
     </section>
 
-    <section>
+    <section class="seccion-2">
       <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..1eb2594bc 100644
--- a/starter_code/stylesheets/style.css
+++ b/starter_code/stylesheets/style.css
@@ -8,3 +8,110 @@ paragraph yellow: #ECB12F
 links blue: #2E71A6
 footer links grey: #454245
 */
+
+@media (width < 768px) {
+    nav {
+    background-color: #540B51;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+    flex-direction: row;
+    }
+    #caja-botones {
+        gap: 10%;
+        margin-right: 10px;
+        display: flex;
+        justify-content: space-between;
+
+
+    }
+    nav button {
+        width: 20px;
+        height: 20px;
+        border: none;
+        background-color: #540B51;
+
+    }
+    
+    .slack-logo {
+        width: 100px;
+        height: auto;
+    }
+    body{
+        background-color:#540B51 ;
+    }
+    header {
+        background-color:#540B51;
+        color: white;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+    }
+    h1 {
+        font-size: 30px;
+        text-align: center;
+        font-style: none;
+    }
+    header p {
+        text-align: center;
+        font-size: small;
+    }
+    .texto-naranja {
+        color: orange;
+    }
+    header button {
+        display: flex;
+        flex-direction: column;
+        width: 95%;
+        height: 30px;
+        justify-content: center;
+        text-transform: uppercase;
+        position: relative;
+    }
+    header button:nth-child(1) {
+        color: #540B51;
+    }
+
+    header button:nth-child(2) {
+        background-color: #4285F4;
+        color: white;
+        display: flex;
+        flex-direction: row;
+        flex-grow: 2;
+        justify-content: space-evenly;
+        align-items:center;
+    }
+    header button:nth-child(2) span {
+        
+    }
+    header button:nth-child(2) img{
+        width: 15px;
+        height: 15px;
+        background-color: white;
+    }
+    header img {
+        width: 400px;
+        height: 150px;
+        object-fit: cover;
+    }
+    main {
+        background-color: #F3EAE2 ;
+        padding: 0%;
+    }
+    main p {
+        text-transform: uppercase;
+        font-size: 10px;
+        text-align: center;
+        ;
+    }
+    main img{
+        width: 60px;
+    }
+    .seccion-2 {
+        background-color: white;
+    }
+    }
+
+
+
+    
