diff --git a/taskncoffee-app/src/assets/fonts/Carry-You.ttf b/taskncoffee-app/src/assets/fonts/Carry-You.ttf new file mode 100644 index 0000000..4be640d Binary files /dev/null and b/taskncoffee-app/src/assets/fonts/Carry-You.ttf differ diff --git a/taskncoffee-app/src/assets/fonts/Fabulous.ttf b/taskncoffee-app/src/assets/fonts/Fabulous.ttf new file mode 100644 index 0000000..d8609f2 Binary files /dev/null and b/taskncoffee-app/src/assets/fonts/Fabulous.ttf differ diff --git a/taskncoffee-app/src/assets/fonts/Sacramento.woff2 b/taskncoffee-app/src/assets/fonts/Sacramento.woff2 new file mode 100644 index 0000000..d701b03 Binary files /dev/null and b/taskncoffee-app/src/assets/fonts/Sacramento.woff2 differ diff --git a/taskncoffee-app/src/assets/fonts/vibur.woff2 b/taskncoffee-app/src/assets/fonts/vibur.woff2 new file mode 100644 index 0000000..1dfa509 Binary files /dev/null and b/taskncoffee-app/src/assets/fonts/vibur.woff2 differ diff --git a/taskncoffee-app/src/neon.css b/taskncoffee-app/src/neon.css new file mode 100644 index 0000000..c1642d0 --- /dev/null +++ b/taskncoffee-app/src/neon.css @@ -0,0 +1,121 @@ + + +@font-face { + font-family: 'Vibur'; + src: url('./assets/fonts/vibur.woff2') format('woff2'); + font-weight: normal; + font-style: normal; + font-display: swap; + +} +@font-face { + font-family: 'Fabulous'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url('./assets/fonts/Fabulous.ttf') format('truetype'); +} +@font-face { + font-family: 'Carry-You'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url('./assets/fonts/Carry-You.ttf') format('truetype'); +} +/*-- Sign Styles --*/ + +.sign { + font-family: "Carry-You", cursive; + min-height: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + span { + font-size: 5.6rem; + text-align: center; + line-height: 1; + color: #c6e2ff; + animation: neon .08s ease-in-out infinite alternate; + } +} + +.sign-pink { + font-family: "Carry-You", cursive; + min-height: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + span { + font-size: 5.6rem; + text-align: center; + line-height: 1; + color: #ffc5ec; + animation: neon-pink .08s ease-in-out infinite alternate; + } +} + + +@keyframes neon { + from { + text-shadow: + 0 0 6px rgba(202,228,225,0.92), + 0 0 30px rgba(202,228,225,0.34), + 0 0 12px rgba(30,132,242,0.52), + 0 0 21px rgba(30,132,242,0.92), + 0 0 34px rgba(30,132,242,0.78), + 0 0 54px rgba(30,132,242,0.92); + } + to { + text-shadow: + 0 0 6px rgba(202,228,225,0.98), + 0 0 30px rgba(202,228,225,0.42), + 0 0 12px rgba(30,132,242,0.58), + 0 0 22px rgba(30,132,242,0.84), + 0 0 38px rgba(30,132,242,0.88), + 0 0 60px rgba(30,132,242,1); + } +} + +@keyframes neon-pink { + from { + text-shadow: + 0 0 6px rgba(255,182,193,0.92), + 0 0 30px rgba(255,182,193,0.34), + 0 0 12px rgba(255,20,147,0.52), + 0 0 21px rgba(255,20,147,0.92), + 0 0 34px rgba(255,20,147,0.78), + 0 0 54px rgba(255,20,147,0.92); + } + to { + text-shadow: + 0 0 6px rgba(255,182,193,0.98), + 0 0 30px rgba(255,182,193,0.42), + 0 0 12px rgba(255,20,147,0.58), + 0 0 22px rgba(255,20,147,0.84), + 0 0 38px rgba(255,20,147,0.88), + 0 0 60px rgba(255,20,147,1); + } +} + +.link { + position: absolute; + bottom: 10px; left: 10px; + color: #828282; + text-decoration: none; + + &:focus, + &:hover { + color: #c6e2ff; + text-shadow: + 0 0 2px rgba(202,228,225,0.92), + 0 0 10px rgba(202,228,225,0.34), + 0 0 4px rgba(30,132,242,0.52), + 0 0 7px rgba(30,132,242,0.92), + 0 0 11px rgba(30,132,242,0.78), + 0 0 16px rgba(30,132,242,0.92); + } +} \ No newline at end of file