diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000000..f673a71b7a
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5502
+}
\ No newline at end of file
diff --git a/README.md b/README.md
index 8c6cbcf19f..6f80d03ab5 100644
--- a/README.md
+++ b/README.md
@@ -52,7 +52,7 @@ Follow these steps for completing your project.
 ## Stretch Goals: 
 * [ ] Create an animation mixin using parametric mixins
 * [ ] Introduce a form with inputs allowing users to select a vacation package and a submit button at the bottom of the page. Introduce inputs for name, email, phone number, and an area for them to leave special instructions. 
-* [ ] Style the site to look good at all sizes, not just desktop and phone
+* [ ] Style the site to look good at all sizes, not just desktop and phone.
 
 
 
diff --git a/css/index.css b/css/index.css
index e764f2b01f..04ef94a0d6 100644
--- a/css/index.css
+++ b/css/index.css
@@ -1 +1,300 @@
-/* LESS needs to be processed */
\ No newline at end of file
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+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;
+}
+/* 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;
+}
+* {
+  box-sizing: border-box;
+}
+html {
+  font-size: 62.5%;
+}
+html,
+body {
+  font-family: 'Roboto', sans-serif;
+}
+h1,
+h2,
+h3,
+h4,
+h5 {
+  font-family: 'Indie Flower', cursive;
+}
+h1 {
+  font-size: 4rem;
+}
+h2 {
+  font-size: 3.2rem;
+  padding-bottom: 10px;
+}
+h4 {
+  font-size: 2.5rem;
+  padding-bottom: 10px;
+}
+p {
+  line-height: 1.5;
+  font-size: 1.6rem;
+  padding-bottom: 10px;
+}
+img {
+  max-width: 100%;
+  height: auto;
+}
+.container {
+  max-width: 800px;
+  width: 100%;
+  margin: 0 auto;
+}
+nav {
+  display: flex;
+  width: 40%;
+  justify-content: space-around;
+  margin: 3% 2%;
+  font-size: 150%;
+}
+@media (min-width: 500px) {
+  nav {
+    width: 90;
+    margin-bottom: 0%;
+  }
+}
+.home .content-top {
+  width: 80%;
+  margin: 0 auto;
+  flex-direction: column;
+  border-bottom: 2px dashed #C0C0C0;
+}
+.home .content-top img {
+  margin-bottom: 2%;
+}
+.home .content-top .herotext p {
+  margin: 80%;
+  max-width: 30%;
+}
+.home .content-section {
+  margin: 30px 0;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+.home .content-section .text-content {
+  width: 48%;
+  padding-right: 1%;
+}
+.home .content-section .img-content {
+  width: 48%;
+  padding-left: 1%;
+}
+.home .content-section .img-content img {
+  border-radius: 10px;
+}
+@media (min-width: 500px) {
+  .home {
+    flex-direction: column;
+    flex-wrap: nowrap;
+    width: 100%;
+  }
+  .home .img-content {
+    width: 100%;
+    order: 2;
+    padding-left: 0;
+    display: flex;
+    align-items: stretch;
+    justify-content: flex-start;
+  }
+  .home .text-content {
+    width: 100%;
+    order: 1;
+    padding-left: 0;
+  }
+}
+.home .inverse-content {
+  padding-bottom: 30px;
+  border-bottom: 2px dashed #C0C0C0;
+}
+.home .inverse-content .text-content {
+  padding-left: 1%;
+  padding-right: 0;
+}
+.home .inverse-content .img-content {
+  padding-right: 1%;
+  padding-left: 0;
+}
+.home .content-destination {
+  width: 75%;
+  margin: 0 auto 30px;
+}
+.home .content-destination img {
+  border-radius: 10px;
+}
+.home .content-pick {
+  padding-top: 30px;
+  border-top: 2px dashed #C0C0C0;
+  display: flex;
+  justify-content: space-between;
+  /*media 500*/
+}
+.home .content-pick .destination {
+  width: 27%;
+  margin-bottom: 30px;
+}
+.home .content-pick .destination .btn {
+  padding-top: 8%;
+  padding-bottom: 8%;
+  height: auto;
+  width: 90%;
+  border-radius: 10px;
+  text-align: center;
+  font-size: 2rem;
+  background-color: #17A2B8;
+}
+@media (min-width: 500px) {
+  .home .content-pick .content-pick {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+  .home .content-pick .content-pick .destination {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    flex-direction: column;
+    flex-wrap: wrap;
+  }
+}
+.footer {
+  width: 100%;
+  border-top: 2px dashed silver;
+  background: #FFEBCD;
+}
+.footer p {
+  text-align: center;
+  color: #212529;
+  font-size: 1.6rem;
+  padding: 30px;
+}
diff --git a/index.html b/index.html
index bb8663b768..40d80ec20d 100644
--- a/index.html
+++ b/index.html
@@ -8,13 +8,34 @@
 
   <link href="https://fonts.googleapis.com/css?family=Indie+Flower|Roboto" rel="stylesheet">
   <link href="css/index.css" rel="stylesheet">
-
+  <!--Add meta tag-->
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!--[if lt IE 9]>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
   <![endif]-->
 </head>
 
 <body>
+  <div class="home">
+    <header>
+      
+      <h1>Fun Bus</h1>
+      <nav>
+        <p>Home</p>
+        <p>About Us</p>
+        <p>Blog</p>
+        <p>Contact </p>
+      </nav>
+  
+    </header>
+  </div>
+<section class="content-top">   
+          <img src="img/fun-bus.jpg" alt=""> 
+          <div class="herotext">
+          <h2>Welcome To Fun Bus!</h2>
+          <p>Traveling expedtion modren, clean webdesign blogger clean website theme website modrem. Design pretty design, travelblogger adventure Wordpress wanderlust theme blogger website expedtion theme travelblogger. Adverture fun traveler pretty design website expedition.</p>
+        </div>
+</section>
 
   
      
diff --git a/less/footer.less b/less/footer.less
index 71cff032e9..77b3419448 100644
--- a/less/footer.less
+++ b/less/footer.less
@@ -7,6 +7,6 @@
     text-align: center;
     color: @font-color;
     font-size: 1.6rem;
-    padding: 20px;
+    padding: 30px;
   }
 }
