diff --git a/starter_code/index.html b/starter_code/index.html
index 2f593610f..7257a1bdb 100644
--- a/starter_code/index.html
+++ b/starter_code/index.html
@@ -18,11 +18,11 @@
 
 <body>
   <!-- NAVBAR -->
-  <nav>
+  <nav class="nav-bar">
     <div>
       <img src="./images/slack-logo.png" alt="Slack logo" />
 
-      <ul>
+      <ul class="nav-bar-list">
         <li>
           <a href="#">Product</a>
         </li>
@@ -38,7 +38,7 @@
       </ul>
     </div>
 
-    <div>
+    <div class="nav-bar-buttons">
       <button>
         <img src="./images/icon-search.png" alt="Search icon">
       </button>
@@ -61,15 +61,15 @@
 
   <!-- HEADER -->
   <header>
-    <div>
+    <div class="intro-container">
       <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="yellow-text">Slack is free to try</span> for as long as you'd like.</p>
 
-      <div>
-        <button>Sign up with email</button>
+      <div class="sign-up-buttons">
+        <button class="email-button">Sign up with email</button>
 
-        <button>
+        <button class="google-button">
           <img src="./images/logo-google.png" alt="Google logo" />
           <span>Sign up with Google</span>
         </button>
@@ -77,16 +77,16 @@ <h1>Great teamwork starts with a digital HQ</h1>
 
     </div>
 
-    <div>
+    <div class="screenshot">
       <img src="./images/hero-product-ui.png" alt="Slack app screenshot" />
     </div>
   </header>
 
   <main>
-    <section>
+    <section class="trusted-companies">
       <p>Trusted by companies all over the world</p>
 
-      <div>
+      <div class="trusted-companies-images">
         <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" />
@@ -95,7 +95,7 @@ <h1>Great teamwork starts with a digital HQ</h1>
         <img src="./images/logo-spotify.png" alt="Spotify logo" />
       </div>
 
-    </section>
+    </section class="teams-container">
 
     <section>
       <h3>Teams large and small rely on Slack</h3>
@@ -129,17 +129,17 @@ <h3>Teams large and small rely on Slack</h3>
       </ul>
     </section>
 
-    <section>
+    <section class="digital-hq-container">
       <h3>Welcome to your new digital HQ</h3>
 
-      <button>Try for free</button>
-      <button>Talk to sales</button>
+      <button class="free-try-button">Try for free</button>
+      <button class="talk-sales-button">Talk to sales</button>
     </section>
 
   </main>
 
   <footer>
-    <ul>
+    <ul class="footer-general-list">
       <li>Status</li>
       <li>Privacy</li>
       <li>Terms</li>
@@ -151,7 +151,7 @@ <h3>Welcome to your new digital HQ</h3>
 
     <hr>
 
-    <ul>
+    <ul class="social-media-list">
       <li>
         <i class="fab fa-twitter"></i>
       </li>
