404.html (1664B) download
1<!DOCTYPE html>
2<html>
3<div class="number">404</div>
4<div class="text"><span>Helaas...</span><br>Pagina niet gevonden</div>
5<style>
6 body {
7 display: flex;
8 flex-flow: row wrap;
9 align-content: center;
10 justify-content: center;
11 }
12
13 div {
14 width: 100%;
15 text-align: center;
16 }
17
18 .number {
19 background: #fff;
20 position: relative;
21 font: 900 30vmin "Consolas";
22 letter-spacing: 5vmin;
23 text-shadow: 2px -1px 0 #000, 4px -2px 0 #0a0a0a, 6px -3px 0 #0f0f0f, 8px -4px 0 #141414, 10px -5px 0 #1a1a1a, 12px -6px 0 #1f1f1f, 14px -7px 0 #242424, 16px -8px 0 #292929;
24 }
25 .number::before {
26 background-color: #673ab7;
27 background-image: radial-gradient(closest-side at 50% 50%, #ffc107 100%, rgba(0, 0, 0, 0)), radial-gradient(closest-side at 50% 50%, #e91e63 100%, rgba(0, 0, 0, 0));
28 background-repeat: repeat-x;
29 background-size: 40vmin 40vmin;
30 background-position: -100vmin 20vmin, 100vmin -25vmin;
31 width: 100%;
32 height: 100%;
33 mix-blend-mode: screen;
34 -webkit-animation: moving 10s linear infinite both;
35 animation: moving 10s linear infinite both;
36 display: block;
37 position: absolute;
38 content: "";
39 }
40 @-webkit-keyframes moving {
41 to {
42 background-position: 100vmin 20vmin, -100vmin -25vmin;
43 }
44 }
45 @keyframes moving {
46 to {
47 background-position: 100vmin 20vmin, -100vmin -25vmin;
48 }
49 }
50
51 .text {
52 font: 400 5vmin "Courgette";
53 }
54 .text span {
55 font-size: 10vmin;
56 }
57</style>
58</html>