404.html (1664B)
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>