public/404.html

<!DOCTYPE html>
<html>
<head>
  <title>The page you were looking for doesn't exist (404)</title>
  <style type="text/css">
    body {
      background-color: #fff;
      color: #666;
      font-family: arial, sans-serif;

    }
    div.dialog {
      width: 600px;
      margin: auto;
    }
    @media only screen
      and (min-width: 320px)
      and (max-width: 568px) {
        div.dialog, div.dialog img {
          width: 95%;
        }
    }
    div.dialog h1 {
      font-size: 1.8em;
    }
  </style>
</head>

<body>
  <!-- This file lives in public/404.html -->
  <div class="dialog">
    <a href="/" ><img src="/500.jpg" /></a>
    <h1>Oops! Page not found.</h1>
    <b>Please try again</b>
    <p>This might be a temporary problem. Please click the back button to return to the previous screen or go back to <a class="go_home" href="/">Home</a> and try again.</p>
    <b>Contact support</b>
    <p>If the problem persists or is urgent, please tell us about it. Find our contact details from the global <a href="https://openfoodnetwork.org/ofn-local/" target="blank">Open Food Network Local page</a>.</p>
    <p>It really helps us if you can give as much detail as possible about what the missing page is about.</p>
  </div>
</body>
</html>