diff --git a/starter_code/index.html b/starter_code/index.html
index 2f593610f..924f80ee1 100644
--- a/starter_code/index.html
+++ b/starter_code/index.html
@@ -18,7 +18,7 @@
 
 <body>
   <!-- NAVBAR -->
-  <nav>
+  <nav class="navbar">
     <div>
       <img src="./images/slack-logo.png" alt="Slack logo" />
 
@@ -38,7 +38,7 @@
       </ul>
     </div>
 
-    <div>
+    <div class="btn">
       <button>
         <img src="./images/icon-search.png" alt="Search icon">
       </button>
@@ -66,10 +66,10 @@ <h1>Great teamwork starts with a digital HQ</h1>
 
       <p>Slack is free to try for as long as you'd like.</p>
 
-      <div>
-        <button>Sign up with email</button>
+      <div class="header-signup">
+        <button class="header-first-btn">Sign up with email</button>
 
-        <button>
+        <button class="header-second-btn">
           <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="header-image">
       <img src="./images/hero-product-ui.png" alt="Slack app screenshot" />
     </div>
   </header>
 
   <main>
-    <section>
+    <section class="main-section1">
       <p>Trusted by companies all over the world</p>
 
-      <div>
+      <div class="main-section1-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" />
@@ -97,7 +97,7 @@ <h1>Great teamwork starts with a digital HQ</h1>
 
     </section>
 
-    <section>
+    <section class="main-section2">
       <h3>Teams large and small rely on Slack</h3>
       <p>Slack securely scales up to support collaboration at the world’s biggest companies.</p>
 
@@ -129,17 +129,17 @@ <h3>Teams large and small rely on Slack</h3>
       </ul>
     </section>
 
-    <section>
+    <section class="digital-HQ">
       <h3>Welcome to your new digital HQ</h3>
 
       <button>Try for free</button>
-      <button>Talk to sales</button>
+      <button class="digital-HQ-button">Talk to sales</button>
     </section>
 
   </main>
 
   <footer>
-    <ul>
+    <ul class="footer-first-ul">
       <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="footer-second-ul">
       <li>
         <i class="fab fa-twitter"></i>
       </li>
@@ -167,7 +167,7 @@ <h3>Welcome to your new digital HQ</h3>
     </ul>
 
     <div>
-      <small>
+      <small class="small">
         &copy; 2022 Slack Technologies, LLC, a Salesforce company. All rights reserved. Various trademarks held by
         their respective owners.
       </small>
diff --git a/starter_code/stylesheets/style.css b/starter_code/stylesheets/style.css
index 59f4a7798..89b9b6a65 100644
--- a/starter_code/stylesheets/style.css
+++ b/starter_code/stylesheets/style.css
@@ -8,3 +8,433 @@ paragraph yellow: #ECB12F
 links blue: #2E71A6
 footer links grey: #454245
 */
