.vscode/settings.json

@@ -0,0 +1,15 @@
+{
+    "spellright.language": [
+        "en"
+    ],
+    "spellright.documentTypes": [
+        "markdown",
+        "latex",
+        "plaintext"
+    ],
+    "spellright.parserByClass": {
+        "svelte": {
+            "parser": "plain"
+        }
+    }
+}

src/Card.svelte

@@ -31,11 +31,14 @@
         align-items: center;
         justify-content: space-between;
         margin-bottom: 0em;
+        width: 100%;
     }
 
     .card .card-content :global(div) {
-        margin: 2em 0em;
+        display: flex;
-        max-width: 85%;
+        align-items: center;
+        justify-content: space-between;
+        max-width: 100%;
     }
 
     .card .card-footer :global(div){
@@ -49,16 +52,14 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="card" on:click={onClick}>
-    <div>
+    <div class="card-header">
-        <div class="card-header">
+        <slot name="header"></slot>
-            <slot name="header"></slot>
-        </div>
-        <hr />
-        <div class="card-content">
-            <slot name="content"></slot>
-        </div>
     </div>
-
+    <hr />
+    <div class="card-content">
+        <slot name="content"></slot>
+    </div>
+    <hr class="not-required"/>
     <div class="card-footer">
         <slot name="footer"></slot>
     </div>

src/routes/contact/+page.svelte

@@ -1,12 +1,61 @@
 <script lang="ts">
+    import Card from '../../Card.svelte';
 </script>
 
+<style>
+    form {
+        display: flex;
+        flex: 2 1 20%;
+        align-items: center;
+        margin: 1em;
+        gap: 1em 3em;
+    }
+    
+    input, textarea {
+        padding: 1em;
+        background-color: var(--bg-grad);
+        border: 0; 
+        outline: 0;
+        border-radius: 8px;
+        resize: none;
+        min-width: 100%;
+        transition: all 0.2s;
+    
+        &:focus, &:hover{
+            box-shadow: .2em .2em .2em var(--red);
+        }
+    }
 
+    textarea {
+        min-height: 10em;
+    }
 
-<h1>Contact</h1>
+  .container {
+    display: flex;
+    flex-direction: column;
+    gap: 1em 1em;
+    width: 100%;
+  }
+</style>
 
-<div class="main-card">
+<Card>
-    <form>
+    <div slot="header">
-        test
+        <h2>Contact</h2>
-    </form>
+    </div>
-</div>
+    <div slot="content">
+        <form>
+            <div class="container">
+                <input type="text" id="input-name" placeholder="Name">
+                <input type="email" id="input-email" placeholder="Email address">
+                <input type="text" id="input-subject" placeholder="Subject">
+            </div>
+            <div class="container">
+                <textarea name="message" id="input-message" placeholder="Message"></textarea>
+            </div> 
+        </form>
+    </div>
+    <div slot="footer">
+        <a href="/Luke Else - CV.pdf" target="_blank" rel="noopener noreferrer">Curriculum Vitae</a>
+        <a href="mailto:contact@luke-else.co.uk">E-Mail</a>
+    </div>
+</Card>