mes
This commit is contained in:
ruchi
parent
108d8e9bfe
commit
889e0fd031
3 changed files with 0 additions and 355 deletions
|
|
@ -1,126 +0,0 @@
|
||||||
.colored-section {
|
|
||||||
background-color: #e7dec8;
|
|
||||||
color: #000000;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.white-section {
|
|
||||||
background-color: #ffffff;
|
|
||||||
padding-top: 10rem;
|
|
||||||
padding-bottom: 5rem;
|
|
||||||
padding-left: 18%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#title .container-fluid {
|
|
||||||
padding: 5% 34% 6%;
|
|
||||||
text-align: left;
|
|
||||||
font-family: "Georgia";
|
|
||||||
}
|
|
||||||
|
|
||||||
#features .container-fluid {
|
|
||||||
padding: 2% 14% 4%;
|
|
||||||
text-align: left;
|
|
||||||
font-family: "Georgia";
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.housesIntro{
|
|
||||||
width: 1200px;
|
|
||||||
height: 800px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contactIntro{
|
|
||||||
padding-left: 30%;
|
|
||||||
padding-right: 30%;
|
|
||||||
padding-bottom: 80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.headerImg{
|
|
||||||
width: 1200px;
|
|
||||||
height: 800px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.buttonka{
|
|
||||||
padding-top: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.prev-icon,
|
|
||||||
.next-icon {
|
|
||||||
height: 210px;
|
|
||||||
width: 100px;
|
|
||||||
outline: black;
|
|
||||||
background-size: 100%, 100%;
|
|
||||||
border-radius: 50%;
|
|
||||||
background-image: none;
|
|
||||||
text-shadow: 2px 2px 5px black;
|
|
||||||
}
|
|
||||||
|
|
||||||
.next-icon:after
|
|
||||||
{
|
|
||||||
content: '>';
|
|
||||||
font-size: 140px;
|
|
||||||
color: rgb(255, 255, 255);
|
|
||||||
text-shadow: 2px 2px 5px black;
|
|
||||||
}
|
|
||||||
|
|
||||||
.prev-icon:after {
|
|
||||||
content: '<';
|
|
||||||
font-size: 140px;
|
|
||||||
color: rgb(255, 255, 255);
|
|
||||||
text-shadow: 2px 2px 5px black;
|
|
||||||
}
|
|
||||||
|
|
||||||
ol.carousel-indicators {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 5px;
|
|
||||||
margin: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
ol.carousel-indicators li,
|
|
||||||
ol.carousel-indicators li.active {
|
|
||||||
width: 1rem;
|
|
||||||
height: 1rem;
|
|
||||||
margin: 0;
|
|
||||||
border-radius: 50%;
|
|
||||||
border: 0;
|
|
||||||
background: transparent;
|
|
||||||
box-shadow: 0 0 1px 1px black;
|
|
||||||
}
|
|
||||||
|
|
||||||
ol.carousel-indicators li {
|
|
||||||
background: rgb(255, 255, 255);
|
|
||||||
margin-left: .5rem;
|
|
||||||
margin-right: .5rem;
|
|
||||||
box-shadow: 0 0 1px 1px black;
|
|
||||||
}
|
|
||||||
|
|
||||||
ol.carousel-indicators li.active {
|
|
||||||
background: #17a2b8;
|
|
||||||
box-shadow: 0 0 1px 1px black;
|
|
||||||
}
|
|
||||||
|
|
||||||
.homePage{
|
|
||||||
padding-bottom: 15%;
|
|
||||||
}
|
|
||||||
|
|
@ -1,103 +0,0 @@
|
||||||
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 house4 from "../images/house4.jpg";
|
|
||||||
import Carousel from "react-bootstrap/Carousel";
|
|
||||||
import Button from "react-bootstrap/Button";
|
|
||||||
import { withTranslation } from "react-i18next";
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
class Homepage extends Component {
|
|
||||||
constructor(props) {
|
|
||||||
super(props);
|
|
||||||
this.state = {
|
|
||||||
nextIcon: <span className="next-icon"></span>,
|
|
||||||
prevIcon: <span className="prev-icon"></span>,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const { t } = this.props;
|
|
||||||
const { nextIcon, prevIcon } = this.state;
|
|
||||||
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">{t("Slogan_1")}</h1>
|
|
||||||
<h1 className="big-heading">{t("Slogan_2")}</h1>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<section className="white-section">
|
|
||||||
<div className="housesIntro">
|
|
||||||
<Carousel nextIcon={nextIcon} prevIcon={prevIcon}>
|
|
||||||
<Carousel.Item>
|
|
||||||
<img className="headerImg" src={house1} alt="First House" />
|
|
||||||
<Carousel.Caption>
|
|
||||||
<h3 style={{ fontSize: "250%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>100 Charlie Rogers, Kanata, ON K2V 1A7</h3>
|
|
||||||
<h2 style={{ fontSize: "150%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>{t("Rooms")}</h2>
|
|
||||||
<div className="buttonka">
|
|
||||||
<Button href="/listings" variant="info">{t("Info")}</Button>
|
|
||||||
</div>
|
|
||||||
</Carousel.Caption>
|
|
||||||
</Carousel.Item>
|
|
||||||
<Carousel.Item>
|
|
||||||
<img className="headerImg" src={house2} alt="Second House" />
|
|
||||||
<Carousel.Caption>
|
|
||||||
<h3 style={{ fontSize: "250%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>1490 Youville Drive, Orléans, ON K1C 2X8</h3>
|
|
||||||
<h2 style={{ fontSize: "150%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>{t("Rooms")}</h2>
|
|
||||||
<div className="buttonka">
|
|
||||||
<Button href="/listings" variant="info">{t("Info")}</Button>
|
|
||||||
</div>
|
|
||||||
</Carousel.Caption>
|
|
||||||
</Carousel.Item>
|
|
||||||
<Carousel.Item>
|
|
||||||
<img className="headerImg" src={house3} alt="Third House" />
|
|
||||||
<Carousel.Caption>
|
|
||||||
<h3 style={{ fontSize: "250%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>8720 Russell Road, Navan, ON K4B 1J1</h3>
|
|
||||||
<h2 style={{ fontSize: "150%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>{t("Rooms")}</h2>
|
|
||||||
<div className="buttonka">
|
|
||||||
<Button href="/listings" variant="info">{t("Info")}</Button>
|
|
||||||
</div>
|
|
||||||
</Carousel.Caption>
|
|
||||||
</Carousel.Item>
|
|
||||||
<Carousel.Item>
|
|
||||||
<img className="headerImg" src={house4} alt="Fourth House" />
|
|
||||||
<Carousel.Caption>
|
|
||||||
<h3 style={{ fontSize: "250%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>2785 8th Line Road, Metcalfe, ON K0A 2P0</h3>
|
|
||||||
<h2 style={{ fontSize: "150%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>{t("Rooms")}</h2>
|
|
||||||
<div className="buttonka">
|
|
||||||
<Button href="/listings" variant="info">{t("Info")}</Button>
|
|
||||||
</div>
|
|
||||||
</Carousel.Caption>
|
|
||||||
</Carousel.Item>
|
|
||||||
</Carousel>
|
|
||||||
<section className="colored-section" id="features">
|
|
||||||
<div className="container-fluid">
|
|
||||||
<div className="row">
|
|
||||||
<div className="col-12">
|
|
||||||
<h2 style={{ paddingLeft: "22rem", paddingBottom: "1rem", fontFamily: "Trebuchet MS" }}>{t("Desc")}</h2>
|
|
||||||
<p style={{ fontSize: "110%" }}>{t("Home1")}<br></br>
|
|
||||||
{t("Home2")}<br></br>
|
|
||||||
{t("Home3")}<br></br>
|
|
||||||
{t("Home4")}<br></br>
|
|
||||||
{t("Home5")}<br></br>
|
|
||||||
{t("Home6")}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default withTranslation()(Homepage);
|
|
||||||
|
|
@ -1,126 +0,0 @@
|
||||||
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.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 });
|
|
||||||
}
|
|
||||||
|
|
||||||
onLastNameChange(event) {
|
|
||||||
this.setState({ lastname: event.target.value });
|
|
||||||
}
|
|
||||||
|
|
||||||
onEmailChange(event) {
|
|
||||||
this.setState({ email: event.target.value });
|
|
||||||
}
|
|
||||||
|
|
||||||
onMessageChange(event) {
|
|
||||||
this.setState({ message: event.target.value });
|
|
||||||
}
|
|
||||||
|
|
||||||
handleSubmit(event) {}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Homepage;
|
|
||||||
Loading…
Reference in a new issue