+header, nav, .digital-HQ{
+    background-color:#540B51 ;
+    
+}
+header, nav {
+  margin: 0;
+  padding: 0;
+  display: block; /* Ensures they behave as block elements without inline spacing */
+}
+header div h1{
+    padding-top: 30px;
+    margin-top: 0;
+    color: rgb(239, 229, 229);
+}
+nav{
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    gap: 0px;
+}
+
+@media(max-width:768px){
+  nav{
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+  }
+  nav div img{
+    width: 130px;
+    padding: 20px;
+  }
+  nav ul{
+     display: none;
+  }
+  .btn{
+    display: flex;
+    gap: 80px;
+    background: none;
+    border: none;
+    margin-right: 30px;
+  }
+  .btn img{
+    width: 40px;
+    height: 40px;
+    padding: 0;
+    border: none;
+    background-color: #540B51;
+   
+  }
+  header div h1{
+    margin: 0px 30px 0px 30px;
+    padding-top: 60px;
+    text-align:center;
+    font-size:75px;
+  }
+  header div p{
+    text-align: center;
+    font-size: 33px;
+    color:rgb(215, 188, 188);
+  }
+  .header-signup{
+    display: grid;
+    gap: 25px;
+  }
+  .header-first-btn{
+    text-align: center;
+    padding:21px 60px;
+    font-size: 35px;
+    color: #540B51;
+    margin-left: 25px;
+    margin-right: 25px;
+    border-radius: 10px;
+  }
+  .header-second-btn{
+    display: flex;
+    align-items: center;
+    margin-left: 25px;
+    margin-right: 25px;
+    margin-bottom: 70px;
+    border-radius: 10px;
+    background-color: #4285F4;
+  }
+  .header-second-btn img{
+     margin: 7px 7px 7px 7px;
+     padding: 12px;
+     background-color: white;
+     border-radius: 5%;
+     width: 35px;
+  }
+   .header-second-btn span{
+    color:white;
+    margin-left: 115px;     /* Pushes the span to the right, past the image */
+    margin-right: auto;
+    font-size: 35px;
+   }
+   .header-image img{
+    width:120%;
+   }
+   .main-section1{
+    display: flex;
+    flex-direction: column;
+    background-color:#F3EAE2;
+    padding: 40px;
+   }
+   .main-section1 p{
+    margin-top: 0px;
+    margin-bottom:50px;
+    text-align: center;
+    font-size: 35px;
+   }
+   .main-section1-images{
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    align-items: center;
+    gap: 20px;
+    padding: 10px;    
+    margin-bottom: 20px;     
+   }
+    .main-section1-images img {
+       padding-bottom: 20px;
+       width: calc(25% - 15px);
+       height: 100px;
+    }
+    .main-section2{
+        align-items: center;
+        justify-content: center;
+        margin-bottom: 90px;
+    }
+    .main-section2 h3 ,span{
+       font-size:60px;
+       text-align: center;
+       color: #540B51;
+       font-weight: bold;
+    }
+    .main-section2 ul li {
+        list-style-type: none;
+    }
+    .main-section2 h3 + p{
+        font-size:35px;
+        text-align: center;
+        padding-left: 30px;
+        padding-right: 30px;
+    }
+    .main-section2 li p{
+        font-size:35px;
+        text-align: center;
+        padding-left: 50px;
+        padding-right: 50px;
+    }
+    .digital-HQ{
+        display: flex;
+        flex-direction: column;
+    }
+    .digital-HQ h3{
+        margin: 25px 35px 40px 35px;
+        padding-top: 30px;
+        text-align:center;
+        font-size:55px;
+        color: white;
+    }
+    .digital-HQ h3 + button{
+        text-align: center;
+        margin-bottom: 30px;
+        padding:21px 60px;
+        font-size: 35px;
+        color: #540B51;
+        margin-left: 25px;
+        margin-right: 25px;
+        border-radius: 10px;
+    }
+    .digital-HQ-button{
+        border: 2px solid white;
+        text-align: center;
+        margin-bottom: 85px;
+        padding:21px 60px;
+        font-size: 35px;
+        color: white;
+        background-color: #540B51; ;
+        margin-left: 25px;
+        margin-right: 25px;
+        border-radius: 10px;
+    }
+    .footer-first-ul{
+        margin-top: 100px;
+        margin-bottom: 50px;
+        list-style-type: none;
+        display: flex;
+        flex-direction: column;
+        font-size: 25px;
+        gap: 40px;
+    }
+    .footer-second-ul{
+       margin-bottom: 20px;
+       list-style-type: none;
+       margin-left: 0px;
+       margin-right: 0px;
+       padding-left: 0px;
+       padding-right: 0px;
+       gap: 120px;
+       display: flex;
+       justify-content: space-around;
+    }
+    .small{
+        display: inline-block;
+        align-items: center;
+        font-size: 22px;
+        text-align: start;
+        padding: 40px;
+        justify-content: center;
+        color: #7e5b7e;
+    }
+}
+@media (min-width: 768px) and (max-width: 1024px) {
+  /* styles here */ 
+    nav{
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+  }
+  nav div img{
+    width: 130px;
+    padding: 20px;
+  }
+  nav ul{
+     display: none;
+  }
+  .btn{
+    display: flex;
+    gap: 80px;
+    background: none;
+    border: none;
+    margin-right: 30px;
+  }
+  .btn img{
+    width: 40px;
+    height: 40px;
+    padding: 0;
+    border: none;
+    background-color: #540B51;
+   
+  }
+  header{
+    display: flex;
+    justify-content: space-between; /* left content + right image */
+    align-items: center;            /* vertical middle */
+    gap: 2rem;  
+  }
+  header > div:first-child{
+    flex: 0 0 70%;                  /* grow 0, shrink 0, basis 60% */
+  }
+  header div h1{
+    margin: 0px 30px 0px 30px;
+    padding-top: 60px;
+    text-align:start;
+    font-size:80px;
+  }
+  header div p{
+    margin-left: 30px;
+    text-align: start;
+    font-size: 25px;
+    color:rgb(215, 188, 188);
+  }
+  .header-signup{
+    display: grid;
+    gap: 15px;
+  }
+  .header-image img{
+    max-width: 200%;
+  }
+  .header-first-btn{
+    text-align: center;
+    padding:15px 50px;
+    font-size: 30px;
+    color: #540B51;
+    margin-left: 25px;
+    margin-right: 25px;
+    border-radius: 10px;
+  }
+  .header-second-btn{
+    display: flex;
+    align-items: center;
+    margin-left: 25px;
+    margin-right: 25px;
+    margin-bottom: 70px;
+    border-radius: 10px;
+    background-color: #4285F4;
+  }
+  .header-second-btn img{
+     margin: 7px 7px 7px 7px;
+     padding: 12px;
+     background-color: white;
+     border-radius: 5%;
+     width: 35px;
+  }
+   .header-second-btn span{
+    padding:15px 0px;
+    color:white;
+    margin-left: 90px;     /* Pushes the span to the right, past the image */
+    margin-right: auto;
+    font-size: 25px;
+   }
+   
+   .main-section1{
+    display: flex;
+    flex-direction: column;
+    background-color:#F3EAE2;
+    padding: 40px;
+   }
+   .main-section1 p{
+    margin-top: 0px;
+    margin-bottom:50px;
+    text-align: center;
+    font-size: 30px;
+   }
+   .main-section1-images{
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    gap: 10px;
+    padding: 10px;    
+    margin-bottom: 20px;     
+   }
+    .main-section1-images img {
+       padding-bottom: 20px;
+       width: calc(25% - 60px);
+       height: 100px;
+    }
+    .main-section2{
+        align-items: center;
+        justify-content: center;
+        margin-bottom: 90px;
+    }
+    .main-section2 h3 ,span{
+       font-size:60px;
+       text-align: center;
+       color: #540B51;
+       font-weight: bold;
+    }
+    .main-section2 ul{
+      display: flex;
+      justify-content: space-between;
+      gap: 40px;
+    }
+    .main-section2 ul li {
+        list-style-type: none;
+    }
+    .main-section2 h3 + p{
+        font-size:35px;
+        text-align: center;
+        padding-left: 30px;
+        padding-right: 30px;
+    }
+    .main-section2 li >p{
+        font-size:35px;
+        text-align: center;
+        padding-left: 0px;
+        padding-right: 0px;
+    }
+    .main-section2 li >p:nth-child(2) {
+        font-size:25px;
+        text-align: start;
+        padding-left: 50px;
+        padding-right: 50px;
+    }
+    .digital-HQ{
+        display: flex;
+        flex-direction: column;
+    }
+    .digital-HQ h3{
+        margin: 25px 35px 40px 35px;
+        padding-top: 30px;
+        text-align:center;
+        font-size:55px;
+        color: white;
+    }
+    .digital-HQ h3 + button{
+        text-align: center;
+        margin-bottom: 30px;
+        padding:21px 60px;
+        font-size: 25px;
+        color: #540B51;
+        margin-left: 30px;
+        margin-right: 25px;
+        border-radius: 10px;
+    }
+    .digital-HQ-button{
+        border: 2px solid white;
+        text-align: center;
+        margin-bottom: 85px;
+        padding:21px 60px;
+        font-size: 25px;
+        color: white;
+        background-color: #540B51; ;
+        margin-left: 30px;
+        margin-right: 25px;
+        border-radius: 10px;
+    }
+    .footer-first-ul{
+        display: flex;
+        margin-top: 100px;
+        margin-bottom: 50px;
+        list-style-type: none;
+        justify-content: space-around;
+        font-size: 18px;
+        font-family: bold;
+        gap:20px;
+    }
+    .footer-second-ul{
+       margin-bottom: 20px;
+       list-style-type: none;
+       margin-left: 0px;
+       margin-right: 0px;
+       padding-left: 0px;
+       padding-right: 0px;
+       gap: 70px;
+       display: flex;
+       justify-content: start;
+    }
+    .small{
+        display: inline-block;
+        align-items: center;
+        font-size: 15px;
+        text-align: start;
+        padding: 20px;
+        justify-content: center;
+        color: #7e5b7e;
+    }
+  
+}
\ No newline at end of file
