Update contact styling

This commit is contained in:
Oliver Davies 2018-07-21 21:11:35 +01:00
parent 90ba89e1db
commit 3d7ba45359
2 changed files with 12 additions and 10 deletions

View file

@ -1,26 +1,26 @@
<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: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">
<input type="text" id="name" name="name" required class="border border-grey-dark w-full p-1 mb-2" 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">
<input type="email" id="email" name="email" required class="border border-grey-dark w-full p-1 mb-2" 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">
<input type="text" id="subject" name="subject" required class="border border-grey-dark w-full p-1 mb-2" 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>
<textarea name="message" id="message" cols="30" rows="5" required class="border border-grey-dark w-full p-1 block" placeholder="Message"></textarea>
</div>
</div>

View file

@ -10,7 +10,7 @@ location: |
Cardiff
CF24 5JX
---
<div class="md:flex mb-8 md:max-w-xl md:mx-auto">
<div class="md:flex mb-8 md:max-w-lg md:mx-auto">
<div class="md:w-1/2 text-center">
<p><span class="font-bold">Email:</span> {{ page.email }}</p>
</div>
@ -19,14 +19,16 @@ location: |
</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>
<div class="md:flex mb-8 md:max-w-xl md:mx-auto -mx-4">
<div class="px-4 md:flex md:flex-col md:justify-center mb-4 md:mb-0 w-full md:w-1/3">
<h2 class="mb-2">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 class="mx-4 overflow-hidden">
<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>
</div>
{% include 'contact/form' %}