ydeng/csc309-team58
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added New Carousel

Browse Source
This commit is contained in:
Piyush Sharma 2022-04-04 23:06:59 -04:00
parent ba566040b1
commit 3124f05544
3 changed files with 64 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 React from "react";
import { apiClient } from "../utils/httpClients"; import { apiClient } from "../utils/httpClients";
import HomeCarousel from "../components/HomeCarousel";
export default class Welcome extends React.Component { export default class Welcome extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
@ -9,9 +10,10 @@ export default class Welcome extends React.Component {
render() { render() {
return ( return (
<div className="page-root"> <div className="page-root">
<div className="jumbotron" > <div>
<h1>Sports Matcher</h1> {/* <h1>Sports Matcher</h1>
<p>The best place to find a local match for a good game of your favourite sport!</p> <p>The best place to find a local match for a good game of your favourite sport!</p> */}
<HomeCarousel></HomeCarousel>
</div> </div>
<div className="text-center p-3 mt-2"> <div className="text-center p-3 mt-2">
<h2>Why?</h2> <h2>Why?</h2>

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

@ -0,0 +1,5 @@
.captionStyle {
background-color: seashell;
color: black;
outline: 1px solid black;
}