Spaces:
Running
Running
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Mundo da Lasanha</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=Pacifico&family=Roboto:wght@400;700&display=swap'); | |
| body { | |
| font-family: 'Roboto', sans-serif; | |
| background-color: #FFF9E6; | |
| } | |
| .title-font { | |
| font-family: 'Pacifico', cursive; | |
| } | |
| .cheese-texture { | |
| background: repeating-linear-gradient( | |
| 45deg, | |
| #FDE047, | |
| #FDE047 10px, | |
| #FBBF24 10px, | |
| #FBBF24 20px | |
| ); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| text-shadow: 2px 2px 4px rgba(0,0,0,0.2); | |
| } | |
| .pasta-layer { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .pasta-layer::before { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: repeating-linear-gradient( | |
| 0deg, | |
| transparent, | |
| transparent 5px, | |
| rgba(255,255,255,0.3) 5px, | |
| rgba(255,255,255,0.3) 7px | |
| ); | |
| z-index: -1; | |
| } | |
| .meat-sauce { | |
| background: linear-gradient(145deg, #991B1B, #7F1D1D); | |
| box-shadow: inset 0 0 15px rgba(0,0,0,0.3); | |
| } | |
| .cheese-bubble { | |
| position: absolute; | |
| background: #FDE047; | |
| border-radius: 50%; | |
| opacity: 0.8; | |
| animation: bubble 4s infinite ease-in-out; | |
| } | |
| @keyframes bubble { | |
| 0%, 100% { | |
| transform: translateY(0) scale(1); | |
| opacity: 0.8; | |
| } | |
| 50% { | |
| transform: translateY(-20px) scale(1.2); | |
| opacity: 1; | |
| } | |
| } | |
| .lasagna-icon { | |
| transform: rotate(15deg); | |
| filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.3)); | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen bg-amber-50"> | |
| <!-- Bolhas de queijo animadas --> | |
| <div id="cheese-bubbles"></div> | |
| <!-- Cabeçalho --> | |
| <header class="p-6 pasta-layer bg-amber-400 relative overflow-hidden"> | |
| <div class="container mx-auto flex flex-col md:flex-row items-center justify-between"> | |
| <div class="flex items-center mb-4 md:mb-0"> | |
| <i class="fas fa-utensils text-4xl text-red-700 mr-3 lasagna-icon"></i> | |
| <h1 class="title-font text-4xl md:text-5xl font-bold"> | |
| <span class="cheese-texture">Mundo da</span> | |
| <span class="text-red-700">Lasanha</span> | |
| </h1> | |
| </div> | |
| <nav class="flex space-x-4"> | |
| <a href="#historia" class="px-4 py-2 bg-amber-300 hover:bg-amber-200 rounded-full font-semibold text-red-800 transition">História</a> | |
| <a href="#receita" class="px-4 py-2 bg-amber-300 hover:bg-amber-200 rounded-full font-semibold text-red-800 transition">Receita</a> | |
| <a href="#curiosidades" class="px-4 py-2 bg-amber-300 hover:bg-amber-200 rounded-full font-semibold text-red-800 transition">Curiosidades</a> | |
| </nav> | |
| </div> | |
| </header> | |
| <!-- Banner Principal --> | |
| <section class="relative h-96 overflow-hidden"> | |
| <div class="absolute inset-0 bg-gradient-to-r from-amber-400 to-red-700 opacity-90"></div> | |
| <img src="https://images.unsplash.com/photo-1619895092538-128df799aa2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Lasanha deliciosa" | |
| class="w-full h-full object-cover"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <div class="text-center p-8 bg-white bg-opacity-90 rounded-xl max-w-2xl mx-4"> | |
| <h2 class="title-font text-4xl md:text-5xl text-red-700 mb-4">A Arte da Lasanha</h2> | |
| <p class="text-lg text-amber-900 mb-6">Camadas perfeitas de massa, queijo derretido e molho bolonhesa - uma experiência gastronômica que aquece o coração.</p> | |
| <button class="px-8 py-3 bg-red-600 hover:bg-red-700 text-white font-bold rounded-full transition transform hover:scale-105 shadow-lg"> | |
| <i class="fas fa-utensils mr-2"></i> Aprenda a Fazer | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Seção História --> | |
| <section id="historia" class="py-16 bg-amber-100 pasta-layer"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8"> | |
| <h2 class="title-font text-3xl md:text-4xl text-red-700 mb-6"> | |
| <span class="cheese-texture">História</span> da Lasanha | |
| </h2> | |
| <p class="text-amber-900 mb-4 text-lg">A lasanha é um prato que remonta à Grécia Antiga, onde era conhecida como "Laganon" - uma massa folhada com camadas de ingredientes.</p> | |
| <p class="text-amber-900 mb-4 text-lg">Na Idade Média, na Itália, a lasanha evoluiu para se parecer mais com o que conhecemos hoje, especialmente na região da Emília-Romanha, onde a Lasanha à Bolonhesa se tornou famosa.</p> | |
| <p class="text-amber-900 text-lg">O nome "lasanha" vem da palavra grega "lasanon", que se referia ao pote no qual o prato era cozido, e mais tarde passou a designar o próprio prato.</p> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <div class="relative"> | |
| <div class="bg-white p-4 rounded-lg shadow-xl transform rotate-2"> | |
| <img src="https://images.unsplash.com/photo-1574894709920-11b28e7367e3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=735&q=80" | |
| alt="Lasanha antiga" | |
| class="w-full h-auto rounded-lg border-4 border-amber-200"> | |
| </div> | |
| <div class="absolute -bottom-4 -right-4 bg-amber-300 p-2 rounded-full shadow-lg"> | |
| <i class="fas fa-history text-3xl text-red-700"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Seção Receita --> | |
| <section id="receita" class="py-16 meat-sauce text-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="title-font text-3xl md:text-4xl text-center mb-12"> | |
| <span class="cheese-texture">Receita</span> Autêntica | |
| </h2> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <!-- Ingredientes --> | |
| <div class="bg-white bg-opacity-20 p-6 rounded-xl backdrop-blur-sm"> | |
| <h3 class="text-2xl font-bold mb-4 flex items-center"> | |
| <i class="fas fa-shopping-basket mr-2"></i> Ingredientes | |
| </h3> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-amber-300 mt-1 mr-2"></i> | |
| <span>12 folhas de massa para lasanha</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-amber-300 mt-1 mr-2"></i> | |
| <span>500g de carne moída</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-amber-300 mt-1 mr-2"></i> | |
| <span>2 xícaras de molho de tomate</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-amber-300 mt-1 mr-2"></i> | |
| <span>200g de presunto fatiado</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-amber-300 mt-1 mr-2"></i> | |
| <span>200g de mussarela fatiada</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-amber-300 mt-1 mr-2"></i> | |
| <span>1 cebola picada</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-amber-300 mt-1 mr-2"></i> | |
| <span>2 dentes de alho</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-amber-300 mt-1 mr-2"></i> | |
| <span>Queijo parmesão ralado a gosto</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Modo de Preparo --> | |
| <div class="bg-white bg-opacity-20 p-6 rounded-xl backdrop-blur-sm"> | |
| <h3 class="text-2xl font-bold mb-4 flex items-center"> | |
| <i class="fas fa-utensils mr-2"></i> Modo de Preparo | |
| </h3> | |
| <ol class="space-y-4"> | |
| <li class="flex"> | |
| <span class="bg-amber-400 text-red-800 font-bold rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">1</span> | |
| <span>Cozinhe a massa segundo as instruções do pacote.</span> | |
| </li> | |
| <li class="flex"> | |
| <span class="bg-amber-400 text-red-800 font-bold rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">2</span> | |
| <span>Refogue a cebola e o alho, acrescente a carne e temperos.</span> | |
| </li> | |
| <li class="flex"> | |
| <span class="bg-amber-400 text-red-800 font-bold rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">3</span> | |
| <span>Adicione o molho de tomate e cozinhe por 10 minutos.</span> | |
| </li> | |
| <li class="flex"> | |
| <span class="bg-amber-400 text-red-800 font-bold rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">4</span> | |
| <span>Monte a lasanha intercalando molho, massa, presunto e queijo.</span> | |
| </li> | |
| <li class="flex"> | |
| <span class="bg-amber-400 text-red-800 font-bold rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">5</span> | |
| <span>Finalize com queijo parmesão e leve ao forno por 20 minutos.</span> | |
| </li> | |
| </ol> | |
| </div> | |
| <!-- Dicas --> | |
| <div class="bg-white bg-opacity-20 p-6 rounded-xl backdrop-blur-sm"> | |
| <h3 class="text-2xl font-bold mb-4 flex items-center"> | |
| <i class="fas fa-lightbulb mr-2"></i> Dicas do Chef | |
| </h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <i class="fas fa-cheese text-amber-300 mt-1 mr-2"></i> | |
| <div> | |
| <h4 class="font-semibold">Queijo Extra</h4> | |
| <p class="text-sm">Adicione ricota entre as camadas para um sabor mais cremoso.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <i class="fas fa-clock text-amber-300 mt-1 mr-2"></i> | |
| <div> | |
| <h4 class="font-semibold">Descanso</h4> | |
| <p class="text-sm">Deixe a lasanha descansar por 10 minutos antes de servir.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <i class="fas fa-wine-glass-alt text-amber-300 mt-1 mr-2"></i> | |
| <div> | |
| <h4 class="font-semibold">Harmonização</h4> | |
| <p class="text-sm">Sirva com um vinho tinto encorpado como Chianti.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <i class="fas fa-leaf text-amber-300 mt-1 mr-2"></i> | |
| <div> | |
| <h4 class="font-semibold">Vegetariana</h4> | |
| <p class="text-sm">Substitua a carne por berinjela e abobrinha grelhadas.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 text-center"> | |
| <button class="px-8 py-3 bg-amber-400 hover:bg-amber-300 text-red-800 font-bold rounded-full transition transform hover:scale-105 shadow-lg flex items-center mx-auto"> | |
| <i class="fas fa-download mr-2"></i> Baixar Receita Completa | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Seção Curiosidades --> | |
| <section id="curiosidades" class="py-16 bg-amber-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="title-font text-3xl md:text-4xl text-center mb-12 text-red-700"> | |
| <span class="cheese-texture">Curiosidades</span> Saborosas | |
| </h2> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <!-- Card 1 --> | |
| <div class="bg-white p-6 rounded-xl shadow-md border-t-4 border-amber-400 transform hover:scale-105 transition duration-300"> | |
| <div class="text-amber-500 text-4xl mb-4"> | |
| <i class="fas fa-globe-europe"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-red-700 mb-3">Popularidade Global</h3> | |
| <p class="text-amber-900">A lasanha é um dos pratos italianos mais conhecidos no mundo, com variações em diversos países, como a Lasanha Verde na Itália e a Lasanha de Espinafre nos EUA.</p> | |
| </div> | |
| <!-- Card 2 --> | |
| <div class="bg-white p-6 rounded-xl shadow-md border-t-4 border-amber-400 transform hover:scale-105 transition duration-300"> | |
| <div class="text-amber-500 text-4xl mb-4"> | |
| <i class="fas fa-award"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-red-700 mb-3">Recorde Mundial</h3> | |
| <p class="text-amber-900">A maior lasanha do mundo foi feita em 2012 na Polônia, pesando incríveis 4.85 toneladas! Demorou 5 horas para cozinhar e alimentou milhares de pessoas.</p> | |
| </div> | |
| <!-- Card 3 --> | |
| <div class="bg-white p-6 rounded-xl shadow-md border-t-4 border-amber-400 transform hover:scale-105 transition duration-300"> | |
| <div class="text-amber-500 text-4xl mb-4"> | |
| <i class="fas fa-film"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-red-700 mb-3">Fama no Cinema</h3> | |
| <p class="text-amber-900">A lasanha ficou famosa no desenho Garfield, onde o gato adora comer lasanha. Isso aumentou ainda mais a popularidade do prato entre crianças e adultos.</p> | |
| </div> | |
| </div> | |
| <div class="mt-12 bg-amber-100 rounded-xl p-6 pasta-layer"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/3 mb-6 md:mb-0"> | |
| <img src="https://images.unsplash.com/photo-1574894709920-11b28e7367e3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=735&q=80" | |
| alt="Lasanha variada" | |
| class="w-full h-auto rounded-lg shadow-lg"> | |
| </div> | |
| <div class="md:w-2/3 md:pl-8"> | |
| <h3 class="text-2xl font-bold text-red-700 mb-4">Variações da Lasanha</h3> | |
| <p class="text-amber-900 mb-4">Além da tradicional Lasanha à Bolonhesa, existem diversas variações ao redor do mundo:</p> | |
| <ul class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-chevron-right text-amber-500 mt-1 mr-2"></i> | |
| <span class="font-semibold text-red-700">Lasanha Verde:</span> Com massa feita com espinafre | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-chevron-right text-amber-500 mt-1 mr-2"></i> | |
| <span class="font-semibold text-red-700">Lasanha de Frango:</span> Com molho branco e frango desfiado | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-chevron-right text-amber-500 mt-1 mr-2"></i> | |
| <span class="font-semibold text-red-700">Lasanha de Abobrinha:</span> Versão low-carb sem massa | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-chevron-right text-amber-500 mt-1 mr-2"></i> | |
| <span class="font-semibold text-red-700">Lasanha de Berinjela:</span> Popular versão vegetariana | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-chevron-right text-amber-500 mt-1 mr-2"></i> | |
| <span class="font-semibold text-red-700">Lasanha de 4 Queijos:</span> Para os amantes de queijo | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-chevron-right text-amber-500 mt-1 mr-2"></i> | |
| <span class="font-semibold text-red-700">Lasanha Doce:</span> Versão com chocolate e creme | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Rodapé --> | |
| <footer class="bg-amber-900 text-amber-100 py-8"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <h2 class="title-font text-2xl flex items-center"> | |
| <i class="fas fa-utensils mr-2 text-amber-300"></i> | |
| <span class="cheese-texture">Mundo</span> da Lasanha | |
| </h2> | |
| <p class="mt-2 text-sm">© 2023 Todos os direitos reservados</p> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="w-10 h-10 bg-amber-800 hover:bg-amber-700 rounded-full flex items-center justify-center transition"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-amber-800 hover:bg-amber-700 rounded-full flex items-center justify-center transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-amber-800 hover:bg-amber-700 rounded-full flex items-center justify-center transition"> | |
| <i class="fab fa-pinterest-p"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-amber-800 hover:bg-amber-700 rounded-full flex items-center justify-center transition"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="mt-8 pt-6 border-t border-amber-800 text-center text-sm"> | |
| <p>Este site é dedicado a todos os amantes de lasanha. Lasanha não é apenas comida, é um estilo de vida!</p> | |
| <p class="mt-2">Desenvolvido com <i class="fas fa-heart text-red-400"></i> por apaixonados por culinária</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Criar bolhas de queijo animadas | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const container = document.getElementById('cheese-bubbles'); | |
| const colors = ['#FDE047', '#FBBF24', '#F59E0B']; | |
| for (let i = 0; i < 20; i++) { | |
| const bubble = document.createElement('div'); | |
| bubble.className = 'cheese-bubble'; | |
| // Tamanho aleatório entre 10 e 30px | |
| const size = Math.random() * 20 + 10; | |
| bubble.style.width = `${size}px`; | |
| bubble.style.height = `${size}px`; | |
| // Posição aleatória na tela | |
| bubble.style.left = `${Math.random() * 100}%`; | |
| bubble.style.top = `${Math.random() * 100}%`; | |
| // Cor aleatória | |
| bubble.style.background = colors[Math.floor(Math.random() * colors.length)]; | |
| // Atraso de animação aleatório | |
| bubble.style.animationDelay = `${Math.random() * 5}s`; | |
| bubble.style.animationDuration = `${Math.random() * 3 + 3}s`; | |
| container.appendChild(bubble); | |
| } | |
| // Efeito de hover nos cards de curiosidades | |
| const cards = document.querySelectorAll('#curiosidades .grid > div'); | |
| cards.forEach(card => { | |
| card.addEventListener('mouseenter', () => { | |
| const icon = card.querySelector('div:first-child i'); | |
| icon.classList.add('animate-bounce'); | |
| }); | |
| card.addEventListener('mouseleave', () => { | |
| const icon = card.querySelector('div:first-child i'); | |
| icon.classList.remove('animate-bounce'); | |
| }); | |
| }); | |
| }); | |
| </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=jonbertoldi/mundo-da-lasanha" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |