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
---
}>
-
Hello
+
+ Contact
+ Please use the following form to contact Jesse Brault directly.
+
+
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;
+}