Board positions

Author: winnet101

.replit

@@ -0,0 +1,13 @@
+modules = ["nodejs-20", "web"]
+run = "npm run dev"
+
+[nix]
+channel = "stable-24_05"
+
+[deployment]
+run = ["sh", "-c", "npm run dev"]
+
+[[ports]]
+localPort = 5173
+externalPort = 8000
+exposeLocalhost = true

src/App.svelte

@@ -4,6 +4,7 @@
   import { hash } from "./stores";
   import NotFound from "./lib/NotFound.svelte";
   import Home from "./lib/Home.svelte";
+  import Board from "./lib/Board.svelte";
 
   onMount(() => {
     console.log("Page mounted!")
@@ -24,7 +25,9 @@
 <Header />
 
 {#if $hash == ""}
-<Home />
+  <Home />
+{:else if $hash == "#board"}
+  <Board />
 {:else}
-<NotFound />
+  <NotFound />
 {/if}

src/lib/Board.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import BoardCard from "./BoardCard.svelte";
+
+  
+</script>
+
+<div>
+  <BoardCard 
+    name="John Doe"
+    grade=9
+    desc="lorem ipsum dolor amit something idk the rest"
+    />
+
+</div>

src/lib/BoardCard.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  export let name: string;
+  export let grade: number;
+  export let desc: string;
+</script>
+
+<div class="card">
+  <div class="img-container">
+    <img height=200 class="img">
+    <div class="grade">{grade}</div>
+  </div>
+  <div class="heading">{name}</div> 
+  <div>{desc}</div>
+</div>
+
+<style>
+  .card {
+    display: flex;
+    flex-direction: column;
+    border: solid white 2px;
+    border-radius: 10px;
+    width: 220px;
+    height: 300px;
+    padding: 10px;
+    margin: 10px
+  }
+  
+  .heading {
+    width: max-content;
+    display: inline;
+    font-weight: bold;
+    font-size: 1.5em;
+  }
+
+  .img-container {
+    position: relative;
+    border: b
+  }
+
+  .img {
+    background: white;
+  }
+
+  .grade {
+    background-color: green;
+    width: 40px;
+    height: 35px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 5px;
+    position: absolute;
+    right: 10px;
+    bottom: 10px;
+  }
+  
+</style>

src/lib/Header.svelte

@@ -1,8 +1,6 @@
 <menu>
   <a href="./#">Home</a>
-  <a href="./#about-us">About Us</a>
-  <a href="./#resources">Resources</a>
-  <a href="./#contact-us">Contact us!</a>
+  <a href="./#board">Board</a>
 </menu>
 
 <style>
@@ -17,9 +15,8 @@
   a {
     color: inherit;
     text-decoration: none;
-    width: max-content;
-    padding: 10px;
-    width: 25%;
+    /* width: max-content;*/
+    padding: 10px; 
 
     display: grid;
     justify-items: center;

src/lib/Home.svelte

@@ -4,15 +4,8 @@
 </script>
 
 <main>
-  <div class="overlay-container">
-    <div class="img-container">
-      <img src={scifi_back} alt="Sci-fi background." width={1000}/>
-    </div>
-    <div class="overlay">
-      For the 
-        <div class="fancy">Sci-fi</div>
-      authors.
-    </div>
+  <div>
+    
   </div>
 
 </main>