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