From ecc3b58e50e396b5bc54fc0a2af35961179cdf53 Mon Sep 17 00:00:00 2001
From: JesseBrault0709 <62299747+JesseBrault0709@users.noreply.github.com>
Date: Thu, 6 Jun 2024 07:43:09 +0200
Subject: [PATCH] Contact form.

---
 .../site/contact/ContactPageTemplate.wvc      | 30 +++++++++++-
 static/main.css                               | 48 +++++++++++++++++++
 2 files changed, 77 insertions(+), 1 deletion(-)

diff --git a/pages/resources/com/jessebrault/site/contact/ContactPageTemplate.wvc b/pages/resources/com/jessebrault/site/contact/ContactPageTemplate.wvc
index d87ab15..84ad644 100644
--- a/pages/resources/com/jessebrault/site/contact/ContactPageTemplate.wvc
+++ b/pages/resources/com/jessebrault/site/contact/ContactPageTemplate.wvc
@@ -4,5 +4,33 @@ package com.jessebrault.site.contact
 import com.jessebrault.site.StandardPage
 ---
 <StandardPage title={title} banner={<ContactBanner />}>
-    <p>Hello</p>
+    <article class="contact">
+        <h1>Contact</h1>
+        <p>Please use the following form to contact Jesse Brault directly.</p>
+        <form class="contact">
+            <div class="control">
+                <label for="name">Name</label>
+                <input id="name" name="name" type="text" />
+            </div>
+
+            <div class="control">
+                <label for="institution">Institution</label>
+                <input id="institution" name="institution" type="text" />
+            </div>
+
+            <div class="control">
+                <label for="email">Email</label>
+                <input id="email" name="email" type="email" />
+            </div>
+
+            <div class="control">
+                <label for="message">Message</label>
+                <textarea id="message" name="message"></textarea>
+            </div>
+
+            <div class="control">
+                <input type="submit" />
+            </div>
+        </form>
+    </article>
 </StandardPage>
diff --git a/static/main.css b/static/main.css
index dcdcae8..3d8da14 100644
--- a/static/main.css
+++ b/static/main.css
@@ -204,3 +204,51 @@ footer svg:hover {
     font-size: 27px;
     justify-self: stretch;
 }
+
+article.contact {
+    min-width: 500px;
+    max-width: 50%;
+    padding: 50px;
+}
+
+form.contact {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    row-gap: 15px;
+}
+
+.contact .control {
+    display: flex;
+    flex-direction: column;
+    row-gap: 10px;
+}
+
+.contact .control * {
+    width: 100%;
+}
+
+.contact .control input,
+.contact .control textarea {
+    min-height: 40px;
+    font-family: var(--garamond);
+    font-size: 18px;
+    padding: 5px;
+    border: 1px solid var(--charcoal);
+    border-radius: 3px;
+}
+
+.contact .control textarea {
+    min-height: 160px;
+}
+
+.contact .control input[type='submit'] {
+    background-color: var(--petrol);
+    color: var(--off-white);
+    height: 60px;
+}
+
+.contact .control input[type='submit']:hover {
+    background-color: rgba(from var(--petrol) r g b / 0.5);
+    cursor: pointer;
+}