Felix’ LEGO Webshop<\/title>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n <style>\n \/* ===== Kleuren makkelijk aanpasbaar ===== *\/\n :root {\n --primary: #27ae60; \/* hoofdgroen *\/\n --primary-soft: #e3f9ec; \/* lichte groene achtergrond *\/\n --accent: #2ecc71; \/* accentgroen *\/\n --bg: #f4fbf7; \/* pagina achtergrond *\/\n --text-dark: #1f2933;\n --text-soft: #5f6c7b;\n }\n\n \/* ===== Basisstijl ===== *\/\n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n\n body {\n font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\",\n sans-serif;\n background: var(--bg);\n color: var(--text-dark);\n line-height: 1.5;\n }\n\n a {\n text-decoration: none;\n color: inherit;\n }\n\n img {\n max-width: 100%;\n display: block;\n }\n\n \/* ===== Layout ===== *\/\n .page {\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n }\n\n header {\n background: linear-gradient(135deg, var(--primary), var(--accent));\n color: #fff;\n padding: 1rem 2rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n }\n\n .logo {\n display: flex;\n align-items: center;\n gap: 0.6rem;\n font-weight: 700;\n font-size: 1.3rem;\n }\n\n .logo-badge {\n width: 36px;\n height: 36px;\n border-radius: 8px;\n background: #fff;\n color: var(--primary);\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 900;\n box-shadow: 0 2px 4px rgba(0,0,0,0.15);\n }\n\n nav ul {\n display: flex;\n list-style: none;\n gap: 1rem;\n font-size: 0.95rem;\n }\n\n nav li {\n padding: 0.3rem 0.7rem;\n border-radius: 999px;\n transition: background 0.2s, transform 0.1s;\n cursor: pointer;\n }\n\n nav li:hover {\n background: rgba(255, 255, 255, 0.25);\n transform: translateY(-1px);\n }\n\n main {\n flex: 1;\n padding: 1.5rem 2rem 2.5rem;\n display: grid;\n grid-template-columns: minmax(0, 3fr) minmax(260px, 1fr);\n gap: 1.5rem;\n }\n\n @media (max-width: 900px) {\n main {\n grid-template-columns: 1fr;\n }\n }\n\n \/* ===== Hero blok ===== *\/\n .hero {\n background: #ffffff;\n border-radius: 16px;\n padding: 1.5rem;\n margin-bottom: 1.5rem;\n display: flex;\n flex-wrap: wrap;\n gap: 1.5rem;\n align-items: center;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);\n }\n\n .hero-text {\n flex: 2 1 220px;\n }\n\n .hero-text h1 {\n font-size: 1.8rem;\n margin-bottom: 0.5rem;\n }\n\n .hero-text p {\n font-size: 0.98rem;\n margin-bottom: 1rem;\n color: var(--text-soft);\n }\n\n .hero-highlight {\n display: inline-block;\n background: var(--primary-soft);\n border-radius: 999px;\n padding: 0.3rem 0.8rem;\n font-size: 0.8rem;\n margin-bottom: 0.6rem;\n color: var(--primary);\n font-weight: 600;\n }\n\n .hero-btns {\n display: flex;\n gap: 0.7rem;\n flex-wrap: wrap;\n }\n\n .btn-primary,\n .btn-secondary {\n border-radius: 999px;\n padding: 0.6rem 1.1rem;\n font-size: 0.9rem;\n border: none;\n cursor: pointer;\n font-weight: 600;\n }\n\n .btn-primary {\n background: var(--primary);\n color: white;\n box-shadow: 0 3px 10px rgba(39, 174, 96, 0.4);\n }\n\n .btn-primary:hover {\n filter: brightness(1.05);\n }\n\n .btn-secondary {\n background: #e7f5ec;\n color: var(--text-dark);\n }\n\n .btn-secondary:hover {\n background: #d8efe2;\n }\n\n .hero-illustration {\n flex: 1 1 160px;\n min-width: 160px;\n display: flex;\n justify-content: center;\n }\n\n .hero-box {\n width: 150px;\n height: 150px;\n border-radius: 24px;\n background:\n linear-gradient(135deg, #a8e6cf, #dcedc1);\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n grid-template-rows: repeat(2, 1fr);\n gap: 4px;\n padding: 8px;\n }\n\n .lego-brick {\n border-radius: 8px;\n background: var(--primary);\n position: relative;\n }\n\n .lego-brick::before,\n .lego-brick::after {\n content: \"\";\n position: absolute;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background: #2ecc71;\n top: 4px;\n }\n\n .lego-brick::before {\n left: 6px;\n }\n\n .lego-brick::after {\n right: 6px;\n }\n\n \/* ===== Producten ===== *\/\n .products-section {\n background: #ffffff;\n border-radius: 16px;\n padding: 1.5rem;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);\n }\n\n .products-header {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: 1rem;\n margin-bottom: 1rem;\n }\n\n .products-header h2 {\n font-size: 1.3rem;\n }\n\n .products-header span {\n font-size: 0.85rem;\n color: var(--text-soft);\n }\n\n .product-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));\n gap: 1rem;\n }\n\n .product-card {\n background: #f7fbf8;\n border-radius: 14px;\n padding: 0.9rem;\n border: 1px solid #e0f2e8;\n display: flex;\n flex-direction: column;\n gap: 0.4rem;\n transition: transform 0.1s, box-shadow 0.1s;\n }\n\n .product-card:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);\n }\n\n .product-image {\n height: 110px;\n border-radius: 10px;\n background: repeating-linear-gradient(\n 135deg,\n #c8f7dc,\n #c8f7dc 6px,\n #f4fbf7 6px,\n #f4fbf7 12px\n );\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 0.8rem;\n color: #22543d;\n margin-bottom: 0.4rem;\n text-align: center;\n padding: 0.3rem;\n }\n\n .product-name {\n font-size: 0.95rem;\n font-weight: 600;\n }\n\n .product-desc {\n font-size: 0.8rem;\n color: var(--text-soft);\n flex: 1;\n }\n\n .product-footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-top: 0.2rem;\n }\n\n .product-price {\n font-weight: 700;\n font-size: 0.95rem;\n color: var(--primary);\n }\n\n .product-btn {\n font-size: 0.8rem;\n border-radius: 999px;\n border: none;\n padding: 0.35rem 0.8rem;\n background: var(--primary);\n color: #fff;\n cursor: pointer;\n }\n\n .product-btn:hover {\n filter: brightness(1.05);\n }\n\n \/* ===== Winkelmand ===== *\/\n .cart {\n background: #ffffff;\n border-radius: 16px;\n padding: 1.2rem;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);\n display: flex;\n flex-direction: column;\n gap: 0.8rem;\n max-height: 620px;\n position: sticky;\n top: 1.5rem;\n }\n\n .cart h2 {\n font-size: 1.1rem;\n margin-bottom: 0.4rem;\n }\n\n .cart-items {\n border-radius: 10px;\n background: #f0fbf4;\n padding: 0.6rem;\n font-size: 0.85rem;\n max-height: 260px;\n overflow-y: auto;\n }\n\n .cart-item {\n display: flex;\n justify-content: space-between;\n margin-bottom: 0.4rem;\n }\n\n .cart-item span:first-child {\n max-width: 60%;\n }\n\n .cart-empty {\n color: var(--text-soft);\n font-style: italic;\n }\n\n .cart-summary {\n font-size: 0.9rem;\n display: flex;\n justify-content: space-between;\n margin-top: 0.4rem;\n }\n\n .cart-total {\n font-weight: 700;\n }\n\n .cart-btn {\n margin-top: 0.6rem;\n border-radius: 999px;\n border: none;\n padding: 0.55rem 0.9rem;\n font-size: 0.9rem;\n font-weight: 600;\n background: #16a085;\n color: #fff;\n cursor: pointer;\n }\n\n .cart-btn:hover {\n filter: brightness(1.05);\n }\n\n .cart-note {\n font-size: 0.75rem;\n color: var(--text-soft);\n }\n\n footer {\n font-size: 0.75rem;\n text-align: center;\n padding: 0.8rem;\n color: var(--text-soft);\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"page\">\n <header>\n <div class=\"logo\">\n <div class=\"logo-badge\">F<\/div>\n <div>Felix’ LEGO Webshop<\/div>\n <\/div>\n <nav>\n <ul>\n <li>Home<\/li>\n <li>LEGO Sets<\/li>\n <li>Over Felix<\/li>\n <li>Contact<\/li>\n <\/ul>\n <\/nav>\n <\/header>\n\n <main>\n \n <div>\n <section class=\"hero\">\n <div class=\"hero-text\">\n <div class=\"hero-highlight\">Groene LEGO wereld van Felix<\/div>\n <h1>Bouw je eigen avonturen met LEGO<\/h1>\n <p>\n In deze webshop staan Felix’ favoriete LEGO creaties en sets.\n Van stoere voertuigen tot zelfbedachte MOC’s \u2013 allemaal met een groene twist.\n <\/p>\n <div class=\"hero-btns\">\n <button class=\"btn-primary\">Bekijk LEGO sets<\/button>\n <button class=\"btn-secondary\">Ontmoet Felix de bouwer<\/button>\n <\/div>\n <\/div>\n <div class=\"hero-illustration\">\n <div class=\"hero-box\">\n <div class=\"lego-brick\"><\/div>\n <div class=\"lego-brick\"><\/div>\n <div class=\"lego-brick\"><\/div>\n <div class=\"lego-brick\"><\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"products-section\">\n <div class=\"products-header\">\n <h2>LEGO Producten<\/h2>\n <span>Klik op \u201cIn mandje\u201d om een bouwwerk toe te voegen.<\/span>\n <\/div>\n <div class=\"product-grid\">\n \n <article class=\"product-card\" data-name=\"Groene Racewagen\" data-price=\"14.95\">\n <div class=\"product-image\">\n Compacte LEGO racewagen in het groen, perfect voor snelle rondjes.\n <\/div>\n <div class=\"product-name\">Groene Racewagen<\/div>\n <div class=\"product-desc\">\n Een stevig, laag model met spoilers en grote banden. Ideaal om mee te racen tegen andere LEGO auto’s.\n <\/div>\n <div class=\"product-footer\">\n <div class=\"product-price\">\u20ac 14,95<\/div>\n <button class=\"product-btn\">In mandje<\/button>\n <\/div>\n <\/article>\n\n \n <article class=\"product-card\" data-name=\"Felix' Judo Dojo\" data-price=\"19.50\">\n <div class=\"product-image\">\n LEGO dojo met tatami-mat en twee minifiguren die judo oefenen.\n <\/div>\n <div class=\"product-name\">Felix’ Judo Dojo<\/div>\n <div class=\"product-desc\">\n Bouw je eigen judomat, scorebord en tribunebankje. Inclusief judoka-minifigs in wit en groen.\n <\/div>\n <div class=\"product-footer\">\n <div class=\"product-price\">\u20ac 19,50<\/div>\n <button class=\"product-btn\">In mandje<\/button>\n <\/div>\n <\/article>\n\n \n <article class=\"product-card\" data-name=\"Groene Stad Parkset\" data-price=\"24.00\">\n <div class=\"product-image\">\n Park met bomen, bankjes en een kleine LEGO vijver.\n <\/div>\n <div class=\"product-name\">Groene Stad Parkset<\/div>\n <div class=\"product-desc\">\n Maak een groen park voor jouw LEGO stad. Met bomen, bloemen, bankjes en een bruggetje over het water.\n <\/div>\n <div class=\"product-footer\">\n <div class=\"product-price\">\u20ac 24,00<\/div>\n <button class=\"product-btn\">In mandje<\/button>\n <\/div>\n <\/article>\n\n \n <article class=\"product-card\" data-name=\"Mystery Brick Box\" data-price=\"15.95\">\n <div class=\"product-image\">\n Doos vol groene LEGO stenen en verrassingsonderdelen.\n <\/div>\n <div class=\"product-name\">Mystery Brick Box<\/div>\n <div class=\"product-desc\">\n Een mix van verschillende groene LEGO stenen, wielen en specials. Ideaal voor eigen creaties.\n <\/div>\n <div class=\"product-footer\">\n <div class=\"product-price\">\u20ac 15,95<\/div>\n <button class=\"product-btn\">In mandje<\/button>\n <\/div>\n <\/article>\n <\/div>\n <\/section>\n <\/div>\n\n \n <aside class=\"cart\">\n <h2>Winkelmand<\/h2>\n <div class=\"cart-items\" id=\"cart-items\">\n <div class=\"cart-empty\">Je mandje is nog leeg.<\/div>\n <\/div>\n <div class=\"cart-summary\">\n <span>Totaal:<\/span>\n <span class=\"cart-total\" id=\"cart-total\">\u20ac 0,00<\/span>\n <\/div>\n <button class=\"cart-btn\">Bestelling afronden<\/button>\n <p class=\"cart-note\">\n Dit is een demo LEGO-webshop van Felix. Bestellen is (nog) niet echt,\n maar je ziet wel hoe een echte webshop werkt.\n <\/p>\n <\/aside>\n <\/main>\n\n <footer>\n © <span id=\"year\"><\/span> Felix’ LEGO Webshop \u2013 Bouwen in het groen \ud83e\uddf1\ud83d\udc9a\n <\/footer>\n <\/div>\n\n <script>\n \/\/ Jaar automatisch invullen\n document.getElementById(\"year\").textContent = new Date().getFullYear();\n\n \/\/ Eenvoudig \"mandje\" in de browser (geen echte backend)\n const cartItemsContainer = document.getElementById(\"cart-items\");\n const cartTotalEl = document.getElementById(\"cart-total\");\n let cart = [];\n\n function formatPrice(value) {\n return \"\u20ac \" + value.toFixed(2).replace(\".\", \",\");\n }\n\n function renderCart() {\n cartItemsContainer.innerHTML = \"\";\n\n if (cart.length === 0) {\n const empty = document.createElement(\"div\");\n empty.className = \"cart-empty\";\n empty.textContent = \"Je mandje is nog leeg.\";\n cartItemsContainer.appendChild(empty);\n } else {\n cart.forEach((item) => {\n const row = document.createElement(\"div\");\n row.className = \"cart-item\";\n row.innerHTML =\n \"<span>\" +\n item.name +\n \" x \" +\n item.quantity +\n \"<\/span><span>\" +\n formatPrice(item.price * item.quantity) +\n \"<\/span>\";\n cartItemsContainer.appendChild(row);\n });\n }\n\n const total = cart.reduce((sum, item) => sum + item.price * item.quantity, 0);\n cartTotalEl.textContent = formatPrice(total);\n }\n\n function addToCart(name, price) {\n const existing = cart.find((item) => item.name === name);\n if (existing) {\n existing.quantity += 1;\n } else {\n cart.push({ name, price, quantity: 1 });\n }\n renderCart();\n }\n\n document.querySelectorAll(\".product-card\").forEach((card) => {\n const button = card.querySelector(\".product-btn\");\n const name = card.dataset.name;\n const price = parseFloat(card.dataset.price);\n\n button.addEventListener(\"click\", () => addToCart(name, price));\n });\n\n \/\/ Eerste render\n renderCart();\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Dit is de webshop van Felix de Bie Felix’ LEGO Webshop F Felix’ LEGO Webshop Home LEGO Sets Over Felix Contact Groene LEGO wereld van Felix Bouw je eigen avonturen met LEGO In deze webshop staan Felix’ favoriete LEGO creaties … <a href=\"https:\/\/www.casenmarieke.nl\/?page_id=380\">Lees verder <span class=\"meta-nav\">→<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-380","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.casenmarieke.nl\/index.php?rest_route=\/wp\/v2\/pages\/380","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.casenmarieke.nl\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.casenmarieke.nl\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.casenmarieke.nl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.casenmarieke.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=380"}],"version-history":[{"count":3,"href":"https:\/\/www.casenmarieke.nl\/index.php?rest_route=\/wp\/v2\/pages\/380\/revisions"}],"predecessor-version":[{"id":384,"href":"https:\/\/www.casenmarieke.nl\/index.php?rest_route=\/wp\/v2\/pages\/380\/revisions\/384"}],"wp:attachment":[{"href":"https:\/\/www.casenmarieke.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=380"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":380,"date":"2025-11-23T12:34:50","date_gmt":"2025-11-23T11:34:50","guid":{"rendered":"https:\/\/www.casenmarieke.nl\/?page_id=380"},"modified":"2025-11-23T12:59:22","modified_gmt":"2025-11-23T11:59:22","slug":"welkom-bouweensteentjebij-nl","status":"publish","type":"page","link":"https:\/\/www.casenmarieke.nl\/?page_id=380","title":{"rendered":"Welkom bouweensteentjebij.nl"},"content":{"rendered":"\n

Dit is de webshop van Felix de Bie<\/em><\/p>\n\n\n\n

<\/p>\n\n\n\n\n\n\n \n Felix’ LEGO Webshop<\/title>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n <style>\n \/* ===== Kleuren makkelijk aanpasbaar ===== *\/\n :root {\n --primary: #27ae60; \/* hoofdgroen *\/\n --primary-soft: #e3f9ec; \/* lichte groene achtergrond *\/\n --accent: #2ecc71; \/* accentgroen *\/\n --bg: #f4fbf7; \/* pagina achtergrond *\/\n --text-dark: #1f2933;\n --text-soft: #5f6c7b;\n }\n\n \/* ===== Basisstijl ===== *\/\n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n\n body {\n font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\",\n sans-serif;\n background: var(--bg);\n color: var(--text-dark);\n line-height: 1.5;\n }\n\n a {\n text-decoration: none;\n color: inherit;\n }\n\n img {\n max-width: 100%;\n display: block;\n }\n\n \/* ===== Layout ===== *\/\n .page {\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n }\n\n header {\n background: linear-gradient(135deg, var(--primary), var(--accent));\n color: #fff;\n padding: 1rem 2rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n }\n\n .logo {\n display: flex;\n align-items: center;\n gap: 0.6rem;\n font-weight: 700;\n font-size: 1.3rem;\n }\n\n .logo-badge {\n width: 36px;\n height: 36px;\n border-radius: 8px;\n background: #fff;\n color: var(--primary);\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 900;\n box-shadow: 0 2px 4px rgba(0,0,0,0.15);\n }\n\n nav ul {\n display: flex;\n list-style: none;\n gap: 1rem;\n font-size: 0.95rem;\n }\n\n nav li {\n padding: 0.3rem 0.7rem;\n border-radius: 999px;\n transition: background 0.2s, transform 0.1s;\n cursor: pointer;\n }\n\n nav li:hover {\n background: rgba(255, 255, 255, 0.25);\n transform: translateY(-1px);\n }\n\n main {\n flex: 1;\n padding: 1.5rem 2rem 2.5rem;\n display: grid;\n grid-template-columns: minmax(0, 3fr) minmax(260px, 1fr);\n gap: 1.5rem;\n }\n\n @media (max-width: 900px) {\n main {\n grid-template-columns: 1fr;\n }\n }\n\n \/* ===== Hero blok ===== *\/\n .hero {\n background: #ffffff;\n border-radius: 16px;\n padding: 1.5rem;\n margin-bottom: 1.5rem;\n display: flex;\n flex-wrap: wrap;\n gap: 1.5rem;\n align-items: center;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);\n }\n\n .hero-text {\n flex: 2 1 220px;\n }\n\n .hero-text h1 {\n font-size: 1.8rem;\n margin-bottom: 0.5rem;\n }\n\n .hero-text p {\n font-size: 0.98rem;\n margin-bottom: 1rem;\n color: var(--text-soft);\n }\n\n .hero-highlight {\n display: inline-block;\n background: var(--primary-soft);\n border-radius: 999px;\n padding: 0.3rem 0.8rem;\n font-size: 0.8rem;\n margin-bottom: 0.6rem;\n color: var(--primary);\n font-weight: 600;\n }\n\n .hero-btns {\n display: flex;\n gap: 0.7rem;\n flex-wrap: wrap;\n }\n\n .btn-primary,\n .btn-secondary {\n border-radius: 999px;\n padding: 0.6rem 1.1rem;\n font-size: 0.9rem;\n border: none;\n cursor: pointer;\n font-weight: 600;\n }\n\n .btn-primary {\n background: var(--primary);\n color: white;\n box-shadow: 0 3px 10px rgba(39, 174, 96, 0.4);\n }\n\n .btn-primary:hover {\n filter: brightness(1.05);\n }\n\n .btn-secondary {\n background: #e7f5ec;\n color: var(--text-dark);\n }\n\n .btn-secondary:hover {\n background: #d8efe2;\n }\n\n .hero-illustration {\n flex: 1 1 160px;\n min-width: 160px;\n display: flex;\n justify-content: center;\n }\n\n .hero-box {\n width: 150px;\n height: 150px;\n border-radius: 24px;\n background:\n linear-gradient(135deg, #a8e6cf, #dcedc1);\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n grid-template-rows: repeat(2, 1fr);\n gap: 4px;\n padding: 8px;\n }\n\n .lego-brick {\n border-radius: 8px;\n background: var(--primary);\n position: relative;\n }\n\n .lego-brick::before,\n .lego-brick::after {\n content: \"\";\n position: absolute;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background: #2ecc71;\n top: 4px;\n }\n\n .lego-brick::before {\n left: 6px;\n }\n\n .lego-brick::after {\n right: 6px;\n }\n\n \/* ===== Producten ===== *\/\n .products-section {\n background: #ffffff;\n border-radius: 16px;\n padding: 1.5rem;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);\n }\n\n .products-header {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: 1rem;\n margin-bottom: 1rem;\n }\n\n .products-header h2 {\n font-size: 1.3rem;\n }\n\n .products-header span {\n font-size: 0.85rem;\n color: var(--text-soft);\n }\n\n .product-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));\n gap: 1rem;\n }\n\n .product-card {\n background: #f7fbf8;\n border-radius: 14px;\n padding: 0.9rem;\n border: 1px solid #e0f2e8;\n display: flex;\n flex-direction: column;\n gap: 0.4rem;\n transition: transform 0.1s, box-shadow 0.1s;\n }\n\n .product-card:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);\n }\n\n .product-image {\n height: 110px;\n border-radius: 10px;\n background: repeating-linear-gradient(\n 135deg,\n #c8f7dc,\n #c8f7dc 6px,\n #f4fbf7 6px,\n #f4fbf7 12px\n );\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 0.8rem;\n color: #22543d;\n margin-bottom: 0.4rem;\n text-align: center;\n padding: 0.3rem;\n }\n\n .product-name {\n font-size: 0.95rem;\n font-weight: 600;\n }\n\n .product-desc {\n font-size: 0.8rem;\n color: var(--text-soft);\n flex: 1;\n }\n\n .product-footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-top: 0.2rem;\n }\n\n .product-price {\n font-weight: 700;\n font-size: 0.95rem;\n color: var(--primary);\n }\n\n .product-btn {\n font-size: 0.8rem;\n border-radius: 999px;\n border: none;\n padding: 0.35rem 0.8rem;\n background: var(--primary);\n color: #fff;\n cursor: pointer;\n }\n\n .product-btn:hover {\n filter: brightness(1.05);\n }\n\n \/* ===== Winkelmand ===== *\/\n .cart {\n background: #ffffff;\n border-radius: 16px;\n padding: 1.2rem;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);\n display: flex;\n flex-direction: column;\n gap: 0.8rem;\n max-height: 620px;\n position: sticky;\n top: 1.5rem;\n }\n\n .cart h2 {\n font-size: 1.1rem;\n margin-bottom: 0.4rem;\n }\n\n .cart-items {\n border-radius: 10px;\n background: #f0fbf4;\n padding: 0.6rem;\n font-size: 0.85rem;\n max-height: 260px;\n overflow-y: auto;\n }\n\n .cart-item {\n display: flex;\n justify-content: space-between;\n margin-bottom: 0.4rem;\n }\n\n .cart-item span:first-child {\n max-width: 60%;\n }\n\n .cart-empty {\n color: var(--text-soft);\n font-style: italic;\n }\n\n .cart-summary {\n font-size: 0.9rem;\n display: flex;\n justify-content: space-between;\n margin-top: 0.4rem;\n }\n\n .cart-total {\n font-weight: 700;\n }\n\n .cart-btn {\n margin-top: 0.6rem;\n border-radius: 999px;\n border: none;\n padding: 0.55rem 0.9rem;\n font-size: 0.9rem;\n font-weight: 600;\n background: #16a085;\n color: #fff;\n cursor: pointer;\n }\n\n .cart-btn:hover {\n filter: brightness(1.05);\n }\n\n .cart-note {\n font-size: 0.75rem;\n color: var(--text-soft);\n }\n\n footer {\n font-size: 0.75rem;\n text-align: center;\n padding: 0.8rem;\n color: var(--text-soft);\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"page\">\n <header>\n <div class=\"logo\">\n <div class=\"logo-badge\">F<\/div>\n <div>Felix’ LEGO Webshop<\/div>\n <\/div>\n <nav>\n <ul>\n <li>Home<\/li>\n <li>LEGO Sets<\/li>\n <li>Over Felix<\/li>\n <li>Contact<\/li>\n <\/ul>\n <\/nav>\n <\/header>\n\n <main>\n \n <div>\n <section class=\"hero\">\n <div class=\"hero-text\">\n <div class=\"hero-highlight\">Groene LEGO wereld van Felix<\/div>\n <h1>Bouw je eigen avonturen met LEGO<\/h1>\n <p>\n In deze webshop staan Felix’ favoriete LEGO creaties en sets.\n Van stoere voertuigen tot zelfbedachte MOC’s \u2013 allemaal met een groene twist.\n <\/p>\n <div class=\"hero-btns\">\n <button class=\"btn-primary\">Bekijk LEGO sets<\/button>\n <button class=\"btn-secondary\">Ontmoet Felix de bouwer<\/button>\n <\/div>\n <\/div>\n <div class=\"hero-illustration\">\n <div class=\"hero-box\">\n <div class=\"lego-brick\"><\/div>\n <div class=\"lego-brick\"><\/div>\n <div class=\"lego-brick\"><\/div>\n <div class=\"lego-brick\"><\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"products-section\">\n <div class=\"products-header\">\n <h2>LEGO Producten<\/h2>\n <span>Klik op \u201cIn mandje\u201d om een bouwwerk toe te voegen.<\/span>\n <\/div>\n <div class=\"product-grid\">\n \n <article class=\"product-card\" data-name=\"Groene Racewagen\" data-price=\"14.95\">\n <div class=\"product-image\">\n Compacte LEGO racewagen in het groen, perfect voor snelle rondjes.\n <\/div>\n <div class=\"product-name\">Groene Racewagen<\/div>\n <div class=\"product-desc\">\n Een stevig, laag model met spoilers en grote banden. Ideaal om mee te racen tegen andere LEGO auto’s.\n <\/div>\n <div class=\"product-footer\">\n <div class=\"product-price\">\u20ac 14,95<\/div>\n <button class=\"product-btn\">In mandje<\/button>\n <\/div>\n <\/article>\n\n \n <article class=\"product-card\" data-name=\"Felix' Judo Dojo\" data-price=\"19.50\">\n <div class=\"product-image\">\n LEGO dojo met tatami-mat en twee minifiguren die judo oefenen.\n <\/div>\n <div class=\"product-name\">Felix’ Judo Dojo<\/div>\n <div class=\"product-desc\">\n Bouw je eigen judomat, scorebord en tribunebankje. Inclusief judoka-minifigs in wit en groen.\n <\/div>\n <div class=\"product-footer\">\n <div class=\"product-price\">\u20ac 19,50<\/div>\n <button class=\"product-btn\">In mandje<\/button>\n <\/div>\n <\/article>\n\n \n <article class=\"product-card\" data-name=\"Groene Stad Parkset\" data-price=\"24.00\">\n <div class=\"product-image\">\n Park met bomen, bankjes en een kleine LEGO vijver.\n <\/div>\n <div class=\"product-name\">Groene Stad Parkset<\/div>\n <div class=\"product-desc\">\n Maak een groen park voor jouw LEGO stad. Met bomen, bloemen, bankjes en een bruggetje over het water.\n <\/div>\n <div class=\"product-footer\">\n <div class=\"product-price\">\u20ac 24,00<\/div>\n <button class=\"product-btn\">In mandje<\/button>\n <\/div>\n <\/article>\n\n \n <article class=\"product-card\" data-name=\"Mystery Brick Box\" data-price=\"15.95\">\n <div class=\"product-image\">\n Doos vol groene LEGO stenen en verrassingsonderdelen.\n <\/div>\n <div class=\"product-name\">Mystery Brick Box<\/div>\n <div class=\"product-desc\">\n Een mix van verschillende groene LEGO stenen, wielen en specials. Ideaal voor eigen creaties.\n <\/div>\n <div class=\"product-footer\">\n <div class=\"product-price\">\u20ac 15,95<\/div>\n <button class=\"product-btn\">In mandje<\/button>\n <\/div>\n <\/article>\n <\/div>\n <\/section>\n <\/div>\n\n \n <aside class=\"cart\">\n <h2>Winkelmand<\/h2>\n <div class=\"cart-items\" id=\"cart-items\">\n <div class=\"cart-empty\">Je mandje is nog leeg.<\/div>\n <\/div>\n <div class=\"cart-summary\">\n <span>Totaal:<\/span>\n <span class=\"cart-total\" id=\"cart-total\">\u20ac 0,00<\/span>\n <\/div>\n <button class=\"cart-btn\">Bestelling afronden<\/button>\n <p class=\"cart-note\">\n Dit is een demo LEGO-webshop van Felix. Bestellen is (nog) niet echt,\n maar je ziet wel hoe een echte webshop werkt.\n <\/p>\n <\/aside>\n <\/main>\n\n <footer>\n © <span id=\"year\"><\/span> Felix’ LEGO Webshop \u2013 Bouwen in het groen \ud83e\uddf1\ud83d\udc9a\n <\/footer>\n <\/div>\n\n <script>\n \/\/ Jaar automatisch invullen\n document.getElementById(\"year\").textContent = new Date().getFullYear();\n\n \/\/ Eenvoudig \"mandje\" in de browser (geen echte backend)\n const cartItemsContainer = document.getElementById(\"cart-items\");\n const cartTotalEl = document.getElementById(\"cart-total\");\n let cart = [];\n\n function formatPrice(value) {\n return \"\u20ac \" + value.toFixed(2).replace(\".\", \",\");\n }\n\n function renderCart() {\n cartItemsContainer.innerHTML = \"\";\n\n if (cart.length === 0) {\n const empty = document.createElement(\"div\");\n empty.className = \"cart-empty\";\n empty.textContent = \"Je mandje is nog leeg.\";\n cartItemsContainer.appendChild(empty);\n } else {\n cart.forEach((item) => {\n const row = document.createElement(\"div\");\n row.className = \"cart-item\";\n row.innerHTML =\n \"<span>\" +\n item.name +\n \" x \" +\n item.quantity +\n \"<\/span><span>\" +\n formatPrice(item.price * item.quantity) +\n \"<\/span>\";\n cartItemsContainer.appendChild(row);\n });\n }\n\n const total = cart.reduce((sum, item) => sum + item.price * item.quantity, 0);\n cartTotalEl.textContent = formatPrice(total);\n }\n\n function addToCart(name, price) {\n const existing = cart.find((item) => item.name === name);\n if (existing) {\n existing.quantity += 1;\n } else {\n cart.push({ name, price, quantity: 1 });\n }\n renderCart();\n }\n\n document.querySelectorAll(\".product-card\").forEach((card) => {\n const button = card.querySelector(\".product-btn\");\n const name = card.dataset.name;\n const price = parseFloat(card.dataset.price);\n\n button.addEventListener(\"click\", () => addToCart(name, price));\n });\n\n \/\/ Eerste render\n renderCart();\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Dit is de webshop van Felix de Bie Felix’ LEGO Webshop F Felix’ LEGO Webshop Home LEGO Sets Over Felix Contact Groene LEGO wereld van Felix Bouw je eigen avonturen met LEGO In deze webshop staan Felix’ favoriete LEGO creaties … <a href=\"https:\/\/www.casenmarieke.nl\/?page_id=380\">Lees verder <span class=\"meta-nav\">→<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-380","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.casenmarieke.nl\/index.php?rest_route=\/wp\/v2\/pages\/380","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.casenmarieke.nl\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.casenmarieke.nl\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.casenmarieke.nl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.casenmarieke.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=380"}],"version-history":[{"count":3,"href":"https:\/\/www.casenmarieke.nl\/index.php?rest_route=\/wp\/v2\/pages\/380\/revisions"}],"predecessor-version":[{"id":384,"href":"https:\/\/www.casenmarieke.nl\/index.php?rest_route=\/wp\/v2\/pages\/380\/revisions\/384"}],"wp:attachment":[{"href":"https:\/\/www.casenmarieke.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=380"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}