Simple 404 page HTML code | 404 page HTML - codewithrandom

Simple 404 page HTML code | 404 page HTML 

 



404 page html | simple 404 page using html & css - codewithrandom

WelcomeπŸŽ‰ to Code With Random blog. In this blog, we learn how to create a simple 404 page. We use HTML & CSS  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 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 HTML code for the 404 page HTML. Now, you can see output without CSS, then we apply styling for our 404 page HTML code.
Output
 @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 section,  Here is our final updated output CSS.

Output


404 page html | simple 404 page using html & css - codewithrandom

404 page HTML code output

Check it more








Now we have completed our CSS section,  Here is our updated output with  CSSHope you like the 404-page HTML code, you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you πŸ™πŸ’•

In this post, we learn how to create a 404-page HTML  using simple 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 

Post a Comment

Previous Post Next Post