From b6570b371aa1ad3fc4052a1d7d8977e3bd0bb4a9 Mon Sep 17 00:00:00 2001
From: Andrew Muto <amuto77@gmail.com>
Date: Wed, 13 May 2020 20:00:16 -0400
Subject: [PATCH 1/3] finished work in html and began work in navigation.less

---
 README.md            |  30 ++---
 css/index.css        | 255 ++++++++++++++++++++++++++++++++++++++++++-
 index.html           |  26 ++++-
 less/index.less      |  13 +++
 less/navigation.less |  32 +++++-
 5 files changed, 334 insertions(+), 22 deletions(-)

diff --git a/README.md b/README.md
index 8c6cbcf19f..4929aa70e4 100644
--- a/README.md
+++ b/README.md
@@ -4,29 +4,29 @@ 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.
-* [ ] 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
 
-* [ ] 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`
diff --git a/css/index.css b/css/index.css
index e764f2b01f..cfa94a192b 100644
--- a/css/index.css
+++ b/css/index.css
@@ -1 +1,254 @@
-/* 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;
+}
+header {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  flex-direction: row;
+  margin: 1rem 0;
+  padding: 1rem 0;
+}
+header nav {
+  display: flex;
+  justify-content: center;
+  flex-direction: row;
+}
+@media (max-width: 500px) {
+  header nav {
+    flex-direction: column;
+    justify-content: center;
+  }
+}
+header nav .links {
+  font-size: 2rem;
+}
+header nav .logo {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.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/index.html b/index.html
index bb8663b768..0d9460fdb4 100644
--- a/index.html
+++ b/index.html
@@ -15,11 +15,26 @@
 </head>
 
 <body>
-
-  
-     
-  <div class="container home">
-   
+  <header>
+    <nav>
+        <h1>Fun Bus</h1>
+      <div class="links">
+        <a href="#home">Home</a>
+        <a href="#about-us">About Us</a>
+        <a href="#blog">Blog</a>
+        <a href="#contact">Contact</a>
+      </div>
+    </nav>
+  </header>
+    <div class="logo">
+      <img src="https://raw.githubusercontent.com/amuto77/Preprocessing-II/master/img/fun-bus.jpg">
+    </div>
+    <div class="container home">
+      <h2 class="about-us">Welcome To Fun Bus!</h2>
+      <p>
+       Traveling expedition modern, clean webdesign blogger clean website theme website modern. Design pretty design, trvelblogger adventure Wordpress wanderlust theme blogger website expedition theme travelblogger. Adventure fun traveler pretty design website expedition.
+      </p> 
+    </div>
     <section class="content-section">
       <div class="text-content">
         <h2>Let's Go!</h2>
@@ -50,6 +65,7 @@ <h2>Pick Your Destination</h2>
 
       <div class="destination">
         <h4>Fun In The Sun</h4>
+      </div>
         <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>
diff --git a/less/index.less b/less/index.less
index c113ca2c46..19a7e9ccb0 100644
--- a/less/index.less
+++ b/less/index.less
@@ -1 +1,14 @@
 // 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
index f89120a0f1..117053007d 100644
--- a/less/navigation.less
+++ b/less/navigation.less
@@ -1 +1,31 @@
-// Navigation Styles here
\ No newline at end of file
+// Navigation Styles here
+header {
+    width:100%;
+    display: flex;
+    justify-content: center;
+    flex-direction: row;
+    margin: 1rem 0;
+    padding: 1rem 0;
+    nav {
+    display: flex;
+    justify-content: center;
+    flex-direction: row;
+        @media(max-width:500px) {
+            flex-direction: column;
+            justify-content: center;
+
+        }
+        .name {
+            
+        }
+        .links {
+            font-size: 2rem;
+        }
+        .logo {
+            width: 100%;
+			height: 100%;
+			object-fit: cover;
+            
+        }    
+    }
+}
\ No newline at end of file

From 9d83414d1b1f968ae4a571701645d28f01c78cce Mon Sep 17 00:00:00 2001
From: Andrew Muto <amuto77@gmail.com>
Date: Thu, 14 May 2020 11:13:12 -0400
Subject: [PATCH 2/3] fixed issues with header, nav, and body paragraphs

---
 css/index.css        | 55 +++++++++++++++++++++++++-------
 less/home-page.less  |  6 ++++
 less/navigation.less | 74 +++++++++++++++++++++++++++++++++-----------
 3 files changed, 106 insertions(+), 29 deletions(-)

diff --git a/css/index.css b/css/index.css
index cfa94a192b..85ff94ab07 100644
--- a/css/index.css
+++ b/css/index.css
@@ -169,31 +169,60 @@ img {
   margin: 0 auto;
 }
 header {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  flex-direction: row;
+  width: 100vw;
   margin: 1rem 0;
   padding: 1rem 0;
 }
 header nav {
+  width: 100%;
+  margin: 0 10%;
   display: flex;
-  justify-content: center;
+  justify-content: flex-start;
   flex-direction: row;
 }
+header nav h1 {
+  flex-basis: 51%;
+}
+header nav div {
+  display: flex;
+  flex-basis: 49%;
+}
+header nav div a {
+  text-decoration: none;
+  font-size: 2rem;
+  color: black;
+  margin: 0 2%;
+}
 @media (max-width: 500px) {
   header nav {
     flex-direction: column;
     justify-content: center;
+    align-items: center;
+    background: hotpink;
   }
 }
-header nav .links {
-  font-size: 2rem;
+.logo {
+  border-top: dotted silver;
+  margin-bottom: 2rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
-header nav .logo {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
+.container-home {
+  width: 100vw;
+  margin: 1rem 0;
+  padding: 1rem 0;
+  border-bottom: dotted silver;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.content-section {
+  margin: 1rem 0;
+  padding: 1rem 0;
+  display: flex;
+  justify-content: center;
+  flex-direction: row;
 }
 .footer {
   width: 100%;
@@ -206,6 +235,10 @@ header nav .logo {
   font-size: 1.6rem;
   padding: 20px;
 }
+body {
+  max-width: 100vw;
+  overflow-x: hidden;
+}
 .home .content-section {
   margin: 30px 0;
   display: flex;
diff --git a/less/home-page.less b/less/home-page.less
index 5528d8a7a5..d3217dbd99 100644
--- a/less/home-page.less
+++ b/less/home-page.less
@@ -1,3 +1,9 @@
+
+body {
+  max-width: 100vw;
+  overflow-x: hidden;
+}
+
 .home {
 
   .content-section {
diff --git a/less/navigation.less b/less/navigation.less
index 117053007d..0e7fd60134 100644
--- a/less/navigation.less
+++ b/less/navigation.less
@@ -1,31 +1,69 @@
 // Navigation Styles here
 header {
-    width:100%;
-    display: flex;
-    justify-content: center;
-    flex-direction: row;
+    width: 100vw;
     margin: 1rem 0;
     padding: 1rem 0;
+    
     nav {
+    width: 100%;
+    margin: 0 10%;
     display: flex;
-    justify-content: center;
+    justify-content: flex-start;
     flex-direction: row;
-        @media(max-width:500px) {
-            flex-direction: column;
-            justify-content: center;
+    
+        h1 {
+            flex-basis: 51%;
 
         }
-        .name {
-            
+
+
+        div {
+            display: flex;
+            flex-basis: 49%;        
+            a {
+                text-decoration: none;
+                font-size: 2rem;
+                color: black;
+                margin: 0 2%;
+            }
         }
-        .links {
-            font-size: 2rem;
+
+        @media (max-width: 500px) {
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            background: hotpink;
+
         }
-        .logo {
-            width: 100%;
-			height: 100%;
-			object-fit: cover;
-            
-        }    
+        
+    }
+}
+.logo {
+    border-top: dotted silver;
+    margin-bottom: 2rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    
+}
+.container-home {
+    width: 100vw;
+    margin: 1rem 0;
+    padding: 1rem 0;
+    border-bottom: dotted silver;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;  
+}
+
+.content-section {
+    margin: 1rem 0;
+    padding: 1rem 0;
+    display: flex;
+    justify-content: center;
+    flex-direction: row;
+    .text-content {
+
     }
+
 }
\ No newline at end of file

From be32bf6526c02959e2fb09bda39238c3d699af10 Mon Sep 17 00:00:00 2001
From: Andrew Muto <amuto77@gmail.com>
Date: Fri, 15 May 2020 10:40:04 -0400
Subject: [PATCH 3/3] Finished assignment with one stretch goal for added
 responsiveness

---
 README.md            |  16 ++--
 css/index.css        | 173 ++++++++++++++++++++++++++++++-------------
 index.html           |  57 ++++++++------
 less/footer.less     |   4 +
 less/global.less     |   8 ++
 less/home-page.less  |  82 +++++++++++++++++---
 less/mixins.less     |  20 ++++-
 less/navigation.less |  92 +++++++++--------------
 less/variables.less  |   6 +-
 9 files changed, 311 insertions(+), 147 deletions(-)

diff --git a/README.md b/README.md
index 4929aa70e4..1c251e42cb 100644
--- a/README.md
+++ b/README.md
@@ -38,20 +38,20 @@ 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
-* [ ] 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] 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
+* [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.
-* [ ] 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] 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] 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
-* [ ] 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. 
+* [x] 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
 
 
diff --git a/css/index.css b/css/index.css
index 85ff94ab07..6c7f976cc8 100644
--- a/css/index.css
+++ b/css/index.css
@@ -1,3 +1,6 @@
+.buttons:hover {
+  opacity: 1;
+}
 /* http://meyerweb.com/eric/tools/css/reset/ 
    v2.0 | 20110126
    License: none (public domain)
@@ -168,61 +171,50 @@ img {
   width: 100%;
   margin: 0 auto;
 }
-header {
-  width: 100vw;
-  margin: 1rem 0;
-  padding: 1rem 0;
+@media (max-width:500px) {
+  .container {
+    max-width: 500px;
+    width: 90%;
+    margin: 0 5%;
+  }
 }
-header nav {
-  width: 100%;
-  margin: 0 10%;
+nav {
   display: flex;
-  justify-content: flex-start;
   flex-direction: row;
+  align-items: center;
+  justify-content: space-evenly;
+  height: 96px;
 }
-header nav h1 {
-  flex-basis: 51%;
-}
-header nav div {
-  display: flex;
-  flex-basis: 49%;
+nav h1 {
+  width: 60%;
 }
-header nav div a {
+nav a {
+  font-size: 1.6rem;
   text-decoration: none;
-  font-size: 2rem;
   color: black;
-  margin: 0 2%;
 }
-@media (max-width: 500px) {
-  header nav {
-    flex-direction: column;
-    justify-content: center;
+hr.header-border {
+  border: 1.2px dashed lightGray;
+  margin: 0 -10vh;
+  width: 120%;
+}
+@media (max-width:500px) {
+  nav {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
     align-items: center;
-    background: hotpink;
+    justify-content: space-evenly;
+  }
+  nav h1 {
+    width: 100%;
+    text-align: center;
+  }
+  nav a {
+    font-size: 1.6rem;
+    text-decoration: none;
+    color: black;
   }
-}
-.logo {
-  border-top: dotted silver;
-  margin-bottom: 2rem;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.container-home {
-  width: 100vw;
-  margin: 1rem 0;
-  padding: 1rem 0;
-  border-bottom: dotted silver;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-.content-section {
-  margin: 1rem 0;
-  padding: 1rem 0;
-  display: flex;
-  justify-content: center;
-  flex-direction: row;
 }
 .footer {
   width: 100%;
@@ -235,9 +227,14 @@ header nav div a {
   font-size: 1.6rem;
   padding: 20px;
 }
-body {
-  max-width: 100vw;
-  overflow-x: hidden;
+@media (max-width:500px) {
+  .footer p {
+    font-weight: bold;
+  }
+}
+.home main {
+  margin: 30px 0;
+  border-bottom: 2px dashed #C0C0C0;
 }
 .home .content-section {
   margin: 30px 0;
@@ -256,6 +253,18 @@ body {
 .home .content-section .img-content img {
   border-radius: 10px;
 }
+@media (max-width:500px) {
+  .home .content-section {
+    flex-direction: column;
+  }
+  .home .content-section .text-content {
+    width: 96%;
+    padding: 12px 2%;
+  }
+  .home .content-section .img-content {
+    width: 100%;
+  }
+}
 .home .inverse-content {
   padding-bottom: 30px;
   border-bottom: 2px dashed #C0C0C0;
@@ -268,6 +277,11 @@ body {
   padding-right: 1%;
   padding-left: 0;
 }
+@media (max-width:500px) {
+  .home .inverse-content {
+    flex-direction: column-reverse;
+  }
+}
 .home .content-destination {
   width: 75%;
   margin: 0 auto 30px;
@@ -275,13 +289,72 @@ body {
 .home .content-destination img {
   border-radius: 10px;
 }
-.home .content-pick {
+@media (max-width:500px) {
+  .home .content-destination {
+    width: 100%;
+  }
+}
+.home input {
+  width: 32%;
+  display: flex;
+  flex-direction: row;
+  padding: 12px;
+  justify-content: space-evenly;
+  flex-wrap: wrap;
+}
+@media (max-width:500px) {
+  .home input {
+    width: 100%;
+    flex-direction: column;
+    margin: 6px 0;
+  }
+}
+.home textarea {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  padding: 12px;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin: 18px 0;
+}
+@media (max-width:500px) {
+  .home textarea {
+    margin: 6px 0;
+  }
+}
+.home form {
   padding-top: 30px;
   border-top: 2px dashed #C0C0C0;
   display: flex;
   justify-content: space-between;
+  flex-wrap: wrap;
 }
-.home .content-pick .destination {
+.home form .destination {
   width: 30%;
   margin-bottom: 30px;
 }
+@media (max-width:500px) {
+  .home form {
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+  .home form .destination {
+    width: 80%;
+  }
+}
+.home .btn {
+  background: #17A2B8;
+  color: #000000;
+  width: 100%;
+  padding: 12px;
+  border-radius: 15px;
+  margin: 10px 0;
+  text-align: center;
+  font-size: 1.75rem;
+  font-weight: bold;
+  opacity: 0.6;
+  transition: 2s;
+  cursor: pointer;
+}
diff --git a/index.html b/index.html
index 0d9460fdb4..d64fb1bbf0 100644
--- a/index.html
+++ b/index.html
@@ -12,29 +12,34 @@
   <!--[if lt IE 9]>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
   <![endif]-->
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 </head>
 
 <body>
-  <header>
+     
+  <div class="container home">
+
     <nav>
-        <h1>Fun Bus</h1>
-      <div class="links">
-        <a href="#home">Home</a>
-        <a href="#about-us">About Us</a>
-        <a href="#blog">Blog</a>
-        <a href="#contact">Contact</a>
-      </div>
+      <h1>Fun Bus</h1>
+      <a href="#home">Home</a>
+      <a href="#about">About Us</a>
+      <a href="#blog">Blog</a>
+      <a href="#contact">Contact</a>
     </nav>
-  </header>
-    <div class="logo">
-      <img src="https://raw.githubusercontent.com/amuto77/Preprocessing-II/master/img/fun-bus.jpg">
-    </div>
-    <div class="container home">
-      <h2 class="about-us">Welcome To Fun Bus!</h2>
+
+    <hr class="header-border">
+    <img src="img/fun-bus.jpg" alt="Fun Bus" />
+
+    <main>
+      <br />
+      <h2>Welcome to Fun Bus!</h2>
       <p>
-       Traveling expedition modern, clean webdesign blogger clean website theme website modern. Design pretty design, trvelblogger adventure Wordpress wanderlust theme blogger website expedition theme travelblogger. Adventure fun traveler pretty design website expedition.
-      </p> 
-    </div>
+        Traveling expedition modern, clean web design blogger clean website theme website modern. Design pretty
+        design, travel blogger adventure WordPress wonderlust theme blogger website expedition theme travel
+        blogger. Adventure fun traveler pretty design website expedition.
+      </p>
+    </main>
+   
     <section class="content-section">
       <div class="text-content">
         <h2>Let's Go!</h2>
@@ -63,22 +68,32 @@ <h2>Pick Your Destination</h2>
     </section>
     <section class="content-pick">
 
+      <!-- Created a simple form to use the existing sign up buttons. Of course, form won't work
+      without database access -->
+      <form method="POST" action="" name="choosePackage">
+
+        <input type="text" name="fullName" placeholder="Full Name" />
+        <input type="email" name="email" placeholder="Email" />
+        <input type="tel" name="phone" placeholder="Phone" />
+        <textarea name="instructions" placeholder="Do you have any Special Instructions?"></textarea>
+
       <div class="destination">
         <h4>Fun In The Sun</h4>
-      </div>
         <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>
+        <input type="submit" class="btn" name="package1" value="Sign me up" />
       </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>
+        <input type="submit" class="btn" name="package2" value="Sign me up" />
       </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>
+        <input type="submit" class="btn" name="package3" value="Sign me up" />
       </div>
+
+      </form>
     </section>
   </div><!-- container -->
 
diff --git a/less/footer.less b/less/footer.less
index 71cff032e9..d2d612b9db 100644
--- a/less/footer.less
+++ b/less/footer.less
@@ -8,5 +8,9 @@
     color: @font-color;
     font-size: 1.6rem;
     padding: 20px;
+
+    @media@phone {
+      font-weight:bold;
+    }
   }
 }
\ No newline at end of file
diff --git a/less/global.less b/less/global.less
index abe21bf970..df32fcfe03 100644
--- a/less/global.less
+++ b/less/global.less
@@ -44,3 +44,11 @@ img {
   width: 100%;
   margin: 0 auto;
 }
+
+@media@phone {
+  .container {
+    max-width:500px;
+    width:90%;
+    margin:0 5%;
+  }
+}
\ No newline at end of file
diff --git a/less/home-page.less b/less/home-page.less
index d3217dbd99..b051d4cac3 100644
--- a/less/home-page.less
+++ b/less/home-page.less
@@ -1,18 +1,15 @@
-
-body {
-  max-width: 100vw;
-  overflow-x: hidden;
-}
-
 .home {
 
+  main {
+    margin:30px 0;
+    border-bottom:2px dashed @navigation-border;
+  }
+
   .content-section {
     margin: 30px 0;
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
-
-   
     
     .text-content {
       width: 48%;
@@ -27,6 +24,19 @@ body {
         border-radius: 10px;
       }
     }
+
+    @media@phone {
+      flex-direction:column;
+
+    .text-content {
+      width:96%;
+      padding:12px 2%;
+    }
+
+    .img-content {
+      width:100%;
+    }
+  }
   }
 
   .inverse-content {
@@ -42,6 +52,12 @@ body {
       padding-right: 1%;
       padding-left: 0;
     }
+
+    @media@phone {
+
+      flex-direction:column-reverse;
+
+    }
   }
 
   .content-destination {
@@ -51,17 +67,65 @@ body {
     img {
       border-radius: 10px;
     }
+
+    @media@phone {
+      width:100%;
+    }
+  }
+
+  input { 
+    width:32%;
+    display:flex;
+    flex-direction:row;
+    padding:12px;
+    justify-content:space-evenly;
+    flex-wrap:wrap;
+
+    @media@phone {
+      width:100%;
+      flex-direction:column;
+      margin:6px 0;
+    }
+  }
+
+  textarea {
+    width:100%;
+    display:flex;
+    flex-direction:row;
+    padding:12px;
+    justify-content:center;
+    flex-wrap:wrap;
+    margin:18px 0;
+
+    @media@phone {
+      margin:6px 0;
+    }
   }
 
-  .content-pick {
+  form {
     padding-top: 30px;
     border-top: 2px dashed @navigation-border;
     display: flex;
     justify-content: space-between;
+    flex-wrap:wrap;
 
     .destination {
       width: 30%;
       margin-bottom: 30px;
     }
+
+    @media@phone {
+      flex-direction:column;
+      justify-content:center;
+      align-items:center;
+
+      .destination {
+        width:80%;
+      }
+    }
+  }
+
+  .btn {
+    .buttons(@button-bg,@font-color);
   }
 }// home
\ No newline at end of file
diff --git a/less/mixins.less b/less/mixins.less
index 2d5c603558..d6e19da45f 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -1 +1,19 @@
-// Mixins in here
\ No newline at end of file
+// Mixins in here
+.buttons(@button-bg,@font-color) {
+    background:@button-bg;
+    color:darken(@font-color,20%);
+    width:100%;
+    padding:12px;
+    border-radius:15px;
+    margin:10px 0;
+    text-align:center;
+    font-size:1.75rem;
+    font-weight:bold;
+    opacity:0.6;
+    transition:2s; // Stretch goal!
+    cursor:pointer;
+}
+
+.buttons:hover {
+    opacity:1;
+}
\ No newline at end of file
diff --git a/less/navigation.less b/less/navigation.less
index 0e7fd60134..d0117bb277 100644
--- a/less/navigation.less
+++ b/less/navigation.less
@@ -1,69 +1,47 @@
 // Navigation Styles here
-header {
-    width: 100vw;
-    margin: 1rem 0;
-    padding: 1rem 0;
-    
-    nav {
-    width: 100%;
-    margin: 0 10%;
-    display: flex;
-    justify-content: flex-start;
-    flex-direction: row;
-    
-        h1 {
-            flex-basis: 51%;
-
-        }
-
 
-        div {
-            display: flex;
-            flex-basis: 49%;        
-            a {
-                text-decoration: none;
-                font-size: 2rem;
-                color: black;
-                margin: 0 2%;
-            }
-        }
 
-        @media (max-width: 500px) {
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            background: hotpink;
+nav {
+    display:flex;
+    flex-direction:row;
+    align-items:center;
+    justify-content:space-evenly;
+    height:96px;
+}
 
-        }
-        
-    }
+nav h1 {
+    width:60%;
 }
-.logo {
-    border-top: dotted silver;
-    margin-bottom: 2rem;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    
+
+nav a {
+    font-size:1.6rem;
+    text-decoration:none;
+    color:black;
 }
-.container-home {
-    width: 100vw;
-    margin: 1rem 0;
-    padding: 1rem 0;
-    border-bottom: dotted silver;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;  
+
+hr.header-border {
+    border:1.2px dashed lightGray;
+    margin:0 -10vh;
+    width:120%;
 }
 
-.content-section {
-    margin: 1rem 0;
-    padding: 1rem 0;
-    display: flex;
-    justify-content: center;
-    flex-direction: row;
-    .text-content {
+@media @phone{
+    nav {
+        display:flex;
+        flex-direction:row;
+        flex-wrap:wrap;
+        align-items:center;
+        justify-content:space-evenly;
+    }
 
+    nav h1 {
+        width:100%;
+        text-align:center;
     }
 
+    nav a {
+        font-size:1.6rem;
+        text-decoration:none;
+        color:black;
+    }
 }
\ No newline at end of file
diff --git a/less/variables.less b/less/variables.less
index 916eb0b7e0..c56c6dfdaa 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -6,9 +6,13 @@
 @navigation-border: @silver;
 @footer-bg: @sandy-beach;
 
+
 // Colors
 @white: #FFFFFF;
 @silver: #C0C0C0;
 @shark: #212529;
 @eastern-blue: #17A2B8;
-@sandy-beach: #FFEBCD;
\ No newline at end of file
+@sandy-beach: #FFEBCD;
+
+// Responsiveness
+@phone: ~'(max-width:500px)';
\ No newline at end of file