Added the contact form.
This commit is contained in:
parent
cb9f7f0879
commit
948078b6fe
2 changed files with 86 additions and 17 deletions
|
@ -1,20 +1,10 @@
|
||||||
|
|
||||||
.colored-section {
|
.colored-section {
|
||||||
background-color: #a77a32;
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.colored-section2 {
|
|
||||||
background-color: #ffe609;
|
background-color: #ffe609;
|
||||||
color: #000000;
|
color: #000000;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.colored-section3 {
|
|
||||||
background-color: #cfd3ce;
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.white-section {
|
.white-section {
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
}
|
}
|
||||||
|
@ -25,16 +15,16 @@
|
||||||
font-family: "Georgia";
|
font-family: "Georgia";
|
||||||
}
|
}
|
||||||
|
|
||||||
#features .container-fluid {
|
|
||||||
padding: 3% 5% ;
|
|
||||||
text-align: left;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.housesIntro{
|
.housesIntro{
|
||||||
padding: 4% 5%;
|
padding: 4% 5%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.contactIntro{
|
||||||
|
padding-left: 30%;
|
||||||
|
padding-right: 30%;
|
||||||
|
padding-bottom: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
.carouselSection {
|
.carouselSection {
|
||||||
margin: 2% 8%;
|
margin: 2% 8%;
|
||||||
}
|
}
|
||||||
|
@ -43,3 +33,31 @@
|
||||||
width: 2000px;
|
width: 2000px;
|
||||||
height: 600px;
|
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;
|
||||||
|
}
|
|
@ -6,10 +6,20 @@ import house3 from '../images/house3.jpg';
|
||||||
import Carousel from 'react-bootstrap/Carousel'
|
import Carousel from 'react-bootstrap/Carousel'
|
||||||
|
|
||||||
class Homepage extends Component {
|
class Homepage extends Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
firstname: '',
|
||||||
|
lastname: '',
|
||||||
|
email: '',
|
||||||
|
message: ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div className="Homepage">
|
<div className="Homepage">
|
||||||
<section className="colored-section2" id="title">
|
<section className="colored-section" id="title">
|
||||||
<div className="container-fluid">
|
<div className="container-fluid">
|
||||||
<div className="row">
|
<div className="row">
|
||||||
<div className="col-12">
|
<div className="col-12">
|
||||||
|
@ -48,9 +58,50 @@ class Homepage extends Component {
|
||||||
</Carousel>
|
</Carousel>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</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>
|
</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;
|
export default Homepage;
|
||||||
|
|
Loading…
Reference in a new issue