From 7fdd65b556991c8560fcdd436066feb373296d87 Mon Sep 17 00:00:00 2001
From: jlang2 <jlang2@ncsu.edu>
Date: Wed, 30 Oct 2019 22:29:06 -0400
Subject: [PATCH] Changed color scheme to orange-gray-gold; updated font; added
 CSS vars

---
 aboutus.html  |  16 ++++--
 contact.html  |  16 ++++--
 css/style.css | 149 +++++++++++++++++++++++++++++++-------------------
 home.html     |  18 ++++--
 index.html    |  14 +++--
 programs.html |  16 ++++--
 6 files changed, 147 insertions(+), 82 deletions(-)
diff --git a/aboutus.html b/aboutus.html
index 8b2f8d1..d52465b 100644
--- a/aboutus.html
+++ b/aboutus.html
@@ -14,6 +14,9 @@
 	<!-- Import CSS -->
 	<link rel="stylesheet" type="text/css" href="css/style.css">
 
+	<!-- Import Open Sans from Google Fonts -->
+	<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap" rel="stylesheet">
+
 	<title>Mang Gym</title>
 </head>
 <body>
@@ -48,9 +51,12 @@
 	<header id="showcase" class="grid">
 		<div class="bg-image"></div>
 		<div class="content-wrap">
-			<h1>WELCOME TO <span style="color: yellow">MANG GYM</span></h1>
-			<p>A Haven for Everybody</p>
-			<a href="#" class="btn">Join Now!</a>
+			<div class="header-img">
+				<h1>WELCOME TO <span style="color: darkorange">MANG GYM</span></h1>
+				<p>A Haven for Everybody</p>
+				<a href="#" class="btn">Join Now!</a>
+			</div>
+			<div class="overlay small-overlay"></div>
 		</div>
 	</header>
 
@@ -70,7 +76,7 @@ <h2>Our Story</h2>
 
 		<!-- Footer -->
 		<footer id="contact">
-			<small class="small-1">&copy; Copyright 2017 | Stephene Canciller | <span style="color: yellow">Mang Gym</span> </small>
+			<small class="small-1">&copy; Copyright 2017 | Stephene Canciller | <span style="color: darkorange">Mang Gym</span> </small>
 			<div id="disclaimer">
 				<div class="disclaimer-last">
 					<small class="small-2">Disclaimer: No copyright infringement is intended. This is only for educational purposes and not for profit. Some asset/s used are not owned by the developer/s unless otherwise stated; the credit goes to the owner.</small>
@@ -104,4 +110,4 @@ <h2>Our Story</h2>
 	<script src="bootstrap/js/bootstrap.min.js"></script>
 
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/contact.html b/contact.html
index 5b7523e..2cb5fc8 100644
--- a/contact.html
+++ b/contact.html
@@ -14,6 +14,9 @@
 	<!-- Import CSS -->
 	<link rel="stylesheet" type="text/css" href="css/style.css">
 
+	<!-- Import Open Sans from Google Fonts -->
+	<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap" rel="stylesheet">
+
 	<title>Mang Gym</title>
 </head>
 <body>
@@ -48,9 +51,12 @@
 	<header id="showcase" class="grid">
 		<div class="bg-image"></div>
 		<div class="content-wrap">
-			<h1>WELCOME TO <span style="color: yellow">MANG GYM</span></h1>
-			<p>A Haven for Everybody</p>
-			<a href="#" class="btn">Join Now!</a>
+			<div class="header-img">
+				<h1>WELCOME TO <span style="color: darkorange">MANG GYM</span></h1>
+				<p>A Haven for Everybody</p>
+				<a href="#" class="btn">Join Now!</a>
+			</div>
+			<div class="overlay small-overlay"></div>
 		</div>
 	</header>
 
@@ -99,7 +105,7 @@ <h3>Inquiry Form</h3>
 
 		<!-- Footer -->
 		<footer id="contact">
