Add contact.md

source/_partials/contact/form.html.twig

@@ -0,0 +1,29 @@
+<div class="md:max-w-md md:mx-auto">
+    <form netlify name="contact" method="POST">
+        <div class="flex overflow-hidden -mx-1 mb-2">
+            <div class="md:w-1/2 px-1 flex flex-col justify-between">
+                <div>
+                    <label for="name" class="hidden">Name</label>
+                    <input type="text" id="name" name="name" required class="border border-grey-dark w-full p-1" placeholder="Name">
+                </div>
+
+                <div>
+                    <label for="email" class="hidden">Email</label>
+                    <input type="email" id="email" name="email" required class="border border-grey-dark w-full p-1" placeholder="Email">
+                </div>
+
+                <div>
+                    <label for="subject" class="hidden">Subject</label>
+                    <input type="text" id="subject" name="subject" required class="border border-grey-dark w-full p-1" placeholder="Subject">
+                </div>
+            </div>
+
+            <div class="md:w-1/2 px-1">
+                <label for="message" class="hidden">Message</label>
+                <textarea name="message" id="message" cols="30" rows="5" required class="w-full border border-grey-dark block p-1" placeholder="Message"></textarea>
+            </div>
+        </div>
+
+        <button type="submit" class="bg-red text-white px-3 py-2">Send</button>
+    </form>
+</div>

source/contact.md

@@ -0,0 +1,32 @@
+---
+layout: default
+title: Contact
+email: cardiffbjj@googlemail.com
+phone: 07976 461973
+location: |
+    The Rob Taylor Jiu-Jitsu Academy
+    9 East Moors Business Park
+    East Moors Road
+    Cardiff
+    CF24 5JX
+---
+<div class="md:flex mb-8 md:max-w-xl md:mx-auto">
+    <div class="md:w-1/2 text-center">
+        <p><span class="font-bold">Email:</span> {{ page.email }}</p>
+    </div>
+    <div class="md:w-1/2 text-center">
+        <p><span class="font-bold">Phone:</span> {{ page.phone }}</p>
+    </div>
+</div>
+
+<div class="md:flex mb-8 md:max-w-xl md:mx-auto">
+    <div class="md:flex md:flex-col md:flex-1 md:justify-center">
+        <h2>Location</h2>
+
+        {{ page.location|nl2br }}
+    </div>
+
+    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2485.1337624751072!2d-3.160543684127624!3d51.47405897962965!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x486e1ccd1778f25f%3A0x57c2e2cd8171f7e4!2sRob+Taylor+Brazilian+Jiu-Jitsu+Academy+-+CRA+Cardiff!5e0!3m2!1sen!2suk!4v1532201198987" width="600" height="450" frameborder="0" allowfullscreen class="border-grey-dark"></iframe>
+</div>
+
+{% include 'contact/form' %}

tailwind.js

@@ -48,6 +48,7 @@ let colors = {
 
   'black': '#22292f',
   'grey-darkest': '#1e1d1d',
+  'grey-dark': '#303030',
   'grey': '#b8c2cc',
   'grey-lightest': '#eae9ea',
   'white': '#ffffff',