diff --git a/index.html b/index.html
index 8300a1607..47f87bb55 100644
--- a/index.html
+++ b/index.html
@@ -7,6 +7,7 @@
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <script src="https://use.fontawesome.com/1fb0eb3889.js"></script>
   <title>Where work happens | Slack</title>
+  <link rel="stylesheet"  href="/stylesheets/style.css" />
 </head>
 
 <body>
@@ -22,15 +23,15 @@
   <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>
-    <p>Already using Slack? <a href="#">Sign in</a></p>
+    <p class = "paragraph">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" class="regular-button"><span>GET STARTED</span></button>
+    <p class="small-font">Already using Slack? <a href="#">Sign in</a></p>
   </header>
   <main>
-    <div>
+    <div id="good-company">
       <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>
+      <p class = "paragraph">Millions of people around the world have already made Slack the place where their work happens.</p>
+      <button><span>DISCOVER WHY</span></button>
       <img src="./images/airbnb-logo.png" alt="">
       <img src="./images/capital-one-logo.png" alt="">
       <img src="./images/harvard-logo.png" alt="">
@@ -38,14 +39,14 @@ <h2>You´re in good company</h2>
       <img src="./images/oracle-logo.png" alt="">
       <img src="./images/ticketmaster-logo.png" alt="">
     </div>
-    <div>
-      <p>Try it for free</p>
-      <p>Already using Slack? <a href="">Sign in</a></p>
-      <button type="button" name="button">GET STARTED</button>
+    <div id="try-free">
+      <p class="paragraph">Try it for free</p>
+      <p class="small-font">Already using Slack? <a href=""><span>Sign in</span></a></p>
+      <button type="button" name="button" class="regular-button"><span>GET STARTED</span></button>
     </div>
   </main>
   <footer>
-    <div>
+    <div id= "lists">
       <img src="./images/iso-slack.png" alt="">
       <ul>
         <li>COMPANY</li>
diff --git a/stylesheets/style.css b/stylesheets/style.css
index cff873eb2..3f7d9cbe3 100644
--- a/stylesheets/style.css
+++ b/stylesheets/style.css
@@ -1,7 +1,139 @@
-/*
-background-grey: #F4F3F4;
-button-purple: #192592
-main-titles dark-grey: #2C303F;
-paragraph grey: #5b5e6d;
-nav grey: #5b5e6d;
-*/
+
+*{
+  margin:0;
+  padding:0;
+}
+
+
+@media (max-width: 768px) {
+ 
+  body{
+    
+    display:flex;
+    flex-wrap: wrap;
+  }
+
+  nav{
+    height:70px;
+    width:100%;
+    background-color:white;
+    position:fixed;
+    top:0;
+    display: flex;
+    align-items: center;
+  }
+   nav img{
+    width: 80px;
+    height: 50px;
+    margin-left: 2%;
+  }
+  nav ul{
+    display:none;
+  }
+  nav ul li{
+    display: inline-block;
+  }
+  
+
+  header{
+    width: 100%;
+    padding: 80px 20px 20px 20px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+   }
+  header h1{
+    font-size: 50px;
+  }
+  .paragraph{
+    font-size: 25px;
+    padding: 40px 0;
+  }
+  .regular-button{
+    width: 100%;
+    background-color: navy;
+    height: 50px;
+    border: none;
+  }
+  header button > span{
+    color:white;
+    font-size:15px;
+  }
+  .small-font {
+    font-size:20px;
+    padding: 10px 0;
+  }
+  header img{
+    order: 4;
+    max-width:100%;
+    height:auto;
+    padding: 50px 0;
+  }
+  
+  
+  #good-company{
+    background-color: lightgray;
+    display:flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    padding: 20px;
+  }
+  #good-company  h2{
+   font-size:30px;
+    padding-top: 30px;
+  }
+  #good-company button{
+    width: 100%;
+    background-color:white;
+    height: 50px;
+    border:2px solid navy;
+  }
+  #good-company button > span{
+    font-weight: 800;
+    color: navy;
+  }
+  #good-company img{
+    height:100%;
+    width:200px;
+    padding:50px;
+  }
+
+
+  #try-free{
+    display:flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    padding: 20px;
+  }
+  #try-free span{
+    color:white;
+    font-size:15px;
+  }
+  #try-free p.small-font{
+    order:+2;
+  }
+
+ #lists {
+    display:flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    padding: 20px;
+    background-color: red;
+ }
+ #lists ul{
+
+ }
+ #lists ul li{
+  
+ }
+
+
+
+  
+
+
+
+
+
+  
+}
\ No newline at end of file
