ydeng/sports-matcher
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #6 from csc309-winter-2022/carousel

Browse Source 
New Carousel
This commit is contained in:
Piyush Sharma 2022-04-04 23:30:36 -04:00 committed by GitHub
commit 489387ec9f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 74 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
sports-matcher/client/src/components/HomeCarousel.js Normal file
View File

@ -0,0 +1,54 @@
import React from "react";
import { Carousel } from "react-bootstrap";
import "../styles/HomeCarousel.css";
export default class HomeCarousel extends React.Component{
constructor(props) {
super(props);
}
render() {
return (
<Carousel>
<Carousel.Item>
<img
src='https://www.allanpanthera.com/wp-content/uploads/elementor/thumbs/79377445_m-o6r0ydib97moj7m7zg58w32qirim121wxt2i8thqyg.jpg'
alt="Connect Slide"
style={{ height: "300px", width: "2000px"}}
/>
<Carousel.Caption>
<div className="captionStyle">
<h1>Connect</h1>
<h2>Connect with other athletes in your area!</h2>
</div>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
<img
src='http://cpadollard.com/wp-content/uploads/2018/01/cpa-dollard-fsc-banner-calendar_2000x300.jpg'
alt="Schedule Slide"
style={{ height: "300px", width: "2000px" }}
/>
<Carousel.Caption>
<div className="captionStyle">
<h1>Schedule</h1>
<h2>Schedule sport meets with other athletes!</h2>
</div>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
<img
src='https://tadvantagesites-com.cdn-convertus.com/uploads/sites/288/2019/07/Generic-Personal-Watercraft-3.jpg'
alt="Rent Slide"
style={{ height: "300px", width: "2000px" }}
/>
<Carousel.Caption>
<div className="captionStyle">
<h1>Rent</h1>
<h2>Rent sports equipment from other athletes!</h2>
</div>
</Carousel.Caption>
</Carousel.Item>
</Carousel>
);
}
}

8
sports-matcher/client/src/pages/Welcome.js
View File

@ -1,5 +1,6 @@
import React from "react";
import { apiClient } from "../utils/httpClients";
import HomeCarousel from "../components/HomeCarousel";
export default class Welcome extends React.Component {
constructor(props) {
super(props);
@ -9,9 +10,10 @@ export default class Welcome extends React.Component {
render() {
return (
<div className="page-root">
<div className="jumbotron" >
<h1>Sports Matcher</h1>
<p>The best place to find a local match for a good game of your favourite sport!</p>
<div>
{/* <h1>Sports Matcher</h1>
<p>The best place to find a local match for a good game of your favourite sport!</p> */}
<HomeCarousel></HomeCarousel>
</div>
<div className="text-center p-3 mt-2">
<h2>Why?</h2>

15
sports-matcher/client/src/styles/HomeCarousel.css Normal file
View File

@ -0,0 +1,15 @@
.captionStyle {
background-color: seashell;
color: black;
outline: 1px solid black;
}
.carousel-control-next,
.carousel-control-prev /*, .carousel-indicators */ {
filter: invert(100%);
}
.carousel-indicators button {
filter: invert(100%);
}