{"id":9155,"date":"2024-01-19T17:59:00","date_gmt":"2024-01-19T17:59:00","guid":{"rendered":"https:\/\/codehim.com\/?p=9155"},"modified":"2024-01-22T15:59:37","modified_gmt":"2024-01-22T10:59:37","slug":"simple-404-page-html-template","status":"publish","type":"post","link":"https:\/\/codehim.com\/html5-css3\/simple-404-page-html-template\/","title":{"rendered":"Simple 404 Page HTML Template"},"content":{"rendered":"

This HTML & CSS template helps you to create a 404 error page with a torn paper effect. It uses HTML and CSS to display a paper graphic with a 404 message and a “Go Back Home” link. This template adds a visually appealing and user-friendly 404 error page to your website.<\/p>\n

You can use this code for your website to create a custom and visually engaging 404 error page. It enhances user experience by offering a more appealing and informative way to handle broken links or missing pages.<\/p>\n

How to Create a Simple 404 Page Using HTML and CSS<\/h2>\n

1. First of all, load the Google Fonts<\/a> by adding the following CDN link into the head tag of your HTML document.<\/p>\n

<link rel='stylesheet' href='https:\/\/fonts.googleapis.com\/css2?family=Nunito:wght@400;700&amp;display=swap'><\/pre>\n
2. Paste the HTML code inside the <body><\/code> of your HTML file where you want the 404 error page to appear. Modify the content to match your website’s branding, such as changing the “Go Back Home” link or the error message.<\/p>\n
<main>\r\n\t<div>\r\n\t\t<svg class=\"paper\" viewBox=\"0 0 300 300\" width=\"300px\" height=\"300px\" role=\"img\" aria-label=\"A piece of paper torn in half\">\r\n\t\t\t<g class=\"paper__outline\" fill=\"none\" stroke=\"hsl(0,10%,10%)\" stroke-width=\"8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" transform=\"translate(61,4)\">\r\n\t\t\t\t<g class=\"paper__top\" transform=\"translate(0,25)\">\r\n\t\t\t\t\t<polygon class=\"paper__shadow\" fill=\"hsl(0,10%,70%)\" stroke=\"none\" points=\"0 148,0 0,137 0,187 50,187 148,155 138,124 148,93 138,62 148,31 138\" transform=\"translate(-12,12)\" \/>\r\n\t\t\t\t\t<rect class=\"paper__tear-fill\" fill=\"hsl(0,0%,100%)\" stroke=\"none\" x=\"0\" y=\"137\" width=\"0\" height=\"23px\" \/>\r\n\t\t\t\t\t<polygon class=\"paper__fill\" fill=\"hsl(0,0%,100%)\" stroke=\"none\" points=\"0 148,0 0,137 0,187 50,187 148,155 138,124 148,93 138,62 148,31 138\" \/>\r\n\t\t\t\t\t<polygon class=\"paper__shadow\" fill=\"hsl(0,10%,70%)\" stroke=\"none\" points=\"137 0,132 55,187 50,142 45\" \/>\r\n\t\t\t\t\t<polyline points=\"137 0,142 45,187 50\" \/>\r\n\t\t\t\t\t<polyline points=\"0 148,0 0,137 0,187 50,187 148\" \/>\r\n\t\t\t\t\t<g class=\"paper__lines\" stroke=\"hsl(0,10%,70%)\">\r\n\t\t\t\t\t\t<polyline points=\"22 88,165 88\" \/>\r\n\t\t\t\t\t\t<polyline points=\"22 110,165 110\" \/>\r\n\t\t\t\t\t\t<polyline points=\"22 132,165 132\" \/>\r\n\t\t\t\t\t<\/g>\r\n\t\t\t\t\t<polyline class=\"paper__tear\" points=\"0 148,31 138,62 148,93 138,124 148,155 138,187 148\" stroke-dasharray=\"198 198\" stroke-dashoffset=\"-198\" \/>\r\n\t\t\t\t<\/g>\r\n\t\t\t\t<g class=\"paper__bottom\" transform=\"translate(0,25)\">\r\n\t\t\t\t\t<polygon class=\"paper__shadow\" fill=\"hsl(0,10%,70%)\" stroke=\"none\" points=\"0 148,31 138,62 148,93 138,124 148,155 138,187 148,187 242,0 242\" transform=\"translate(-12,12)\" \/>\r\n\t\t\t\t\t<polygon class=\"paper__fill\" fill=\"hsl(0,0%,100%)\" stroke=\"none\" points=\"0 148,31 140,62 148,93 138,124 148,155 138,187 148,187 242,0 242\" \/>\r\n\t\t\t\t\t<polyline points=\"187 148,187 242,0 242,0 148\" \/>\r\n\t\t\t\t\t<g class=\"paper__lines\" stroke=\"hsl(0,10%,70%)\">\r\n\t\t\t\t\t\t<polyline points=\"22 154,165 154\" \/>\r\n\t\t\t\t\t\t<polyline points=\"22 176,165 176\" \/>\r\n\t\t\t\t\t\t<polyline points=\"22 198,94 198\" \/>\r\n\t\t\t\t\t<\/g>\r\n\t\t\t\t\t<polyline class=\"paper__tear\" points=\"0 148,31 138,62 148,93 138,124 148,155 138,187 148\" stroke-dasharray=\"198 198\" stroke-dashoffset=\"-198\" \/>\r\n\t\t\t\t<\/g>\r\n\t\t\t<\/g>\r\n\t\t<\/svg>\r\n\t<\/div>\r\n\t<div>\r\n\t\t<h1>404<\/h1>\r\n\t\t<p>We couldn\u2019t find the page you were looking for. It may have been moved, or it just doesn\u2019t exist.<\/p>\r\n\t\t<a class=\"btn-link\" href=\"#\">Go Back Home<\/a>\r\n\t<\/div>\r\n<\/main><\/pre>\n
3. Add the CSS code to your website’s CSS file or include it directly in the HTML file within a <style><\/code> tag. You can easily customize the color scheme given in the root variables.<\/p>\n
* {\r\n\tborder: 0;\r\n\tbox-sizing: border-box;\r\n\tmargin: 0;\r\n\tpadding: 0;\r\n}\r\n:root {\r\n\t--hue: 223;\r\n\t--bg: hsl(var(--hue),10%,90%);\r\n\t--fg: hsl(var(--hue),10%,10%);\r\n\t--primary: hsl(var(--hue),90%,45%);\r\n\t--primary-down: hsl(var(--hue),90%,65%);\r\n\t--trans-dur: 0.3s;\r\n\tfont-size: calc(16px + (24 - 16) * (100vw - 320px) \/ (2560 - 320));\r\n}\r\nbody {\r\n\tbackground-color: var(--bg);\r\n\tcolor: var(--fg);\r\n\tdisplay: flex;\r\n\tfont: 1em\/1.5 Nunito, sans-serif;\r\n\theight: 100vh;\r\n\ttransition:\r\n\t\tbackground-color var(--trans-dur),\r\n\t\tcolor var(--trans-dur);\r\n}\r\nmain {\r\n\tdisplay: grid;\r\n\tgrid-gap: 3em 1.5em;\r\n\tmargin: auto;\r\n\tmax-width: 40em;\r\n\tpadding: 3em 0;\r\n\ttext-align: center;\r\n\twidth: calc(100% - 3em);\r\n}\r\nh1 {\r\n\tfont-size: 3em;\r\n\tline-height: 1;\r\n\tmargin: 0 0 1.5rem;\r\n}\r\np {\r\n\tmargin: 0 0 1.5em;\r\n}\r\n.btn-link {\r\n\tbackground: var(--primary);\r\n\tborder-radius: 1.5em;\r\n\tdisplay: inline-block;\r\n\toutline: transparent;\r\n\tpadding: 0.75em 1.5em;\r\n\ttext-align: center;\r\n\ttext-decoration: none;\r\n\ttransition: background-color 0.15s linear;\r\n}\r\n.btn-link,\r\n.btn-link:visited {\r\n\tcolor: hsl(0,0%,100%);\r\n}\r\n.btn-link:focus-visible,\r\n.btn-link:hover {\r\n\tbackground: var(--primary-down);\r\n}\r\n.btn-link:hover {\r\n\ttext-decoration: none;\r\n}\r\n.paper {\r\n\tdisplay: block;\r\n\tmargin: auto;\r\n\toverflow: visible;\r\n\twidth: 100%;\r\n\tmax-width: 224px;\r\n\theight: auto;\r\n}\r\n.paper__fill {\r\n\tfill: hsl(0,0%,100%);\r\n}\r\n.paper__outline,\r\n.paper__lines {\r\n\ttransition: stroke var(--trans-dur);\r\n}\r\n.paper__outline {\r\n\tstroke: hsl(var(--hue),10%,10%);\r\n}\r\n.paper__lines {\r\n\tstroke: hsl(var(--hue),10%,70%);\r\n}\r\n.paper__shadow {\r\n\tfill: hsl(var(--hue),10%,70%);\r\n\ttransition: fill var(--trans-dur);\r\n}\r\n.paper__top,\r\n.paper__bottom,\r\n.paper__tear,\r\n.paper__tear-fill {\r\n\tanimation: paperTop 1.25s cubic-bezier(0.77,0,0.18,1);\r\n}\r\n.paper__top,\r\n.paper__bottom {\r\n\ttransform-origin: 0 148px;\r\n\ttransition: transform var(--trans-dur) cubic-bezier(0.77,0,0.18,1);\r\n}\r\n.paper__top {\r\n\ttransform: translate(0,8px);\r\n}\r\n.paper__bottom {\r\n\tanimation-name: paperBottom;\r\n\ttransform: translate(0,42px);\r\n}\r\n.paper__tear,\r\n.paper__tear-fill {\r\n\tanimation-timing-function: cubic-bezier(0.32,0,0.67,0);\r\n}\r\n.paper__tear {\r\n\tanimation-name: paperTear;\r\n\tstroke-dashoffset: 0;\r\n}\r\n.paper__tear-fill {\r\n\tanimation-name: paperTearFill;\r\n}\r\n.paper__outline:hover .paper__top,\r\n.paper__outline:hover .paper__bottom {\r\n\ttransform: translate(0,25px);\r\n}\r\n\r\n\/* Dark theme *\/\r\n@media (prefers-color-scheme: dark) {\r\n\t:root {\r\n\t\t--bg: hsl(var(--hue),10%,25%);\r\n\t\t--fg: hsl(var(--hue),10%,90%);\r\n\t}\r\n\t.paper__shadow:first-child {\r\n\t\tfill: hsl(var(--hue),10%,15%);\r\n\t}\r\n}\r\n\r\n\/* Beyond mobile *\/\r\n@media (min-width: 768px) {\r\n\tmain {\r\n\t\tgrid-template-columns: 1fr 2fr;\r\n\t\talign-items: center;\r\n\t\ttext-align: left;\r\n\t}\r\n\t.paper {\r\n\t\tmax-width: 300px;\r\n\t}\r\n}\r\n\r\n\/* Animations *\/\r\n@keyframes paperTop {\r\n\tfrom,\r\n\t40% {\r\n\t\tanimation-timing-function: cubic-bezier(0.32,0,0.67,0);\r\n\t\ttransform: translate(0,25px) rotate(0);\r\n\t\ttransform-origin: 61px 148px;\r\n\t}\r\n\t70% {\r\n\t\tanimation-timing-function: cubic-bezier(0.33,1,0.67,1.5);\r\n\t\ttransform: translate(0,25px) rotate(-5deg);\r\n\t\ttransform-origin: 61px 148px;\r\n\t}\r\n\tto {\r\n\t\ttransform: translate(0,8px) rotate(0);\r\n\t\ttransform-origin: 0 148px;\r\n\t}\r\n}\r\n@keyframes paperBottom {\r\n\tfrom,\r\n\t40% {\r\n\t\tanimation-timing-function: cubic-bezier(0.32,0,0.67,0);\r\n\t\ttransform: translate(0,25px) rotate(0);\r\n\t\ttransform-origin: 61px 148px;\r\n\t}\r\n\t70% {\r\n\t\tanimation-timing-function: cubic-bezier(0.33,1,0.67,1.5);\r\n\t\ttransform: translate(0,25px) rotate(5deg);\r\n\t\ttransform-origin: 61px 148px;\r\n\t}\r\n\tto {\r\n\t\ttransform: translate(0,42px) rotate(0);\r\n\t\ttransform-origin: 0 148px;\r\n\t}\r\n}\r\n@keyframes paperTear {\r\n\tfrom,\r\n\t40% {\r\n\t\tstroke-dashoffset: -198;\r\n\t}\r\n\t70%,\r\n\tto {\r\n\t\tstroke-dashoffset: 0;\r\n\t}\r\n}\r\n@keyframes paperTearFill {\r\n\tfrom,\r\n\t40% {\r\n\t\twidth: 187px;\r\n\t}\r\n\t70%,\r\n\tto {\r\n\t\twidth: 0;\r\n\t}\r\n}<\/pre>\n
That’s all! hopefully, you have successfully integrated this simple 404 Page HTML template into your website. If you have any questions or suggestions, feel free to comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"
This HTML & CSS template helps you to create a 404 error page with a torn paper effect. It uses…<\/p>\n","protected":false},"author":1,"featured_media":9162,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[63],"tags":[],"class_list":["post-9155","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html5-css3"],"acf":[],"yoast_head":"\nSimple 404 Page HTML Template — CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a free code snippet to create a Simple 404 Page HTML Template. You can view demo and download the source code.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codehim.com\/html5-css3\/simple-404-page-html-template\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Simple 404 Page HTML Template — CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a free code snippet to create a Simple 404 Page HTML Template. You can view demo and download the source code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/html5-css3\/simple-404-page-html-template\/\" \/>\n<meta property=\"og:site_name\" content=\"CodeHim\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codehimofficial\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-19T17:59:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-22T10:59:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Simple-404-Page-HTML-Template.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"960\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Asif Mughal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:site\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Asif Mughal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codehim.com\/html5-css3\/simple-404-page-html-template\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/simple-404-page-html-template\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"Simple 404 Page HTML Template\",\"datePublished\":\"2024-01-19T17:59:00+00:00\",\"dateModified\":\"2024-01-22T10:59:37+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/simple-404-page-html-template\/\"},\"wordCount\":220,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/simple-404-page-html-template\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Simple-404-Page-HTML-Template.png\",\"articleSection\":[\"HTML5 & CSS3\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/html5-css3\/simple-404-page-html-template\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/html5-css3\/simple-404-page-html-template\/\",\"url\":\"https:\/\/codehim.com\/html5-css3\/simple-404-page-html-template\/\",\"name\":\"Simple 404 Page HTML Template — CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/simple-404-page-html-template\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/simple-404-page-html-template\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Simple-404-Page-HTML-Template.png\",\"datePublished\":\"2024-01-19T17:59:00+00:00\",\"dateModified\":\"2024-01-22T10:59:37+00:00\",\"description\":\"Here is a free code snippet to create a Simple 404 Page HTML Template. You can view demo and download the source code.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/simple-404-page-html-template\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/html5-css3\/simple-404-page-html-template\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/html5-css3\/simple-404-page-html-template\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Simple-404-Page-HTML-Template.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Simple-404-Page-HTML-Template.png\",\"width\":1280,\"height\":960,\"caption\":\"Simple 404 Page HTML Template\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/html5-css3\/simple-404-page-html-template\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML5 & CSS3\",\"item\":\"https:\/\/codehim.com\/category\/html5-css3\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Simple 404 Page HTML Template\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codehim.com\/#website\",\"url\":\"https:\/\/codehim.com\/\",\"name\":\"CodeHim\",\"description\":\"Web Design Code Snippets\",\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"alternateName\":\"Web Design Codes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codehim.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/codehim.com\/#organization\",\"name\":\"CodeHim - Web Design Code & Scripts\",\"url\":\"https:\/\/codehim.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"contentUrl\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"width\":280,\"height\":280,\"caption\":\"CodeHim - Web Design Code & Scripts\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/codehimofficial\",\"https:\/\/x.com\/CodeHimOfficial\",\"https:\/\/www.instagram.com\/codehim\/\",\"https:\/\/www.linkedin.com\/company\/codehim\",\"https:\/\/co.pinterest.com\/codehim\/\",\"https:\/\/www.youtube.com\/@codehim\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\",\"name\":\"Asif Mughal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"caption\":\"Asif Mughal\"},\"description\":\"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.\",\"sameAs\":[\"https:\/\/codehim.com\"],\"url\":\"https:\/\/codehim.com\/author\/asif-mughal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Simple 404 Page HTML Template — CodeHim","description":"Here is a free code snippet to create a Simple 404 Page HTML Template. You can view demo and download the source code.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codehim.com\/html5-css3\/simple-404-page-html-template\/","og_locale":"en_US","og_type":"article","og_title":"Simple 404 Page HTML Template — CodeHim","og_description":"Here is a free code snippet to create a Simple 404 Page HTML Template. You can view demo and download the source code.","og_url":"https:\/\/codehim.com\/html5-css3\/simple-404-page-html-template\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-01-19T17:59:00+00:00","article_modified_time":"2024-01-22T10:59:37+00:00","og_image":[{"width":1280,"height":960,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Simple-404-Page-HTML-Template.png","type":"image\/png"}],"author":"Asif Mughal","twitter_card":"summary_large_image","twitter_creator":"@CodeHimOfficial","twitter_site":"@CodeHimOfficial","twitter_misc":{"Written by":"Asif Mughal","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/html5-css3\/simple-404-page-html-template\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/html5-css3\/simple-404-page-html-template\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"Simple 404 Page HTML Template","datePublished":"2024-01-19T17:59:00+00:00","dateModified":"2024-01-22T10:59:37+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/html5-css3\/simple-404-page-html-template\/"},"wordCount":220,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/html5-css3\/simple-404-page-html-template\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Simple-404-Page-HTML-Template.png","articleSection":["HTML5 & CSS3"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/html5-css3\/simple-404-page-html-template\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/html5-css3\/simple-404-page-html-template\/","url":"https:\/\/codehim.com\/html5-css3\/simple-404-page-html-template\/","name":"Simple 404 Page HTML Template — CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/html5-css3\/simple-404-page-html-template\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/html5-css3\/simple-404-page-html-template\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Simple-404-Page-HTML-Template.png","datePublished":"2024-01-19T17:59:00+00:00","dateModified":"2024-01-22T10:59:37+00:00","description":"Here is a free code snippet to create a Simple 404 Page HTML Template. You can view demo and download the source code.","breadcrumb":{"@id":"https:\/\/codehim.com\/html5-css3\/simple-404-page-html-template\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/html5-css3\/simple-404-page-html-template\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/html5-css3\/simple-404-page-html-template\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Simple-404-Page-HTML-Template.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Simple-404-Page-HTML-Template.png","width":1280,"height":960,"caption":"Simple 404 Page HTML Template"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/html5-css3\/simple-404-page-html-template\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"HTML5 & CSS3","item":"https:\/\/codehim.com\/category\/html5-css3\/"},{"@type":"ListItem","position":3,"name":"Simple 404 Page HTML Template"}]},{"@type":"WebSite","@id":"https:\/\/codehim.com\/#website","url":"https:\/\/codehim.com\/","name":"CodeHim","description":"Web Design Code Snippets","publisher":{"@id":"https:\/\/codehim.com\/#organization"},"alternateName":"Web Design Codes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codehim.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codehim.com\/#organization","name":"CodeHim - Web Design Code & Scripts","url":"https:\/\/codehim.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/","url":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","contentUrl":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","width":280,"height":280,"caption":"CodeHim - Web Design Code & Scripts"},"image":{"@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codehimofficial","https:\/\/x.com\/CodeHimOfficial","https:\/\/www.instagram.com\/codehim\/","https:\/\/www.linkedin.com\/company\/codehim","https:\/\/co.pinterest.com\/codehim\/","https:\/\/www.youtube.com\/@codehim"]},{"@type":"Person","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed","name":"Asif Mughal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","caption":"Asif Mughal"},"description":"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.","sameAs":["https:\/\/codehim.com"],"url":"https:\/\/codehim.com\/author\/asif-mughal\/"}]}},"views":2902,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/9155","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/comments?post=9155"}],"version-history":[{"count":0,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/9155\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/9162"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=9155"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=9155"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=9155"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}