create a holding page for a webpage for a 10 year old girl that creates earrings, bracelets and all sorts of cool small stuff herself, she has made an image of herself in the style of claymation where she is standing in the middle with a pencil she has written "Kenza's skatter" on the wall behind her and taped a few of her makings on tha wall. the background of this picture is blue. This will be a holding page as in "comming soon" not a full site.
6b8dc36 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Kenza's Skatter - Coming Soon</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 50: '#fdf2f8', | |
| 100: '#fce7f3', | |
| 200: '#fbcfe8', | |
| 300: '#f9a8d4', | |
| 400: '#f472b6', | |
| 500: '#ec4899', | |
| 600: '#db2777', | |
| 700: '#be185d', | |
| 800: '#9d174d', | |
| 900: '#831843', | |
| }, | |
| secondary: { | |
| 50: '#f0f9ff', | |
| 100: '#e0f2fe', | |
| 200: '#bae6fd', | |
| 300: '#7dd3fc', | |
| 400: '#38bdf8', | |
| 500: '#0ea5e9', | |
| 600: '#0284c7', | |
| 700: '#0369a1', | |
| 800: '#075985', | |
| 900: '#0c4a6e', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="min-h-screen bg-gradient-to-br from-primary-50 to-secondary-100 flex flex-col"> | |
| <div id="vanta-background" class="fixed inset-0 -z-10"></div> | |
| <main class="flex-grow flex items-center justify-center px-4 py-8"> | |
| <div class="max-w-4xl w-full"> | |
| <!-- Header Section --> | |
| <div class="text-center mb-12"> | |
| <h1 class="text-5xl md:text-7xl font-bold text-primary-600 mb-4 font-comic"> | |
| Kenza's Skatter | |
| </h1> | |
| <p class="text-xl md:text-2xl text-secondary-600 font-medium"> | |
| Handmade with Love & Imagination | |
| </p> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="bg-white/80 backdrop-blur-sm rounded-3xl shadow-2xl p-8 md:p-12 border-4 border-primary-200"> | |
| <div class="grid md:grid-cols-2 gap-8 md:gap-12 items-center"> | |
| <!-- Image Section --> | |
| <div class="relative"> | |
| <div class="bg-blue-100 rounded-2xl p-4 shadow-lg transform rotate-2"> | |
| <img | |
| src="http://static.photos/craft/640x360/42" | |
| alt="Kenza's creative workspace with handmade jewelry" | |
| class="w-full h-auto rounded-xl border-4 border-white shadow-md" | |
| > | |
| </div> | |
| <div class="absolute -top-4 -right-4 bg-primary-500 text-white px-4 py-2 rounded-full font-bold text-sm transform rotate-6"> | |
| Coming Soon! | |
| </div> | |
| </div> | |
| <!-- Text Content --> | |
| <div class="space-y-6"> | |
| <div class="text-center md:text-left"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-primary-700 mb-4"> | |
| Get Ready for Something Special! 🎀 | |
| </h2> | |
| <p class="text-lg text-gray-700 leading-relaxed"> | |
| Hi! I'm Kenza, a 10-year-old creator who loves making beautiful earrings, | |
| bracelets, and all sorts of cool handmade treasures! | |
| </p> | |
| <p class="text-lg text-gray-700 leading-relaxed"> | |
| My online shop is getting ready to open, where you'll find unique, | |
| one-of-a-kind pieces made with lots of love and creativity. | |
| </p> | |
| </div> | |
| <!-- Countdown --> | |
| <div class="bg-gradient-to-r from-primary-100 to-secondary-100 rounded-2xl p-6 text-center border-2 border-primary-200"> | |
| <h3 class="text-xl font-bold text-primary-700 mb-4"> | |
| Launching Soon! | |
| </h3> | |
| <div id="countdown" class="flex justify-center gap-4 text-2xl font-bold text-secondary-700"> | |
| <div class="text-center"> | |
| <span id="days" class="block text-4xl">00</span> | |
| <span class="text-sm">Days</span> | |
| </div> | |
| <div class="text-center"> | |
| <span id="hours" class="block text-4xl">00</span> | |
| <span class="text-sm">Hours</span> | |
| </div> | |
| <div class="text-center"> | |
| <span id="minutes" class="block text-4xl">00</span> | |
| <span class="text-sm">Minutes</span> | |
| </div> | |
| <div class="text-center"> | |
| <span id="seconds" class="block text-4xl">00</span> | |
| <span class="text-sm">Seconds</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Contact Info --> | |
| <div class="flex flex-col sm:flex-row gap-4 justify-center md:justify-start items-center"> | |
| <div class="flex items-center gap-2 text-primary-600"> | |
| <i data-feather="mail"></i> | |
| <span class="font-medium">kenza@skatter.com</span> | |
| </div> | |
| <div class="flex items-center gap-2 text-secondary-600"> | |
| <i data-feather="heart"></i> | |
| <span class="font-medium">Made with Passion</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Craft Items Showcase --> | |
| <div class="mt-12 grid grid-cols-2 md:grid-cols-4 gap-4"> | |
| <div class="bg-white/80 rounded-2xl p-4 text-center border-2 border-primary-200 transform hover:scale-105 transition-transform duration-300"> | |
| <i data-feather="star" class="w-8 h-8 text-primary-500 mx-auto mb-2"></i> | |
| <p class="font-bold text-primary-600">Earrings</p> | |
| </div> | |
| <div class="bg-white/80 rounded-2xl p-4 text-center border-2 border-secondary-200 transform hover:scale-105 transition-transform duration-300"> | |
| <i data-feather="circle" class="w-8 h-8 text-secondary-500 mx-auto mb-2"></i> | |
| <p class="font-bold text-secondary-600">Bracelets</p> | |
| </div> | |
| <div class="bg-white/80 rounded-2xl p-4 text-center border-2 border-primary-200 transform hover:scale-105 transition-transform duration-300"> | |
| <i data-feather="hexagon" class="w-8 h-8 text-primary-500 mx-auto mb-2"></i> | |
| <p class="font-bold text-primary-600">Keychains</p> | |
| </div> | |
| <div class="bg-white/80 rounded-2xl p-4 text-center border-2 border-secondary-200 transform hover:scale-105 transition-transform duration-300"> | |
| <i data-feather="gift" class="w-8 h-8 text-secondary-500 mx-auto mb-2"></i> | |
| <p class="font-bold text-secondary-600">Surprises</p> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-primary-800 text-white py-6 text-center"> | |
| <div class="container mx-auto px-4"> | |
| <p class="text-primary-100"> | |
| © 2024 Kenza's Skatter. All creations handmade with love! 💖 | |
| </p> | |
| </div> | |
| </footer> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> | |
| <script src="script.js"></script> | |
| <script> | |
| // Initialize Vanta.js background | |
| VANTA.GLOBE({ | |
| el: "#vanta-background", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0xec4899, | |
| color2: 0x0ea5e9, | |
| size: 1.00, | |
| backgroundColor: 0xfdf2f8 | |
| }); | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| </script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |