Minimal 404 error - text appears to enter from the crack.
Created
November 9, 2025 21:50
-
-
Save kiedtl/cc3bbc23c3055f3b0a33ec2b80175ae5 to your computer and use it in GitHub Desktop.
#dailyui 008: 404 Page
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <main> | |
| <div> | |
| <div> | |
| <span>404 </span> | |
| <span>not streaming yet</span> | |
| </div> | |
| <svg viewBox='0 0 200 600'> | |
| <polygon points='118.302698 8 59.5369448 66.7657528 186.487016 193.715824 14 366.202839 153.491505 505.694344 68.1413353 591.044514 200 591.044514 200 8'></polygon> | |
| </svg> | |
| </div> | |
| <svg class='crack' viewBox='0 0 200 600'> | |
| <polyline points='118.302698 8 59.5369448 66.7657528 186.487016 193.715824 14 366.202839 153.491505 505.694344 68.1413353 591.044514'></polyline> | |
| </svg> | |
| <div> | |
| <svg viewBox='0 0 200 600'> | |
| <polygon points='118.302698 8 59.5369448 66.7657528 186.487016 193.715824 14 366.202839 153.491505 505.694344 68.1413353 591.044514 0 591.044514 0 8'></polygon> | |
| </svg> | |
| <div> | |
| <span>try again later?</span> | |
| <span> | |
| <a href="https://www.ntcatl.com/"> | |
| <b>or go back…</b> | |
| </a> | |
| </span> | |
| </div> | |
| </div> | |
| </main> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $grey: #0A043E; | |
| $red: #CA94F4; | |
| $green: #43CB9D; | |
| $p: 1em; | |
| $easeOutExpo: cubic-bezier(0.190, 1.000, 0.220, 1.000); | |
| *, *:before, *:after { box-sizing: border-box; } | |
| * { -webkit-tap-highlight-color: rgba(0,0,0,0); transform-style: preserve-3d; } | |
| *:focus { outline: none!important; } | |
| body, html { height: 100%; } | |
| body { | |
| display: flex; | |
| align-items: center; | |
| align-content: center; | |
| justify-content: center; | |
| padding: $p; | |
| background: $grey; | |
| color: white; | |
| font-family: "Mona Sans", system-ui, sans-serif; | |
| font-feature-settings: "liga", "ss05" on, "ss07" on; | |
| font-size: 30px; | |
| text-rendering: optimizeLegibility; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| ::selection { | |
| background: none; | |
| } | |
| a { | |
| all: unset; | |
| display: block; | |
| cursor: pointer; | |
| animation: pulseColor 1000ms linear 3100ms forwards; | |
| font-weight: 500; | |
| &:hover, &:focus { | |
| b { | |
| color: $red; | |
| } | |
| } | |
| &:active { | |
| b { | |
| color: $green; | |
| } | |
| } | |
| } | |
| svg { | |
| width: 50px; | |
| height: auto; | |
| } | |
| .crack { | |
| position: relative; | |
| z-index: 4; | |
| margin-left: -50px; | |
| polyline { | |
| fill: none; | |
| stroke: $red; | |
| stroke-width: 10px; | |
| stroke-linecap: round; | |
| stroke-linejoin: round; | |
| stroke-dasharray: 1649.099; | |
| stroke-dashoffset: 1649.099; | |
| animation: drawStroke 1500ms ease-out 500ms forwards; | |
| } | |
| } | |
| main { | |
| display: flex; | |
| align-items: center; | |
| align-content: center; | |
| justify-content: center; | |
| > div { | |
| display: flex; | |
| align-items: center; | |
| align-content: center; | |
| position: relative; | |
| overflow: hidden; | |
| svg { | |
| position: relative; | |
| z-index: 1; | |
| polygon { | |
| fill: $grey; | |
| } | |
| } | |
| span { | |
| display: block; | |
| position: relative; | |
| z-index: 0; | |
| padding: 0 $p; | |
| line-height: 1.4; | |
| } | |
| &:first-child { | |
| text-align: right; | |
| z-index: 1; | |
| span { | |
| &:first-child { | |
| opacity: 0; | |
| transform: translateX(100%); | |
| animation: translateLeft 1000ms linear 1250ms forwards; | |
| } | |
| &:last-child { | |
| opacity: 0; | |
| transform: translateX(100%); | |
| animation: translateLeft 1000ms linear 1450ms forwards; | |
| } | |
| } | |
| svg { | |
| polygon { | |
| animation: removeFill 10ms ease-out 1600ms forwards; | |
| } | |
| } | |
| } | |
| &:last-child { | |
| z-index: 0; | |
| margin-left: -50px; | |
| span { | |
| &:first-child { | |
| opacity: 0; | |
| transform: translateX(-100%); | |
| animation: translateRight 1000ms linear 1650ms forwards; | |
| } | |
| &:last-child { | |
| opacity: 0; | |
| transform: translateX(-100%); | |
| animation: translateRight 1000ms linear 1850ms forwards; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| @keyframes drawStroke { | |
| 0% { stroke-dashoffset: 1649.099; } | |
| 100% { stroke-dashoffset: 0; } | |
| } | |
| @keyframes removeFill { | |
| 0% { fill: rgba($grey, 1); } | |
| 100% { fill: rgba($grey, 0); } | |
| } | |
| @keyframes pulseColor { | |
| 0% { color: white; } | |
| 25% { color: $green; } | |
| 50% { color: white; } | |
| 75% { color: $green; } | |
| 100% { color: white; } | |
| } | |
| /* https://goo.gl/v323yz */ | |
| @keyframes translateLeft { | |
| 0% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 150, 0, 0, 1); opacity: 1; } | |
| 7.61% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 69.561, 0, 0, 1); } | |
| 11.41% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 39.355, 0, 0, 1); } | |
| 15.12% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 17.801, 0, 0, 1); } | |
| 18.92% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 3.02, 0, 0, 1); } | |
| 22.72% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -5.661, 0, 0, 1); } | |
| 30.23% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -10.852, 0, 0, 1); } | |
| 50.25% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -2.282, 0, 0, 1); } | |
| 70.27% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.519, 0, 0, 1); } | |
| 100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); opacity: 1; } | |
| } | |
| /* https://goo.gl/p1Hnde */ | |
| @keyframes translateRight { | |
| 0% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -150, 0, 0, 1); opacity: 1; } | |
| 7.61% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -69.561, 0, 0, 1); } | |
| 11.41% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -39.355, 0, 0, 1); } | |
| 15.12% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -17.801, 0, 0, 1); } | |
| 18.92% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -3.02, 0, 0, 1); } | |
| 22.72% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 5.661, 0, 0, 1); } | |
| 30.23% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 10.852, 0, 0, 1); } | |
| 50.25% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 2.282, 0, 0, 1); } | |
| 70.27% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.519, 0, 0, 1); } | |
| 100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); opacity: 1; } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://gabriellew.ee/static/css/fonts.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment