added form-testing with netlify

src/App.css

@@ -1,14 +1,20 @@
 .App {
   text-align: center;
-  background-image: url("./kidRocket.jpg");
+
 
 }
 
 .App-logo {
   /* animation: App-logo-spin infinite 20s linear; */
-  height: 80px;
+  min-height: 55px;
+  max-height: 78.2px;
+
 }
 
+
+
+
+
 /* .App-header {
   background-color: #222;
   height: 150px;

src/components/Drift.js

@@ -4,7 +4,7 @@ export default class Drift extends React.Component {
     render() {
       return (
         <div className="Drift">
-            onClick
+            Add Drift here
         </div>
       );
     }

src/components/Form.js

@@ -1,32 +1,40 @@
 import React, { Component } from "react";
 import ThankYouAlert from "./ThankYouAlert";
+import { Button, Input, InputGroup, Form, FormGroup, Label } from "reactstrap";
 
-export default class Form extends React.Component {
+export default class EmailForm extends React.Component {
-render() {
+  render() {
     return (
+      <div>
+        <Form method="POST" netlify="true">
+        <h1>Free Video Consultation </h1>
+          <FormGroup>
+            <Input
+              type="email"
+              name="email"
+              id="exampleEmail"
+              placeholder="Email"
+            />
+          </FormGroup>
 
-    <div>
+          <FormGroup>
-    <form name="contact" method="POST" netlify>
+            <Input
-    <p>
+              type="textarea"
-        <label>Email: <input type="text" name="name" /></label>
+              name="text"
-    </p>
+              id="exampleText"
-    <p>
+              placeholder="tell us a little about your idea without giving much away"
-        <label>Message: <textarea name="message"></textarea></label>
+            />
-    </p>
+          </FormGroup>
-    <div data-netlify-recaptcha></div>
+          <div data-netlify-recaptcha />
-    <p>
+          <Button color="success" type="submit">Send</Button>
-    <button type="submit" >Send</button>
+        </Form>
-     </p>
+      </div>
-    </form>
+    );
-    </div>
+  }
-
-
-        );
-    }
 }
 
 // the logic is sign up to recieve free video consultation and invention workbook
 // First name, last name
 // then email text area with validation
 // tell us a little about your idea...
-// Once it goes through trigger thank you alert or just change CTA text/colour
+// Once it goes through trigger thank you alert or just change CTA text/colour

src/index.css

@@ -2,6 +2,5 @@ body {
   margin: 0;
   padding: 0;
   font-family: sans-serif;
-  background-image: url("./kidRocket.jpg");
+
-  background-size: ;
 }

src/layouts/AboveTheFold.css

@@ -0,0 +1,14 @@
+
+.backgroundContainer {
+    background-image: url("../kidRocket.jpg");
+    background-repeat: no-repeat;
+    background-size: 100%;
+    /* background-position: center; */
+
+  }
+
+
+.CTA {
+align-items: center;
+color: red;
+}

src/layouts/AboveTheFold.js

@@ -1,15 +1,35 @@
 import React, { Component } from "react";
-import Form from '../components/Form.js';
+import { Container, Row, Col } from "reactstrap";
-import HeadNavbar from '../components/Navbar.js'
+import Form from "../components/Form.js";
+import "./AboveTheFold.css";
+import HeadNavbar from "../components/Navbar.js";
 
 export default class AboveTheFold extends Component {
-    render() {
+  render() {
-        return (
+    return (
-    <div>
+      <div className="backgroundContainer">
         <HeadNavbar />
-        <Form />
+        <Container />
-        boob
+        <Container>
-    </div>
+          <Row  >
-        );
+            <Col xs="6" sm="4">
-    }
+            </Col>
-}
+            <Col xs="6" sm="4">
+            <br/>
+            <br/>
+            <br/>
+            <br/>
+            <br/>
+            <br/>
+            <br/>
+            <br/>
+              <br/>
+            </Col>
+            <Col sm="4"><Form /></Col>
+          </Row>
+
+        </Container>
+      </div>
+    );
+  }
+}