Add contact page

_includes/master/head.html

@@ -8,4 +8,6 @@
 
     <script src="/assets/js/scroll-header.js"></script>
     <script src="https://kit.fontawesome.com/fc093d7fbf.js" crossorigin="anonymous"></script>
+    <link rel="preconnect" href="https://fonts.bunny.net">
+    <link href="https://fonts.bunny.net/css?family=zen-maru-gothic:300,500,900" rel="stylesheet" />
 </head>

_layouts/document.html

@@ -2,7 +2,7 @@
 {% include master/header.html %}
 
 <banner>
-    <img src="/assets/images/Christmas with Friends.png">
+    <img src="/assets/images/Christmas with Friends.png" alt="Christmas with Friend">
 </banner>
 <div class="content">
     <h1 id="for-banner">{{page.title}}</h1>

_layouts/home.html

@@ -11,7 +11,7 @@
             <div>
                 <h1>Welcome!</h1>
                 <p>I am a 3D artist who primarily works with Minecraft-style creations and renders! You can find out more about me on my FAQ page.</p>
-                <a href="mailto:hello@blueanimates.com"><button>Contact Me</button></a>
+                <a href="/contact/"><button>Contact Me</button></a>
             </div>
         </div>
     </section>

_pages/contact.md

@@ -0,0 +1,33 @@
+---
+layout: document
+title: Contact
+permalink: /contact/
+---
+
+
+<script src="https://ucarecdn.com/libs/widget/3.x/uploadcare.full.min.js" type="d021e7f2994a79487a8fe3ce-text/javascript"></script>
+<script src="https://js.hcaptcha.com/1/api.js" async defer></script>
+
+<form action="https://submit-form.com/YK79qXIi">
+        <input
+                type="hidden"
+                name="_redirect"
+                value="https://blueanimates.com/contact/thanks/"
+        />
+  <label for="name">Name</label>
+  <input type="text" id="name" name="name" placeholder="" required="" />
+
+  <label for="email">Email</label>
+  <input type="email" data="email" id="email" name="_email.replyto" placeholder="" required="" />
+
+  <label for="message">Message</label>
+  <textarea
+    id="message"
+    name="message"
+    placeholder=""
+    required=""
+  ></textarea>
+
+  <div class="h-captcha" data-sitekey="d0787008-2fe7-4bcf-84a0-ca5ab6466979" data-theme="dark"></div>
+  <button type="submit">Send</button>
+</form> 

_pages/thanks-4-contacting.md

@@ -0,0 +1,7 @@
+---
+layout: document
+title: Thank You
+permalink: /contact/thanks/
+---
+
+Thank you for contacting me, I'll try to get back to you when I can.

assets/css/master.css

@@ -39,7 +39,7 @@ button:hover {
 
 body {
     background: rgba(225,228,232,1);
-    font-family: arial;
+    font-family: 'Zen Maru Gothic', sans-serif;
     width: 100%;
     max-width: var(--max-width);
     overflow-x: hidden;
@@ -186,6 +186,20 @@ td {
     padding: 10px 0px;
 }
 
+form {
+    display: grid;
+    grid-gap: 6px;
+}
+input, textarea {
+    border: none;
+    padding: 6px 12px;
+    border-radius: 6px;
+}
+textarea {
+    height: 140px;
+    resize: none;
+}
+
 @keyframes banner {
     from {object-position: 0px 0px;}
     to {object-position: 0px -240px;}
@@ -217,4 +231,5 @@ td {
         left: 0px !important;
         width: 100% !important;
     }
-}
+}
+