adding CSS project solution scaffolding

rithmschool · Oct 20, 2017 · ab8246f · ab8246f
1 parent a92fd6b
commit ab8246f
Show file tree

Hide file tree

Showing 35 changed files with 1,306 additions and 0 deletions.
diff --git a/css-project/01-starter-code/assets/css/styles.css b/css-project/01-starter-code/assets/css/styles.css
diff --git a/css-project/01-starter-code/assets/img/main.jpg b/css-project/01-starter-code/assets/img/main.jpg
diff --git a/css-project/01-starter-code/assets/img/mountain1.jpg b/css-project/01-starter-code/assets/img/mountain1.jpg
diff --git a/css-project/01-starter-code/assets/img/mountain2.jpg b/css-project/01-starter-code/assets/img/mountain2.jpg
diff --git a/css-project/01-starter-code/assets/img/mountain3.jpg b/css-project/01-starter-code/assets/img/mountain3.jpg
diff --git a/css-project/01-starter-code/assets/img/mountain4.jpg b/css-project/01-starter-code/assets/img/mountain4.jpg
diff --git a/css-project/01-starter-code/index.html b/css-project/01-starter-code/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Mountain Travel</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
+  <link rel="stylesheet" href="assets/css/styles.css">
+</head>
+<body>
+  <!-- Forked from a template on Tutorialzine: https://tutorialzine.com/2016/06/freebie-landing-page-template-with-flexbox -->
+</body>
+</html>
diff --git a/css-project/02-nav-and-header/assets/css/styles.css 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
diff --git a/css-project/02-nav-and-header/assets/img/mountain1.jpg b/css-project/02-nav-and-header/assets/img/mountain1.jpg
diff --git a/css-project/02-nav-and-header/assets/img/mountain2.jpg b/css-project/02-nav-and-header/assets/img/mountain2.jpg
diff --git a/css-project/02-nav-and-header/assets/img/mountain3.jpg b/css-project/02-nav-and-header/assets/img/mountain3.jpg
diff --git a/css-project/02-nav-and-header/assets/img/mountain4.jpg b/css-project/02-nav-and-header/assets/img/mountain4.jpg
diff --git a/css-project/02-nav-and-header/index.html b/css-project/02-nav-and-header/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Mountain Travel</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
+  <link rel="stylesheet" href="assets/css/styles.css">
+</head>
+<body>
+  <!-- Forked from a template on Tutorialzine: https://tutorialzine.com/2016/06/freebie-landing-page-template-with-flexbox -->
+  <header>
+    <h2><a href="#">Mountain Travel</a></h2>
+    <nav>
+      <li><a href="#">Tours</a></li>
+      <li><a href="#">About</a></li>
+      <li><a href="#">Contact</a></li>
+    </nav>
+  </header>
+
+  <section class="hero">
+    <div class="background-image" style="background-image: url(assets/img/main.jpg);"></div>
+    <div class="hero-content-area">
+      <h1>Mountain Travel</h1>
+      <h3>Unmissable Adventure Tours Around The World</h3>
+      <a href="#" class="btn">Contact Us Now</a>
+    </div>
+  </section>
+
+</body>
+</html>
diff --git a/css-project/03-destinations-and-features/assets/css/styles.css 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
diff --git a/css-project/03-destinations-and-features/assets/img/mountain1.jpg b/css-project/03-destinations-and-features/assets/img/mountain1.jpg
diff --git a/css-project/03-destinations-and-features/assets/img/mountain2.jpg b/css-project/03-destinations-and-features/assets/img/mountain2.jpg
diff --git a/css-project/03-destinations-and-features/assets/img/mountain3.jpg b/css-project/03-destinations-and-features/assets/img/mountain3.jpg
diff --git a/css-project/03-destinations-and-features/assets/img/mountain4.jpg b/css-project/03-destinations-and-features/assets/img/mountain4.jpg