el_diego/pagina_ventas_salaudio
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

+: 404

Browse Source
This commit is contained in:
devfzn 2023-08-02 16:05:09 -04:00
parent 8a4a11d24d
commit 873b4e7a3e
Signed by: devfzn
GPG Key ID: E070ECF4A754FDB1
1 changed files with 179 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

179
404.html Normal file
View File

@ -0,0 +1,179 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Page not found</title>
<style>
@import url("https://fonts.googleapis.com/css2?family=M+PLUS+1+Code:wght@600&family=VT323&display=swap");
/*
font-family: 'M PLUS 1 Code', sans-serif;
font-family: 'VT323', monospace;
*/
:root {
--bck: #2b2f38;
--font: rgb(241, 241, 241);
--glitch1: hsl(214, 50%, 52%);
--glitch2: hsl(9, 50%, 52%);
--glitch3: hsl(61, 50%, 52%);
}
* {
margin: 0;
padding: 0;
}
#main {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: var(--bck);
}
h1 {
color: white;
text-align: center;
font-size: 10rem;
font-family: "VT323", monospace;
text-shadow: 6px 4px var(--glitch2), 5px -5px var(--glitch1),
2px -4px var(--glitch3);
animation: glitch 0.5s infinite;
}
#txt::after {
content: "";
position: absolute;
height: 0.3rem;
width: 100%;
background: var(--bck);
bottom: 0;
left: 0;
transform: translateY(10px);
animation: line 0.4s infinite;
box-shadow: 0px 0px 2px 2px var(--bck);
}
#txt::before {
content: "";
position: absolute;
height: 0.3rem;
width: 100%;
background: var(--bck);
bottom: 0;
left: 0;
animation: lineTwo 0.9s infinite;
box-shadow: 0px 0px 4px 3px var(--bck);
}
#txt {
position: relative;
transform: translateX(5px, 3px);
animation: move 0.8s infinite;
}
@keyframes glitch {
0% {
text-shadow: 6px 4px var(--glitch2), 5px -5px var(--glitch1),
2px -4px var(--glitch3);
}
1% {
text-shadow: -2px 0px var(--glitch2), -5px 5px var(--glitch1),
2px 4px var(--glitch3);
}
19% {
text-shadow: -2px 0px var(--glitch2), -5px 5px var(--glitch1),
2px 4px var(--glitch3);
}
20% {
text-shadow: -4px 4px var(--glitch2), 3px 3px var(--glitch1),
-2px 4px var(--glitch3);
}
39% {
text-shadow: -4px 4px var(--glitch2), 3px 3px var(--glitch1),
-2px 4px var(--glitch3);
}
40% {
text-shadow: 1px -1px var(--glitch2), -1px 5px var(--glitch1),
6px -3px var(--glitch3);
}
59% {
text-shadow: 1px -1px var(--glitch2), -1px 5px var(--glitch1),
6px -3px var(--glitch3);
}
60% {
text-shadow: -5px -4px var(--glitch2), -4px 4px var(--glitch1),
-3px 3px var(--glitch3);
}
79% {
text-shadow: -5px -4px var(--glitch2), -4px 4px var(--glitch1),
-3px 3px var(--glitch3);
}
80% {
text-shadow: -4px 4px var(--glitch2), 3px 3px var(--glitch1),
-2px 4px var(--glitch3);
}
99% {
text-shadow: -4px 4px var(--glitch2), 3px 3px var(--glitch1),
-2px 4px var(--glitch3);
}
}
@keyframes line {
0% {
transform: translateY(10px);
}
50% {
transform: translateY(-110px);
}
}
@keyframes lineTwo {
0% {
transform: translateY(10px);
}
48% {
transform: translateY(-110px);
}
50% {
transform: translateY(50px);
}
100% {
transform: translateY(-110px);
}
}
@keyframes move {
0% {
transform: translate(5px, 3px);
}
25% {
transform: translate(-4px, 1px);
}
50% {
transform: translate(3px, -4px);
}
75% {
transform: translate(-3px, 4px);
}
99% {
transform: translate(5px, 3px);
}
}
@media screen and (max-width: 720px) {
/* Noch größer, noch mehr Regeln */
h1 {
font-size: 5rem;
}
}
</style>
</head>
<body>
<div id="main">
<div id="txt">
<h1>404</h1>
<h1>not found!</h1>
</div>
</div>
</body>
</html>