filter, search
This commit is contained in:
ruchi
parent
42f1b71b70
commit
eb7102ecfa
2 changed files with 229 additions and 0 deletions
126
src/homePage/Homepage.css
Normal file
126
src/homePage/Homepage.css
Normal file
|
|
@ -0,0 +1,126 @@
|
||||||
|
.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%;
|
||||||
|
}
|
||||||
103
src/homePage/Homepage.js
Normal file
103
src/homePage/Homepage.js
Normal file
|
|
@ -0,0 +1,103 @@
|
||||||
|
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);
|
||||||
Loading…
Add table
Add a link
Reference in a new issue