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

Added updates to the carousel.

Browse source
This commit is contained in:
Arctichawk1 2021-04-02 09:34:24 -04:00
parent a468809d5b
commit 6b81eb814c
4 changed files with 119 additions and 20522 deletions
Download patch file Download diff file Expand all files Collapse all files

20559
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

2
package.json
View file

@ -6,11 +6,13 @@
"@testing-library/jest-dom": "^5.11.10",
"@testing-library/react": "^11.2.5",
"@testing-library/user-event": "^12.8.3",
"axios": "^0.21.1",
"bootstrap": "^4.6.0",
"react": "^17.0.2",
"react-bootstrap": "^1.5.2",
"react-bootstrap-carousel": "^4.1.1",
"react-dom": "^17.0.2",
"react-fa": "^5.0.0",
"react-google-maps": "^9.4.5",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",

61
src/homePage/Homepage.css
View file

@ -69,7 +69,64 @@
padding-top: 15px;
}
.Buttonka{
.buttonka{
padding-top: 2px;
padding-bottom: 6px;
}
.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;
}

19
src/homePage/Homepage.js
View file

@ -7,6 +7,8 @@ import Carousel from "react-bootstrap/Carousel";
import Button from "react-bootstrap/Button";
import axios from 'axios'
class Homepage extends Component {
constructor(props) {
super(props);
@ -15,10 +17,13 @@ class Homepage extends Component {
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">
@ -33,12 +38,12 @@ class Homepage extends Component {
</section>
<section className="white-section" id="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={{textShadow: "3px 3px 5px black"}}>360 Michawashkode St, Ottawa, Ontario K4A 3N6</h3>
<div className="Buttonka">
<h3 style={{ fontSize: "250%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>360 Michawashkode St, Ottawa, Ontario K4A 3N6</h3>
<div className="buttonka">
<Button href="/listings" variant="info">Click for Details</Button>
</div>
</Carousel.Caption>
@ -46,8 +51,8 @@ class Homepage extends Component {
<Carousel.Item>
<img className="headerImg" src={house2} alt="Second House" />
<Carousel.Caption>
<h3 style={{textShadow: "3px 3px 5px black"}}>6865 PEBBLE TRAIL WAY, Ottawa, Ontario K4P 0B7</h3>
<div className="Buttonka">
<h3 style={{ fontSize: "250%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>6865 PEBBLE TRAIL WAY, Ottawa, Ontario K4P 0B7</h3>
<div className="buttonka">
<Button href="/listings" variant="info">Click for Details</Button>
</div>
</Carousel.Caption>
@ -55,8 +60,8 @@ class Homepage extends Component {
<Carousel.Item>
<img className="headerImg" src={house3} alt="Third House" />
<Carousel.Caption>
<h3 style={{textShadow: "3px 3px 5px black"}}>5284 Knott Crescent, Ottawa, Ontario K4M 0A2</h3>
<div className="Buttonka">
<h3 style={{ fontSize: "250%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>5284 Knott Crescent, Ottawa, Ontario K4M 0A2</h3>
<div className="buttonka">
<Button href="/listings" variant="info">Click for Details</Button>
</div>
</Carousel.Caption>