ADVERTISEMENT

Create Simple 404 Page Using HTML and CSS Code

Telegram Group Join Now

ADVERTISEMENT

Create Simple 404 Page Using HTML and CSS Code

 
Create Simple 404 Page Using HTML Code
Create Simple 404 Page Using HTML & Css Code
 
Welcome to the CodeWithRandom blog. In this blog. We learn how to Create Simple 404 Page. We use HTML and CSS Code for this Simple 404 Page.
 

Project Preview Of Simple 404 Page Using HTML and CSS

ADVERTISEMENT

 
 
Code by N/A
Project Download Link Available Below
Language used HTML and CSS
External link / Dependencies No
Responsive Yes
Simple 404 Page Table
 
 
 
Hope you enjoy our blog so let’s start with a basic HTML structure for a Simple 404 Page.

ADVERTISEMENT

 

 

HTML Code For Simple 404 Page 

<h1>There's some issues </h1>
<p class="zoom-area"><b>Codewithrandom</b> Hope you understand our pain as our developer  thank you visit again</p>
<section class="error-container">
<span><span>4</span></span>
<span>0</span>
<span><span>4</span></span>
</section>
<div class="link-container">
<a target="_blank" href="https://www.codewithrandom.com/" class="more-link">Visit the home page</a>
</div>

There is all the HTML code for the Simple 404 Page. Now, you can see output without CSS, then we apply styling for our Simple 404 Page.

ADVERTISEMENT

Only Html Code Output For Simple 404 Page
 
 
Create Simple 404 Page Using HTML Code
Create Simple 404 Page Using HTML Code

 

ADVERTISEMENT

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

CSS Code For Simple 404 Page 

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700');
@import url('https://fonts.googleapis.com/css?family=Catamaran:400,800');
.error-container {
text-align: center;
font-size: 180px;
font-family: 'Catamaran', sans-serif;
font-weight: 800;
margin: 20px 15px;
}
.error-container > span {
display: inline-block;
line-height: 0.7;
position: relative;
color: #FFB485;
}
.error-container > span > span {
display: inline-block;
position: relative;
}
.error-container > span:nth-of-type(1) {
perspective: 1000px;
perspective-origin: 500% 50%;
color: #F0E395;
}
.error-container > span:nth-of-type(1) > span {
transform-origin: 50% 100% 0px;
transform: rotateX(0);
animation: easyoutelastic 8s infinite;
}
.error-container > span:nth-of-type(3) {
perspective: none;
perspective-origin: 50% 50%;
color: #D15C95;
}
.error-container > span:nth-of-type(3) > span {
transform-origin: 100% 100% 0px;
transform: rotate(0deg);
animation: rotatedrop 8s infinite;
}
@keyframes easyoutelastic {
0% {
transform: rotateX(0);
}
9% {
transform: rotateX(210deg);
}
13% {
transform: rotateX(150deg);
}
16% {
transform: rotateX(200deg);
}
18% {
transform: rotateX(170deg);
}
20% {
transform: rotateX(180deg);
}
60% {
transform: rotateX(180deg);
}
80% {
transform: rotateX(0);
}
100% {
transform: rotateX(0);
}
}
@keyframes rotatedrop {
0% {
transform: rotate(0);
}
10% {
transform: rotate(30deg);
}
15% {
transform: rotate(90deg);
}
70% {
transform: rotate(90deg);
}
80% {
transform: rotate(0);
}
100% {
transform: rotateX(0);
}
}
/* demo stuff */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
background-color: #f4f4f4;
margin-bottom: 50px;
}
html, button, input, select, textarea {
font-family: 'Montserrat', Helvetica, sans-serif;
color: #bbb;
}
h1 {
text-align: center;
margin: 30px 15px;
}
.zoom-area {
max-width: 490px;
margin: 30px auto 30px;
font-size: 19px;
text-align: center;
}
.link-container {
text-align: center;
}
a.more-link {
text-transform: uppercase;
font-size: 13px;
background-color: #bbb;
padding: 10px 15px;
border-radius: 0;
color: #fff;
display: inline-block;
margin-right: 5px;
margin-bottom: 5px;
line-height: 1.5;
text-decoration: none;
margin-top: 50px;
letter-spacing: 1px;
}

Now we have completed our CSS Code section For the Simple 404 Error Page. Here is our final updated output HTML And CSS Code Output.

Final Output Of Simple 404 Error Page Using Html and Css

 
Create Simple 404 Page Using HTML Code
Create Simple 404 Page Using HTML & CSS Code
 
Create Simple 404 Page Using HTML Code
Create Simple 404 Page Using HTML & CSS Code

Now we have completed our 404 Page. Here is our updated output with  HTML and CSS. Hope you like the 404-page Using HTML and CSS code, you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.

ADVERTISEMENT

Portfolio Website Using HTML CSS And JAVASCRIPT ( Source Code)

Thank you

In this post, we learn how to create a Simple 404 Page Using HTML & CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

ADVERTISEMENT

Written by – Code With Random/Anki

ADVERTISEMENT

Which code editor do you use for this Simple 404 Page coding?

I personally recommend using VS Code Studio, it’s straightforward and easy to use.

is this project responsive or not?

Yes! this is a responsive project

Do you use any external links to create this project?

No!

ADVERTISEMENT

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT