404 Page Not Found

HTML
<div class="main"> <div class="wrap"> <svg id="shruggie" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 100"> <defs> <style> .shrug { stroke: #fff; stroke-width: 2; fill: none; } .smile { stroke-dasharray: 1000; stroke-dashoffset: 1000; } </style> </defs> <line x1="25" y1="32" x2="50" y2="32" class="shrug hand-l"/> <line x1="55" y1="30" x2="65" y2="60" class="shrug forearm-l"/> <line x1="70" y1="65" x2="95" y2="65" class="shrug shoulder-l"/> <path d="M100,23 Q80,43 100,65" class="shrug head"/> <path d="M105,25 Q107,30 108,35" class="shrug head eye-l"/> <path d="M119,25 Q120,30 119,35" class="shrug head eye-r"/> <path d="M110,60 Q135,60 135,33" class="shrug smile"/> <path d="M135,23 Q155,43 135,65" class="shrug head"/> <line x1="140" y1="65" x2="165" y2="65" class="shrug shoulder-r"/> <line x1="170" y1="60" x2="180" y2="30" class="shrug forearm-r"/> <line x1="185" y1="32" x2="210" y2="32" class="shrug hand-r"/> </svg> </div> </div>
CSS
body { background: #333; } .main { position: absolute; top: 0; left: 0; height: 100%; width: 100%; } .wrap { width: 100vw; height: 250vw; max-height: 100vh; max-width: 250vh; margin: 0 auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow: hidden; } #shruggie { width: 100%; height: 100%; position: relative; } .shrug { opacity: 0; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-animation-duration: 0.25s; animation-duration: 0.25s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } @-webkit-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes shoulder-l { from { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } to { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes shoulder-l { from { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } to { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @-webkit-keyframes shoulder-r { from { -webkit-transform: rotate(90deg); transform: rotate(90deg); } to { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes shoulder-r { from { -webkit-transform: rotate(90deg); transform: rotate(90deg); } to { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @-webkit-keyframes forearm-l { from { -webkit-transform: rotate(-180deg); transform: rotate(-180deg); } to { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes forearm-l { from { -webkit-transform: rotate(-180deg); transform: rotate(-180deg); } to { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @-webkit-keyframes forearm-r { from { -webkit-transform: rotate(180deg); transform: rotate(180deg); } to { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes forearm-r { from { -webkit-transform: rotate(180deg); transform: rotate(180deg); } to { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @-webkit-keyframes hand-l { from { -webkit-transform: rotate(260deg); transform: rotate(260deg); } to { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes hand-l { from { -webkit-transform: rotate(260deg); transform: rotate(260deg); } to { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @-webkit-keyframes hand-r { from { -webkit-transform: rotate(-260deg); transform: rotate(-260deg); } to { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes hand-r { from { -webkit-transform: rotate(-260deg); transform: rotate(-260deg); } to { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @-webkit-keyframes smile { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } } @keyframes smile { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } } .head { -webkit-animation-name: fadein; animation-name: fadein; } .shoulder-l { -webkit-transform-origin: center right; transform-origin: center right; -webkit-animation-name: shoulder-l, fadein; animation-name: shoulder-l, fadein; -webkit-animation-delay: 0.125s; animation-delay: 0.125s; } .shoulder-r { -webkit-transform-origin: center left; transform-origin: center left; -webkit-animation-name: shoulder-r, fadein; animation-name: shoulder-r, fadein; -webkit-animation-delay: 0.125s; animation-delay: 0.125s; } .forearm-l { -webkit-transform-origin: bottom center; transform-origin: bottom center; -webkit-animation-name: forearm-l, fadein; animation-name: forearm-l, fadein; -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .forearm-r { -webkit-transform-origin: bottom center; transform-origin: bottom center; -webkit-animation-name: forearm-r, fadein; animation-name: forearm-r, fadein; -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .hand-l { -webkit-transform-origin: center right; transform-origin: center right; -webkit-animation-name: hand-l, fadein; animation-name: hand-l, fadein; -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .hand-r { -webkit-transform-origin: center left; transform-origin: center left; -webkit-animation-name: hand-r, fadein; animation-name: hand-r, fadein; -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .smile { opacity: 1; -webkit-animation-name: smile; animation-name: smile; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; -webkit-animation-duration: 4.5s; animation-duration: 4.5s; }
JAVASCRIPT
Expand for more options Login