Custom Error 404 Page with nice animation and SVG Icon
marcusandrews24
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
| <div class="holder"> | |
| <div class="audio green-audio-player"> | |
| <div class="loading"> | |
| <div class="spinner"></div> | |
| </div> | |
| <div class="play-pause-btn"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="18" height="24" viewBox="0 0 18 24"> | |
| <path fill="#566574" fill-rule="evenodd" d="M18 12L0 24V0" class="play-pause-icon" id="playPause"/> | |
| </svg> | |
| </div> |
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
| <div class="container"> | |
| <div class="column add-bottom"> | |
| <div id="mainwrap"> | |
| <div id="audiowrap"> | |
| <div id="audio0"> | |
| <audio preload id="audio1" controls="controls">Your browser does not support HTML5 Audio!</audio> | |
| </div> | |
| <div id="tracks"> | |
| <a id="btnPrev">←</a> | |
| <a id="btnNext">→</a> |
marcusandrews24
/ error-404-page-not-found.markdown
Created
March 16, 2019 11:29
ERROR 404 - Page not found
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
| <div class="js"><!--this is supposed to be on the HTML element but codepen won't let me do it--> | |
| <body> | |
| <div id="preloader"></div> | |
| <h1>SUPER SIMPLE FULL PAGE PRELOADER</h1> | |
| <p>Works with modernizr, or you could just add your own js class to the html element using javascript</p> | |
| <p>You can make it fit your site better by generating your own image here: http://ajaxload.info/ then change the background color in the css</p> | |