First design is in!

src/components/header.svelte

@@ -0,0 +1,14 @@
+<div class="h-16 align-middle ">
+	<div class="h-full w-1/4 flex flex-row flex-wrap">
+		<img
+			class="h-5/6 ml-20 my-auto"
+			src="https://dutchellie.nl/DutchEllie/proper-website-2/raw/branch/main/web/static/images/icon.png"
+			alt="Icon"
+		/>
+		<div class="pl-5 mt-1 text-slate-200">
+			<h1 class="text-3xl h-min font-medium">Internetica Galactica 2</h1>
+			<p class="h-min text-xs text-slate-400">Surviving the rewriting</p>
+		</div>
+	</div>
+	<hr class="border-slate-700" />
+</div>

src/routes/__layout.svelte

@@ -1,5 +1,17 @@
 <script>
-  import "../app.css";
+	import '../app.css';
+  import Header from '../components/header.svelte'
 </script>
 
-<slot />
+<div class="bg-gradient-to-tr from-[#070F1A] to-[#0D234C] w-screen h-screen">
+  <!-- Header -->
+  <Header/>
+	<slot />
+</div>
+
+<!-- background-image: linear-gradient(to right top, #051937, #1a325b, #304d82, #466aab, #5d88d6); 
+https://mycolor.space/gradient?ori=to+right+top&hex=%23051937&hex2=%235D88D6&sub=1
+-->
+<style>
+@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,300;8..144,400;8..144,500&display=swap');
+</style>

src/routes/index.svelte

@@ -1,6 +1,3 @@
 <svelte:head>
 	<title>Welcome</title>
 </svelte:head>
-<h1>Hello and welcome to my website</h1>
-
-<a href="/about">About my website</a>

tailwind.config.cjs

@@ -1,8 +1,16 @@
+const defaultTheme = require('tailwindcss/defaultTheme')
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ['./src/**/*.{html,js,svelte,ts}'],
   theme: {
-    extend: {},
+    extend: {
+      fontFamily: {
+        sans: ['Roboto Flex', ...defaultTheme.fontFamily.sans],
+      }
+    },
+    container: {
+      center: true,
+    },
   },
   plugins: [],
-}
+}