diff --git a/MyNotes/mynotes.txt b/MyNotes/mynotes.txt
new file mode 100644
index 0000000..a415636
--- /dev/null
+++ b/MyNotes/mynotes.txt
@@ -0,0 +1,75 @@
+My notes to initiate PR
+
+Iteration 1 | Extra Small Screen (width < 768px)
+
+1. header section=> slack-logo, hambuger (Sticky)
+2. section-hero-1 => h2, article, div(email, button-(get started) - Already using? sign-in(underlined-txt))
+3. section-hero-2 => div-img(#project-mobile), h2, para, div-button-Discover Way, div-list-of-Company-Icons(1-by-1), div-(Try-it for-free,  Already using? sign-in(underlined-txt), email-address-box, button-get-started).
+4. section-hero-3: Slack-ICON at the top
+   Lists:
+   h3-Company-list(below-list-items), h3-Products-list(below-list-items),
+   h3-Resources-list(below-list-items), h3-Extras-list(below-list-items),
+5. Footer:
+    h4 => ul-lis: status, privacy & Terms, Contact US
+        ul-lis: US-flag, English(US), Down-Arrow-ICON
+        ul-lis: twitter-icon, fb-icon, yt-icon
+
+
+
+
+
+Iteration 2 | Small Screen (961px > width > 767px):
+
+1. header section=> slack-logo, hambuger (Sticky)
+2. section-hero-1 =>
+  h2,
+  article,
+  div(email, button-(get started)
+  - Already using? sign-in(underlined-txt))
+3. section-hero-2 => div-img(#project-mobile),
+4. h2(you're in) ,
+   para(millions),
+   div-button-Discover Why,
+   div-list-of-Company-Icons(1-by-1)-IMP-ONLY 2 ICONS***
+5. div-(Try-it for-free,  Already using? sign-in(underlined-txt), email-address-box, button-get-started).
+6. section-hero-3:
+   Slack-ICON at the top-left, Lists: h3-Company-list(below-list-items), h3-Products-list(below-list-items), h3-Resources-list(below-list-items), h3-Extras-(below-list-items),
+5. Footer:
+    h4 => div-(ul-lis: status, privacy & Terms, Contact US),  div(ul-lis: US-flag, English(US), Down-Arrow-ICON), div(ul-lis: twitter-icon, fb-icon, yt-icon)
+
+
+Iteration 3 | Medium Screen (1024px > width > 960px)
+
+4. h2(you're in) ,
+   para(millions),
+   div-button-Discover Why,
+   div-list-of-Company-Icons(1-by-1)-IMP-ONLY 3 ICONS***
+5. div-(Try-it for-free,                   Div(email-address-box, div(button-get-started))
+  Already using? sign-in(underlined-txt))
+
+
+Iteration 4 | Large Screen (width > 1200px)
+
+1. header section=> slack-logo -left, IMP***=> Hamburger-Now is UL-list(Why Slack? Pricing, About US, button(Your Workspaces))
+2. section-hero-1 =>
+  => ON LEFT-side:-----> div-img(#project-mobile).
+  => ON RIGHT-Side:
+  h1, BOLD Heading
+  article,
+  div(button-(get started)
+  - Already using? sign-in(underlined-txt))
+
+4. h2(you're in) ,
+   para(millions),
+   div-button-Discover Why,
+   div-list-of-Company-Icons(1-by-1)-IMP-ONLY 3 ICONS***
+5. div-(Try-it for-free,                   large space(WIDTH)  div(button-get-started)
+  Already using? sign-in(underlined-txt))
+6. section-hero-3:
+   Slack-ICON at the top-left, large space(WIDTH)  Lists: h3-Company-list(below-list-items), h3-Products-list(below-list-items), h3-Resources-list(below-list-items), h3-Extras-(below-list-items),
+5. Footer:
+    h4 => div-(ul-lis: status, privacy & Terms, Contact US), large space(WIDTH) div(ul-lis: US-flag, English(US), Down-Arrow-ICON), div(ul-lis: twitter-icon, fb-icon, yt-icon)
+
+
+
+
diff --git a/starter_code/images/ci_hamburger.svg b/starter_code/images/ci_hamburger.svg
new file mode 100644
index 0000000..c7d3c53
--- /dev/null
+++ b/starter_code/images/ci_hamburger.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21 18H3V16H21V18ZM21 13H3V11H21V13ZM21 8H3V6H21V8Z" fill="black"/>
+</svg>
diff --git a/starter_code/index.html b/starter_code/index.html
index 20bbd35..295a901 100644
--- a/starter_code/index.html
+++ b/starter_code/index.html
@@ -17,49 +17,138 @@
   </head>
 
   <body>
-    <nav>
-      <img src="./images/slack-logo.png" alt="slack_logo" />
-      <ul>
-        <li>Why Slack?</li>
-        <li>Pricing</li>
-        <li>About Us</li>
-        <li>Your Workspaces</li>
-      </ul>
+    <nav class="top-header">
+      <div class="slack-header-logo">
+        <img
+          src="./images/slack-logo.png"
+          alt="slack_logo"
+          class="header-slack-logo"
+        />
+      </div>
+      <div class="nav-items-desktop">
+        <ul>
+          <li>Why Slack?</li>
+          <li>Pricing</li>
+          <li>About Us</li>
+          <button class="your-workspace-button">Your Workspaces</button>
+        </ul>
+      </div>
+      <div class="hamburger-icon">
+        <img
+          src="./images/ci_hamburger.svg"
+          alt=""
+          srcset=""
+          class="hamburg-icon"
+        />
+      </div>
     </nav>
-    <header>
-      <img src="./images/home_talking.png" alt="home_work_happening" />
-      <h1>Where Work Happens</h1>
-      <p>
-        When your team needs to kick off a project, hire a new employee, deploy
-        some code, review a sales contract, finalize next year's budget, measure
-        an A/B test, plan your next office opening, and more, Slack has you
-        covered.
-      </p>
-      <button type="button" name="button">GET STARTED</button>
+    <header class="hero-1">
+      <div class="hero-img-projectMobile">
+        <img
+          src="./images/home_talking.png"
+          alt="home_work_happening"
+          class="project-mobile-img"
+        />
+      </div>
+      <div class="heading-whereWork">
+        <h1 class="whereWork-heading">Where Work Happens</h1>
+      </div>
+      <article class="hero-1-para">
+        <p class="hero-1-article-para">
+          When your team needs to kick off a project, hire a new employee,
+          deploy some code, review a sales contract, finalize next year's
+          budget, measure an A/B test, plan your next office opening, and more,
+          Slack has you covered.
+        </p>
+      </article>
+      <div class="email-form">
+        <form action="" class="email-form">
+          <input
+            type="email"
+            name=""
+            id=""
+            class="default-email-txt"
+            placeholder="Email address"
+          />
+        </form>
+      </div>
+      <div class="hero-1-button">
+        <button type="button" name="button" class="hero-1-button-get-started">
+          GET STARTED
+        </button>
+      </div>
       <p>Already using Slack? <a href="#">Sign in</a></p>
     </header>
-    <main>
-      <div>
-        <h2>You're in good company</h2>
-        <p>
-          Millions of people around the world have already made Slack the place
-          where their work happens.
-        </p>
-        <button>DISCOVER WHY</button>
-        <img src="./images/airbnb-logo.png" alt="" />
-        <img src="./images/capital-one-logo.png" alt="" />
-        <img src="./images/harvard-logo.png" alt="" />
-        <img src="./images/los-angeles-times-logo.png" alt="" />
-        <img src="./images/oracle-logo.png" alt="" />
-        <img src="./images/ticketmaster-logo.png" alt="" />
+    <main class="hero-2">
+      <div class="section-hero-2">
+        <div class="hero-2-heading">
+          <h2 class="heading-hero-2">You're in good company</h2>
+        </div>
+        <div class="hero-2-para">
+          <p class="para-hero-2">
+            Millions of people around the world have already made Slack the
+            place where their work happens.
+          </p>
+        </div>
+        <div class="hero-2-button">
+          <button class="button-hero-2">DISCOVER WHY</button>
+        </div>
+        <div class="hero-2-company-logos">
+          <div class="hero-2-logo-airbnb">
+            <img src="./images/airbnb-logo.png" alt="" class="logo-airbnb" />
+          </div>
+          <div class="hero-2-logo-capital-one">
+            <img
+              src="./images/capital-one-logo.png"
+              alt=""
+              class="logo-capital-one"
+            />
+          </div>
+          <div class="hero-2-logo-harvard">
+            <img src="./images/harvard-logo.png alt=" class="logo-harvard" />
+          </div>
+          <div class="hero-2-logo-la-times">
+            <img
+              src="./images/los-angeles-times-logo.png"
+              alt=""
+              class="logo-la-times"
+            />
+          </div>
+          <div class="hero-2-logo-oracle">
+            <img src="./images/oracle-logo.png" alt="" class="logo-oracle" />
+          </div>
+          <div class="hero-2-logo-ticketmaster">
+            <img
+              src="./images/ticketmaster-logo.png"
+              alt=""
+              class="logo-ticketmaster"
+            />
+          </div>
+        </div>
       </div>
-      <div>
-        <p>Try it for free</p>
+
+      <div class="hero-2-try-free">
+        <p class="try-for-free">Try it for free</p>
         <p>Already using Slack? <a href="">Sign in</a></p>
-        <button type="button" name="button">GET STARTED</button>
+        <div class="email-form">
+          <form action="" class="email-form">
+            <input
+              type="email"
+              name=""
+              id=""
+              class="default-email-txt"
+              placeholder="Email address"
+            />
+          </form>
+        </div>
+        <div class="hero-2-get-button">
+          <button type="button" name="button" class="get-started-button">
+            GET STARTED
+          </button>
+        </div>
       </div>
     </main>
-    <footer>
+    <footer class="final-footer">
       <div>
         <img src="./images/iso-slack.png" alt="" />
         <ul>
@@ -95,19 +184,23 @@ <h2>You're in good company</h2>
           <li>Slack Fund</li>
         </ul>
       </div>
-      <div>
-        <ul>
+      <div class="footer-bottom">
+        <ul class="footer-left-ul">
           <li>Status</li>
           <li>Privacy & Terms</li>
           <li>Contact Us</li>
         </ul>
-        <div>
-          <img src="./images/us-flag.png" alt="" />
-          <span>English (US)</span>
-          <i class="fas fa-chevron-down"></i>
-          <i class="fab fa-twitter"></i>
-          <i class="fab fa-facebook-f"></i>
-          <i class="fab fa-youtube"></i>
+        <div class="footer-right-ul">
+          <div class="footer-right-ul-usflag">
+            <img src="./images/us-flag.png" alt="" />
+            <span>English (US)</span>
+            <i class="fas fa-chevron-down"></i>
+          </div>
+          <div class="footer-right-ul-social-icons">
+            <i class="fab fa-twitter"></i>
+            <i class="fab fa-facebook-f"></i>
+            <i class="fab fa-youtube"></i>
+          </div>
         </div>
       </div>
     </footer>
diff --git a/starter_code/stylesheets/style.css b/starter_code/stylesheets/style.css
index cff873e..ce8f18b 100644
--- a/starter_code/stylesheets/style.css
+++ b/starter_code/stylesheets/style.css
@@ -5,3 +5,53 @@ main-titles dark-grey: #2C303F;
 paragraph grey: #5b5e6d;
 nav grey: #5b5e6d;
 */
+
+*{
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.top-header{
+  display: grid;
+}
+
+.slack-header-logo{
+  grid-area: slack-header-logo;
+}
+.header-slack-logo{
+  width: 8rem;
+}
+
+.nav-items-desktop {
+  grid-area: nav-items-desktop;
+}
+
+.hamburger-icon{
+  grid-area: hamburger-icon;
+
+}
+
+.hamburg-icon{
+  width: 2rem;
+  color: lightgrey;
+}
+
+/*Break points:*/
+@media (max-width:768px)  {
+.top-header {
+    grid-template-columns: auto 1fr;
+    grid-template-rows: 1fr;
+    grid-template-areas: "slack-header-logo hamburger-icon";
+    column-gap: 40%;
+    justify-items: center;
+    align-items: center;
+    padding: 1rem 1rem;
+    margin: 1rem 1rem;
+  }
+ }
+@media (min-width:767px) { /* big landscape tablets, laptops, and desktops */ }
+@media (min-width:961px) {
+  /* tablet, landscape iPad, lo-res laptops ands desktops */
+}
+@media (min-width:1200px) { /* hi-res laptops and desktops */ }
\ No newline at end of file
