jessebrault/jb-ssg-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Contact form.

Browse Source
This commit is contained in:
JesseBrault0709 2024-06-06 07:43:09 +02:00
parent 7746112afe
commit ecc3b58e50
2 changed files with 77 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
pages/resources/com/jessebrault/site/contact/ContactPageTemplate.wvc
View File

@ -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>

48
static/main.css
View File

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