diff --git a/starter_code/stylesheets/style.css b/starter_code/stylesheets/style.css
index 59f4a7798..eb6c01d15 100644
--- a/starter_code/stylesheets/style.css
+++ b/starter_code/stylesheets/style.css
@@ -8,3 +8,350 @@ paragraph yellow: #ECB12F
 links blue: #2E71A6
 footer links grey: #454245
 */
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html {
+    font-size: 16px;
+    scroll-behavior: smooth;
+}
+
+body{
+    font-family: Arial, Helvetica, sans-serif;
+    background-color: #540B51;
+    text-align: center;
+}
+
+.nav-bar {
+    display: flex;
+    justify-content: space-between;
+    margin: 10 px;
+    padding: 20px;
+    background-color: #540B51;
+}
+
+.nav-bar img {
+    height: 24px;
+}
+
+.nav-bar-list {
+    display: none;
+}
+
+.nav-bar-buttons {
+  display: flex;
+  justify-content: space-between;
+  margin-left: 10px;
+  background-color: transparent;
+  color: white;
+}
+
+.nav-bar-buttons button {
+    background-color: transparent;
+    padding: 10px;
+    margin-left: 10;
+    position: relative;
+    top: 0px;
+    right: 0px;
+    border-style: none;
+}
+
+header{
+    background-color: #540B51;
+    color: white;
+    padding: 30px;
+    text-align: center;
+}
+
+.intro-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: white;
+    text-align: center;
+    position: relative;
+    padding: 30px;
+}
+
+header h1 {
+    font-size: 2rem;
+    margin-bottom: 20px;
+}
+
+.yellow-text {
+    color: #ECB12F;
+    font-weight: 600;
+}
+
+.sign-up-buttons {
+    border-style: none;
+    border-radius: 5px;
+    width: 100%;
+    height: 50px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    margin: 20px;
+    position: relative
+}
+
+.email-button {
+    padding: 15px;
+    background-color: white;
+    color: #540B51;
+    text-transform: uppercase;
+    font-weight: 500;
+}
+
+.google-button {
+    padding: 15px;
+    background-color: #4285F4;
+    text-transform: uppercase;
+    font-weight: 500;
+}
+
+.google-button img {
+    height: auto;
+    width: 35px;
+    border-radius: 2px;
+    padding: 6px;
+    margin: 2px;
+    color: white;
+}
+
+.google-button span {
+    display: flex;
+    flex: 1;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    color: white;
+}
+
+.screenshot {
+    width: 100vw;
+    height: 470px;
+    overflow: hidden;
+}
+
+.screenshot img {
+    width: 150%;
+    height: 150%;
+}
+
+.trusted-companies {
+    text-transform: uppercase;
+    background-color: #F3EAE2;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 30px 0;
+}
+
+.trusted-companies p {
+    padding: 10px 0;
+}
+
+.trusted-companies-images {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 24 ox;
+    margin: 12px 0;
+}
+
+.trusted-companies-images img {
+    height: 40px;
+    width: 100px;
+}
+
+.teams-container {
+    text-align: center;
+    background-color: white;
+    margin: 0px;
+    padding: 20px 70px;
+}
+
+.teams-container h3 {
+    font-size: 25px;
+    color:#540B51
+}
+
+.teams-container li {
+    list-style-type: none;
+    font-weight: 600;
+}
+
+.teams-container li span {
+    font-size: 50px;
+    color: #540B51;
+}
+
+.digital-hq-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    gap: 10px;
+    color: white;
+    padding: 20px;
+    text-align: center;
+}
+
+.digital-hq-container h3 {
+    font-size: 30px;
+}
+
+.digital-hq-container button {
+    text-transform: uppercase;
+    border-radius: 5px;
+    padding: 15px;
+    width: 100%;
+    height: 50px;
+    margin: 10px;
+}
+
+.free-try-button {
+    background-color: white;
+    color: #540B51;
+}
+
+.talk-sales-button {
+    background-color: #540B51;
+    color: white;
+    border-color: white;
+}
+
+footer {
+    background-color: white;
+    display: flex;
+    flex-direction: column;
+}
+
+.footer-general-list {
+    list-style-type: none;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    font-size: 15px;
+    font-weight: 600;
+    padding-top: 20px;
+    padding-left: 20px;
+}
+
+.download {
+    color: mediumslateblue
+}
+
+.social-media-list {
+    display: flex;
+    flex-direction: row;
+    list-style-type: none;
+    justify-content: space-between;
+    padding-right: 20px;
+    padding-left: 20px;
+}
+
+footer div {
+    padding: 20px;
+    text-align: center;
+    padding-bottom: 20px;
+    font-size: 15px;
+    color: #454245;
+}
+
+@media (width < 768px) {
+    .sign-up-buttons {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        padding: 20px;
+    }
+}
+
+@media (768px <= width <= 1024px) {
+    header {
+        display: flex;
+        flex-direction: column;
+        color: white;
+        text-align: left;
+        padding: 40px;
+    }
+
+    .intro-container {
+        display: flex;
+        flex-direction: column;
+        color: white;
+        text-align: left;
+        padding: 40px;
+    }
+
+    .intro-container h1 {
+        font-size: 75px;
+    }
+
+    .sign-up-buttons {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+    }
+
+    .screenshot{
+        overflow: hidden;
+    }
+
+    .teams-container li {
+        list-style-type: none;
+        font-weight: 600;
+        text-align: left;
+    }
+
+    .teams-container ul {
+        display: flex;
+    }
+
+    .digital-hq-container {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        color: white;
+        padding: 20px 10vw;
+        text-align: center;
+    }
+
+    footer {
+        background-color: white;
+        display: flex;
+    }
+
+    .footer-general-list {
+        display: flex;
+        flex-direction: row;
+        list-style-type: none;
+        justify-content: space-between;
+        font-size: 15px;
+        font-weight: 600;
+        padding-top: 20px;
+        padding-right: 40px;
+    }
+
+    .social-media-list {
+        display: flex;
+        list-style-type: none;
+        justify-content: left;
+        gap: 5vw;
+        padding-right: 20px;
+        padding-left: 20px;
+    }
+
+    footer div {
+        padding: 20px;
+        text-align: left;
+        font-size: 15px;
+        color:#454245
+    }
+}
\ No newline at end of file
