Created
April 8, 2026 13:02
-
-
Save pierot/99929d29d318dfec82890b61fc3f3fa5 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="nl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>30 Spannendste Restaurants van Antwerpen</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=DM+Sans:wght@400;500;600&display=swap" rel="stylesheet"> | |
| <style> | |
| * { margin: 0; padding: 0; box-sizing: border-box; } | |
| :root { | |
| --bg: #f5f0eb; | |
| --card: #fff; | |
| --text: #1a1a1a; | |
| --muted: #6b6460; | |
| --accent: #c0392b; | |
| --border: #e0d8d0; | |
| --tag-bg: #f0e8e0; | |
| } | |
| body { | |
| font-family: 'DM Sans', sans-serif; | |
| background: var(--bg); | |
| color: var(--text); | |
| line-height: 1.6; | |
| padding: 0 16px; | |
| } | |
| header { | |
| max-width: 720px; | |
| margin: 60px auto 20px; | |
| text-align: center; | |
| } | |
| header p.source { | |
| font-size: 12px; | |
| text-transform: uppercase; | |
| letter-spacing: 2px; | |
| color: var(--accent); | |
| margin-bottom: 12px; | |
| font-weight: 600; | |
| } | |
| h1 { | |
| font-family: 'Playfair Display', serif; | |
| font-size: clamp(28px, 5vw, 44px); | |
| font-weight: 700; | |
| line-height: 1.15; | |
| margin-bottom: 16px; | |
| } | |
| header .intro { | |
| color: var(--muted); | |
| font-size: 15px; | |
| max-width: 520px; | |
| margin: 0 auto; | |
| } | |
| .filters { | |
| max-width: 720px; | |
| margin: 28px auto 8px; | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| justify-content: center; | |
| } | |
| .filters button { | |
| font-family: 'DM Sans', sans-serif; | |
| font-size: 13px; | |
| padding: 6px 14px; | |
| border: 1px solid var(--border); | |
| border-radius: 20px; | |
| background: transparent; | |
| color: var(--muted); | |
| cursor: pointer; | |
| transition: all .2s; | |
| } | |
| .filters button:hover, | |
| .filters button.active { | |
| background: var(--text); | |
| color: #fff; | |
| border-color: var(--text); | |
| } | |
| .count { | |
| max-width: 720px; | |
| margin: 16px auto 0; | |
| font-size: 13px; | |
| color: var(--muted); | |
| text-align: center; | |
| } | |
| .list { | |
| max-width: 720px; | |
| margin: 24px auto 80px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| } | |
| .card { | |
| background: var(--card); | |
| border-radius: 10px; | |
| padding: 20px 24px; | |
| display: grid; | |
| grid-template-columns: 36px 1fr auto; | |
| gap: 0 16px; | |
| align-items: start; | |
| border: 1px solid var(--border); | |
| transition: box-shadow .2s, transform .15s; | |
| text-decoration: none; | |
| color: inherit; | |
| } | |
| .card:hover { | |
| box-shadow: 0 4px 20px rgba(0,0,0,.07); | |
| transform: translateY(-1px); | |
| } | |
| .card .num { | |
| font-family: 'Playfair Display', serif; | |
| font-size: 22px; | |
| font-weight: 700; | |
| color: var(--accent); | |
| line-height: 1.3; | |
| } | |
| .card .body { min-width: 0; } | |
| .card .name { | |
| font-family: 'Playfair Display', serif; | |
| font-size: 19px; | |
| font-weight: 700; | |
| line-height: 1.3; | |
| } | |
| .card .desc { | |
| font-size: 14px; | |
| color: var(--muted); | |
| margin-top: 4px; | |
| line-height: 1.5; | |
| } | |
| .card .tags { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 6px; | |
| margin-top: 8px; | |
| } | |
| .card .tag { | |
| font-size: 11px; | |
| font-weight: 500; | |
| padding: 3px 9px; | |
| background: var(--tag-bg); | |
| border-radius: 4px; | |
| color: var(--muted); | |
| white-space: nowrap; | |
| } | |
| .card .rating { | |
| font-size: 13px; | |
| font-weight: 600; | |
| white-space: nowrap; | |
| color: var(--text); | |
| text-align: right; | |
| padding-top: 2px; | |
| } | |
| .card .rating span { | |
| color: #e6a817; | |
| } | |
| .card .link { | |
| font-size: 12px; | |
| color: var(--accent); | |
| text-decoration: none; | |
| display: inline-block; | |
| margin-top: 6px; | |
| } | |
| .card .link:hover { text-decoration: underline; } | |
| .empty { | |
| text-align: center; | |
| padding: 40px; | |
| color: var(--muted); | |
| font-style: italic; | |
| } | |
| @media (max-width: 500px) { | |
| .card { grid-template-columns: 28px 1fr; } | |
| .card .rating { grid-column: 2; margin-top: 6px; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <p class="source">De Morgen · 3 april 2026</p> | |
| <h1>De 30 spannendste restaurants van Antwerpen</h1> | |
| <p class="intro">Van ambachtelijke tartaar van kalfshersenen tot Afghaanse mantu's en Tibetaanse momo's.</p> | |
| </header> | |
| <div class="filters" id="filters"></div> | |
| <div class="count" id="count"></div> | |
| <div class="list" id="list"></div> | |
| <script> | |
| const restaurants = [ | |
| { n: 1, name: "And/Or", desc: "Plant based, chef Karen Shu (ex-Jean-Georges NYC). Brede toog, beperkt aantal tafels.", tags: ["Plant based"], rating: 4.8, url: "http://andorantwerp.com/" }, | |
| { n: 2, name: "Bar Misera", desc: "Laagdrempelige bistro van sterrenchef Nicolas Misera. Franse klassiekers, Parijse sfeer.", tags: ["Frans", "Bistro"], rating: 4.6, url: "https://barmisera.com/" }, | |
| { n: 3, name: "Bar Pêche", desc: "16 plaatsen, 3 voor- en 3 hoofdgerechten. Chef Semmy Roumans. Geen sharing.", tags: ["Seizoensgebonden"], rating: 4.9, url: "http://www.barpeche.be/" }, | |
| { n: 4, name: "Bistrot Du Nord", desc: "Vlaams-Franse keuken, chef Michaël Rewers. Tartaar van kalfshersenen, oude melkkoe.", tags: ["Frans", "Klassiek"], rating: 4.8, url: "http://www.bistrotdunord.be/" }, | |
| { n: 5, name: "Bloesem", desc: "15-gangenmenu voor 12 gasten. Chefs Nebo Schamp & Brend Geudens. Moeilijk te boeken.", tags: ["Fine dining"], rating: 4.9, url: "https://www.restaurantbloesem.com/" }, | |
| { n: 6, name: "Café Commercial", desc: "Lokaal & seizoensgebonden, chef Davy Schellemans. Brioche met langoustine.", tags: ["Seizoensgebonden", "Bistro"], rating: 4.7, url: "https://cafecommercial.be/" }, | |
| { n: 7, name: "Café Service", desc: "Voormalig café Stanny in Berchem. Strozzapreti met witte ragù.", tags: ["Bistro"], rating: 4.6, url: "http://www.cafe-service.be/" }, | |
| { n: 8, name: "Camionette", desc: "Plantaardig, fermentatie en korte keten in het Groen Kwartier.", tags: ["Plant based"], rating: 4.7, url: "https://www.camion-ette.be/" }, | |
| { n: 9, name: "Cobra House", desc: "90+ couverts, internationale kaart. Van wagyuburger tot pasta king crab.", tags: ["Internationaal"], rating: 4.6, url: "https://cobra-house.com/" }, | |
| { n: 10, name: "De Arme Duivel", desc: "Volkse bistro, steak tartaar, kaaskroketten. Stoofvlees volgens geheim recept.", tags: ["Belgisch", "Bistro"], rating: 4.5, url: "http://www.armeduivel.be/" }, | |
| { n: 11, name: "Eppo", desc: "Buurtrestaurant, vis/vlees/vegan. 4-gangenmenu van de chef. Bib Gourmand.", tags: ["Buurtrestaurant"], rating: 4.7, url: "https://www.eppo-resto.com/" }, | |
| { n: 12, name: "Fiskeskur", desc: "Visbar aan het Kattendijkdok. Open vuur, terras aan het water.", tags: ["Vis"], rating: 4.3, url: "http://www.fiskeskur.be/" }, | |
| { n: 13, name: "Giraffe", desc: "Aperitiefbar in Italiaanse stijl. Zussen Hanan & Touba. Wijn, cocktails, hapjes.", tags: ["Aperitiefbar"], rating: 4.8, url: "https://maps.google.com/?cid=721766702992946789" }, | |
| { n: 14, name: "Glou Glou", desc: "Natuurwijnbar, Frans-Aziatische keuken. Mooie zaak, professionele bediening.", tags: ["Wijnbar", "Frans-Aziatisch"], rating: 4.7, url: "https://glouglou-borgerhout.be/" }, | |
| { n: 15, name: "I Ro Ha", desc: "Japans, chef Kiyoshi & Mineko. Alles met z'n tweetjes. Bedrieglijk eenvoudig.", tags: ["Japans"], rating: 4.8, url: "https://maps.google.com/?cid=18204304502374239026" }, | |
| { n: 16, name: "InVINcible", desc: "Nose-to-tail, spit, chef Kenny Burssens. 20+ jaar ambachtelijk vlees.", tags: ["Vlees", "Klassiek"], rating: 4.6, url: "http://www.invincible.be/" }, | |
| { n: 17, name: "Kunthun 2", desc: "Tibetaans. Verse momo's, kitscherig interieur. Zeer betaalbaar.", tags: ["Tibetaans", "Budget"], rating: 4.6, url: "https://www.facebook.com/Kunthun-2-100259369213709" }, | |
| { n: 18, name: "Le Oui", desc: "Microrestaurant, 5 tafels. Chef Louis Broos doet alles zelf. Geen à la carte.", tags: ["Fine dining"], rating: 4.9, url: "https://www.leoui.be/" }, | |
| { n: 19, name: "Licoli", desc: "Napolitaanse zuurdesempizza. Chef Luca Fabozzi. Creatieve toppings.", tags: ["Pizza"], rating: 4.6, url: "https://licoliantwerp.com/" }, | |
| { n: 20, name: "LIMA Nikkei", desc: "Peruaans-Japans, chef Diego Salas. Sushi én ceviche.", tags: ["Peruaans-Japans"], rating: 4.7, url: "http://www.limanikkei.be/" }, | |
| { n: 21, name: "Mantu", desc: "Afghaans familierestaurant. Compacte kaart. Dumplings met yoghurtsaus.", tags: ["Afghaans", "Budget"], rating: 5.0, url: "https://www.instagram.com/mantu.antwerp" }, | |
| { n: 22, name: "Nage", desc: "Frans-hedendaags in voormalig pakhuis, Seefhoek. Niki Van Sant & Koen Lenaerts.", tags: ["Frans"], rating: 4.5, url: "http://www.restaurantnage.be/" }, | |
| { n: 23, name: "Ni Shifu", desc: "Sichuan, Chinatown. Chef Ni Xue Long. Pikant. Altijd vol, reserveren.", tags: ["Chinees", "Budget"], rating: 4.6, url: "https://www.nishifu.be/" }, | |
| { n: 24, name: "Picniq", desc: "Koreaans, strak interieur. Elk gerecht een kunstwerk. Sharing voor twee.", tags: ["Koreaans"], rating: 4.5, url: "http://picniq.be/" }, | |
| { n: 25, name: "Plump", desc: "Smashburgers. De classic is fenomenaal. Minimale toppings, maximale smaak.", tags: ["Burgers"], rating: 4.6, url: "http://plump.be/" }, | |
| { n: 26, name: "PrivéPrivée", desc: "Sergio Herman, €530 pp (drank inbegrepen). Reserveren via WhatsApp.", tags: ["Fine dining"], rating: 5.0, url: "https://sergiohermangroup.com/brands/priveprivee" }, | |
| { n: 27, name: "Samenloop", desc: "Sociaal project, leidt nieuwkomers op voor de horeca. Wisselende curatoren.", tags: ["Sociaal", "Internationaal"], rating: 4.6, url: "http://www.samenloop.be/" }, | |
| { n: 28, name: "Spiridon", desc: "Wijnbar, Kronenburgstraat. Gordal-olijven, 72h-focaccia, Holstein-entrecôte.", tags: ["Wijnbar"], rating: 4.5, url: "http://spiridon-antwerp.be/" }, | |
| { n: 29, name: "Tawan", desc: "Authentiek Thais, 14+ jaar. Stationsbuurt. Niet mooi, wel lekker.", tags: ["Thais", "Budget"], rating: 4.5, url: "http://www.tawan.be/" }, | |
| { n: 30, name: "The Jane", desc: "Nick Bril, tastingmenu. Nieuwe locatie sinds herfst 2025. Dry aging, lactofermentatie.", tags: ["Fine dining"], rating: 4.6, url: "https://www.thejaneantwerp.com/" } | |
| ]; | |
| const allTags = [...new Set(restaurants.flatMap(r => r.tags))].sort(); | |
| let activeTag = null; | |
| function render() { | |
| const filtered = activeTag | |
| ? restaurants.filter(r => r.tags.includes(activeTag)) | |
| : restaurants; | |
| document.getElementById("count").textContent = | |
| filtered.length === 30 ? "30 restaurants" : `${filtered.length} van 30 restaurants`; | |
| const list = document.getElementById("list"); | |
| if (!filtered.length) { | |
| list.innerHTML = '<div class="empty">Geen restaurants gevonden.</div>'; | |
| return; | |
| } | |
| list.innerHTML = filtered.map(r => ` | |
| <div class="card"> | |
| <div class="num">${r.n}</div> | |
| <div class="body"> | |
| <div class="name">${r.name}</div> | |
| <div class="desc">${r.desc}</div> | |
| <div class="tags">${r.tags.map(t => `<span class="tag">${t}</span>`).join("")}</div> | |
| <a class="link" href="${r.url}" target="_blank" rel="noopener">Website →</a> | |
| </div> | |
| <div class="rating"><span>★</span> ${r.rating}</div> | |
| </div> | |
| `).join(""); | |
| } | |
| function renderFilters() { | |
| const el = document.getElementById("filters"); | |
| el.innerHTML = `<button class="${!activeTag ? "active" : ""}" data-tag="">Alles</button>` + | |
| allTags.map(t => | |
| `<button class="${activeTag === t ? "active" : ""}" data-tag="${t}">${t}</button>` | |
| ).join(""); | |
| el.querySelectorAll("button").forEach(btn => { | |
| btn.addEventListener("click", () => { | |
| activeTag = btn.dataset.tag || null; | |
| renderFilters(); | |
| render(); | |
| }); | |
| }); | |
| } | |
| renderFilters(); | |
| render(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment