Complete Overhaul

1 files changed, 86 insertions, 0 deletions

diff --git a/styles.scss b/styles.scss
new file mode 100644
index 0000000..c86ba37
--- /dev/null
+++ b/styles.scss
@@ -0,0 +1,86 @@
+$primary-color: #353535;  /* Grey */
+$secondary-color: #DDD1C7;  /* Tan */
+$accent-color-1: #AD5D4E;  /* Rust */
+$accent-color-2: #18A999;  /* Teal */
+$accent-color-3: #6A9170;  /* Muted Green */
+
+$dark-grey: #1c1b20;
+
+
+$sans-serif-font: 'Helvetica';
+
+
+//GLOBAL STYLES
+* {
+	margin: 0px;
+	padding: 0px;
+	box-sizing: border-box;
+
+	background-size: cover;
+	background-repeat: no-repeat;
+
+	font-family: sans-serif;
+}
+
+//MIXIN
+@mixin flexcenter {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+//MAIN CSS
+.landing-page {
+	//overflow-x: hidden;
+	height: 100vh;
+	width: 100%;
+	background-color: $secondary-color;
+
+	.menu-container {
+		position: fixed;
+		top: 0;
+		left: 0;
+		height: 100vh;
+		width: 100%;
+		z-index: 5;
+		opacity: 1;
+		transition: opacity 1500ms;
+		@include flexcenter();
+
+		.menu-wrapper {
+			list-style: none;
+
+			li {
+				margin: 10px 0;
+				display: flex;
+				justify-content: left;
+
+				a {
+					text-decoration: none;
+					letter-spacing: 5px;
+					font-weight: 700;
+					font-size: 15vmin;
+					color: rgba(255, 255, 255, 0);
+					-webkit-text-stroke: 1.4px $primary-color;
+					transition-duration: 200ms;
+
+					&:hover {
+						color: $primary-color;
+						-webkit-text-stroke: 0px $primary-color;
+					}
+				}
+
+				span {
+					position: absolute;
+					top: 50%;
+					left: 50%;
+					transform: translate(-50%, -50%);
+
+					font-size: 68vmin;
+					font-weight: 900;
+					color: rgba(0, 0, 0, 0.2);
+				}
+			}
+		}
+	}
+}