mirror of
https://github.com/hexahigh/portfolio.git
synced 2025-12-12 03:25:06 +01:00
180 lines
3.3 KiB
HTML
180 lines
3.3 KiB
HTML
<head>
|
|
<link href='https://fonts.googleapis.com/css?family=Varela' rel='stylesheet' type='text/css'>
|
|
<title>Uh oh. 404</title>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
</head>
|
|
<style>
|
|
body {
|
|
background: black;
|
|
font-family: 'Varela', sans-serif;
|
|
}
|
|
.glitch {
|
|
color: white;
|
|
font-size: 100px;
|
|
position: relative;
|
|
width: 50%;
|
|
margin: auto;
|
|
}
|
|
@keyframes noise-anim {
|
|
0% {
|
|
clip: rect(12px, 9999px, 32px, 0);
|
|
}
|
|
5% {
|
|
clip: rect(6px, 9999px, 59px, 0);
|
|
}
|
|
10% {
|
|
clip: rect(35px, 9999px, 55px, 0);
|
|
}
|
|
15% {
|
|
clip: rect(73px, 9999px, 50px, 0);
|
|
}
|
|
20% {
|
|
clip: rect(18px, 9999px, 89px, 0);
|
|
}
|
|
25% {
|
|
clip: rect(90px, 9999px, 23px, 0);
|
|
}
|
|
30% {
|
|
clip: rect(24px, 9999px, 26px, 0);
|
|
}
|
|
35% {
|
|
clip: rect(27px, 9999px, 9px, 0);
|
|
}
|
|
40% {
|
|
clip: rect(80px, 9999px, 53px, 0);
|
|
}
|
|
45% {
|
|
clip: rect(15px, 9999px, 73px, 0);
|
|
}
|
|
50% {
|
|
clip: rect(67px, 9999px, 22px, 0);
|
|
}
|
|
55% {
|
|
clip: rect(55px, 9999px, 44px, 0);
|
|
}
|
|
60% {
|
|
clip: rect(89px, 9999px, 8px, 0);
|
|
}
|
|
65% {
|
|
clip: rect(44px, 9999px, 71px, 0);
|
|
}
|
|
70% {
|
|
clip: rect(84px, 9999px, 81px, 0);
|
|
}
|
|
75% {
|
|
clip: rect(97px, 9999px, 54px, 0);
|
|
}
|
|
80% {
|
|
clip: rect(66px, 9999px, 13px, 0);
|
|
}
|
|
85% {
|
|
clip: rect(92px, 9999px, 93px, 0);
|
|
}
|
|
90% {
|
|
clip: rect(58px, 9999px, 58px, 0);
|
|
}
|
|
95% {
|
|
clip: rect(65px, 9999px, 8px, 0);
|
|
}
|
|
100% {
|
|
clip: rect(2px, 9999px, 25px, 0);
|
|
}
|
|
}
|
|
.glitch:after {
|
|
content: attr(data-text);
|
|
position: absolute;
|
|
left: 2px;
|
|
text-shadow: -1px 0 red;
|
|
top: 0;
|
|
color: white;
|
|
background: black;
|
|
overflow: hidden;
|
|
clip: rect(0, 900px, 0, 0);
|
|
animation: noise-anim 2s infinite linear alternate-reverse;
|
|
}
|
|
@keyframes noise-anim-2 {
|
|
0% {
|
|
clip: rect(37px, 9999px, 26px, 0);
|
|
}
|
|
5% {
|
|
clip: rect(52px, 9999px, 70px, 0);
|
|
}
|
|
10% {
|
|
clip: rect(61px, 9999px, 71px, 0);
|
|
}
|
|
15% {
|
|
clip: rect(24px, 9999px, 33px, 0);
|
|
}
|
|
20% {
|
|
clip: rect(42px, 9999px, 71px, 0);
|
|
}
|
|
25% {
|
|
clip: rect(95px, 9999px, 13px, 0);
|
|
}
|
|
30% {
|
|
clip: rect(57px, 9999px, 19px, 0);
|
|
}
|
|
35% {
|
|
clip: rect(93px, 9999px, 99px, 0);
|
|
}
|
|
40% {
|
|
clip: rect(49px, 9999px, 97px, 0);
|
|
}
|
|
45% {
|
|
clip: rect(33px, 9999px, 47px, 0);
|
|
}
|
|
50% {
|
|
clip: rect(83px, 9999px, 68px, 0);
|
|
}
|
|
55% {
|
|
clip: rect(14px, 9999px, 77px, 0);
|
|
}
|
|
60% {
|
|
clip: rect(65px, 9999px, 95px, 0);
|
|
}
|
|
65% {
|
|
clip: rect(21px, 9999px, 28px, 0);
|
|
}
|
|
70% {
|
|
clip: rect(82px, 9999px, 8px, 0);
|
|
}
|
|
75% {
|
|
clip: rect(42px, 9999px, 32px, 0);
|
|
}
|
|
80% {
|
|
clip: rect(37px, 9999px, 35px, 0);
|
|
}
|
|
85% {
|
|
clip: rect(53px, 9999px, 76px, 0);
|
|
}
|
|
90% {
|
|
clip: rect(14px, 9999px, 76px, 0);
|
|
}
|
|
95% {
|
|
clip: rect(43px, 9999px, 69px, 0);
|
|
}
|
|
100% {
|
|
clip: rect(81px, 9999px, 92px, 0);
|
|
}
|
|
}
|
|
.glitch:before {
|
|
content: attr(data-text);
|
|
position: absolute;
|
|
left: -2px;
|
|
text-shadow: 1px 0 blue;
|
|
top: 0;
|
|
color: white;
|
|
background: black;
|
|
overflow: hidden;
|
|
clip: rect(0, 900px, 0, 0);
|
|
animation: noise-anim-2 3s infinite linear alternate-reverse;
|
|
}
|
|
</style>
|
|
|
|
<body>
|
|
<p class="glitch" data-text="404">404</p>
|
|
<p class="glitch" style="font-size: 60px;" data-text="Page not">Page not</p>
|
|
<p class="glitch" style="font-size: 60px;" data-text="found">found</p>
|
|
</body> |