-			<small class="small-1">&copy; Copyright 2017 | Stephene Canciller | <span style="color: yellow">Mang Gym</span> </small>
+			<small class="small-1">&copy; Copyright 2017 | Stephene Canciller | <span style="color: darkorange">Mang Gym</span> </small>
 			<div id="disclaimer">
 				<div class="disclaimer-last">
 					<small class="small-2">Disclaimer: No copyright infringement is intended. This is only for educational purposes and not for profit. Some asset/s used are not owned by the developer/s unless otherwise stated; the credit goes to the owner.</small>
@@ -133,4 +139,4 @@ <h3>Inquiry Form</h3>
 	<script src="bootstrap/js/bootstrap.min.js"></script>
 
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/css/style.css b/css/style.css
index 8861918..2724e5b 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,14 +1,47 @@
 /* CSS Reset */
+:root {
+	/* CSS variables for easy reuse */
+	--main-color: darkorange;
+	--secondary-color: #333; /* dark gray */
+	--tertiary-color: gold;
+	--text-drop-shadow: 0px 1px 2px #000;
+	--button-border-radius: 8px;
+}
+
 * {
 	margin: 0;
 	padding: 0;
 	box-sizing: border-box;
-	font-family: Arial, Helvetica, sans-serif;
+	/* font-family: Arial, Helvetica, sans-serif; */
+	font-family: 'Open Sans', sans-serif;
 	font-size: 1em;
 	line-height: 1.5;
 	text-align: center;
 }
 
