Spaces:
Running
Running
| <html lang="nl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Juliette's Groot Tuinkabouter Shop - De leukste kabouters voor kleine tuinen!</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&display=swap'); | |
| body { | |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; | |
| background-color: #f0fdf4; | |
| line-height: 1.6; | |
| color: #1e293b; | |
| } | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| .kabouter-hat { | |
| position: relative; | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3); | |
| background: linear-gradient(135deg, #022c22 0%, #065f46 100%); | |
| border-bottom: 2px solid #000; | |
| } | |
| .kabouter-hat:before { | |
| content: ""; | |
| position: absolute; | |
| top: -20px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 60px; | |
| height: 40px; | |
| background-color: #ef4444; | |
| clip-path: polygon(0 0, 100% 0, 50% 100%); | |
| filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)); | |
| } | |
| .mushroom-spot { | |
| position: absolute; | |
| width: 10px; | |
| height: 10px; | |
| background-color: white; | |
| border-radius: 50%; | |
| } | |
| .mushroom-spot:nth-child(1) { | |
| top: 15%; | |
| left: 20%; | |
| } | |
| .mushroom-spot:nth-child(2) { | |
| top: 30%; | |
| right: 25%; | |
| } | |
| .mushroom-spot:nth-child(3) { | |
| bottom: 20%; | |
| left: 30%; | |
| } | |
| .kabouter-animation { | |
| animation: float 6s ease-in-out infinite; | |
| transform-style: preserve-3d; | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0px) rotateY(0deg); } | |
| 50% { transform: translateY(-12px) rotateY(10deg); } | |
| 100% { transform: translateY(0px) rotateY(0deg); } | |
| } | |
| .btn-kabouter { | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); | |
| } | |
| .btn-kabouter:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| .btn-kabouter:active { | |
| transform: translateY(0); | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <!-- Kabouter hoed navigatie --> | |
| <header class="bg-green-700 text-white kabouter-hat py-6 relative"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center mb-4 md:mb-0"> | |
| <div class="w-20 h-20 bg-white rounded-2xl flex items-center justify-center mr-4 shadow-md"> | |
| <div class="w-16 h-16 bg-gradient-to-br from-green-600 to-green-800 rounded-xl relative flex items-center justify-center"> | |
| <i class="fas fa-leaf text-white text-3xl"></i> | |
| </div> | |
| </div> | |
| <h1 class="text-3xl font-bold">Juliette's <span class="text-green-300">Natuur</span> Kabouter Shop</h1> | |
| </div> | |
| <nav class="flex space-x-1 md:space-x-6"> | |
| <a href="#home" class="px-3 py-2 rounded-lg hover:bg-green-600 transition">Home</a> | |
| <a href="#kabouters" class="px-3 py-2 rounded-lg hover:bg-green-600 transition">Kabouters</a> | |
| <a href="#accessoires" class="px-3 py-2 rounded-lg hover:bg-green-600 transition">Accessoires</a> | |
| <a href="#collecties" class="px-3 py-2 rounded-lg hover:bg-green-600 transition">Collecties</a> | |
| <a href="#over-ons" class="px-3 py-2 rounded-lg hover:bg-green-600 transition">Over Ons</a> | |
| <a href="#contact" class="px-3 py-2 rounded-lg hover:bg-green-600 transition">Contact</a> | |
| <a href="#blog" class="px-3 py-2 rounded-lg hover:bg-green-600 transition">Blog</a> | |
| </nav> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero sectie met bewegende kabouter --> | |
| <section id="home" class="bg-gradient-to-br from-green-100 to-green-50 py-16 border-t-2 border-black"> | |
| <div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-8 md:mb-0"> | |
| <h2 class="text-4xl md:text-5xl font-bold text-green-800 mb-4">Ontdek onze <span class="text-red-500">kleinste</span> tuinkabouters!</h2> | |
| <p class="text-lg text-gray-700 mb-6">Perfect voor kleine tuinen, balkons en vensterbanken. Onze mini-kabouters brengen een vleugje magie in elke hoek van je huis!</p> | |
| <div class="flex space-x-4"> | |
| <button class="bg-red-500 hover:bg-red-600 text-white px-6 py-3 rounded-full font-bold btn-kabouter"> | |
| <i class="fas fa-hat-wizard mr-2"></i> Shop Nu | |
| </button> | |
| <button class="bg-yellow-400 hover:bg-yellow-500 text-green-800 px-6 py-3 rounded-full font-bold btn-kabouter"> | |
| <i class="fas fa-seedling mr-2"></i> Kabouter Tips | |
| </button> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="relative kabouter-animation"> | |
| <img src="https://images.unsplash.com/photo-1605000797499-95a51c5269ae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&h=500&q=80" alt="Natuur kabouter" class="w-64 h-auto rounded-2xl shadow-lg border-4 border-black"> | |
| <div class="absolute -bottom-6 -right-6 bg-yellow-300 text-green-800 px-4 py-2 rounded-full font-bold text-sm transform rotate-6"> | |
| Ook voor binnen! | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Populaire kabouters --> | |
| <section id="kabouters" class="py-12 bg-green-50 border-t-2 border-b-2 border-black"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center text-green-800 mb-12">Onze <span class="text-red-500">Kleinste</span> Kabouter Sterren</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <!-- Kabouter 1 --> | |
| <div class="bg-white rounded-2xl p-6 border-2 border-green-100 hover:border-green-300 transition-all duration-300 hover:shadow-lg overflow-hidden"> | |
| <div class="bg-white rounded-lg p-4 mb-4 flex justify-center"> | |
| <img src="https://images.unsplash.com/photo-1605000797539-9a51c5264647?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&h=400&q=80" alt="Mini tuinkabouter" class="h-40 w-auto"> | |
| </div> | |
| <h3 class="text-xl font-bold text-green-700 mb-2">Mini Moestuin Kabouter</h3> | |
| <p class="text-gray-600 mb-4">Perfect voor tussen je kruiden of kleine plantjes. Slechts 10cm hoog!</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-lg font-bold text-red-500">€12,99</span> | |
| <button class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-full text-sm"> | |
| <i class="fas fa-cart-plus mr-1"></i> Toevoegen | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Kabouter 2 --> | |
| <div class="bg-green-50 rounded-xl p-6 shadow-lg hover:shadow-xl transition transform hover:-translate-y-2"> | |
| <div class="bg-white rounded-lg p-4 mb-4 flex justify-center"> | |
| <img src="https://images.unsplash.com/photo-1605000797539-9a51c5264647?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&h=400&q=80" alt="Mini tuinkabouter" class="h-40 w-auto"> | |
| </div> | |
| <h3 class="text-xl font-bold text-green-700 mb-2">Balkon Bewaker</h3> | |
| <p class="text-gray-600 mb-4">Houdt je balkon gezellig in de gaten. Amper 8cm!</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-lg font-bold text-red-500">€9,99</span> | |
| <button class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-full text-sm"> | |
| <i class="fas fa-cart-plus mr-1"></i> Toevoegen | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Kabouter 3 --> | |
| <div class="bg-green-50 rounded-xl p-6 shadow-lg hover:shadow-xl transition transform hover:-translate-y-2"> | |
| <div class="bg-white rounded-lg p-4 mb-4 flex justify-center"> | |
| <img src="https://images.unsplash.com/photo-1605000797539-9a51c5264647?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&h=400&q=80" alt="Mini tuinkabouter" class="h-40 w-auto"> | |
| </div> | |
| <h3 class="text-xl font-bold text-green-700 mb-2">Vensterbank Wondertje</h3> | |
| <p class="text-gray-600 mb-4">Brengt geluk aan je raam. Kleinste van ons assortiment (6cm)!</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-lg font-bold text-red-500">€7,99</span> | |
| <button class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-full text-sm"> | |
| <i class="fas fa-cart-plus mr-1"></i> Toevoegen | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Kabouter 4 --> | |
| <div class="bg-green-50 rounded-xl p-6 shadow-lg hover:shadow-xl transition transform hover:-translate-y-2"> | |
| <div class="bg-white rounded-lg p-4 mb-4 flex justify-center"> | |
| <img src="https://images.unsplash.com/photo-1605000797539-9a51c5264647?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&h=400&q=80" alt="Mini tuinkabouter" class="h-40 w-auto"> | |
| </div> | |
| <h3 class="text-xl font-bold text-green-700 mb-2">Tiny Tuinhelper</h3> | |
| <p class="text-gray-600 mb-4">Helpt je plantjes groeien. Schattige 9cm versie.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-lg font-bold text-red-500">€11,49</span> | |
| <button class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-full text-sm"> | |
| <i class="fas fa-cart-plus mr-1"></i> Toevoegen | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-10"> | |
| <button class="bg-yellow-400 hover:bg-yellow-500 text-green-800 px-8 py-3 rounded-full font-bold btn-kabouter"> | |
| <i class="fas fa-chevron-circle-right mr-2"></i> Bekijk Alle Mini Kabouters | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Kabouter accessoires --> | |
| <section id="accessoires" class="py-12 bg-green-100 border-t-2 border-b-2 border-black"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center text-green-800 mb-12">Kabouter <span class="text-red-500">Accessoires</span></h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Accessoire 1 --> | |
| <div class="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition"> | |
| <div class="bg-green-100 rounded-lg p-4 mb-4 flex justify-center"> | |
| <i class="fas fa-home text-6xl text-green-700"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-green-700 mb-2">Mini Kabouterhuisjes</h3> | |
| <p class="text-gray-600 mb-4">Geef je kabouter een eigen onderkomen in je tuin of binnenshuis.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-lg font-bold text-red-500">Vanaf €14,99</span> | |
| <button class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-full text-sm"> | |
| Bekijken | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Accessoire 2 --> | |
| <div class="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition"> | |
| <div class="bg-green-100 rounded-lg p-4 mb-4 flex justify-center"> | |
| <i class="fas fa-umbrella-beach text-6xl text-green-700"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-green-700 mb-2">Kabouter Meubeltjes</h3> | |
| <p class="text-gray-600 mb-4">Mini bankjes, tafeltjes en meer voor je kaboutervriendjes.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-lg font-bold text-red-500">Vanaf €8,99</span> | |
| <button class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-full text-sm"> | |
| Bekijken | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Accessoire 3 --> | |
| <div class="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition"> | |
| <div class="bg-green-100 rounded-lg p-4 mb-4 flex justify-center"> | |
| <i class="fas fa-sun text-6xl text-green-700"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-green-700 mb-2">Zonnepanelen Set</h3> | |
| <p class="text-gray-600 mb-4">Maak je kabouter milieubewust met deze schattige zonnepaneeltjes.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-lg font-bold text-red-500">€12,49</span> | |
| <button class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-full text-sm"> | |
| Bekijken | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section id="collecties" class="py-12 bg-green-50 border-t-2 border-b-2 border-black"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center text-green-800 mb-12">Wat zeggen onze <span class="text-red-500">klanten</span>?</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Review 1 --> | |
| <div class="bg-white rounded-xl p-6 relative border border-gray-100 shadow-sm"> | |
| <div class="absolute -top-4 -left-4 bg-gradient-to-br from-red-500 to-red-600 text-white w-10 h-10 rounded-full flex items-center justify-center shadow-md"> | |
| <i class="fas fa-quote-left"></i> | |
| </div> | |
| <p class="text-gray-700 mb-4 italic">"De mini-kabouters van Juliette zijn perfect voor mijn kleine balkontuin. Ze brengen zoveel vrolijkheid in een kleine ruimte!"</p> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 bg-green-200 rounded-full mr-3"></div> | |
| <div> | |
| <h4 class="font-bold text-green-800">Marianne</h4> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Review 2 --> | |
| <div class="bg-green-50 rounded-xl p-6 relative"> | |
| <div class="absolute -top-4 -left-4 bg-red-500 text-white w-10 h-10 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-quote-left"></i> | |
| </div> | |
| <p class="text-gray-700 mb-4 italic">"Mijn verzameling mini-kabouters groeit gestaag dankzij Juliette's shop. De kwaliteit is uitstekend en ze zijn zo gedetailleerd voor hun formaat!"</p> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 bg-green-200 rounded-full mr-3"></div> | |
| <div> | |
| <h4 class="font-bold text-green-800">Klaas</h4> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Review 3 --> | |
| <div class="bg-green-50 rounded-xl p-6 relative"> | |
| <div class="absolute -top-4 -left-4 bg-red-500 text-white w-10 h-10 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-quote-left"></i> | |
| </div> | |
| <p class="text-gray-700 mb-4 italic">"Perfecte cadeautjes voor mijn plantenvrienden. De kleine kabouters passen overal en iedereen wordt er vrolijk van!"</p> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 bg-green-200 rounded-full mr-3"></div> | |
| <div> | |
| <h4 class="font-bold text-green-800">Els</h4> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Over Ons --> | |
| <section id="over-ons" class="py-16 bg-green-100 border-t-2 border-b-2 border-black"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row items-center gap-12"> | |
| <div class="md:w-1/3 flex justify-center"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1605000797539-9a51c5264647?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Juliette met kabouter" class="w-64 h-auto rounded-full border-8 border-black shadow-lg"> | |
| <div class="absolute -bottom-4 -right-4 bg-yellow-300 text-green-800 px-4 py-2 rounded-full font-bold transform rotate-6 shadow-md"> | |
| Kabouterliefde! | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-2/3"> | |
| <h2 class="text-4xl font-bold text-green-800 mb-6">Ons <span class="text-red-500">Kabouter</span> Verhaal</h2> | |
| <p class="text-lg text-gray-700 mb-4"> | |
| Het begon allemaal op een stormachtige herfstavond. Juliette zat binnen te lezen toen er opeens een klein kaboutertje door de kattenluik naar binnen rolde! "Help!" piepte het figuurtje, "De wind blaast alle tuinkabouters weg!" Juliette gaf het kaboutertje onderdak in een theekopje en zo ontstond haar eerste mini-kabouterverblijf. | |
| </p> | |
| <p class="text-lg text-gray-700 mb-4"> | |
| Die nacht droomde ze van een heel leger kleine kabouters die bescherming zochten tegen de elementen. Toen ze wakker werd, wist ze wat ze moest doen: kabouters maken die perfect passen in huis. In 2015 startte ze haar bedrijf met als motto: "Elk huis verdient kaboutermagie, hoe klein ook!" | |
| </p> | |
| <p class="text-lg text-gray-700 mb-6"> | |
| Vandaag de dag ontwerpen we met heel ons team de leukste mini-kabouters die geluk brengen én perfect passen in moderne kleine tuinen en huizen. Elk kaboutertje wordt met liefde gemaakt en heeft zijn eigen persoonlijkheid. | |
| </p> | |
| <button class="bg-green-600 hover:bg-green-700 text-white px-8 py-3 rounded-full font-bold btn-kabouter"> | |
| <i class="fas fa-book-open mr-2"></i> Lees Ons Volledige Verhaal | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Nieuwsbrief --> | |
| <section class="py-12 bg-gradient-to-r from-green-800 to-green-600 text-white"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-3xl font-bold mb-4">Word <span class="text-yellow-300">Kabouter</span> Insider!</h2> | |
| <p class="text-xl mb-8">Schrijf je in voor onze nieuwsbrief en ontvang 10% korting op je eerste aankoop.</p> | |
| <form class="max-w-md mx-auto"> | |
| <div class="flex flex-col sm:flex-row gap-4"> | |
| <input type="email" placeholder="Je emailadres" class="flex-grow px-4 py-3 rounded-full text-gray-800 focus:outline-none"> | |
| <button type="submit" class="bg-yellow-400 hover:bg-yellow-500 text-green-800 px-6 py-3 rounded-full font-bold btn-kabouter"> | |
| Inschrijven <i class="fas fa-paper-plane ml-2"></i> | |
| </button> | |
| </div> | |
| </form> | |
| <p class="mt-4 text-sm text-green-200">We spammen niet. Beloofd! Alleen kaboutermagie.</p> | |
| </div> | |
| </section> | |
| <!-- Contact Sectie --> | |
| <section id="contact" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center text-green-800 mb-8">Contact</h2> | |
| <div class="max-w-2xl mx-auto bg-green-50 p-8 rounded-lg shadow-md"> | |
| <form class="space-y-4"> | |
| <div> | |
| <label class="block text-green-700 mb-2">Naam</label> | |
| <input type="text" class="w-full px-4 py-2 rounded-lg border border-green-300 focus:outline-none focus:ring-2 focus:ring-green-500"> | |
| </div> | |
| <div> | |
| <label class="block text-green-700 mb-2">Email</label> | |
| <input type="email" class="w-full px-4 py-2 rounded-lg border border-green-300 focus:outline-none focus:ring-2 focus:ring-green-500"> | |
| </div> | |
| <div> | |
| <label class="block text-green-700 mb-2">Bericht</label> | |
| <textarea rows="4" class="w-full px-4 py-2 rounded-lg border border-green-300 focus:outline-none focus:ring-2 focus:ring-green-500"></textarea> | |
| </div> | |
| <button type="submit" class="bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-lg font-bold w-full"> | |
| Verstuur Bericht | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Blog Sectie --> | |
| <section id="blog" class="py-16 bg-green-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center text-green-800 mb-8">Kabouter Blog</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div class="bg-white p-6 rounded-lg shadow-md"> | |
| <h3 class="text-xl font-bold text-green-700 mb-2">Kabouter Verzorgingstips</h3> | |
| <p class="text-gray-600 mb-4">Leer hoe je je kabouters het beste kunt onderhouden en schoonmaken.</p> | |
| <a href="#" class="text-green-600 font-bold hover:text-green-800">Lees meer →</a> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-md"> | |
| <h3 class="text-xl font-bold text-green-700 mb-2">Kabouter Plaatsing Ideeën</h3> | |
| <p class="text-gray-600 mb-4">Creatieve manieren om je kabouters in huis en tuin te plaatsen.</p> | |
| <a href="#" class="text-green-600 font-bold hover:text-green-800">Lees meer →</a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gradient-to-br from-green-900 to-green-700 text-white py-12 rounded-t-3xl"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4 text-yellow-300">Juliette's Shop</h3> | |
| <p class="mb-4">De leukste mini-kabouters voor kleine tuinen, balkons en vensterbanken sinds 2015.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="w-10 h-10 bg-green-700 rounded-full flex items-center justify-center hover:bg-green-600"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-green-700 rounded-full flex items-center justify-center hover:bg-green-600"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-green-700 rounded-full flex items-center justify-center hover:bg-green-600"> | |
| <i class="fab fa-pinterest-p"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">Shop</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-yellow-300">Alle Kabouters</a></li> | |
| <li><a href="#" class="hover:text-yellow-300">Mini Kabouters</a></li> | |
| <li><a href="#" class="hover:text-yellow-300">Accessoires</a></li> | |
| <li><a href="#" class="hover:text-yellow-300">Nieuwe Collectie</a></li> | |
| <li><a href="#" class="hover:text-yellow-300">Aanbiedingen</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">Klantenservice</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-yellow-300">Contact</a></li> | |
| <li><a href="#" class="hover:text-yellow-300">Verzending & Levering</a></li> | |
| <li><a href="#" class="hover:text-yellow-300">Retourneren</a></li> | |
| <li><a href="#" class="hover:text-yellow-300">Veelgestelde Vragen</a></li> | |
| <li><a href="#" class="hover:text-yellow-300">Privacybeleid</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">Contact</h3> | |
| <address class="not-italic"> | |
| <p class="mb-2"><i class="fas fa-map-marker-alt mr-2 text-yellow-300"></i> Kabouterlaan 123, 1234 GN Tuindorp</p> | |
| <p class="mb-2"><i class="fas fa-phone mr-2 text-yellow-300"></i> 012-3456789</p> | |
| <p class="mb-2"><i class="fas fa-envelope mr-2 text-yellow-300"></i> hallo@julietteskabouters.nl</p> | |
| <p><i class="fas fa-clock mr-2 text-yellow-300"></i> Ma-Vr: 9:00-17:00</p> | |
| </address> | |
| </div> | |
| </div> | |
| <div class="border-t border-green-800 mt-8 pt-8 text-center text-sm text-green-400"> | |
| <p>© 2023 Juliette's Groot Tuinkabouter Shop. Alle rechten voorbehouden.</p> | |
| <p class="mt-2">Gemaakt met <i class="fas fa-heart text-red-500"></i> voor kabouterliefhebbers</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Drijvende winkelwagen --> | |
| <div class="fixed bottom-6 right-6"> | |
| <button class="bg-green-600 hover:bg-green-700 text-white w-16 h-16 rounded-full flex items-center justify-center shadow-lg transform hover:scale-110 transition border-2 border-white"> | |
| <i class="fas fa-shopping-cart text-2xl"></i> | |
| <span class="absolute -top-2 -right-2 bg-yellow-400 text-green-800 w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold">3</span> | |
| </button> | |
| </div> | |
| <script> | |
| // Eenvoudige interacties | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Maak de kabouterhoed in de navigatie klikbaar | |
| const kabouterHat = document.querySelector('.kabouter-hat'); | |
| if(kabouterHat) { | |
| kabouterHat.addEventListener('click', function() { | |
| window.scrollTo({top: 0, behavior: 'smooth'}); | |
| }); | |
| } | |
| // Voeg hover effect toe aan kabouter producten | |
| const kabouterProducts = document.querySelectorAll('.bg-green-50.rounded-xl'); | |
| kabouterProducts.forEach(product => { | |
| product.addEventListener('mouseenter', function() { | |
| const img = this.querySelector('img'); | |
| if(img) { | |
| img.classList.add('kabouter-animation'); | |
| } | |
| }); | |
| product.addEventListener('mouseleave', function() { | |
| const img = this.querySelector('img'); | |
| if(img) { | |
| img.classList.remove('kabouter-animation'); | |
| } | |
| }); | |
| }); | |
| // Simpele nieuwsbrief validatie | |
| const newsletterForm = document.querySelector('form'); | |
| if(newsletterForm) { | |
| newsletterForm.addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const emailInput = this.querySelector('input[type="email"]'); | |
| if(emailInput.value.includes('@')) { | |
| alert('Bedankt voor je inschrijving! Je kortingscode is: KABOUTER10'); | |
| emailInput.value = ''; | |
| } else { | |
| alert('Vul een geldig emailadres in'); | |
| } | |
| }); | |
| } | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Tuppje/tuinkabouter" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |