Contact form.

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>

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;
+}