+/* Overlay so text is more readable */
+.overlay {
+	background-color: var(--secondary-color);
+	opacity: 0.5;
+	height: 100vh;
+	width: 100vw;
+}
+
+.small-overlay {
+	height: 550px;
+	width: 100%;
+	position: absolute;
+	left: 0;
+	top: 0;
+	z-index: 80;
+}
+
+.header-img {
+	position: relative;
+	z-index: 90;
+	text-shadow: var(--text-drop-shadow);
+}
+
 /* Navbar and Logo */
 .container {
 	padding-right: 0;
@@ -22,7 +55,7 @@
 .container .nav >li >a {
   	padding-top: 30px;
   padding-bottom: 30px;
-}	
+}
 .container .navbar-toggle {
   	padding: 10px;
   	margin: 25px 15px 25px 0;
@@ -43,13 +76,13 @@
 }
 
 .navbar-default .navbar-nav>li>a {
-    color: #333;
+    color: var(--secondary-color);
     line-height: 100px;
 }
 
 .navbar-inverse .navbar-nav>li>a {
 	color: #fff;
-	background-color: 	#333;
+	background-color: 	var(--secondary-color);
 }
 
 .navbar-inverse .navbar-toggle .icon-bar {
@@ -76,12 +109,11 @@
 
 
 .navbar-right li {
-	background-color: #fff;
+	background-color: var(--tertiary-color);
 	color: #000;
-	text-shadow: 1px 1px 1px #000;
+	/* text-shadow: var(--text-drop-shadow); */
 }
 
-
 ul {
 	padding-left: 0;
 }
@@ -119,13 +151,13 @@ ul > li {
 .wrapper h2 {
 	color: white;
 	font-size: 25px;
-	font-weight: normal;
+	font-weight: bold;
 }
 
 .wrapper p {
 	margin-top: -25px;
 	color: #fff;
-	text-shadow: 1px 1px 1px #000;
+	/* text-shadow: var(--text-drop-shadow); */
 }
 
 .quote {
@@ -138,8 +170,8 @@ ul > li {
 
 .wrapper footer {
 	margin-top: -65px;
-	text-shadow: 1px 1px 1px #000;
-	color: indianred;
+	/* text-shadow: var(--text-drop-shadow); */
+	color: var(--main-color);
 	background: rgba(255, 255, 255, 0);
 
 }
@@ -158,9 +190,10 @@ h2 {
 h1,
 h2,
 h3 {
+	font-weight: 700; /* bold */
   margin: 0;
   padding: 1em 0;
-  text-shadow: 1px 1px 1px #000;
+  /* text-shadow: var(--text-drop-shadow); */
 }
 
 p {
@@ -171,7 +204,7 @@ p {
 /* Button Settings for Landing Page */
 .btn1 {
   display: block;
-  background: #333;
+  background: var(--secondary-color);
   width: 45%;
   position: relative;
   color: #fff;
@@ -179,17 +212,19 @@ p {
   padding: 1em 2em;
   border: 1px solid #666;
   margin: 0 auto;
+	border-radius: var(--button-border-radius);
+	text-shadow: none;
 }
 
 .btn1:hover {
-  background: #eaeaea;
-  color: #333;
+  background: var(--tertiary-color);
+  color: var(--secondary-color);
 }
 
 /* Button Global Settings */
 .btn {
   display: block;
-  background: #333;
+  background: var(--secondary-color);
   width: 45%;
   position: relative;
   color: #fff;
@@ -197,11 +232,13 @@ p {
   padding: 1em 2em;
   border: 1px solid #666;
   margin: 0 auto;
+	border-radius: var(--button-border-radius);
+	text-shadow: none;
 }
 
 .btn:hover {
-  background: #eaeaea;
-  color: #333;
+  background: var(--tertiary-color);
+  color: var(--secondary-color);
 }
 
 
@@ -211,7 +248,7 @@ p {
 #showcase {
   min-height: 550px;
   text-align: center;
-  text-shadow: 1px 1px 1px #000;
+  /* text-shadow: var(--text-drop-shadow); */
 }
 
 #showcase .bg-image {
@@ -260,7 +297,7 @@ p {
 #trial {
 	padding: 0 15px;
 	height: 250px;
-	background-color: indianred;
+	background-color: var(--main-color);
 }
 
 #trial h1 {
@@ -308,8 +345,8 @@ p {
 
 /* Gallery and Newsletter Settings */
 #gallery {
-	background: #333;
-	border: 10px solid indianred;	
+	background: var(--secondary-color);
+	border: 10px solid var(--main-color);
 	color: #fff;
 }
 
@@ -320,7 +357,7 @@ p {
 #newsletter {
 	padding: 0 15px;
 	height: 450px;
-	background-color: indianred;
+	background-color: var(--main-color);
 }
 
 #newsletter h2 {
@@ -348,7 +385,7 @@ img:hover {
 
 /* About Us Settings */
 #about {
-	background: indianred;
+	background: var(--main-color);
 }
 
 #about h2 {
@@ -367,13 +404,13 @@ img:hover {
 }
 
 #services h2 {
-	color: indianred;
+	color: var(--main-color);
 	font-size: 2.5em;
 	text-shadow: none;
 }
 
 #services h4 {
-	color: indianred;
+	color: var(--main-color);
 	font-size: 1.8em;
 	text-transform: uppercase;
 	font-weight: bold;
@@ -390,7 +427,7 @@ img:hover {
 
 /* Membership Settings */
 #projects {
-	background: indianred;
+	background: var(--main-color);
 }
 
 #projects h2 {
@@ -424,7 +461,7 @@ input[type=submit]:hover {
 input[type=text], select, textarea {
     width: 100%;
     padding: 12px;
-    border: 1px solid #333;
+    border: 1px solid var(--secondary-color);
     border-radius: 4px;
     box-sizing: border-box;
     margin-top: 6px;
@@ -446,10 +483,10 @@ input[type=submit]:hover {
 }
 
 
-/* Map and Contact Details */
+/* Map and var(--secondary-color) Details */
 #map > h2 {
 	font-size: 2em;
-	color: indianred;
+	color: var(--main-color);
 	text-transform: uppercase;
 }
 
@@ -458,7 +495,7 @@ input[type=submit]:hover {
 }
 
 .col-map h4 {
-	color: 	indianred;
+	color: 	var(--main-color);
 }
 
 .col-map p {
@@ -481,7 +518,7 @@ input[type=submit]:hover {
 /* Contact Info Form */
 div.contact-form {
     border-radius: 5px;
-    background-color: indianred;
+    background-color: var(--main-color);
     padding: 20px;
 }
 
@@ -492,7 +529,7 @@ div.contact-form h3 {
 
 /* Footer Settings */
 footer {
-	background: #000;
+	background: var(--secondary-color);
 	color: #fff;
 	padding: 5px;
 	height: 100px;
@@ -501,7 +538,7 @@ footer {
 
 .small-1 {
 	color: #fff;
-	text-shadow: 1px 1px 1px black;
+	/* text-shadow: 1px 1px 1px black; */
 }
 
 .small-2 {
@@ -517,21 +554,21 @@ footer {
 	.wrapper h2 {
 		color: white;
 		font-size: 15px;
-		font-weight: normal;
+		font-weight: bold;
 	}
 
 	.wrapper p {
 		margin-top: -25px;
 		font-size: 10px;
 		color: #fff;
-		text-shadow: 1px 1px 1px #000;
+		/* text-shadow: var(--text-drop-shadow); */
 	}
 
 	.wrapper footer {
 		margin-top: -65px;
 		font-size: 9px;
-		text-shadow: 1px 1px 1px #000;
-		color: indianred;
+		/* text-shadow: var(--text-drop-shadow); */
+		color: var(--main-color);
 		background: rgba(255, 255, 255, 0);
 	}
 
@@ -578,7 +615,7 @@ footer {
 	img.about2 {
 		height: 240px;
 	}
-	
+
 	/* Programs / Trainings / Membership */
 	#services > div.column,
 	#gallery > div.column {
@@ -621,7 +658,7 @@ footer {
 		width: 	100%;
 		height: 200px;
 	}
-	
+
 	/* Footer */
 	footer {
 		text-align: center;
@@ -638,7 +675,7 @@ footer {
 		display: inline-block;
 		margin-top: 50px;
 		width: 100%;
-		text-align: center;	
+		text-align: center;
 	}
 
 	.small-2 {
@@ -653,13 +690,13 @@ footer {
 		display: inline-block;
 		text-decoration: none;
 		font-size: 2em;
-		color: #000;
+		color: var(--secondary-color);
 	}
 
 	/* Button Global Settings */
 	.btn {
 		display: block;
-		background: #333;
+		background: var(--secondary-color);
 		width: 45%;
 		position: relative;
 		color: #fff;
@@ -674,7 +711,7 @@ footer {
     display: block;
     margin: 0 auto;
     padding: .3em .3em;
-    background: #333;
+    background: var(--secondary-color);
     position: relative;
     width: 70%;
     color: #fff;
@@ -712,7 +749,7 @@ footer {
 		transform: none;
 		margin: 0 auto;
 	}
-	
+
 	/* Gallery */
 	#gallery div.column{
 		width: 70%;
@@ -785,7 +822,7 @@ footer {
 	div#disclaimer .small-2 {
 		display: inline-block;
 		width: 75%;
-		text-align: center;	
+		text-align: center;
 	}
 
 	/* Social Media Icons */
@@ -798,7 +835,7 @@ footer {
 	footer div.contact {
 		width: 50px;
 		height: 50px;
-		color: #000;
+		color: var(--secondary-color);
 		font-size: 2em;
 		display: inline-block;
 		text-align: right;
@@ -807,7 +844,7 @@ footer {
 	/* Button Global Settings */
 	.btn {
 		display: block;
-		background: #333;
+		background: var(--secondary-color);
 		width: 25%;
 		position: relative;
 		color: #fff;
@@ -821,7 +858,7 @@ footer {
 
 	.btn1 {
 		display: block;
-		background: #333;
+		background: var(--secondary-color);
 		width: 45%;
 		position: relative;
 		color: #fff;
@@ -862,7 +899,7 @@ footer {
 	.hero p {
 		font-size: 1.5em;
 	}
-	
+
 	/* Gallery / Newsletter */
 	#gallery div.column {
 		width: 23%;
@@ -904,7 +941,7 @@ footer {
 		width: 80%;
 		margin-top: -175px;
 	}
-	
+
 	/* Google Map Location / Contact Form */
 	.col-map {
 		width: 80%;
@@ -930,7 +967,7 @@ footer {
 	div#disclaimer .small-2 {
 		display: inline-block;
 		width: 50%;
-		text-align: center;	
+		text-align: center;
 	}
 
 	/* Social Media Icons */
@@ -942,7 +979,7 @@ footer {
 
 	div.contact {
 		display: inline-block;
-		color: #000;
+		color: var(--secondary-color);
 		font-size: 2em;
 		padding: 0 20px;
 	}
@@ -950,7 +987,7 @@ footer {
 	/* Button Global Settings */
 	.btn {
 		display: block;
-		background: #333;
+		background: var(--secondary-color);
 		width: 20%;
 		position: relative;
 		color: #fff;
@@ -964,7 +1001,7 @@ footer {
 
 	.btn1 {
 		display: block;
-		background: #333;
+		background: var(--secondary-color);
 		width: 25%;
 		position: relative;
 		color: #fff;
@@ -973,4 +1010,4 @@ footer {
 		border: 1px solid #666;
 		margin: 0 auto;
 	}
-}
\ No newline at end of file
+}
diff --git a/home.html b/home.html
index 429c1b0..c06a4ee 100644
--- a/home.html
+++ b/home.html
@@ -14,6 +14,9 @@
 	<!-- Import CSS -->
 	<link rel="stylesheet" type="text/css" href="css/style.css">
 
+	<!-- Import Open Sans from Google Fonts -->
+	<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap" rel="stylesheet">
+
 	<title>Mang Gym</title>
 </head>
 <body>
@@ -42,9 +45,12 @@
 	<header id="showcase" class="grid">
 		<div class="bg-image"></div>
 		<div class="content-wrap">
-			<h1>WELCOME TO <span style="color: yellow">MANG GYM</span></h1>
-			<p>A Haven for Everybody</p>
-			<a href="#" class="btn">Join Now!</a>
+			<div class="header-img">
+				<h1>WELCOME TO <span style="color: darkorange">MANG GYM</span></h1>
+				<p>A Haven for Everybody</p>
+				<a href="#" class="btn">Join Now!</a>
+			</div>
+			<div class="overlay small-overlay"></div>
 		</div>
 	</header>
 
@@ -67,7 +73,7 @@ <h1>FREE TRIAL</h1>
 		<!-- History -->
 		<section id="banner">
 			<div class="hero">
-				<h1>History of Gym</h1>
+				<h1 style="color: darkorange">History of Gym</h1>
 				<img src="img/oldgym.jpeg" style="width:100%;" border="0" alt="Null">
 				<p>A gym, also referred as gymnasium, is an open air or covered location for gymnastics, athletics, and gymnastic services. The word is derived from the ancient Greek gymnasium. They are commonly found in athletic and fitness centers, and as activity and learning spaces in educational institutions. "Gym" is also slang for "fitness center", which is often an indoor facility.
 
@@ -112,7 +118,7 @@ <h2>Sign up for our EXCLUSIVE TRAINING Tips, Offers and Discounts</h2>
 
 		<!-- Footer -->
 		<footer id="contact">
-			<small class="small-1">&copy; Copyright 2017 | Stephene Canciller | <span style="color: yellow">Mang Gym</span> </small>
+			<small class="small-1">&copy; Copyright 2017 | Stephene Canciller | <span style="color: darkorange">Mang Gym</span> </small>
 			<div id="disclaimer">
 				<div class="disclaimer-last">
 					<small class="small-2">Disclaimer: No copyright infringement is intended. This is only for educational purposes and not for profit. Some asset/s used are not owned by the developer/s unless otherwise stated; the credit goes to the owner.</small>
@@ -145,4 +151,4 @@ <h2>Sign up for our EXCLUSIVE TRAINING Tips, Offers and Discounts</h2>
 	<script src="bootstrap/js/bootstrap.min.js"></script>
 
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/index.html b/index.html
index 3f295d8..a70c624 100644
--- a/index.html
+++ b/index.html
@@ -14,21 +14,25 @@
 	<!-- Import CSS -->
 	<link rel="stylesheet" type="text/css" href="css/style.css">
 
+	<!-- Import Open Sans from Google Fonts -->
+	<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap" rel="stylesheet">
+
 	<title>Mang Gym</title>
 </head>
 <body>
 
 	<!-- Landing Page -->
 	<div class="vidWrapper">
+		<div class="overlay"></div>
 		<video class="landingVid " preload="auto" src="img/trainingvid.mov" autoplay muted loop playsinline>
 		</video>
 	</div>
 
 	<!-- Wrapper Container -->
-	<div class="wrapper">
-		<h2>WELCOME TO <span style="color: yellow">MANG GYM</span></h2>
-		<p class="quote">“THINKk BIG AND DON'T LISTEN TO PEOPLE WHO TELL YOU IT CAN'T BE DONE. LIFE'S TOO SHORT TO THINK SMALL.”</p><footer>-- BY TIM FERRISS</footer>
-		<a href="home.html" class="btn1">JOIN NOW!</a>
+	<div class="wrapper header-img">
+		<h2>WELCOME TO <span style="color: orange">MANG GYM</span></h2>
+		<p class="quote">“THINK BIG AND DON'T LISTEN TO PEOPLE WHO TELL YOU IT CAN'T BE DONE. LIFE'S TOO SHORT TO THINK SMALL.”</p><footer>-- BY TIM FERRISS</footer>
+		<a href="home.html" class="btn1" style="text-decoration: none">JOIN NOW!</a>
 	</div>
 
 	<!-- Import Jquery -->
@@ -41,4 +45,4 @@ <h2>WELCOME TO <span style="color: yellow">MANG GYM</span></h2>
 	<script src="bootstrap/js/bootstrap.min.js"></script>
 
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/programs.html b/programs.html
index e2f09e5..c0f7161 100644
--- a/programs.html
+++ b/programs.html
@@ -14,6 +14,9 @@
 	<!-- Import CSS -->
 	<link rel="stylesheet" type="text/css" href="css/style.css">
 
+	<!-- Import Open Sans from Google Fonts -->
+	<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap" rel="stylesheet">
+
 	<title>Mang Gym</title>
 </head>
 <body>
@@ -48,9 +51,12 @@
 	<header id="showcase" class="grid">
 		<div class="bg-image"></div>
 		<div class="content-wrap">
-			<h1>WELCOME TO <span style="color: yellow">MANG GYM</span></h1>
-			<p>A Haven for Everybody</p>
-			<a href="#" class="btn">Join Now!</a>
+			<div class="header-img">
+				<h1>WELCOME TO <span style="color: darkorange">MANG GYM</span></h1>
+				<p>A Haven for Everybody</p>
+				<a href="#" class="btn">Join Now!</a>
+			</div>
+			<div class="overlay small-overlay"></div>
 		</div>
 	</header>
 
@@ -108,7 +114,7 @@ <h2>MEMBERSHIP PLANS</h2>
 
 		<!-- Footer -->
 		<footer id="contact">
-			<small class="small-1">&copy; Copyright 2017 | Stephene Canciller | <span style="color: yellow">Mang Gym</span> </small>
+			<small class="small-1">&copy; Copyright 2017 | Stephene Canciller | <span style="color: darkorange">Mang Gym</span> </small>
 			<div id="disclaimer">
 				<div class="disclaimer-last">
 					<small class="small-2">Disclaimer: No copyright infringement is intended. This is only for educational purposes and not for profit. Some asset/s used are not owned by the developer/s unless otherwise stated; the credit goes to the owner.</small>
@@ -142,4 +148,4 @@ <h2>MEMBERSHIP PLANS</h2>
 	<script src="bootstrap/js/bootstrap.min.js"></script>
 
 </body>
-</html>
\ No newline at end of file
+</html>
