Styling Contact Page

public/page/contact/ContactPage.jsx

@@ -27,6 +27,8 @@ import Page, { PageBoundary } from './../Page';
 import Input, { Form, InputGroup, TextArea, Label, ButtonGroup } from './../../input/Input';
 import Language from './../../language/Language';
 import ElementScrollFader from './../../animation/fade/ElementScrollFader';
+import ContentBox from './../../content/ContentBox';
+import { Title, Paragraph } from './../../typography/Typography'
 import Section, {
   BodySection,
   ClearSection,
@@ -46,9 +48,22 @@ class ContactPage extends React.Component {
         <ClearSection />
 
         <PageBoundary small>
-          <SplitSection>
-            <Split>
-              <ElementScrollFader>
+
+          <ElementScrollFader from="left">
+            <ContentBox box className="u-text-center">
+              <Title>Contact Me</Title>
+              <Paragraph>
+                Want to get in touch with me? Fill out this easy form and I should be
+                in touch shortly to chat! More of a phone person? Leave a number
+                and we can chat.
+              </Paragraph>
+            </ContentBox>
+          </ElementScrollFader>
+
+          <br />
+          <br />
+
+          <ElementScrollFader from="right">
             <BodySection>
               <Form>
                 <InputGroup>
@@ -83,9 +98,6 @@ class ContactPage extends React.Component {
               </Form>
             </BodySection>
           </ElementScrollFader>
-            </Split>
-
-          </SplitSection>
         </PageBoundary>
 
         <ClearSection />

public/styles/pages/_contact-page.scss

@@ -10,6 +10,7 @@
 .p-contact-page {
   background-color: #37085E;
   background-image: url('./../images/patterns/arcade.svg');
+  background-size: 150% auto;
 
   &__message-element {
     resize: none;