<!DOCTYPE html><!-- Original illustration by Oleg Milshtein! https://dribbble.com/shots/279898-Cubes-The-Dark-Knight SCSS animation: Amit Sheen - https://codepen.io/amitsheen Watch him code this project: https://youtu.be/hhM34QXc6uA--><html lang="en"><head><meta http-equiv="content-type" content="text/html; charset=UTF-8"><meta charset="UTF-8"><title>Stephen-s Web - Error 404</title><style>svg { max-height: 90vh;} .legs { animation: legs calc(3s / 8) infinite alternate; transform-origin: 0 670px;} .leg { animation: leg 3s infinite linear; transform-origin: 305px 610px;}.leg:nth-child(2) { animation-delay: calc(3s / -2);} .body { animation: jump calc(3s / 8) infinite alternate;} .head_hair,.head_mask { animation: jump calc(3s / 8) calc(3s / 80) infinite alternate;} .head_eye,.head_mouth { animation: jump calc(3s / 8) calc(3s / 60) infinite alternate;} .hand_down { animation: rotatehand calc(3s / 8) calc(3s / 20) infinite alternate ease-in-out; transform-origin: 265px 385px;} .hand_up { animation: rotatehand calc(3s / 8) calc(3s / 20) infinite alternate ease-in-out; transform-origin: 465px 385px;}.hand_up-paw { animation: rotatehand calc(3s / 16) infinite alternate ease-in-out; transform-origin: 545px 325px;} .joker { animation: joker calc(3s * 4) calc(3s / -8) infinite linear; transform-origin: 345px 0px;} .batman { animation: batman calc(3s * 4) calc(3s / -8) infinite linear; transform-origin: 345px 0px;} @keyframes legs { from { transform: scale(1, 0.75); } to { transform: scale(1); }}@keyframes jump { from { transform: translateY(30px); } to { transform: translateY(0); }}@keyframes rotatehand { from { transform: rotate(-5deg); } to { transform: rotate(5deg); }}@keyframes joker { 0%, 100% { transform: translateX(0px); } 49% { transform: translateX(300px); } 50% { transform: translateX(300px) scale(-1, 1); } 99% { transform: translateX(0px) scale(-1, 1); }}@keyframes batman { 0%, 100% { transform: translateX(600px); } 49% { transform: translateX(900px); } 50% { transform: translateX(900px) scale(-1, 1); } 99% { transform: translateX(600px) scale(-1, 1); }}@keyframes leg { 0%, 100% { transform: translateX(65px) scale(1.1); } 85% { transform: translateX(-65px) scale(1); }}</style><script> window.console = window.console || function(t) {};</script><script> if (document.location.search.match(/type=embed/gi)) { window.parent.postMessage("resize", "*"); }</script></head><body translate="no"><h1>Welp, that's an error!</h1><p><script>var dr = document.referrer;document.write("The page "+dr+" does not exist on this website.");</script></p><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="800" height="600" viewBox="0 0 1600 1200"> <g class="batman"><defs><linearGradient id="batman-shoes" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="38%" style="stop-color:rgb(77,77,77); stop-opacity:1"></stop><stop offset="42%" style="stop-color:rgb(0,0,0); stop-opacity:1"></stop></linearGradient><linearGradient id="hand1" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="45%" style="stop-color:rgb(0,0,0); stop-opacity:1"></stop><stop offset="50%" style="stop-color:rgb(77,77,77); stop-opacity:1"></stop></linearGradient><linearGradient id="hand2" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="55%" style="stop-color:rgb(77,77,77); stop-opacity:1"></stop><stop offset="60%" style="stop-color:rgb(0,0,0); stop-opacity:1"></stop></linearGradient></defs><g class="head"><path fill="#db9b93" class="head_face" d="M 320 390 v -120 h 55 v 120 h -55"></path><path fill="#000000" class="head_mask" d="M 315 350 v -160 l 12 24 q 10 -6 20 -5 v -25 l 15 30 c 5 0 14 14 14 25 v 35 h -12 l -6 20 l -6 -20h -28 v 76 z"></path><ellipse fill="#ffffff" class="head_eye" cx="350" cy="251" rx="5" ry="12"></ellipse><ellipse fill="#ffffff" class="head_eye" cx="364" cy="251" rx="5" ry="12"></ellipse></g><g class="body"><g class="hand_up"><path fill="#000000" class="hand_up-paw" d="M 525 330 c -5 -10 -40 -20 -20 -40 c -10 -60 10 -60 10 -5 q 6 -1 12 -2 q 5 -8 12 -2 c 20 0 25 20 20 30 c 3 30 -30 30 -34 19"></path><path fill="url(#hand1)" d="M 495 390 c 60 25 45 0 30 -60 l 37 -10 c 15 90 0 130 -77 85"></path></g><g class="torso"><path fill="#000000" d="M 275 520 h 100 v 50 h -100 z"></path><path fill="#363636" d="M 220 330 h 85 a 25 25 0 0 1 25 25 v 128 h -135 v -128 a 25 25 0 0 1 25 -25"></path><path fill="#b2a800" d="M 195 483 h 135 v 27 h -135 z"></path><path fill="#363636" d="M 195 510 h 135 v 35 a 25 25 0 0 1 -25 25 h -85 a 25 25 0 0 1 -25 -25 z"></path><path fill="#4d4d4d" d="M 355 330 h 115 a 25 25 0 0 1 25 25 v 128 h -165 v -128 a 25 25 0 0 1 25 -25"></path><path fill="#fff100" d="M 330 483 h 165 v 27 h -165 z"></path><path fill="#4d4d4d" d="M 330 510 h 165 v 35 a 25 25 0 0 1 -25 25 h -115 a 25 25 0 0 1 -25 -25 z"></path><path fill="#000000" d="M 30 305 q 10 35 165 25 h 275 a 25 25 0 0 1 25 25 v 25 l -80 -50 l -85 47 l -50 -17 q -250 10 -250 -55"></path><ellipse fill="#fff100" stroke="#000000" stroke-width="2px" cx="416" cy="497" rx="29" ry="19"></ellipse><path fill="#000000" d="M 417 425 c 0 -10 16 -25 16 -10 c 20 -20 20 5 10 10 c 30 -10 30 -45 -7 -55 c 10 20 -15 30 -13 -3 q -6 10 -12 0 c 2 23 -23 33 -13 3 c -37 10 -37 45 -7 55 c -10 -5 -10 -30 10 -10 c 0 -15 16 0 16 10"></path><path fill="#000000" style="transform: scale(0.5); transform-origin: 415px 495px;" d="M 417 525 c 0 -10 16 -25 16 -10 c 20 -20 20 5 10 10 c 30 -10 30 -45 -7 -55 c 10 20 -15 30 -13 -3 q -6 10 -12 0 c 2 23 -23 33 -13 3 c -37 10 -37 45 -7 55 c -10 -5 -10 -30 10 -10 c 0 -15 16 0 16 10"></path></g><g class="hand_down"><path fill="url(#hand2)" d="M 260 380 c 10 3 15 20 0 20 c -15 0 -86 -20 -86 0 c -5 5 -8 56 -3 75 h -42 c 0 -50 10 -100 35 -100 q 43 -10 97 5"></path><path fill="#000000" d="M 170 475 c 15 35 -15 65 -20 50 q -8 7 -13 -5 q -8 7 -10 -8 c -10 0 -10 -30 2 -30 v -7 z"></path></g></g><g class="legs"><path class="leg" fill="url(#batman-shoes)" d="M 350 570 c 15 25 10 40 -22 85 q -10 15 60 9 c 15 0 -10 -15 -21 -26 q 15 -34 -3 -68"></path><path class="leg" fill="url(#batman-shoes)" d="M 350 570 c 15 25 10 40 -22 85 q -10 15 60 9 c 15 0 -10 -15 -21 -26 q 15 -34 -3 -68"></path></g></g></svg><h2>Error 404 <a href="https://www.downes.ca/">downes.ca</a></h2> </body></html>
