Table of Contents
Summary
This setup guide includes the HTML structure for a custom 404 error page, CSS for styling, and JavaScript for a custom animated cursor. The result is a visually attractive error page with interactive components. Make sure to save the CSS code in a file named styles.css, and the JavaScript code in a file named script.js, and link them perfectly in the HTML document named index.html
Join Our Telegram Channel to Download the Project Source Code: Click Here
Steps to Create: a Custom 404 Error Page
This guide provides step-by-step instructions to set up a custom 404 error page that includes a unique design, animation, and interactive elements. The setup involves HTML for structure, CSS for styling, and JavaScript for interactive behavior.
Final Project File Structure
Ensure the files are saved with the correct names and structure: Project File > HTML File + CSS File + JavaScript File
Create a new folder and name it suitably. Within this folder, create three files: index.html, style.css and script.js
Step 1: HTML Setup
- HTML Document Structure: Ensure the document follows the correct HTML structure with
<html>,<head>, and<body>tags. - Meta Tags and Fonts: Include necessary meta tags for character encoding and viewport settings. Preconnect to Google Fonts for performance and load the ‘Rubik’ font.
- Body Content: The body contains a container for the 404 error page content, including an SVG graphic, text, and links to the home and contact pages.
Copy the below HTML Code, and paste it into your index.html file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap"
rel="stylesheet">
</head>
<!-- Change code below this line -->
<body>
<div class="page-container">
<div class="img"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 800 800" width="800" height="800" preserveAspectRatio="xMidYMid meet"
style="width: 100%; height: 100%; transform: translate3d(0px, 0px, 0px); content-visibility: visible;"
id="Connection Error">
<defs>
<clipPath id="__lottie_element_576">
<rect width="800" height="800" x="0" y="0" />
</clipPath>
</defs>
<g clip-path="url(#__lottie_element_576)">
<g transform="matrix(1,0,0,0.9345905184745789,180.23001098632812,63.33831787109375)" opacity="1"
style="display: block;">
<g opacity="1" transform="matrix(1,0,0,1,161.90899658203125,108.80000305175781)">
<path fill="white" fill-opacity="1"
d=" M121.76000213623047,15.75 C124.45899963378906,-11.050000190734863 125.15899658203125,-90.75 117.15899658203125,-87.94999694824219 C111.26000213623047,-85.94999694824219 78.45999908447266,-45.849998474121094 59.26100158691406,-22.049999237060547 C22.15999984741211,-34.45000076293945 -22.940000534057617,-39.45000076293945 -64.54000091552734,-34.04999923706055 C-80.84100341796875,-60.95000076293945 -113.93900299072266,-108.55000305175781 -118.13899993896484,-102.94999694824219 C-121.93900299072266,-97.8499984741211 -126.53900146484375,-41.25 -128.53900146484375,-13.850000381469727 C-131.8090057373047,-11.829999923706055 -134.74899291992188,-9.739999771118164 -137.3800048828125,-7.590000152587891 C-161.65899658203125,12.1899995803833 -159.0590057373047,36.58000183105469 -137.3800048828125,57.41999816894531 C-134.19900512695312,60.4900016784668 -130.5989990234375,63.470001220703125 -126.61900329589844,66.3499984741211 C-105.2490005493164,81.83000183105469 -72.7490005493164,94.36000061035156 -32.93899917602539,99.94999694824219 C-32.93899917602539,99.94999694824219 -14.48900032043457,101.88999938964844 -9.939000129699707,102.1500015258789 C90.06099700927734,108.55000305175781 161.65899658203125,64.44999694824219 121.76000213623047,15.75z" />
</g>
</g>
<g transform="matrix(1,0,0,0.9778475761413574,214.34901428222656,150.83106994628906)"
opacity="0.029979999999923308" style="display: none;">
<g opacity="1" transform="matrix(1,0,0,1,47.79999923706055,33.79999923706055)">
<path fill="rgb(230,255,22)" fill-opacity="1"
d=" M-10.75,26.75 C-31.549999237060547,28.149999618530273 -47.54999923706055,13.350000381469727 -46.45000076293945,0.8500000238418579 C-45.349998474121094,-11.649999618530273 -45.75,-33.54999923706055 -29.850000381469727,-19.950000762939453 C32.849998474121094,33.54999923706055 47.54999923706055,22.75 -10.75,26.75z" />
</g>
<g opacity="1" transform="matrix(1,0,0,1,175.60000610351562,44.25)">
<path fill="rgb(230,255,22)" fill-opacity="1"
d=" M45.849998474121094,4.699999809265137 C45.04999923706055,17.200000762939453 27.149999618530273,29.5 6.75,25.100000381469727 C-50.25,12.5 -37.25,25.299999237060547 32.54999923706055,-18.399999618530273 C50.25,-29.5 46.650001525878906,-7.900000095367432 45.849998474121094,4.699999809265137z" />
</g>
</g>
<g transform="matrix(1,0,0,0.9345905184745789,240.14901733398438,186.33042907714844)" opacity="1"
style="display: block;">
<g opacity="1" transform="matrix(1,0,0,1,9.399999618530273,7.449999809265137)">
<path fill="black" fill-opacity="1"
d=" M0.550000011920929,-6.300000190734863 C-7.75,-7.199999809265137 -9.149999618530273,5.800000190734863 -0.44999998807907104,6.5 C7.849999904632568,7.199999809265137 9.149999618530273,-5.599999904632568 0.550000011920929,-6.300000190734863z" />
</g>
<g opacity="1" transform="matrix(1,0,0,1,159.4499969482422,16.049999237060547)">
<path fill="black" fill-opacity="1"
d=" M-0.5,6.5 C7.800000190734863,7.199999809265137 9.199999809265137,-5.599999904632568 0.5,-6.300000190734863 C-7.800000190734863,-7.199999809265137 -9.199999809265137,5.800000190734863 -0.5,6.5z" />
</g>
</g>
<g transform="matrix(1,0,0,1,178.74998474121094,221.04998779296875)" opacity="1"
style="display: block;">
<g opacity="1" transform="matrix(1,0,0,1,156.25,298.54998779296875)">
<path fill="white" fill-opacity="1"
d=" M-3.799999952316284,-99.19999694824219 C-11.199999809265137,-111.5999984741211 -7.300000190734863,-215.49899291992188 -2.799999952316284,-273.0989990234375 C-7.3460001945495605,-273.35699462890625 -25.799999237060547,-275.29998779296875 -25.799999237060547,-275.29998779296875 C-26.200000762939453,-262.5989990234375 -30.600000381469727,-128.80099487304688 -37.79999923706055,-102.0999984741211 C-45.400001525878906,-74.0009994506836 -166.4199981689453,-64.11699676513672 -154.5,136.99899291992188 C-146.3090057373047,275.0320129394531 92.69999694824219,251.69900512695312 126.9000015258789,193.8000030517578 C139,173.39999389648438 136.89999389648438,156.4010009765625 142.0989990234375,138.6999969482422 C143.05099487304688,132.25599670410156 144,107.9990005493164 144,107.9990005493164 C156,-33.000999450683594 2.9000000953674316,-87.9000015258789 -3.799999952316284,-99.19999694824219z" />
</g>
</g>
<g transform="matrix(0.9563047289848328,0.2923716902732849,-0.2923716902732849,0.9563047289848328,272.96771240234375,164.72457885742188)"
opacity="1" style="display: block;">
<g opacity="1"
transform="matrix(0.9999426007270813,0.01071539893746376,-0.01071539893746376,0.9999426007270813,372.45977783203125,220.54025268554688)">
<path fill="white" fill-opacity="1"
d=" M-31.64900016784668,-209.1999969482422 C-93.19300079345703,-198.5240020751953 -105.66999816894531,-125.08200073242188 -102.47100067138672,-95.68199920654297 C-88.06999969482422,35.31800079345703 22.222000122070312,94.66200256347656 -2.4630000591278076,177.9510040283203 C-9.307000160217285,201.04100036621094 -80.25,192.6999969482422 -97.04900360107422,186.89999389648438 C-97.04900360107422,186.89999389648438 -98,211.15499877929688 -98.95099639892578,217.60000610351562 C-91.95099639892578,219.39999389648438 -34.895999908447266,223.0780029296875 -19.652999877929688,217.90499877929688 C44.87699890136719,196.00599670410156 31.222999572753906,122.64199829101562 -2.2769999504089355,75.34200286865234 C-32.87799835205078,32.141998291015625 -49.10200119018555,13.633999824523926 -70.37300109863281,-44.154998779296875 C-91.64399719238281,-101.94400024414062 -88.33300018310547,-142.8470001220703 -59.698001861572266,-169.947998046875 C-37.15599822998047,-191.281005859375 -13.055000305175781,-194.94000244140625 24.54400062561035,-168.13999938964844 C62.14500045776367,-141.24000549316406 66.01100158691406,-91.72699737548828 35.35599899291992,-60.145999908447266 C-15.668999671936035,-7.578999996185303 -17.899999618530273,-144.86700439453125 -59.04899978637695,-141.8000030517578 C-100.54900360107422,-98.69999694824219 0.5509999990463257,26.843000411987305 64.74400329589844,-59.92399978637695 C113.89099884033203,-136.1999969482422 37.57899856567383,-221.20899963378906 -31.64900016784668,-209.1999969482422z" />
</g>
</g>
<g transform="matrix(1,0,0,0.9345905184745789,222.2490234375,80.06748962402344)" opacity="1"
style="display: block;">
<g opacity="1" transform="matrix(1,0,0,1,23.850000381469727,32.349998474121094)">
<path fill="rgb(255,255,255)" fill-opacity="1"
d=" M-23.600000381469727,32.099998474121094 C-23.600000381469727,32.099998474121094 -20,-24.200000762939453 -17,-28.100000381469727 C-14.100000381469727,-32.099998474121094 13.600000381469727,9.600000381469727 18.600000381469727,19.899999618530273 C23.600000381469727,30.100000381469727 -23.600000381469727,32.099998474121094 -23.600000381469727,32.099998474121094z" />
</g>
<g opacity="1" transform="matrix(1,0,0,1,214.64999389648438,57.79999923706055)">
<path fill="rgb(255,255,255)" fill-opacity="1"
d=" M19.000999450683594,24.25 C17.301000595092773,35.150001525878906 -21.399999618530273,10.850000381469727 -21.399999618530273,10.850000381469727 C-21.399999618530273,10.850000381469727 12.399999618530273,-32.04999923706055 16.899999618530273,-33.54999923706055 C21.399999618530273,-35.150001525878906 20.700000762939453,13.350000381469727 19.000999450683594,24.25z" />
</g>
</g>
<g transform="matrix(0.9881900548934937,-0.1532330960035324,0.1532330960035324,0.9881900548934937,424.0444641113281,345.4909973144531)"
opacity="1" style="display: block;">
<g opacity="1" transform="matrix(1,0,0,1,-134,227.5)">
<path fill="rgb(9,166,149)" fill-opacity="1"
d=" M105,-77 C105,-77 105,76 105,76 C105,76 -168,76.5 -168,76.5 C-168,76.5 -168,-76.5 -168,-76.5 C-168,-76.5 105,-77 105,-77z" />
<path stroke-linecap="butt" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4"
stroke="rgb(230,255,23)" stroke-opacity="1" stroke-width="6"
d=" M105,-77 C105,-77 105,76 105,76 C105,76 -168,76.5 -168,76.5 C-168,76.5 -168,-76.5 -168,-76.5 C-168,-76.5 105,-77 105,-77z" />
</g>
</g>
<g transform="matrix(2.164386510848999,-0.3352711498737335,0.3352711498737335,2.164386510848999,-698.9091796875,-180.4491424560547)"
opacity="1" style="display: block;">
<g opacity="1" transform="matrix(1,0,0,1,0,0)">
<g opacity="1" transform="matrix(1,0,0,1,354.16400146484375,409.8919982910156)">
<path fill="rgb(230,255,23)" fill-opacity="1"
d=" M-6.872000217437744,18.038999557495117 C-6.872000217437744,18.038999557495117 -6.872000217437744,-18.038999557495117 -6.872000217437744,-18.038999557495117 C-6.872000217437744,-18.038999557495117 6.572000026702881,-18.038999557495117 6.572000026702881,-18.038999557495117 C6.572000026702881,-18.038999557495117 6.572000026702881,-14.317999839782715 6.572000026702881,-14.317999839782715 C6.572000026702881,-14.317999839782715 -2.940999984741211,-14.317999839782715 -2.940999984741211,-14.317999839782715 C-2.940999984741211,-14.317999839782715 -2.940999984741211,-9.847000122070312 -2.940999984741211,-9.847000122070312 C-2.940999984741211,-9.847000122070312 4.440999984741211,-9.847000122070312 4.440999984741211,-9.847000122070312 C4.440999984741211,-9.847000122070312 4.440999984741211,-6.125999927520752 4.440999984741211,-6.125999927520752 C4.440999984741211,-6.125999927520752 -2.940999984741211,-6.125999927520752 -2.940999984741211,-6.125999927520752 C-2.940999984741211,-6.125999927520752 -2.940999984741211,-0.7540000081062317 -2.940999984741211,-0.7540000081062317 C-2.940999984741211,-0.7540000081062317 6.872000217437744,-0.7540000081062317 6.872000217437744,-0.7540000081062317 C6.872000217437744,-0.7540000081062317 6.872000217437744,2.9660000801086426 6.872000217437744,2.9660000801086426 C6.872000217437744,2.9660000801086426 -6.872000217437744,18.038999557495117 -6.872000217437744,18.038999557495117z" />
</g>
<g opacity="1" transform="matrix(1,0,0,1,372.37701416015625,403.5950012207031)">
<path fill="rgb(230,255,23)" fill-opacity="1"
d=" M-8.041999816894531,11.741000175476074 C-8.041999816894531,11.741000175476074 -8.041999816894531,-11.741000175476074 -8.041999816894531,-11.741000175476074 C-8.041999816894531,-11.741000175476074 -0.36000001430511475,-11.741000175476074 -0.36000001430511475,-11.741000175476074 C1.090000033378601,-11.741000175476074 2.3580000400543213,-11.51099967956543 3.443000078201294,-11.050999641418457 C4.5289998054504395,-10.590999603271484 5.372000217437744,-9.890000343322754 5.9720001220703125,-8.949999809265137 C6.572000026702881,-8.010000228881836 6.872000217437744,-6.820000171661377 6.872000217437744,-5.380000114440918 C6.872000217437744,-3.8399999141693115 6.544000148773193,-2.617000102996826 5.888999938964844,-1.7120000123977661 C5.232999801635742,-0.8059999942779541 4.370999813079834,-0.08900000154972076 3.3010001182556152,0.4410000145435333 C3.3010001182556152,0.4410000145435333 8.041999816894531,9.262999534606934 8.041999816894531,9.262999534606934 C8.041999816894531,9.262999534606934 3.750999927520752,9.262999534606934 3.750999927520752,9.262999534606934 C3.750999927520752,9.262999534606934 -0.30000001192092896,1.4609999656677246 -0.30000001192092896,1.4609999656677246 C-0.33000001311302185,1.4609999656677246 -0.35499998927116394,1.4609999656677246 -0.375,1.4609999656677246 C-0.39500001072883606,1.4609999656677246 -0.41999998688697815,1.4609999656677246 -0.44999998807907104,1.4609999656677246 C-0.44999998807907104,1.4609999656677246 -4.201000213623047,1.4609999656677246 -4.201000213623047,1.4609999656677246 C-4.201000213623047,1.4609999656677246 -4.201000213623047,11.741000175476074 -4.201000213623047,11.741000175476074 C-4.201000213623047,11.741000175476074 -8.041999816894531,11.741000175476074 -8.041999816894531,11.741000175476074z M-4.201000213623047,-1.7489999532699585 C-4.201000213623047,-1.7489999532699585 -1.3799999952316284,-1.7489999532699585 -1.3799999952316284,-1.7489999532699585 C0.20000000298023224,-1.7489999532699585 1.2999999523162842,-2.072000026702881 1.9199999570846558,-2.7170000076293945 C2.5399999618530273,-3.361999988555908 2.8510000705718994,-4.179999828338623 2.8510000705718994,-5.170000076293945 C2.8510000705718994,-6.21999979019165 2.5460000038146973,-7.043000221252441 1.9359999895095825,-7.638000011444092 C1.3259999752044678,-8.232999801635742 0.27000001072883606,-8.531000137329102 -1.2300000190734863,-8.531000137329102 C-1.2300000190734863,-8.531000137329102 -4.201000213623047,-8.531000137329102 -4.201000213623047,-8.531000137329102 C-4.201000213623047,-8.531000137329102 -4.201000213623047,-1.7489999532699585 -4.201000213623047,-1.7489999532699585z" />
</g>
<g opacity="1" transform="matrix(1,0,0,1,391.1610107421875,405.7040100097656)">
<path fill="rgb(230,255,23)" fill-opacity="1"
d=" M-8.041999816894531,13.850000381469727 C-8.041999816894531,13.850000381469727 -8.041999816894531,-13.850000381469727 -8.041999816894531,-13.850000381469727 C-8.041999816894531,-13.850000381469727 -0.36000001430511475,-13.850000381469727 -0.36000001430511475,-13.850000381469727 C1.090000033378601,-13.850000381469727 2.3580000400543213,-13.619999885559082 3.443000078201294,-13.15999984741211 C4.5289998054504395,-12.699999809265137 5.372000217437744,-11.99899959564209 5.9720001220703125,-11.059000015258789 C6.572000026702881,-10.119000434875488 6.872000217437744,-8.928999900817871 6.872000217437744,-7.488999843597412 C6.872000217437744,-5.948999881744385 6.544000148773193,-4.72599983215332 5.888999938964844,-3.821000099182129 C5.232999801635742,-2.9149999618530273 4.370999813079834,-2.197000026702881 3.3010001182556152,-1.6670000553131104 C3.3010001182556152,-1.6670000553131104 8.041999816894531,7.1539998054504395 8.041999816894531,7.1539998054504395 C8.041999816894531,7.1539998054504395 3.750999927520752,7.1539998054504395 3.750999927520752,7.1539998054504395 C3.750999927520752,7.1539998054504395 -0.30000001192092896,-0.6480000019073486 -0.30000001192092896,-0.6480000019073486 C-0.33000001311302185,-0.6480000019073486 -0.35499998927116394,-0.6480000019073486 -0.375,-0.6480000019073486 C-0.39500001072883606,-0.6480000019073486 -0.41999998688697815,-0.6480000019073486 -0.44999998807907104,-0.6480000019073486 C-0.44999998807907104,-0.6480000019073486 -4.201000213623047,-0.6480000019073486 -4.201000213623047,-0.6480000019073486 C-4.201000213623047,-0.6480000019073486 -4.201000213623047,10.99899959564209 -4.201000213623047,10.99899959564209 C-5.538000106811523,11.555000305175781 -6.828000068664551,12.442999839782715 -8.041999816894531,13.850000381469727z M-4.201000213623047,-3.8580000400543213 C-4.201000213623047,-3.8580000400543213 -1.3799999952316284,-3.8580000400543213 -1.3799999952316284,-3.8580000400543213 C0.20000000298023224,-3.8580000400543213 1.2999999523162842,-4.181000232696533 1.9199999570846558,-4.826000213623047 C2.5399999618530273,-5.4710001945495605 2.8510000705718994,-6.289000034332275 2.8510000705718994,-7.2789998054504395 C2.8510000705718994,-8.329000473022461 2.5460000038146973,-9.152000427246094 1.9359999895095825,-9.746999740600586 C1.3259999752044678,-10.342000007629395 0.27000001072883606,-10.638999938964844 -1.2300000190734863,-10.638999938964844 C-1.2300000190734863,-10.638999938964844 -4.201000213623047,-10.638999938964844 -4.201000213623047,-10.638999938964844 C-4.201000213623047,-10.638999938964844 -4.201000213623047,-3.8580000400543213 -4.201000213623047,-3.8580000400543213z" />
</g>
<g opacity="1" transform="matrix(1,0,0,1,410.9949951171875,402.3559875488281)">
<path fill="rgb(230,255,23)" fill-opacity="1"
d=" M0.0010000000474974513,10.92199993133545 C-2,10.92199993133545 -3.7809998989105225,10.470000267028809 -5.341000080108643,9.564000129699707 C-6.901000022888184,8.659000396728516 -8.126999855041504,7.388999938964844 -9.017000198364258,5.754000186920166 C-9.906999588012695,4.11899995803833 -10.35200023651123,2.2009999752044678 -10.35200023651123,0 C-10.35200023651123,-2.200000047683716 -9.906999588012695,-4.11899995803833 -9.017000198364258,-5.754000186920166 C-8.126999855041504,-7.389999866485596 -6.901000022888184,-8.657999992370605 -5.341000080108643,-9.564000129699707 C-3.7809998989105225,-10.468999862670898 -2,-10.92199993133545 0.0010000000474974513,-10.92199993133545 C2.000999927520752,-10.92199993133545 3.7809998989105225,-10.468999862670898 5.3420000076293945,-9.564000129699707 C6.9019999504089355,-8.657999992370605 8.128000259399414,-7.389999866485596 9.017000198364258,-5.754000186920166 C9.906999588012695,-4.11899995803833 10.35200023651123,-2.200000047683716 10.35200023651123,0 C10.35200023651123,2.2009999752044678 9.906999588012695,4.11899995803833 9.017000198364258,5.754000186920166 C8.128000259399414,7.388999938964844 6.9019999504089355,8.659000396728516 5.3420000076293945,9.564000129699707 C3.7809998989105225,10.470000267028809 2.000999927520752,10.92199993133545 0.0010000000474974513,10.92199993133545z M0.0010000000474974513,7.202000141143799 C1.4010000228881836,7.202000141143799 2.569999933242798,6.890999794006348 3.509999990463257,6.270999908447266 C4.451000213623047,5.6519999504089355 5.156000137329102,4.798999786376953 5.625999927520752,3.7130000591278076 C6.0960001945495605,2.628000020980835 6.330999851226807,1.3910000324249268 6.330999851226807,0 C6.330999851226807,-1.3899999856948853 6.0960001945495605,-2.627000093460083 5.625999927520752,-3.7130000591278076 C5.156000137329102,-4.797999858856201 4.451000213623047,-5.651000022888184 3.509999990463257,-6.270999908447266 C2.569999933242798,-6.890999794006348 1.4010000228881836,-7.201000213623047 0.0010000000474974513,-7.201000213623047 C-1.399999976158142,-7.201000213623047 -2.569999933242798,-6.890999794006348 -3.509999990463257,-6.270999908447266 C-4.451000213623047,-5.651000022888184 -5.1570000648498535,-4.797999858856201 -5.625999927520752,-3.7130000591278076 C-6.0960001945495605,-2.627000093460083 -6.330999851226807,-1.3899999856948853 -6.330999851226807,0 C-6.330999851226807,1.3910000324249268 -6.0960001945495605,2.628000020980835 -5.625999927520752,3.7130000591278076 C-5.1570000648498535,4.798999786376953 -4.451000213623047,5.6519999504089355 -3.509999990463257,6.270999908447266 C-2.569999933242798,6.890999794006348 -1.399999976158142,7.202000141143799 0.0010000000474974513,7.202000141143799z" />
</g>
<g opacity="1" transform="matrix(1,0,0,1,432.75,405.8529968261719)">
<path fill="rgb(230,255,23)" fill-opacity="1"
d=" M-8.041999816894531,13.99899959564209 C-8.041999816894531,13.99899959564209 -8.041999816894531,-13.99899959564209 -8.041999816894531,-13.99899959564209 C-8.041999816894531,-13.99899959564209 -0.36000001430511475,-13.99899959564209 -0.36000001430511475,-13.99899959564209 C1.090000033378601,-13.99899959564209 2.3570001125335693,-13.767999649047852 3.443000078201294,-13.307999610900879 C4.5279998779296875,-12.847999572753906 5.370999813079834,-12.14799976348877 5.9710001945495605,-11.208000183105469 C6.571000099182129,-10.267999649047852 6.870999813079834,-9.07699966430664 6.870999813079834,-7.63700008392334 C6.870999813079834,-6.0970001220703125 6.544000148773193,-4.874000072479248 5.888999938964844,-3.9690001010894775 C5.232999801635742,-3.062999963760376 4.369999885559082,-2.3459999561309814 3.299999952316284,-1.815999984741211 C3.299999952316284,-1.815999984741211 8.041999816894531,7.00600004196167 8.041999816894531,7.00600004196167 C8.041999816894531,7.00600004196167 3.750999927520752,7.00600004196167 3.750999927520752,7.00600004196167 C3.750999927520752,7.00600004196167 -0.3009999990463257,-0.7960000038146973 -0.3009999990463257,-0.7960000038146973 C-0.3310000002384186,-0.7960000038146973 -0.35499998927116394,-0.7960000038146973 -0.375,-0.7960000038146973 C-0.39500001072883606,-0.7960000038146973 -0.42100000381469727,-0.7960000038146973 -0.44999998807907104,-0.7960000038146973 C-0.44999998807907104,-0.7960000038146973 -4.201000213623047,-0.7960000038146973 -4.201000213623047,-0.7960000038146973 C-4.201000213623047,-0.7960000038146973 -4.201000213623047,9.930000305175781 -4.201000213623047,9.930000305175781 C-4.201000213623047,9.930000305175781 -8.041999816894531,13.99899959564209 -8.041999816894531,13.99899959564209z M-4.201000213623047,-4.00600004196167 C-4.201000213623047,-4.00600004196167 -1.38100004196167,-4.00600004196167 -1.38100004196167,-4.00600004196167 C0.19900000095367432,-4.00600004196167 1.2999999523162842,-4.328999996185303 1.9199999570846558,-4.973999977111816 C2.5390000343322754,-5.61899995803833 2.8499999046325684,-6.436999797821045 2.8499999046325684,-7.427000045776367 C2.8499999046325684,-8.47700023651123 2.5450000762939453,-9.300000190734863 1.934999942779541,-9.895000457763672 C1.3250000476837158,-10.489999771118164 0.27000001072883606,-10.788000106811523 -1.2300000190734863,-10.788000106811523 C-1.2300000190734863,-10.788000106811523 -4.201000213623047,-10.788000106811523 -4.201000213623047,-10.788000106811523 C-4.201000213623047,-10.788000106811523 -4.201000213623047,-4.00600004196167 -4.201000213623047,-4.00600004196167z" />
</g>
</g>
<g opacity="1" transform="matrix(1,0,0,1,0,0)">
<g opacity="1" transform="matrix(1,0,0,1,361.6809997558594,432.156005859375)">
<path fill="rgb(230,255,23)" fill-opacity="1"
d=" M10.968999862670898,-15.963000297546387 C10.968999862670898,-15.963000297546387 10.968999862670898,3.3289999961853027 10.968999862670898,3.3289999961853027 C10.968999862670898,3.3289999961853027 14.388999938964844,3.3289999961853027 14.388999938964844,3.3289999961853027 C14.388999938964844,3.3289999961853027 14.388999938964844,10.444000244140625 14.388999938964844,10.444000244140625 C14.388999938964844,10.444000244140625 10.968999862670898,10.444000244140625 10.968999862670898,10.444000244140625 C10.968999862670898,10.444000244140625 10.968999862670898,15.963000297546387 10.968999862670898,15.963000297546387 C10.968999862670898,15.963000297546387 2.4860000610351562,15.963000297546387 2.4860000610351562,15.963000297546387 C2.4860000610351562,15.963000297546387 2.4860000610351562,10.444000244140625 2.4860000610351562,10.444000244140625 C2.4860000610351562,10.444000244140625 -13.79699993133545,10.444000244140625 -13.79699993133545,10.444000244140625 C-13.79699993133545,10.444000244140625 -14.388999938964844,2.9649999141693115 -14.388999938964844,2.9649999141693115 C-14.388999938964844,2.9649999141693115 2.621999979019165,-15.963000297546387 2.621999979019165,-15.963000297546387 C2.621999979019165,-15.963000297546387 10.968999862670898,-15.963000297546387 10.968999862670898,-15.963000297546387z M2.4860000610351562,3.3289999961853027 C2.4860000610351562,3.3289999961853027 2.4860000610351562,-5.017000198364258 2.4860000610351562,-5.017000198364258 C2.4860000610351562,-5.017000198364258 -5.085000038146973,3.3289999961853027 -5.085000038146973,3.3289999961853027 C-5.085000038146973,3.3289999961853027 2.4860000610351562,3.3289999961853027 2.4860000610351562,3.3289999961853027z" />
</g>
<g opacity="1" transform="matrix(1,0,0,1,394.5429992675781,432.3840026855469)">
<path fill="rgb(230,255,23)" fill-opacity="1"
d=" M-14.458000183105469,-2.187999963760376 C-14.458000183105469,-12.586999893188477 -7.752999782562256,-16.601999282836914 0.09200000017881393,-16.601999282836914 C8.072999954223633,-16.601999282836914 14.458000183105469,-12.222000122070312 14.458000183105469,-2.187999963760376 C14.458000183105469,-2.187999963760376 14.458000183105469,2.1440000534057617 14.458000183105469,2.1440000534057617 C14.458000183105469,12.361000061035156 7.843999862670898,16.601999282836914 0.18199999630451202,16.601999282836914 C-7.388999938964844,16.601999282836914 -14.458000183105469,12.633000373840332 -14.458000183105469,2.188999891281128 C-14.458000183105469,2.188999891281128 -14.458000183105469,-2.187999963760376 -14.458000183105469,-2.187999963760376z M-5.610000133514404,2.188999891281128 C-5.610000133514404,7.068999767303467 -3.193000078201294,9.213000297546387 0,9.213000297546387 C3.191999912261963,9.213000297546387 5.656000137329102,7.068999767303467 5.656000137329102,2.188999891281128 C5.656000137329102,2.188999891281128 5.656000137329102,-2.1440000534057617 5.656000137329102,-2.1440000534057617 C5.656000137329102,-6.841000080108643 3.2839999198913574,-8.984000205993652 0.09200000017881393,-8.984000205993652 C-3.055000066757202,-8.984000205993652 -5.610000133514404,-6.978000164031982 -5.610000133514404,-2.1440000534057617 C-5.610000133514404,-2.1440000534057617 -5.610000133514404,2.188999891281128 -5.610000133514404,2.188999891281128z" />
</g>
<g opacity="1" transform="matrix(1,0,0,1,426.4020080566406,432.156005859375)">
<path fill="rgb(230,255,23)" fill-opacity="1"
d=" M10.968999862670898,-15.963000297546387 C10.968999862670898,-15.963000297546387 10.968999862670898,3.3289999961853027 10.968999862670898,3.3289999961853027 C10.968999862670898,3.3289999961853027 14.390000343322754,3.3289999961853027 14.390000343322754,3.3289999961853027 C14.390000343322754,3.3289999961853027 14.390000343322754,10.444000244140625 14.390000343322754,10.444000244140625 C14.390000343322754,10.444000244140625 10.968999862670898,10.444000244140625 10.968999862670898,10.444000244140625 C10.968999862670898,10.444000244140625 10.968999862670898,15.963000297546387 10.968999862670898,15.963000297546387 C10.968999862670898,15.963000297546387 2.4860000610351562,15.963000297546387 2.4860000610351562,15.963000297546387 C2.4860000610351562,15.963000297546387 2.4860000610351562,10.444000244140625 2.4860000610351562,10.444000244140625 C2.4860000610351562,10.444000244140625 -13.79699993133545,10.444000244140625 -13.79699993133545,10.444000244140625 C-13.79699993133545,10.444000244140625 -14.390000343322754,2.9649999141693115 -14.390000343322754,2.9649999141693115 C-14.390000343322754,2.9649999141693115 2.622999906539917,-15.963000297546387 2.622999906539917,-15.963000297546387 C2.622999906539917,-15.963000297546387 10.968999862670898,-15.963000297546387 10.968999862670898,-15.963000297546387z M2.4860000610351562,3.3289999961853027 C2.4860000610351562,3.3289999961853027 2.4860000610351562,-5.017000198364258 2.4860000610351562,-5.017000198364258 C2.4860000610351562,-5.017000198364258 -5.085000038146973,3.3289999961853027 -5.085000038146973,3.3289999961853027 C-5.085000038146973,3.3289999961853027 2.4860000610351562,3.3289999961853027 2.4860000610351562,3.3289999961853027z" />
</g>
</g>
</g>
<g transform="matrix(0.9283928871154785,-0.3716001510620117,0.3716001510620117,0.9283928871154785,396.4154052734375,318.5462646484375)"
opacity="1" style="display: block;">
<g opacity="1" transform="matrix(1,0,0,1,0,0)">
<path fill="white" fill-opacity="1"
d=" M-133,62.25 C-133,62.25 -176.4709930419922,66.4729995727539 -202.41700744628906,82.63300323486328 C-223.25599670410156,95.61199951171875 -237.5,106.5 -251.093994140625,129.0469970703125 C-251.96400451660156,130.49099731445312 -261.2550048828125,144.63800048828125 -262.9739990234375,146.15499877929688 C-265.4219970703125,148.3159942626953 -276.375,146.5 -278.0570068359375,150.3679962158203 C-281.29901123046875,157.8260040283203 -274.97100830078125,155.61599731445312 -272.8190002441406,159.4290008544922 C-270.875,162.875 -275.5,166.375 -272.875,169.25 C-269.4110107421875,173.04400634765625 -263.4110107421875,164.99899291992188 -260.0199890136719,164.93699645996094 C-256.625,164.875 -256.875,173.25 -248.3159942626953,168.15499877929688 C-247.36900329589844,167.59100341796875 -246.7530059814453,154.75 -244.86099243164062,152.34500122070312 C-235.25,140.125 -216.6219940185547,129.09500122070312 -192.5,124.5 C-150.5,116.5 -137.5,94.5 -137.5,94.5 C-137.5,94.5 -133,62.25 -133,62.25z" />
</g>
</g>
</g>
</svg></div>
<div class="texts">
<h1>404</h1>
<p>The link you clicked may be broken or the page may have been removed.</p>
<span>Visit the <a href="">home page</a> or <a href="">contact</a> me</span>
</div>
<div class="cursor" id="cursor"></div>
</div>
</body>
<!-- Change code above this line -->
</html>Step 2: CSS Setup
- Global Styles: Reset margin, padding, and box-sizing for all elements. Style the body to cover the full viewport and center content, set the background color, remove the default cursor, and use the ‘Rubik’ font.
- Page Container: Center the page content horizontally and set the text color to white.
- Image Section: Add an animation to the image to create a wiggle effect.
- Text Section: Style the text container, heading, paragraph, and span elements.
- Links: Remove text decoration and set the link color.
- Custom Cursor: Style the cursor element, position it absolutely and make it interactive.
- Keyframes: Define the wiggle animation for the image.
Copy the below CSS Code, and paste it into your style.css file.
/* Write your CSS code here */
*,
*::after,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
cursor: none;
font-family: "Rubik", sans-serif;
overflow: hidden;
position: relative;
}
.page-container {
display: flex;
align-items: center;
margin: 0 80px;
color: white;
}
.img {
animation-name: wiggle;
animation-duration:1000ms;
animation-fill-mode: both;
animation-timing-function:linear;
animation-iteration-count: 8;
transform:rotate(30deg);
width: 300px;
}
.texts {
display: flex;
justify-content: center;
flex-direction: column;
gap: 10px
}
.texts>h1 {
font-size: 100px;
}
.texts>p {
font-size: 20px;
}
.texts>span {
margin-top: 10px;
font-size: 15px;
}
a {
text-decoration: none;
color: #e6ff17
}
.cursor {
position: absolute;
pointer-events: none;
width: 50px;
height: 50px;
background-color: white;
border-radius: 50%;
mix-blend-mode: difference;
box-shadow: 0 0 50px white;
transform: translate(-50%,-50%);
transition: transform 500ms ease;
}
.page-container:has(.texts:hover)>.cursor {
transform: scale(1.5)
}
@keyframes wiggle{
50%{
transform: rotate(-30deg);
}
}
Step 3: JavaScript for Custom Cursor
- Custom Cursor Movement: Add an event listener for mouse movement. Update the cursor position based on mouse coordinates.
Copy the below HTML Code, and paste it into your script.js file.
// Write your JavaScript code here
const cursor = document.getElementById("cursor");
document.addEventListener('mousemove', (e) => {
cursor.style.left = e.pageX + 'px'
cursor.style.top = e.pageY + 'px'
})
Conclusion
This project shows how to create a visually engaging and interactive 404 error page using HTML, CSS, and JavaScript. The HTML provides the structure, including an SVG graphic and informative text. The CSS styles the page with a modern aesthetic, including animations and custom cursor effects. JavaScript enhances the user experience by dynamically modernizing the cursor position based on mouse movement. This combination results in a polished, responsive, and user-friendly error page that effectively expresses a broken or non-existent link to the user.
Join Our Telegram Channel to Download the Project Source Code: Click Here
For your convenience, the total source code of this “login and signup form” project instructional practice is accessible for download by clicking the Download Code button.
Note: Keep in mind that the way to dominate coding is practice. To enhance your skills in JavaScript, HTML & CSS, we recommend recreating other useful website elements such as Custom Button, Reviews Card, Contact Page, Navigation, Login Forms, etc.
More Categories:
Blog • Cards • Fun Project • Game • Hamburger Menu • Login / Signup • Navbar • Testimony / Reviews • To-Do List
