diff options
| -rw-r--r-- | index.html | 24 | ||||
| -rw-r--r-- | styles.css | 108 | ||||
| -rw-r--r-- | styles.scss | 139 |
3 files changed, 169 insertions, 102 deletions
@@ -3,20 +3,22 @@ <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <title>Evan Cohen's Digital Business Card</title> + <title>QR Code Menu</title> <link rel="stylesheet" href="styles.css"> + <link rel="preconnect" href="https://fonts.googleapis.com"> + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> + <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap" rel="stylesheet"> + <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans&family=Josefin+Slab&display=swap" rel="stylesheet"> </head> <body> - <section class="landing-page"> - <div class="menu-container"> - <ul class="menu-wrapper"> - <li><a href="">Contact</a></li> - <li><a href="">Profile</a></li> - <li><a href="">Services</a></li> - <li><a href="tips/tips.html">Tips</a></li> - </ul> - </div> - </section> + <div class="menu-container"> + <ul class="menu-wrapper"> + <li><a href="">Contact</a></li> + <li><a href="">Profile</a></li> + <li><a href="">Services</a></li> + <li><a href="tips/tips.html">Tips</a></li> + </ul> + </div> </body> </html> @@ -1,64 +1,104 @@ -/* Grey */ -/* Tan */ -/* Rust */ -/* Teal */ -/* Muted Green */ * { margin: 0px; padding: 0px; box-sizing: border-box; background-size: cover; background-repeat: no-repeat; - background-color: #DDD1C7; - font-family: sans-serif; + background-color: #e6e6e6; } -.landing-page { - height: 100vh; - width: 100%; - background-color: #DDD1C7; +body { + font-family: "Josefin Slab"; + font-weight: 400; + color: #27327b; +} + +a { + font-family: "Josefin Sans"; + font-weight: 400; + color: #27327b; +} + +h1, h2, h3, h4, h5 { + font-family: "Josefin Sans"; + font-weight: 700; + color: #27327b; +} + +html { + font-size: 100%; +} /* 16px */ +h1 { + font-size: 4.21rem; /* 67.36px */ +} + +h2 { + font-size: 3.158rem; /* 50.56px */ +} + +h3 { + font-size: 2.369rem; /* 37.92px */ } -.landing-page .menu-container { + +h4 { + font-size: 1.777rem; /* 28.48px */ +} + +h5 { + font-size: 1.333rem; /* 21.28px */ +} + +small { + font-size: 0.75rem; /* 12px */ +} + +@keyframes reveal { + 0% { + transform: translateY(100%); + opacity: 0; + } + 100% { + transform: translateY(0); + opacity: 1; + } +} +.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; } -.landing-page .menu-container .menu-wrapper { +.menu-container .menu-wrapper { list-style: none; } -.landing-page .menu-container .menu-wrapper li { +.menu-container .menu-wrapper li { margin: 0.5vmin 0; display: flex; justify-content: left; + opacity: 0; + animation: reveal 1s ease-out forwards; +} +.menu-container .menu-wrapper li:nth-child(1) { + animation-delay: 0.15s; +} +.menu-container .menu-wrapper li:nth-child(2) { + animation-delay: 0.3s; +} +.menu-container .menu-wrapper li:nth-child(3) { + animation-delay: 0.45s; +} +.menu-container .menu-wrapper li:nth-child(4) { + animation-delay: 0.6s; } -.landing-page .menu-container .menu-wrapper li a { +.menu-container .menu-wrapper li a { text-decoration: none; font-weight: 700; font-size: 15vmin; - color: rgba(255, 255, 255, 0); - -webkit-text-stroke: 0.12vmin #353535; - transition-duration: 200ms; -} -.landing-page .menu-container .menu-wrapper li a:hover { - color: #353535; - -webkit-text-stroke: 0px #353535; -} -.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); + color: #27327b; } /*# sourceMappingURL=styles.css.map */ diff --git a/styles.scss b/styles.scss index 3aea8fe..de1b44e 100644 --- a/styles.scss +++ b/styles.scss @@ -1,13 +1,13 @@ -$primary-color: #353535; /* Grey */ -$secondary-color: #DDD1C7; /* Tan */ -$accent-color-1: #AD5D4E; /* Rust */ -$accent-color-2: #18A999; /* Teal */ -$accent-color-3: #6A9170; /* Muted Green */ +//Colors +$foreground-color: #27327b; +$background-color: #e6e6e6; +$primary-color: #3eadad; +$secondary-color: #487143; +$accent-color: #cfab28; -$dark-grey: #1c1b20; - - -$sans-serif-font: 'Helvetica'; +// Fonts +$sans-serif-font: 'Josefin Sans'; +$serif-font: 'Josefin Slab'; //GLOBAL STYLES @@ -18,11 +18,36 @@ $sans-serif-font: 'Helvetica'; background-size: cover; background-repeat: no-repeat; - background-color: $secondary-color; + background-color: $background-color; +} + + +body { + font-family: $serif-font; + font-weight: 400; + color: $foreground-color; +} - font-family: sans-serif; +a { + font-family: $sans-serif-font; + font-weight: 400; + color: $foreground-color; } +h1, h2, h3, h4, h5 { + font-family: $sans-serif-font; + font-weight: 700; + color: $foreground-color; +} + +html {font-size: 100%;} /* 16px */ +h1 {font-size: 4.210rem; /* 67.36px */} +h2 {font-size: 3.158rem; /* 50.56px */} +h3 {font-size: 2.369rem; /* 37.92px */} +h4 {font-size: 1.777rem; /* 28.48px */} +h5 {font-size: 1.333rem; /* 21.28px */} +small {font-size: 0.750rem; /* 12px */} + //MIXIN @mixin flexcenter { display: flex; @@ -30,57 +55,57 @@ $sans-serif-font: 'Helvetica'; align-items: center; } +// Animation +@keyframes reveal { + 0% { + transform: translateY(100%); + opacity: 0; + } + 100% { + transform: translateY(0); + opacity: 1; + } +} + //MAIN CSS -.landing-page { - //overflow-x: hidden; +.menu-container { + position: fixed; + top: 0; + left: 0; 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: 0.5vmin 0; - display: flex; - justify-content: left; - - a { - text-decoration: none; - font-weight: 700; - font-size: 15vmin; - color: rgba(255, 255, 255, 0); - -webkit-text-stroke: 0.12vmin $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%); + @include flexcenter(); - font-size: 68vmin; - font-weight: 900; - color: rgba(0, 0, 0, 0.2); - } + .menu-wrapper { + list-style: none; + + li { + margin: 0.5vmin 0; + display: flex; + justify-content: left; + opacity: 0; // Start items as invisible + animation: reveal 1s ease-out forwards; + + &:nth-child(1) { + animation-delay: 0.15s; // Delay for the first item + } + &:nth-child(2) { + animation-delay: 0.3s; // Delay for the second item + } + &:nth-child(3) { + animation-delay: 0.45s; // Delay for the third item + } + &:nth-child(4) { + animation-delay: 0.6s; // Delay for the fourth item + } + + a { + text-decoration: none; + font-weight: 700; + font-size: 15vmin; + color: $foreground-color; // Assuming you want to use your color variable } } } } + |