initial commit (long overdue)

17th Website/src/components/cards/Alert.vue

@@ -0,0 +1,53 @@
+<script setup>
+import { Icon } from '@iconify/vue'
+</script>
+
+<script>
+export const Alert = {
+    name: 'Alert',
+    props: {
+        icon: String,
+        title: String,
+        message: String
+    }
+}
+</script>
+
+<template>
+    <div class="alert">
+        <div class="alertHead">
+            <p>
+                <Icon icon="carbon:warning" />
+            </p>
+            <h2>{{title}}</h2>
+        </div>
+        <p>{{message}}</p>
+    </div>
+</template>
+
+<style>
+.alert {
+    background-color: #e0c422;
+    color: var(--background-secorndary);
+    display: flex;
+    flex-direction: column;
+    max-width: 800px;
+    margin: 20px auto;
+}
+
+.alertHead {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.alertHead p {
+    display: flex;
+    font-size: 35px;
+    margin: 10px;
+}
+
+.alertHead h2 {
+    display: flex;
+}
+</style>

17th Website/src/components/cards/Card.vue

@@ -0,0 +1,18 @@
+<template>
+    <div class="card">
+
+    </div>
+</template>
+
+
+<style>
+.card {
+    background-color: #ffffff;
+    color: var(--white);
+    padding: 0 10px;
+    margin: 10px;
+    border-radius: 10px;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    height: fit-content;
+}
+</style>