From 9e11f32b65f21ebf325f5b088deae957a2933e4d Mon Sep 17 00:00:00 2001
From: frits000000 <45283950+frits000000@users.noreply.github.com>
Date: Wed, 25 Nov 2020 09:02:59 +0100
Subject: [PATCH] react native

---
 .../src/Components/Header/Header.js           |  5 +-
 .../src/Components/Pages/Contact/Contact.css  | 14 +++++
 .../src/Components/Pages/Contact/Contact.js   | 56 +++++++++++++++++++
 .../src/Components/Pages/Home/HomePage.css    |  4 ++
 .../src/Components/Routing/Router.js          |  2 +
 ReactJS/alfaprentice/src/Components/index.js  |  2 +
 6 files changed, 79 insertions(+), 4 deletions(-)
 create mode 100644 ReactJS/alfaprentice/src/Components/Pages/Contact/Contact.css
 create mode 100644 ReactJS/alfaprentice/src/Components/Pages/Contact/Contact.js

diff --git a/ReactJS/alfaprentice/src/Components/Header/Header.js b/ReactJS/alfaprentice/src/Components/Header/Header.js
index a47b7c8..4b5704b 100644
--- a/ReactJS/alfaprentice/src/Components/Header/Header.js
+++ b/ReactJS/alfaprentice/src/Components/Header/Header.js
@@ -42,7 +42,7 @@ class Header extends React.Component {
                                 <Link to="/" className="Nav-link">Home</Link>
                             </div>
                             <div className="NavItem mx-2">
-                                <a>Contact</a>
+                            <Link to="/contact" className="Nav-link">Contact</Link>
                             </div>
                             <div className="NavItem mx-2">
                                 <a className="AP-Btn-Primary" onClick={ () => this.handleClick() }>Login</a>
@@ -66,9 +66,6 @@ class Header extends React.Component {
                             </div>
                             </div>
                         </ToggleDisplay>
-
-        
-                    
                 </div>  
             </header>
         )
diff --git a/ReactJS/alfaprentice/src/Components/Pages/Contact/Contact.css b/ReactJS/alfaprentice/src/Components/Pages/Contact/Contact.css
new file mode 100644
index 0000000..e25cfb8
--- /dev/null
+++ b/ReactJS/alfaprentice/src/Components/Pages/Contact/Contact.css
@@ -0,0 +1,14 @@
+.AP-input{
+    width: 100%;
+    border: 1px solid #DE0000;
+    padding: 10px;
+    border-radius: 5px;
+}
+
+.AP-textarea{
+    width: 100%;
+    border: 1px solid #DE0000;
+    min-height: 200px;
+    padding: 10px;
+    border-radius: 5px;
+}
\ No newline at end of file
diff --git a/ReactJS/alfaprentice/src/Components/Pages/Contact/Contact.js b/ReactJS/alfaprentice/src/Components/Pages/Contact/Contact.js
new file mode 100644
index 0000000..cd3e487
--- /dev/null
+++ b/ReactJS/alfaprentice/src/Components/Pages/Contact/Contact.js
@@ -0,0 +1,56 @@
+//Modules
+import React from 'react';
+
+//Style
+import "./Contact.css";
+
+//Components
+import {
+    BrowserRouter as Router,
+    Switch,
+    Route,
+    Link
+  } from "react-router-dom";
+import {
+    HeroOne,
+    CTA,
+    } from "../../";
+
+class ContactPage extends React.Component {
+    render() {
+        return(
+            <div className="ContactPage">
+                <HeroOne title="Contact" content="Heb je vragen of opmerkingen neem dan contact met ons op"/>
+                <div className="container my-5">
+                    <div className="row">
+                        <div className="col-md-6 pr-4">
+                            <p>
+                            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+                            </p>
+                        </div>
+                        <div className="col-md-6">
+                            <form className="ContactForm">
+                                <div className="row">
+                                    <div className="col-md-6">
+                                        <input className="AP-input" placeholder="Voornaam"/>
+                                    </div>
+                                    <div className="col-md-6">
+                                        <input className="AP-input" placeholder="Achternaam"/>
+                                    </div>
+                                    <div className="col-md-12 mt-4">
+                                        <input className="AP-input" placeholder="Email adres"/>
+                                    </div>
+                                    <div className="col-md-12 mt-4">
+                                        <textarea className="AP-textarea" placeholder="Je bericht"/>
+                                    </div> 
+                                </div>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        )
+    }
+}
+
+export default ContactPage;
\ No newline at end of file
diff --git a/ReactJS/alfaprentice/src/Components/Pages/Home/HomePage.css b/ReactJS/alfaprentice/src/Components/Pages/Home/HomePage.css
index f1b58d8..4950c2c 100644
--- a/ReactJS/alfaprentice/src/Components/Pages/Home/HomePage.css
+++ b/ReactJS/alfaprentice/src/Components/Pages/Home/HomePage.css
@@ -58,4 +58,8 @@
 
 .OpleidingItemInner:hover{
     transform: scale(1.1);
+}
+
+a{
+    text-decoration: none !important;
 }
\ No newline at end of file
diff --git a/ReactJS/alfaprentice/src/Components/Routing/Router.js b/ReactJS/alfaprentice/src/Components/Routing/Router.js
index ffbc78a..00d8c3b 100644
--- a/ReactJS/alfaprentice/src/Components/Routing/Router.js
+++ b/ReactJS/alfaprentice/src/Components/Routing/Router.js
@@ -16,6 +16,7 @@ import {
         InternSearch,
         CompanyProfile,
         UserProfile,
+        ContactPage,
       } from '../';
 
 //Sub routes
@@ -41,6 +42,7 @@ class GlobalRouter extends React.Component {
                         <Route path="/zoeken" component={InternSearch} />
                         <Route path="/bedrijfsprofiel" component={CompanyProfile} />
                         <Route path="/gebruikersprofiel" component={UserProfile} />
+                        <Route path="/contact" component={ContactPage} />
                     </Switch> 
                 </DefaultLayout>
               </Router>     
diff --git a/ReactJS/alfaprentice/src/Components/index.js b/ReactJS/alfaprentice/src/Components/index.js
index fe6dd07..87b6920 100644
--- a/ReactJS/alfaprentice/src/Components/index.js
+++ b/ReactJS/alfaprentice/src/Components/index.js
@@ -16,6 +16,7 @@ import HomePage from './Pages/Home/HomePage';
 import InternSearch from "./Pages/Search/InternSearchPage";
 import CompanyProfile from "./Pages/Profile/CompanyProfile";
 import UserProfile from "./Pages/Profile/UserProfile";
+import ContactPage from "./Pages/Contact/Contact";
 
 //Style
 import "./GlobalStyles.css";
@@ -45,4 +46,5 @@ export {
     InternSearch,
     CompanyProfile,
     UserProfile,
+    ContactPage,
 }
\ No newline at end of file