Demo for Pure CSS Flashlight 404 Page

Preview

Source Code

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


<style>
html {
  background: #1A1A1A;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  overflow: hidden;
  color: #1A1A1A;
}
*, *:after, *:before {
  box-sizing: border-box;
}
html:after, html:before {
  content: '404';
  position: absolute;
  font-size: 100px;
  left: 0;
  right: 0;
  text-align: center;
  bottom: 340px;
  font-weight: 600;
  z-index: 200;
}
html:before {
  content: 'Page Not Found';
  font-size: 22px;
  font-weight: 400;
  bottom: 330px;
}
head {
  display: block;
  width: 35px;
  height: 140px;
  background: #646464;
  border-bottom: 10px solid #333;
  margin: auto;
  transform-origin: 50% 100%;
  -webkit-animation: 5s find linear infinite;
  animation: 5s find linear infinite;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
}
head:after {
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 25px 25px 0 25px;
  border-color: #333 transparent transparent transparent;
  width: 85px;
  left: -25px;
  top: 0;
  box-shadow: 0px -10px 0 #FEAF33;
}
head:before {
  content: '';
  position: absolute;
  width: 8px;
  height: 15px;
  background: #FEAF33;
  left: 0;
  right: 0;
  margin: auto;
  top: 40px;
  border-radius: 6px;
  box-shadow: 0px 0 1px 2px #333;
}
style {
  display: block;
  width: 250px;
  height: 200px;
  background: #FFFEE2;
  border-radius: 50%;
  position: absolute;
  left: -107px;
  bottom: 270px;
  margin: auto;
  text-align: center;
  color: #333;
  font-size: 90px;
  line-height: 200px;
  font-weight: 600;
  font-size: 0;
}
style:after {
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 190px 75px 0 75px;
  border-color: rgba(255, 254, 226, 0.3) transparent transparent transparent;
  width: 230px;
  left: 10px;
  top: 100%;
  transform: translateY(-60px);
}
@-webkit-keyframes find {
  25% {
    transform: rotate(25deg);
  }
  0% , 50%  , 100% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(-25deg);
  }
}
@keyframes find {
  25% {
    transform: rotate(25deg);
  }
  0% , 50%  , 100% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(-25deg);
  }
}
</style>

</head>
<body>
<div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>

</body>
<script>'undefined'=== typeof _trfq || (window._trfq = []);'undefined'=== typeof _trfd && (window._trfd=[]),_trfd.push({'tccl.baseHost':'secureserver.net'},{'ap':'cpbh-mt'},{'server':'p3plmcpnl484880'},{'dcenter':'p3'},{'cp_id':'765442'},{'cp_cl':'8'}) // Monitoring performance to make your website faster. If you want to opt-out, please contact web hosting support.</script><script src='https://img1.wsimg.com/traffic-assets/js/tccl.min.js'></script></html>

Other Codes

404 Page with Swimming Fish

In this code we have a 404 page with fish moving in the background. And on it there is a text with the title of the page you are looking for could not . . .

Book Shelf 404 Page

In this code, there is a bookshelf in which a book is missing and is not, and with this trick, they show the absence of the desired page.

CSS 404 Page with Colorful Shadow

The phrase 404 in this code is in italics and also has a color shade. The shadow color of this phrase changes automatically.

Dynamic Colorful 404 Not Found Page Code

In this code, the phrase 404 is beautifully placed in the middle of the page. The characters in this phrase take turns changing colors.