Demo for 404 Web Page with Animating Sad Emoji

Preview

Source Code

                            <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->


<style>
#oopss {
  background: linear-gradient(-45deg, #fff300, #efe400);
  position: fixed;
  left: 0px;
  top: 0;
  width: 100%;
  height: 100%;
  line-height: 1.5em;
  z-index: 9999;
}
#oopss #error-text {
  font-size: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'Shabnam', Tahoma, sans-serif;
  color: #000;
  direction: rtl;
}
#oopss #error-text img {
  margin: 85px auto 20px;
  height: 342px;
}
#oopss #error-text span {
  position: relative;
  font-size: 3.3em;
  font-weight: 900;
  margin-bottom: 50px;
}
#oopss #error-text p.p-a {
  font-size: 19px;
  margin: 30px 0 15px 0;
}
#oopss #error-text p.p-b {
  font-size: 15px;
}
#oopss #error-text .back {
  background: #fff;
  color: #000;
  font-size: 30px;
  text-decoration: none;
  margin: 2em auto 0;
  padding: .7em 2em;
  border-radius: 500px;
  box-shadow: 0 20px 70px 4px rgba(0, 0, 0, 0.1), inset 7px 33px 0 0px #fff300;
  font-weight: 900;
  transition: all 300ms ease;
}
#oopss #error-text .back:hover {
  -webkit-transform: translateY(-13px);
          transform: translateY(-13px);
  box-shadow: 0 35px 90px 4px rgba(0, 0, 0, 0.3), inset 0px 0 0 3px #000;
}
</style>

</head>
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<div id='oopss'>
    <div id='error-text'>
        <img src="http://www.devanswer.com/img/sad404.svg" alt="404">
        <span>404 PAGE</span>
        <p class="p-a">
           . The page you were looking for could not be found</p>
        <p class="p-b">
            ... Back to previous page
        </p>
        <a href='#' class="back">... Back to previous page</a>
    </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>

</body>
</html>

Other Codes

Snowfall on 404 Not Found Page

This code has a snowy appearance for page 404. This phrase is in the snow. Snow is also falling on this page at the same time.

HTML Space Like 404 Not Found Page

The phrase 404 in this code is made with a space theme. The stars flutter and meteors move in the background.

HTML 404 Page Code with Animating Placard

In this code, one hand comes out of a pit and a placard is inside the hand. 404 error phrase is written on this placard.

HTML Not Found Page with Tractor Animation

The 404 page shown in this code is made of two tractors. These two tractors use the phrase 404 error in their direction.