From 4547cdfab2680b04f9d51924a3c9ca66ba8c78e0 Mon Sep 17 00:00:00 2001
From: Terry Edwards <terryedwardsjr113@gmail.com>
Date: Sat, 25 Apr 2020 14:59:42 -0400
Subject: [PATCH] fun buss finish

---
 .DS_Store             | Bin 6148 -> 8196 bytes
 .vscode/settings.json |   3 +
 css/index.css         | 331 +++++++++++++++++++++++++++++++++++++++++-
 index.html            |  22 ++-
 less/home-page.less   |  79 +++++++++-
 less/index.less       |   9 ++
 less/mixins.less      |  23 ++-
 less/navigation.less  |  27 +++-
 less/variables.less   |   6 +-
 9 files changed, 491 insertions(+), 9 deletions(-)
 create mode 100644 .vscode/settings.json

diff --git a/.DS_Store b/.DS_Store
index faa2d1e8033fd02b072cf79d3c910bfa4d4dc364..a8fa036a2530869a9174b5ad5c725a5d99f16636 100644
GIT binary patch
delta 567
zcmZoMXmOBWU|?W$DortDU;r^WfEYvza8E20o2aKKEDDkb@)`1zlXCKtKvJ6pImB2t
zD{%BPFJ|Z9nApIg4pPL-kjzlbQ0$q5PzV&Y24ao>V8FnznTN%WQ3_4PN`#8Z8(8Hg
zd$AsqK~=&ij!*(LgpEy=v7U<|lOc~Gg&~!pf<ccVgQ0{WmmvpDTPw0QAe)6D2dEyy
zjf|ghsY@y^E`WOaWKuy+W^svu!F5I^W)@aXHlWYBIJkJZCR?*eP0nNU^5f*-j2Doo
zt~Rzb(oxVgwXD@qs5Un@&`~fkHmj}W<PcXiwDnBLt*ol9sjZs{v=RsyfguY9{7@Q3
z&6=#i-mS~Y5X9ih;K<;@;0vVnfL=^N^&&WUmqCJeV__PTATz`O32q?m3W`NwTzzMr
k%rD|O*`J4l185y6f*B^q^DLM=o1JrV0DCg2wj?tF0G1MpX#fBK

delta 136
zcmZp1XfcprU|?W$DortDU=RQ@Ie-{Mvv5r;6q~50D9Q(t2Z<FIB<18M0eRn&3N{ul
zXJ+KvY$RaEIC+KOvCUJ2q!}l_5$Tv%60(?`gF}!Rs0;`MxPgQ#$gqut-<c=#%Xor}
RW?+I?1G1T6b3D%+W&jAW8R7r{

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000000..6f3a2913e1
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
\ No newline at end of file
diff --git a/css/index.css b/css/index.css
index e764f2b01f..bb5b6e853a 100644
--- a/css/index.css
+++ b/css/index.css
@@ -1 +1,330 @@
-/* LESS needs to be processed */
\ No newline at end of file
+.margin {
+  margin-left: 20px;
+  margin-right: 20px;
+}
+/* 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;
+}
+.navbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  border-bottom: 2px dashed #C0C0C0;
+  padding-left: 310px;
+  padding-right: 310px;
+}
+.navbar nav a {
+  margin-right: 30px;
+  margin-left: 10px;
+  text-decoration: none;
+  color: black;
+  font-size: 1.4rem;
+}
+@media (max-width: 500px) {
+  .navbar {
+    padding-left: 20px;
+    padding-right: 20px;
+    flex-direction: column;
+    align-items: center;
+  }
+}
+.footer {
+  width: 100%;
+  border-top: 2px dashed silver;
+  background: #FFEBCD;
+}
+.footer p {
+  text-align: center;
+  color: #212529;
+  font-size: 1.6rem;
+  padding: 20px;
+}
+header {
+  padding-bottom: 10px;
+  border-bottom: 2px dashed #C0C0C0;
+}
+.top-content {
+  margin-left: 310px;
+  margin-right: 310px;
+  border-bottom: 2px dashed #C0C0C0;
+}
+@media (max-width: 500px) {
+  .top-content {
+    margin-left: 20px;
+    margin-right: 20px;
+  }
+  .top-content h2 {
+    margin-top: 20px;
+  }
+}
+.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 (max-width: 500px) {
+  .home .content-section {
+    flex-direction: column;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-left: 20px;
+    margin-right: 20px;
+  }
+  .home .content-section .text-content {
+    width: 100%;
+  }
+}
+.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;
+}
+@media (max-width: 500px) {
+  .home .inverse-content {
+    display: flex;
+    flex-direction: column-reverse;
+    margin-left: 20px;
+    margin-right: 20px;
+  }
+  .home .inverse-content .text-content {
+    width: 100%;
+  }
+}
+.home .content-destination {
+  width: 75%;
+  margin: 0 auto 30px;
+}
+.home .content-destination img {
+  border-radius: 10px;
+}
+@media (max-width: 500px) {
+  .home .content-destination {
+    width: 100%;
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+}
+.home .content-pick {
+  padding-top: 30px;
+  border-top: 2px dashed #C0C0C0;
+  display: flex;
+  justify-content: space-between;
+}
+.home .content-pick .destination {
+  width: 50%;
+  margin-bottom: 30px;
+}
+.home .content-pick .btn button {
+  width: 200px;
+  height: 30px;
+  font-size: 18px;
+  background-color: teal;
+  color: white;
+  border-radius: 10px;
+}
+@media (max-width: 500px) {
+  .home .content-pick {
+    flex-direction: column;
+    align-items: center;
+    margin-left: 20px;
+    margin-right: 20px;
+  }
+  .home .content-pick .destination {
+    width: 100%;
+    padding-left: 50px;
+    padding-right: 50px;
+  }
+  .home .content-pick .btn button {
+    width: 350px;
+    background-color: darkturquoise;
+    color: white;
+    border-radius: 10px;
+  }
+}
diff --git a/index.html b/index.html
index bb8663b768..0bff7bef53 100644
--- a/index.html
+++ b/index.html
@@ -15,7 +15,21 @@
 </head>
 
 <body>
-
+  <header class="navbar">
+    <h1>Fun Bus</h1>
+    <nav>
+      <a href="#">Home</a>
+      <a href="#">About Us</a>
+      <a href="#">Blog</a>
+      <a href="#">Contact</a>
+    </nav>
+  </header>
+    <section class="top-content">
+      <img src="/Users/terryedwards/Documents/lambda/unit-1/advanced-and-css-intro-javascript/preprocessing-II/Preprocessing-II/img/fun-bus.jpg">
+      <h2>Welcome To Fun Bus!</h2>
+      <p>Traveling expedition modern, clean webdesign blogger clean website them website modern. Design pretty design, travelblogger adventure WordPress wanderlust theme blogger website expedition theme travelblogger. Adventure fun traveler pretty design website expedition.</p>
+    </section>
+  
   
      
   <div class="container home">
@@ -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>
+        <div class="btn"><button>Sign Me Up!</button></div>
       </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>
+        <div class="btn"><button>Sign Me Up!</button></div>
       </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>
+        <div class="btn"><button>Sign Me Up!</button></div>
       </div>
     </section>
   </div><!-- container -->
diff --git a/less/home-page.less b/less/home-page.less
index 5528d8a7a5..49c35a4cef 100644
--- a/less/home-page.less
+++ b/less/home-page.less
@@ -1,5 +1,25 @@
+header{padding-bottom: 10px;;
+  border-bottom: 2px dashed @navigation-border;
+}
+
+.top-content{
+  margin-left: 310px;
+  margin-right: 310px;
+  border-bottom: 2px dashed @navigation-border;
+  
+
+  @media @mobile{
+    .margin();
+    
+    h2{
+      margin-top: 20px;
+    }
+  }
+}
+
 .home {
 
+
   .content-section {
     margin: 30px 0;
     display: flex;
@@ -20,6 +40,18 @@
       img {
         border-radius: 10px;
       }
+    }
+    @media @mobile{
+      flex-direction: column;
+      .flexbox(center,center);
+      .margin();
+
+      .text-content{
+        width:100%;
+      }
+      
+      
+      
     }
   }
 
@@ -36,6 +68,17 @@
       padding-right: 1%;
       padding-left: 0;
     }
+
+    @media @mobile{
+      display: flex;
+      flex-direction: column-reverse;
+      .margin();
+
+      .text-content{
+        width:100%;
+      }
+
+    }
   }
 
   .content-destination {
@@ -45,6 +88,12 @@
     img {
       border-radius: 10px;
     }
+
+    @media @mobile{
+      width:100%;
+      padding-left: 20px;
+      padding-right:20px;
+    }
   }
 
   .content-pick {
@@ -54,8 +103,36 @@
     justify-content: space-between;
 
     .destination {
-      width: 30%;
+      width: 50%;
       margin-bottom: 30px;
     }
+
+    .btn{
+      button{
+        width:200px;
+        height:30px;
+        font-size: 18px;
+        .button(teal,white,10px);
+      }
+    }
+    @media @mobile{
+      flex-direction: column;
+      align-items:center;
+      .margin();
+
+      .destination{
+        width:100%;
+        padding-left: 50px;
+        padding-right:50px;
+      }
+
+      .btn{
+        button{
+          width:350px;
+          .button(darkturquoise,white,10px);
+        }
+      }
+    }
+
   }
 }// home
\ No newline at end of file
diff --git a/less/index.less b/less/index.less
index c113ca2c46..a32db75a2a 100644
--- a/less/index.less
+++ b/less/index.less
@@ -1 +1,10 @@
 // Follow the order in the readme
+@import "variables";
+@import "mixins";
+
+@import "reset";
+@import "global";
+
+@import "navigation";
+@import "footer";
+@import "home-page";
\ No newline at end of file
diff --git a/less/mixins.less b/less/mixins.less
index 2d5c603558..9ec8243a8a 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -1 +1,22 @@
-// Mixins in here
\ No newline at end of file
+// Mixins in here
+    .flexbox(@j,@a){
+        display: flex;
+        justify-content: @j;
+        align-items: @a;
+    }
+
+    .direction(@dir){
+        display: flex;
+        flex-direction: @dir;
+    }
+
+    .button(@bc,@c,@br){
+        background-color: @bc;
+        color: @c;
+        border-radius: @br;
+    }
+    
+    .margin{
+        margin-left:20px;
+        margin-right:20px;
+    }
\ No newline at end of file
diff --git a/less/navigation.less b/less/navigation.less
index f89120a0f1..8dc03c098a 100644
--- a/less/navigation.less
+++ b/less/navigation.less
@@ -1 +1,26 @@
-// Navigation Styles here
\ No newline at end of file
+// Navigation Styles here
+.navbar{
+    .flexbox(space-between,baseline);
+        border-bottom: 2px dashed @navigation-border;
+        padding-left: 310px;
+        padding-right: 310px;
+    nav{ 
+        a{
+            margin-right: 30px;
+            margin-left: 10px;
+            text-decoration: none;
+            color:black;font-size: 1.4rem;
+        }
+    }
+
+    @media @mobile{
+        padding-left: 20px;
+        padding-right: 20px;
+        flex-direction: column;
+        align-items: center;
+        
+    //     nav{
+    //         @direction(row);
+    //     }
+    }
+}
\ No newline at end of file
diff --git a/less/variables.less b/less/variables.less
index 916eb0b7e0..83bb528186 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -11,4 +11,8 @@
 @silver: #C0C0C0;
 @shark: #212529;
 @eastern-blue: #17A2B8;
-@sandy-beach: #FFEBCD;
\ No newline at end of file
+@sandy-beach: #FFEBCD;
+
+
+// mobile file
+@mobile: ~"(max-width: 500px)";
\ No newline at end of file