You are currently viewing Create Simple 404 Page Using HTML and CSS Code

Create Simple 404 Page Using HTML and CSS Code

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.
Hope you enjoy our blog so let’s start with a basic HTML structure for a Simple 404 Page.
 

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.

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

 

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.

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.

Written by – Code With Random/Anki

Leave a Reply