From 2c725fcc4f29df10af64af48a65911ba2d16c052 Mon Sep 17 00:00:00 2001
From: Korbs <ks@korbsstudio.com>
Date: Thu, 8 Sep 2022 00:54:47 -0400
Subject: [PATCH] Add contact page

---
 _includes/master/head.html    |  2 ++
 _layouts/document.html        |  2 +-
 _layouts/home.html            |  2 +-
 _pages/contact.md             | 33 +++++++++++++++++++++++++++++++++
 _pages/thanks-4-contacting.md |  7 +++++++
 assets/css/master.css         | 19 +++++++++++++++++--
 6 files changed, 61 insertions(+), 4 deletions(-)
 create mode 100644 _pages/contact.md
 create mode 100644 _pages/thanks-4-contacting.md

diff --git a/_includes/master/head.html b/_includes/master/head.html
index ce2f660..0240efa 100644
--- a/_includes/master/head.html
+++ b/_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>
diff --git a/_layouts/document.html b/_layouts/document.html
index 6333600..23f4009 100644
--- a/_layouts/document.html
+++ b/_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>
diff --git a/_layouts/home.html b/_layouts/home.html
index d988ac7..7632ec9 100644
--- a/_layouts/home.html
+++ b/_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>
diff --git a/_pages/contact.md b/_pages/contact.md
new file mode 100644
index 0000000..c4211e6
--- /dev/null
+++ b/_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> 
\ No newline at end of file
diff --git a/_pages/thanks-4-contacting.md b/_pages/thanks-4-contacting.md
new file mode 100644
index 0000000..19352fe
--- /dev/null
+++ b/_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.
\ No newline at end of file
diff --git a/assets/css/master.css b/assets/css/master.css
index 4c38d89..be300ed 100644
--- a/assets/css/master.css
+++ b/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;
     }
-}
\ No newline at end of file
+}
+