index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/app.css">
  <link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@200&family=Mea+Culpa&display=swap"
    rel="stylesheet">
  <title>404 not found</title>
</head>

<body>
  <div class="container">
    <header>
      <h1 class="link-header">404 not found</h1>
    </header>
    <main class="hero-section">
      <img src="Images/Scarecrow.png" alt="Your page is not found" class="hero-img">
      <div class="hero-content">
        <h1 class="hero-heading">I have bad news for you</h1>
        <p class="hero-text">The page you are looking for might be removes or is temporarliy unavailable
        </p>
        <a href="#" class="hero-button">Back To Homepage</a>
      </div>
    </main>
    <footer>Created with ❤ by <a href="https://devchallenges.io/portfolio/vivaramsey" target="_blank">Rahmetu
        Mohammed</a> -
      devchallanges.io
    </footer>
  </div>
</body>

</html>