mctaylors/NXInspired
mctaylors/NXInspired
1
1
Fork 0
Code Issues 1 Pull requests Activity

Initial commit

Browse source 
Signed-off-by: mctaylors <cantsendmails@mctaylors.ru>
This commit is contained in:
Macintxsh 2024-05-01 04:14:58 +05:00
commit 8f2c275d39
Signed by: mctaylors
GPG key ID: 7181BEBE676903C1
6 changed files with 132 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
assets/css/fonts.css Normal file
View file

@ -0,0 +1,4 @@
@font-face {
font-family: Nintendo;
src: url(/assets/ttf/Nintendo.ttf);
}

9
assets/css/keyframes.css Normal file
View file

@ -0,0 +1,9 @@
@keyframes hover-outline {
from {
outline-color: var(--light-blue);
}
to {
outline-color: var(--dark-blue);
}
}

95
assets/css/style.css Normal file
View file

@ -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;
}

BIN
assets/jpg/Urchin_Underpass.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
assets/ttf/Nintendo.ttf Normal file
View file

Binary file not shown.

24
index.html Normal file
View file

@ -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>