diff --git a/starter_code/index.html b/starter_code/index.html
index 2f593610f..1a0c351d7 100644
--- a/starter_code/index.html
+++ b/starter_code/index.html
@@ -18,32 +18,32 @@
 
 <body>
   <!-- NAVBAR -->
-  <nav>
+  <nav class="navbar">
     <div>
-      <img src="./images/slack-logo.png" alt="Slack logo" />
+      <img class="navbar-slack-logo" src="./images/slack-logo.png" alt="Slack logo" />
 
-      <ul>
-        <li>
+      <ul class="navbar-list">
+        <li class="navbar-item">
           <a href="#">Product</a>
         </li>
-        <li>
+        <li class="navbar-item">
           <a href="#">Solutions</a>
         </li>
-        <li>
+        <li class="navbar-item">
           <a href="#">Resources</a>
         </li>
-        <li>
+        <li class="navbar-item">
           <a href="#">Pricing</a>
         </li>
       </ul>
     </div>
 
-    <div>
-      <button>
+    <div class="navbar-right-side">
+      <button class="navbar-buttons">
         <img src="./images/icon-search.png" alt="Search icon">
       </button>
 
-      <button>
+      <button class="navbar-buttons">
         <img src="./images/icon-menu.png" alt="Menu icon">
       </button>
 
@@ -59,17 +59,20 @@
   </nav>
 
 
+
   <!-- HEADER -->
   <header>
-    <div>
-      <h1>Great teamwork starts with a digital HQ</h1>
 
-      <p>Slack is free to try for as long as you'd like.</p>
+    <!-- first section -->
+    <div class="first-section">
+      <h1 class="first-section-title">Great teamwork starts with a digital HQ</h1>
+
+      <p class="first-section-subtitle"><span class="first-section-subtitle-yellow">Slack is free to try</span> for as long as you'd like.</p>
 
-      <div>
-        <button>Sign up with email</button>
+      <div class="first-section-buttons">
+        <button class="first-section-email-button">Sign up with email</button>
 
-        <button>
+        <button class="first-section-google-button">
           <img src="./images/logo-google.png" alt="Google logo" />
           <span>Sign up with Google</span>
         </button>
@@ -77,81 +80,94 @@ <h1>Great teamwork starts with a digital HQ</h1>
 
     </div>
 
+    <!-- hero section / screenshot central -->
     <div>
-      <img src="./images/hero-product-ui.png" alt="Slack app screenshot" />
+      <img class="hero-image" src="./images/hero-product-ui.png" alt="Slack app screenshot" />
     </div>
   </header>
 
+
+
+    <!-- TRUSTED BY COMPANIES & LOGOS -->
   <main>
-    <section>
-      <p>Trusted by companies all over the world</p>
-
-      <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" />
-        <img src="./images/logo-target.png" alt="Target logo" />
-        <img src="./images/logo-nyt.png" alt="New York Times logo" />
-        <img src="./images/logo-spotify.png" alt="Spotify logo" />
+    <section class="trusted-by">
+      <p class="trusted-by-text">Trusted by companies all over the world</p>
+
+      <div class="trusted-by-images">
+        <img src="./images/logo-airbnb.png" alt="Airbnb logo" class="logo-airbnb"/>
+        <img src="./images/logo-nasa.png" alt="NASA logo" class="logo-nasa"/>
+        <img src="./images/logo-uber.png" alt="Uber logo" class="logo-uber"/>
+        <img src="./images/logo-target.png" alt="Target logo" class="logo-target"/>
+        <img src="./images/logo-nyt.png" alt="New York Times logo" class="logo-nyt"/>
+        <img src="./images/logo-spotify.png" alt="Spotify logo" class="logo-spotify"/>
       </div>
 
     </section>
 
-    <section>
+
+
+  <!-- INFORMATION SECTION -->
+    <section class="information-container">
       <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>
+      <ul class="information-list">
+        <li class="information-item">
           <p><span>85%</span></p>
-          <p>
+          <p class="information-description">
             of users say Slack has improved communication
             <sup>*</sup>
           </p>
         </li>
 
-        <li>
+        <li class="information-item">
           <p><span>86%</span></p>
-          <p>
+          <p class="information-description">
             feel their ability to work remotely has improved has improved
             <sup>*</sup>
           </p>
         </li>
 
-        <li>
+        <li class="information-item">
           <p><span>88%</span></p>
-          <p>
-            feel more connected to their teams*
+          <p class="information-description">
+            feel more connected to their teams
             <sup>*</sup>
           </p>
         </li>
       </ul>
+      <small><sup>*</sup>Weighted average. Based on 2.707 survey responses from weekly Slack users in the U.S., UK, Australia and Canada with a 2% margin of error at 95% CI (August 2020).</small>
     </section>
 
-    <section>
-      <h3>Welcome to your new digital HQ</h3>
 
-      <button>Try for free</button>
-      <button>Talk to sales</button>
-    </section>
 
