added media queries

Author: 0xMMelvin

assets/css/styles.css

@@ -31,7 +31,7 @@ a.btn {
 	text-transform: uppercase;
 	font-weight: bold;
 	text-align: center;
-	background-color: #7d3faf;
+	background-color: #4f2481;
 	opacity: 1;
 }
 
@@ -56,7 +56,7 @@ section:not(.hero):nth-child(even) {
 hr {
 	width: 250px;
 	height: 3px;
-	background-color: #7d3faf;
+	background-color: #4f2481;
 	border: 0;
 	margin-bottom: 50px;
 }
@@ -76,6 +76,12 @@ section p {
 	text-align: center;
 }
 
+@media (max-width: 800px) {
+	section {
+		padding: 50px 20px;
+	}
+}
+
 /*Header Styles*/
 
 header {
@@ -109,6 +115,17 @@ header nav li {
 	margin: 0 15px;
 }
 
+@media (max-width: 800px) {
+	header {
+		padding: 20px 50px;
+		flex-direction: column;
+	}
+
+	header h2 {
+		margin-bottom: 15px;
+	}
+}
+
 /*Hero Styles*/
 
 .hero {
@@ -127,7 +144,7 @@ header nav li {
 	height: 100%;
 	background-size: cover;
 	z-index: -1;
-	background-color: #80a3db;
+	background-color: #604281;
 }
 
 .hero h1 {
@@ -157,6 +174,24 @@ header nav li {
 	}
 }
 
+@media (max-width: 800px) {
+	.hero {
+		min-height: 600px;
+	}
+
+	.hero h1 {
+		font-size: 48px;
+	}
+
+	.hero h3 {
+		font-size: 24px;
+	}
+
+	.hero a.btn {
+		padding: 15px 40px;
+	}
+}
+
 /*Destinations Section*/
 
 .destinations .grid li {
@@ -175,6 +210,20 @@ header nav li {
 	flex-basis: 70%;
 }
 
+@media (max-width: 1100px) {
+	.destinations .grid li.small,
+	.destinations .grid li.large {
+		flex-basis: 50%;
+	}
+}
+
+@media (max-width: 800px) {
+	.destinations .grid li.small,
+	.destinations .grid li.large {
+		flex-basis: 100%;
+	}
+}
+
 /*Packages Section*/
 
 .packages .grid li {
@@ -184,68 +233,107 @@ header nav li {
 }
 
 .packages .grid li i {
-	color: #7d3fafa6;
+	color: #604281;
 }
 
 .packages .grid li h4 {
 	font-size: 30px;
 	margin: 25px 0;
 }
 
-/* Testimonials */
+@media (max-width: 800px) {
+	.packages .grid li {
+		flex-basis: 100%;
+		padding: 20px;
+	}
+}
+
+/*Testimonials Section*/
 
 .testimonials .quote {
-    font-size: 22px;
-    font-weight: 300;
-    line-height: 1.5;
-    margin: 40px 0 25px;
+	font-size: 22px;
+	font-weight: 300;
+	line-height: 1.5;
+	margin: 40px 0 25px;
 }
 
-/* Contact Section */
+@media (max-width: 800px) {
+	.testimonials .quote {
+		font-size: 18px;
+		margin: 15px 0;
+	}
+
+	.testimonials .author {
+		font-size: 14px;
+	}
+}
+
+/*Contact Section*/
 
 .contact form {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-wrap: wrap;
-    width: 60%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-wrap: wrap;
+	width: 60%;
 }
 
 .contact form .btn {
-    padding: 18px 42px;
+	padding: 18px 42px;
+}
+
+.contact form input {
+	padding: 15px;
+	margin-right: 30px;
+	font-size: 18px;
+	color: #555;
+	flex: 1;
 }
 
-.contact form input  {
-    padding: 15px;
-    margin-right: 30px;
-    font-size: 18px;
-    color: #555;
-    flex: 1;
+@media (max-width: 1000px) {
+	.contact form input {
+		flex-basis: 100%;
+		margin: 0 0 20px 0;
+	}
 }
 
-/* Footer Section */
+/*Footer Section*/
 
 footer {
-    display: flex;
-    align-items: center;
-    justify-content: space-around;
-    background-color: #7d3faf;
-    color: #fff;
-    padding: 20px 0;
+	display: flex;
+	align-items: center;
+	justify-content: space-around;
+	background-color: #4f2481;
+	color: #fff;
+	padding: 20px 0;
 }
 
 footer ul {
-    display: flex;
+	display: flex;
 }
 
 footer ul li {
-    margin-left: 16px;
+	margin-left: 16px;
 }
 
 footer p {
-    text-transform: uppercase;
-    font-size: 14px;
-    opacity: 0.6;
-    align-self: center;
-    padding: 5px;
-}
+	text-transform: uppercase;
+	font-size: 14px;
+	opacity: 0.6;
+	align-self: center;
+}
+
+@media (max-width: 1100px) {
+	footer {
+		flex-direction: column;
+	}
+
+	footer p {
+		text-align: center;
+		margin-bottom: 20px;
+	}
+
+	footer ul li {
+		margin: 0 8px;
+	}
+}