const FESTIVAL_YEAR = 2026;
.festival-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
margin: 40px 0;
}
.festival {
position: relative;
background: #fff;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}
.festival img {
width: 100%;
height: 180px;
object-fit: cover;
}
.badge {
position: absolute;
left: 12px;
padding: 6px 12px;
font-size: 0.75em;
font-weight: bold;
border-radius: 20px;
z-index: 2;
}
.student-fav { top: 12px; background: #ffcc00; color: #000; }
.popular { top: 44px; background: #ff3b3b; color: #fff; }
.festival-content {
padding: 18px;
text-align: center;
}
.countdown {
font-weight: bold;
margin: 10px 0 14px;
}
.festival a {
display: inline-block;
margin: 6px 4px;
padding: 8px 14px;
border-radius: 6px;
text-decoration: none;
color: #fff;
background: #6b2cff;
}
.festival a.headliners { background: #111; }
document.getElementById(“festivalYear”).innerText = FESTIVAL_YEAR;
function updateCountdowns() {
document.querySelectorAll(‘.festival’).forEach(f => {
const diff = new Date(f.dataset.date) – new Date();
f.querySelector(‘.countdown’).innerText =
diff <= 0 ? "🎉 Happening now!" : Math.floor(diff / 86400000) + " days to go";
});
}
updateCountdowns();
setInterval(updateCountdowns, 60000);
function trackFestival(name) {
const key = "festivalClicks";
const data = JSON.parse(localStorage.getItem(key) || "{}");
data[name] = (data[name] || 0) + 1;
localStorage.setItem(key, JSON.stringify(data));
if (typeof gtag === "function") {
gtag("event", "festival_click", {
event_category: "Student Festival Guide",
event_label: name
});
}
}
Student Hub Festival Guide
Your ultimate UK student festival countdown. Track dates, explore headliners, and grab tickets for the biggest festivals students actually go to.
