senaduka/old-v2-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changed illustration on contact form, styling tweaks

Browse Source
This commit is contained in:
Moris Zen
2018-08-30 22:30:00 +02:00
parent 3e4bfca8f2
commit d6f21c567e
4 changed files with 420 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/pages/contact.js
View File

@@ -6,7 +6,7 @@ import PageIntro from '../components/PageIntro'
import ContactImage from '../images/saburly-web-agency.jpg'
import Sarajevo from '../images/sarajevo-web-agency.jpg'
import Stockholm from '../images/stockholm-web-agency.jpg'
import FormImage from '../images/contact-web-consultancy-sweden.svg'
import FormImage from '../images/best-web-development-sweden.svg'
import PageTransition from 'gatsby-plugin-page-transitions'
@@ -108,17 +108,17 @@ const ContactPage = () => (
</div>
</section>
<div className="bg-contact-form p-8">
<section className="container flex mx-auto">
<div className="bg-saburly-lighter p-8">
<section className="container lg:flex justify-between mx-auto">
<form
action="https://formspree.io/info@saburly.com"
className="w-full mx-auto pt-16 p-6 max-w-md"
className="w-full max-w-sm mx-auto pt-16 p-6"
method="POST"
>
<SectionIntro headline="Send us a message" light />
<div className="flex flex-wrap">
<SectionIntro headline="Send us a message" />
<div className="md:flex flex-wrap">
<input
className="appearance-none bg-transparent border-contact block w-full text-white py-2 border-grey-light"
className="appearance-none bg-transparent border-contact block w-full typed-cursor py-2"
id="grid-first-name"
type="text"
placeholder="Name"
@@ -127,7 +127,7 @@ const ContactPage = () => (
/>
<input
className="appearance-none bg-transparent border-contact block w-full text-white py-2 border-grey-light"
className="appearance-none bg-transparent border-contact block w-full typed-cursor py-2"
id="grid-first-name"
type="text"
placeholder="Email"
@@ -136,28 +136,30 @@ const ContactPage = () => (
/>
<textarea
className="appearance-none bg-transparent border-contact block w-full text-white py-2 border-grey-light"
className="appearance-none bg-transparent border-contact block w-full typed-cursor py-2 border-grey-light"
id="grid-last-name"
type="text"
name="message"
placeholder="Project description or message"
placeholder="Message"
required
/>
</div>
<button
className="mt-4 shadow bg-teal hover:bg-teal-light text-white py-2 px-4 rounded"
className="mt-4 w-full shadow bg-teal hover:bg-teal-light text-white py-2 px-4 rounded"
value="Send"
type="submit"
>
Send
</button>
</form>
<img
src={FormImage}
alt="Contact Form Image"
className="max-h-sm text-center block m-x-auto md:max-w-lg mx-auto"
/>
<div>
<img
src={FormImage}
alt="Contact Form Image"
className="p-10 w-full text-center block md:max-w-lg mx-auto"
/>
</div>
</section>
</div>
</PageTransition>