bloominstituteoftechnology · LatysawanePhommachack · May 27, 2020
diff --git a/adventure.jpg b/adventure.jpg
diff --git a/css/index.css b/css/index.css
@@ -1 +1,239 @@
-/* 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;
+  justify-content: space-between;
+}
+nav a {
+  text-decoration: none;
+  color: black;
+}
+.footer {
+  width: 100%;
+  border-top: 2px dashed #C0C0C0;
+  background: #FFEBCD;
+}
+.footer p {
+  text-align: center;
+  color: #212529;
+  font-size: 1.6rem;
+  padding: 20px;
+}
+.top {
+  display: flex;
+  justify-content: space-between;
+}
+.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;
+}
+.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;
+}
+.home .content-pick .destination {
+  width: 30%;
+  margin-bottom: 30px;
+}
diff --git a/destination.jpg b/destination.jpg
diff --git a/fun-bus.jpg b/fun-bus.jpg
diff --git a/fun.jpg b/fun.jpg
diff --git a/index.html b/index.html
@@ -15,11 +15,25 @@
 </head>
 
 <body>
-
-
-
+  <section class="front-section">
+<div class="top">
+  <h1>Fun Bus</h1>
+  <nav>
+    <a href=#>Home</a>
+    <a href=#>About Us</a>
+    <a href=#>Blog</a>
+    <a href=#>Contact</a>
+  </nav>
+</div>
+<div class="topimg">
+  <img src="fun-bus.jpg" alt="fun bus">
+</div>
+  <div class="second-top">
+  <h2>Welcome To Fun Bus!</h2>
+  <p>Traveling expedition modern, clean webdesign blogger clean website theme website modern. Design pretty design, travelblogger adventure WordPress wanderlust theme blogger website expedition theme travelblogger. Adventure fun traveler pretty design website expedition.</p>
+</div>   
+</section>
   <div class="container home">
-
     <section class="content-section">
       <div class="text-content">
         <h2>Let's Go!</h2>
@@ -51,17 +65,17 @@ <h2>Pick Your Destination</h2>
       <div class="destination">
         <h4>Fun In The Sun</h4>
         <p>Expedition excursion design excursion fun, clean simple organized WordPress Travel colorful webdesign. Traveler blogger website design expedition clean excursion traveling.</p>
-        <div class="btn">Sign Me Up!</div>
+        <a href=#><button class="btn-class">Sign Me Up!</button><a>
       </div>
       <div class="destination">
         <h4>Mountain Excursion</h4>
         <p>Expedition excursion design excursion fun, clean simple organized WordPress Travel colorful webdesign. Traveler blogger website design expedition clean excursion traveling.</p>
-        <div class="btn">Sign Me Up!</div>
+        <a href=#><button class="btn-class">Sign Me Up!</button><a>
       </div>
       <div class="destination">
         <h4>Island Getaway</h4>
         <p>Expedition excursion design excursion fun, clean simple organized WordPress Travel colorful webdesign. Traveler blogger website design expedition clean excursion traveling.</p>
-        <div class="btn">Sign Me Up!</div>
+        <a href=#><button class="btn-class">Sign Me Up!</button><a>
       </div>
     </section>
   </div><!-- container -->

diff --git a/less/footer.less b/less/footer.less
@@ -1,6 +1,6 @@
 .footer {
   width: 100%;
-  border-top: 2px dashed silver;
+  border-top: 2px dashed @silver;
   background: @sandy-beach;
 
   p {

diff --git a/less/home-page.less b/less/home-page.less
@@ -1,12 +1,13 @@
-.home {
-
+  .top {
+   display: flex;
+   justify-content: space-between;
+  }
+  .home {
   .content-section {
     margin: 30px 0;
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
-
-
 
     .text-content {
       width: 48%;
@@ -52,10 +53,10 @@
     border-top: 2px dashed @navigation-border;
     display: flex;
     justify-content: space-between;
-
-    .destination {
+  
+  .destination {
       width: 30%;
       margin-bottom: 30px;
     }
   }
-}// home
+} 
diff --git a/less/index.less b/less/index.less
@@ -1 +1,8 @@
 // Follow the order in the readme
+@import "variables";
+@import "mixins";
+@import "reset";
+@import "global";
+@import "navigation";
+@import "footer";
+@import "home-page";
diff --git a/less/navigation.less b/less/navigation.less
@@ -1 +1,10 @@
-// Navigation Styles here
+// Navigation Styles here
+
+ nav  {
+     display: flex;
+     justify-content: space-between;
+     a {
+     text-decoration: none;
+     color: black;
+     }
+}
diff --git a/less/variables.less b/less/variables.less
@@ -11,4 +11,6 @@
 @silver: #C0C0C0;
 @shark: #212529;
 @eastern-blue: #17A2B8;
-@sandy-beach: #FFEBCD;
+@sandy-beach: #FFEBCD;
+
+@tablet: ~"(min-width: 500px)";