Merge pull request #1 from ArcticHawk1/homepage

Re-added the files.

src/App.js

@@ -1,28 +1,11 @@
 import { Component } from "react";
+import Homepage from './homePage/Homepage';
 
 class App extends Component {
   render() {
     return (
       <div className="App">
-        <header className="App-header">
+          <Homepage></Homepage>
-          <h1>Kene's Cribs</h1>
-          <p>Real Website loading.......</p>
-        </header>
-        <section>
-          <h1>hello everyone</h1>
-          <div class="alert alert-primary" role="alert">
-            A simple primary alert—check it out!
-          </div>
-          <div class="alert alert-primary" role="alert">
-            A simple primary alert—check it out!
-          </div>
-          <div class="alert alert-primary" role="alert">
-            A simple primary alert—check it out!
-          </div>
-          <div class="alert alert-primary" role="alert">
-            A simple primary alert—check it out!
-          </div>
-        </section>
       </div>
     );
   }

src/homePage/Homepage.css

@@ -0,0 +1,62 @@
+.colored-section {
+    background-color: #ffe609;
+    color: #000000;
+    white-space: nowrap;
+}
+
+.white-section {
+    background-color: #ffffff;
+}
+
+#title .container-fluid {
+    padding: 4% 34% 6%;
+    text-align: left;
+    font-family: "Georgia";
+}
+
+.housesIntro{
+    padding: 4% 5%;
+}
+
+.contactIntro{
+    padding-left: 30%;
+    padding-right: 30%;
+    padding-bottom: 80px;
+}
+
+.carouselSection {
+    margin: 2% 8%;
+}
+
+.headerImg{
+    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;
+}

src/homePage/Homepage.js

@@ -0,0 +1,107 @@
+import { Component } from "react";
+import './Homepage.css';
+import house1 from '../images/house1.jpg';
+import house2 from '../images/house2.jpg';
+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-section" id="title">
+                    <div className="container-fluid">
+                        <div className="row">
+                            <div className="col-12">
+                                <h1 className="big-heading">YOU ARE NOT BUYING A HOUSE, </h1>
+                                <h1 className="big-heading">YOU ARE BUYING A LIFESTYLE. </h1>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+                <section className="white-section" id="white-section">
+                    <div className="housesIntro">
+                        <Carousel>
+                            <Carousel.Item>
+                                <img
+                                    className="headerImg"
+                                    src={house1}
+                                    alt="First House"
+                                />
+                            </Carousel.Item>
+                            <Carousel.Item>
+                                <img
+                                    className="headerImg"
+                                    src={house2}
+                                    alt="Second House"
+                                />
+
+                            </Carousel.Item>
+                            <Carousel.Item>
+                                <img
+                                    className="headerImg"
+                                    src={house3}
+                                    alt="Third House"
+                                />
+
+                            </Carousel.Item>
+                        </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;