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

filter, search

Browse source
This commit is contained in:
ruchi 2021-04-07 16:39:44 -04:00
parent 483f72df65
commit ecc848a5ef
2 changed files with 229 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

126
src/homePage/Homepage.css Normal file
View 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
View 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);