Html5 404 error page template | 403 and other errors page template HTML and CSS
Html5 error page template HTML and css
A simple HTML error page template for all website. You can use it for 404, 403, 500, and other errors page.
Copy of the template code and make yourself.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Oh snap! You got an error!</title>
<style type="text/css">
html{font-size:18px}body{line-height:1.6;font-size:1em;padding:0 20px}#wrapper{width:410px;height:350px;margin:0 auto;position:absolute;top:50%;left:50%;margin-top:-175px;margin-left:-205px}html{font-size:62.5%;box-sizing:border-box}.content{width:100%;margin:0 auto;text-align:center}body{font-weight:400;line-height:1;word-wrap:break-word;text-rendering:optimizeLegibility;-webkit-overflow-scrolling:touch;-webkit-text-size-adjust:none}h1{font-weight:500;font-size:24px;color:#000;font-family:sans-serif}p{color:inherit;line-height:1em;font-weight:300;color:#333}h1,h2,h3,h4,h5,h6{-webkit-font-smoothing:auto;-webkit-font-smoothing:antialiased;-webkit-font-variant-ligatures:common-ligatures;-moz-font-variant-ligatures:common-ligatures;font-variant-ligatures:common-ligatures;text-rendering:optimizeLegibility}.grid{max-width:175px;height:200px;background:#222;margin:0 auto;padding:1em 0;border-radius:3px}.grid .server{display:block;max-width:68%;height:20px;background:rgba(255,255,255,.15);box-shadow:0 0 0 1px #000 inset;margin:10px 0 20px 30px}.grid .server:before{content:"";position:relative;top:7px;left:-18px;display:block;width:6px;height:6px;background:green;border:1px solid #000;border-radius:6px;margin-top:7px}@-webkit-keyframes pulse{0%{background:rgba(255,255,255,.15)}100%{background:#ae1508}}.grid .server:nth-child(3):before{background:rgba(255,255,255,.15);-webkit-animation:pulse .5s infinite alternate}@-webkit-keyframes pulse_three{0%{background:rgba(255,255,255,.15)}100%{background:#d2710a}}.grid .server:nth-child(5):before{background:rgba(255,255,255,.15);-webkit-animation:pulse_three .7s infinite alternate}@-webkit-keyframes pulse_two{0%{background:rgba(255,255,255,.15)}100%{background:#9da506}}.grid .server:nth-child(1):before{background:rgba(255,255,255,.15);-webkit-animation:pulse_two .1s infinite alternate}.grid .server:nth-child(2):before{background:rgba(255,255,255,.15);-webkit-animation:pulse_two .175s infinite alternate}.grid .server:nth-child(4):before{background:rgba(255,255,255,.15);-webkit-animation:pulse_two .1s infinite alternate}@media only screen and (min-device-width:320px) and (max-device-width:480px) and (-webkit-min-device-pixel-ratio:2){html{font-size:12px}}@media only screen and (min-device-width:320px) and (max-device-width:568px) and (-webkit-min-device-pixel-ratio:2){html{font-size:14px}}
</style>
</head>
<body>
<div id="wrapper">
<div class="grid">
<span class="server"></span>
<span class="server"></span>
<span class="server"></span>
<span class="server"></span>
<span class="server"></span>
</div>
<div class="content">
<h1>Currently performing maintenance.</h1>
<p>Oh snap! You got an error!</p>
</div>
</div>
</body>
</html>
