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

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





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


Welcome🎉 to Code With Random blog. In this blog, we learn that 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 write CSS for our 404 page html .
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 | simple 404 page using html & css - codewithrandom

Check it more








Now we have completed our CSS section,  Here is our updated output with  CSSHope you like the 404 page html, you can see 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