diff --git a/de_som_forsvinner_i_taaken/html/frontpage.png b/de_som_forsvinner_i_taaken/html/frontpage.png
new file mode 100644
index 0000000..9866888
Binary files /dev/null and b/de_som_forsvinner_i_taaken/html/frontpage.png differ
diff --git a/de_som_forsvinner_i_taaken/html/index.html b/de_som_forsvinner_i_taaken/html/index.html
new file mode 100644
index 0000000..7a6b7e5
--- /dev/null
+++ b/de_som_forsvinner_i_taaken/html/index.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html lang="no" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>De som forsvinner i tåken – Jonas Daarke</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = { darkMode: 'class' };
+    </script>
+</head>
+<body class="bg-gray-100 text-gray-900 dark:bg-gray-900 dark:text-gray-100 transition-colors">
+    <header class="bg-white dark:bg-gray-800 shadow">
+        <div class="max-w-5xl mx-auto px-6 py-4 flex justify-between items-center">
+            <h1 class="text-2xl font-bold">Jonas Daarke</h1>
+            <nav class="flex items-center space-x-4 text-gray-700 dark:text-gray-200">
+                <a href="#boken" class="hover:underline">Boken</a>
+                <a href="#om-forfatteren" class="hover:underline">Om forfatteren</a>
+                <button id="themeToggle" aria-pressed="true" class="ml-4 inline-flex items-center px-3 py-1 rounded-full border border-gray-400 dark:border-gray-500 bg-transparent text-gray-700 hover:bg-gray-200 dark:text-gray-200 dark:hover:bg-gray-700 transition">
+                    <span aria-hidden="true" id="themeIcon">☀︎</span>
+                    <span class="sr-only">Veksle lys/mørk modus</span>
+                </button>
+            </nav>
+        </div>
+    </header>
+
+    <section id="boken" class="max-w-5xl mx-auto px-6 py-16 grid md:grid-cols-2 gap-10 items-center">
+        <div>
+            <img src="/frontpage.png" alt="Bokforside" class="rounded shadow-lg">
+        </div>
+        <div>
+            <h2 class="text-3xl font-bold mb-4">De som forsvinner i tåken</h2>
+            <p class="text-lg text-gray-700 dark:text-gray-300 mb-6">
+                En nervepirrende fortelling om tap, hemmeligheter og det uunngåelige.
+                Når tåken legger seg over den lille kystbyen, begynner folk å forsvinne –
+                én etter én. Jonas Daarkes debutroman drar deg inn i en verden der grenser
+                mellom virkelighet og myte viskes ut.
+            </p>
+            <form class="flex flex-col sm:flex-row gap-4">
+                <input type="email" placeholder="Din e-postadresse" class="flex-1 px-4 py-3 rounded-lg border border-gray-400 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
+                <button type="submit" class="px-6 py-3 rounded-lg border border-gray-400 dark:border-gray-600 bg-transparent text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition">
+                    Meld meg på
+                </button>
+            </form>
+            <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Få nyheter om lanseringen rett i innboksen din.</p>
+        </div>
+    </section>
+
+    <section id="om-forfatteren" class="bg-gray-50 dark:bg-gray-800 py-16">
+        <div class="max-w-4xl mx-auto px-6 text-center">
+            <h2 class="text-2xl font-bold mb-4">Om forfatteren</h2>
+            <p class="text-gray-700 dark:text-gray-300 leading-relaxed">
+                Jonas Daarke har alltid vært fascinert av grenselandet mellom det virkelige og det uvirkelige.
+                Med bakgrunn i både journalistikk og litteratur, bringer han en unik blanding av skarp observasjon
+                og poetisk stemning inn i sin debutroman. "De som forsvinner i tåken" er hans første utgivelse,
+                men neppe den siste.
+            </p>
+        </div>
+    </section>
+
+    <footer class="bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 py-6 text-center text-gray-500 dark:text-gray-400 text-sm">
+        &copy; 2025 Jonas Daarke. Alle rettigheter reservert.
+    </footer>
+
+    <script>
+        const html = document.documentElement;
+        const toggle = document.getElementById('themeToggle');
+        const icon = document.getElementById('themeIcon');
+
+        function applyTheme(mode){
+            if(mode === 'dark') {
+                html.classList.add('dark');
+                toggle.setAttribute('aria-pressed', 'true');
+                icon.textContent = '☀︎';
+                localStorage.setItem('theme', 'dark');
+            } else {
+                html.classList.remove('dark');
+                toggle.setAttribute('aria-pressed', 'false');
+                icon.textContent = '☾';
+                localStorage.setItem('theme', 'light');
+            }
+        }
+
+        (function init(){
+            const stored = localStorage.getItem('theme');
+            if(stored === 'light' || stored === 'dark') {
+                applyTheme(stored);
+            } else {
+                const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+                applyTheme(prefersDark ? 'dark' : 'light');
+            }
+        })();
+
+        toggle.addEventListener('click', () => {
+            const isDark = html.classList.contains('dark');
+            applyTheme(isDark ? 'light' : 'dark');
+        });
+    </script>
+</body>
+</html>
