diff --git a/starter_code/index.html b/starter_code/index.html
index 2f593610f..2d82c3857 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="logo-box">
+      <img id="slack-logo" src="./images/slack-logo.png" alt="Slack logo" />
 
-      <ul>
+      <ul hidden>
         <li>
           <a href="#">Product</a>
         </li>
@@ -38,9 +38,9 @@
       </ul>
     </div>
 
-    <div>
+    <div id="search-box">
       <button>
-        <img src="./images/icon-search.png" alt="Search icon">
+        <img id="zzz" src="./images/icon-search.png" alt="Search icon">
       </button>
 
       <button>
@@ -64,29 +64,30 @@
     <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 style="color: orange;">Slack is free to try</span> for as long as you'd like.</p>
 
-      <div>
-        <button>Sign up with email</button>
+      <div id="signup-buttonbox">
+        <button id="email-signup">Sign up with email</button>
 
-        <button>
-          <img src="./images/logo-google.png" alt="Google logo" />
-          <span>Sign up with Google</span>
+        <button id="google-signup">
+          <img id="google-logo" src="./images/logo-google.png" alt="Google logo" />
+          <span >Sign up with Google</span>
+          <span></span>        
         </button>
       </div>
 
     </div>
 
-    <div>
-      <img src="./images/hero-product-ui.png" alt="Slack app screenshot" />
+    <div >
+      <img src="./images/hero-product-ui.png" alt="Slack app screenshot" id="second-img"/>
     </div>
   </header>
 
   <main>
-    <section>
+    <section class="first_section">
       <p>Trusted by companies all over the world</p>
 
-      <div>
+      <div class="logos-box">
         <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 +98,7 @@ <h1>Great teamwork starts with a digital HQ</h1>
 
     </section>
 
-    <section>
+    <section class="second_section">
       <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 +130,17 @@ <h3>Teams large and small rely on Slack</h3>
       </ul>
     </section>
 
-    <section>
+    <section class="third_section">
       <h3>Welcome to your new digital HQ</h3>
 
-      <button>Try for free</button>
-      <button>Talk to sales</button>
+      <button class="button-try">Try for free</button>
+      <button class="button-talk">Talk to sales</button>
     </section>
 
   </main>
 
   <footer>
-    <ul>
+    <ul class="footer_list">
       <li>Status</li>
       <li>Privacy</li>
       <li>Terms</li>
@@ -151,7 +152,7 @@ <h3>Welcome to your new digital HQ</h3>
 
     <hr>
 
-    <ul>
+    <ul class="social">
       <li>
         <i class="fab fa-twitter"></i>
       </li>
@@ -167,7 +168,7 @@ <h3>Welcome to your new digital HQ</h3>
     </ul>
 
     <div>
-      <small>
+      <small class="copyright">
         &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..e70a3b409 100644
--- a/starter_code/stylesheets/style.css
+++ b/starter_code/stylesheets/style.css
@@ -8,3 +8,255 @@ paragraph yellow: #ECB12F
 links blue: #2E71A6
 footer links grey: #454245
 */
+
+* {
+    margin: 0;
+    padding: 0; 
+    box-sizing: border-box;
+}
+
+body {
+    background-color: #540b51;
+    display: flex;
+    flex-direction: column;
+    font-family: "Helvetica", sans-serif;
+    width: 100%; 
+}
+
+nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 50px;
+  }
+  #slack-logo {
+    height: 25px;
+    width: 100px;
+  }
+
+  #logo-box {
+    margin-left: 5%;
+  }
+  #search-box {
+    margin-right: 5%;
+  }
+  #search-box button {
+    background: none;
+    color: inherit;
+    border: none;
+  }
+
+  header {
+    margin-top: 5%;
+   }
+
+   
+h1 {
+    font-size: 50px;
+    text-align: center;
+    color: white;
+  }
+
+  header p {
+    color: white;
+    text-align: center;
+    font-weight: 600;
+  }
+
+  #signup-buttonbox {
+    display: flex;
+    flex-direction: column;
+    margin: 45px 15px;
+    justify-content :space-between;
+    height: 100px;
+  }
+
+  #email-signup {
+    background-color: white;
+    text-transform: uppercase;
+    height: 50%;
+    border-radius: 5px;
+    padding: 15px;
+    margin-bottom: 5px;
+  }
+
+  #google-signup {
+    background-color: #4285f4;
+    text-transform: uppercase;
+    border-radius: 5px;
+    padding: 5px 5px;
+    margin-top: 5px;
+    height: 50% ;
+    display: flex;
+    flex-direction: row;
+    justify-content :space-between;
+    align-items: center;
+
+  }
+
+#google-logo {
+    background: white;
+    border: none;
+    height: 100%;
+ }
+
+ #second-img{
+        max-width: 100%;
+        height: auto;
+        margin-top: 20px;
+ }
+
+ main {
+    background-color: #f3eae2;
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+ .first_section {
+    background-color: #f3eae2;
+    margin-bottom: 0px ;
+ }
+
+ .first_section p {
+    text-transform: uppercase;
+    padding: 35px ;
+    font-size: 1.2rem;
+    text-align: center;
+    font-weight: 750;
+ }
+
+
+ .logos-box {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    align-items: center;
+    margin: auto;
+    padding: 0 0 60px 0;
+ }
+
+ .logos-box img {
+    width: auto;
+    height: 60px;
+    padding: 2%;
+  }
+
+  .second_section {
+    background-color: white;
+    text-align: center;
+    margin-top: 0;
+    padding-bottom: ;
+  }
+  .second_section h3 {
+    font-size: 3rem;
+    padding: 10% 10% 0;
+  }
+  .second_section p {
+    font-size: 1.5rem;
+    font-weight: 750;
+    padding: 0 10%;
+  }
+  
+  
+  .button-try {
+    text-transform: uppercase;
+    background-color: white;
+    color: #540b51;
+    border: 2px solid #540b51;
+    border-radius: 5px;
+  
+    padding: 15px;
+    margin-top: 2%;
+  }
+
+  .button-talk {
+    text-transform: uppercase;
+    background-color: purple;
+    color: white;
+    border-radius: 5px;
+    border-color: #540b51;
+    padding: 15px;
+    margin-bottom: 5px;
+  }
+  
+  ul {
+    margin: 15% 0;
+    list-style-type: none;
+  }
+  
+  ul li {
+    margin: 10% 0;
+  }
+  
+  ul span {
+    color: #540b51;
+    font-size: 5rem;
+    font-weight: 200;
+  }
+  
+  ul p {
+    text-align: center;
+    font-weight: bold;
+    margin: 0 15%;
+  }
+
+  .third_section {
+    background-color: #540b51;
+    padding-top: 5%;
+    padding-bottom: 15%;
+    
+
+  }
+  
+  .third_section h3 {
+    text-align: center;
+    color: white;
+    font-size: 4rem;
+  }
+  
+
+
+
+
+  footer {
+    background-color: white;
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+
+  .footer_list {
+    margin-left: 30px;
+    font-weight: 800;
+  }
+
+  .social {
+    display: flex;
+    flex-direction:row;
+    justify-content: space-around;
+
+  }
+
+  .copyright {
+        text-align: center;
+  }
+
+
+
+
+
+
+
+
+
+  @media (min-width: 768px) and (max-width: 1024px) {
+    header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+  }
+  
+  
+  
\ No newline at end of file
