Initial commit

Signed-off-by: mctaylors <cantsendmails@mctaylors.ru>
2024-05-01 04:14:58 +05:00 · 2024-05-01 04:14:58 +05:00 · 8f2c275d39
commit 8f2c275d39
6 changed files with 132 additions and 0 deletions
--- a/assets/css/fonts.css
+++ b/assets/css/fonts.css
@ -0,0 +1,4 @@
+@font-face {
+    font-family: Nintendo;
+    src: url(/assets/ttf/Nintendo.ttf);
+}
--- a/assets/css/keyframes.css
+++ b/assets/css/keyframes.css
@ -0,0 +1,9 @@
+@keyframes hover-outline {
+    from {
+        outline-color: var(--light-blue);
+    }
+
+    to {
+        outline-color: var(--dark-blue);
+    }
+}
--- a/assets/css/style.css
+++ b/assets/css/style.css
@ -0,0 +1,95 @@
+@import url(fonts.css);
+@import url(keyframes.css);
+
+:root {
+    --background: #272727cf;
+    --background-active: #171717cf;
+    --border: #3f3f3f;
+    --light-blue: #60f7df;
+    --dark-blue: #10bfc7;
+}
+
+.background-image {
+    position: fixed;
+    height: 100vh;
+    width: 100vw;
+    margin-top: -8px;
+    margin-left: -8px;
+    background: url(/assets/jpg/Urchin_Underpass.jpg);
+    background-size: cover;
+    filter: blur(16px) brightness(0.5);
+    transform: scale(1.1);
+    z-index: -1;
+}
+
+p, button {
+    color: white;
+    font-family: Nintendo;
+    font-weight: bold;
+    font-size: 24px;
+    line-height: 40px;
+    letter-spacing: -0.025em;
+}
+
+.dialog {
+    position: absolute;
+    width: 770px;
+    height: 355px;
+    left: 50%;
+    top: 50%;
+    -webkit-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+    background-color: var(--background);
+    backdrop-filter: blur(4px);
+    border: 1px solid var(--border);
+    border-radius: 4px;
+}
+
+.dialog > .errorcode {
+    margin-top: 40px;
+    margin-left: 60px;
+    color: lightgray;
+    font-size: 16px;
+}
+
+.dialog > .description {
+    margin-left: 68px;
+    margin-right: 32px;
+}
+
+.dialog > p > br {
+    margin-bottom: 0.75em;
+}
+
+.dialog button {
+    position: absolute;
+    bottom: 0;
+    background-color: transparent;
+    border: 0px;
+    border-top: 2px solid var(--border);
+    width: 100%;
+    height: 74px;
+}
+
+.dialog button:hover {
+    background-color: var(--background-active);
+    border-radius: 4px;
+    outline: 5px solid;
+    box-shadow: 0px 0px 12px var(--light-blue);
+    animation: 500ms infinite alternate ease-out hover-outline;
+}
+
+.dialog button:focus, .dialog button:active {
+    outline: none;
+    box-shadow: none;
+}
+
+.dialog button:focus {
+    transition: 100ms;
+    background-color: transparent;
+}
+
+.dialog button:active {
+    transition: none;
+    background-color: #274747cf;
+}
--- a/assets/jpg/Urchin_Underpass.jpg
+++ b/assets/jpg/Urchin_Underpass.jpg
--- a/assets/ttf/Nintendo.ttf
+++ b/assets/ttf/Nintendo.ttf
--- a/index.html
+++ b/index.html
@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>NXInspired</title>
+    <link rel="stylesheet" href="/assets/css/style.css" />
+    <meta charset="utf-8" />
+</head>
+<body>
+    <div class="background-image"></div>
+    <div class="dialog">
+        <p class="errorcode">
+            Error Code: 404
+        </p>
+        <p class="description">
+            Not Found.
+            <br/>
+            Server cannot find the requested resource. Make sure the link is spelled correctly.
+        </p>
+        <button>
+            OK
+        </button>
+    </div>
+</body>
+</html>