mes
This commit is contained in:
ruchi
parent
5734ff326d
commit
433e254ea8
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…
Add table
Add a link
Reference in a new issue