\ No newline at end of file
diff --git a/less/home-page.less b/less/home-page.less
index 5528d8a7a5..1a7d7a9fe9 100644
--- a/less/home-page.less
+++ b/less/home-page.less
@@ -1,5 +1,49 @@
 .home {
 
+   //header start
+
+   
+
+    .flexcorrect  (center, space-between){
+    flex-wrap: wrap;
+     border-bottom: 2px dashed @navigation-border;
+  
+     //media 500
+     @media @mobile{
+       flex-direction: column;
+  
+       h1 {
+         margin-top: 2%;
+       }
+     }
+}
+    
+    
+  // header end
+  
+  //top content start 
+  .content-top {
+    //.flexcorrect(flex-start,center);
+    width: 80%;
+    margin: 0 auto;
+    flex-direction: column;
+    border-bottom: 2px dashed @navigation-border;
+    img {
+     
+      margin-bottom: 2%;
+    }
+    .herotext{
+       p{
+        margin: 80%;
+      
+       max-width: 30%;
+
+      }
+    
+    }
+  }
+  
+  //top content end
   .content-section {
     margin: 30px 0;
     display: flex;
@@ -23,6 +67,28 @@
     }
   }
 
+  @media @mobile {
+    flex-direction: column;
+    flex-wrap: nowrap;
+    width: 100%;
+
+    .img-content {
+      width: 100%;
+      order: 2;
+      padding-left: 0;
+      .flexcorrect(stretch, flex-start);
+
+    }
+
+    .text-content {
+      width: 100%;
+      order: 1;
+      padding-left: 0;
+    }
+
+  }
+
+///////
   .inverse-content {
     padding-bottom: 30px;
     border-bottom: 2px dashed @navigation-border;
@@ -54,8 +120,31 @@
     justify-content: space-between;
 
     .destination {
-      width: 30%;
+      width: 27%;
       margin-bottom: 30px;
+      .btn{
+        .button();
+      }
     }
+        /*media 500*/
+@media @mobile {
+  .content-pick {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    
+
+    .destination {
+      width: 100%;
+      .flexcorrect(center, center);
+      text-align: center;
+      flex-direction: column;
+      flex-wrap: wrap;
+      
+      
+  }
+}
+  }
+
   }
-}// home
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/less/index.less b/less/index.less
index c113ca2c46..d1323fd3c0 100644
--- a/less/index.less
+++ b/less/index.less
@@ -1 +1,8 @@
 // Follow the order in the readme
+@import "reset";
+@import "mixins";
+@import "global";
+@import "variables";
+@import "navigation";
+@import "home-page";
+@import "footer";
\ No newline at end of file
diff --git a/less/mixins.less b/less/mixins.less
index 2d5c603558..69765f2733 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -1 +1,18 @@
-// Mixins in here
\ No newline at end of file
+// Mixins in here
+.button(){
+    padding-top: 8%;
+        padding-bottom: 8%;
+        height: auto;
+        width: 90%;
+        border-radius: 10px;
+        text-align: center;
+        font-size: 2rem;
+        background-color: @eastern-blue;
+}
+
+
+.flexcorrect (@align, @adjust){
+    display: flex;
+    align-items: @align;
+    justify-content:@adjust;
+}
\ No newline at end of file
diff --git a/less/navigation.less b/less/navigation.less
index f89120a0f1..1665c4cb70 100644
--- a/less/navigation.less
+++ b/less/navigation.less
@@ -1 +1,14 @@
-// Navigation Styles here
\ No newline at end of file
+// Navigation Styles here
+nav {
+    display: flex;
+    width: 40%;
+    justify-content: space-around;
+    margin: 3% 2%;
+    font-size: 150%;
+    
+
+@media @mobile {
+    width: 90;
+    margin-bottom: 0%;
+ }
+}
\ No newline at end of file
diff --git a/less/variables.less b/less/variables.less
index 916eb0b7e0..47f36d166a 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -11,4 +11,7 @@
 @silver: #C0C0C0;
 @shark: #212529;
 @eastern-blue: #17A2B8;
-@sandy-beach: #FFEBCD;
\ No newline at end of file
+@sandy-beach: #FFEBCD;
+
+//size
+@mobile: ~"(min-width: 500px)";
\ No newline at end of file