145 lines
3.9 KiB
HTML
145 lines
3.9 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
<title>404</title>
|
||
|
|
<meta name="description" content="A 404 error status implies that the file or page that you're looking for could not be found.">
|
||
|
|
<meta property="og:title" content="404">
|
||
|
|
<meta property="og:description" content="A 404 error status implies that the file or page that you're looking for could not be found.">
|
||
|
|
</head>
|
||
|
|
<!--[if lt IE 8]>
|
||
|
|
<p class="js-fail text-center animated slideInDown">You are using an outdated browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p><![endif]-->
|
||
|
|
<noscript class="js-fail text-center animated slideInDown">Javascript required to run this website</noscript>
|
||
|
|
<body><div class="video-overlay"></div>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
h1 {
|
||
|
|
position: relative;
|
||
|
|
font-weight: 700;
|
||
|
|
color: #fff;
|
||
|
|
letter-spacing: 0.02em;
|
||
|
|
text-transform: uppercase;
|
||
|
|
text-shadow: 0 0 0.15em #1da9cc;
|
||
|
|
user-select: none;
|
||
|
|
white-space: nowrap;
|
||
|
|
filter: blur(0.007em);
|
||
|
|
animation: shake 2.5s linear infinite both;
|
||
|
|
text-align: center;
|
||
|
|
padding: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
h1 span {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
-webkit-clip-path: polygon(10% 0%, 44% 0%, 70% 100%, 55% 100%);
|
||
|
|
clip-path: polygon(10% 0%, 44% 0%, 70% 100%, 55% 100%);
|
||
|
|
}
|
||
|
|
|
||
|
|
h1::before,
|
||
|
|
h1::after {
|
||
|
|
content: attr(data-text);
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
h1::before {
|
||
|
|
animation: crack1 2.5s linear forwards;
|
||
|
|
-webkit-clip-path: polygon(0% 0%, 10% 0%, 55% 100%, 0% 100%);
|
||
|
|
clip-path: polygon(0% 0%, 10% 0%, 55% 100%, 0% 100%);
|
||
|
|
}
|
||
|
|
|
||
|
|
h1::after {
|
||
|
|
animation: crack2 2.5s linear forwards;
|
||
|
|
-webkit-clip-path: polygon(44% 0%, 100% 0%, 100% 100%, 70% 100%);
|
||
|
|
clip-path: polygon(44% 0%, 100% 0%, 100% 100%, 70% 100%);
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes shake {
|
||
|
|
5%, 15%, 25%, 35%, 55%, 65%, 75%, 95% {
|
||
|
|
filter: blur(0.018em);
|
||
|
|
transform: translateY(0.018em) rotate(0deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
10%, 30%, 40%, 50%, 70%, 80%, 90% {
|
||
|
|
filter: blur(0.01em);
|
||
|
|
transform: translateY(-0.018em) rotate(0deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
20%, 60% {
|
||
|
|
filter: blur(0.03em);
|
||
|
|
transform: translate(-0.018em, 0.018em) rotate(0deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
45%, 85% {
|
||
|
|
filter: blur(0.03em);
|
||
|
|
transform: translate(0.018em, -0.018em) rotate(0deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
filter: blur(0.007em);
|
||
|
|
transform: translate(0) rotate(-0.5deg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes crack1 {
|
||
|
|
0%, 95% {
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
transform: translate(-51%, -48%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes crack2 {
|
||
|
|
0%, 95% {
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
transform: translate(-49%, -53%);
|
||
|
|
}
|
||
|
|
}</style>
|
||
|
|
<header>
|
||
|
|
|
||
|
|
<h1 data-text="404 | Page not found"><span>404 | Page not found</span></h1>
|
||
|
|
|
||
|
|
</header>
|
||
|
|
|
||
|
|
|
||
|
|
<script>document.write('<a class="button btn" onclick="goBack()" href="' + document.location.hostname + '" title="← BACK TO ' + window.location.hostname + '">BACK</a>');</script>
|
||
|
|
<script>document.write(new Date().getFullYear());</script>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<footer class="wrapper">
|
||
|
|
|
||
|
|
</footer>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<script src="js/background-video.js"></script>
|
||
|
|
<link type="text/css" href="css/background-video.css" rel="stylesheet" />
|
||
|
|
<link type="text/css" href="css/grid.css" rel="stylesheet" />
|
||
|
|
<script>
|
||
|
|
new BackgroundVideo({
|
||
|
|
|
||
|
|
video: [
|
||
|
|
{
|
||
|
|
file: "video/outside/storm.mp4"
|
||
|
|
// formats: ["mp4"]
|
||
|
|
}
|
||
|
|
],
|
||
|
|
|
||
|
|
mobileImg: "img/tunnelvision.jpg",
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|