diff options
| author | akshay | 2025-04-11 14:12:46 +0530 |
|---|---|---|
| committer | GitHub | 2025-04-11 14:12:46 +0530 |
| commit | dbfb1afaeaa6936d8952f2dc652273c1fc30ba83 (patch) | |
| tree | 254afc52d0d19b8f349e21da695519c82a5ed7a0 | |
| parent | 649e4fbedfadd3085c88a04ff5859e3b4b2f2d5e (diff) | |
| download | scilab_case_study_hackathon-dbfb1afaeaa6936d8952f2dc652273c1fc30ba83.tar.gz scilab_case_study_hackathon-dbfb1afaeaa6936d8952f2dc652273c1fc30ba83.tar.bz2 scilab_case_study_hackathon-dbfb1afaeaa6936d8952f2dc652273c1fc30ba83.zip | |
Update temp-results.astro
| -rw-r--r-- | src/pages/temp-results.astro | 95 |
1 files changed, 93 insertions, 2 deletions
diff --git a/src/pages/temp-results.astro b/src/pages/temp-results.astro index 4ebf0fb..d2bd720 100644 --- a/src/pages/temp-results.astro +++ b/src/pages/temp-results.astro @@ -18,7 +18,7 @@ background: linear-gradient(180deg,rgba(0, 0, 0, 1) 31%, rgba(255, 0, 0, 1) 88%) } - .fancy-button { + /* .fancy-button { padding: 14px 28px; font-size: 18px; font-weight: 600; @@ -53,13 +53,104 @@ background: linear-gradient(180deg,rgba(0, 0, 0, 1) 31%, rgba(255, 0, 0, 1) 88%) .btn:hover { transform: scale(2); background-color: #ffe6e6; + }*/ + *, + *::before, + *::after { + box-sizing: border-box; + } + + body { + min-height: 100vh; + margin: 0; + display: grid; + place-items: center; + background: #101120; + font-family: "Balsamiq Sans", cursive; + color: #f50000; + text-align: center; + padding: 2rem; + } + + h1 { + font-size: 4rem; + margin-bottom: 1rem; + } + + p { + font-size: 1.5rem; + margin-bottom: 2rem; + } + + .neon-button { + font-size: 2rem; + display: inline-block; + cursor: pointer; + color: #f50000; + background: transparent; + border: #f50000 0.125em solid; + padding: 0.5em 1.5em; + border-radius: 0.25em; + text-shadow: + 0 0 0.125em rgba(255, 255, 255, 0.3), + 0 0 0.45em #f50000; + box-shadow: + inset 0 0 0.5em 0 #f50000, + 0 0 0.5em 0 #f50000; + position: relative; + transition: all 0.3s ease; + } + + .neon-button::before { + pointer-events: none; + content: ""; + position: absolute; + background: #f50000; + top: 120%; + left: 0; + width: 100%; + height: 100%; + transform: perspective(1em) rotateX(40deg) scale(1, 0.35); + filter: blur(1em); + opacity: 0.7; + } + + .neon-button::after { + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + box-shadow: 0 0 2em 0.5em #f50000; + opacity: 0; + background-color: #f50000; + z-index: -1; + transition: opacity 100ms linear; + } + + .neon-button:hover, + .neon-button:focus { + color: #101120; + background-color: #f50000; + text-shadow: none; + } + + .neon-button:hover::before, + .neon-button:focus::before { + opacity: 1; + } + + .neon-button:hover::after, + .neon-button:focus::after { + opacity: 1; } </style> </head> <body> <div class="center-container"> - <button class="fancy-button btn" onclick="startCountdown(this)"> + <button class="neon-button btn" onclick="startCountdown(this)"> 🎉 Congratulations </button> </div> |