Created
October 1, 2018 19:36
-
-
Save danferth/f4307ba02c4613da7ecf6e7f391712fc to your computer and use it in GitHub Desktop.
404 page
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en" > | |
| <head> | |
| <meta charset="UTF-8"> | |
| <link rel="shortcut icon" href="https://danferth.com/assets/favicons/favicon-16x16.png" type="image/png" /> | |
| <title>404</title> | |
| <link href="https://fonts.googleapis.com/css?family=Josefin+Sans:100,300|Sacramento" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> | |
| <style type="text/css"> | |
| .wrap { | |
| background: #fefefe; | |
| width: 100%; | |
| height: 100%; | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| display: flex; | |
| flex-direction: column; | |
| flex-wrap: nowrap; | |
| justify-content: flex-start; | |
| align-items: center; | |
| overflow: hidden; | |
| } | |
| .logo { | |
| width: 20vh; | |
| height: 20vh; | |
| margin-top: 25vh; | |
| background: #fefefe; | |
| border: 4px solid #fefefe; | |
| border-radius: 100%; | |
| z-index: 5000; | |
| visibility: hidden; | |
| } | |
| .logo svg { | |
| width: 20vh; | |
| height: 20vh; | |
| fill: #f2f3f3; | |
| } | |
| .text { | |
| width: 60vw; | |
| margin-top: 6vh; | |
| text-align: center; | |
| z-index: 4000; | |
| color: #cacccd; | |
| background: linear-gradient(transparent 0%, #fefefe 10%, #fefefe 95%, transparent 100%); | |
| } | |
| .text p { | |
| margin: 0 0 1rem 0; | |
| font-family: "Josefin Sans", sans-serif; | |
| font-weight: 300; | |
| font-size: .875rem; | |
| line-height: 1.5; | |
| visibility: hidden; | |
| } | |
| .text p a { | |
| color: #474a4c; | |
| text-decoration: none; | |
| transition: all 350ms; | |
| border-bottom: 1px dotted #fefefe; | |
| } | |
| .text p a:hover { | |
| color: #ff1a00; | |
| border-bottom: 1px dotted #ff1a00; | |
| } | |
| .text h1 { | |
| color: #a8acad; | |
| text-shadow: 0 1px 0 white; | |
| margin: 1rem 0 .5rem 0; | |
| font-family: "Sacramento", cursive; | |
| font-size: 2rem; | |
| line-height: 1; | |
| visibility: hidden; | |
| } | |
| .line { | |
| background: #fbfbfb; | |
| width: 7px; | |
| border-radius: 7px; | |
| height: 90vh; | |
| position: absolute; | |
| left: calc(50%-3.5px); | |
| top: 5vh; | |
| visibility: hidden; | |
| z-index: 1000; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="wrap"> | |
| <div class="logo"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><path d="M357.918 256.558l.31-.95c3.376-2.405 6.27-5.523 8.44-9.296 8.63-14.992 2.575-34.65-13.517-43.913-3.31-1.91-6.79-3.23-10.31-3.99 2.62-10.55-3-22.73-14.31-29.24-13.3-7.66-29.43-4.58-36.03 6.88-.37.64-.7 1.29-.99 1.96-1.44-1.21-3-2.29-4.67-3.25-17.37-10-40.84-2.75-56.11 16.04l-.43.55c.78 2.74 1.2 5.63 1.2 8.62 0 1.86-.17 3.69-.48 5.47 35.67-45.53 106.21-7.64 106.21-7.64s-74.91-34.66-106.37 16.98l16.8 10.04c30.76-46 97.53-3.49 97.53-3.49s-65.03-35.63-93.13 6.12l15.22 9.1c6.74-8.28 15.35-13.21 25.69-14.57 28.21-3.73 58.96 22.95 58.96 22.95s-32.17-21.31-58.284-17.86c-8.736 1.15-16.073 5.27-21.89 12.14l9.31 5.57c.1-.04.18-.12.28-.14 25.137-6.77 70.296 23.8 70.296 23.8s-39.87-21.72-63.924-19.69l64.58 38.61-66.11-36.39c10.14 21.89 49.24 45.63 49.24 45.63s-49.115-23.69-55.89-48.83c-.044-.16-.02-.32-.035-.49l-9.44-5.2c-3.06 8.53-2.95 16.97.45 25.14 10.12 24.29 44.73 41.44 44.73 41.44s-38.505-13.19-49.46-39.45c-4.02-9.66-4.085-19.62-.27-29.64L250 231.03c-21.95 45.37 41.45 83.664 41.45 83.664s-70.218-36.345-45.94-86.134l-17.21-9.46c-28.94 53.13 38.8 100.54 38.8 100.54s-68.275-42-46.745-95.7c-3.51 2.97-7.66 5.21-12.236 6.42l-.41.44c-8.58 22.66-3.06 46.59 14.31 56.59 1.67.96 3.39 1.77 5.16 2.42-.43.59-.83 1.206-1.2 1.846-6.6 11.46-1.16 26.96 12.14 34.62 11.3 6.51 24.66 5.255 32.46-2.31 2.42 2.66 5.31 5.01 8.63 6.92 16.09 9.26 36.12 4.62 44.76-10.37 2.17-3.77 3.41-7.844 3.79-11.97l.67-.742c13.56 4.557 28.78-.73 36.06-13.376 7.28-12.65 4.21-28.466-6.55-37.9z" id="right"></path><path d="M42.082 256.558l-.31-.95c-3.375-2.405-6.27-5.523-8.44-9.296-8.626-14.992-2.573-34.65 13.516-43.913 3.316-1.91 6.798-3.23 10.315-3.99-2.623-10.55 3-22.73 14.314-29.24 13.303-7.66 29.436-4.58 36.03 6.88.372.64.7 1.29.998 1.96 1.445-1.21 3.005-2.29 4.676-3.25 17.38-10 40.84-2.75 56.12 16.04l.44.55c-.78 2.74-1.19 5.63-1.19 8.62 0 1.86.17 3.69.48 5.47-35.66-45.53-106.2-7.64-106.2-7.64s74.92-34.66 106.37 16.98l-16.8 10.04c-30.75-46-97.53-3.49-97.53-3.49s65.03-35.63 93.13 6.12l-15.22 9.11c-6.73-8.28-15.35-13.21-25.68-14.57-28.21-3.73-58.95 22.95-58.95 22.95s32.17-21.31 58.28-17.87c8.74 1.15 16.08 5.27 21.89 12.14L119 244.8c-.1-.04-.18-.115-.28-.14-25.13-6.77-70.29 23.8-70.29 23.8s39.87-21.72 63.92-19.686l-64.59 38.64 66.11-36.393c-10.14 21.89-49.24 45.64-49.24 45.64s49.117-23.68 55.89-48.82c.046-.16.02-.32.037-.49l9.438-5.2c3.07 8.53 2.96 16.97-.443 25.14-10.12 24.29-44.73 41.44-44.73 41.44s38.508-13.18 49.46-39.44c4.025-9.65 4.087-19.61.27-29.63l15.506-8.54C172 276.48 108.6 314.77 108.6 314.77s70.217-36.346 45.942-86.135l17.204-9.47c28.944 53.122-38.8 100.54-38.8 100.54s68.28-42.007 46.75-95.708c3.505 2.97 7.655 5.2 12.232 6.41l.41.44c8.576 22.653 3.057 46.59-14.314 56.584-1.67.96-3.395 1.77-5.163 2.42.43.59.83 1.21 1.2 1.85 6.6 11.46 1.16 26.96-12.14 34.62-11.31 6.51-24.66 5.26-32.46-2.31-2.42 2.66-5.31 5.02-8.62 6.92-16.09 9.26-36.13 4.62-44.76-10.37-2.17-3.77-3.41-7.84-3.79-11.96l-.67-.74c-13.56 4.56-28.78-.73-36.06-13.37-7.27-12.65-4.2-28.47 6.55-37.91z" id="left"></path><path d="M272.28 76.996c1.095-3.425 1.692-7.102 1.692-10.925 0-18.56-14.02-33.62-31.314-33.62-4.356 0-8.503.96-12.27 2.68l-.978-.2c-2.818-14.03-14.99-24.58-29.583-24.58-14.59 0-26.766 10.56-29.582 24.59l-.98.21c-3.765-1.72-7.912-2.68-12.268-2.68-17.293 0-31.313 15.06-31.313 33.62 0 3.83.595 7.5 1.69 10.93-10.448 2.99-18.2 13.94-18.2 26.99 0 15.35 10.723 27.8 23.947 27.8.75 0 1.48-.04 2.2-.11-.32 1.86-.48 3.75-.48 5.68 0 20.05 17.99 36.77 41.9 40.64l.58.24c3.34-3.47 7.47-6.14 12.09-7.79-57.33-8.13-59.7-88.24-59.7-88.24s7.28 82.22 67.78 83.72l.33-19.57c-55.21-3.71-51.68-82.79-51.68-82.79s1.52 74.14 51.77 77.67l.3-17.72c-10.53-1.7-19.1-6.72-25.44-14.99-17.3-22.59-9.52-62.55-9.52-62.55s-2.42 38.51 13.6 59.42c5.36 7 12.59 11.31 21.45 12.92l.18-10.85c-.08-.065-.18-.1-.26-.18-18.41-18.41-14.43-72.795-14.43-72.795s1.07 45.38 14.83 65.22l1.25-75.23 1.44 75.45c13.9-19.72 14.97-65.45 14.97-65.45s3.97 54.38-14.44 72.79c-.11.12-.27.18-.4.27l.21 10.77c8.92-1.58 16.18-5.89 21.57-12.92 16-20.88 13.6-59.43 13.6-59.43s7.78 39.95-9.52 62.55c-6.35 8.3-14.96 13.32-25.54 15.01l.33 17.7c50.28-3.61 51.83-77.66 51.83-77.66s3.53 78.99-51.73 82.79l.37 19.58c60.45-1.446 67.79-83.73 67.79-83.73s-2.37 80.142-59.69 88.233c4.54 1.628 8.61 4.23 11.91 7.61l.41-.05c23.91-3.864 41.9-20.59 41.9-40.63 0-1.924-.17-3.822-.49-5.68.727.08 1.457.118 2.2.118 13.22 0 23.94-12.45 23.94-27.8 0-13.05-7.75-24-18.2-26.99z" id="top"></path><circle cx="200" cy="200" r="25" id="center"></circle><path d="M200 0C89.544 0 0 89.544 0 200c0 110.46 89.545 200 200 200 110.456 0 200-89.542 200-200C400 89.545 310.456 0 200 0zm.004 391.5C94.237 391.5 8.5 305.763 8.5 200 8.5 94.238 94.238 8.503 200.005 8.503c105.76 0 191.497 85.735 191.497 191.5 0 105.76-85.736 191.5-191.496 191.5z" id="ring"></path></svg></div> | |
| <div class="text"> | |
| <h1>404</h1> | |
| <p>Yeah sorry, looks like I don't have what you're looking for here. Maybe try going over to my <a href="https://danferth.com">main site</a>, would be a good way to find your way back on track?</p> | |
| </div> | |
| <div class="line"></div> | |
| </div> | |
| <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script> | |
| <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js'></script> | |
| <script type="text/javascript"> | |
| $(document).ready(function(){ | |
| var fin = function(){ | |
| var finish = new TimelineMax(); | |
| finish.add(TweenMax.to($('.logo'), 10, {rotationY:360, rotation:360, repeat:-1, yoyo:true, ease: Elastic.easeInOut.config(1, 0.3)})); | |
| finish.play(); | |
| }; | |
| var page = new TimelineMax({onComplete:fin}); | |
| page.add(TweenMax.from($('.line'), 1, {autoAlpha:0, y:1000})); | |
| page.add(TweenMax.from($('.logo'), 2, {autoAlpha:0, rotation:360, scale:.5, ease: Back.easeOut.config(1.7)}),0); | |
| page.add(TweenMax.to($('.text h1'), .5, {autoAlpha:1})); | |
| page.add(TweenMax.to($('.text p'), .25, {autoAlpha:1})); | |
| page.play(); | |
| });//END doc.ready | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment