feat(AboutEvents): added count down timers

This commit is contained in:
2025-07-05 11:17:47 -06:00
parent bef3b1ce95
commit 620afb0609
3 changed files with 35 additions and 17 deletions

View File

@ -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;

View File

@ -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>

View File

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