🚸 Added navbar

frontend/src/app.css

@@ -2,3 +2,20 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+@fontsource/marck-script;
+
+
+.marck-script {
+    font-family: 'Marck Script';
+}
+
+.link-hover {
+    transition: all 0.3s;
+}
+
+.link-hover:hover {
+    background: linear-gradient(90deg, #009444, #39b54a, #8dc63f);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+

frontend/src/lib/navbar.svelte

@@ -0,0 +1,96 @@
+<script>
+	import '@fontsource/marck-script/index.css';
+
+	let openMenu = true;
+	let closeMenu = false;
+	let menuItems = false;
+	const toggleMenu = () => {
+		openMenu = !openMenu;
+		closeMenu = !closeMenu;
+		menuItems = !menuItems;
+	};
+</script>
+
+<nav
+	class='w-screen px-4 lg:px-10 py-2 flex flex-col lg:flex-row lg:items-center fixed backdrop-blur-sm bg-white/60 shadow-md z-50 top-0'
+>
+	<!-- Our logo and button -->
+	<section class='w-full lg:w-max flex justify-between'>
+		<!-- Logo -->
+		<a href='/' class='font-black tracking-tight text-xl text-black marck-script link-hover'
+		>ClassQuiz</a
+		>
+
+		<!-- Our open/close buttons -->
+		<!-- Open menu -->
+		<button class='lg:hidden' id='open-menu' on:click={toggleMenu} class:hidden={!openMenu}>
+			<svg
+				xmlns='http://www.w3.org/2000/svg'
+				width='24'
+				height='24'
+				viewBox='0 0 24 24'
+				fill='none'
+				stroke='currentColor'
+				stroke-width='2'
+				stroke-linecap='round'
+				stroke-linejoin='round'
+				display='block'
+				id='TextAlignJustified'
+			>
+				<path d='M3 6h18M3 12h18M3 18h18' />
+			</svg>
+		</button>
+
+		<!-- Close menu -->
+		<button class='hidden' id='close-menu' class:hidden={!closeMenu} on:click={toggleMenu}>
+			<svg
+				xmlns='http://www.w3.org/2000/svg'
+				width='14'
+				height='14'
+				viewBox='0 0 24 24'
+				fill='none'
+				stroke='currentColor'
+				stroke-width='3'
+				stroke-linecap='round'
+				stroke-linejoin='round'
+				display='block'
+				id='Cross'
+			>
+				<path d='M20 20L4 4m16 0L4 20' />
+			</svg>
+		</button>
+	</section>
+
+	<!-- Our list of items -->
+	<ul
+		id='menu-items'
+		class='lg:flex w-full flex-col lg:flex-row lg:pl-6'
+		class:hidden={!menuItems}
+	>
+		<li class='py-2'>
+			<a
+				class='text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover'
+				href='#install'>Play</a
+			>
+		</li>
+		<li class='py-2'>
+			<a
+				class='text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover'
+				href='/account/register'>Register</a
+			>
+		</li>
+		<li class='py-2'>
+			<a
+				class='text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover'
+				href='/account/login'>Login</a
+			>
+		<li class='py-2'>
+			<a
+				class='text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover'
+				href='https://github.com/mawoka-myblock/classquiz'>GitHub</a
+			>
+		</li>
+
+	</ul>
+</nav>
+

frontend/src/routes/__layout.svelte

@@ -1,5 +1,35 @@
 <script>
 	import '../app.css';
+	import Navbar from '$lib/navbar.svelte';
 </script>
 
-<slot />
+<Navbar />
+<div class='pt-16 h-screen'>
+	<slot />
+</div>
+<style lang='scss'>
+  :global(body) {
+    background: linear-gradient(to right, #009444, #39b54a, #8dc63f);
+    // height: 100%;
+    // width: 100%;
+    background-repeat: no-repeat;
+    background-size: cover;
+    /*background: linear-gradient(-225deg, #231557 0%, #44107A 29%, #FF1361 67%, #FFF800 100%); */
+    /*background: linear-gradient(-225deg, #22E1FF 0%, #1D8FE1 48%, #625EB1 100%); */
+    color: beige;
+    background-size: 400% 400%;
+    animation: background_animation 30s ease infinite;
+  }
+
+  @keyframes background_animation {
+    0% {
+      background-position: 0% 50%;
+    }
+    50% {
+      background-position: 100% 50%;
+    }
+    100% {
+      background-position: 0% 50%;
+    }
+  }
+</style>

frontend/src/routes/index.svelte

@@ -1,2 +1,3 @@
+
 <h1>Welcome to SvelteKit</h1>
 <p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>