diff --git a/index.html b/index.html
index 8300a1607..73c35eac8 100644
--- a/index.html
+++ b/index.html
@@ -5,47 +5,50 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <link rel="stylesheet" href="stylesheets/style.css">
   <script src="https://use.fontawesome.com/1fb0eb3889.js"></script>
+  <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Slabo+27px" rel="stylesheet">
   <title>Where work happens | Slack</title>
 </head>
 
 <body>
-  <nav>
+  <nav class="nav-bar">
     <img src="./images/slack-logo.png" alt="slack_logo">
-    <ul>
+    <ul class="menu">
       <li>Why Slack?</li>
       <li>Pricing</li>
       <li>About Us</li>
       <li>Your Workspaces</li>
     </ul>
   </nav>
-  <header>
+  <header class="intro">
     <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>
+    <button class="extra start" type="button" name="button">GET STARTED</button>
+    <p class="note">Already using Slack? <a href="#">Sign in</a></p>
   </header>
-  <main>
-    <div>
+  <main class="container">
+    <div class="content">
       <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="">
+      <button class="extra discover">DISCOVER WHY</button>
+      <img class="partner" src="./images/airbnb-logo.png" alt="">
+      <img class="partner" src="./images/harvard-logo.png" alt="">
+      <img class="partner" src="./images/capital-one-logo.png" alt="">
+      <img class="partner" src="./images/los-angeles-times-logo.png" alt="">
+      <img class="partner" src="./images/oracle-logo.png" alt="">
+      <img class="partner" src="./images/ticketmaster-logo.png" alt="">
     </div>
-    <div>
+    <div class="apply">
       <p>Try it for free</p>
-      <p>Already using Slack? <a href="">Sign in</a></p>
-      <button type="button" name="button">GET STARTED</button>
+      <p class="note">Already using Slack? <a href="">Sign in</a></p>
+      <button class="extra start" type="button" name="button">GET STARTED</button>
     </div>
   </main>
-  <footer>
-    <div>
+  <footer class="footer">
+    <div class="navigator">
       <img src="./images/iso-slack.png" alt="">
       <ul>
         <li>COMPANY</li>
@@ -80,19 +83,23 @@ <h2>You´re in good company</h2>
         <li>Slack Fund</li>
       </ul>
     </div>
-    <div>
+    <div class="final-part">
       <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="fa fa-chevron-down" aria-hidden="true"></i>
-        <i class="fa fa-twitter" aria-hidden="true"></i>
-        <i class="fa fa-facebook" aria-hidden="true"></i>
-        <i class="fa fa-youtube-play" aria-hidden="true"></i>
+        <div class="lang">
+          <img src="./images/us-flag.png" alt="">
+          <span>English (US)</span>
+          <i class="fa fa-chevron-down" aria-hidden="true"></i>
+        </div>
+        <div>
+          <i class="fa fa-twitter icon" aria-hidden="true"></i>
+          <i class="fa fa-facebook icon" aria-hidden="true"></i>
+          <i class="fa fa-youtube-play icon" aria-hidden="true"></i>
+        </div>
       </div>
     </div>
   </footer>
diff --git a/stylesheets/style.css b/stylesheets/style.css
index cff873eb2..a7ed137d7 100644
--- a/stylesheets/style.css
+++ b/stylesheets/style.css
@@ -1,7 +1,248 @@
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+  vertical-align: baseline;
+  font-family: 'Nunito', sans-serif;
+  color: #5b5e6d;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
 /*
 background-grey: #F4F3F4;
 button-purple: #192592
 main-titles dark-grey: #2C303F;
 paragraph grey: #5b5e6d;
 nav grey: #5b5e6d;
+font-family: 'Nunito', sans-serif;
+font-family: 'Slabo 27px', serif;
 */
+
+@media (max-width: 768px){
+
+/******** nav bar ********/
+
+.nav-bar{
+  position: fixed;
+  background: white;
+  width: 100%;
+  padding-left: 20px;
+  height: 70px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 2px solid #F4F3F4;
+}
+
+.nav-bar img{
+  height: 50px;
+}
+
+.nav-bar ul li{
+  width: 100%;
+  display: none;
+}
+
+/************* header *************/
+
+.intro{
+  display: flex;
+  flex-direction: column;
+  padding: 80px 20px 20px;
+}
+
+.intro h1{
+  font-size: 30px;
+  font-family: 'Slabo 27px', serif;
+  font-weight: bold;
+  padding-right: 120px;
+  line-height: 1em;
+  margin-bottom: 20px;
+  color: #2C303F;
+}
+
+.intro p{
+  padding-bottom: 20px;
+}
+
+.extra{
+  width: 100%;
+  height: 50px;
+  border-radius: 4px;
+  margin: 10px 15px 10px 0;
+  padding-left: 15px;
+}
+
+.start{
+  background-color: #192592;
+  color: white;
+}
+
+.note{
+  font-size: 0.7em;
+  text-align: center;
+}
+
+.note a{
+  color: #192592;
+}
+
+.intro img{
+  width: 100%;
+  order: 1;
+}
+/***********
+** main *************/
+
+.container{
+  display: flex;
+  flex-direction: column;
+}
+
+.content{
+  background: #F4F3F4;
+  padding: 20px
+}
+
+h2{
+  font-size: 20px;
+  font-weight: bold;
+  text-align: center;
+  color: #2C303F;
+}
+
+.content p {
+  text-align: center;
+  padding: 20px 0;
+}
+
+.discover{
+  background: white;
+  color:  #192592;
+  border: 1px solid  #192592; 
+  font-weight: bold;
+}
+
+.partner{
+  width: 50%;
+  padding: 20px 25%;
+  border-bottom: 1px solid #5b5e6d;
+}
+
+.apply{
+  flex-direction: column; 
+  text-align: center;
+  padding: 30px 20px;
+  border: 1px solid #F4F3F4;
+}
+
+.apply p:first-child{
+  font-family: 'Slabo 27px', serif;
+  font-weight: bold;
+  padding-bottom: 5px;
+}
+
+/********** Footer ***********/
+footer{
+  display: flex;
+  flex-direction: column;
+}
+
+.navigator{
+ 
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  padding: 10px 20px;
+}
+
+.navigator img{
+  width: 30%;
+  height: 30%;
+  margin-right: 70%
+}
+
+.navigator ul {
+  width: 50%;
+}
+
+.navigator ul li{
+  margin: 15px 0;
+}
+
+.navigator ul li:first-child{
+  font-weight: bold;
+  color: #2C303F;
+}
+
+
+/******* final-part *******/
+
+.final-part{
+  background: #F4F3F4;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-size: 0.9em;
+}
+
+.final-part ul{
+  text-align: center;
+  font-weight: bold;
+  width: 100%;
+  margin-top: 10px;
+}
+
+.final-part ul li{
+  display: inline;
+  margin: 5px;
+}
+
+.lang{
+  margin: 20px 0;
+}
+
+.lang img{
+  width: 12px;
+  height: auto;
+}
+
+.icon{
+  margin: 0 10px 10px;
+}
+}
\ No newline at end of file
