mirror of
https://github.com/UofCBaja/BajaUofCWebsite.git
synced 2025-07-10 13:17:13 -06:00
feat(AboutEvents): added count down timers
This commit is contained in:
@ -19,7 +19,8 @@
|
|||||||
border-bottom: solid 3px white;
|
border-bottom: solid 3px white;
|
||||||
}
|
}
|
||||||
|
|
||||||
#AboutUs #AboutEvents {
|
#AboutEvents {
|
||||||
|
flex-direction: column !important;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
padding: 2svh 2svw;
|
padding: 2svh 2svw;
|
||||||
|
@ -1,4 +1,5 @@
|
|||||||
import UpdateBanner from "../Header/UpdateBanner";
|
import UpdateBanner from "../Header/UpdateBanner";
|
||||||
|
import CountDownTimer from "../CountDown/CountDownTimer";
|
||||||
import "./AboutUs.css";
|
import "./AboutUs.css";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -19,6 +20,18 @@ const AboutsUs = () => {
|
|||||||
<div id="AboutUs">
|
<div id="AboutUs">
|
||||||
<div id="AboutEvents">
|
<div id="AboutEvents">
|
||||||
<h2>Upcoming Events</h2>
|
<h2>Upcoming Events</h2>
|
||||||
|
<h4>Baja SAE April</h4>
|
||||||
|
<CountDownTimer
|
||||||
|
dateFinished={new Date("April 29, 2026 00:00:00")}
|
||||||
|
messageDisplayBefore={""}
|
||||||
|
messageDisplayAfter={<p>Wish Us Luck!</p>}
|
||||||
|
/>
|
||||||
|
<h4>Baja SAE May</h4>
|
||||||
|
<CountDownTimer
|
||||||
|
dateFinished={new Date("May 22, 2026 00:00:00")}
|
||||||
|
messageDisplayBefore={""}
|
||||||
|
messageDisplayAfter={<p>Ready! Set! Go!</p>}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<div>
|
<div>
|
||||||
|
@ -1,15 +1,16 @@
|
|||||||
#afterTime #counter {
|
.countDownTimer #afterTime #counter {
|
||||||
color: black;
|
color: white;
|
||||||
background-color: red;
|
background-color: red;
|
||||||
}
|
}
|
||||||
|
|
||||||
#counter.dangerDays {
|
.countDownTimer #counter.dangerDays {
|
||||||
background-color: red;
|
background-color: red;
|
||||||
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
#counter {
|
.countDownTimer #counter {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-flow: row nowrap !important;
|
||||||
padding: 0.5svh 1svw;
|
padding: 0.5svh 1svw;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background-color: whitesmoke;
|
background-color: whitesmoke;
|
||||||
@ -17,18 +18,22 @@
|
|||||||
border-radius: 1rem;
|
border-radius: 1rem;
|
||||||
justify-content: space-evenly;
|
justify-content: space-evenly;
|
||||||
font-size: x-large;
|
font-size: x-large;
|
||||||
|
color: black;
|
||||||
|
column-gap: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#counter div {
|
.countDownTimer #counter div {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-flow: row nowrap !important;
|
||||||
|
padding: 0px;
|
||||||
|
column-gap: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#counter div p {
|
.countDownTimer #counter div p {
|
||||||
padding-left: 1svw;
|
padding: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#counter .countdown-link {
|
.countDownTimer #counter .countdown-link {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@ -36,22 +41,20 @@
|
|||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-size: 1.25rem;
|
font-size: 1.25rem;
|
||||||
line-height: 1.75rem;
|
line-height: 1.75rem;
|
||||||
padding: 0.5rem;
|
|
||||||
border: 1px solid #ebebeb;
|
border: 1px solid #ebebeb;
|
||||||
border-radius: 1rem;
|
border-radius: 1rem;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: #000;
|
color: #000;
|
||||||
}
|
}
|
||||||
|
|
||||||
#counter .countdown {
|
.countDownTimer #counter .countdown {
|
||||||
line-height: 1.25svb;
|
line-height: 1.25svb;
|
||||||
padding: 0.75rem 0.75rem;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
#counter .countdownDanger {
|
.countDownTimer #counter .countdownDanger {
|
||||||
color: #ff0000;
|
color: #ff0000;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -61,6 +64,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.countDownTimer {
|
.countDownTimer {
|
||||||
width: fit-content;
|
width: 525px !important;
|
||||||
margin: 0.5svh 1svw;
|
margin: 0px !important;
|
||||||
|
padding: 0px !important;
|
||||||
}
|
}
|
||||||
|
Reference in New Issue
Block a user