Hello everyone, today we will learn how to create a 404-page design Html and CSS. Is a website error. It shows the error on the screen and can’t load the screen properly. Instead of showing the screen, it shows a 404 page not found error on the screen. In the last post, we discussed Contact us form Html and Css and you can check that also. But in today’s lesson, our focus is to build 404 pages not found errors.
404-page design Html:
It is a website error. Then it shows this page on the screen to the visitors.
As you can see in the image this page has a beautiful background. This background is gradient. A gradient color means a combination of two or more colors in different parts of the screen. Then it has a heading at the top OOPs! Page not found. Below this, it has a text 404. Then it has a text that why the page is not loading. It is the call to action button.
If you want to show this type of 404 page on your website then you can download this code. Its code is given below for you to download for free.
You might like it:
How to create a 404-page design Html?
If you want to create it then must follow below three steps to achieve the result.
Download a code editor for 404-page design Html:
Code editor means an IDE in which you will be able to write the code of Html and CSS. and javascript but in this project, we will only use Html and CSS. So, download any IDE like visual studio code, notepad or brackets, etc.
Source code of Html:
Create an Html file and copy-paste this below code to your Html file in your IDE. Save the file using .html at the end of the name of the file. It will help the browser to understand the type of file. Html helps to create content like buttons, text, heading, etc. It is possible only when we use Html.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>404 Page - Fantacy Designs</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <h1>404</h1> <h2>Oops! Page not found.</h2> <p>We can't find the page you're looking for.</p> <a href="https://fantacydesigns.com/">Go back home</a> </div> </body> </html> |
Source code of CSS:
Now create a CSS file. Then we have CSS code so, copy-paste this code. CSS is used for designing the page and all the designs have been achieved using CSS.
|
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 |
body{ margin: 0; padding: 0; font-family: "montserrat",sans-serif; min-height: 100vh; background-image: linear-gradient(to right bottom, #f4006a, #f32261, #f1345a, #ee4153, #eb4d4d); } .container{ width: 100%; position: absolute; top: 50%; transform: translateY(-50%); text-align: center; color: #343434 } .container h1{ font-size: 200px; margin: 0; font-weight: 900; letter-spacing: 20px; color: #fff; text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15); } h2{ font-size:40px; color: #fff; color: #fff; text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 1px 0 #bbb, 0 1px 0 #b9b9b9, 0 1px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.0), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.20); } p{ color: #fff; font-weight: 600; } .container a{ text-decoration: none; background: #fff; color: #262626; padding: 12px 24px; display: inline-block; border-radius: 25px; font-size: 14px; text-transform: uppercase; transition: 0.4s;font-weight: bold; margin-top: 20px; box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px; } .container a:hover{ background: transparent; color: #fff; border: 1px solid #fff; } |
Download source code:
You may have an error in the code if you are copy-pasting the code. You can download the source code from the below button of download source code.
Task:
404 is an error message, it means “page not found”. It happens when a user types an invalid URL in the search bar. When there is no page on the website related to that search then the search engine shows this page to the visitors. Therefore, it provides a button to redirect to the home page. Now add the link to another page except the home page. Redirect the users to a specific page except for the home page. It looks awesome, So I am not asking you to modify it this time.
So, if you have any errors or questions then you can comment below. So, don’t forget to follow and share. Thanks for reading this post.
