From 9ef1fb36716e6f820a0a7d31513baf9b2fba52bb Mon Sep 17 00:00:00 2001 From: juju2143 <juju2143@gmail.com> Date: Mon, 6 Nov 2023 00:21:08 -0500 Subject: [PATCH] Add contact form --- contact.html | 40 ++++++++++++++++++++++++++++++++++++++++ index.html | 2 +- styles.css | 37 ++++++++++++++++++++++++++++++++++++- thanks.html | 23 +++++++++++++++++++++++ 4 files changed, 100 insertions(+), 2 deletions(-) create mode 100644 contact.html create mode 100644 thanks.html diff --git a/contact.html b/contact.html new file mode 100644 index 0000000..d002851 --- /dev/null +++ b/contact.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="preconnect" href="https://fonts.googleapis.com"> + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> + <link href="https://fonts.googleapis.com/css2?family=Rampart+One&family=Shantell+Sans:wght@400;600&display=swap" rel="stylesheet"> + <link rel="stylesheet" href="styles.css"> + <link rel="me" href="https://im-in.space/@Yuki"> + <title>contact - Yuki's website</title> +</head> +<body> + <main> + <h1>Contact</h1> + <form action="/thanks.html" name="contact" method="POST" netlify netlify-honeypot="bot"> + <p> + <label for="name">Name</label> + <br/><input type="text" name="name" /> + </p> + <p> + <label for="email">Email</label> + <br/><input type="email" name="email" /> + </p> + <p> + <label for="message">Message</label> + <br/><textarea name="message" rows="6"></textarea> + </p> + <p title="Which means, don't type anything here"> + <label for="bot">If you're a bot, type something here</label> + <br/><input type="text" name="bot" /> + </p> + <p class="center"> + <button type="submit">Submit</button> + </p> + </form> + <a href=".">go back</a> + </main> +</body> +</html> \ No newline at end of file diff --git a/index.html b/index.html index b7444f6..642ecf5 100644 --- a/index.html +++ b/index.html @@ -28,7 +28,7 @@ <li><a rel="me" href="https://im-in.space/@Yuki" title="My main social media account. I don't really use any other social media aside from this one.">fediverse</a></li> <li><a href="https://patreon.com/a39" title="Shut up and throw me money. Might send devlogs and exclusivities on my work in exchange.">patreon</a></li> <li><a href="https://git.a39.ca/yuki" title="A repository of code I wrote. May contain sources for the above websites.">source code</a></li> - <li><a href="mailto:yuki@a39.ca" title="If you ever need to send me email, but that's probably a last resort, I guess.">mailto</a></li> + <li><a href="contact.html" title="If you ever need to send me email, but that's probably a last resort, I guess.">contact</a></li> </ul> <footer> avatar by sutemo diff --git a/styles.css b/styles.css index 50ff58d..ec1b7df 100644 --- a/styles.css +++ b/styles.css @@ -107,10 +107,11 @@ li transition: 0.2s; } -li:hover +li:hover, button:hover, input:focus, textarea:focus { transform: translate(4px, 4px); box-shadow: 2px 2px black; + outline: none; } li a, li a:visited @@ -123,6 +124,40 @@ li a, li a:visited padding: 0.5em 0; } +form +{ + text-align: left; +} + +input, button, textarea +{ + width: calc(100% - 8px); + font-family: 'Shantell Sans', cursive; + background-color: blueviolet; + color: white; + border: none; + border-radius: 8px; + box-shadow: 6px 6px black; + padding: 4px; + transition: 0.2s; +} + +button +{ + width: inherit; + padding: 4px 4em; +} + +textarea +{ + resize: vertical; +} + +.center +{ + text-align: center; +} + @media screen and (max-width: 992px) { main { diff --git a/thanks.html b/thanks.html new file mode 100644 index 0000000..253a3ed --- /dev/null +++ b/thanks.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="preconnect" href="https://fonts.googleapis.com"> + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> + <link href="https://fonts.googleapis.com/css2?family=Rampart+One&family=Shantell+Sans:wght@400;600&display=swap" rel="stylesheet"> + <link rel="stylesheet" href="styles.css"> + <link rel="me" href="https://im-in.space/@Yuki"> + <title>contact - Yuki's website</title> +</head> +<body> + <main> + <p> + thanks for your hopefully kind message :) + </p> + <p> + <a href=".">go back</a> + </p> + </main> +</body> +</html> \ No newline at end of file