Changed carousel images to larger images and restyled.

This commit is contained in:
Harrison Deng 2022-04-05 01:00:25 -05:00
parent dd6dc787e9
commit 8464c4debc
7 changed files with 9 additions and 45 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 529 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 894 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 592 KiB

View File

@ -1,18 +1,17 @@
import React from "react"; import React from "react";
import { Carousel } from "react-bootstrap"; import { Carousel } from "react-bootstrap";
import "../styles/HomeCarousel.css"; export default class HomeCarousel extends React.Component {
export default class HomeCarousel extends React.Component{
constructor(props) { constructor(props) {
super(props); super(props);
} }
render() { render() {
return ( return (
<Carousel> <Carousel className="jumbotron" variant="light">
<Carousel.Item> <Carousel.Item>
<img <img
src='https://www.allanpanthera.com/wp-content/uploads/elementor/thumbs/79377445_m-o6r0ydib97moj7m7zg58w32qirim121wxt2i8thqyg.jpg' className="d-block w-100"
src='/images/volleyball_normalized.jpg'
alt="Connect Slide" alt="Connect Slide"
style={{ height: "300px", width: "2000px"}}
/> />
<Carousel.Caption> <Carousel.Caption>
<div className="captionStyle"> <div className="captionStyle">
@ -23,9 +22,9 @@ export default class HomeCarousel extends React.Component{
</Carousel.Item> </Carousel.Item>
<Carousel.Item> <Carousel.Item>
<img <img
src='http://cpadollard.com/wp-content/uploads/2018/01/cpa-dollard-fsc-banner-calendar_2000x300.jpg' className="d-block w-100"
src='/images/basketball_normalized.jpg'
alt="Schedule Slide" alt="Schedule Slide"
style={{ height: "300px", width: "2000px" }}
/> />
<Carousel.Caption> <Carousel.Caption>
<div className="captionStyle"> <div className="captionStyle">
@ -36,9 +35,9 @@ export default class HomeCarousel extends React.Component{
</Carousel.Item> </Carousel.Item>
<Carousel.Item> <Carousel.Item>
<img <img
src='https://tadvantagesites-com.cdn-convertus.com/uploads/sites/288/2019/07/Generic-Personal-Watercraft-3.jpg' src='/images/tennis_normalized.jpg'
alt="Rent Slide" alt="Rent Slide"
style={{ height: "300px", width: "2000px" }} className="d-block w-100"
/> />
<Carousel.Caption> <Carousel.Caption>
<div className="captionStyle"> <div className="captionStyle">

View File

@ -10,11 +10,7 @@ export default class Welcome extends React.Component {
render() { render() {
return ( return (
<div className="page-root"> <div className="page-root">
<div> <HomeCarousel />
{/* <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"> <div className="text-center p-3 mt-2">
<h2>Why?</h2> <h2>Why?</h2>
<p>Because you want to play the sports you love while meeting new friends!</p> <p>Because you want to play the sports you love while meeting new friends!</p>

View File

@ -1,15 +0,0 @@
.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%);
}

View File

@ -1,19 +1,3 @@
.jumbotron {
width: 100%;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 12rem;
padding-bottom: 1rem;
text-align: center;
background-size: cover;
background-color: black;
color: white;
}
.jumbotron h1 {
font-size: 1.5rem;
}
.horizontal-scroller { .horizontal-scroller {
overflow-x: scroll; overflow-x: scroll;
} }