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
f576410 verified Download index.html from holyredbeard/fdd: direct link, hf CLI and curl.
- Browser
- Download file 30.3 kB
-
https://huggingface.co/spaces/holyredbeard/fdd/resolve/main/index.html
- Command line
-
hf download hf://spaces/holyredbeard/fdd/index.html
-
curl -L -o index.html https://huggingface.co/spaces/holyredbeard/fdd/resolve/main/index.html
30.3 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>FlavorFolio | Avocado Mango Sushi Bowls</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@300;400;600;700&family=Playfair+Display:wght@700;900&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: rgb(250, 249, 247); | |
| color: #333; | |
| } | |
| .title-font { | |
| font-family: 'Playfair Display', serif; | |
| } | |
| .ingredient-checkbox:checked + span { | |
| text-decoration: line-through; | |
| color: rgba(91, 137, 89, 0.5); | |
| } | |
| .recipe-card { | |
| box-shadow: 8px 8px 0 rgba(0,0,0,0.1); | |
| transition: all 0.3s ease; | |
| } | |
| .recipe-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 12px 12px 0 rgba(0,0,0,0.15); | |
| } | |
| .nutrition-circle { | |
| width: 80px; | |
| height: 80px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| flex-direction: column; | |
| } | |
| @keyframes float { | |
| 0%, 100% { | |
| transform: translateY(0); | |
| } | |
| 50% { | |
| transform: translateY(-10px); | |
| } | |
| } | |
| .floating-icon { | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header class="bg-[rgb(91,137,89)] text-white sticky top-0 z-50"> | |
| <div class="container mx-auto px-4 py-4 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <span class="text-3xl mr-2 floating-icon">🍣</span> | |
| <h1 class="title-font text-3xl font-bold">FlavorFolio</h1> | |
| </div> | |
| <nav class="hidden md:block"> | |
| <ul class="flex space-x-8"> | |
| <li><a href="#" class="hover:underline font-medium">Recipes</a></li> | |
| <li><a href="#" class="hover:underline font-medium">Collections</a></li> | |
| <li><a href="#" class="hover:underline font-medium">Techniques</a></li> | |
| <li><a href="#" class="hover:underline font-medium">About</a></li> | |
| </ul> | |
| </nav> | |
| <button class="md:hidden text-2xl"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </header> | |
| <main class="container mx-auto px-4 py-8"> | |
| <!-- Recipe Hero Section --> | |
| <section class="mb-16"> | |
| <div class="flex flex-col md:flex-row gap-8"> | |
| <div class="md:w-1/2"> | |
| <div class="bg-white recipe-card p-6 rounded-xl border-2 border-black mb-6"> | |
| <span class="inline-block bg-[rgb(218,129,70)] text-white px-3 py-1 rounded-full text-sm font-bold mb-4">30-MINUTE MEAL</span> | |
| <h1 class="title-font text-4xl md:text-5xl font-bold mb-4">Avocado Mango Sushi Bowls</h1> | |
| <p class="text-lg mb-6">A vibrant deconstructed sushi bowl with all your favorite sushi flavors without the rolling fuss. Fresh, colorful, and packed with nutrients!</p> | |
| <div class="flex flex-wrap gap-4 mb-6"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-clock text-[rgb(218,129,70)] mr-2"></i> | |
| <span>25 mins</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-utensils text-[rgb(218,129,70)] mr-2"></i> | |
| <span>2 servings</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-fire text-[rgb(218,129,70)] mr-2"></i> | |
| <span>Medium</span> | |
| </div> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <button class="bg-[rgb(91,137,89)] hover:bg-[rgb(70,110,68)] text-white px-6 py-2 rounded-full font-bold flex items-center"> | |
| <i class="fas fa-heart mr-2"></i> Save | |
| </button> | |
| <button class="bg-[rgb(218,129,70)] hover:bg-[rgb(200,110,50)] text-white px-6 py-2 rounded-full font-bold flex items-center"> | |
| <i class="fas fa-share-alt mr-2"></i> Share | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-white recipe-card p-6 rounded-xl border-2 border-black"> | |
| <h2 class="title-font text-2xl font-bold mb-4">Nutrition Facts</h2> | |
| <div class="flex justify-between flex-wrap gap-4"> | |
| <div class="nutrition-circle bg-[rgba(91,137,89,0.1)] border-2 border-[rgb(91,137,89)] text-[rgb(91,137,89)]"> | |
| <span class="font-bold text-xl">450</span> | |
| <span class="text-sm">calories</span> | |
| </div> | |
| <div class="nutrition-circle bg-[rgba(218,129,70,0.1)] border-2 border-[rgb(218,129,70)] text-[rgb(218,129,70)]"> | |
| <span class="font-bold text-xl">18g</span> | |
| <span class="text-sm">protein</span> | |
| </div> | |
| <div class="nutrition-circle bg-[rgba(91,137,89,0.1)] border-2 border-[rgb(91,137,89)] text-[rgb(91,137,89)]"> | |
| <span class="font-bold text-xl">12g</span> | |
| <span class="text-sm">fiber</span> | |
| </div> | |
| <div class="nutrition-circle bg-[rgba(218,129,70,0.1)] border-2 border-[rgb(218,129,70)] text-[rgb(218,129,70)]"> | |
| <span class="font-bold text-xl">65g</span> | |
| <span class="text-sm">carbs</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <div class="relative h-full min-h-[400px] bg-white recipe-card rounded-xl border-2 border-black overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1617196034183-421b4917c92d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" | |
| alt="Avocado Mango Sushi Bowl" | |
| class="w-full h-full object-cover"> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-6"> | |
| <p class="text-white text-lg">"The perfect balance of sweet, savory, and umami in every bite!"</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Recipe Content --> | |
| <section class="flex flex-col lg:flex-row gap-12 mb-16"> | |
| <!-- Ingredients --> | |
| <div class="lg:w-1/3"> | |
| <div class="bg-white recipe-card p-6 rounded-xl border-2 border-black sticky top-24"> | |
| <h2 class="title-font text-3xl font-bold mb-6 flex items-center"> | |
| <span class="inline-block w-8 h-8 bg-[rgb(218,129,70)] text-white rounded-full flex items-center justify-center mr-3">1</span> | |
| Ingredients | |
| </h2> | |
| <h3 class="font-bold text-lg mb-3 text-[rgb(91,137,89)]">Main Components</h3> | |
| <ul class="space-y-3 mb-6"> | |
| <li class="flex items-start"> | |
| <input type="checkbox" id="ing1" class="ingredient-checkbox mr-3 mt-1"> | |
| <label for="ing1"><span>1 cup sushi rice, cooked and cooled</span></label> | |
| </li> | |
| <li class="flex items-start"> | |
| <input type="checkbox" id="ing2" class="ingredient-checkbox mr-3 mt-1"> | |
| <label for="ing2"><span>1 ripe avocado, sliced</span></label> | |
| </li> | |
| <li class="flex items-start"> | |
| <input type="checkbox" id="ing3" class="ingredient-checkbox mr-3 mt-1"> | |
| <label for="ing3"><span>1 mango, diced</span></label> | |
| </li> | |
| <li class="flex items-start"> | |
| <input type="checkbox" id="ing4" class="ingredient-checkbox mr-3 mt-1"> | |
| <label for="ing4"><span>1 small cucumber, julienned</span></label> | |
| </li> | |
| <li class="flex items-start"> | |
| <input type="checkbox" id="ing5" class="ingredient-checkbox mr-3 mt-1"> | |
| <label for="ing5"><span>200g fresh sushi-grade salmon, cubed</span></label> | |
| </li> | |
| </ul> | |
| <h3 class="font-bold text-lg mb-3 text-[rgb(91,137,89)]">Dressing</h3> | |
| <ul class="space-y-3 mb-6"> | |
| <li class="flex items-start"> | |
| <input type="checkbox" id="ing6" class="ingredient-checkbox mr-3 mt-1"> | |
| <label for="ing6"><span>2 tbsp rice vinegar</span></label> | |
| </li> | |
| <li class="flex items-start"> | |
| <input type="checkbox" id="ing7" class="ingredient-checkbox mr-3 mt-1"> | |
| <label for="ing7"><span>1 tbsp soy sauce</span></label> | |
| </li> | |
| <li class="flex items-start"> | |
| <input type="checkbox" id="ing8" class="ingredient-checkbox mr-3 mt-1"> | |
| <label for="ing8"><span>1 tsp sesame oil</span></label> | |
| </li> | |
| <li class="flex items-start"> | |
| <input type="checkbox" id="ing9" class="ingredient-checkbox mr-3 mt-1"> | |
| <label for="ing9"><span>1 tsp honey</span></label> | |
| </li> | |
| </ul> | |
| <h3 class="font-bold text-lg mb-3 text-[rgb(91,137,89)]">Toppings</h3> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <input type="checkbox" id="ing10" class="ingredient-checkbox mr-3 mt-1"> | |
| <label for="ing10"><span>2 tbsp toasted sesame seeds</span></label> | |
| </li> | |
| <li class="flex items-start"> | |
| <input type="checkbox" id="ing11" class="ingredient-checkbox mr-3 mt-1"> | |
| <label for="ing11"><span>1 sheet nori, shredded</span></label> | |
| </li> | |
| <li class="flex items-start"> | |
| <input type="checkbox" id="ing12" class="ingredient-checkbox mr-3 mt-1"> | |
| <label for="ing12"><span>Pickled ginger (to serve)</span></label> | |
| </li> | |
| <li class="flex items-start"> | |
| <input type="checkbox" id="ing13" class="ingredient-checkbox mr-3 mt-1"> | |
| <label for="ing13"><span>Wasabi (optional)</span></label> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Instructions --> | |
| <div class="lg:w-2/3"> | |
| <div class="bg-white recipe-card p-6 rounded-xl border-2 border-black mb-8"> | |
| <h2 class="title-font text-3xl font-bold mb-6 flex items-center"> | |
| <span class="inline-block w-8 h-8 bg-[rgb(218,129,70)] text-white rounded-full flex items-center justify-center mr-3">2</span> | |
| Instructions | |
| </h2> | |
| <div class="space-y-8"> | |
| <div class="flex"> | |
| <span class="inline-block w-8 h-8 bg-[rgb(91,137,89)] text-white rounded-full flex-shrink-0 flex items-center justify-center mr-4 font-bold">1</span> | |
| <div> | |
| <h3 class="font-bold text-lg mb-2">Prepare the rice</h3> | |
| <p>Cook sushi rice according to package instructions. Once cooked, spread it on a tray and sprinkle with rice vinegar while fanning it to cool it quickly. Let it come to room temperature.</p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <span class="inline-block w-8 h-8 bg-[rgb(91,137,89)] text-white rounded-full flex-shrink-0 flex items-center justify-center mr-4 font-bold">2</span> | |
| <div> | |
| <h3 class="font-bold text-lg mb-2">Make the dressing</h3> | |
| <p>In a small bowl, whisk together rice vinegar, soy sauce, sesame oil, and honey until well combined. Set aside.</p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <span class="inline-block w-8 h-8 bg-[rgb(91,137,89)] text-white rounded-full flex-shrink-0 flex items-center justify-center mr-4 font-bold">3</span> | |
| <div> | |
| <h3 class="font-bold text-lg mb-2">Prepare the toppings</h3> | |
| <p>Slice the avocado, dice the mango, julienne the cucumber, and cube the salmon if not already prepared. Keep ingredients separate for beautiful assembly.</p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <span class="inline-block w-8 h-8 bg-[rgb(91,137,89)] text-white rounded-full flex-shrink-0 flex items-center justify-center mr-4 font-bold">4</span> | |
| <div> | |
| <h3 class="font-bold text-lg mb-2">Assemble the bowls</h3> | |
| <p>Divide the cooled rice between two bowls. Arrange the avocado, mango, cucumber, and salmon artfully on top of the rice. Drizzle with the dressing and sprinkle with sesame seeds and shredded nori.</p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <span class="inline-block w-8 h-8 bg-[rgb(91,137,89)] text-white rounded-full flex-shrink-0 flex items-center justify-center mr-4 font-bold">5</span> | |
| <div> | |
| <h3 class="font-bold text-lg mb-2">Serve and enjoy</h3> | |
| <p>Serve immediately with pickled ginger and wasabi on the side. Mix gently before eating to combine all the flavors.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Chef's Tips --> | |
| <div class="bg-white recipe-card p-6 rounded-xl border-2 border-black mb-8"> | |
| <h2 class="title-font text-3xl font-bold mb-6 flex items-center"> | |
| <i class="fas fa-lightbulb text-[rgb(218,129,70)] mr-3 text-3xl"></i> | |
| Chef's Tips | |
| </h2> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div class="bg-[rgba(91,137,89,0.05)] p-4 rounded-lg border-l-4 border-[rgb(91,137,89)]"> | |
| <h3 class="font-bold text-lg mb-2 text-[rgb(91,137,89)]">Rice Perfection</h3> | |
| <p>For authentic sushi rice texture, use a wooden bowl and wooden paddle when mixing in the vinegar to prevent the rice from getting mushy.</p> | |
| </div> | |
| <div class="bg-[rgba(218,129,70,0.05)] p-4 rounded-lg border-l-4 border-[rgb(218,129,70)]"> | |
| <h3 class="font-bold text-lg mb-2 text-[rgb(218,129,70)]">Knife Skills</h3> | |
| <p>Use a very sharp knife when cutting the salmon to get clean cuts. Dip the knife in water between cuts to prevent sticking.</p> | |
| </div> | |
| <div class="bg-[rgba(91,137,89,0.05)] p-4 rounded-lg border-l-4 border-[rgb(91,137,89)]"> | |
| <h3 class="font-bold text-lg mb-2 text-[rgb(91,137,89)]">Make Ahead</h3> | |
| <p>Prepare all components separately and assemble just before serving to maintain texture and freshness.</p> | |
| </div> | |
| <div class="bg-[rgba(218,129,70,0.05)] p-4 rounded-lg border-l-4 border-[rgb(218,129,70)]"> | |
| <h3 class="font-bold text-lg mb-2 text-[rgb(218,129,70)]">Vegetarian Option</h3> | |
| <p>Replace salmon with marinated tofu or tempeh for a delicious vegetarian version.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Pairing Suggestions --> | |
| <div class="bg-white recipe-card p-6 rounded-xl border-2 border-black"> | |
| <h2 class="title-font text-3xl font-bold mb-6 flex items-center"> | |
| <i class="fas fa-wine-glass-alt text-[rgb(218,129,70)] mr-3 text-3xl"></i> | |
| Perfect Pairings | |
| </h2> | |
| <div class="flex flex-wrap gap-6"> | |
| <div class="flex items-center bg-[rgba(91,137,89,0.05)] p-3 rounded-lg"> | |
| <div class="w-16 h-16 bg-[rgb(91,137,89)] rounded-full flex items-center justify-center text-white mr-4"> | |
| <i class="fas fa-wine-glass text-2xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold">Sake</h3> | |
| <p class="text-sm">Junmai Ginjo Sake</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center bg-[rgba(91,137,89,0.05)] p-3 rounded-lg"> | |
| <div class="w-16 h-16 bg-[rgb(91,137,89)] rounded-full flex items-center justify-center text-white mr-4"> | |
| <i class="fas fa-coffee text-2xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold">Tea</h3> | |
| <p class="text-sm">Sencha Green Tea</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center bg-[rgba(91,137,89,0.05)] p-3 rounded-lg"> | |
| <div class="w-16 h-16 bg-[rgb(91,137,89)] rounded-full flex items-center justify-center text-white mr-4"> | |
| <i class="fas fa-beer text-2xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold">Beer</h3> | |
| <p class="text-sm">Japanese Lager</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Similar Recipes --> | |
| <section class="mb-16"> | |
| <h2 class="title-font text-3xl font-bold mb-8 text-center">More Recipes You'll Love</h2> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <div class="bg-white recipe-card rounded-xl border-2 border-black overflow-hidden hover:translate-y-[-8px] transition-transform"> | |
| <img src="https://images.unsplash.com/photo-1546069901-ba9599a7e63c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80" | |
| alt="Buddha Bowl" | |
| class="w-full h-48 object-cover"> | |
| <div class="p-4"> | |
| <span class="inline-block bg-[rgb(218,129,70)] text-white px-2 py-1 rounded-full text-xs font-bold mb-2">VEGETARIAN</span> | |
| <h3 class="font-bold text-xl mb-2">Rainbow Buddha Bowl</h3> | |
| <p class="text-sm mb-3">A colorful mix of roasted veggies, grains, and tahini dressing</p> | |
| <div class="flex justify-between text-sm"> | |
| <span class="flex items-center"><i class="fas fa-clock mr-1"></i> 35 min</span> | |
| <span class="flex items-center"><i class="fas fa-fire mr-1"></i> Easy</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white recipe-card rounded-xl border-2 border-black overflow-hidden hover:translate-y-[-8px] transition-transform"> | |
| <img src="https://images.unsplash.com/photo-1512621776951-a57141f2eefd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" | |
| alt="Salad" | |
| class="w-full h-48 object-cover"> | |
| <div class="p-4"> | |
| <span class="inline-block bg-[rgb(91,137,89)] text-white px-2 py-1 rounded-full text-xs font-bold mb-2">HEALTHY</span> | |
| <h3 class="font-bold text-xl mb-2">Superfood Salad</h3> | |
| <p class="text-sm mb-3">Packed with quinoa, kale, avocado and pomegranate</p> | |
| <div class="flex justify-between text-sm"> | |
| <span class="flex items-center"><i class="fas fa-clock mr-1"></i> 20 min</span> | |
| <span class="flex items-center"><i class="fas fa-fire mr-1"></i> Easy</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white recipe-card rounded-xl border-2 border-black overflow-hidden hover:translate-y-[-8px] transition-transform"> | |
| <img src="https://images.unsplash.com/photo-1551504734-5ee1c4a1479b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" | |
| alt="Tacos" | |
| class="w-full h-48 object-cover"> | |
| <div class="p-4"> | |
| <span class="inline-block bg-[rgb(218,129,70)] text-white px-2 py-1 rounded-full text-xs font-bold mb-2">SPICY</span> | |
| <h3 class="font-bold text-xl mb-2">Korean BBQ Tacos</h3> | |
| <p class="text-sm mb-3">Fusion tacos with bulgogi beef and kimchi slaw</p> | |
| <div class="flex justify-between text-sm"> | |
| <span class="flex items-center"><i class="fas fa-clock mr-1"></i> 45 min</span> | |
| <span class="flex items-center"><i class="fas fa-fire mr-1"></i> Medium</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white recipe-card rounded-xl border-2 border-black overflow-hidden hover:translate-y-[-8px] transition-transform"> | |
| <img src="https://images.unsplash.com/photo-1547592180-85f173990554?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" | |
| alt="Pasta" | |
| class="w-full h-48 object-cover"> | |
| <div class="p-4"> | |
| <span class="inline-block bg-[rgb(91,137,89)] text-white px-2 py-1 rounded-full text-xs font-bold mb-2">COMFORT</span> | |
| <h3 class="font-bold text-xl mb-2">Creamy Mushroom Pasta</h3> | |
| <p class="text-sm mb-3">Rich and earthy pasta with wild mushrooms</p> | |
| <div class="flex justify-between text-sm"> | |
| <span class="flex items-center"><i class="fas fa-clock mr-1"></i> 30 min</span> | |
| <span class="flex items-center"><i class="fas fa-fire mr-1"></i> Easy</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <footer class="bg-[rgb(91,137,89)] text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between mb-8"> | |
| <div class="mb-8 md:mb-0"> | |
| <div class="flex items-center mb-4"> | |
| <span class="text-3xl mr-2">🍣</span> | |
| <h2 class="title-font text-3xl font-bold">FlavorFolio</h2> | |
| </div> | |
| <p class="max-w-xs">Revolutionizing the way you discover, cook, and enjoy food with bold flavors and creative recipes.</p> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-3 gap-8"> | |
| <div> | |
| <h3 class="font-bold text-lg mb-4">Explore</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:underline">Recipes</a></li> | |
| <li><a href="#" class="hover:underline">Collections</a></li> | |
| <li><a href="#" class="hover:underline">Techniques</a></li> | |
| <li><a href="#" class="hover:underline">Seasonal</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-lg mb-4">Company</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:underline">About Us</a></li> | |
| <li><a href="#" class="hover:underline">Careers</a></li> | |
| <li><a href="#" class="hover:underline">Blog</a></li> | |
| <li><a href="#" class="hover:underline">Press</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-lg mb-4">Connect</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:underline">Contact</a></li> | |
| <li><a href="#" class="hover:underline">FAQ</a></li> | |
| <li><a href="#" class="hover:underline">Newsletter</a></li> | |
| <li class="flex space-x-4 mt-4"> | |
| <a href="#"><i class="fab fa-instagram text-xl"></i></a> | |
| <a href="#"><i class="fab fa-pinterest text-xl"></i></a> | |
| <a href="#"><i class="fab fa-tiktok text-xl"></i></a> | |
| <a href="#"><i class="fab fa-youtube text-xl"></i></a> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="pt-8 border-t border-[rgba(255,255,255,0.2)] flex flex-col md:flex-row justify-between items-center"> | |
| <p>© 2023 FlavorFolio. All rights reserved.</p> | |
| <div class="flex space-x-6 mt-4 md:mt-0"> | |
| <a href="#" class="hover:underline">Privacy Policy</a> | |
| <a href="#" class="hover:underline">Terms of Service</a> | |
| <a href="#" class="hover:underline">Cookies</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Simple script to handle ingredient checkboxes | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const checkboxes = document.querySelectorAll('.ingredient-checkbox'); | |
| checkboxes.forEach(checkbox => { | |
| checkbox.addEventListener('change', function() { | |
| const label = this.nextElementSibling; | |
| if (this.checked) { | |
| label.style.textDecoration = 'line-through'; | |
| label.style.color = 'rgba(91, 137, 89, 0.5)'; | |
| } else { | |
| label.style.textDecoration = 'none'; | |
| label.style.color = 'inherit'; | |
| } | |
| }); | |
| }); | |
| // Mobile menu toggle would go here | |
| }); | |
| </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/fdd" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |