Create 404 Error Page Using HTML Code
Hello programmers, Welcome to the Codewithrandom blog. Today 404 Error Page Using HTML Code and Style with Css in this blog. This project is intended for total beginners. Using HTML and CSS, we will design our 404 page using basic HTML ideas, graphics, and a little style using CSS. We will create our own 404 page.
The HTTP 404, 404 Not Found, or 404 Page Not Found error message is a Hypertext Transfer Protocol (HTTP) standard response code in computer network communications to signal that the browser was able to interface with a particular server but the server could not locate what was requested. When a user requests a page or URL that doesn’t exist on a specific website, an error message appears.
50+ HTML, CSS and JavaScript Projects With Source Code
In this tutorial, we’ll build a blank homepage first, and style it with CSS,Next, we’ll add the heading to our webpage using a few fundamental HTML tags. Additionally, we’ll give our website a Home button. This is a beginner project and this will help you in learning what different pages are required on a website. In this tutorial, we will be discussing all the concepts step by step.
I hope you must have got an idea about the project.
So, Let’s start our 404-page Project By Adding The Source Codes. For That, First, We Are Using The Html Code.
Gym Website Using HTML and CSS (Source Code)
Step1: 404 Error Page Html Code:-
HTML is used to design the website’s layout. So, first, we create the layout, then we style it, and finally, we add features to the button (on clicking the button menu opens ). This programme was made (Custom 404 Error Page Design).
You must first generate two files, one in HTML and one in CSS. Simply insert the following codes into your file after producing these files.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>404 Page Not Found</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<main class="bl_page404">
<h1>Error 404. The page does not exist</h1>
<p>Sorry! The page you are looking for can not be found. Perhaps the page you requested was moved or deleted. It
is also possible that you made a small typo when entering the address. Go to the main page.
</p>
<div class="bl_page404__wrapper">
<img src="https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/404/bigBoom/cloud_warmcasino.png?raw=true"
alt="cloud_warmcasino.png">
<div class="bl_page404__el1"></div>
<div class="bl_page404__el2"></div>
<div class="bl_page404__el3"></div>
<a class="bl_page404__link" href="/">go home</a>
</div>
</main>
</body>
</html>Create an HTML file first with the name index.html, and then put the provided codes into it. Ensure that the file is saved with the.html extension.
Inside the Head section of HTML Code, we will be adding a link for our CSS to link with our webpage structure.
Ecommerce Website Using Html Css And Javascript Source Code
We will now build a major div with the class “bl page404” inside the body; this will serve as the main container for our website. Now, we’ll add a heading to our 404 page using the H1 tag, and we’ll give it a quick introduction using the <p> tag.
Using the anchor tag, we will now add a link to our home page and construct another div that will include an image for our 404 webpage.
We have added the basic structure of our OTP input field . Let’s take look at our output.
Output:
Step 2: Adding the CSS Code.
Cascading Style Sheets (CSS) is a markup language for describing the presentation of a document written in HTML or XML. CSS, like HTML and JavaScript, is a key component of the World Wide Web.
10+ HTML CSS Projects With Source Code
Now we will look at our CSS code.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Outfit", sans-serif;
background-image: url(" https://images3.alphacoders.com/109/1091500.jpg");
background-size: cover;
background-position: top center;
}
.app-wrap {
display: flex;
flex-direction: column;
min-height: 100vh;
background-image: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.3),
rgba(0, 0, 0, 0.6)
);
}
header {
display: flex;
justify-content: center;
align-items: center;
padding: 50px 15px 15px;
}
header input {
width: 100%;
max-width: 280px;
padding: 10px 15px;
border: none;
outline: none;
background-color: rgba(18, 18, 18, 0.4);
border-radius: 16px;
border-bottom: 3px solid #df8e00;
font-size: 20px;
font-weight: 300;
transition: 0.2s ease-out;
color: #eeeeee;
}
header input:focus {
background-color: rgba(18, 18, 18, 0.8);
}
body {
width: 100%;
margin: 0;
height: 100%;
background-color: #1d3041;
font-family: "Open Sans - Semibold", sans-serif;
color: #fff;
}
h1 {
text-align: center;
margin-top: 1%;
margin-bottom: 25px;
font-size: 30px;
font-weight: 400;
text-transform: uppercase;
}
p {
display: block;
margin: 25px auto;
max-width: 776px;
text-align: center;
color: #bcecf2;
font-family: "Open Sans", sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
.bl_page404__wrapper {
position: relative;
width: 100%;
margin: 10px auto 10px;
max-width: 440px;
min-height: 410px;
}
.bl_page404__img {
width: 100%;
}
.bl_page404__link {
display: block;
margin: 0 auto;
width: 260px;
height: 64px;
box-shadow: 0 5px 0 #9c1007, inset 0 0 18px rgba(253, 60, 0, 0.75);
background-color: #f95801;
color: #fff;
font-family: "Open Sans", sans-serif;
font-size: 24px;
font-weight: 700;
line-height: 64px;
text-transform: uppercase;
text-decoration: none;
border-radius: 30px;
text-align: center;
}
.bl_page404__link:hover,
.bl_page404__link:focus {
background-color: #ff7400;
}
.bl_page404__el1 {
position: absolute;
top: 108px;
left: 102px;
opacity: 1;
animation: el1Move 800ms linear infinite;
width: 84px;
height: 106px;
background: url("https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/404/bigBoom/404-1.png?raw=true")
50% 50% no-repeat;
z-index: 2;
}
.bl_page404__el2 {
position: absolute;
top: 92px;
left: 136px;
opacity: 1;
animation: el2Move 800ms linear infinite;
width: 184px;
height: 106px;
background: url("https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/404/bigBoom/404-2.png?raw=true")
50% 50% no-repeat;
z-index: 2;
}
.bl_page404__el3 {
position: absolute;
top: 108px;
left: 180px;
opacity: 1;
animation: el3Move 800ms linear infinite;
width: 284px;
height: 106px;
background: url("https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/404/bigBoom/404-3.png?raw=true")
50% 50% no-repeat;
z-index: 2;
}
@keyframes el1Move {
0% {
top: 108px;
left: 102px;
opacity: 1;
}
100% {
top: -10px;
left: 22px;
opacity: 0;
}
}
@keyframes el2Move {
0% {
top: 92px;
left: 136px;
opacity: 1;
}
100% {
top: -10px;
left: 108px;
opacity: 0;
}
}
@keyframes el3Move {
0% {
top: 108px;
left: 180px;
opacity: 1;
}
100% {
top: 28px;
left: 276px;
opacity: 0;
}
}
After we’ve added the CSS code, we’ll go over it step by step. To save time, you can simply copy this code and paste it into your IDE. Let us now examine our code step by step.
Multiple Choice Quiz using HTML, CSS & JavaScript
Step1:We will give our webpage’s body some style. The background colour is set to “dark-blue,” and the height and width are also set to “100%.” Open-sans is selected as the font family, while white is selected as the font colour.
body {
width: 100%;
margin: 0;
height: 100%;
background-color: #1d3041;
font-family: "Open Sans - Semibold", sans-serif;
color: #fff;
}Step2: We will now style the webpage’s heading using the h1 tag. We add text-align as “centre” and top-margin of “1%” and bottom-margin of 25px using the text-align property. Our heading’s font size is set to “30 px,” and by utilising the transform property, we will change the text’s case to uppercase.
We will specify the display for our paragraph tag to “block” using the paragraph tag. The margin is set to 25px for the top and bottom and to auto for the left and right. The font family is set to “open-sans,” the font colour is set to “sky blue colour,” and the font size is set to 16 pixels.
h1 {
text-align: center;
margin-top: 1%;
margin-bottom: 25px;
font-size: 30px;
font-weight: 400;
text-transform: uppercase;
}
p {
display: block;
margin: 25px auto;
max-width: 776px;
text-align: center;
color: #bcecf2;
font-family: "Open Sans", sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
Step3: Now we will be styling our wrapper container . We will set its position as relative and the width is set to the “100%” . We also added maximum width and minimum height to our div container.
Dinosaur/Dino Game Using HTML and JavaScript (Source Code)
Now inside the container we will style the image the width of the image is set to the 100%.
.bl_page404__wrapper {
position: relative;
width: 100%;
margin: 10px auto 10px;
max-width: 440px;
min-height: 410px;
}
.bl_page404__img {
width: 100%;
}Step4: The homepage button will get some style. The dimensions are “260px” for width and “64px” for height. In addition, we gave our button a box-shadow and the colour “red” for the background. A text-align attribute is also added.
Now that we have established a div tag inside of our wrapper, we will set its position to absolute, set its animation to infinite, and add a backdrop picture.
To add motion to our all div tag, we will now use the keyframe attribute.
bl_page404__link {
display: block;
margin: 0 auto;
width: 260px;
height: 64px;
box-shadow: 0 5px 0 #9c1007, inset 0 0 18px rgba(253, 60, 0, 0.75);
background-color: #f95801;
color: #fff;
font-family: "Open Sans", sans-serif;
font-size: 24px;
font-weight: 700;
line-height: 64px;
text-transform: uppercase;
text-decoration: none;
border-radius: 30px;
text-align: center;
}
.bl_page404__link:hover,
.bl_page404__link:focus {
background-color: #ff7400;
}
.bl_page404__el1 {
position: absolute;
top: 108px;
left: 102px;
opacity: 1;
animation: el1Move 800ms linear infinite;
width: 84px;
height: 106px;
background: url("https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/404/bigBoom/404-1.png?raw=true")
50% 50% no-repeat;
z-index: 2;
}
.bl_page404__el2 {
position: absolute;
top: 92px;
left: 136px;
opacity: 1;
animation: el2Move 800ms linear infinite;
width: 184px;
height: 106px;
background: url("https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/404/bigBoom/404-2.png?raw=true")
50% 50% no-repeat;
z-index: 2;
}
.bl_page404__el3 {
position: absolute;
top: 108px;
left: 180px;
opacity: 1;
animation: el3Move 800ms linear infinite;
width: 284px;
height: 106px;
background: url("https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/404/bigBoom/404-3.png?raw=true")
50% 50% no-repeat;
z-index: 2;
}
@keyframes el1Move {
0% {
top: 108px;
left: 102px;
opacity: 1;
}
100% {
top: -10px;
left: 22px;
opacity: 0;
}
}
@keyframes el2Move {
0% {
top: 92px;
left: 136px;
opacity: 1;
}
100% {
top: -10px;
left: 108px;
opacity: 0;
}
}
@keyframes el3Move {
0% {
top: 108px;
left: 180px;
opacity: 1;
}
100% {
top: 28px;
left: 276px;
opacity: 0;
}
}
ADVERTISEMENT
The project is now finished, we have completed flip card design using HTML & CSS. Now look at the live preview.
ADVERTISEMENT
Final Output Of 404 Error Page Using HTML and CSS Code:
Live Preview Of Project 404 Error Page Animated Using HTML & CSS
you can use this project directly by copying into your IDE. WE hope you understood the project , If you any doubt feel free to comment!!
ADVERTISEMENT
100+ JavaScript Projects With Source Code ( Beginners to Advanced)
ADVERTISEMENT
If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.
ADVERTISEMENT
What is a 404 page not found?
The Hypertext Transfer Protocol (HTTP) standard response code 404, also known as 404 Not Found or 404 Page Not Found, is used in computer network communications to indicate that although the browser was able to communicate with a specific server, the server was unable to find the requested resource. An error message shows when a user accesses a page or URL that doesn’t exist on a particular website.
What should be included on a 404 page?
1. A link to you sitemap.
2. A Search Bar.
3. Menu Navigation.
4. A Link to the Homepage.
