diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 000000000..6f3a2913e
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
\ No newline at end of file
diff --git a/starter_code/index.html b/starter_code/index.html
index 2f593610f..9c8e3217b 100644
--- a/starter_code/index.html
+++ b/starter_code/index.html
@@ -7,6 +7,9 @@
   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 
   <!-- link the Font Awesome stylesheet - CDN -->
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Montserrat:ital,wght@0,500;1,500&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Special+Gothic&display=swap');
+  </style>
   <link href="https://use.fontawesome.com/releases/v5.0.1/css/all.css" rel="stylesheet" />
 
   <!-- link your styles -->
@@ -18,17 +21,20 @@
 
 <body>
   <!-- NAVBAR -->
-  <nav>
+  <nav class = "purple">
     <div>
-      <img src="./images/slack-logo.png" alt="Slack logo" />
+      <img id ="logo-slack" src="./images/slack-logo.png" alt="Slack logo" />
 
-      <ul>
+      <ul class ="references">
         <li>
           <a href="#">Product</a>
         </li>
         <li>
           <a href="#">Solutions</a>
         </li>
+        <li>
+          <a href="#">Enterprise</a>
+        </li>
         <li>
           <a href="#">Resources</a>
         </li>
@@ -38,7 +44,7 @@
       </ul>
     </div>
 
-    <div>
+    <div class="menu">
       <button>
         <img src="./images/icon-search.png" alt="Search icon">
       </button>
@@ -56,35 +62,37 @@
         </li>
       </ul>
     </div>
+
   </nav>
 
 
   <!-- HEADER -->
   <header>
-    <div>
+    <div class="header-tittle">
       <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>Slack is free to try</span> for as long as you'd like.</p>
 
-      <div>
+      <div class ="header-buttons">
         <button>Sign up with email</button>
 
-        <button>
+        <button class ="google-logo">
           <img src="./images/logo-google.png" alt="Google logo" />
-          <span>Sign up with Google</span>
+          <span>SIGN UP WITH GOOGLE</span>
         </button>
       </div>
 
     </div>
 
-    <div>
-      <img src="./images/hero-product-ui.png" alt="Slack app screenshot" />
+    <div id ="screenshot">
+      <img src="./images/hero-product-ui.png" alt="Slack app screenshot" width="500"/>
     </div>
   </header>
 
+   <!-- MAIN -->
   <main>
-    <section>
-      <p>Trusted by companies all over the world</p>
+    <section class="logos">
+      <p>TRUSTED BY COMPANIES ALL OVER THE WORLD</p>
 
       <div>
         <img src="./images/logo-airbnb.png" alt="Airbnb logo" />
@@ -94,14 +102,11 @@ <h1>Great teamwork starts with a digital HQ</h1>
         <img src="./images/logo-nyt.png" alt="New York Times logo" />
         <img src="./images/logo-spotify.png" alt="Spotify logo" />
       </div>
-
     </section>
 
-    <section>
+    <section class="stats">
       <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>
@@ -122,38 +127,44 @@ <h3>Teams large and small rely on Slack</h3>
         <li>
           <p><span>88%</span></p>
           <p>
-            feel more connected to their teams*
+            feel more connected to their teams
             <sup>*</sup>
           </p>
         </li>
       </ul>
     </section>
 
-    <section>
+    <section class="cta">
       <h3>Welcome to your new digital HQ</h3>
-
-      <button>Try for free</button>
-      <button>Talk to sales</button>
+    <div class ="welcome-buttons">
+      <button class="btn-white">TRY FOR FREE</button>
+      <button class="btn-purple">TALK TO SALES</button>
+    </div>
     </section>
-
   </main>
 
-  <footer>
-    <ul>
+   <!-- FOOTER -->
+  <hr>
+  <footer class ="footer-container">
+    <ul class="footer-links">
       <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 class="icon-region">
