 |
| 404 Error page using html css |
In this article, we given a 404 Error page using html and css source code as a project. 404 Error page is an empty page where it shows only error means the page is removed or not exist. It can be used when we dont want to show the actual page or any information. In this project, we added a unique design which continuously animating and the project is completely responsive.
So, Must try this project for practice and use in vs code to check how it works. We have given a complete source code of 404 Error page using html and css source code. Let's go and check the source code as given below -
To add this project in vs code, follow the given process :-
1) Create a New folder in file manager name as - 404Error-page.
2) Open the folder in VS code.
3) Add file name as - index.html and copy the html code as given.
4) Add another file name as - style.css and copy the css code as given.
5) Then run the code or check the preview with code preview extension in vs code.
404 Error page using html and css source code
Here we given a html and css source code of 404 Error page project as given -
HTML
In HTML code, we created a structure by adding the blocks using div tags. Added an elements and text that shows on display or screen. Also, Added a button to go to homepage when user sees 404 error. Linked a css for styling the project of 404 error page. Copy the given html code and paste it into index.html file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>404 Error - Page Not Found</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="error-container">
<div class="error-content">
<div class="error-illustration">
<div class="planet">
<div class="ring"></div>
<div class="planet-core"></div>
</div>
</div>
<div class="error-text">
<h1>404</h1>
<p>Oops! The page you're looking for could not be found.</p>
<a href="/" class="btn">Go to Homepage</a>
</div>
</div>
</div>
</body>
</html>CSS
In CSS code, we created a responsive design and added a position to the elements. Designed a structure using advanced css properties and added a keyframes to continuous rotate and animate the design. It is unique design which is created for 404 error page. Copy the given css code and paste it into style.css file.
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Poppins', sans-serif;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
}
.error-container {
text-align: center;
}
.error-content {
display: flex;
justify-content: center;
align-items: center;
max-width: 800px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.error-illustration {
flex: 1;
position: relative;
height: 100%;
background-color: #3498db;
}
.planet {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 300px;
border-radius: 50%;
background-color: #2c3e50;
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
animation: planet-rotate 20s infinite linear;
}
.ring {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
border: 4px dashed #3498db;
border-radius: 50%;
animation: ring-float 10s infinite ease-in-out alternate;
}
.planet-core {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60px;
height: 60px;
border-radius: 50%;
background-color: #e74c3c;
}
.error-text {
flex: 1;
padding: 40px;
text-align: left;
color: #333;
}
.error-text h1 {
font-size: 6em;
font-weight: 700;
margin-bottom: 10px;
color: #3498db;
}
.error-text p {
font-size: 1.2em;
margin-bottom: 30px;
}
.btn {
display: inline-block;
padding: 15px 30px;
background-color: #3498db;
color: #fff;
font-size: 1.1em;
text-decoration: none;
border-radius: 4px;
transition: background-color 0.3s ease;
}
.btn:hover {
background-color: #2980b9;
}
@keyframes planet-rotate {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
@keyframes ring-float {
0% {
transform: translate(-50%, -50%) scale(1);
}
100% {
transform: translate(-50%, -50%) scale(1.2);
}
}
@media (max-width: 768px) {
.error-content {
flex-direction: column-reverse;
max-width: 100%;
height: auto;
}
.error-illustration {
height: 300px;
}
.planet {
width: 150px;
height: 150px;
}
.ring {
width: 100px;
height: 100px;
}
.planet-core {
width: 30px;
height: 30px;
}
.error-text {
padding: 20px;
text-align: center;
}
.error-text h1 {
font-size: 4em;
}
.error-text p {
font-size: 1em;
margin-bottom: 20px;
}
.btn {
padding: 12px 24px;
font-size: 0.9em;
margin-bottom: 60px;
;
}
}Also see this -
Hope this helps you to know about 404 Error page using html and css source code. If you have any confusion or query then you can contact us on our coding community.
Checkout others projects on our website for more and join our coding community on telegram to get knowledge about coding with proper material such as notes, tutorials, projects and more.
Tags:
projects