From 0d6d2e07ed68ff7d22c32802746c324df7864aa2 Mon Sep 17 00:00:00 2001 From: Evan <38150833+beigebeats@users.noreply.github.com> Date: Wed, 22 Nov 2023 23:21:06 -0800 Subject: Complete Overhaul --- .gitignore | 2 + index.html | 38 ++++++------------- styles.css | 117 ++++++++++++++++++++++++++------------------------------- styles.scss | 86 ++++++++++++++++++++++++++++++++++++++++++ tips/tips.html | 45 ++++++---------------- 5 files changed, 165 insertions(+), 123 deletions(-) create mode 100644 .gitignore create mode 100644 styles.scss diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..686bc51 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +.DS_Store +styles.css.map diff --git a/index.html b/index.html index c145d44..5649850 100644 --- a/index.html +++ b/index.html @@ -3,34 +3,20 @@ - Digital Business Card - + Evan Cohen's Digital Business Card + -

Evan Cohen

Ski Instructor & Freelancer

- - -

+ +

diff --git a/styles.css b/styles.css index 0fa1300..9fbff72 100644 --- a/styles.css +++ b/styles.css @@ -1,75 +1,64 @@ -/* Simple Reset */ +/* Grey */ +/* Tan */ +/* Rust */ +/* Teal */ +/* Muted Green */ * { - margin: 0; - padding: 0; - box-sizing: border-box; + margin: 0px; + padding: 0px; + box-sizing: border-box; + background-size: cover; + background-repeat: no-repeat; + font-family: sans-serif; } -/* Basic Styling */ -body { - font-family: 'Helvetica', sans-serif; - background-color: #fff; - color: #000; - line-height: 1.4; +.landing-page { + height: 100vh; + width: 100%; + background-color: #DDD1C7; } - -.container { - max-width: 400px; - margin: 50px auto; - padding: 20px; - text-align: center; +.landing-page .menu-container { + position: fixed; + top: 0; + left: 0; + height: 100vh; + width: 100%; + z-index: 5; + opacity: 1; + transition: opacity 1500ms; + display: flex; + justify-content: center; + align-items: center; } - -header h1 { - font-size: 2em; - margin-bottom: 0.5em; +.landing-page .menu-container .menu-wrapper { + list-style: none; } - -header p { - font-size: 1.2em; - color: #000; - margin-bottom: 2em; +.landing-page .menu-container .menu-wrapper li { + margin: 10px 0; + display: flex; + justify-content: left; } - -/* Responsive Design */ -@media (max-width: 400px) { - .container { - width: 100%; - margin: 20px auto; - padding: 10px; - } +.landing-page .menu-container .menu-wrapper li a { + text-decoration: none; + letter-spacing: 5px; + font-weight: 700; + font-size: 15vmin; + color: rgba(255, 255, 255, 0); + -webkit-text-stroke: 1.4px #353535; + transition-duration: 200ms; } - -.button { - display: inline-block; - padding: 10px 30px; - font-size: 18px; - cursor: pointer; - background-color: #000; /* Dark grey for OLED efficiency */ - color: #fff; - border: none; - border-radius: 50px; /* High border-radius for pill shape */ - transition: background-color 0.3s; +.landing-page .menu-container .menu-wrapper li a:hover { + color: #353535; + -webkit-text-stroke: 0px #353535; } - -.button:hover { - background-color: #333333; /* Slightly lighter grey for hover state */ +.landing-page .menu-container .menu-wrapper li span { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 68vmin; + font-weight: 900; + color: rgba(0, 0, 0, 0.2); } -.menu-option { - margin-bottom: 20px; -} - -.menu-option a { - text-decoration: none; - color: #fff; - display: flex; - align-items: center; - justify-content: center; -} - -.menu-option svg.logo { - width: 50px; - height: 50px; - margin-right: 40px; -} +/*# sourceMappingURL=styles.css.map */ 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); + } + } + } + } +} diff --git a/tips/tips.html b/tips/tips.html index 6aff738..516a32c 100644 --- a/tips/tips.html +++ b/tips/tips.html @@ -4,40 +4,19 @@ Leave a Tip - + -

Leave a Tip

Thank you!

- - - -

+ +

+ + -- cgit v1.2.3