Simple and beautiful elements, in addition to their small size, always double the beauty of the website. In this post, we also have a code to display the 404 error. This code has a yellow background. All text and emoticons on this background are black. An upset smiley face is in the middle of the page, and below it is written in bold font the phrase on page 404. It is written in a smaller font at the bottom of the page.
HTML
<!-- This script got from www.devanswer.com -->
<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>
CSS
#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;
}