+    <!-- WELCOME & TRY/TALK BUTTONS -->
+    <section class="welcome-section">
+      <h3 class="welcome-section-text">Welcome to your new digital HQ</h3>
+
+      <button class="welcome-try-button">Try for free</button>
+      <button class="welcome-talk-button">Talk to sales</button>
+    </section>
   </main>
 
+  
+
+    <!-- FOOTER -->
   <footer>
-    <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>
+    <hr>
+    <ul class="footer-list">
+      <li class="footer-list-item">Status</li>
+      <li class="footer-list-item">Privacy</li>
+      <li class="footer-list-item">Terms</li>
+      <li class="footer-list-item">Cookie Preferences</li>
+      <li class="footer-list-item">Contact Us</li>
+      <li class="footer-list-item"><img src="./images/icon-region.png" alt="Region icon">Change Region</li>
+      <li class="footer-list-item-blue"><img src="./images/icon-download.png" alt="Download icon">Download Slack</li>
     </ul>
 
-    <hr>
 
-    <ul>
+    <ul class="footer-socials">
       <li>
         <i class="fab fa-twitter"></i>
       </li>
@@ -166,7 +182,7 @@ <h3>Welcome to your new digital HQ</h3>
       </li>
     </ul>
 
-    <div>
+    <div class="footer-end">
       <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..b3431955b 100644
--- a/starter_code/stylesheets/style.css
+++ b/starter_code/stylesheets/style.css
@@ -8,3 +8,497 @@ paragraph yellow: #ECB12F
 links blue: #2E71A6
 footer links grey: #454245
 */
