<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Knopersfeest 2026</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
html {
scroll-behavior: smooth;
}
:root {
--groen: #39ff14;
--donkergroen: #1e6a32;
--lichtgroen: #e9ffe6;
--tekst: #222222;
--grijs: #f7f7f7;
--wit: #ffffff;
--zwart: #111111;
--schaduw: 0 12px 30px rgba(0,0,0,0.12);
}
body {
background: var(--grijs);
color: var(--tekst);
line-height: 1.6;
}
header {
position: sticky;
top: 0;
z-index: 100;
background: rgba(255,255,255,0.97);
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
padding: 18px 7%;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.logo {
font-size: 28px;
font-weight: 900;
color: var(--donkergroen);
text-transform: uppercase;
letter-spacing: 1px;
}
nav a {
color: var(--tekst);
text-decoration: none;
margin-left: 22px;
font-weight: 800;
font-size: 15px;
}
nav a:hover {
color: var(--donkergroen);
}
.ticket-fixed {
position: fixed;
right: 18px;
bottom: 18px;
z-index: 200;
background: var(--groen);
color: #000;
padding: 15px 22px;
border-radius: 999px;
font-weight: 900;
text-decoration: none;
box-shadow: var(--schaduw);
text-transform: uppercase;
}
.hero {
min-height: 82vh;
background:
linear-gradient(90deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.42) 48%, rgba(0,0,0,0.15) 100%),
url('/mnt/data/omslagfoto.png');
background-size: cover;
background-position: center;
display: flex;
align-items: center;
padding: 90px 7%;
color: white;
}
.hero-content {
max-width: 700px;
}
.label {
display: inline-block;
background: rgba(57,255,20,0.16);
color: var(--groen);
border: 2px solid var(--groen);
padding: 9px 16px;
border-radius: 999px;
font-weight: 900;
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 1px;
}
.hero h1 {
font-size: clamp(46px, 8vw, 88px);
line-height: 0.95;
margin-bottom: 22px;
color: white;
text-transform: uppercase;
text-shadow: 0 5px 22px rgba(0,0,0,0.55);
}
.hero h1 span {
color: var(--groen);
}
.hero p {
font-size: 22px;
max-width: 640px;
margin-bottom: 34px;
color: #f2f2f2;
font-weight: 600;
text-shadow: 0 3px 14px rgba(0,0,0,0.55);
}
.buttons {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.btn {
display: inline-block;
padding: 15px 28px;
border-radius: 12px;
text-decoration: none;
font-weight: 900;
text-transform: uppercase;
transition: 0.2s ease;
}
.btn-primary {
background: var(--groen);
color: #000;
box-shadow: var(--schaduw);
}
.btn-primary:hover {
transform: translateY(-3px);
}
.btn-outline {
border: 2px solid white;
color: white;
background: rgba(255,255,255,0.08);
backdrop-filter: blur(4px);
}
.ticketbar {
background: var(--donkergroen);
color: white;
padding: 26px 7%;
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.ticketbar strong {
font-size: 24px;
}
section {
padding: 75px 7%;
}
.section-title {
text-align: center;
margin-bottom: 45px;
}
.section-title h2 {
font-size: clamp(34px, 5vw, 54px);
text-transform: uppercase;
margin-bottom: 10px;
color: var(--zwart);
}
.section-title p {
color: #666;
font-size: 18px;
}
.countdown {
background: white;
}
.count-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 22px;
max-width: 900px;
margin: auto;
}
.count-box {
background: var(--lichtgroen);
border: 2px solid rgba(57,255,20,0.6);
border-radius: 20px;
padding: 30px 20px;
text-align: center;
box-shadow: var(--schaduw);
}
.count-box .number {
font-size: 48px;
font-weight: 900;
color: var(--donkergroen);
display: block;
}
.count-box .text {
font-weight: 900;
text-transform: uppercase;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 26px;
}
.card {
background: white;
border-radius: 22px;
overflow: hidden;
box-shadow: var(--schaduw);
transition: 0.25s ease;
border: 1px solid #eeeeee;
}
.card:hover {
transform: translateY(-6px);
}
.card img {
width: 100%;
height: 230px;
object-fit: cover;
display: block;
}
.card-content {
padding: 24px;
}
.date {
color: var(--donkergroen);
font-weight: 900;
text-transform: uppercase;
font-size: 14px;
margin-bottom: 6px;
}
.card h3 {
font-size: 26px;
margin-bottom: 10px;
color: var(--zwart);
}
.card p {
color: #555;
}
.kids {
background: var(--lichtgroen);
}
.kids-card {
text-align: center;
padding: 35px 25px;
}
.icon {
font-size: 52px;
margin-bottom: 15px;
}
.gallery {
background: white;
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
}
.gallery-grid img {
width: 100%;
height: 210px;
object-fit: cover;
border-radius: 18px;
box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}
.sponsors {
background: white;
}
.sponsor-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 20px;
}
.sponsor {
background: var(--grijs);
border-radius: 16px;
padding: 28px 15px;
text-align: center;
font-weight: 900;
color: #555;
border: 1px solid #e5e5e5;
}
.contact {
background: linear-gradient(135deg, var(--donkergroen), #103b1f);
color: white;
text-align: center;
}
.contact h2,
.contact .section-title p {
color: white;
}
.contact-box {
max-width: 760px;
margin: auto;
background: rgba(255,255,255,0.10);
border-radius: 22px;
padding: 35px;
border: 1px solid rgba(255,255,255,0.2);
}
.contact-box p {
margin: 10px 0;
font-size: 18px;
}
footer {
background: #111;
color: #cccccc;
text-align: center;
padding: 28px 7%;
}
footer strong {
color: var(--groen);
}
@media (max-width: 760px) {
header {
justify-content: center;
text-align: center;
}
nav {
margin-top: 12px;
}
nav a {
margin: 7px;
display: inline-block;
}
.hero {
min-height: 75vh;
background:
linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.45)),
url('/mnt/data/omslagfoto.png');
background-size: cover;
background-position: center;
text-align: center;
justify-content: center;
}
.buttons,
.ticketbar {
justify-content: center;
text-align: center;
}
}
</style>
</head>
<body>
<a href="https://knopersfeest.nl/tickets/" class="ticket-fixed">Tickets</a>
<header>
<div class="logo">Knopersfeest</div>
<nav>
<a href="#home">Home</a>
<a href="#programma">Programma</a>
<a href="#kids">Kinderen</a>
<a href="#fotos">Foto's</a>
<a href="#sponsors">Sponsors</a>
<a href="#contact">Contact</a>
</nav>
</header>
<main id="home">
<section class="hero">
<div class="hero-content">
<div class="label">13 & 14 juni 2026</div>
<h1>Knopersfeest <span>2026</span></h1>
<p>Een weekend vol muziek, gezelligheid, kinderactiviteiten en feest in de tent.</p>
<div class="buttons">
<a href="https://knopersfeest.nl/tickets/" class="btn btn-primary">Tickets bestellen</a>
<a href="#programma" class="btn btn-outline">Programma bekijken</a>
</div>
</div>
</section>
<div class="ticketbar">
<div>
<strong>🎟️ De ticketverkoop is gestart!</strong><br />
Bestel nu je tickets en voorkom teleurstelling.
</div>
<a href="https://knopersfeest.nl/tickets/" class="btn btn-primary">Koop tickets</a>
</div>
<section class="countdown">
<div class="section-title">
<h2>Aftellen tot Knopersfeest</h2>
<p>Nog even wachten tot het feestweekend begint.</p>
</div>
<div class="count-grid">
<div class="count-box"><span class="number" id="days">00</span><span class="text">Dagen</span></div>
<div class="count-box"><span class="number" id="hours">00</span><span class="text">Uren</span></div>
<div class="count-box"><span class="number" id="minutes">00</span><span class="text">Minuten</span></div>
<div class="count-box"><span class="number" id="seconds">00</span><span class="text">Seconden</span></div>
</div>
</section>
<section id="programma">
<div class="section-title">
<h2>Programma & artiesten</h2>
<p>Bekijk alvast een deel van het programma.</p>
</div>
<div class="grid">
<article class="card">
<img src="https://knopersfeest.nl/wp-content/uploads/2025/11/470635741_585849047143951_4869867813315609665_n.jpg" alt="Sven Versteeg" />
<div class="card-content">
<div class="date">Vrijdag 13 juni</div>
<h3>Sven Versteeg</h3>
<p>Een feestelijke show waarmee de tent direct goed los gaat.</p>
</div>
</article>
<article class="card">
<img src="https://knopersfeest.nl/wp-content/uploads/2025/11/likke.jpg" alt="Likke Pehp" />
<div class="card-content">
<div class="date">Vrijdag 13 juni</div>
<h3>Likke Pêhp</h3>
<p>Bekend om energie, feest en meezingers in de tent.</p>
</div>
</article>
<article class="card">
<img src="https://knopersfeest.nl/wp-content/uploads/2025/11/fons-veurink-welkom-800.jpg" alt="Fons Veurink" />
<div class="card-content">
<div class="date">Vrijdag 13 juni</div>
<h3>Fons Veurink</h3>
<p>Gezelligheid en herkenbare muziek voor een volle feesttent.</p>
</div>
</article>
<article class="card">
<img src="https://knopersfeest.nl/wp-content/uploads/2025/11/viIrat6w.jpg" alt="DJ Winston Black" />
<div class="card-content">
<div class="date">Zaterdag 14 juni</div>
<h3>DJ Winston Black</h3>
<p>Een knallende DJ-set om de avond compleet te maken.</p>
</div>
</article>
</div>
</section>
<section class="kids" id="kids">
<div class="section-title">
<h2>Kinderactiviteiten</h2>
<p>Ook voor de kinderen is er genoeg te beleven.</p>
</div>
<div class="grid">
<div class="card kids-card">
<div class="icon">🎉</div>
<h3>Kinderdisco</h3>
<p>Dansen, muziek en plezier voor de jongste feestgangers.</p>
</div>
<div class="card kids-card">
<div class="icon">🔫</div>
<h3>Lasergamen</h3>
<p>Een stoere activiteit vol actie en spanning.</p>
</div>
<div class="card kids-card">
<div class="icon">🪙</div>
<h3>Schatgraven</h3>
<p>Zoeken naar schatten in het zand. Leuk voor ieder kind.</p>
</div>
</div>
</section>
<section class="gallery" id="fotos">
<div class="section-title">
<h2>Foto's vorige editie</h2>
<p>Proef alvast de sfeer van eerdere jaren.</p>
</div>
<div class="gallery-grid">
<img src="/mnt/data/omslagfoto.png" alt="Knopersfeest foto" />
<img src="https://knopersfeest.nl/wp-content/uploads/2025/11/Knopersfeest-2025-59.jpg" alt="Knopersfeest foto" />
<img src="https://knopersfeest.nl/wp-content/uploads/2025/11/Knopersfeest-2025-66.jpg" alt="Knopersfeest foto" />
<img src="https://knopersfeest.nl/wp-content/uploads/2025/11/Knopersfeest-2025-62.jpg" alt="Knopersfeest foto" />
</div>
</section>
<section class="sponsors" id="sponsors">
<div class="section-title">
<h2>Onze sponsoren</h2>
<p>Dankzij onze sponsoren kunnen wij dit feest mogelijk maken.</p>
</div>
<div class="sponsor-grid">
<div class="sponsor">Sponsor logo</div>
<div class="sponsor">Sponsor logo</div>
<div class="sponsor">Sponsor logo</div>
<div class="sponsor">Sponsor logo</div>
<div class="sponsor">Sponsor logo</div>
<div class="sponsor">Sponsor logo</div>
</div>
</section>
<section class="contact" id="contact">
<div class="section-title">
<h2>Contact</h2>
<p>Heb je vragen of wil je sponsor worden?</p>
</div>
<div class="contact-box">
<p><strong>Email:</strong> info@knopersfeest.nl</p>
<p><strong>Website:</strong> www.knopersfeest.nl</p>
<p><strong>Volg ons:</strong> Facebook & Instagram</p>
<br />
<a href="mailto:info@knopersfeest.nl" class="btn btn-primary">Stuur een bericht</a>
</div>
</section>
</main>
<footer>
<p><strong>Knopersfeest 2026</strong> — 13 & 14 juni 2026</p>
<p>© 2026 Knopersfeest. Alle rechten voorbehouden.</p>
</footer>
<script>
const targetDate = new Date('2026-06-13T18:00:00').getTime();
function updateCountdown() {
const now = new Date().getTime();
const distance = targetDate - now;
if (distance < 0) {
document.getElementById('days').innerText = '00';
document.getElementById('hours').innerText = '00';
document.getElementById('minutes').innerText = '00';
document.getElementById('seconds').innerText = '00';
return;
}
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);
document.getElementById('days').innerText = String(days).padStart(2, '0');
document.getElementById('hours').innerText = String(hours).padStart(2, '0');
document.getElementById('minutes').innerText = String(minutes).padStart(2, '0');
document.getElementById('seconds').innerText = String(seconds).padStart(2, '0');
}
updateCountdown();
setInterval(updateCountdown, 1000);
</script>
</body>
</html>
