diff --git a/html/footer.html b/html/footer.html
new file mode 100644
index 0000000..3b2d11f
--- /dev/null
+++ b/html/footer.html
@@ -0,0 +1,19 @@
+<!-- Start footer.html -->
+</article>
+
+<div class="footer">
+    <p>Ce log est à prix libre : si vous avez aimé un de mes textes, vous pouvez
+        me <a href="https://ko-fi.com/oniricorpe">laisser un pourboire</a> ou
+        m'envoyer un message de remerciement, merci ! ^w^
+    </p>
+    <p>Cette page est consultable via <a href="//gemini.circumlunar.space/">Gemini</a> à la même adresse.</p>
+    <p>Fabriquation artisanale avec <a href="//gemini.circumlunar.space/">Genlog</a> et pas mal de dysfonction
+        exécutive.</p>
+    <!-- Generated on GEN_DATE with Genlog https://codeberg.org/OniriCorpe/genlog -->
+</div>
+
+</div>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/html/header.html b/html/header.html
new file mode 100644
index 0000000..e83f68e
--- /dev/null
+++ b/html/header.html
@@ -0,0 +1,102 @@
+<!doctype html>
+<html lang="fr">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name=viewport content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=yes">
+    <meta name="robots" content="nosnippet">
+
+    <!-- this website uses watercss: https://watercss.kognise.dev/ -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
+
+    <style>
+        a {
+            color: var(--text-main);
+        }
+
+        a:hover {
+            text-decoration: none;
+            color: #9d9d9d;
+        }
+
+        article a::before {
+            content: "➤ ";
+        }
+
+        a[href^="//"]::before,
+        a[href^="//"]:hover {
+            color: #9211ce;
+        }
+
+        a[href^="http"]::before,
+        a[href^="http"]:hover {
+            color: #006eff;
+        }
+
+
+        a[href^="gemini"]::before,
+        a[href^="gemini"]:hover {
+            color: #ff5e00;
+        }
+
+        p {
+            margin: 1em;
+        }
+
+        a::before,
+        h1::before,
+        h2::before,
+        h3::before,
+        blockquote::before,
+        .footer {
+            color: #9d9d9d;
+        }
+
+        h1::before {
+            content: "# ";
+        }
+
+        h2::before {
+            content: "## ";
+        }
+
+        h3::before {
+            content: "### ";
+        }
+
+        blockquote::before {
+            content: "> ";
+        }
+
+        blockquote {
+            margin: 0 1em;
+            padding: .5em .5em;
+            border-left: .2em solid #505050;
+        }
+
+        pre {
+            display: block;
+            border-left: dotted #505050;
+            white-space: pre-wrap;
+            word-break: keep-all;
+            margin: 0 1em;
+            padding-left: .7em;
+        }
+
+        .footer {
+            padding: 2em 2em 0;
+            text-align: center;
+        }
+    </style>
+
+    <title>
+        <!-- TITLE -->
+    </title>
+
+</head>
+
+<body>
+
+    <div class="container">
+        <article>
+            <!-- End header.html -->
\ No newline at end of file
