From 42efd5a0520e4cf4f68126f07d2e8ef86e4a8d93 Mon Sep 17 00:00:00 2001
From: Elizabeth Knoll <worldwellness00@gmail.com>
Date: Wed, 22 Apr 2020 17:03:31 -0500
Subject: [PATCH 01/13] task 1 comp & txt added

---
 README.md           | 18 +++++++++---------
 elizabeth-knoll.txt |  0
 2 files changed, 9 insertions(+), 9 deletions(-)
 create mode 100644 elizabeth-knoll.txt

diff --git a/README.md b/README.md
index 8c6cbcf19f..ad7e918ecf 100644
--- a/README.md
+++ b/README.md
@@ -4,18 +4,18 @@ Fun Bus is a travel agency looking for some help on their website.  They want a
 
 ## Task 1: Set Up The Project With Git
 
-- [ ] Create a forked copy of this project.
-- [ ] Add your team lead as collaborator on Github.
-- [ ] Clone your OWN version of the repository (Not Lambda's by mistake!).
-- [ ] Create a new branch: git checkout -b `<firstName-lastName>`.
-- [ ] Implement the project on your newly created `<firstName-lastName>` branch, committing changes regularly.
-- [ ] Push commits: git push origin `<firstName-lastName>`.
+- [X] Create a forked copy of this project.
+- [X] Add your team lead as collaborator on Github.
+- [X] Clone your OWN version of the repository (Not Lambda's by mistake!).
+- [X] Create a new branch: git checkout -b `<firstName-lastName>`.
+- [X] Implement the project on your newly created `<firstName-lastName>` branch, committing changes regularly.
+- [X] Push commits: git push origin `<firstName-lastName>`.
  
 Follow these steps for completing your project.
 
-- [ ] Submit a Pull-Request to merge <firstName-lastName> Branch into master (student's  Repo). **Please don't merge your own pull request**
-- [ ] Add your team lead as a reviewer on the pull-request
-- [ ] Your team lead will count the project as complete by merging the branch back into master.
+- [X] Submit a Pull-Request to merge <firstName-lastName> Branch into master (student's  Repo). **Please don't merge your own pull request**
+- [X] Add your team lead as a reviewer on the pull-request
+- [X] Your team lead will count the project as complete by merging the branch back into master.
 
 ## Task 2: Set up your preprocessor
 * [ ] Verify that you have LESS installed correctly by running `lessc -v` in your terminal, if you don't get a version message back, reach out to your team lead for help.
diff --git a/elizabeth-knoll.txt b/elizabeth-knoll.txt
new file mode 100644
index 0000000000..e69de29bb2

From 985ef20d703e553a74063f6a968b720bcc9208a8 Mon Sep 17 00:00:00 2001
From: Elizabeth Knoll <worldwellness00@gmail.com>
Date: Wed, 22 Apr 2020 18:13:49 -0500
Subject: [PATCH 02/13] import

---
 README.md       |  10 +--
 css/index.css   | 228 +++++++++++++++++++++++++++++++++++++++++++++++-
 less/index.less |   8 +-
 3 files changed, 239 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index ad7e918ecf..5b627c91f0 100644
--- a/README.md
+++ b/README.md
@@ -18,11 +18,11 @@ Follow these steps for completing your project.
 - [X] Your team lead will count the project as complete by merging the branch back into master.
 
 ## Task 2: Set up your preprocessor
-* [ ] Verify that you have LESS installed correctly by running `lessc -v` in your terminal, if you don't get a version message back, reach out to your team lead for help.
-* [ ] Open your terminal and navigate to your preprocessing project by using the `cd` command
-* [ ] Once in your project's root folder, run the following command `less-watch-compiler less css index.less`
-* [ ] Verify your compiler is working correctly by changing the `background-color` on the `html` selector to `red` in your `index.less` file.
-* [ ] Once you see the red screen, you can delete that style and you're ready to start on the next task
+* [x] Verify that you have LESS installed correctly by running `lessc -v` in your terminal, if you don't get a version message back, reach out to your team lead for help.
+* [x] Open your terminal and navigate to your preprocessing project by using the `cd` command
+* [x] Once in your project's root folder, run the following command `less-watch-compiler less css index.less`
+* [x] Verify your compiler is working correctly by changing the `background-color` on the `html` selector to `red` in your `index.less` file.
+* [x] Once you see the red screen, you can delete that style and you're ready to start on the next task
 
 ## Task 3: Import LESS Files
 
diff --git a/css/index.css b/css/index.css
index e764f2b01f..e4c4602ce8 100644
--- a/css/index.css
+++ b/css/index.css
@@ -1 +1,227 @@
-/* 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;
+}
+.footer {
+  width: 100%;
+  border-top: 2px dashed silver;
+  background: #FFEBCD;
+}
+.footer p {
+  text-align: center;
+  color: #212529;
+  font-size: 1.6rem;
+  padding: 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;
+}
+.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/less/index.less b/less/index.less
index c113ca2c46..7639714c11 100644
--- a/less/index.less
+++ b/less/index.less
@@ -1 +1,7 @@
-// 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

From 0bd95ad3f73f2a780e4792cd36a9355e677fe0a5 Mon Sep 17 00:00:00 2001
From: Elizabeth Knoll <worldwellness00@gmail.com>
Date: Thu, 23 Apr 2020 01:30:08 -0500
Subject: [PATCH 03/13] navagation bar in progress

---
 css/index.css        | 25 +++++++++++++++++++++++++
 index.html           | 22 ++++++++++++++++++++--
 less/global.less     |  2 +-
 less/home-page.less  |  1 +
 less/index.less      |  3 ++-
 less/intro.less      | 10 ++++++++++
 less/mixins.less     |  7 ++++++-
 less/navigation.less | 23 ++++++++++++++++++++++-
 8 files changed, 87 insertions(+), 6 deletions(-)
 create mode 100644 less/intro.less

diff --git a/css/index.css b/css/index.css
index e4c4602ce8..a253ac13ce 100644
--- a/css/index.css
+++ b/css/index.css
@@ -145,6 +145,7 @@ h5 {
 }
 h1 {
   font-size: 4rem;
+  margin-right: 32rem;
 }
 h2 {
   font-size: 3.2rem;
@@ -168,6 +169,30 @@ img {
   width: 100%;
   margin: 0 auto;
 }
+body {
+  max-width: 800px;
+  width: 100%;
+  margin: 0 auto;
+}
+body .containernav {
+  display: flex;
+  justify-content: baseline;
+  padding: 5% 0% 2.5% 0%;
+}
+body .containernav .nav {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  text-align: end;
+}
+body .containernav .nav a {
+  text-decoration: none;
+  color: #212529;
+  font-size: 1.6rem;
+  display: flex;
+  justify-content: space-between;
+  padding: 1.5rem;
+}
 .footer {
   width: 100%;
   border-top: 2px dashed silver;
diff --git a/index.html b/index.html
index bb8663b768..e16766a621 100644
--- a/index.html
+++ b/index.html
@@ -15,9 +15,27 @@
 </head>
 
 <body>
+    <div class="containernav">
+      <h1>  Fun Bus  </h1>
+      <div class=" nav ">
+        <nav class="nava">
+          <a href="#">Home</a>
+          <a href="#">About Us</a>
+          <a href="#">Blog</a>
+          <a href="#">Contact</a>
+        </nav>
+      </div>
+    </div>
+    
+  <intro> 
+      <img src="img/fun-bus.jpg" alt="toy yellow bus background half desert half blue sky">
+
+    <div class="container intro">
+      <h2>Welcome to the Fun Bus</h2>
+      <p> Traveling expedition modern, clean webdesign blogger clean wesite theme websire modern. Design pretty design, travelblogger adventure WordPress wanderlust theme blogger wesite expedition theme travelblogger. Adventure fun traveler pretty design website expedition. </p>
+    </div>
+  </intro>
 
-  
-     
   <div class="container home">
    
     <section class="content-section">
diff --git a/less/global.less b/less/global.less
index abe21bf970..ecf7b546cb 100644
--- a/less/global.less
+++ b/less/global.less
@@ -16,6 +16,7 @@ h1, h2, h3, h4, h5 {
 
 h1 {
   font-size: 4rem;
+  margin-right: 32.0rem;
 }
 
 h2 {
@@ -27,7 +28,6 @@ h4 {
   font-size: 2.5rem;
   padding-bottom: 10px;
 }
-
 p {
   line-height: 1.5;
   font-size: 1.6rem;
diff --git a/less/home-page.less b/less/home-page.less
index 5528d8a7a5..c199c656ea 100644
--- a/less/home-page.less
+++ b/less/home-page.less
@@ -1,3 +1,4 @@
+
 .home {
 
   .content-section {
diff --git a/less/index.less b/less/index.less
index 7639714c11..0d14ca0945 100644
--- a/less/index.less
+++ b/less/index.less
@@ -3,5 +3,6 @@
 @import "reset";
 @import "global";
 @import "navigation";
+@import "intro";
 @import "footer";
-@import "home-page";
\ No newline at end of file
+@import "home-page"; 
\ No newline at end of file
diff --git a/less/intro.less b/less/intro.less
new file mode 100644
index 0000000000..ef9e060dbc
--- /dev/null
+++ b/less/intro.less
@@ -0,0 +1,10 @@
+
+  
+
+
+
+// <div class="container intro">
+//   <h2>Welcome to the Fun Bus</h2>
+//   <p> Traveling expedition modern, clean webdesign blogger clean wesite theme websire modern. Design pretty design, travelblogger adventure WordPress wanderlust theme blogger wesite expedition theme travelblogger. Adventure fun traveler pretty design website expedition. </p>
+// </div>
+// </intro>
\ No newline at end of file
diff --git a/less/mixins.less b/less/mixins.less
index 2d5c603558..f408995950 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -1 +1,6 @@
-// Mixins in here
\ No newline at end of file
+// Mixins in here
+.contain() {
+    max-width: 800px;
+    width: 100%;
+    margin: 0 auto;
+  }
\ No newline at end of file
diff --git a/less/navigation.less b/less/navigation.less
index f89120a0f1..05cc434e86 100644
--- a/less/navigation.less
+++ b/less/navigation.less
@@ -1 +1,22 @@
-// Navigation Styles here
\ No newline at end of file
+body {
+    .contain();
+    .containernav {
+        display: flex;
+        justify-content: baseline;
+        padding: 5% 0% 2.5% 0%;
+        .nav {
+            display: flex;
+            flex-direction: row;
+            justify-content: flex-end;
+            text-align: end; 
+            a {
+                text-decoration: none;
+                color: @shark;
+                font-size: 1.6rem;
+                display: flex;
+                justify-content: space-between;
+                padding: 1.5rem;
+                }  
+            }
+        }
+    }

From 2f6e444d2b22916ab4aee97e1481c403d4f95268 Mon Sep 17 00:00:00 2001
From: Elizabeth knoll <62455048+MissChiefGrey@users.noreply.github.com>
Date: Thu, 23 Apr 2020 01:33:06 -0500
Subject: [PATCH 04/13] Update README.md

---
 README.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 5b627c91f0..6f26fa85a5 100644
--- a/README.md
+++ b/README.md
@@ -26,7 +26,7 @@ Follow these steps for completing your project.
 
 ## Task 3: Import LESS Files
 
-* [ ] Navigate to your `index.less` file. Notice the file is blank.  In order for you to see the styles for this project you must import them in a certain order.  That order is as follows:
+* [X] Navigate to your `index.less` file. Notice the file is blank.  In order for you to see the styles for this project you must import them in a certain order.  That order is as follows:
 
 1. `variables.less`
 2. `mixins.less`
@@ -38,8 +38,8 @@ Follow these steps for completing your project.
 
 
 ## Task 4: Desktop Updates Needed
-* [ ] Review the [desktop design file](design-files/fun-bus-desktop.png).  Notice the navigation, header, and buttons at the bottom of the page are missing.
-* [ ] Navigation: Use the `navigation.less` file for all your navigation styling
+* [X] Review the [desktop design file](design-files/fun-bus-desktop.png).  Notice the navigation, header, and buttons at the bottom of the page are missing.
+* [X] Navigation: Use the `navigation.less` file for all your navigation styling
 * [ ] Main Header: Use the `home-page.less` file for the header styling.
 * [ ] Buttons: Create a parametric mixin that can create the missing buttons in the design file. Use the `mixins.less` file to create your mixin.
 

From d40110005f1283b2abb94d41640954d5880ced02 Mon Sep 17 00:00:00 2001
From: Elizabeth Knoll <worldwellness00@gmail.com>
Date: Thu, 23 Apr 2020 15:16:29 -0500
Subject: [PATCH 05/13] nav comp & dashed lines comp.

---
 css/index.css        | 19 +++++++++----------
 index.html           | 31 ++++++++++++++++---------------
 less/home-page.less  | 10 +++++++---
 less/intro.less      | 11 +++++++++++
 less/mixins.less     |  5 +++++
 less/navigation.less | 26 +++++++++-----------------
 6 files changed, 57 insertions(+), 45 deletions(-)

diff --git a/css/index.css b/css/index.css
index a253ac13ce..0a1159e712 100644
--- a/css/index.css
+++ b/css/index.css
@@ -176,23 +176,18 @@ body {
 }
 body .containernav {
   display: flex;
-  justify-content: baseline;
+  align-items: flex-end;
   padding: 5% 0% 2.5% 0%;
 }
-body .containernav .nav {
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
-  text-align: end;
-}
-body .containernav .nav a {
+body .containernav a {
   text-decoration: none;
   color: #212529;
   font-size: 1.6rem;
-  display: flex;
-  justify-content: space-between;
   padding: 1.5rem;
 }
+intro h5 {
+  border-bottom: 2px dashed #C0C0C0;
+}
 .footer {
   width: 100%;
   border-top: 2px dashed silver;
@@ -221,6 +216,10 @@ body .containernav .nav a {
 .home .content-section .img-content img {
   border-radius: 10px;
 }
+.home h5 {
+  border-top: 2px dashed #C0C0C0;
+  margin: 2rem;
+}
 .home .inverse-content {
   padding-bottom: 30px;
   border-bottom: 2px dashed #C0C0C0;
diff --git a/index.html b/index.html
index e16766a621..ce71f44ad5 100644
--- a/index.html
+++ b/index.html
@@ -28,26 +28,27 @@ <h1>  Fun Bus  </h1>
     </div>
     
   <intro> 
+    <h5></h5>
       <img src="img/fun-bus.jpg" alt="toy yellow bus background half desert half blue sky">
 
-    <div class="container intro">
-      <h2>Welcome to the Fun Bus</h2>
-      <p> Traveling expedition modern, clean webdesign blogger clean wesite theme websire modern. Design pretty design, travelblogger adventure WordPress wanderlust theme blogger wesite expedition theme travelblogger. Adventure fun traveler pretty design website expedition. </p>
-    </div>
+          <div class="container intro">
+            <h2>Welcome to the Fun Bus</h2>
+            <p> Traveling expedition modern, clean webdesign blogger clean wesite theme websire modern. Design pretty design, travelblogger adventure WordPress wanderlust theme blogger wesite expedition theme travelblogger. Adventure fun traveler pretty design website expedition. </p>
+          </div>
   </intro>
 
   <div class="container home">
-   
-    <section class="content-section">
-      <div class="text-content">
-        <h2>Let's Go!</h2>
-        <p>Adventure webdesign pretty design design, excursion cute WordPress blogger design webdesign adventure. Pretty simple traveling fun WordPress wanderlust darn simple organized.</p> 
-        <p>Expedition colorful design simple excursion blogger blogger design WordPress design, design organized website theme.</p>
-      </div>
-      <div class="img-content">
-        <img src="img/adventure.jpg" alt="Let's go on an adventure!">
-      </div>
-    </section>
+    <h5></h5>
+      <section class="content-section">
+        <div class="text-content">
+          <h2>Let's Go!</h2>
+          <p>Adventure webdesign pretty design design, excursion cute WordPress blogger design webdesign adventure. Pretty simple traveling fun WordPress wanderlust darn simple organized.</p> 
+          <p>Expedition colorful design simple excursion blogger blogger design WordPress design, design organized website theme.</p>
+        </div>
+        <div class="img-content">
+          <img src="img/adventure.jpg" alt="Let's go on an adventure!">
+        </div>
+      </section>
     <section class="content-section inverse-content">
       <div class="img-content">
           <img src="img/fun.jpg" class="img-fluid rounded" alt="Lets have fun!">
diff --git a/less/home-page.less b/less/home-page.less
index c199c656ea..5b6b7cd94c 100644
--- a/less/home-page.less
+++ b/less/home-page.less
@@ -1,13 +1,11 @@
 
 .home {
-
+  
   .content-section {
     margin: 30px 0;
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
-
-   
     
     .text-content {
       width: 48%;
@@ -24,6 +22,12 @@
     }
   }
 
+  h5 {
+    border-top: 2px dashed @navigation-border;
+    margin: 2.0rem;
+  }
+
+
   .inverse-content {
     padding-bottom: 30px;
     border-bottom: 2px dashed @navigation-border;
diff --git a/less/intro.less b/less/intro.less
index ef9e060dbc..d6d51f7d19 100644
--- a/less/intro.less
+++ b/less/intro.less
@@ -1,3 +1,14 @@
+intro {
+    h5 {
+        border-bottom: 2px dashed @navigation-border;
+        img {
+            
+            .intro {
+                
+            }
+        }
+    }
+}
 
   
 
diff --git a/less/mixins.less b/less/mixins.less
index f408995950..2584ae5117 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -3,4 +3,9 @@
     max-width: 800px;
     width: 100%;
     margin: 0 auto;
+  }
+
+  .inversecontent() {
+    padding-bottom: 30px;
+    border-bottom: 2px dashed @navigation-border;
   }
\ No newline at end of file
diff --git a/less/navigation.less b/less/navigation.less
index 05cc434e86..9b22829bc5 100644
--- a/less/navigation.less
+++ b/less/navigation.less
@@ -1,22 +1,14 @@
 body {
     .contain();
     .containernav {
-        display: flex;
-        justify-content: baseline;
+        display:flex;
+        align-items: flex-end;
         padding: 5% 0% 2.5% 0%;
-        .nav {
-            display: flex;
-            flex-direction: row;
-            justify-content: flex-end;
-            text-align: end; 
-            a {
-                text-decoration: none;
-                color: @shark;
-                font-size: 1.6rem;
-                display: flex;
-                justify-content: space-between;
-                padding: 1.5rem;
-                }  
-            }
-        }
+        a {
+            text-decoration: none;
+            color: @shark;
+            font-size: 1.6rem;           
+            padding: 1.5rem;           
+        }           
     }
+}    

From 159902095b4181e77914750aedc3d622b3ce1e66 Mon Sep 17 00:00:00 2001
From: Elizabeth Knoll <worldwellness00@gmail.com>
Date: Thu, 23 Apr 2020 17:16:06 -0500
Subject: [PATCH 06/13] buttons complete

---
 css/index.css       | 13 +++++++++++++
 less/home-page.less |  7 +++++++
 less/mixins.less    | 14 +++++++++++++-
 3 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/css/index.css b/css/index.css
index 0a1159e712..10e9ab65d1 100644
--- a/css/index.css
+++ b/css/index.css
@@ -249,3 +249,16 @@ intro h5 {
   width: 30%;
   margin-bottom: 30px;
 }
+.home .content-pick .destination .btn {
+  display: flex;
+  justify-content: space-between;
+  text-align: center;
+  background-color: #008080;
+  border-radius: 15rem 5px;
+  padding: 15px;
+  margin-right: 10rem;
+  font-size: 1.5rem white bold;
+  color: white;
+  font-family: Verdana, Geneva, Tahoma, sans-serif;
+  font-size: 1.8rem;
+}
diff --git a/less/home-page.less b/less/home-page.less
index 5b6b7cd94c..f7871e9134 100644
--- a/less/home-page.less
+++ b/less/home-page.less
@@ -61,6 +61,13 @@
     .destination {
       width: 30%;
       margin-bottom: 30px;
+
+      .btn {
+        .buttonp (space-between, center);
+        color: white;
+        font-family: Verdana, Geneva, Tahoma, sans-serif;
+        font-size: 1.8rem;
+      }
     }
   }
 }// home
\ No newline at end of file
diff --git a/less/mixins.less b/less/mixins.less
index 2584ae5117..24bf8466a2 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -8,4 +8,16 @@
   .inversecontent() {
     padding-bottom: 30px;
     border-bottom: 2px dashed @navigation-border;
-  }
\ No newline at end of file
+  }
+
+  // btn add in parametric
+  .buttonp (@justify, @align){
+    display: flex;
+    justify-content: @justify;
+    text-align: @align;
+    background-color: #008080;
+    border-radius: 15rem 5px;
+    padding: 15px;
+    margin-right:10.0rem;
+    font-size: 1.5rem white bold;
+  }

From 2cfb272a0f872fd872b22e8ce5e09ac6ab412535 Mon Sep 17 00:00:00 2001
From: Elizabeth Knoll <worldwellness00@gmail.com>
Date: Thu, 23 Apr 2020 21:35:28 -0500
Subject: [PATCH 07/13] mobile media difficulty

---
 README.md            |  6 +++---
 css/index.css        |  2 +-
 less/home-page.less  |  7 ++++---
 less/mixins.less     | 14 +++++++++++---
 less/navigation.less |  5 +++++
 less/variables.less  |  5 ++++-
 6 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/README.md b/README.md
index 6f26fa85a5..6cced5ad27 100644
--- a/README.md
+++ b/README.md
@@ -40,12 +40,12 @@ Follow these steps for completing your project.
 ## Task 4: Desktop Updates Needed
 * [X] Review the [desktop design file](design-files/fun-bus-desktop.png).  Notice the navigation, header, and buttons at the bottom of the page are missing.
 * [X] Navigation: Use the `navigation.less` file for all your navigation styling
-* [ ] Main Header: Use the `home-page.less` file for the header styling.
-* [ ] Buttons: Create a parametric mixin that can create the missing buttons in the design file. Use the `mixins.less` file to create your mixin.
+* [X] Main Header: Use the `home-page.less` file for the header styling.
+* [X] Buttons: Create a parametric mixin that can create the missing buttons in the design file. Use the `mixins.less` file to create your mixin.
 
 
 ## Task 5: Mobile Updates Needed
-* [ ] Use escaping to create a variable named `@mobile` that contains this value: `(max-width: 500px)`.  Use the `variables.less` file to house your variables.
+* [X] Use escaping to create a variable named `@mobile` that contains this value: `(max-width: 500px)`.  Use the `variables.less` file to house your variables.
 * [ ] Review the [mobile design file](design-files/fun-bus-mobile.png). You will see several design updates that need updating. 
 * [ ] Match the design file at `500px` as well as you can 
 
diff --git a/css/index.css b/css/index.css
index 10e9ab65d1..9e8b961d00 100644
--- a/css/index.css
+++ b/css/index.css
@@ -251,7 +251,7 @@ intro h5 {
 }
 .home .content-pick .destination .btn {
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
   text-align: center;
   background-color: #008080;
   border-radius: 15rem 5px;
diff --git a/less/home-page.less b/less/home-page.less
index f7871e9134..47372aa5ba 100644
--- a/less/home-page.less
+++ b/less/home-page.less
@@ -1,6 +1,6 @@
 
 .home {
-  
+
   .content-section {
     margin: 30px 0;
     display: flex;
@@ -57,13 +57,14 @@
     border-top: 2px dashed @navigation-border;
     display: flex;
     justify-content: space-between;
-
+    
     .destination {
       width: 30%;
       margin-bottom: 30px;
+      
 
       .btn {
-        .buttonp (space-between, center);
+        .buttonp(center, center);
         color: white;
         font-family: Verdana, Geneva, Tahoma, sans-serif;
         font-size: 1.8rem;
diff --git a/less/mixins.less b/less/mixins.less
index 24bf8466a2..cb07a4d639 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -11,13 +11,21 @@
   }
 
   // btn add in parametric
-  .buttonp (@justify, @align){
+  .buttonp (@j, @t){
     display: flex;
-    justify-content: @justify;
-    text-align: @align;
+    justify-content: @j;
+    text-align: @t;
     background-color: #008080;
     border-radius: 15rem 5px;
     padding: 15px;
     margin-right:10.0rem;
     font-size: 1.5rem white bold;
   }
+
+  .mobile(max-width: 500px){
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+    max-width: 500px;
+  }
\ No newline at end of file
diff --git a/less/navigation.less b/less/navigation.less
index 9b22829bc5..d7386e6f53 100644
--- a/less/navigation.less
+++ b/less/navigation.less
@@ -1,9 +1,14 @@
 body {
+    @media @mobile {
+        
+    }
     .contain();
+
     .containernav {
         display:flex;
         align-items: flex-end;
         padding: 5% 0% 2.5% 0%;
+
         a {
             text-decoration: none;
             color: @shark;
diff --git a/less/variables.less b/less/variables.less
index 916eb0b7e0..7e4577a1bd 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;
+
+// Breakpoints
+@mobile: ~"(max-width: 500px)";

From 46a95aa3ecc3f0d950216087643f42be7be1ed7d Mon Sep 17 00:00:00 2001
From: Elizabeth Knoll <worldwellness00@gmail.com>
Date: Fri, 24 Apr 2020 16:18:16 -0500
Subject: [PATCH 08/13] mobile ready

---
 css/index.css        | 132 +++++++++++++++++++++++++++++++++++++++++++
 less/home-page.less  |  31 ++++++++++
 less/intro.less      |   3 +
 less/mixins.less     |  10 ++--
 less/navigation.less |   6 +-
 5 files changed, 175 insertions(+), 7 deletions(-)

diff --git a/css/index.css b/css/index.css
index 9e8b961d00..55ac953976 100644
--- a/css/index.css
+++ b/css/index.css
@@ -179,12 +179,34 @@ body .containernav {
   align-items: flex-end;
   padding: 5% 0% 2.5% 0%;
 }
+@media (max-width: 500px) {
+  body .containernav {
+    display: flex;
+    Flex-flow: row wrap;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    margin: auto;
+    padding: 1rem;
+  }
+}
 body .containernav a {
   text-decoration: none;
   color: #212529;
   font-size: 1.6rem;
   padding: 1.5rem;
 }
+@media (max-width: 500px) {
+  intro {
+    display: flex;
+    Flex-flow: row wrap;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    margin: auto;
+    padding: 1rem;
+  }
+}
 intro h5 {
   border-bottom: 2px dashed #C0C0C0;
 }
@@ -205,17 +227,61 @@ intro h5 {
   flex-wrap: wrap;
   justify-content: space-between;
 }
+@media (max-width: 500px) {
+  .home .content-section {
+    display: flex;
+    Flex-flow: row wrap;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    margin: auto;
+    padding: 1rem;
+  }
+}
 .home .content-section .text-content {
   width: 48%;
   padding-right: 1%;
 }
+@media (max-width: 500px) {
+  .home .content-section .text-content {
+    display: flex;
+    Flex-flow: row wrap;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    margin: auto;
+    padding: 1rem;
+  }
+}
 .home .content-section .img-content {
   width: 48%;
   padding-left: 1%;
 }
+@media (max-width: 500px) {
+  .home .content-section .img-content {
+    display: flex;
+    Flex-flow: row wrap;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    margin: auto;
+    padding: 1rem;
+  }
+}
 .home .content-section .img-content img {
   border-radius: 10px;
 }
+@media (max-width: 500px) {
+  .home .content-section .img-content img {
+    display: flex;
+    Flex-flow: row wrap;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    margin: auto;
+    padding: 1rem;
+  }
+}
 .home h5 {
   border-top: 2px dashed #C0C0C0;
   margin: 2rem;
@@ -224,10 +290,32 @@ intro h5 {
   padding-bottom: 30px;
   border-bottom: 2px dashed #C0C0C0;
 }
+@media (max-width: 500px) {
+  .home .inverse-content {
+    display: flex;
+    Flex-flow: row wrap;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    margin: auto;
+    padding: 1rem;
+  }
+}
 .home .inverse-content .text-content {
   padding-left: 1%;
   padding-right: 0;
 }
+@media (max-width: 500px) {
+  .home .inverse-content .text-content {
+    display: flex;
+    Flex-flow: row wrap;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    margin: auto;
+    padding: 1rem;
+  }
+}
 .home .inverse-content .img-content {
   padding-right: 1%;
   padding-left: 0;
@@ -236,19 +324,63 @@ intro h5 {
   width: 75%;
   margin: 0 auto 30px;
 }
+@media (max-width: 500px) {
+  .home .content-destination {
+    display: flex;
+    Flex-flow: row wrap;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    margin: auto;
+    padding: 1rem;
+  }
+}
 .home .content-destination img {
   border-radius: 10px;
 }
+@media (max-width: 500px) {
+  .home .content-destination img {
+    display: flex;
+    Flex-flow: row wrap;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    margin: auto;
+    padding: 1rem;
+  }
+}
 .home .content-pick {
   padding-top: 30px;
   border-top: 2px dashed #C0C0C0;
   display: flex;
   justify-content: space-between;
 }
+@media (max-width: 500px) {
+  .home .content-pick {
+    display: flex;
+    Flex-flow: row wrap;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    margin: auto;
+    padding: 1rem;
+  }
+}
 .home .content-pick .destination {
   width: 30%;
   margin-bottom: 30px;
 }
+@media (max-width: 500px) {
+  .home .content-pick .destination {
+    display: flex;
+    Flex-flow: row wrap;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    margin: auto;
+    padding: 1rem;
+  }
+}
 .home .content-pick .destination .btn {
   display: flex;
   justify-content: center;
diff --git a/less/home-page.less b/less/home-page.less
index 47372aa5ba..63172d5718 100644
--- a/less/home-page.less
+++ b/less/home-page.less
@@ -2,21 +2,34 @@
 .home {
 
   .content-section {
+    @media @mobile {
+      .mobile();
+  }
     margin: 30px 0;
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     
     .text-content {
+      @media @mobile {
+        .mobile();
+    }
       width: 48%;
       padding-right: 1%;
     }
 
     .img-content {
+      @media @mobile {
+        .mobile();
+    }
+
       width: 48%;
       padding-left: 1%;
 
       img {
+        @media @mobile {
+          .mobile();
+      }
         border-radius: 10px;
       }
     }
@@ -29,10 +42,16 @@
 
 
   .inverse-content {
+    @media @mobile {
+      .mobile();
+  }
     padding-bottom: 30px;
     border-bottom: 2px dashed @navigation-border;
 
     .text-content {
+      @media @mobile {
+        .mobile();
+    }
       padding-left: 1%;
       padding-right: 0;
     }
@@ -44,21 +63,33 @@
   }
 
   .content-destination {
+    @media @mobile {
+      .mobile();
+  }
     width: 75%;
     margin: 0 auto 30px;
 
     img {
+      @media @mobile {
+        .mobile();
+    }
       border-radius: 10px;
     }
   }
 
   .content-pick {
+    @media @mobile {
+      .mobile();
+  }
     padding-top: 30px;
     border-top: 2px dashed @navigation-border;
     display: flex;
     justify-content: space-between;
     
     .destination {
+      @media @mobile {
+        .mobile();
+    }
       width: 30%;
       margin-bottom: 30px;
       
diff --git a/less/intro.less b/less/intro.less
index d6d51f7d19..437592f61d 100644
--- a/less/intro.less
+++ b/less/intro.less
@@ -1,4 +1,7 @@
 intro {
+    @media @mobile {
+        .mobile();
+    }
     h5 {
         border-bottom: 2px dashed @navigation-border;
         img {
diff --git a/less/mixins.less b/less/mixins.less
index cb07a4d639..8d6d76912e 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -22,10 +22,12 @@
     font-size: 1.5rem white bold;
   }
 
-  .mobile(max-width: 500px){
+  .mobile(){
     display: flex;
-    flex-direction: column;
+    Flex-flow: row wrap;
     justify-content: center;
-    text-align: center;
-    max-width: 500px;
+    align-items: center;
+    width: 100%;
+    margin: auto;
+    padding: 1.0rem;
   }
\ No newline at end of file
diff --git a/less/navigation.less b/less/navigation.less
index d7386e6f53..52256411d4 100644
--- a/less/navigation.less
+++ b/less/navigation.less
@@ -1,10 +1,10 @@
 body {
-    @media @mobile {
-        
-    }
     .contain();
 
     .containernav {
+        @media @mobile {
+            .mobile();
+        }
         display:flex;
         align-items: flex-end;
         padding: 5% 0% 2.5% 0%;

From 562deec3af764c27c2d1f15f4d5641911f3515eb Mon Sep 17 00:00:00 2001
From: Elizabeth Knoll <worldwellness00@gmail.com>
Date: Fri, 24 Apr 2020 16:18:32 -0500
Subject: [PATCH 09/13] mobile ready

---
 css/index.css    | 60 ++++++++++++++++++++++++++++++++++++++----------
 less/mixins.less |  6 ++++-
 2 files changed, 53 insertions(+), 13 deletions(-)

diff --git a/css/index.css b/css/index.css
index 55ac953976..d3f8f8af9e 100644
--- a/css/index.css
+++ b/css/index.css
@@ -183,12 +183,15 @@ body .containernav {
   body .containernav {
     display: flex;
     Flex-flow: row wrap;
-    justify-content: center;
+    justify-content: space-around;
     align-items: center;
     width: 100%;
     margin: auto;
     padding: 1rem;
   }
+  body .containernav .btn {
+    width: 100%;
+  }
 }
 body .containernav a {
   text-decoration: none;
@@ -200,12 +203,15 @@ body .containernav a {
   intro {
     display: flex;
     Flex-flow: row wrap;
-    justify-content: center;
+    justify-content: space-around;
     align-items: center;
     width: 100%;
     margin: auto;
     padding: 1rem;
   }
+  intro .btn {
+    width: 100%;
+  }
 }
 intro h5 {
   border-bottom: 2px dashed #C0C0C0;
@@ -231,12 +237,15 @@ intro h5 {
   .home .content-section {
     display: flex;
     Flex-flow: row wrap;
-    justify-content: center;
+    justify-content: space-around;
     align-items: center;
     width: 100%;
     margin: auto;
     padding: 1rem;
   }
+  .home .content-section .btn {
+    width: 100%;
+  }
 }
 .home .content-section .text-content {
   width: 48%;
@@ -246,12 +255,15 @@ intro h5 {
   .home .content-section .text-content {
     display: flex;
     Flex-flow: row wrap;
-    justify-content: center;
+    justify-content: space-around;
     align-items: center;
     width: 100%;
     margin: auto;
     padding: 1rem;
   }
+  .home .content-section .text-content .btn {
+    width: 100%;
+  }
 }
 .home .content-section .img-content {
   width: 48%;
@@ -261,12 +273,15 @@ intro h5 {
   .home .content-section .img-content {
     display: flex;
     Flex-flow: row wrap;
-    justify-content: center;
+    justify-content: space-around;
     align-items: center;
     width: 100%;
     margin: auto;
     padding: 1rem;
   }
+  .home .content-section .img-content .btn {
+    width: 100%;
+  }
 }
 .home .content-section .img-content img {
   border-radius: 10px;
@@ -275,12 +290,15 @@ intro h5 {
   .home .content-section .img-content img {
     display: flex;
     Flex-flow: row wrap;
-    justify-content: center;
+    justify-content: space-around;
     align-items: center;
     width: 100%;
     margin: auto;
     padding: 1rem;
   }
+  .home .content-section .img-content img .btn {
+    width: 100%;
+  }
 }
 .home h5 {
   border-top: 2px dashed #C0C0C0;
@@ -294,12 +312,15 @@ intro h5 {
   .home .inverse-content {
     display: flex;
     Flex-flow: row wrap;
-    justify-content: center;
+    justify-content: space-around;
     align-items: center;
     width: 100%;
     margin: auto;
     padding: 1rem;
   }
+  .home .inverse-content .btn {
+    width: 100%;
+  }
 }
 .home .inverse-content .text-content {
   padding-left: 1%;
@@ -309,12 +330,15 @@ intro h5 {
   .home .inverse-content .text-content {
     display: flex;
     Flex-flow: row wrap;
-    justify-content: center;
+    justify-content: space-around;
     align-items: center;
     width: 100%;
     margin: auto;
     padding: 1rem;
   }
+  .home .inverse-content .text-content .btn {
+    width: 100%;
+  }
 }
 .home .inverse-content .img-content {
   padding-right: 1%;
@@ -328,12 +352,15 @@ intro h5 {
   .home .content-destination {
     display: flex;
     Flex-flow: row wrap;
-    justify-content: center;
+    justify-content: space-around;
     align-items: center;
     width: 100%;
     margin: auto;
     padding: 1rem;
   }
+  .home .content-destination .btn {
+    width: 100%;
+  }
 }
 .home .content-destination img {
   border-radius: 10px;
@@ -342,12 +369,15 @@ intro h5 {
   .home .content-destination img {
     display: flex;
     Flex-flow: row wrap;
-    justify-content: center;
+    justify-content: space-around;
     align-items: center;
     width: 100%;
     margin: auto;
     padding: 1rem;
   }
+  .home .content-destination img .btn {
+    width: 100%;
+  }
 }
 .home .content-pick {
   padding-top: 30px;
@@ -359,12 +389,15 @@ intro h5 {
   .home .content-pick {
     display: flex;
     Flex-flow: row wrap;
-    justify-content: center;
+    justify-content: space-around;
     align-items: center;
     width: 100%;
     margin: auto;
     padding: 1rem;
   }
+  .home .content-pick .btn {
+    width: 100%;
+  }
 }
 .home .content-pick .destination {
   width: 30%;
@@ -374,12 +407,15 @@ intro h5 {
   .home .content-pick .destination {
     display: flex;
     Flex-flow: row wrap;
-    justify-content: center;
+    justify-content: space-around;
     align-items: center;
     width: 100%;
     margin: auto;
     padding: 1rem;
   }
+  .home .content-pick .destination .btn {
+    width: 100%;
+  }
 }
 .home .content-pick .destination .btn {
   display: flex;
diff --git a/less/mixins.less b/less/mixins.less
index 8d6d76912e..b5ec258d0f 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -25,9 +25,13 @@
   .mobile(){
     display: flex;
     Flex-flow: row wrap;
-    justify-content: center;
+    justify-content: space-around;
     align-items: center;
     width: 100%;
     margin: auto;
     padding: 1.0rem;
+
+    .btn {
+      width:100%;
+    }
   }
\ No newline at end of file

From c7b666092b5e883391b22b2f585fcfde29e57730 Mon Sep 17 00:00:00 2001
From: Elizabeth Knoll <worldwellness00@gmail.com>
Date: Fri, 24 Apr 2020 16:27:57 -0500
Subject: [PATCH 10/13] stretch:hover

---
 css/index.css    | 36 ++++++++++++++++++++++++++++++++++++
 less/mixins.less |  3 +++
 2 files changed, 39 insertions(+)

diff --git a/css/index.css b/css/index.css
index d3f8f8af9e..adaa69ce2f 100644
--- a/css/index.css
+++ b/css/index.css
@@ -192,6 +192,9 @@ body .containernav {
   body .containernav .btn {
     width: 100%;
   }
+  body .containernav .btn:hover {
+    background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
+  }
 }
 body .containernav a {
   text-decoration: none;
@@ -212,6 +215,9 @@ body .containernav a {
   intro .btn {
     width: 100%;
   }
+  intro .btn:hover {
+    background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
+  }
 }
 intro h5 {
   border-bottom: 2px dashed #C0C0C0;
@@ -246,6 +252,9 @@ intro h5 {
   .home .content-section .btn {
     width: 100%;
   }
+  .home .content-section .btn:hover {
+    background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
+  }
 }
 .home .content-section .text-content {
   width: 48%;
@@ -264,6 +273,9 @@ intro h5 {
   .home .content-section .text-content .btn {
     width: 100%;
   }
+  .home .content-section .text-content .btn:hover {
+    background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
+  }
 }
 .home .content-section .img-content {
   width: 48%;
@@ -282,6 +294,9 @@ intro h5 {
   .home .content-section .img-content .btn {
     width: 100%;
   }
+  .home .content-section .img-content .btn:hover {
+    background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
+  }
 }
 .home .content-section .img-content img {
   border-radius: 10px;
@@ -299,6 +314,9 @@ intro h5 {
   .home .content-section .img-content img .btn {
     width: 100%;
   }
+  .home .content-section .img-content img .btn:hover {
+    background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
+  }
 }
 .home h5 {
   border-top: 2px dashed #C0C0C0;
@@ -321,6 +339,9 @@ intro h5 {
   .home .inverse-content .btn {
     width: 100%;
   }
+  .home .inverse-content .btn:hover {
+    background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
+  }
 }
 .home .inverse-content .text-content {
   padding-left: 1%;
@@ -339,6 +360,9 @@ intro h5 {
   .home .inverse-content .text-content .btn {
     width: 100%;
   }
+  .home .inverse-content .text-content .btn:hover {
+    background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
+  }
 }
 .home .inverse-content .img-content {
   padding-right: 1%;
@@ -361,6 +385,9 @@ intro h5 {
   .home .content-destination .btn {
     width: 100%;
   }
+  .home .content-destination .btn:hover {
+    background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
+  }
 }
 .home .content-destination img {
   border-radius: 10px;
@@ -378,6 +405,9 @@ intro h5 {
   .home .content-destination img .btn {
     width: 100%;
   }
+  .home .content-destination img .btn:hover {
+    background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
+  }
 }
 .home .content-pick {
   padding-top: 30px;
@@ -398,6 +428,9 @@ intro h5 {
   .home .content-pick .btn {
     width: 100%;
   }
+  .home .content-pick .btn:hover {
+    background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
+  }
 }
 .home .content-pick .destination {
   width: 30%;
@@ -416,6 +449,9 @@ intro h5 {
   .home .content-pick .destination .btn {
     width: 100%;
   }
+  .home .content-pick .destination .btn:hover {
+    background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
+  }
 }
 .home .content-pick .destination .btn {
   display: flex;
diff --git a/less/mixins.less b/less/mixins.less
index b5ec258d0f..2c2f2ec026 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -34,4 +34,7 @@
     .btn {
       width:100%;
     }
+    .btn:hover {
+       background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
+    }
   }
\ No newline at end of file

From e325334dee2443c762b7dcfc4eec0342f4199cdd Mon Sep 17 00:00:00 2001
From: Elizabeth Knoll <worldwellness00@gmail.com>
Date: Fri, 24 Apr 2020 16:46:21 -0500
Subject: [PATCH 11/13] stretch Goal animation

---
 css/index.css       | 29 +++++++++++++++++++++++++++++
 less/Animation.less | 10 ++++++++++
 less/home-page.less |  1 +
 less/index.less     |  3 ++-
 less/mixins.less    | 14 +++++++++++++-
 5 files changed, 55 insertions(+), 2 deletions(-)
 create mode 100644 less/Animation.less

diff --git a/css/index.css b/css/index.css
index adaa69ce2f..9283b3fef6 100644
--- a/css/index.css
+++ b/css/index.css
@@ -466,3 +466,32 @@ intro h5 {
   font-family: Verdana, Geneva, Tahoma, sans-serif;
   font-size: 1.8rem;
 }
+.btn:hover {
+  -webkit-animation: fade-in 0.5s linear infinite alternate;
+  -moz-animation: fade-in 0.5s linear infinite alternate;
+  animation: fade-in 0.5s linear infinite alternate;
+}
+@-moz-keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 3;
+  }
+}
+@-webkit-keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 3;
+  }
+}
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 3;
+  }
+}
diff --git a/less/Animation.less b/less/Animation.less
new file mode 100644
index 0000000000..76576a0b9d
--- /dev/null
+++ b/less/Animation.less
@@ -0,0 +1,10 @@
+.btn:hover {
+	
+	.keyframes(fade-in;{
+		0% { opacity: 0; }
+		100% { opacity: 3; }
+		});
+
+	.animation(fade-in 0.5s linear infinite alternate)
+
+}
\ No newline at end of file
diff --git a/less/home-page.less b/less/home-page.less
index 63172d5718..00525a8e41 100644
--- a/less/home-page.less
+++ b/less/home-page.less
@@ -99,6 +99,7 @@
         color: white;
         font-family: Verdana, Geneva, Tahoma, sans-serif;
         font-size: 1.8rem;
+ 
       }
     }
   }
diff --git a/less/index.less b/less/index.less
index 0d14ca0945..6b6d6c580f 100644
--- a/less/index.less
+++ b/less/index.less
@@ -5,4 +5,5 @@
 @import "navigation";
 @import "intro";
 @import "footer";
-@import "home-page"; 
\ No newline at end of file
+@import "home-page"; 
+@import "Animation";
\ No newline at end of file
diff --git a/less/mixins.less b/less/mixins.less
index 2c2f2ec026..1d97cb551a 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -36,5 +36,17 @@
     }
     .btn:hover {
        background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
+       }
+
+    }
+    .keyframes(@name; @arguments) {
+      @-moz-keyframes @name { @arguments(); }
+      @-webkit-keyframes @name { @arguments(); }
+      @keyframes @name { @arguments(); }
     }
-  }
\ No newline at end of file
+    
+    .animation(@arguments) {
+      -webkit-animation: @arguments;
+      -moz-animation: @arguments;
+      animation: @arguments;
+    }
\ No newline at end of file

From 5607465eff1fbde6ce311b63287fde0af0ffab96 Mon Sep 17 00:00:00 2001
From: Elizabeth knoll <62455048+MissChiefGrey@users.noreply.github.com>
Date: Fri, 24 Apr 2020 16:49:39 -0500
Subject: [PATCH 12/13] Update README.md

---
 README.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 6cced5ad27..596dfa8b3f 100644
--- a/README.md
+++ b/README.md
@@ -46,11 +46,11 @@ Follow these steps for completing your project.
 
 ## Task 5: Mobile Updates Needed
 * [X] Use escaping to create a variable named `@mobile` that contains this value: `(max-width: 500px)`.  Use the `variables.less` file to house your variables.
-* [ ] Review the [mobile design file](design-files/fun-bus-mobile.png). You will see several design updates that need updating. 
-* [ ] Match the design file at `500px` as well as you can 
+* [x] Review the [mobile design file](design-files/fun-bus-mobile.png). You will see several design updates that need updating. 
+* [x] Match the design file at `500px` as well as you can 
 
 ## Stretch Goals: 
-* [ ] Create an animation mixin using parametric mixins
+* [x] 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
 

From 8e6d4bf04b2c65ec95dcc152ef96d60dbce35c42 Mon Sep 17 00:00:00 2001
From: Elizabeth knoll <62455048+MissChiefGrey@users.noreply.github.com>
Date: Fri, 24 Apr 2020 16:50:33 -0500
Subject: [PATCH 13/13] Update README.md

I am going to attempt the additional stretch goals
---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 596dfa8b3f..efc613ac23 100644
--- a/README.md
+++ b/README.md
@@ -51,8 +51,8 @@ Follow these steps for completing your project.
 
 ## Stretch Goals: 
 * [x] 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
+* [A] 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. 
+* [A] Style the site to look good at all sizes, not just desktop and phone