behind work will finish tomorrow.

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5502
+}

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.
 
 
 

css/index.css

@@ -1 +1,300 @@
-/* LESS needs to be processed */
+/* 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;
+}

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>
 
 
 

less/footer.less

@@ -7,6 +7,6 @@
     text-align: center;
     color: @font-color;
     font-size: 1.6rem;
-    padding: 20px;
+    padding: 30px;
   }
 }