merge with the master branch
This commit is contained in:
soyed
commit
4b2a08a36f
16 changed files with 768 additions and 20618 deletions
|
|
@ -4,25 +4,30 @@
|
|||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
||||
.white-section {
|
||||
background-color: #ffffff;
|
||||
padding-top: 10rem;
|
||||
padding-bottom: 5rem;
|
||||
padding-left: 18%;
|
||||
}
|
||||
|
||||
#title .container-fluid {
|
||||
padding: 4% 34% 6%;
|
||||
padding: 5% 34% 6%;
|
||||
text-align: left;
|
||||
font-family: "Georgia";
|
||||
}
|
||||
|
||||
#features .container-fluid {
|
||||
padding: 2% 48% 2%;
|
||||
padding: 2% 14% 4%;
|
||||
text-align: left;
|
||||
font-family: "Georgia";
|
||||
}
|
||||
|
||||
|
||||
.housesIntro{
|
||||
padding: 4% 5%;
|
||||
width: 1200px;
|
||||
height: 800px;
|
||||
}
|
||||
|
||||
.contactIntro{
|
||||
|
|
@ -31,23 +36,9 @@
|
|||
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;
|
||||
width: 1200px;
|
||||
height: 800px;
|
||||
}
|
||||
|
||||
.button-1 {
|
||||
|
|
@ -67,3 +58,69 @@
|
|||
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%;
|
||||
}
|
||||
|
|
@ -3,20 +3,23 @@ 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";
|
||||
|
||||
|
||||
|
||||
class Homepage extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
firstname: "",
|
||||
lastname: "",
|
||||
email: "",
|
||||
message: "",
|
||||
nextIcon: <span className="next-icon"></span>,
|
||||
prevIcon: <span className="prev-icon"></span>,
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
const { nextIcon, prevIcon } = this.state;
|
||||
return (
|
||||
<div className="homePage">
|
||||
<section className="colored-section" id="title">
|
||||
|
|
@ -29,98 +32,70 @@ class Homepage extends Component {
|
|||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section className="white-section" id="white-section">
|
||||
<section className="white-section">
|
||||
<div className="housesIntro">
|
||||
<Carousel>
|
||||
<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" }}>1 Bedroom, 2 Bathroom</h2>
|
||||
<div className="buttonka">
|
||||
<Button href="/listings" variant="info">Click for Details</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" }}>1 Bedroom, 2 Bathroom</h2>
|
||||
<div className="buttonka">
|
||||
<Button href="/listings" variant="info">Click for Details</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" }}>1 Bedroom, 2 Bathroom</h2>
|
||||
<div className="buttonka">
|
||||
<Button href="/listings" variant="info">Click for Details</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" }}>1 Bedroom, 2 Bathroom</h2>
|
||||
<div className="buttonka">
|
||||
<Button href="/listings" variant="info">Click for Details</Button>
|
||||
</div>
|
||||
</Carousel.Caption>
|
||||
</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)}
|
||||
/>
|
||||
<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" }}>Description </h2>
|
||||
<p style={{ fontSize: "110%" }}> Welcome to Kene's Cribs. Kene's Cribs is a real estator company which provides the clients with the houses. <br></br>
|
||||
The houses limited to the clients are only limited to the clients' dreams. In order to further navigate the<br></br>
|
||||
website, use the navigation bar to switch between pages. Listings page is for browsing houses, Agents page<br></br>
|
||||
is for browsing the estators, the Contact Us page is for the contacting us and the login page is for our<br></br>
|
||||
members who want to benefit from our deals. Above are some houses which can interest you. Feel free to<br></br>
|
||||
click the buttons above to explore the houses you want. </p>
|
||||
</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>
|
||||
</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;
|
||||
|
|
|
|||
1
src/homePage/index.js
Normal file
1
src/homePage/index.js
Normal file
|
|
@ -0,0 +1 @@
|
|||
export { default } from "./homePage";
|
||||
Loading…
Add table
Add a link
Reference in a new issue