Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Menu complet | Pizzeria Yummy Témara</title> | |
| <meta name="description" content="Découvrez notre menu complet avec pizzas, pâtes, desserts et boissons. Pizzeria Yummy vous propose des plats italiens artisanaux à Témara."> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| .menu-item:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); | |
| } | |
| .menu-category { | |
| scroll-margin-top: 100px; | |
| } | |
| .sticky-nav { | |
| position: sticky; | |
| top: 0; | |
| z-index: 50; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Navigation --> | |
| <nav class="sticky-nav bg-white shadow-md"> | |
| <div class="container mx-auto px-4 py-3"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-4"> | |
| <a href="index.html" class="text-2xl font-bold text-red-600">Pizzeria Yummy</a> | |
| <span class="hidden md:inline-block text-sm text-gray-500">Témara</span> | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="index.html" class="text-gray-800 hover:text-red-600 font-medium">Accueil</a> | |
| <a href="menu.html" class="text-red-600 font-medium">Menu</a> | |
| <a href="about.html" class="text-gray-800 hover:text-red-600 font-medium">À propos</a> | |
| <a href="contact.html" class="text-gray-800 hover:text-red-600 font-medium">Contact</a> | |
| <a href="blog.html" class="text-gray-800 hover:text-red-600 font-medium">Blog</a> | |
| </div> | |
| <div class="md:hidden"> | |
| <button id="menu-toggle" class="text-gray-800 focus:outline-none"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden md:hidden mt-4 pb-4"> | |
| <a href="index.html" class="block py-2 text-gray-800 hover:text-red-600">Accueil</a> | |
| <a href="menu.html" class="block py-2 text-red-600">Menu</a> | |
| <a href="about.html" class="block py-2 text-gray-800 hover:text-red-600">À propos</a> | |
| <a href="contact.html" class="block py-2 text-gray-800 hover:text-red-600">Contact</a> | |
| <a href="blog.html" class="block py-2 text-gray-800 hover:text-red-600">Blog</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Menu Header --> | |
| <section class="bg-red-600 text-white py-12"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h1 class="text-4xl font-bold mb-4">Notre Menu à Témara</h1> | |
| <p class="text-xl max-w-2xl mx-auto">Découvrez nos délicieuses pizzas artisanales et plats italiens préparés avec des ingrédients frais et locaux.</p> | |
| </div> | |
| </section> | |
| <!-- Menu Navigation --> | |
| <div class="bg-white shadow-sm sticky top-16 z-40"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex overflow-x-auto py-4 space-x-6 hide-scrollbar"> | |
| <a href="#pizzas" class="whitespace-nowrap px-3 py-1 rounded-full bg-red-100 text-red-600 font-medium">Pizzas</a> | |
| <a href="#pates" class="whitespace-nowrap px-3 py-1 rounded-full text-gray-600 hover:bg-gray-100 font-medium">Pâtes</a> | |
| <a href="#desserts" class="whitespace-nowrap px-3 py-1 rounded-full text-gray-600 hover:bg-gray-100 font-medium">Desserts</a> | |
| <a href="#boissons" class="whitespace-nowrap px-3 py-1 rounded-full text-gray-600 hover:bg-gray-100 font-medium">Boissons</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Menu Content --> | |
| <section class="py-12"> | |
| <div class="container mx-auto px-4"> | |
| <!-- Pizzas Section --> | |
| <div id="pizzas" class="menu-category mb-16"> | |
| <div class="flex items-center justify-between mb-8"> | |
| <h2 class="text-3xl font-bold">Pizzas</h2> | |
| <a href="pizzas.html" class="text-red-600 hover:text-red-700 font-medium flex items-center"> | |
| Voir toutes les pizzas <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Pizza 1 --> | |
| <div class="menu-item bg-white rounded-lg overflow-hidden shadow-sm transition duration-300"> | |
| <img src="http://static.photos/food/640x360/7" alt="Pizza Margherita Témara" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-xl font-bold">Margherita</h3> | |
| <span class="bg-red-100 text-red-600 px-2 py-1 rounded text-sm font-medium">65 DH</span> | |
| </div> | |
| <p class="text-gray-600 mb-4">Sauce tomate, mozzarella fraîche, basilic, huile d'olive.</p> | |
| <a href="pizzas/margherita-temara.html" class="text-red-600 hover:text-red-700 font-medium flex items-center"> | |
| En savoir plus <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Pizza 2 --> | |
| <div class="menu-item bg-white rounded-lg overflow-hidden shadow-sm transition duration-300"> | |
| <img src="http://static.photos/food/640x360/8" alt="Pizza Pepperoni Témara" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-xl font-bold">Pepperoni</h3> | |
| <span class="bg-red-100 text-red-600 px-2 py-1 rounded text-sm font-medium">75 DH</span> | |
| </div> | |
| <p class="text-gray-600 mb-4">Sauce tomate, mozzarella, pepperoni, origan.</p> | |
| <a href="pizzas/pepperoni-temara.html" class="text-red-600 hover:text-red-700 font-medium flex items-center"> | |
| En savoir plus <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Pizza 3 --> | |
| <div class="menu-item bg-white rounded-lg overflow-hidden shadow-sm transition duration-300"> | |
| <img src="http://static.photos/food/640x360/9" alt="Pizza Spéciale Yummy Témara" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-xl font-bold">Spéciale Yummy</h3> | |
| <span class="bg-red-100 text-red-600 px-2 py-1 rounded text-sm font-medium">85 DH</span> | |
| </div> | |
| <p class="text-gray-600 mb-4">Sauce tomate, mozzarella, jambon, champignons, olives, œuf.</p> | |
| <a href="pizzas/speciale-yummy-temara.html" class="text-red-600 hover:text-red-700 font-medium flex items-center"> | |
| En savoir plus <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Pâtes Section --> | |
| <div id="pates" class="menu-category mb-16"> | |
| <div class="flex items-center justify-between mb-8"> | |
| <h2 class="text-3xl font-bold">Pâtes</h2> | |
| <a href="pates.html" class="text-red-600 hover:text-red-700 font-medium flex items-center"> | |
| Voir toutes les pâtes <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Pasta 1 --> | |
| <div class="menu-item bg-white rounded-lg overflow-hidden shadow-sm transition duration-300"> | |
| <img src="http://static.photos/food/640x360/10" alt="Spaghetti Bolognese Témara" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-xl font-bold">Spaghetti Bolognese</h3> | |
| <span class="bg-red-100 text-red-600 px-2 py-1 rounded text-sm font-medium">65 DH</span> | |
| </div> | |
| <p class="text-gray-600 mb-4">Spaghetti, sauce bolognaise maison, parmesan.</p> | |
| <a href="pates/spaghetti-bolognese-temara.html" class="text-red-600 hover:text-red-700 font-medium flex items-center"> | |
| En savoir plus <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Pasta 2 --> | |
| <div class="menu-item bg-white rounded-lg overflow-hidden shadow-sm transition duration-300"> | |
| <img src="http://static.photos/food/640x360/11" alt="Penne Arrabbiata Témara" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-xl font-bold">Penne Arrabbiata</h3> | |
| <span class="bg-red-100 text-red-600 px-2 py-1 rounded text-sm font-medium">60 DH</span> | |
| </div> | |
| <p class="text-gray-600 mb-4">Penne, sauce tomate piquante, ail, persil.</p> | |
| <a href="pates/penne-arrabbiata-temara.html" class="text-red-600 hover:text-red-700 font-medium flex items-center"> | |
| En savoir plus <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Pasta 3 --> | |
| <div class="menu-item bg-white rounded-lg overflow-hidden shadow-sm transition duration-300"> | |
| <img src="http://static.photos/food/640x360/12" alt="Fettuccine Carbonara Témara" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-xl font-bold">Fettuccine Carbonara</h3> | |
| <span class="bg-red-100 text-red-600 px-2 py-1 rounded text-sm font-medium">70 DH</span> | |
| </div> | |
| <p class="text-gray-600 mb-4">Fettuccine, sauce carbonara crémeuse, lardons, parmesan.</p> | |
| <a href="pates/fettuccine-carbonara-temara.html" class="text-red-600 hover:text-red-700 font-medium flex items-center"> | |
| En savoir plus <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Desserts Section --> | |
| <div id="desserts" class="menu-category mb-16"> | |
| <div class="flex items-center justify-between mb-8"> | |
| <h2 class="text-3xl font-bold">Desserts</h2> | |
| <a href="desserts.html" class="text-red-600 hover:text-red-700 font-medium flex items-center"> | |
| Voir tous les desserts <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Dessert 1 --> | |
| <div class="menu-item bg-white rounded-lg overflow-hidden shadow-sm transition duration-300"> | |
| <img src="http://static.photos/food/640x360/13" alt="Tiramisu Témara" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-xl font-bold">Tiramisu</h3> | |
| <span class="bg-red-100 text-red-600 px-2 py-1 rounded text-sm font-medium">40 DH</span> | |
| </div> | |
| <p class="text-gray-600 mb-4">Classique italien au café et mascarpone.</p> | |
| <a href="desserts/tiramisu-temara.html" class="text-red-600 hover:text-red-700 font-medium flex items-center"> | |
| En savoir plus <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Dessert 2 --> | |
| <div class="menu-item bg-white rounded-lg overflow-hidden shadow-sm transition duration-300"> | |
| <img src="http://static.photos/food/640x360/14" alt="Panna Cotta Témara" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-xl font-bold">Panna Cotta</h3> | |
| <span class="bg-red-100 text-red-600 px-2 py-1 rounded text-sm font-medium">35 DH</span> | |
| </div> | |
| <p class="text-gray-600 mb-4">Crème dessert italienne avec coulis de fruits rouges.</p> | |
| <a href="desserts/panna-cotta-temara.html" class="text-red-600 hover:text-red-700 font-medium flex items-center"> | |
| En savoir plus <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Dessert 3 --> | |
| <div class="menu-item bg-white rounded-lg overflow-hidden shadow-sm transition duration-300"> | |
| <img src="http://static.photos/food/640x360/15" alt="Profiteroles Témara" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-xl font-bold">Profiteroles</h3> | |
| <span class="bg-red-100 text-red-600 px-2 py-1 rounded text-sm font-medium">45 DH</span> | |
| </div> | |
| <p class="text-gray-600 mb-4">Choux garnis de crème glacée et nappés de chocolat.</p> | |
| <a href="desserts/profiteroles-temara.html" class="text-red-600 hover:text-red-700 font-medium flex items-center"> | |
| En savoir plus <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Boissons Section --> | |
| <div id="boissons" class="menu-category"> | |
| <div class="flex items-center justify-between mb-8"> | |
| <h2 class="text-3xl font-bold">Boissons</h2> | |
| <a href="boissons.html" class="text-red-600 hover:text-red-700 font-medium flex items-center"> | |
| Voir toutes les boissons <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Boisson 1 --> | |
| <div class="menu-item bg-white rounded-lg overflow-hidden shadow-sm transition duration-300"> | |
| <img src="http://static.photos/food/640x360/16" alt="Boissons gazeuses Témara" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-xl font-bold">Boissons gazeuses</h3> | |
| <span class="bg-red-100 text-red-600 px-2 py-1 rounded text-sm font-medium">15 DH</span> | |
| </div> | |
| <p class="text-gray-600 mb-4">Coca-Cola, Fanta, Sprite, Schweppes.</p> | |
| </div> | |
| </div> | |
| <!-- Boisson 2 --> | |
| <div class="menu-item bg-white rounded-lg overflow-hidden shadow-sm transition duration-300"> | |
| <img src="http://static.photos/food/640x360/17" alt="Jus de fruits frais Témara" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-xl font-bold">Jus de fruits frais</h3> | |
| <span class="bg-red-100 text-red-600 px-2 py-1 rounded text-sm font-medium">20 DH</span> | |
| </div> | |
| <p class="text-gray-600 mb-4">Orange, citron, pomme, ananas.</p> | |
| </div> | |
| </div> | |
| <!-- Boisson 3 --> | |
| <div class="menu-item bg-white rounded-lg overflow-hidden shadow-sm transition duration-300"> | |
| <img src="http://static.photos/food/640x360/18" alt="Eaux minérales Témara" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-xl font-bold">Eaux minérales</h3> | |
| <span class="bg-red-100 text-red-600 px-2 py-1 rounded text-sm font-medium">10 DH</span> | |
| </div> | |
| <p class="text-gray-600 mb-4">Plate ou gazeuse, 50cl.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Call to Action --> | |
| <section class="bg-red-600 text-white py-12"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-3xl font-bold mb-4">Prêt à commander ?</h2> | |
| <p class="text-xl mb-8 max-w-2xl mx-auto">Livraison rapide dans toute la ville de Témara ou venez déguster sur place dans notre pizzeria conviviale.</p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <a href="contact.html" class="bg-white hover:bg-gray-100 text-red-600 font-bold py-3 px-6 rounded-lg transition duration-300">Commander maintenant</a> | |
| <a href="contact.html#reservation" class="bg-gray-800 hover:bg-black text-white font-bold py-3 px-6 rounded-lg transition duration-300">Réserver une table</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white pt-12 pb-6"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">Pizzeria Yummy</h3> | |
| <p class="text-gray-400">Les meilleures pizzas artisanales de Témara, préparées avec des ingrédients frais et beaucoup de passion.</p> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Navigation</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="index.html" class="text-gray-400 hover:text-white transition duration-300">Accueil</a></li> | |
| <li><a href="menu.html" class="text-gray-400 hover:text-white transition duration-300">Menu</a></li> | |
| <li><a href="about.html" class="text-gray-400 hover:text-white transition duration-300">À propos</a></li> | |
| <li><a href="contact.html" class="text-gray-400 hover:text-white transition duration-300">Contact</a></li> | |
| <li><a href="blog.html" class="text-gray-400 hover:text-white transition duration-300">Blog</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Contact</h4> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li class="flex items-start"> | |
| <i data-feather="map-pin" class="w-4 h-4 mr-2 mt-1"></i> | |
| <span>123 Avenue Hassan II, Témara 12000, Maroc</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="phone" class="w-4 h-4 mr-2"></i> | |
| <span>+212 123 456 789</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="mail" class="w-4 h-4 mr-2"></i> | |
| <span>contact@pizzeriayummy.ma</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Suivez-nous</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="bg-gray-700 hover:bg-gray-600 w-10 h-10 rounded-full flex items-center justify-center transition duration-300"> | |
| <i data-feather="facebook" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="bg-gray-700 hover:bg-gray-600 w-10 h-10 rounded-full flex items-center justify-center transition duration-300"> | |
| <i data-feather="instagram" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="bg-gray-700 hover:bg-gray-600 w-10 h-10 rounded-full flex items-center justify-center transition duration-300"> | |
| <i data-feather="twitter" class="w-5 h-5"></i> | |
| </a> | |
| </div> | |
| <div class="mt-6"> | |
| <a href="#" class="inline-flex items-center text-gray-400 hover:text-white transition duration-300"> | |
| <i data-feather="star" class="w-4 h-4 mr-2 text-yellow-400 fill-current"></i> | |
| Laissez un avis sur Google | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 pt-6 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 text-sm mb-4 md:mb-0">© 2023 Pizzeria Yummy. Tous droits réservés.</p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white text-sm transition duration-300">Mentions légales</a> | |
| <a href="#" class="text-gray-400 hover:text-white text-sm transition duration-300">Politique de confidentialité</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('menu-toggle').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| // Change icon | |
| const icon = this.querySelector('svg'); | |
| if (menu.classList.contains('hidden')) { | |
| feather.replace(); | |
| } else { | |
| icon.innerHTML = feather.icons.x.toSvg(); | |
| } | |
| }); | |
| // Initialize AOS animations | |
| AOS.init({ | |
| duration: 800, | |
| easing: 'ease-in-out', | |
| once: true | |
| }); | |
| // Initialize feather icons | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> | |