Frontend: Scuffed layout

web/Frontend/src/app/globals.css

@@ -83,6 +83,7 @@ html,
 body {
   max-width: 100vw;
   overflow-x: hidden;
+  font-family: var(--font-mono);
 }
 
 /* body {

web/Frontend/src/app/layout.tsx

@@ -1,5 +1,5 @@
 import './globals.css'
-import 'bootstrap/dist/css/bootstrap.min.css';
+// import 'bootstrap/dist/css/bootstrap.min.css';
 import { Inter } from 'next/font/google'
 
 const inter = Inter({ subsets: ['latin'] })

web/Frontend/src/app/navbar.css

@@ -0,0 +1,15 @@
+ul.navbar {
+    flex: auto;
+    background-color: black;
+    color: white;
+}
+
+.navbar li {
+    list-style: none;
+}
+
+.navbar li.title {
+    width: fit-content;
+}
+
+

web/Frontend/src/app/page.module.css

@@ -227,3 +227,47 @@
     transform: rotate(0deg);
   }
 }
+
+.container {
+  padding-top: 10vh;
+  display: flex;
+  justify-items: center;
+  flex-direction: row;
+}
+
+.navbar {
+  background-color: aqua;
+  position: fixed;
+  display: inherit;
+  height: 10vh;
+  width: 100%;
+  flex-wrap: wrap;
+}
+
+.navbar a {
+  flex: 1;
+  padding-left:5rem;
+  padding-right:5rem;
+  
+}
+
+.colLeft {
+  justify-items: center;
+  padding-left:5rem;
+  padding-right:5rem;
+  height: 100vh;
+  flex: 1;
+}
+.colCenter {
+  height: 100vh;
+  padding-left:5rem;
+  padding-right:5rem;
+  flex: 3;
+  text-align: justify;
+}
+.colRight {
+  padding-left:5rem;
+  padding-right:5rem;
+  height: 100vh;
+  flex: 1;
+}

web/Frontend/src/app/page.tsx

@@ -1,11 +1,32 @@
 import Image from 'next/image'
 import styles from './page.module.css'
+import nextSvg from '../../public/next.svg'
 import Board from '@/components/board'
 
 export default function Home() {
   return (
-    <main>
-      <Board></Board>
-    </main>
-  )
-}
+    <>
+      <div className={styles.navbar}>
+        <Image src={nextSvg} width={200} height={50} alt={"Zilla"}></Image>
+        <a href="/html/">HTML</a>
+        <a href="/css/">CSS</a>
+        <a href="/js/">JavaScript</a>
+        <a href="/python/">Python</a>
+      </div>
+      <div className={styles.container}>
+        <div className={styles.colLeft}>
+          <h2>Side Content</h2>
+          <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos magnam possimus doloribus ea porro sit placeat, fugiat quae corporis quasi ex, nesciunt laboriosam veniam molestias, quam vitae enim fugit quo.</p>
+        </div>
+        <div className={styles.colCenter}>
+          <h1>Test</h1>
+          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti labore temporibus ullam! Deleniti minus nesciunt adipisci a minima consequatur, consectetur explicabo cum voluptate distinctio magni nostrum officia? Pariatur, cumque assumenda!</p>
+        </div>
+        <div className={styles.colRight}>
+        <h2>Side Info</h2>
+          <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos magnam possimus doloribus ea porro sit placeat, fugiat quae corporis quasi ex, nesciunt laboriosam veniam molestias, quam vitae enim fugit quo.</p>
+        </div>
+      </div>
+    </>
+  );
+}

web/Frontend/src/components/navbar.tsx

@@ -1,6 +1,10 @@
+import '../app/navbar.css'
+import Image from 'next/image';
+
 export default function NavBar() {
     return(
-        <ul>
+        <ul className='navbar'>
+            <li className='title'><Image src='' alt=''/></li>
             <li>Navbar</li>
             <li>Navbar 2</li>
         </ul>