<html
lang="en">
<head>
<meta
charset="UTF-8">
<meta
name="viewport" content="width=device-width,
initial-scale=1.0">
<title>FEI
WBFSH Jumping World Breeding Championship for Young Horses
Countdown</title>
<!-- Add
the FontAwesome CSS link -->
<link
rel="stylesheet"
href=https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css>
<style>
body {
font-family: "Times New Roman",
sans-serif;
background-color: #1e283e;
color: #B49652;
text-align: center;
margin: 0;
padding: 50px;
}
h1 {
font-size: 36px;
}
h2 {
font-size: 24px; /* Adjusted font size for
the date */
margin-top: -10px; /* Added margin for
spacing */
}
.countdown-container {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
margin-top: 30px;
}
.countdown-box {
background-color: #B49652;
border: 2px solid #B49652;
padding: 20px;
text-align: center;
font-size: 38px;
font-weight: bold;
color: #1e283e;
min-width: 80px;
}
.word {
font-size: 22px;
margin-top: 5px;
color: #ff;
}
.logo {
max-width: 240px;
margin-top: -10px;
}
.location {
margin-top: 10px;
display: flex;
align-items: center;
justify-content: center;
color: #B49652;
font-size: 25px;
}
</style>
</head>
<body>
<h1>FEI
WBFSH Jumping World Breeding Championship for Young Horses</h1>
<h2
style="font-size: 30px;">20-24 September 2023</h2> <!--
Larger font size for the date -->
<div
class="countdown" id="countdown">
<img class="logo"
src=https://i.postimg.cc/VNNFKRyb/General-Premium-Logo-Horses-Vertical-Gold-3x.png
alt="Logo">
<div
class="countdown-container">
<div class="countdown-box"
id="days-box">
<span id="days">00</span>
<div
class="word">Days</div>
</div>
<div class="countdown-box"
id="hours-box">
<span
id="hours">00</span>
<div
class="word">Hours</div>
</div>
<div class="countdown-box"
id="minutes-box">
<span id="minutes">00</span>
<div
class="word">Minutes</div>
</div>
<div class="countdown-box"
id="seconds-box">
<span
id="seconds">00</span>
<div
class="word">Seconds</div>
</div>
</div>
</div>
<div
class="location">
<i class="fas fa-map-marker"></i> <span>Zangersheide,
Lanaken</span>
</div>
<script>
// Set
target date and time (September 20, 2023 12:00 PM)
const
targetDate = new Date('September 20, 2023 12:00:00').getTime();
// Update
the countdown every 1 second
const
interval = setInterval(function() {
const currentDate = new Date().getTime();
const timeLeft = targetDate - currentDate;
const days = Math.floor(timeLeft / (1000 * 60
* 60 * 24));
const hours = Math.floor((timeLeft % (1000 *
60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((timeLeft % (1000
* 60 * 60)) / (1000 * 60));
const seconds = Math.floor((timeLeft % (1000
* 60)) / 1000);
document.getElementById('days').textContent =
days < 10 ? '0' + days : days;
document.getElementById('hours').textContent
= hours < 10 ? '0' + hours : hours;
document.getElementById('minutes').textContent = minutes < 10 ? '0' +
minutes : minutes;
document.getElementById('seconds').textContent = seconds < 10 ? '0' +
seconds : seconds;
// If the countdown is over, stop the
interval
if (timeLeft < 0) {
clearInterval(interval);
document.getElementById('countdown').innerHTML = 'Time has expired';
}
}, 1000);
</script>
</body>
</html>