n
This commit is contained in:
ruchi
commit
c7685e4f82
17 changed files with 625 additions and 401 deletions
|
|
@ -1,5 +1,5 @@
|
|||
.colored-section {
|
||||
background-color: #ffe609;
|
||||
background-color: #e7dec8;
|
||||
color: #000000;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
@ -14,6 +14,13 @@
|
|||
font-family: "Georgia";
|
||||
}
|
||||
|
||||
#features .container-fluid {
|
||||
padding: 2% 48% 2%;
|
||||
text-align: left;
|
||||
font-family: "Georgia";
|
||||
}
|
||||
|
||||
|
||||
.housesIntro{
|
||||
padding: 4% 5%;
|
||||
}
|
||||
|
|
@ -59,4 +66,4 @@
|
|||
.buttonhelper {
|
||||
padding-left: 45%;
|
||||
padding-top: 15px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,107 +1,126 @@
|
|||
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'
|
||||
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: ''
|
||||
}
|
||||
}
|
||||
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>
|
||||
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.firstname}
|
||||
onChange={this.onFirstNameChange.bind(this)}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-6">
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder="Last Name"
|
||||
value={this.state.lastname}
|
||||
onChange={this.onLastNameChange.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>
|
||||
);
|
||||
}
|
||||
onFirstNameChange(event) {
|
||||
this.setState({ firstname: event.target.value });
|
||||
}
|
||||
|
||||
onNameChange(event) {
|
||||
this.setState({ name: event.target.value })
|
||||
}
|
||||
onLastNameChange(event) {
|
||||
this.setState({ lastname: event.target.value });
|
||||
}
|
||||
|
||||
onEmailChange(event) {
|
||||
this.setState({ email: event.target.value })
|
||||
}
|
||||
onEmailChange(event) {
|
||||
this.setState({ email: event.target.value });
|
||||
}
|
||||
|
||||
onMessageChange(event) {
|
||||
this.setState({ message: event.target.value })
|
||||
}
|
||||
onMessageChange(event) {
|
||||
this.setState({ message: event.target.value });
|
||||
}
|
||||
|
||||
handleSubmit(event) {
|
||||
}
|
||||
handleSubmit(event) {}
|
||||
}
|
||||
|
||||
export default Homepage;
|
||||
|
|
|
|||
|
|
@ -1,62 +0,0 @@
|
|||
.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;
|
||||
}
|
||||
|
|
@ -1,107 +1,126 @@
|
|||
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'
|
||||
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: ''
|
||||
}
|
||||
}
|
||||
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>
|
||||
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.firstname}
|
||||
onChange={this.onFirstNameChange.bind(this)}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-6">
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder="Last Name"
|
||||
value={this.state.lastname}
|
||||
onChange={this.onLastNameChange.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>
|
||||
);
|
||||
}
|
||||
onFirstNameChange(event) {
|
||||
this.setState({ firstname: event.target.value });
|
||||
}
|
||||
|
||||
onNameChange(event) {
|
||||
this.setState({ name: event.target.value })
|
||||
}
|
||||
onLastNameChange(event) {
|
||||
this.setState({ lastname: event.target.value });
|
||||
}
|
||||
|
||||
onEmailChange(event) {
|
||||
this.setState({ email: event.target.value })
|
||||
}
|
||||
onEmailChange(event) {
|
||||
this.setState({ email: event.target.value });
|
||||
}
|
||||
|
||||
onMessageChange(event) {
|
||||
this.setState({ message: event.target.value })
|
||||
}
|
||||
onMessageChange(event) {
|
||||
this.setState({ message: event.target.value });
|
||||
}
|
||||
|
||||
handleSubmit(event) {
|
||||
}
|
||||
handleSubmit(event) {}
|
||||
}
|
||||
|
||||
export default Homepage;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue