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
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>
);
}
}