Today I am going to share an Error 404 page With HTML, CSS, & JavaScript example & source code. When you click on an invalid link on any website, there will show one page that called Error 404 page. Basically, code 404 define an error, that’s why its called error 404. I think you must have seen an error page on any website.
Today we will also create an error 404 page, but this program will be creative & unique. Because this page has some animation effect in the background. This fact makes this program unique. You can use this program on your website or blog, that will be a very cool effect.
I created this page with HTML, CSS & JavaScript. I used a JavaScript library called ‘Practicles‘. This library gives full freedom to create an animation as I used in this program. So, you can say this program is an HTML canvas also. If you don’t have knowledge about JS, you can take source code from here and make some changes according to your wish.
For an idea of how this program looks like, there is a preview for you guys:
Preview Of Error Page
First, see a preview of this error page program by this short video clip.
Now you got an idea about how this program looks like. If you want the source code of this page, given below.
You May Also Like:
Source Code Of Error 404 Page With HTML, CSS, & JS
Before sharing source code as always I want to say a little bit about this program. I had created a <div> and put <h1> & <p> inside the div. In ‘h1‘ tag I wrote Error 404, and paragraph tag wrote Go Back. And Background animation is all based on JS library I had mentioned above. You Have to create 3 files for this program one for HTML file, one for CSS file, & one for JavaScript / JS file.
index.html
Create an HTML file named ‘index.html‘ and put these codes given below. You can use any name as your choise.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <!-- code by webdevtrick ( https://webdevtrick.com ) --> <html> <head> <meta charset="UTF-8"> <title>CREATIVE ERROR 404 PAGE - WEBDEVTRICK.COM</title> <script type="text/javascript" src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="style.css"> </head> <body> <div id="particles-js"> <canvas class="particles-js-canvas-el" style="width: 100%; height: 100%;"> </canvas> </div> <div class="container"> <div class="text"> <h1 style="text-shadow: -2px 0 0 rgba(255,0,0,.7), 2px 0 0 rgba(0,255,255,.7);"> ERROR 404 </h1> <p> <a href="#">go back</a></p> </div> </div> <script src="function.js"></script> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and copy-paste these codes given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
/* code by webdevtrick ( https://webdevtrick.com ) */ .container { width: 100%; height: 100%; height: 100vh; overflow: hidden !important; } h1 { font-family: "Source Sans Pro", sans-serif; font-weight: bold; font-size: 80px; letter-spacing: 15px; text-transform: uppercase; text-align: center; color: rgb(241,241,241); margin: 0px; padding: 0px; } p { font-family: "Source Sans Pro", sans-serif; position: fixed; top: -250px; font-size: 20px; font-weight: 600; letter-spacing: 7.5px; text-transform: uppercase; text-align: center; color: rgb(241,241,241); padding-left: 50px; margin: 0px; } p a { color: rgb(241,241,241); text-decoration: none; margin: 0; padding: 0; } p a:hover { color: #808080; text-decoration: underline; } .text { position: relative; top: 50%; -webkit-transform: translateY(-50%) !important; -ms-transform: translateY(-50%) !important; transform: translateY(-50%) !important; z-index: 3; display: block; } body { margin: 0; } canvas { display: block; vertical-align: bottom; } #particles-js { position: absolute; width: 100%; height: 100%; background-color: rgb(14,14,14); background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; } |
function.js
The final step, Create a JavaScript file named ‘function.js‘ and put these codes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 |
/* code by webdevtrick ( https://webdevtrick.com ) */ particlesJS('particles-js', { 'particles': { 'number': { 'value': 80, 'density': { 'enable': true, 'value_area': 800 } }, 'color': { 'value': '#ffffff' }, 'shape': { 'type': 'circle', 'stroke': { 'width': 0, 'color': '#000000' }, 'polygon': { 'nb_sides': 5 }, 'image': { 'src': 'img/github.svg', 'width': 100, 'height': 100 } }, 'opacity': { 'value': 0.5, 'random': false, 'anim': { 'enable': false, 'speed': 1, 'opacity_min': 0.1, 'sync': false } }, 'size': { 'value': 3, 'random': true, 'anim': { 'enable': false, 'speed': 40, 'size_min': 0.1, 'sync': false } }, 'line_linked': { 'enable': true, 'distance': 150, 'color': '#ffffff', 'opacity': 0.4, 'width': 1 }, 'move': { 'enable': true, 'speed': 6, 'direction': 'none', 'random': false, 'straight': false, 'out_mode': 'out', 'bounce': false, 'attract': { 'enable': false, 'rotateX': 600, 'rotateY': 1200 } } }, 'interactivity': { 'detect_on': 'canvas', 'events': { 'onhover': { 'enable': true, 'mode': 'grab' }, 'onclick': { 'enable': true, 'mode': 'push' }, 'resize': true }, 'modes': { 'grab': { 'distance': 140, 'line_linked': { 'opacity': 1 } }, 'bubble': { 'distance': 400, 'size': 40, 'duration': 2, 'opacity': 8, 'speed': 3 }, 'repulse': { 'distance': 200, 'duration': 0.4 }, 'push': { 'particles_nb': 4 }, 'remove': { 'particles_nb': 2 } } }, 'retina_detect': true }); |
That’s It. Now you have successfully created this awesome program. If you have any doubt and question comment down below.
Thanks For Visiting, Keep Visiting.
Can I make a background like this?
Won’t it slow down the page then?
Will you give me an example? Thanks!
yes, you can use this background using practicle js. sure I will upload another example soon.
can you give me all file
i use smartphone
then i can’t use copy because it so more bug
Sure, I send you zip file in your email address. & In the future, I will upload file also for direct download.