batuhan-basoglu/Kene-s-Cribs-Website
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Added the contact form.

Browse source
This commit is contained in:
Arctichawk1 2021-03-29 19:28:27 -04:00
parent 27a03a4311
commit f5473e516d
2 changed files with 86 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

50
src/homePage/homepage.css
View file

@ -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;
}

53
src/homePage/homepage.js
View file

@ -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;