Published on: 5 March 2026
SUMMARY
.countdown-timer {
width: 100%;
max-width: 1200px;
padding: 2rem;
background-color: var(--camSlate1);
box-sizing: border-box;
}
.countdown-timer > div {
display: flex;
justify-content: center;
gap: 1rem;
width: fit-content;
margin: 0 auto 0.5rem;
}
.countdown-timer .days {
font-family: var(--fontHeading);
font-size: 2rem;
}
.countdown-timer :is(.hours, .minutes, .seconds) {
font-size: 1rem;
}
.countdown-timer h1.message {
font-size: 1.5rem;
width: 100%;
text-align: center;
}
/* Narrow */
@media (min-width: 740px) and (min-device-width: 740px), (max-device-width: 800px) and (min-width: 740px) and (orientation: landscape) {
.countdown-timer .days {
font-family: var(--fontHeading);
font-size: 4rem;
}
.countdown-timer :is(.hours, .minutes, .seconds) {
font-size: 1.5rem;
}
.countdown-timer h1.message {
font-size: 3rem;
margin: 0 auto;
}
}
until The Boat Race 2026
const timestamp = document.querySelector('[data-timestamp]').getAttribute('data-timestamp');
const countDownDate = new Date(timestamp * 1000).getTime();
// Update the countdown every 1 second.
const x = setInterval(function () {
// Get today's date and time.
const now = new Date().getTime();
// Find the distance between now and the countdown date.
const distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds.
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Display the result in the element with id="demo"
document.getElementById('days').innerHTML = days + ' days';
document.getElementById('hours').innerHTML = hours + ' hours';
document.getElementById('minutes').innerHTML = minutes + ' minutes';
document.getElementById('seconds').innerHTML = seconds + ' seconds';
// If the count down is finished, write some text
if (distance <= 0) {
clearInterval(x);
document.getElementById('countdown-timer').innerHTML = 'Bring it home, Light Blues!';
}
}, 1000);