404 Page using HTML & CSS

Introduction

A 404 page, a "404 not found" page, or an "error 404" page is a popular HTTP response code that states the server couldn't find the desired webpage. When a user attempts to look at a webpage that doesn't exist, has been deleted, or is misspelled, a 404 error is sent from the server informing the user the requested resource does not exist.


Source Code:

HTML:

<!DOCTYPE html>
<html>
<head>
  <title>Page not found</title>
</head>
<body>
   <section>
     <div class="image-cont">
      <img src="error_page.jpg" alt="Error Page image">
     </div>
     <div class="text-cont">
      <h2>Page not found</h2>
      <p>Page not found</p>
      <button class="text-cont">Go to Home</button> 
     </div>
   </section>
</body>
</html>

CSS:

.image-cont {
    display : flex;
    align-items : center;
    justify-content : center;
    padding-top : 25px;
}

.image-cont img {
    width : 36%;
}

text-cont h2 {
    text-align : center;
    font-size : 34px;
    padding-top : 15px;
}

text-cont p {
    text-align : center;
    font-size : 20px;
    padding-top : 12px;
}

.home-btn {
    background-color : blue;
    color : white;
    border : 1px solid blue;
    padding : 10px;
    margin-top : 25px;
    margin-left : 45%;
}

.home-btn:hover {
    text-decoration : underline;
}

Output

Output Image