+
+
+
+body {
+  max-width: 1500px;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  font-family: sans-serif;
+  background-color: #540b51;
+}
+
+
+
+/*NAVBAR*/
+.navbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #540b51;
+  position: relative;
+  margin: 4%;
+}
+
+.navbar-slack-logo {
+  max-width: 140px;
+  width: auto;
+}
+
+.navbar-list {
+  display: none;
+}
+
+.navbar-buttons {
+  background: none;
+  color: inherit;
+  border: none;
+  cursor: pointer;
+}
+
+
+/*HEADER*/
+header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: #540b51;
+}
+
+/*first section*/
+.first-section {
+  background-color: #540b51;
+  margin: 0;
+}
+
+.first-section-title {
+  font-size: 3rem;
+  text-align: center;
+  color: white;
+  padding: 25px;
+}
+
+.first-section-subtitle {
+  color: white;
+  text-align: center;
+  font-weight: 100;
+  font-size: larger;
+  font-weight: bold;
+}
+
+.first-section-subtitle-yellow {
+  color: #ECB12F;
+}
+
+/*first-section-buttons*/
+.first-section-buttons>button {
+  width: 100%;
+  height: 46;
+  border: none;
+  text-transform: uppercase;
+  border-radius: 5px;
+  padding: 15px;
+  cursor: pointer;
+}
+
+.first-section-email-button {
+  background-color: white;
+  font-weight: 600;
+  margin-bottom: 5px;
+  color: #540b51;
+}
+
+.first-section-google-button {
+  background-color: #4587f0;
+  color: white;
+  margin-top: 5px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  position: relative;
+}
+
+.first-section-google-button img {
+  width: 24px;
+  background-color: white;
+  height: auto;
+  padding: 2px;
+  border-radius: 5px;
+  margin-right: 10px;
+  display: flex;
+  justify-content: left;
+}
+
+
+/*hero section / screenshot central*/
+.hero-image {
+  width: 100vw;
+}
+
+
+/*TRUSTED BY COMPANIES & LOGOS*/
+.trusted-by {
+  background-color: #F3EAE2;
+  display: flex;
+  text-align: center;
+  flex-direction: column;
+  justify-content: center;
+  padding-top: 30px;
+  padding-bottom: 20px;
+  padding-left: 10px;
+  padding-right: 10px;
+  margin: 0px;
+}
+
+.trusted-by-images {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 8px;
+  margin-bottom: 24px;
+}
+
+.trusted-by-images img {
+  margin: 5px;
+}
+
+.trusted-by-text {
+  text-transform: uppercase;
+  font-weight: bold;
+  padding: 10px;
+}
+
+.logo-airbnb {
+  width: 100px;
+  height: 30px;
+}
+
+.logo-nasa {
+  width: 60px;
+  height: 50px;
+}
+
+.logo-uber {
+  width: 80px;
+  height: 50px;
+}
+
+.logo-target {
+  width: 50px;
+  height: 50px;
+}
+
+.logo-nyt {
+  width: 150px;
+  height: 30px;
+}
+
+.logo-spotify {
+  width: 130px;
+  height: 40px;
+}
+
+
+
+/*INFORMATION SECTION*/
+.information-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  background-color: white;
+  padding-top: 40px;
+}
+
+.information-container h3 {
+  color: #540b51;
+  font-size: 2.1rem;
+  margin-bottom: 5px;
+  margin: 15px;
+
+}
+
+.information-container p {
+  color: #000000;
+  font-size: 1rem;
+  font-weight: bold;
+  width: 90%;
+}
+
+.information-list {
+  list-style: none;
+  width: 50%;
+}
+
+.information-item span {
+  color: #540b51;
+  font-weight: bold;
+  font-size: 3rem;
+}
+
+.information-item p {
+  margin-bottom: 0;
+}
+
+.information-description {
+  margin: 0 0 10px 0;
+}
+
+.information-container small {
+  color: grey;
+  margin: 35px;
+}
+
+/*WELCOME & TRY/TALK BUTTONS*/
+.welcome-section {
+  background-color: #540b51;
+  padding: 30px;
+}
+
+.welcome-section h3 {
+  color: #fff;
+  font-size: 2rem;
+  text-align: center;
+}
+
+.welcome-section button {
+  padding: 15px;
+  border-radius: 5px;
+  cursor: pointer;
+  margin-bottom: 15px;
+  height: 50px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-transform: uppercase;
+  text-align: center;
+  font-size: 1.1rem;
+  font-weight: bold;
+}
+
+.welcome-try-button {
+  background-color: #fff;
+  color: #540b51;
+  border: none;
+}
+
+.welcome-talk-button {
+  background-color: #540b51;
+  color: #fff;
+  border: #fff solid 1px;
+}
+
+
+/*FOOTER*/
+footer {
+  border-top: solid 2px lightgrey;
+  margin-top: 30px;
+  background-color: white;
+  padding-top: 10px;
+  padding-bottom: 15px;
+}
+
+footer>hr {
+  margin: 30px;
+  border: none;
+  height: 1px;
+  background-color: rgb(209, 206, 206);
+}
+
+.footer-list {
+  list-style: none;
+  margin-bottom: 0;
+}
+
+.footer-list-item {
+  margin: 20px auto;
+  color: #000000;
+  font-size: 1rem;
+  font-weight: bold;
+}
+
+.footer-list-item-blue {
+  margin: 20px auto;
+  font-size: 1rem;
+  font-weight: bold;
+  color: #2E71A6;
+}
+
+.footer-list img {
+  margin-right: 8px;
+}
+
+.footer-socials {
+  list-style: none;
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+  padding-top: 10px;
+}
+
+.footer-socials li {
+  font-size: 20px;
+}
+
+.footer-end {
+  padding: 15px;
+  color: gray;
+  text-align: center;
+  padding-bottom: 15px;
+}
+
+
+/*Iteration 1 | Mobile Screens (width < 768px)*/
+@media (max-width: 768px) {
+
+  body {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .first-section {
+    background-color: #540b51;
+    text-align: center;
+  }
+
+  .information-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    background-color: white;
+    padding-top: 40px;
+  }
+
+  .information-container h3 {
+    font-weight: bold;
+    font-size: 1.7rem;
+    text-align: center;
+  }
+
+  .first-section-buttons {
+    margin: 20px;
+  }
+}
+
+
+/*Iteration 2 | Small Screens (width > 768px and width < 1024px)*/
+@media (min-width: 769px) and (max-width: 1023px) {
+
+  header {
+    padding-bottom: 40px;
+    width: 100%;
+  }
+
+  /*first section*/
+  .first-section {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    background-color: #540b51;
+    text-align: left;
+    margin: 0;
+  }
+
+  .first-section-title {
+    font-size: 4rem;
+    text-align: left;
+    padding: 25px;
+  }
+
+  .first-section-subtitle {
+    text-align: left;
+    font-weight: light;
+    padding-left: 25px;
+    width: 350px;
+  }
+
+  /*first-section-buttons*/
+  .first-section-buttons {
+    display: flex;
+    flex-direction: column;
+    align-items: left;
+    padding-left: 25px;
+    width: 430px;
+  }
+
+  .first-section-email-button {}
+
+  /*hero section / screenshot central*/
+  .hero-image {
+    width: 50vw;
+  }
+
+  .information-container {
+    padding-bottom: 35px;
+  }
+
+  .information-list {
+    display: flex;
+    flex-direction: row;
+    align-items: start;
+    justify-content: space-between;
+    width: auto;
+    text-align: left;
+  }
+
+  .information-container small {
+    display: none;
+  }
+
+  .welcome-section {
+    padding-left: 70px;
+    padding-right: 70px;
+  }
+
+  /*FOOTER*/
+  footer {
+    margin-top: 30px;
+    background-color: white;
+    padding-top: 10px;
+    padding-bottom: 15px;
+  }
+
+  footer>hr {
+    margin: 30px;
+    border: none;
+    height: 1px;
+    background-color: rgb(209, 206, 206);
+  }
+
+  .footer-list {
+    list-style: none;
+    margin-bottom: 0;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+
+  }
+
+  .footer-list-item {
+    margin: 20px auto;
+  }
+
+  .footer-list-item-blue {
+    margin: 20px auto;
+  }
+
+  .footer-list img {
+    margin-right: 8px;
+  }
+
+  .footer-socials {
+    list-style: none;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    gap: 80px;
+
+  }
+
+  .footer-socials li {
+    font-size: 20px;
+  }
+
+  .footer-end {
+    padding: 15px;
+    color: gray;
+    padding-bottom: 15px;
+  }
+
+}
\ No newline at end of file
