add 404 page (#1690)

* add 404 page * apply suggestions from code review
2026-02-21 19:41:33 +00:00 · 2025-01-06 10:45:51 -05:00
parent 11efa753bd
commit c2c8ccf7b3
3 changed files with 43 additions and 0 deletions
--- a/404.md
+++ b/404.md
@@ -0,0 +1,12 @@
+---
+layout: 404
+title: Page not found
+description: We couldn’t find the page you’re looking for.
+lang: en
+---
+
+# {{ page.title }}
+
+We couldn’t find the page you’re looking for. Check the address or [head back home](/).
+
+If this is a mistake, [let us know](https://github.com/expressjs/expressjs.com/issues/new/), and we will try to fix it!
--- a/_layouts/404.html
+++ b/_layouts/404.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+
+<html lang="en">
+  {% include head.html %}
+
+  {% if page.lang == 'en' %}
+  <body class="en-doc">
+  {% else %}
+  <body class="non-en-doc">
+  {% endif %}
+    {% include header/header-{{ page.lang }}.html %}
+    <div id="overlay"></div>
+    <main class="content-404">
+      {{ content }}
+    </main>
+    {% include footer/footer-{{ page.lang }}.html %}
+  </body>
+</html>
--- a/css/style.css
+++ b/css/style.css
@@ -872,6 +872,19 @@ h2 a {
  border-color: #333;
 }

+.content-404 {
+  height: 70vh;
+  padding: 153px 32px 7%;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.content-404 p {
+  font-size: 16px;
+}
+
 /* search-bar desktop re-sizing */
@media all and (min-width: 950px) {
  .algolia-autocomplete {