From 92b3768ff6c47e731be627bbd4c49df8117d124c Mon Sep 17 00:00:00 2001
From: Batuhan Basoglu <bbaso079@uottawa.ca>
Date: Mon, 29 Mar 2021 19:28:27 -0400
Subject: [PATCH] Added the contact form.

---
 src/homePage/homepage.css | 50 ++++++++++++++++++++++++------------
 src/homePage/homepage.js  | 53 ++++++++++++++++++++++++++++++++++++++-
 2 files changed, 86 insertions(+), 17 deletions(-)

diff --git a/src/homePage/homepage.css b/src/homePage/homepage.css
index d68e174..00b67f1 100644
--- a/src/homePage/homepage.css
+++ b/src/homePage/homepage.css
@@ -1,20 +1,10 @@
 
 .colored-section {
-    background-color: #a77a32;
-    color: #ffffff;
-}
-
-.colored-section2 {
     background-color: #ffe609;
     color: #000000;
     white-space: nowrap;
 }
 
-.colored-section3 {
-    background-color: #cfd3ce;
-    color: #ffffff;
-}
-
 .white-section {
     background-color: #ffffff;
 }
@@ -25,16 +15,16 @@
     font-family: "Georgia";
 }
 
-#features .container-fluid {
-    padding: 3% 5% ;
-    text-align: left;
-
-}
-
 .housesIntro{
     padding: 4% 5%;
 }
 
+.contactIntro{
+    padding-left: 30%;
+    padding-right: 30%;
+    padding-bottom: 80px;
+}
+
 .carouselSection {
     margin: 2% 8%;
 }
@@ -43,3 +33,31 @@
     width: 2000px;
     height: 600px;
 }
+
+.heading-1{
+    padding-left: 40%;
+    padding-top: 10%;
+    padding-bottom: 20px;
+}
+
+.formhelper{
+    padding-bottom: 15px;
+}
+
+.button-1 {
+    background-color: rgb(0, 0, 0);
+    border-color: transparent;
+    color: #ffffff;
+    font-size: 20px;
+}
+
+.button-1:hover {
+    background-color: rgb(92, 92, 92);
+    color: #ffffff;
+    border-color: transparent;
+}
+
+.buttonhelper {
+    padding-left: 45%;
+    padding-top: 15px;
+}
\ No newline at end of file
diff --git a/src/homePage/homepage.js b/src/homePage/homepage.js
index 5644aed..f95a614 100644
--- a/src/homePage/homepage.js
+++ b/src/homePage/homepage.js
@@ -6,10 +6,20 @@ import house3 from '../images/house3.jpg';
 import Carousel from 'react-bootstrap/Carousel'
 
 class Homepage extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            firstname: '',
+            lastname: '',
+            email: '',
+            message: ''
+        }
+    }
+
     render() {
         return (
             <div className="Homepage">
-                <section className="colored-section2" id="title">
+                <section className="colored-section" id="title">
                     <div className="container-fluid">
                         <div className="row">
                             <div className="col-12">
@@ -48,9 +58,50 @@ class Homepage extends Component {
                         </Carousel>
                     </div>
                 </section>
+                <section class="colored-section" id="contact">
+                    <div className="container-fluid">
+                        <div className="contactIntro">
+                            <h2 className="heading-1">Contact Us</h2>
+                            <form id="contact-form" onSubmit={this.handleSubmit.bind(this)} method="POST">
+                                <div className="formhelper row">
+                                    <div className="col-6">
+                                        <input type="text" className="form-control" placeholder="First Name" value={this.state.name} onChange={this.onNameChange.bind(this)} />
+                                    </div>
+                                    <div className="col-6">
+                                        <input type="text" className="form-control" placeholder="Last Name" value={this.state.name} onChange={this.onNameChange.bind(this)} />
+                                    </div>
+                                </div>
+                                <div className="form-group">
+                                    <input type="email" className="form-control" placeholder="Email Address" aria-describedby="emailHelp" value={this.state.email} onChange={this.onEmailChange.bind(this)} />
+                                </div>
+                                <div className="form-group">
+                                    <textarea className="form-control" placeholder="Message" rows="5" value={this.state.message} onChange={this.onMessageChange.bind(this)} />
+                                </div>
+                                <div className="buttonhelper">
+                                    <button type="submit" className="button-1">Submit</button>
+                                </div>
+                            </form>
+                        </div>
+                    </div>
+                </section>
             </div>
         );
     }
+
+    onNameChange(event) {
+        this.setState({ name: event.target.value })
+    }
+
+    onEmailChange(event) {
+        this.setState({ email: event.target.value })
+    }
+
+    onMessageChange(event) {
+        this.setState({ message: event.target.value })
+    }
+
+    handleSubmit(event) {
+    }
 }
 
 export default Homepage;