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;
|
||||
}
|
||||
|
||||
#AboutUs #AboutEvents {
|
||||
#AboutEvents {
|
||||
flex-direction: column !important;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
padding: 2svh 2svw;
|
||||
|
@ -1,4 +1,5 @@
|
||||
import UpdateBanner from "../Header/UpdateBanner";
|
||||
import CountDownTimer from "../CountDown/CountDownTimer";
|
||||
import "./AboutUs.css";
|
||||
|
||||
/**
|
||||
@ -19,6 +20,18 @@ const AboutsUs = () => {
|
||||
<div id="AboutUs">
|
||||
<div id="AboutEvents">
|
||||
<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>
|
||||
|
@ -1,15 +1,16 @@
|
||||
#afterTime #counter {
|
||||
color: black;
|
||||
.countDownTimer #afterTime #counter {
|
||||
color: white;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
#counter.dangerDays {
|
||||
.countDownTimer #counter.dangerDays {
|
||||
background-color: red;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#counter {
|
||||
.countDownTimer #counter {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-flow: row nowrap !important;
|
||||
padding: 0.5svh 1svw;
|
||||
text-align: center;
|
||||
background-color: whitesmoke;
|
||||
@ -17,18 +18,22 @@
|
||||
border-radius: 1rem;
|
||||
justify-content: space-evenly;
|
||||
font-size: x-large;
|
||||
color: black;
|
||||
column-gap: 10px;
|
||||
}
|
||||
|
||||
#counter div {
|
||||
.countDownTimer #counter div {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-flow: row nowrap !important;
|
||||
padding: 0px;
|
||||
column-gap: 10px;
|
||||
}
|
||||
|
||||
#counter div p {
|
||||
padding-left: 1svw;
|
||||
.countDownTimer #counter div p {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
#counter .countdown-link {
|
||||
.countDownTimer #counter .countdown-link {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
@ -36,22 +41,20 @@
|
||||
font-weight: 700;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.75rem;
|
||||
padding: 0.5rem;
|
||||
border: 1px solid #ebebeb;
|
||||
border-radius: 1rem;
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
#counter .countdown {
|
||||
.countDownTimer #counter .countdown {
|
||||
line-height: 1.25svb;
|
||||
padding: 0.75rem 0.75rem;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#counter .countdownDanger {
|
||||
.countDownTimer #counter .countdownDanger {
|
||||
color: #ff0000;
|
||||
}
|
||||
|
||||
@ -61,6 +64,7 @@
|
||||
}
|
||||
|
||||
.countDownTimer {
|
||||
width: fit-content;
|
||||
margin: 0.5svh 1svw;
|
||||
width: 525px !important;
|
||||
margin: 0px !important;
|
||||
padding: 0px !important;
|
||||
}
|
||||
|
Reference in New Issue
Block a user