Spaces:
Running
Running
Skapa ett genererat recept med ingredienser, steg, nutrition info etc till en banbrytande, visuellt trevlig och minnesvärd receptwebbplats som kombinerar lekfullhet och professionalism. Den ska kännas ung, modig och distinkt, med en design som direkt skiljer sig från alla traditionella mat- och receptsidor. Huvudfärger för layout: rgb(91 137 89), rgb(218 129 70), rgb(250 249 247) - Initial Deployment
79f0d45 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>FlavorFusion | Radical Recipes</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=Poppins:wght@400;600;700;800&family=Playfair+Display:wght@700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: rgb(250, 249, 247); | |
| } | |
| .title-font { | |
| font-family: 'Playfair Display', serif; | |
| } | |
| .ingredient-highlight { | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .ingredient-highlight::before { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: -2px; | |
| right: -2px; | |
| height: 30%; | |
| background-color: rgba(218, 129, 70, 0.3); | |
| z-index: -1; | |
| transform: rotate(-1deg); | |
| } | |
| .recipe-card { | |
| transform-style: preserve-3d; | |
| perspective: 1000px; | |
| } | |
| .recipe-card:hover .card-inner { | |
| transform: rotateY(180deg); | |
| } | |
| .card-inner { | |
| transition: transform 0.8s; | |
| transform-style: preserve-3d; | |
| } | |
| .card-front, .card-back { | |
| backface-visibility: hidden; | |
| } | |
| .card-back { | |
| transform: rotateY(180deg); | |
| } | |
| .nutrition-bubble { | |
| box-shadow: 3px 3px 0 rgba(0,0,0,0.1); | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .floating { | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-[rgb(250,249,247)]"> | |
| <header class="bg-[rgb(91,137,89)] text-white py-6 px-4 shadow-md"> | |
| <div class="container mx-auto flex justify-between items-center"> | |
| <h1 class="title-font text-3xl md:text-4xl flex items-center"> | |
| <span class="text-[rgb(218,129,70)]">Flavor</span>Fusion | |
| <span class="ml-2 text-xl hidden md:inline">⚡</span> | |
| </h1> | |
| <nav> | |
| <ul class="flex space-x-6"> | |
| <li><a href="#" class="hover:text-[rgb(218,129,70)] transition">Recipes</a></li> | |
| <li><a href="#" class="hover:text-[rgb(218,129,70)] transition">About</a></li> | |
| <li><a href="#" class="hover:text-[rgb(218,129,70)] transition">Contact</a></li> | |
| </ul> | |
| </nav> | |
| </div> | |
| </header> | |
| <main class="container mx-auto px-4 py-12"> | |
| <div class="flex flex-col lg:flex-row gap-12"> | |
| <!-- Recipe Content --> | |
| <div class="lg:w-2/3"> | |
| <div class="mb-12"> | |
| <span class="inline-block bg-[rgb(218,129,70)] text-white px-3 py-1 rounded-full text-sm mb-3">Breakfast</span> | |
| <h2 class="title-font text-4xl md:text-5xl mb-4 text-gray-800">Turmeric Coconut Chia Pudding</h2> | |
| <p class="text-gray-600 max-w-2xl">A vibrant, nutrient-packed breakfast that combines anti-inflammatory turmeric with creamy coconut for a gut-healthy start to your day.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12"> | |
| <div> | |
| <div class="mb-8"> | |
| <h3 class="title-font text-2xl mb-4 text-gray-800 border-b border-[rgb(218,129,70)] pb-2">Ingredients</h3> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <span class="inline-block w-6 h-6 bg-[rgb(91,137,89)] rounded-full mr-3 mt-1 flex-shrink-0"></span> | |
| <span class="ingredient-highlight">3 tbsp chia seeds</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="inline-block w-6 h-6 bg-[rgb(91,137,89)] rounded-full mr-3 mt-1 flex-shrink-0"></span> | |
| <span class="ingredient-highlight">1 cup coconut milk (full fat)</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="inline-block w-6 h-6 bg-[rgb(91,137,89)] rounded-full mr-3 mt-1 flex-shrink-0"></span> | |
| <span class="ingredient-highlight">1 tsp ground turmeric</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="inline-block w-6 h-6 bg-[rgb(91,137,89)] rounded-full mr-3 mt-1 flex-shrink-0"></span> | |
| <span class="ingredient-highlight">1/2 tsp cinnamon</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="inline-block w-6 h-6 bg-[rgb(91,137,89)] rounded-full mr-3 mt-1 flex-shrink-0"></span> | |
| <span class="ingredient-highlight">1 tbsp maple syrup</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="inline-block w-6 h-6 bg-[rgb(91,137,89)] rounded-full mr-3 mt-1 flex-shrink-0"></span> | |
| <span class="ingredient-highlight">Pinch of black pepper (enhances turmeric absorption)</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="inline-block w-6 h-6 bg-[rgb(91,137,89)] rounded-full mr-3 mt-1 flex-shrink-0"></span> | |
| <span class="ingredient-highlight">Toppings: fresh mango, toasted coconut flakes, bee pollen</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100"> | |
| <h3 class="title-font text-2xl mb-4 text-gray-800">Nutrition Facts</h3> | |
| <div class="flex flex-wrap gap-4"> | |
| <div class="nutrition-bubble bg-[rgb(91,137,89)] text-white px-4 py-2 rounded-full"> | |
| <p class="text-xs">CALORIES</p> | |
| <p class="font-bold">320</p> | |
| </div> | |
| <div class="nutrition-bubble bg-[rgb(218,129,70)] text-white px-4 py-2 rounded-full"> | |
| <p class="text-xs">PROTEIN</p> | |
| <p class="font-bold">7g</p> | |
| </div> | |
| <div class="nutrition-bubble bg-[rgb(91,137,89)] text-white px-4 py-2 rounded-full"> | |
| <p class="text-xs">FAT</p> | |
| <p class="font-bold">24g</p> | |
| </div> | |
| <div class="nutrition-bubble bg-[rgb(218,129,70)] text-white px-4 py-2 rounded-full"> | |
| <p class="text-xs">CARBS</p> | |
| <p class="font-bold">22g</p> | |
| </div> | |
| <div class="nutrition-bubble bg-[rgb(91,137,89)] text-white px-4 py-2 rounded-full"> | |
| <p class="text-xs">FIBER</p> | |
| <p class="font-bold">10g</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="title-font text-2xl mb-4 text-gray-800 border-b border-[rgb(218,129,70)] pb-2">Instructions</h3> | |
| <ol class="space-y-4"> | |
| <li class="flex"> | |
| <span class="inline-flex items-center justify-center w-8 h-8 bg-[rgb(218,129,70)] text-white rounded-full mr-3 flex-shrink-0">1</span> | |
| <span>In a bowl or jar, whisk together coconut milk, chia seeds, turmeric, cinnamon, maple syrup, and black pepper until well combined.</span> | |
| </li> | |
| <li class="flex"> | |
| <span class="inline-flex items-center justify-center w-8 h-8 bg-[rgb(218,129,70)] text-white rounded-full mr-3 flex-shrink-0">2</span> | |
| <span>Let the mixture sit for 5 minutes, then whisk again to prevent clumping.</span> | |
| </li> | |
| <li class="flex"> | |
| <span class="inline-flex items-center justify-center w-8 h-8 bg-[rgb(218,129,70)] text-white rounded-full mr-3 flex-shrink-0">3</span> | |
| <span>Cover and refrigerate for at least 2 hours, or preferably overnight.</span> | |
| </li> | |
| <li class="flex"> | |
| <span class="inline-flex items-center justify-center w-8 h-8 bg-[rgb(218,129,70)] text-white rounded-full mr-3 flex-shrink-0">4</span> | |
| <span>Before serving, give it a good stir. The pudding should be thick and creamy.</span> | |
| </li> | |
| <li class="flex"> | |
| <span class="inline-flex items-center justify-center w-8 h-8 bg-[rgb(218,129,70)] text-white rounded-full mr-3 flex-shrink-0">5</span> | |
| <span>Top with fresh mango, toasted coconut flakes, and a sprinkle of bee pollen for extra nutrients and crunch.</span> | |
| </li> | |
| </ol> | |
| <div class="mt-8"> | |
| <h4 class="font-bold mb-2 text-gray-700">Chef's Tip:</h4> | |
| <p class="text-gray-600 bg-yellow-50 p-3 rounded-lg border-l-4 border-[rgb(218,129,70)]">For an extra flavor boost, add a pinch of cardamom or ginger. The black pepper is crucial as it enhances turmeric absorption by up to 2000%!</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-12"> | |
| <h3 class="title-font text-2xl mb-4 text-gray-800 border-b border-[rgb(218,129,70)] pb-2">Recipe Story</h3> | |
| <p class="text-gray-600 mb-4">This recipe was inspired by traditional Ayurvedic golden milk but transformed into a convenient, make-ahead breakfast. The combination of turmeric's anti-inflammatory properties with the healthy fats from coconut creates a perfect balance for gut health and sustained energy.</p> | |
| <p class="text-gray-600">I discovered this combination while traveling in Bali, where local healers would start their day with turmeric-infused drinks. By turning it into a chia pudding, we get all the benefits with the added fiber and protein from the chia seeds.</p> | |
| </div> | |
| </div> | |
| <!-- Sidebar --> | |
| <div class="lg:w-1/3"> | |
| <div class="sticky top-4 space-y-8"> | |
| <div class="recipe-card h-80"> | |
| <div class="card-inner h-full w-full"> | |
| <div class="card-front h-full bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="h-48 bg-[rgb(218,129,70)] flex items-center justify-center"> | |
| <i class="fas fa-utensils text-white text-6xl"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="title-font text-xl mb-2">Golden Morning Boost</h3> | |
| <p class="text-gray-600 text-sm">Your vibrant start to the day</p> | |
| </div> | |
| </div> | |
| <div class="card-back absolute top-0 h-full w-full bg-[rgb(91,137,89)] text-white p-6 rounded-xl shadow-md"> | |
| <h3 class="title-font text-xl mb-4">Why You'll Love It</h3> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-clock mr-2 mt-1 text-[rgb(218,129,70)]"></i> | |
| <span>Prep in 5 min, ready overnight</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-heart mr-2 mt-1 text-[rgb(218,129,70)]"></i> | |
| <span>Packed with anti-inflammatory ingredients</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-leaf mr-2 mt-1 text-[rgb(218,129,70)]"></i> | |
| <span>Vegan & gluten-free friendly</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-bolt mr-2 mt-1 text-[rgb(218,129,70)]"></i> | |
| <span>Sustained energy for hours</span> | |
| </li> | |
| </ul> | |
| <button class="mt-6 bg-[rgb(218,129,70)] hover:bg-[rgb(200,110,60)] text-white px-6 py-2 rounded-full transition">Save Recipe</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md"> | |
| <h3 class="title-font text-xl mb-4 text-gray-800">Similar Recipes</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-center p-3 hover:bg-gray-50 rounded-lg transition cursor-pointer"> | |
| <div class="w-16 h-16 bg-[rgb(218,129,70)] rounded-lg mr-4 flex items-center justify-center text-white"> | |
| <i class="fas fa-blender text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Golden Smoothie Bowl</h4> | |
| <p class="text-sm text-gray-600">5 min prep • Vegan</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center p-3 hover:bg-gray-50 rounded-lg transition cursor-pointer"> | |
| <div class="w-16 h-16 bg-[rgb(91,137,89)] rounded-lg mr-4 flex items-center justify-center text-white"> | |
| <i class="fas fa-mug-hot text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Spiced Latte Mix</h4> | |
| <p class="text-sm text-gray-600">Make-ahead • Dairy-free</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center p-3 hover:bg-gray-50 rounded-lg transition cursor-pointer"> | |
| <div class="w-16 h-16 bg-[rgb(218,129,70)] rounded-lg mr-4 flex items-center justify-center text-white"> | |
| <i class="fas fa-cookie text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Turmeric Energy Bites</h4> | |
| <p class="text-sm text-gray-600">No-bake • 6 ingredients</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-[rgb(91,137,89)] text-white p-6 rounded-xl shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 bg-[rgb(218,129,70)] rounded-full mr-4 flex items-center justify-center text-xl"> | |
| <i class="fas fa-question"></i> | |
| </div> | |
| <h3 class="title-font text-xl">Did You Know?</h3> | |
| </div> | |
| <p>Turmeric has been used in Ayurvedic medicine for over 4,000 years. The active compound curcumin is what gives it the vibrant color and health benefits, but it needs to be combined with fat (like coconut milk) and black pepper for optimal absorption.</p> | |
| <div class="mt-4 flex justify-center"> | |
| <div class="floating w-16 h-16 bg-[rgb(218,129,70)] rounded-full flex items-center justify-center"> | |
| <i class="fas fa-seedling text-2xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <footer class="bg-[rgb(91,137,89)] text-white py-12 px-4"> | |
| <div class="container mx-auto"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-6 md:mb-0"> | |
| <h2 class="title-font text-2xl mb-2"> | |
| <span class="text-[rgb(218,129,70)]">Flavor</span>Fusion | |
| </h2> | |
| <p class="text-sm">Radical recipes for modern lives</p> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="w-10 h-10 bg-[rgb(218,129,70)] rounded-full flex items-center justify-center hover:bg-[rgb(200,110,60)] transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-[rgb(218,129,70)] rounded-full flex items-center justify-center hover:bg-[rgb(200,110,60)] transition"> | |
| <i class="fab fa-pinterest"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-[rgb(218,129,70)] rounded-full flex items-center justify-center hover:bg-[rgb(200,110,60)] transition"> | |
| <i class="fab fa-tiktok"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="border-t border-[rgba(255,255,255,0.1)] mt-8 pt-8 text-center text-sm"> | |
| <p>© 2023 FlavorFusion. All recipes are property of their delicious creators.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Simple animation for nutrition bubbles on hover | |
| document.querySelectorAll('.nutrition-bubble').forEach(bubble => { | |
| bubble.addEventListener('mouseenter', function() { | |
| this.style.transform = 'scale(1.1)'; | |
| }); | |
| bubble.addEventListener('mouseleave', function() { | |
| this.style.transform = 'scale(1)'; | |
| }); | |
| }); | |
| // Rotate the floating icon on click | |
| const floatingIcon = document.querySelector('.floating'); | |
| if (floatingIcon) { | |
| floatingIcon.addEventListener('click', function() { | |
| this.style.transform = 'rotate(360deg)'; | |
| setTimeout(() => { | |
| this.style.transform = ''; | |
| }, 1000); | |
| }); | |
| } | |
| </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=holyredbeard/ffff" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |