From 95bfedd6bcce6a8319e6f83dd2b6e1a9221c441a Mon Sep 17 00:00:00 2001
From: Daniel Terry <daniel-terry@lambdastudents.com>
Date: Thu, 21 May 2020 22:17:11 -0400
Subject: [PATCH 1/4]  started working on nav

---
 css/index.css        |   8 +-
 index.css            | 262 +++++++++++++++++++++++++++++++++++++++++++
 index.html           |  16 ++-
 less/index.less      |   7 ++
 less/mixins.less     |   9 +-
 less/navigation.less |  30 ++++-
 less/variables.less  |   6 +-
 7 files changed, 332 insertions(+), 6 deletions(-)
 create mode 100644 index.css

diff --git a/css/index.css b/css/index.css
index e764f2b01f..48e8d9d364 100644
--- a/css/index.css
+++ b/css/index.css
@@ -1 +1,7 @@
-/* LESS needs to be processed */
\ No newline at end of file
+@import "variables";
+@import "mixins";
+@import "reset";
+@import "global";
+@import "navigation";
+@import "footer";
+@import "home-page";
diff --git a/index.css b/index.css
new file mode 100644
index 0000000000..ef05075eb3
--- /dev/null
+++ b/index.css
@@ -0,0 +1,262 @@
+/* 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 {
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+}
+@media (max-width:500px) {
+  header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-direction: column;
+  }
+}
+@media (max-width:500px) {
+  header h1 {
+    margin: 15px;
+  }
+}
+header .main-nav ul {
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  flex-wrap: wrap;
+}
+@media (max-width:500px) {
+  header .main-nav ul {
+    display: flex;
+    justify-content: space-evenly;
+    align-items: flex-end;
+  }
+}
+header .main-nav ul li {
+  margin-left: 15px;
+  font-size: 1.2rem;
+}
+.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..70ff78bacb 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,7 @@
   <title>Fun Bus Travel Agency - Solution</title>
 
   <link href="https://fonts.googleapis.com/css?family=Indie+Flower|Roboto" rel="stylesheet">
-  <link href="css/index.css" rel="stylesheet">
+  <link href="./index.css" rel="stylesheet">
 
   <!--[if lt IE 9]>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
@@ -15,7 +15,19 @@
 </head>
 
 <body>
-
+	<header class ="main-header">
+		<h1>
+			Fun Bus
+		</h1>
+			<nav class = "main-nav">
+				<ul>
+					<li>Home
+					<li>About Us
+					<li>Blog
+					<li>Contact
+				</ul>
+			</nav>
+	</header>
   
      
   <div class="container home">
diff --git a/less/index.less b/less/index.less
index c113ca2c46..40d1251639 100644
--- a/less/index.less
+++ b/less/index.less
@@ -1 +1,8 @@
 // Follow the order in the readme
+@import "variables";
+@import "mixins";
+@import "reset";
+@import "global";
+@import "navigation";
+@import "footer";
+@import "home-page";
diff --git a/less/mixins.less b/less/mixins.less
index 2d5c603558..4b0f3677b1 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -1 +1,8 @@
-// Mixins in here
\ No newline at end of file
+// Mixins in here
+//flex
+.displayFlex(@justify,@align){
+	display:flex;
+	justify-content:@justify;
+	align-items:@align;
+	}
+	
\ No newline at end of file
diff --git a/less/navigation.less b/less/navigation.less
index f89120a0f1..d97a47e118 100644
--- a/less/navigation.less
+++ b/less/navigation.less
@@ -1 +1,29 @@
-// Navigation Styles here
\ No newline at end of file
+// Navigation Styles here
+header{
+	.displayFlex(space-evenly,center);
+		@media@mobile{
+			.displayFlex(space-between,center);
+			flex-direction:column;
+		}
+	h1{  
+		@media @mobile{
+		margin:15px;
+		}
+	}
+.main-nav
+{	border-bottom:@navigation-border;
+			ul{
+				.displayFlex(space-evenly,center);
+				flex-wrap:wrap;
+				@media @mobile{
+					.displayFlex(space-evenly,flex-end);
+				}
+				li{
+				margin-left:15px;
+				font-size:1.2rem;
+
+				}
+				
+			}
+	}
+}
\ No newline at end of file
diff --git a/less/variables.less b/less/variables.less
index 916eb0b7e0..4d8bda629e 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;
+
+//media
+@mobile: ~"(max-width:500px)";
+@tablet: ~"(max-width:800px)";

From 3c75b6d93db935d5cafcce371249c99cdc8a0642 Mon Sep 17 00:00:00 2001
From: Daniel Terry <daniel-terry@lambdastudents.com>
Date: Fri, 22 May 2020 23:20:43 -0400
Subject: [PATCH 2/4] A MVP of the task, soon I will add multiple stretch goals

---
 css/index.css        | 349 ++++++++++++++++++++++++++++++++++++++++++-
 index.html           |  11 +-
 less/home-page.less  |  52 ++++++-
 less/index.less      |   3 +
 less/mixins.less     |  10 +-
 less/navigation.less |  27 +++-
 6 files changed, 429 insertions(+), 23 deletions(-)

diff --git a/css/index.css b/css/index.css
index 48e8d9d364..e4dc5a5da0 100644
--- a/css/index.css
+++ b/css/index.css
@@ -1,7 +1,342 @@
-@import "variables";
-@import "mixins";
-@import "reset";
-@import "global";
-@import "navigation";
-@import "footer";
-@import "home-page";
+/* 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%;
+  margin-top: 15px;
+  border-bottom: 2px dashed #C0C0C0;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  padding-bottom: 20px;
+}
+@media (max-width:500px) {
+  header {
+    display: flex;
+    justify-content: space-between;
+    align-items: stretch;
+    flex-direction: column;
+    padding-bottom: 10px;
+  }
+}
+header h1 {
+  margin-left: 35px;
+}
+@media (max-width:500px) {
+  header h1 {
+    text-align: center;
+    margin: 15px;
+  }
+}
+header .main-nav ul {
+  display: flex;
+  justify-content: space-evenly;
+  align-items: stretch;
+  flex-wrap: wrap;
+}
+@media (max-width:500px) {
+  header .main-nav ul {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: stretch;
+  }
+}
+header .main-nav ul li {
+  margin: 20px;
+  font-size: 1.5rem;
+  font-weight: bold;
+}
+@media (max-width:500px) {
+  header .main-nav ul li {
+    margin: 10px;
+  }
+}
+.footer {
+  width: 100%;
+  border-top: 2px dashed silver;
+  background: #FFEBCD;
+}
+.footer p {
+  text-align: center;
+  color: #212529;
+  font-size: 1.6rem;
+  padding: 20px;
+}
+.home .head {
+  display: flex;
+  justify-content: space-between;
+  align-items: stretch;
+  flex-direction: column;
+  border-bottom: 2px dashed #C0C0C0;
+  margin: 15px;
+}
+.home .head h2 {
+  margin-top: 15px;
+}
+.home .content-section {
+  margin: 30px 0;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+@media (max-width:500px) {
+  .home .content-section {
+    flex-direction: column;
+    align-items: center;
+  }
+}
+.home .text-content {
+  box-sizing: border-box;
+  width: 48%;
+  padding-right: 1%;
+}
+@media (max-width:500px) {
+  .home .text-content {
+    width: 90%;
+    margin: 15px;
+  }
+}
+.home .img-content {
+  width: 48%;
+  padding-left: 1%;
+}
+@media (max-width:500px) {
+  .home .img-content {
+    width: 90%;
+    margin-left: 35px;
+    padding: 0;
+  }
+}
+.home .img-content img {
+  border-radius: 10px;
+}
+.home .inverse-content {
+  padding-bottom: 30px;
+  border-bottom: 2px dashed #C0C0C0;
+}
+@media (max-width:500px) {
+  .home .inverse-content {
+    flex-direction: column-reverse;
+  }
+}
+.home .text-content {
+  padding-left: 1%;
+  padding-right: 0;
+}
+.home .img-content {
+  padding-right: 1%;
+  padding-left: 0;
+}
+.home .content-destination {
+  width: 75%;
+  margin: 0 auto 30px;
+}
+.home .content-destination img {
+  border-radius: 10px;
+}
+.home .content-pick {
+  padding-top: 30px;
+  border-top: 2px dashed #C0C0C0;
+  display: flex;
+  justify-content: space-between;
+}
+@media (max-width:500px) {
+  .home .content-pick {
+    flex-direction: column;
+    align-items: center;
+    width: 90%;
+    margin: 15px;
+  }
+}
+.home .destination {
+  width: 30%;
+  margin-bottom: 30px;
+}
+.home .destination .btn {
+  border-radius: 12px;
+  padding: 12px 28px;
+  font-size: 16px;
+  background-color: #008CBA;
+  color: white;
+}
+@media (max-width:500px) {
+  .home .destination .btn {
+    text-align: center;
+  }
+}
+@media (max-width:500px) {
+  .home .destination {
+    width: 90%;
+  }
+}
+p {
+  font-weight: light-bold;
+}
diff --git a/index.html b/index.html
index 70ff78bacb..ab9f8f4ef6 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,7 @@
   <title>Fun Bus Travel Agency - Solution</title>
 
   <link href="https://fonts.googleapis.com/css?family=Indie+Flower|Roboto" rel="stylesheet">
-  <link href="./index.css" rel="stylesheet">
+  <link href="./css/index.css" rel="stylesheet">
 
   <!--[if lt IE 9]>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
@@ -25,13 +25,16 @@ <h1>
 					<li>About Us
 					<li>Blog
 					<li>Contact
+					
 				</ul>
 			</nav>
 	</header>
-  
-     
   <div class="container home">
-   
+   <section class = "head">
+  	<img src ="C:\Users\Daniel\Preprocessing-II\img\fun-bus.jpg" alt = "bus" width ="auto">
+   	<h2>Welcome To Fun Bus!</h2>
+  	<p>Traveling expedition modern,clean webdesign blogger clean website theme website modern. Design pretty design, travelblogger adventure WordPress wanderlust theme blogger website expedition theme travelblogger. Adventure fun traveler pretty design website expedition.</p>
+   </section>
     <section class="content-section">
       <div class="text-content">
         <h2>Let's Go!</h2>
diff --git a/less/home-page.less b/less/home-page.less
index 5528d8a7a5..2e25555151 100644
--- a/less/home-page.less
+++ b/less/home-page.less
@@ -1,31 +1,59 @@
 .home {
-
+	.head{
+		.displayFlex(space-between,stretch);
+		flex-direction:column;
+		border-bottom: 2px dashed @navigation-border;
+		margin:15px;
+		h2{
+			margin-top:15px;
+		}
+	}
   .content-section {
     margin: 30px 0;
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
-
+    @media @mobile{
+    	flex-direction:column;
+    	align-items:center;
+    }
+    }
+	
    
     
     .text-content {
+    	box-sizing:border-box;
       width: 48%;
       padding-right: 1%;
+      @media @mobile{
+      	width:90%;
+      	margin:15px;
+      }
     }
 
     .img-content {
       width: 48%;
       padding-left: 1%;
+   	   @media @mobile {
+      	width:90%;
+      	margin-left:35px;
+      	padding:0;
+      }
 
       img {
         border-radius: 10px;
       }
     }
-  }
+  
 
   .inverse-content {
     padding-bottom: 30px;
     border-bottom: 2px dashed @navigation-border;
+    @media @mobile{
+    	flex-direction:column-reverse;
+    }
+    
+    }
 
     .text-content {
       padding-left: 1%;
@@ -36,7 +64,7 @@
       padding-right: 1%;
       padding-left: 0;
     }
-  }
+  
 
   .content-destination {
     width: 75%;
@@ -52,10 +80,26 @@
     border-top: 2px dashed @navigation-border;
     display: flex;
     justify-content: space-between;
+    @media @mobile{
+    	flex-direction:column;
+    	align-items:center;
+    	width:90%;
+    	margin:15px;
+    }
+  	 }
+    
 
     .destination {
       width: 30%;
       margin-bottom: 30px;
+      .btn{
+      	.button(12px);
+      	@media @mobile {
+      		text-align:center;
+      	}
+      }
+      @media @mobile{
+      width:90%;
     }
   }
 }// home
\ No newline at end of file
diff --git a/less/index.less b/less/index.less
index 40d1251639..6700bd55f5 100644
--- a/less/index.less
+++ b/less/index.less
@@ -6,3 +6,6 @@
 @import "navigation";
 @import "footer";
 @import "home-page";
+p{
+	font-weight:light-bold;
+}
\ No newline at end of file
diff --git a/less/mixins.less b/less/mixins.less
index 4b0f3677b1..fa7c75edd1 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -5,4 +5,12 @@
 	justify-content:@justify;
 	align-items:@align;
 	}
-	
\ No newline at end of file
+//button
+.button(@radius){
+	border-radius:@radius;
+	padding: 12px 28px;
+	font-size:16px;
+	background-color: #008CBA;
+	color:white;
+	
+}
\ No newline at end of file
diff --git a/less/navigation.less b/less/navigation.less
index d97a47e118..74661fa5b8 100644
--- a/less/navigation.less
+++ b/less/navigation.less
@@ -1,29 +1,42 @@
 // Navigation Styles here
+
 header{
+	width:100%;
+	margin-top:15px;
+	border-bottom: 2px dashed @navigation-border;
 	.displayFlex(space-evenly,center);
+	padding-bottom:20px;
 		@media@mobile{
-			.displayFlex(space-between,center);
+			.displayFlex(space-between,stretch);
 			flex-direction:column;
+			padding-bottom:10px;
 		}
 	h1{  
+		margin-left:35px;
 		@media @mobile{
+		text-align:center;
 		margin:15px;
 		}
 	}
 .main-nav
-{	border-bottom:@navigation-border;
+{	
 			ul{
-				.displayFlex(space-evenly,center);
+				.displayFlex(space-evenly,stretch);
 				flex-wrap:wrap;
 				@media @mobile{
-					.displayFlex(space-evenly,flex-end);
+					width:100%;
+					.displayFlex(space-between,stretch);
 				}
 				li{
-				margin-left:15px;
-				font-size:1.2rem;
+				margin:20px;
+				font-size:1.5rem;
+				font-weight:bold;
+				@media @mobile{
+				margin:10px;
+				}
 
 				}
-				
+			 
 			}
 	}
 }
\ No newline at end of file

From 686d10ddb0304822b0241b6cfc18361d8e264f4a Mon Sep 17 00:00:00 2001
From: Daniel Terry <daniel-terry@lambdastudents.com>
Date: Tue, 26 May 2020 19:33:20 -0400
Subject: [PATCH 3/4] made an animated mixin for stretch goal

---
 css/index.css       |  9 ++++++++-
 less/home-page.less |  5 +++--
 less/mixins.less    | 12 ++++++++++--
 3 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/css/index.css b/css/index.css
index e4dc5a5da0..b993f7f64f 100644
--- a/css/index.css
+++ b/css/index.css
@@ -322,10 +322,17 @@ header .main-nav ul li {
 }
 .home .destination .btn {
   border-radius: 12px;
-  padding: 12px 28px;
   font-size: 16px;
   background-color: #008CBA;
   color: white;
+  padding: 12px 28px;
+}
+.home .destination .btn:hover {
+  transition: ease 3s;
+  -moz-transform: rotate(360deg);
+  -webkit-transform: rotate(360deg);
+  -o-transform: rotate(360deg);
+  transform: rotate(360deg);
 }
 @media (max-width:500px) {
   .home .destination .btn {
diff --git a/less/home-page.less b/less/home-page.less
index 2e25555151..24f4f28f65 100644
--- a/less/home-page.less
+++ b/less/home-page.less
@@ -93,7 +93,7 @@
       width: 30%;
       margin-bottom: 30px;
       .btn{
-      	.button(12px);
+      	.button(12px,360deg);
       	@media @mobile {
       		text-align:center;
       	}
@@ -102,4 +102,5 @@
       width:90%;
     }
   }
-}// home
\ No newline at end of file
+}
+// home
\ No newline at end of file
diff --git a/less/mixins.less b/less/mixins.less
index fa7c75edd1..61ec8e4e19 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -6,11 +6,19 @@
 	align-items:@align;
 	}
 //button
-.button(@radius){
+.button(@radius,@rotate){
 	border-radius:@radius;
-	padding: 12px 28px;
 	font-size:16px;
 	background-color: #008CBA;
 	color:white;
 	
+	padding: 12px 28px;
+	&:hover{
+	transition:ease 3s;
+	-moz-transform:rotate(@rotate);
+	-webkit-transform:rotate(@rotate);
+	-o-transform:rotate(@rotate);
+	transform:rotate(@rotate);
+	
+	}
 }
\ No newline at end of file

From 8def8ec9c54de3b20aace3c8403037f5c0db4f32 Mon Sep 17 00:00:00 2001
From: Daniel Terry <daniel-terry@lambdastudents.com>
Date: Tue, 26 May 2020 22:55:05 -0400
Subject: [PATCH 4/4] added sneaky buttons that change color

---
 css/index.css    | 5 +++++
 less/mixins.less | 4 +++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/css/index.css b/css/index.css
index b993f7f64f..064ce814c0 100644
--- a/css/index.css
+++ b/css/index.css
@@ -327,6 +327,11 @@ header .main-nav ul li {
   color: white;
   padding: 12px 28px;
 }
+@media (max-width:500px) {
+  .home .destination .btn {
+    background-color: green;
+  }
+}
 .home .destination .btn:hover {
   transition: ease 3s;
   -moz-transform: rotate(360deg);
diff --git a/less/mixins.less b/less/mixins.less
index 61ec8e4e19..04b68125f1 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -11,8 +11,10 @@
 	font-size:16px;
 	background-color: #008CBA;
 	color:white;
-	
 	padding: 12px 28px;
+	@media @mobile{
+		background-color:green;
+	}
 	&:hover{
 	transition:ease 3s;
 	-moz-transform:rotate(@rotate);