diff --git a/css-project/01-starter-code/assets/css/styles.css b/css-project/01-starter-code/assets/css/styles.css
new file mode 100644
index 00000000..e69de29b
diff --git a/css-project/01-starter-code/assets/img/main.jpg b/css-project/01-starter-code/assets/img/main.jpg
new file mode 100644
index 00000000..be68702e
Binary files /dev/null and b/css-project/01-starter-code/assets/img/main.jpg differ
diff --git a/css-project/01-starter-code/assets/img/mountain1.jpg b/css-project/01-starter-code/assets/img/mountain1.jpg
new file mode 100644
index 00000000..3d860544
Binary files /dev/null and b/css-project/01-starter-code/assets/img/mountain1.jpg differ
diff --git a/css-project/01-starter-code/assets/img/mountain2.jpg b/css-project/01-starter-code/assets/img/mountain2.jpg
new file mode 100644
index 00000000..11b6a95c
Binary files /dev/null and b/css-project/01-starter-code/assets/img/mountain2.jpg differ
diff --git a/css-project/01-starter-code/assets/img/mountain3.jpg b/css-project/01-starter-code/assets/img/mountain3.jpg
new file mode 100644
index 00000000..c40dc124
Binary files /dev/null and b/css-project/01-starter-code/assets/img/mountain3.jpg differ
diff --git a/css-project/01-starter-code/assets/img/mountain4.jpg b/css-project/01-starter-code/assets/img/mountain4.jpg
new file mode 100644
index 00000000..f2acd1a3
Binary files /dev/null and b/css-project/01-starter-code/assets/img/mountain4.jpg differ
diff --git a/css-project/01-starter-code/index.html b/css-project/01-starter-code/index.html
new file mode 100644
index 00000000..7e53b6fe
--- /dev/null
+++ b/css-project/01-starter-code/index.html
@@ -0,0 +1,14 @@
+
+
+
+
+
+ Mountain Travel
+
+
+
+
+
+
+
+
diff --git a/css-project/02-nav-and-header/assets/css/styles.css b/css-project/02-nav-and-header/assets/css/styles.css
new file mode 100644
index 00000000..03d3d568
--- /dev/null
+++ b/css-project/02-nav-and-header/assets/css/styles.css
@@ -0,0 +1,138 @@
+/*General Styles*/
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+html {
+ font: normal 16px sans-serif;
+ color: #555;
+}
+
+nav {
+ list-style: none;
+}
+
+a {
+ text-decoration: none;
+ opacity: 0.75;
+ color: #fff;
+}
+
+a:hover {
+ opacity: 1;
+}
+
+a.btn {
+ border-radius: 4px;
+ text-transform: uppercase;
+ font-weight: bold;
+ text-align: center;
+ background-color: #3f51b5;
+ opacity: 1;
+}
+
+section {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 100px 80px;
+}
+
+/*Header Styles*/
+
+header {
+ position: absolute;
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 35px 100px 0;
+ animation: 1s fadein 0.5s forwards;
+ opacity: 0;
+ color: #fff;
+}
+
+@keyframes fadein {
+ 100% {
+ opacity: 1;
+ }
+}
+
+header h2 {
+ font-family: "Quicksand", sans-serif;
+}
+
+header nav {
+ display: flex;
+ margin-right: -15px;
+}
+
+header nav li {
+ margin: 0 15px;
+}
+
+/*Hero Styles*/
+
+.hero {
+ position: relative;
+ justify-content: center;
+ text-align: center;
+ min-height: 100vh;
+ color: #fff;
+}
+
+.hero .background-image {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-size: cover;
+ z-index: -1;
+ background-color: #80a3db;
+}
+
+.hero h1 {
+ font: bold 60px "Open Sans", sans-serif;
+ margin-bottom: 15px;
+}
+
+.hero h3 {
+ font: normal 28px "Open Sans", sans-serif;
+ margin-bottom: 40px;
+}
+
+.hero a.btn {
+ padding: 20px 46px;
+}
+
+.hero-content-area {
+ opacity: 0;
+ margin-top: 100px;
+ animation: 1s slidefade 1s forwards;
+}
+
+@keyframes slidefade {
+ 100% {
+ opacity: 1;
+ margin: 0;
+ }
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/css-project/02-nav-and-header/assets/img/main.jpg b/css-project/02-nav-and-header/assets/img/main.jpg
new file mode 100644
index 00000000..be68702e
Binary files /dev/null and b/css-project/02-nav-and-header/assets/img/main.jpg differ
diff --git a/css-project/02-nav-and-header/assets/img/mountain1.jpg b/css-project/02-nav-and-header/assets/img/mountain1.jpg
new file mode 100644
index 00000000..3d860544
Binary files /dev/null and b/css-project/02-nav-and-header/assets/img/mountain1.jpg differ
diff --git a/css-project/02-nav-and-header/assets/img/mountain2.jpg b/css-project/02-nav-and-header/assets/img/mountain2.jpg
new file mode 100644
index 00000000..11b6a95c
Binary files /dev/null and b/css-project/02-nav-and-header/assets/img/mountain2.jpg differ
diff --git a/css-project/02-nav-and-header/assets/img/mountain3.jpg b/css-project/02-nav-and-header/assets/img/mountain3.jpg
new file mode 100644
index 00000000..c40dc124
Binary files /dev/null and b/css-project/02-nav-and-header/assets/img/mountain3.jpg differ
diff --git a/css-project/02-nav-and-header/assets/img/mountain4.jpg b/css-project/02-nav-and-header/assets/img/mountain4.jpg
new file mode 100644
index 00000000..f2acd1a3
Binary files /dev/null and b/css-project/02-nav-and-header/assets/img/mountain4.jpg differ
diff --git a/css-project/02-nav-and-header/index.html b/css-project/02-nav-and-header/index.html
new file mode 100644
index 00000000..01510f92
--- /dev/null
+++ b/css-project/02-nav-and-header/index.html
@@ -0,0 +1,32 @@
+
+
+
+
+
+ Mountain Travel
+
+
+
+
+
+
+
+
+
+
+
+
Mountain Travel
+
Unmissable Adventure Tours Around The World
+
Contact Us Now
+
+
+
+
+
diff --git a/css-project/03-destinations-and-features/assets/css/styles.css b/css-project/03-destinations-and-features/assets/css/styles.css
new file mode 100644
index 00000000..b64b03e2
--- /dev/null
+++ b/css-project/03-destinations-and-features/assets/css/styles.css
@@ -0,0 +1,204 @@
+/*General Styles*/
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+html {
+ font: normal 16px sans-serif;
+ color: #555;
+}
+
+ul,
+nav {
+ list-style: none;
+}
+
+a {
+ text-decoration: none;
+ opacity: 0.75;
+ color: #fff;
+}
+
+a:hover {
+ opacity: 1;
+}
+
+a.btn {
+ border-radius: 4px;
+ text-transform: uppercase;
+ font-weight: bold;
+ text-align: center;
+ background-color: #3f51b5;
+ opacity: 1;
+}
+
+section {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 100px 80px;
+}
+
+section:not(.hero):nth-child(even) {
+ background-color: #f5f5f5;
+}
+
+.grid {
+ width: 100%;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+}
+
+hr {
+ width: 250px;
+ height: 3px;
+ background-color: #3f51b5;
+ border: 0;
+ margin-bottom: 50px;
+}
+
+section h3.title {
+ text-transform: capitalize;
+ font: bold 32px "Open Sans", sans-serif;
+ margin-bottom: 30px;
+ text-align: center;
+}
+
+section p {
+ max-width: 775px;
+ line-height: 2;
+ padding: 0 20px;
+ margin-bottom: 30px;
+ text-align: center;
+}
+
+/*Header Styles*/
+
+header {
+ position: absolute;
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 35px 100px 0;
+ animation: 1s fadein 0.5s forwards;
+ opacity: 0;
+ color: #fff;
+}
+
+@keyframes fadein {
+ 100% {
+ opacity: 1;
+ }
+}
+
+header h2 {
+ font-family: "Quicksand", sans-serif;
+}
+
+header nav {
+ display: flex;
+ margin-right: -15px;
+}
+
+header nav li {
+ margin: 0 15px;
+}
+
+/*Hero Styles*/
+
+.hero {
+ position: relative;
+ justify-content: center;
+ text-align: center;
+ min-height: 100vh;
+ color: #fff;
+}
+
+.hero .background-image {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-size: cover;
+ z-index: -1;
+ background-color: #80a3db;
+}
+
+.hero h1 {
+ font: bold 60px "Open Sans", sans-serif;
+ margin-bottom: 15px;
+}
+
+.hero h3 {
+ font: normal 28px "Open Sans", sans-serif;
+ margin-bottom: 40px;
+}
+
+.hero a.btn {
+ padding: 20px 46px;
+}
+
+.hero-content-area {
+ opacity: 0;
+ margin-top: 100px;
+ animation: 1s slidefade 1s forwards;
+}
+
+@keyframes slidefade {
+ 100% {
+ opacity: 1;
+ margin: 0;
+ }
+}
+
+/*Destinations Section*/
+
+.destinations .grid li {
+ height: 350px;
+ padding: 20px;
+ background-clip: content-box;
+ background-size: cover;
+ background-position: center;
+}
+
+.destinations .grid li.small {
+ flex-basis: 30%;
+}
+
+.destinations .grid li.large {
+ flex-basis: 70%;
+}
+
+/*Packages Section*/
+
+.packages .grid li {
+ padding: 50px;
+ flex-basis: 50%;
+ text-align: center;
+}
+
+.packages .grid li i {
+ color: #8c9eff;
+}
+
+.packages .grid li h4 {
+ font-size: 30px;
+ margin: 25px 0;
+}
+
+
+
+
+
+
+
+
+
+
+
diff --git a/css-project/03-destinations-and-features/assets/img/main.jpg b/css-project/03-destinations-and-features/assets/img/main.jpg
new file mode 100644
index 00000000..be68702e
Binary files /dev/null and b/css-project/03-destinations-and-features/assets/img/main.jpg differ
diff --git a/css-project/03-destinations-and-features/assets/img/mountain1.jpg b/css-project/03-destinations-and-features/assets/img/mountain1.jpg
new file mode 100644
index 00000000..3d860544
Binary files /dev/null and b/css-project/03-destinations-and-features/assets/img/mountain1.jpg differ
diff --git a/css-project/03-destinations-and-features/assets/img/mountain2.jpg b/css-project/03-destinations-and-features/assets/img/mountain2.jpg
new file mode 100644
index 00000000..11b6a95c
Binary files /dev/null and b/css-project/03-destinations-and-features/assets/img/mountain2.jpg differ
diff --git a/css-project/03-destinations-and-features/assets/img/mountain3.jpg b/css-project/03-destinations-and-features/assets/img/mountain3.jpg
new file mode 100644
index 00000000..c40dc124
Binary files /dev/null and b/css-project/03-destinations-and-features/assets/img/mountain3.jpg differ
diff --git a/css-project/03-destinations-and-features/assets/img/mountain4.jpg b/css-project/03-destinations-and-features/assets/img/mountain4.jpg
new file mode 100644
index 00000000..f2acd1a3
Binary files /dev/null and b/css-project/03-destinations-and-features/assets/img/mountain4.jpg differ
diff --git a/css-project/03-destinations-and-features/index.html b/css-project/03-destinations-and-features/index.html
new file mode 100644
index 00000000..68ac44e1
--- /dev/null
+++ b/css-project/03-destinations-and-features/index.html
@@ -0,0 +1,91 @@
+
+
+
+
+
+ Mountain Travel
+
+
+
+
+
+
+
+
+
+
+
+
+
Mountain Travel
+
Unmissable Adventure Tours Around The World
+
Contact Us Now
+
+
+
+
+ Some of our destinations:
+ Tired of the ocean? Are the plains too plain? Come along with us on one of our mountain adventures. Here are some pictures from people who have had elevated experiences with us.
+
+
+
+
+
+
+ Tour Packages
+ We offer a variety of mountaineering packages. Whether you've climbed Everest or don't even know what a mountain is, we've got the perfect vacation for you.
+
+
+
+
+
+ Guided Trips
+ Looking for the complete experience? Take a tour with one of our experts. They'll show you secrets that you're likely to miss otherwise.
+
+
+
+ Photo Trips
+ Want to experience nature's beauty without all of that annoying exercise? Take a photo tour on one of our mountain buses.
+
+
+
+ Biking Trips
+ If bicycles are more your speed, consider taking a tour through one of our mountain bike paths. We'll provide the bikes, and lunch too!
+
+
+
+ Racing Trips
+ Got a competitive spirit? Sign up for one of our mountain marathons! Try to reach the summit before anyone else.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/css-project/04-testimonials-contact-footer/assets/css/styles.css b/css-project/04-testimonials-contact-footer/assets/css/styles.css
new file mode 100644
index 00000000..e555ba0e
--- /dev/null
+++ b/css-project/04-testimonials-contact-footer/assets/css/styles.css
@@ -0,0 +1,260 @@
+/*General Styles*/
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+html {
+ font: normal 16px sans-serif;
+ color: #555;
+}
+
+ul,
+nav {
+ list-style: none;
+}
+
+a {
+ text-decoration: none;
+ opacity: 0.75;
+ color: #fff;
+}
+
+a:hover {
+ opacity: 1;
+}
+
+a.btn {
+ border-radius: 4px;
+ text-transform: uppercase;
+ font-weight: bold;
+ text-align: center;
+ background-color: #3f51b5;
+ opacity: 1;
+}
+
+section {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 100px 80px;
+}
+
+section:not(.hero):nth-child(even) {
+ background-color: #f5f5f5;
+}
+
+.grid {
+ width: 100%;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+}
+
+hr {
+ width: 250px;
+ height: 3px;
+ background-color: #3f51b5;
+ border: 0;
+ margin-bottom: 50px;
+}
+
+section h3.title {
+ text-transform: capitalize;
+ font: bold 32px "Open Sans", sans-serif;
+ margin-bottom: 30px;
+ text-align: center;
+}
+
+section p {
+ max-width: 775px;
+ line-height: 2;
+ padding: 0 20px;
+ margin-bottom: 30px;
+ text-align: center;
+}
+
+/*Header Styles*/
+
+header {
+ position: absolute;
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 35px 100px 0;
+ animation: 1s fadein 0.5s forwards;
+ opacity: 0;
+ color: #fff;
+}
+
+@keyframes fadein {
+ 100% {
+ opacity: 1;
+ }
+}
+
+header h2 {
+ font-family: "Quicksand", sans-serif;
+}
+
+header nav {
+ display: flex;
+ margin-right: -15px;
+}
+
+header nav li {
+ margin: 0 15px;
+}
+
+/*Hero Styles*/
+
+.hero {
+ position: relative;
+ justify-content: center;
+ text-align: center;
+ min-height: 100vh;
+ color: #fff;
+}
+
+.hero .background-image {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-size: cover;
+ z-index: -1;
+ background-color: #80a3db;
+}
+
+.hero h1 {
+ font: bold 60px "Open Sans", sans-serif;
+ margin-bottom: 15px;
+}
+
+.hero h3 {
+ font: normal 28px "Open Sans", sans-serif;
+ margin-bottom: 40px;
+}
+
+.hero a.btn {
+ padding: 20px 46px;
+}
+
+.hero-content-area {
+ opacity: 0;
+ margin-top: 100px;
+ animation: 1s slidefade 1s forwards;
+}
+
+@keyframes slidefade {
+ 100% {
+ opacity: 1;
+ margin: 0;
+ }
+}
+
+/*Destinations Section*/
+
+.destinations .grid li {
+ height: 350px;
+ padding: 20px;
+ background-clip: content-box;
+ background-size: cover;
+ background-position: center;
+}
+
+.destinations .grid li.small {
+ flex-basis: 30%;
+}
+
+.destinations .grid li.large {
+ flex-basis: 70%;
+}
+
+/*Packages Section*/
+
+.packages .grid li {
+ padding: 50px;
+ flex-basis: 50%;
+ text-align: center;
+}
+
+.packages .grid li i {
+ color: #8c9eff;
+}
+
+.packages .grid li h4 {
+ font-size: 30px;
+ margin: 25px 0;
+}
+
+/*Testimonials Section*/
+
+.testimonials .quote {
+ font-size: 22px;
+ font-weight: 300;
+ line-height: 1.5;
+ margin: 40px 0 25px;
+}
+
+/*Contact Section*/
+
+.contact form {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-wrap: wrap;
+ width: 60%;
+}
+
+.contact form .btn {
+ padding: 18px 42px;
+}
+
+.contact form input {
+ padding: 15px;
+ margin-right: 30px;
+ font-size: 18px;
+ color: #555;
+ flex: 1;
+}
+
+/*Footer Section*/
+
+footer {
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+ background-color: #607d8b;
+ color: #fff;
+ padding: 20px 0;
+}
+
+footer ul {
+ display: flex;
+}
+
+footer ul li {
+ margin-left: 16px;
+}
+
+footer p {
+ text-transform: uppercase;
+ font-size: 14px;
+ opacity: 0.6;
+ align-self: center;
+}
+
+
+
+
+
+
+
+
+
+
diff --git a/css-project/04-testimonials-contact-footer/assets/img/main.jpg b/css-project/04-testimonials-contact-footer/assets/img/main.jpg
new file mode 100644
index 00000000..be68702e
Binary files /dev/null and b/css-project/04-testimonials-contact-footer/assets/img/main.jpg differ
diff --git a/css-project/04-testimonials-contact-footer/assets/img/mountain1.jpg b/css-project/04-testimonials-contact-footer/assets/img/mountain1.jpg
new file mode 100644
index 00000000..3d860544
Binary files /dev/null and b/css-project/04-testimonials-contact-footer/assets/img/mountain1.jpg differ
diff --git a/css-project/04-testimonials-contact-footer/assets/img/mountain2.jpg b/css-project/04-testimonials-contact-footer/assets/img/mountain2.jpg
new file mode 100644
index 00000000..11b6a95c
Binary files /dev/null and b/css-project/04-testimonials-contact-footer/assets/img/mountain2.jpg differ
diff --git a/css-project/04-testimonials-contact-footer/assets/img/mountain3.jpg b/css-project/04-testimonials-contact-footer/assets/img/mountain3.jpg
new file mode 100644
index 00000000..c40dc124
Binary files /dev/null and b/css-project/04-testimonials-contact-footer/assets/img/mountain3.jpg differ
diff --git a/css-project/04-testimonials-contact-footer/assets/img/mountain4.jpg b/css-project/04-testimonials-contact-footer/assets/img/mountain4.jpg
new file mode 100644
index 00000000..f2acd1a3
Binary files /dev/null and b/css-project/04-testimonials-contact-footer/assets/img/mountain4.jpg differ
diff --git a/css-project/04-testimonials-contact-footer/index.html b/css-project/04-testimonials-contact-footer/index.html
new file mode 100644
index 00000000..2700ea26
--- /dev/null
+++ b/css-project/04-testimonials-contact-footer/index.html
@@ -0,0 +1,122 @@
+
+
+
+
+
+ Mountain Travel
+
+
+
+
+
+
+
+
+
+
+
+
+
Mountain Travel
+
Unmissable Adventure Tours Around The World
+
Contact Us Now
+
+
+
+
+ Some of our destinations:
+ Tired of the ocean? Are the plains too plain? Come along with us on one of our mountain adventures. Here are some pictures from people who have had elevated experiences with us.
+
+
+
+
+
+
+ Tour Packages
+ We offer a variety of mountaineering packages. Whether you've climbed Everest or don't even know what a mountain is, we've got the perfect vacation for you.
+
+
+
+
+
+ Guided Trips
+ Looking for the complete experience? Take a tour with one of our experts. They'll show you secrets that you're likely to miss otherwise.
+
+
+
+ Photo Trips
+ Want to experience nature's beauty without all of that annoying exercise? Take a photo tour on one of our mountain buses.
+
+
+
+ Biking Trips
+ If bicycles are more your speed, consider taking a tour through one of our mountain bike paths. We'll provide the bikes, and lunch too!
+
+
+
+ Racing Trips
+ Got a competitive spirit? Sign up for one of our mountain marathons! Try to reach the summit before anyone else.
+
+
+
+
+
+ Testimonials from our adventurers:
+
+ Wow! This tour made me realize how much I love mountains. After going on one of these tours, I can safely say that they are my favorite geographic feature, and my favorite word that starts with M.
+ - Colt Steele
+ I never understood why people cared so much about mountains. But then I went on one of these tours. Now I can't understand people who don't care about mountains!
+ - Elie Schoppik
+ If you want to understand the universe, head to the mountains. I mean, seriously. It's like, woah. You know? It's like that.
+ - Tim Garcia
+
+
+
+
+
+ Images courtesy of unsplash .
+ Why are you even reading this?! There's never anything interesting in the footer!
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/css-project/05-responsive-design/assets/css/styles.css b/css-project/05-responsive-design/assets/css/styles.css
new file mode 100644
index 00000000..d9dfff05
--- /dev/null
+++ b/css-project/05-responsive-design/assets/css/styles.css
@@ -0,0 +1,339 @@
+/*General Styles*/
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+html {
+ font: normal 16px sans-serif;
+ color: #555;
+}
+
+ul,
+nav {
+ list-style: none;
+}
+
+a {
+ text-decoration: none;
+ opacity: 0.75;
+ color: #fff;
+}
+
+a:hover {
+ opacity: 1;
+}
+
+a.btn {
+ border-radius: 4px;
+ text-transform: uppercase;
+ font-weight: bold;
+ text-align: center;
+ background-color: #3f51b5;
+ opacity: 1;
+}
+
+section {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 100px 80px;
+}
+
+section:not(.hero):nth-child(even) {
+ background-color: #f5f5f5;
+}
+
+.grid {
+ width: 100%;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+}
+
+hr {
+ width: 250px;
+ height: 3px;
+ background-color: #3f51b5;
+ border: 0;
+ margin-bottom: 50px;
+}
+
+section h3.title {
+ text-transform: capitalize;
+ font: bold 32px "Open Sans", sans-serif;
+ margin-bottom: 30px;
+ text-align: center;
+}
+
+section p {
+ max-width: 775px;
+ line-height: 2;
+ padding: 0 20px;
+ margin-bottom: 30px;
+ text-align: center;
+}
+
+@media (max-width: 800px) {
+ section {
+ padding: 50px 20px;
+ }
+}
+
+/*Header Styles*/
+
+header {
+ position: absolute;
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 35px 100px 0;
+ animation: 1s fadein 0.5s forwards;
+ opacity: 0;
+ color: #fff;
+}
+
+@keyframes fadein {
+ 100% {
+ opacity: 1;
+ }
+}
+
+header h2 {
+ font-family: "Quicksand", sans-serif;
+}
+
+header nav {
+ display: flex;
+ margin-right: -15px;
+}
+
+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 {
+ position: relative;
+ justify-content: center;
+ text-align: center;
+ min-height: 100vh;
+ color: #fff;
+}
+
+.hero .background-image {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-size: cover;
+ z-index: -1;
+ background-color: #80a3db;
+}
+
+.hero h1 {
+ font: bold 60px "Open Sans", sans-serif;
+ margin-bottom: 15px;
+}
+
+.hero h3 {
+ font: normal 28px "Open Sans", sans-serif;
+ margin-bottom: 40px;
+}
+
+.hero a.btn {
+ padding: 20px 46px;
+}
+
+.hero-content-area {
+ opacity: 0;
+ margin-top: 100px;
+ animation: 1s slidefade 1s forwards;
+}
+
+@keyframes slidefade {
+ 100% {
+ opacity: 1;
+ margin: 0;
+ }
+}
+
+@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 {
+ height: 350px;
+ padding: 20px;
+ background-clip: content-box;
+ background-size: cover;
+ background-position: center;
+}
+
+.destinations .grid li.small {
+ flex-basis: 30%;
+}
+
+.destinations .grid li.large {
+ 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 {
+ padding: 50px;
+ flex-basis: 50%;
+ text-align: center;
+}
+
+.packages .grid li i {
+ color: #8c9eff;
+}
+
+.packages .grid li h4 {
+ font-size: 30px;
+ margin: 25px 0;
+}
+
+@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;
+}
+
+@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%;
+}
+
+.contact form .btn {
+ padding: 18px 42px;
+}
+
+.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 {
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+ background-color: #607d8b;
+ color: #fff;
+ padding: 20px 0;
+}
+
+footer ul {
+ display: flex;
+}
+
+footer ul li {
+ margin-left: 16px;
+}
+
+footer p {
+ 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;
+ }
+}
diff --git a/css-project/05-responsive-design/assets/img/main.jpg b/css-project/05-responsive-design/assets/img/main.jpg
new file mode 100644
index 00000000..be68702e
Binary files /dev/null and b/css-project/05-responsive-design/assets/img/main.jpg differ
diff --git a/css-project/05-responsive-design/assets/img/mountain1.jpg b/css-project/05-responsive-design/assets/img/mountain1.jpg
new file mode 100644
index 00000000..3d860544
Binary files /dev/null and b/css-project/05-responsive-design/assets/img/mountain1.jpg differ
diff --git a/css-project/05-responsive-design/assets/img/mountain2.jpg b/css-project/05-responsive-design/assets/img/mountain2.jpg
new file mode 100644
index 00000000..11b6a95c
Binary files /dev/null and b/css-project/05-responsive-design/assets/img/mountain2.jpg differ
diff --git a/css-project/05-responsive-design/assets/img/mountain3.jpg b/css-project/05-responsive-design/assets/img/mountain3.jpg
new file mode 100644
index 00000000..c40dc124
Binary files /dev/null and b/css-project/05-responsive-design/assets/img/mountain3.jpg differ
diff --git a/css-project/05-responsive-design/assets/img/mountain4.jpg b/css-project/05-responsive-design/assets/img/mountain4.jpg
new file mode 100644
index 00000000..f2acd1a3
Binary files /dev/null and b/css-project/05-responsive-design/assets/img/mountain4.jpg differ
diff --git a/css-project/05-responsive-design/index.html b/css-project/05-responsive-design/index.html
new file mode 100644
index 00000000..b1df69c8
--- /dev/null
+++ b/css-project/05-responsive-design/index.html
@@ -0,0 +1,106 @@
+
+
+
+
+
+ Mountain Travel
+
+
+
+
+
+
+
+
+
+
+
+
+
Mountain Travel
+
Unmissable Adventure Tours Around The World
+
Contact Us Now
+
+
+
+
+ Some of our destinations:
+ Tired of the ocean? Are the plains too plain? Come along with us on one of our mountain adventures. Here are some pictures from people who have had elevated experiences with us.
+
+
+
+
+
+
+ Tour Packages
+ We offer a variety of mountaineering packages. Whether you've climbed Everest or don't even know what a mountain is, we've got the perfect vacation for you.
+
+
+
+
+
+ Guided Trips
+ Looking for the complete experience? Take a tour with one of our experts. They'll show you secrets that you're likely to miss otherwise.
+
+
+
+ Photo Trips
+ Want to experience nature's beauty without all of that annoying exercise? Take a photo tour on one of our mountain buses.
+
+
+
+ Biking Trips
+ If bicycles are more your speed, consider taking a tour through one of our mountain bike paths. We'll provide the bikes, and lunch too!
+
+
+
+ Racing Trips
+ Got a competitive spirit? Sign up for one of our mountain marathons! Try to reach the summit before anyone else.
+
+
+
+
+
+ Testimonials from our adventurers:
+
+ Wow! This tour made me realize how much I love mountains. After going on one of these tours, I can safely say that they are my favorite geographic feature, and my favorite word that starts with M.
+ - Colt Steele
+ I never understood why people cared so much about mountains. But then I went on one of these tours. Now I can't understand people who don't care about mountains!
+ - Elie Schoppik
+ If you want to understand the universe, head to the mountains. I mean, seriously. It's like, woah. You know? It's like that.
+ - Tim Garcia
+
+
+
+
+
+ Images courtesy of unsplash .
+ Why are you even reading this?! There's never anything interesting in the footer!
+
+
+
+
+