Amazing 404 error page with html and css

Posted on October 23rd, 2019

This is an amazing 404 error page created by Darkcode with html and css. Just click on the button Run Pen below to see how it works:

How to create an amazing 404 error page

Step 1: Add Html

<div class="container">
  <h2>Oops! Page not found.</h2>
  <p>We can't find the page you're looking for.</p>
  <a href="#">Go back home</a>

Step 2: Add CSS

body {
  margin: 0;
  padding: 0;
  font-family: 'montserrat', sans-serif;
  min-height: 100vh;
  background-image: linear-gradient(125deg, #6a89cc, #b8e994);

.container {
  width: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  color: #343434;

.container h1 {
  font-size: 160px;
  margin: 0;
  font-weight: 900;
  letter-spacing: 20px;
  background: url(
    center no-repeat;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;

.container a {
  text-decoration: none;
  background: #e55039aa;
  color: #fff;
  padding: 12px 24px;
  display: inline-block;
  border-radius: 25px;
  font-size: 14px;
  text-transform: uppercase;
  transition: 0.4s;

.container a:hover {
  background: #e55039;