add neon and font style

2025-10-04 02:04:51 +03:00
parent 4211be86ff
commit e41b8922e5
5 changed files with 121 additions and 0 deletions
--- a/taskncoffee-app/src/neon.css
+++ 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);
+   }
+}