+        <img src="images/icon-region.png" alt="icon-region">
+        Change Region
+      </li>
+      <li class="icon-download">
+        <img class="blue" src="images/icon-download.png" alt="icon-download">
+        Download Slack
+      </li>
     </ul>
 
-    <hr>
-
-    <ul>
+    <ul class="footer-icons">
       <li>
-        <i class="fab fa-twitter"></i>
+        <i class="fab fa-twitter"></i> <!--Son iconos del enlace de fontawesome-->
       </li>
       <li>
         <i class="fab fa-facebook"></i>
@@ -166,7 +177,7 @@ <h3>Welcome to your new digital HQ</h3>
       </li>
     </ul>
 
-    <div>
+    <div class="footer-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 59f4a7798..a52fa2492 100644
--- a/starter_code/stylesheets/style.css
+++ b/starter_code/stylesheets/style.css
@@ -8,3 +8,627 @@ paragraph yellow: #ECB12F
 links blue: #2E71A6
 footer links grey: #454245
 */
+
+/* ### Iteration 1 | Mobile Screens (width < 768px) */
+
+body {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "Lato", sans-serif;
+}
+
+/*----NAVBAR-----*/
+
+nav.purple {
+  background-color: #541554; 
+  padding: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 0;
+  top: 0
+}
+
+nav.purple > div {
+  display: flex;
+  align-items: center;
+}
+
+
+#logo-slack {
+  width: 120px;
+}
+
+/* Menú principal oculto en móvil */
+nav.purple ul {
+  display: none;
+}
+
+/* Botones de buscar y menú */
+.menu {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.menu button {
+  background: none;
+  border: none;
+}
+
+.menu img {
+  width: 24px;
+  height: 24px;
+}
+
+/* Menú de login oculto */
+.menu ul {
+  display: none;
+}
+
+/*----HEADER-----*/
+
+header {
+  background-color: #541554;
+  padding: 2rem 1rem;
+  text-align: center;
+  
+}
+
+.header-tittle {
+  margin-bottom: 2rem;
+  color: white;
+  
+}
+
+.header-tittle h1 {
+  font-size: 3.7rem;
+  line-height: 1.2;
+  margin-bottom: 1rem;
+  
+}
+
+.header-tittle p {
+  font-size: 1rem;
+  margin-bottom: 1.5rem;
+  font-weight: bold;
+}
+
+.header-tittle p span {
+  color: rgb(236, 177, 47);
+}
+
+.header-buttons {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin-top: 1.5rem;
+}
+
+.header-buttons button {
+  padding: 1rem;
+  font-size: 1rem;
+  border-radius: 5px;
+  border: none;
+}
+
+.header-buttons button:first-child {
+  background-color: white ;
+  color: #611f69;
+  font-weight: bolder;
+}
+
+.google-logo {
+  background-color: rgb(66, 133, 244);
+  color: black;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  border: 1px solid #ccc;
+}
+
+.google-logo img {
+  background-color: white;
+  width: 25px;
+  height: 25px;
+  
+}
+.google-logo span {
+  color: white;
+  font-weight: bolder;
+
+}
+#screenshot img {
+  width: 100%;
+  height: auto;
+}
+
+/*----MAIN-----*/
+
+main {
+  text-align: center;
+}
+
+/*---- MAIN: LOGOS -----*/
+
+.logos {
+  background-color: rgb(243, 234, 226);
+}
+
+.logos p {
+  font-weight: bold;
+  margin: 0;
+  padding-top: 30px
+}
+
+.logos div {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.logos img {
+  width: 100px;
+  width: 80px;
+  margin: 10px;
+}
+
+/*---- MAIN: STATS -----*/
+
+.stats {
+  margin-top: 40px;
+}
+
+.stats h3 {
+  margin-bottom: 10px;
+  color: #611f69;
+  font-size: 2.3rem;
+  
+}
+
+.stats ul {
+  list-style: none;
+  padding: 0;
+}
+
+.stats li {
+  display: flex;
+  flex-direction: column;
+  margin: 30px;
+  
+}
+
+.stats li span {
+  color: #611f69;
+  font-size: 40px;
+  font-weight: bold;
+}
+.stats li p {
+  font-weight: bold;
+  margin: 2px;
+  text-align: center;
+}
+
+/*---- MAIN: CTA -----*/
+
+.cta {
+background-color: #541554;
+color: white;
+text-align: center;
+padding: 3rem 1rem; 
+}
+
+
+.cta h3 {
+  font-size: 2rem;
+  margin-bottom: 2rem;
+}
+
+
+.welcome-buttons {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.welcome-buttons button {
+  width: 100%;
+  padding: 1rem;
+  font-size: 1.1rem;
+  font-weight: bold;
+  border-radius: 5px;
+}
+
+.btn-white {
+  background-color: white;
+  color: 2px solid #541554;
+  border: none;
+}
+
+.btn-purple {
+  background-color: #541554;
+  color: white;
+  border: 1px solid white;
+}
+
+/* --- FOOTER --- */
+
+footer {
+  padding: 20px;
+  font-family: 'Lato', sans-serif;
+}
+
+.footer-container {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.footer-links {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 10px;
+  font-weight: bold;
+}
+
+.footer-links li {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+footer .icon-download {
+  color: rgb(68, 133, 182);
+}
+
+ hr {
+  margin: 40px;
+  border: none;
+  height: 1px;
+  background-color: #ccc;
+}
+
+.footer-icons {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  gap: 20px;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+
+}
+
+.footer-icons i {
+  font-size: 20px;
+}
+
+
+
+.footer-copy {
+  text-align: center;
+  margin-top: 10px;
+  font-size: 12px;
+  color: #666;
+}
+
+
+/* ### Iteration 2 | Small Screens (width > 768px and width < 1024px) */
+
+@media (min-width: 768px) and (max-width: 1024px) {
+  body {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    /*NAVBAR*/
+
+    nav.purple {
+      background-color: #541554; 
+      padding: 0.8rem;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin: 0;
+      top: 0;
+    }
+    
+    nav.purple > div {
+      display: flex;
+      align-items: center;
+    }
+    
+ 
+    #logo-slack {
+      width: 120px;
+    }
+    
+   
+    nav.purple ul {
+      display: none;
+    }
+    
+    .menu {
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+    }
+    
+    .menu img {
+      width: 24px;
+      height: 24px;
+    }
+    
+
+    .menu ul {
+      display: none;
+    }
+    
+
+  /*HEADER*/
+
+    header {
+      display: flex;
+      flex-direction: row;
+    }
+  
+    header > div {
+      width: 50%;
+    }
+
+  /*MAIN*/
+
+    /*---- MAIN: STATS -----*/
+    .stats ul {
+      list-style: none;
+      padding: 0;
+      display: flex;
+    }
+    .stats li p {
+      text-align: start;
+    }
+
+
+  /*FOOTER*/
+
+  .footer-links {
+    display: flex;
+    flex-direction: row;
+    justify-content:space-around;
+    margin-bottom: 20px;
+  }
+  .footer-icons {
+    display: flex;
+    justify-content: flex-start;
+  }
+  .footer-icons li {
+    padding: 20px;
+  }
+
+}
+
+/*### BONUS: Iteration 3 | Medium Screens (width > 1024px and width < 1440px)*/
+
+@media (min-width: 1024px) and (max-width: 1440px) {
+
+  /*---- NAVBAR -----*/
+
+  nav.purple ul {
+    display:flex;
+    list-style: none;
+    gap: 20px;
+    
+  }
+  .references {
+    margin-left: 50px;
+    justify-content: space-between;
+  }
+  .references li a {
+    color: white;
+    text-decoration: none;
+    font-weight: bold;
+    font-size: 14px;
+  }
+
+  .menu button {
+    display: none;
+  }
+  .menu button:first-child {
+    display: block;
+  }
+
+  .menu ul li a {
+    color: white;
+    text-decoration: none;
+    font-weight: bold;
+    font-size: 14px;
+  }
+
+  .menu ul li:last-child a {
+    background-color: white;
+    color: #541554;
+    padding: 8px 12px;
+    border-radius: 5px;
+    font-weight: bold;
+  }
+
+  /*---- HEADER -----*/
+
+  header {
+    display: flex;
+    flex-direction: row;
+  }
+
+  header > div {
+    width: 50%;
+  }
+
+  .header-tittle h1 {
+    font-size: 3.5rem;
+    margin-bottom: 2rem;
+  }
+  
+  /*---- MAIN -----*/
+
+    /*---STATS SECTION---*/
+
+    .stats ul {
+      list-style: none;
+      padding: 0;
+      display: flex;
+    }
+    .stats li p {
+      text-align: start;
+    }
+
+    /*---CTA SECTION---*/
+
+    .cta h3 {
+      font-size: 40px;
+    }
+    .welcome-buttons {
+      display: flex;
+      flex-direction: row;
+      gap: 1rem;
+      justify-content: center;
+    }
+
+    .welcome-buttons button {
+      width: 20%;
+      
+    }
+
+  /*FOOTER*/
+  .footer-links {
+    display: flex;
+    flex-direction: row;
+    justify-content:space-around;
+    margin-bottom: 20px;
+  }
+  .footer-icons {
+    display: flex;
+    justify-content: flex-start;
+  }
+  .footer-icons li {
+    padding: 20px;
+  }
+  
+}
+/*### BONUS: Iteration 4 | Large Screens (width > 1440px)*/
+
+@media (width > 1440px) {
+
+  /*NAVBAR*/
+
+  nav.purple ul {
+    display:flex;
+    list-style: none;
+    gap: 20px;
+    
+  }
+  .references {
+    margin-left: 50px;
+    justify-content: space-between;
+  }
+  .references li a {
+    color: white;
+    text-decoration: none;
+    font-weight: bold;
+    font-size: 14px;
+  }
+
+  .menu button {
+    display: none;
+  }
+  .menu button:first-child {
+    display: block;
+  }
+
+  .menu ul li a {
+    color: white;
+    text-decoration: none;
+    font-weight: bold;
+    font-size: 14px;
+  }
+
+  .menu ul li:last-child a {
+    background-color: white;
+    color: #541554;
+    padding: 8px 12px;
+    border-radius: 5px;
+    font-weight: bold;
+  }
+
+  /*HEADER*/
+  header {
+    display: flex;
+    flex-direction: row;
+  }
+
+  header > div {
+    width: 50%;
+  }
+
+  .header-tittle h1 {
+    font-size: 3.8rem;
+    margin-bottom: 2rem;
+  }
+
+  /*MAIN*/
+
+    /*STATS SECTION*/
+    .stats ul {
+      list-style: none;
+      padding: 0;
+      display: flex;
+      justify-content: space-around;
+      
+    }
+    .stats li p {
+      text-align: start;
+      
+    }
+
+    /*CTA SECTION*/
+
+    .cta h3 {
+      font-size: 40px;
+    }
+    .welcome-buttons {
+      display: flex;
+      flex-direction: row;
+      gap: 1rem;
+      justify-content: center;
+    }
+
+    .welcome-buttons button {
+      width: 20%;
+      
+    }
+
+  /*FOOTER*/
+  .footer-links {
+    display: flex;
+    flex-direction: row;
+    justify-content:space-around;
+    margin-bottom: 20px;
+  }
+  .footer-icons {
+    display: flex;
+    justify-content: flex-start;
+    margin-left: 50px;
+  }
+  .footer-icons li {
+    padding: 20px;
+  }
+  
+}
\ No newline at end of file
