add contact form

_includes/contact-form.html

@@ -0,0 +1,13 @@
+<form action="https://api.web3forms.com/submit" method="POST">
+  <input type="hidden" name="access_key" value="3fa86061-242a-4673-980c-2e7ad77df0e6">
+  <input type="hidden" name="redirect" value="https://bearden.io/contact/received">
+  <input type="checkbox" name="botcheck" class="hidden"><!-- honeypot -->
+
+  <input type="text" name="name" placeholder="Name" required>
+  <input type="email" name="email" placeholder="Email" required>
+  <textarea name="message" placeholder="Message" required></textarea>
+
+  <!--<div class="h-captcha" data-captcha="true"></div>-->
+  <button type="submit">Send</button>
+</form>
+<!--<script src="https://web3forms.com/client/script.js" async defer></script>-->

_pages/contact/index.html

@@ -0,0 +1,7 @@
+---
+title: Contact
+description: Get In Touch
+in-nav: true
+---
+
+{% include contact-form.html %}

_pages/contact/received/index.md

@@ -0,0 +1,7 @@
+---
+title: Contact
+description: Received
+sitemap: false
+---
+
+I will be in touch as soon as possible.

_pages/markdown-test/index.md

@@ -178,3 +178,5 @@ Reprehenderit non eu quis in ad elit esse qui aute id [incididunt](#inline) dolo
 <p class="text-silver">Silver text</p>
 <p class="text-gray">Gray text</p>
 <p class="text-black">Black text</p>
+
+{% include contact-form.html %}

assets/css/main.scss

@@ -195,6 +195,41 @@ blockquote {
   text-align: center;
 }
 
+.hidden {
+  display: none;
+}
+
+form {
+  text-align: right;
+}
+input, textarea {
+  background: transparent;
+  color: #555;
+  display: block;
+  width: 100%;
+  margin: 16px 0px;
+  padding: 8px;
+  background: transparent;
+  border: 1px solid #aaa;
+  border-radius: 4px;
+}
+textarea {
+  min-height: 100px;
+}
+button {
+  padding: 8px 12px;
+  color: #f5f5f5;
+  background-color: #0074d9;
+  transition: background-color .2s linear;
+  border: 1px solid #0074d9;
+  border-radius: 4px;
+  cursor: pointer;
+
+  &:hover {
+    background-color: darken(#0074d9, 6%);
+  }
+}
+
 .text-navy    { color: #001f3f; }
 .text-blue    { color: #0074d9; }
 .text-aqua    { color: #7fdbff; }
@@ -272,6 +307,11 @@ blockquote {
     border-color: #212121;
   }
 
+  input, textarea {
+    color: #f5f5f5;
+    border: 1px solid #555;
+  }
+
   @import 'lib/syntax-native';
 }