| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Marrakesh Pizza - Moroccan Inspired Pizzas</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=Amiri:wght@400;700&family=Poppins:wght@300;400;600;700&display=swap'); |
| |
| body { |
| font-family: 'Poppins', sans-serif; |
| background-color: #f8f3e6; |
| color: #3a2c1a; |
| } |
| |
| .arabic { |
| font-family: 'Amiri', serif; |
| } |
| |
| .hero-pattern { |
| background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSg0NSkiPjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0iI2U1ZDRkMSI+PC9yZWN0PjwvcGF0dGVybj48L2RlZnM+PHJlY3QgZmlsbD0idXJsKCNwYXR0ZXJuKSIgaGVpZ2h0PSIxMDAlIiB3aWR0aD0iMTAwJSI+PC9yZWN0Pjwvc3ZnPg=='); |
| } |
| |
| .menu-item:hover .menu-overlay { |
| opacity: 1; |
| } |
| |
| .spice-level { |
| background: linear-gradient(90deg, #f97316 0%, #f97316 var(--level), #e5e7eb var(--level), #e5e7eb 100%); |
| } |
| |
| .tagine-shape { |
| clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); |
| } |
| |
| .floating { |
| animation: floating 3s ease-in-out infinite; |
| } |
| |
| @keyframes floating { |
| 0% { transform: translateY(0px); } |
| 50% { transform: translateY(-15px); } |
| 100% { transform: translateY(0px); } |
| } |
| </style> |
| </head> |
| <body> |
| |
| <nav class="bg-amber-900 text-amber-50 shadow-lg sticky top-0 z-50"> |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> |
| <div class="flex items-center space-x-2"> |
| <div class="tagine-shape bg-amber-700 w-10 h-10 flex items-center justify-center"> |
| <i class="fas fa-utensils text-amber-100"></i> |
| </div> |
| <span class="text-xl font-bold arabic">بيتزا مراكش</span> |
| <span class="text-xl font-bold hidden md:block">Marrakesh Pizza</span> |
| </div> |
| <div class="hidden md:flex space-x-6"> |
| <a href="#home" class="hover:text-amber-200 transition">Home</a> |
| <a href="#menu" class="hover:text-amber-200 transition">Menu</a> |
| <a href="#about" class="hover:text-amber-200 transition">About</a> |
| <a href="#contact" class="hover:text-amber-200 transition">Contact</a> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <button class="bg-amber-700 hover:bg-amber-600 px-4 py-2 rounded-full flex items-center"> |
| <i class="fas fa-shopping-cart mr-2"></i> |
| <span class="hidden md:inline">Order Now</span> |
| </button> |
| <button class="md:hidden text-2xl"> |
| <i class="fas fa-bars"></i> |
| </button> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <section id="home" class="hero-pattern relative overflow-hidden"> |
| <div class="container mx-auto px-4 py-20 md:py-32 flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 mb-10 md:mb-0 text-center md:text-left"> |
| <h1 class="text-4xl md:text-6xl font-bold mb-4 text-amber-900 arabic">بيتزا على الطريقة المغربية</h1> |
| <h2 class="text-3xl md:text-5xl font-bold mb-6 text-amber-800">Moroccan Inspired Pizzas</h2> |
| <p class="text-lg mb-8 text-amber-900 max-w-lg">Experience the perfect fusion of Italian tradition and Moroccan flavors with our unique pizza creations.</p> |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 justify-center md:justify-start"> |
| <button class="bg-amber-700 hover:bg-amber-600 text-white px-6 py-3 rounded-full font-bold transition"> |
| Order Online <i class="fas fa-arrow-right ml-2"></i> |
| </button> |
| <button class="border-2 border-amber-700 text-amber-700 hover:bg-amber-700 hover:text-white px-6 py-3 rounded-full font-bold transition"> |
| Our Menu |
| </button> |
| </div> |
| </div> |
| <div class="md:w-1/2 relative"> |
| <img src="https://images.unsplash.com/photo-1513104890138-7c749659a591?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" |
| alt="Moroccan Pizza" |
| class="w-full max-w-md mx-auto rounded-lg shadow-2xl border-8 border-amber-100 floating"> |
| <div class="absolute -bottom-6 -left-6 bg-amber-600 text-white px-4 py-2 rounded-lg shadow-lg"> |
| <span class="font-bold text-lg">Special Offer!</span> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="bg-amber-100 py-16"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl font-bold text-amber-900 mb-2 arabic">تخصصاتنا</h2> |
| <h3 class="text-2xl font-semibold text-amber-800">Our Specialties</h3> |
| <div class="w-24 h-1 bg-amber-600 mx-auto mt-4"></div> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden transition-transform hover:scale-105"> |
| <div class="h-48 overflow-hidden"> |
| <img src="https://images.unsplash.com/photo-1593504049359-74330189a345?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1527&q=80" |
| alt="Merguez Pizza" |
| class="w-full h-full object-cover"> |
| </div> |
| <div class="p-6"> |
| <div class="flex justify-between items-start mb-3"> |
| <h4 class="text-xl font-bold text-amber-900">Merguez Pizza</h4> |
| <span class="bg-amber-600 text-white px-3 py-1 rounded-full text-sm font-bold">Popular</span> |
| </div> |
| <p class="text-gray-600 mb-4">Spicy Moroccan sausage with harissa sauce, caramelized onions, and roasted peppers.</p> |
| <div class="flex justify-between items-center"> |
| <span class="text-amber-700 font-bold text-lg">$14.99</span> |
| <button class="bg-amber-600 hover:bg-amber-700 text-white px-4 py-2 rounded-full transition"> |
| <i class="fas fa-plus"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden transition-transform hover:scale-105"> |
| <div class="h-48 overflow-hidden"> |
| <img src="https://images.unsplash.com/photo-1541745537411-b8046dc6d66c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" |
| alt="Tagine Pizza" |
| class="w-full h-full object-cover"> |
| </div> |
| <div class="p-6"> |
| <div class="flex justify-between items-start mb-3"> |
| <h4 class="text-xl font-bold text-amber-900">Tagine Pizza</h4> |
| <span class="bg-amber-600 text-white px-3 py-1 rounded-full text-sm font-bold">Chef's Pick</span> |
| </div> |
| <p class="text-gray-600 mb-4">Slow-cooked lamb with prunes, almonds, and Moroccan spices on a crispy crust.</p> |
| <div class="flex justify-between items-center"> |
| <span class="text-amber-700 font-bold text-lg">$16.99</span> |
| <button class="bg-amber-600 hover:bg-amber-700 text-white px-4 py-2 rounded-full transition"> |
| <i class="fas fa-plus"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden transition-transform hover:scale-105"> |
| <div class="h-48 overflow-hidden"> |
| <img src="https://images.unsplash.com/photo-1601924994987-69e26d50dc96?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" |
| alt="Vegetarian Delight" |
| class="w-full h-full object-cover"> |
| </div> |
| <div class="p-6"> |
| <div class="flex justify-between items-start mb-3"> |
| <h4 class="text-xl font-bold text-amber-900">Vegetarian Delight</h4> |
| <span class="bg-green-600 text-white px-3 py-1 rounded-full text-sm font-bold">Vegan</span> |
| </div> |
| <p class="text-gray-600 mb-4">Zaalouk, roasted vegetables, olives, and preserved lemon on our signature crust.</p> |
| <div class="flex justify-between items-center"> |
| <span class="text-amber-700 font-bold text-lg">$13.99</span> |
| <button class="bg-amber-600 hover:bg-amber-700 text-white px-4 py-2 rounded-full transition"> |
| <i class="fas fa-plus"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="menu" class="py-16 bg-white"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl font-bold text-amber-900 mb-2 arabic">قائمتنا</h2> |
| <h3 class="text-2xl font-semibold text-amber-800">Our Menu</h3> |
| <div class="w-24 h-1 bg-amber-600 mx-auto mt-4"></div> |
| </div> |
| |
| <div class="flex flex-col md:flex-row"> |
| |
| <div class="md:w-1/4 mb-8 md:mb-0"> |
| <div class="sticky top-24 space-y-2"> |
| <button class="w-full text-left px-4 py-3 bg-amber-600 text-white rounded-lg font-bold">All Pizzas</button> |
| <button class="w-full text-left px-4 py-3 hover:bg-amber-100 rounded-lg transition">Meat Pizzas</button> |
| <button class="w-full text-left px-4 py-3 hover:bg-amber-100 rounded-lg transition">Vegetarian Pizzas</button> |
| <button class="w-full text-left px-4 py-3 hover:bg-amber-100 rounded-lg transition">Specialty Pizzas</button> |
| <button class="w-full text-left px-4 py-3 hover:bg-amber-100 rounded-lg transition">Sides & Salads</button> |
| <button class="w-full text-left px-4 py-3 hover:bg-amber-100 rounded-lg transition">Desserts</button> |
| <button class="w-full text-left px-4 py-3 hover:bg-amber-100 rounded-lg transition">Drinks</button> |
| </div> |
| </div> |
| |
| |
| <div class="md:w-3/4 md:pl-8"> |
| <h4 class="text-xl font-bold text-amber-800 mb-6 border-b-2 border-amber-200 pb-2">Signature Pizzas</h4> |
| |
| <div class="space-y-6"> |
| |
| <div class="flex flex-col sm:flex-row border-b border-amber-100 pb-6"> |
| <div class="sm:w-1/3 mb-4 sm:mb-0"> |
| <img src="https://images.unsplash.com/photo-1574126154517-d1e0d89ef734?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" |
| alt="Royal Feast Pizza" |
| class="w-full h-40 object-cover rounded-lg"> |
| </div> |
| <div class="sm:w-2/3 sm:pl-6"> |
| <div class="flex justify-between items-start"> |
| <h5 class="text-lg font-bold text-amber-900">Royal Feast Pizza</h5> |
| <span class="text-amber-700 font-bold">$18.99</span> |
| </div> |
| <p class="text-gray-600 my-2">A regal combination of lamb, beef, chicken, merguez sausage, and Moroccan spices.</p> |
| <div class="flex items-center mt-3"> |
| <div class="spice-level w-24 h-2 rounded-full mr-3" style="--level: 80%"></div> |
| <span class="text-sm text-gray-500">Spicy</span> |
| </div> |
| <button class="mt-4 bg-amber-600 hover:bg-amber-700 text-white px-4 py-2 rounded-full text-sm transition"> |
| Add to Order <i class="fas fa-plus ml-1"></i> |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="flex flex-col sm:flex-row border-b border-amber-100 pb-6"> |
| <div class="sm:w-1/3 mb-4 sm:mb-0"> |
| <img src="https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1381&q=80" |
| alt="Safi Seafood Pizza" |
| class="w-full h-40 object-cover rounded-lg"> |
| </div> |
| <div class="sm:w-2/3 sm:pl-6"> |
| <div class="flex justify-between items-start"> |
| <h5 class="text-lg font-bold text-amber-900">Safi Seafood Pizza</h5> |
| <span class="text-amber-700 font-bold">$17.99</span> |
| </div> |
| <p class="text-gray-600 my-2">Fresh seafood medley with chermoula sauce, preserved lemon, and olives.</p> |
| <div class="flex items-center mt-3"> |
| <div class="spice-level w-24 h-2 rounded-full mr-3" style="--level: 40%"></div> |
| <span class="text-sm text-gray-500">Mild</span> |
| </div> |
| <button class="mt-4 bg-amber-600 hover:bg-amber-700 text-white px-4 py-2 rounded-full text-sm transition"> |
| Add to Order <i class="fas fa-plus ml-1"></i> |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="flex flex-col sm:flex-row border-b border-amber-100 pb-6"> |
| <div class="sm:w-1/3 mb-4 sm:mb-0"> |
| <img src="https://images.unsplash.com/photo-1546069901-ba9599a7e63c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1480&q=80" |
| alt="Atlas Mountain Pizza" |
| class="w-full h-40 object-cover rounded-lg"> |
| </div> |
| <div class="sm:w-2/3 sm:pl-6"> |
| <div class="flex justify-between items-start"> |
| <h5 class="text-lg font-bold text-amber-900">Atlas Mountain Pizza</h5> |
| <span class="text-amber-700 font-bold">$15.99</span> |
| </div> |
| <p class="text-gray-600 my-2">Mushrooms, truffle oil, goat cheese, and wild herbs inspired by the Atlas Mountains.</p> |
| <div class="flex items-center mt-3"> |
| <div class="spice-level w-24 h-2 rounded-full mr-3" style="--level: 10%"></div> |
| <span class="text-sm text-gray-500">Not Spicy</span> |
| </div> |
| <button class="mt-4 bg-amber-600 hover:bg-amber-700 text-white px-4 py-2 rounded-full text-sm transition"> |
| Add to Order <i class="fas fa-plus ml-1"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| <h4 class="text-xl font-bold text-amber-800 my-6 border-b-2 border-amber-200 pb-2">Traditional Pizzas</h4> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| |
| <div class="border border-amber-100 rounded-lg p-4 hover:shadow-md transition"> |
| <div class="flex justify-between mb-2"> |
| <h5 class="font-bold text-amber-900">Merguez Classic</h5> |
| <span class="text-amber-700 font-bold">$14.99</span> |
| </div> |
| <p class="text-sm text-gray-600 mb-3">Traditional merguez sausage with harissa and onions.</p> |
| <button class="w-full bg-amber-100 hover:bg-amber-200 text-amber-800 px-3 py-1 rounded-full text-sm transition"> |
| Add to Cart |
| </button> |
| </div> |
| |
| |
| <div class="border border-amber-100 rounded-lg p-4 hover:shadow-md transition"> |
| <div class="flex justify-between mb-2"> |
| <h5 class="font-bold text-amber-900">Chicken Tagine</h5> |
| <span class="text-amber-700 font-bold">$15.99</span> |
| </div> |
| <p class="text-sm text-gray-600 mb-3">Tagine-spiced chicken with preserved lemons and olives.</p> |
| <button class="w-full bg-amber-100 hover:bg-amber-200 text-amber-800 px-3 py-1 rounded-full text-sm transition"> |
| Add to Cart |
| </button> |
| </div> |
| |
| |
| <div class="border border-amber-100 rounded-lg p-4 hover:shadow-md transition"> |
| <div class="flex justify-between mb-2"> |
| <h5 class="font-bold text-amber-900">Vegetarian Harira</h5> |
| <span class="text-amber-700 font-bold">$13.99</span> |
| </div> |
| <p class="text-sm text-gray-600 mb-3">Inspired by the traditional soup with lentils, chickpeas, and tomatoes.</p> |
| <button class="w-full bg-amber-100 hover:bg-amber-200 text-amber-800 px-3 py-1 rounded-full text-sm transition"> |
| Add to Cart |
| </button> |
| </div> |
| |
| |
| <div class="border border-amber-100 rounded-lg p-4 hover:shadow-md transition"> |
| <div class="flex justify-between mb-2"> |
| <h5 class="font-bold text-amber-900">Berber Spice</h5> |
| <span class="text-amber-700 font-bold">$14.49</span> |
| </div> |
| <p class="text-sm text-gray-600 mb-3">Beef with ras el hanout spice blend and roasted vegetables.</p> |
| <button class="w-full bg-amber-100 hover:bg-amber-200 text-amber-800 px-3 py-1 rounded-full text-sm transition"> |
| Add to Cart |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="about" class="py-16 bg-amber-50"> |
| <div class="container mx-auto px-4"> |
| <div class="flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10"> |
| <img src="https://images.unsplash.com/photo-1555396273-367ea4ebcdbd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" |
| alt="Our Chef" |
| class="w-full rounded-lg shadow-xl border-8 border-amber-100"> |
| </div> |
| <div class="md:w-1/2"> |
| <h2 class="text-3xl font-bold text-amber-900 mb-2 arabic">قصتنا</h2> |
| <h3 class="text-2xl font-semibold text-amber-800 mb-6">Our Story</h3> |
| <p class="text-gray-700 mb-4"> |
| Marrakesh Pizza was born from a love of both traditional Italian pizza and the rich, vibrant flavors of Moroccan cuisine. Our founder, Chef Youssef, grew up in the medina of Marrakesh before training in Naples, Italy. He dreamed of bringing these two culinary worlds together. |
| </p> |
| <p class="text-gray-700 mb-6"> |
| Every pizza we make starts with our 48-hour fermented dough, prepared using traditional methods. We then layer on authentic Moroccan ingredients - from hand-rolled merguez sausage to house-made preserved lemons and olives cured in argan oil. |
| </p> |
| <div class="flex space-x-4"> |
| <div class="bg-white p-4 rounded-lg shadow-md text-center flex-1"> |
| <i class="fas fa-leaf text-amber-600 text-2xl mb-2"></i> |
| <h4 class="font-bold text-amber-900">Fresh Ingredients</h4> |
| <p class="text-sm text-gray-600">Locally sourced and imported directly from Morocco</p> |
| </div> |
| <div class="bg-white p-4 rounded-lg shadow-md text-center flex-1"> |
| <i class="fas fa-fire-alt text-amber-600 text-2xl mb-2"></i> |
| <h4 class="font-bold text-amber-900">Wood-Fired Oven</h4> |
| <p class="text-sm text-gray-600">Traditional cooking for authentic flavor</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-amber-800 text-amber-50"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-12"> |
| <h2 class="text-3xl font-bold mb-2 arabic">آراء الزبائن</h2> |
| <h3 class="text-2xl font-semibold">Customer Reviews</h3> |
| <div class="w-24 h-1 bg-amber-200 mx-auto mt-4"></div> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| |
| <div class="bg-amber-700 p-6 rounded-lg shadow-lg"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-full bg-amber-600 flex items-center justify-center mr-4"> |
| <span class="text-xl font-bold">A</span> |
| </div> |
| <div> |
| <h4 class="font-bold">Amina B.</h4> |
| <div class="flex text-amber-200"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| </div> |
| </div> |
| </div> |
| <p class="italic">"The Merguez Pizza took me right back to the streets of Casablanca! Perfect crust and just the right amount of spice."</p> |
| </div> |
| |
| |
| <div class="bg-amber-700 p-6 rounded-lg shadow-lg"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-full bg-amber-600 flex items-center justify-center mr-4"> |
| <span class="text-xl font-bold">M</span> |
| </div> |
| <div> |
| <h4 class="font-bold">Michael T.</h4> |
| <div class="flex text-amber-200"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| </div> |
| </div> |
| </div> |
| <p class="italic">"I've never tasted anything like the Tagine Pizza. The combination of sweet prunes and savory lamb is incredible!"</p> |
| </div> |
| |
| |
| <div class="bg-amber-700 p-6 rounded-lg shadow-lg"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-full bg-amber-600 flex items-center justify-center mr-4"> |
| <span class="text-xl font-bold">S</span> |
| </div> |
| <div> |
| <h4 class="font-bold">Sophie K.</h4> |
| <div class="flex text-amber-200"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star-half-alt"></i> |
| </div> |
| </div> |
| </div> |
| <p class="italic">"As a vegetarian, I love the creative options. The Zaalouk pizza with roasted eggplant is my new favorite!"</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="contact" class="py-16 bg-white"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-12"> |
| <h2 class="text-3xl font-bold text-amber-900 mb-2 arabic">اتصل بنا</h2> |
| <h3 class="text-2xl font-semibold text-amber-800">Contact Us</h3> |
| <div class="w-24 h-1 bg-amber-600 mx-auto mt-4"></div> |
| </div> |
| |
| <div class="flex flex-col md:flex-row"> |
| <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8"> |
| <h4 class="text-xl font-bold text-amber-800 mb-4">Visit Us</h4> |
| <div class="bg-amber-50 p-6 rounded-lg shadow-inner mb-6"> |
| <div class="flex items-start mb-4"> |
| <i class="fas fa-map-marker-alt text-amber-600 mt-1 mr-3"></i> |
| <div> |
| <h5 class="font-bold text-amber-900">Location</h5> |
| <p>123 Spice Market Lane, Marrakesh District</p> |
| </div> |
| </div> |
| <div class="flex items-start mb-4"> |
| <i class="fas fa-clock text-amber-600 mt-1 mr-3"></i> |
| <div> |
| <h5 class="font-bold text-amber-900">Hours</h5> |
| <p>Monday - Thursday: 11am - 10pm</p> |
| <p>Friday - Saturday: 11am - 11pm</p> |
| <p>Sunday: 12pm - 9pm</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <i class="fas fa-phone-alt text-amber-600 mt-1 mr-3"></i> |
| <div> |
| <h5 class="font-bold text-amber-900">Phone</h5> |
| <p>(555) 123-4567</p> |
| </div> |
| </div> |
| </div> |
| |
| <h4 class="text-xl font-bold text-amber-800 mb-4">Follow Us</h4> |
| <div class="flex space-x-4"> |
| <a href="#" class="w-10 h-10 bg-amber-600 text-white rounded-full flex items-center justify-center hover:bg-amber-700 transition"> |
| <i class="fab fa-facebook-f"></i> |
| </a> |
| <a href="#" class="w-10 h-10 bg-amber-600 text-white rounded-full flex items-center justify-center hover:bg-amber-700 transition"> |
| <i class="fab fa-instagram"></i> |
| </a> |
| <a href="#" class="w-10 h-10 bg-amber-600 text-white rounded-full flex items-center justify-center hover:bg-amber-700 transition"> |
| <i class="fab fa-twitter"></i> |
| </a> |
| <a href="#" class="w-10 h-10 bg-amber-600 text-white rounded-full flex items-center justify-center hover:bg-amber-700 transition"> |
| <i class="fab fa-tiktok"></i> |
| </a> |
| </div> |
| </div> |
| |
| <div class="md:w-1/2"> |
| <h4 class="text-xl font-bold text-amber-800 mb-4">Send Us a Message</h4> |
| <form class="space-y-4"> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
| <div> |
| <label for="name" class="block text-sm font-medium text-amber-900 mb-1">Name</label> |
| <input type="text" id="name" class="w-full px-4 py-2 border border-amber-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500"> |
| </div> |
| <div> |
| <label for="email" class="block text-sm font-medium text-amber-900 mb-1">Email</label> |
| <input type="email" id="email" class="w-full px-4 py-2 border border-amber-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500"> |
| </div> |
| </div> |
| <div> |
| <label for="subject" class="block text-sm font-medium text-amber-900 mb-1">Subject</label> |
| <input type="text" id="subject" class="w-full px-4 py-2 border border-amber-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500"> |
| </div> |
| <div> |
| <label for="message" class="block text-sm font-medium text-amber-900 mb-1">Message</label> |
| <textarea id="message" rows="4" class="w-full px-4 py-2 border border-amber-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500"></textarea> |
| </div> |
| <button type="submit" class="bg-amber-600 hover:bg-amber-700 text-white px-6 py-3 rounded-lg font-bold transition"> |
| Send Message <i class="fas fa-paper-plane ml-2"></i> |
| </button> |
| </form> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <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"> |
| <div class="flex items-center space-x-2"> |
| <div class="tagine-shape bg-amber-700 w-8 h-8 flex items-center justify-center"> |
| <i class="fas fa-utensils text-amber-100"></i> |
| </div> |
| <span class="text-lg font-bold">Marrakesh Pizza</span> |
| </div> |
| <p class="text-sm mt-2">Bringing Moroccan flavors to the world, one pizza at a time.</p> |
| </div> |
| <div class="flex flex-col items-center md:items-end"> |
| <div class="flex space-x-4 mb-4"> |
| <a href="#" class="hover:text-amber-300 transition">Home</a> |
| <a href="#" class="hover:text-amber-300 transition">Menu</a> |
| <a href="#" class="hover:text-amber-300 transition">About</a> |
| <a href="#" class="hover:text-amber-300 transition">Contact</a> |
| </div> |
| <p class="text-xs">© 2023 Marrakesh Pizza. All rights reserved.</p> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| |
| <div class="fixed bottom-6 right-6 md:hidden"> |
| <button class="w-14 h-14 bg-amber-600 text-white rounded-full shadow-lg flex items-center justify-center hover:bg-amber-700 transition"> |
| <i class="fas fa-shopping-cart text-xl"></i> |
| </button> |
| </div> |
|
|
| <script> |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| const sections = document.querySelectorAll('section'); |
| const navLinks = document.querySelectorAll('nav a'); |
| |
| window.addEventListener('scroll', function() { |
| let current = ''; |
| |
| sections.forEach(section => { |
| const sectionTop = section.offsetTop; |
| const sectionHeight = section.clientHeight; |
| |
| if (pageYOffset >= (sectionTop - 100)) { |
| current = section.getAttribute('id'); |
| } |
| }); |
| |
| navLinks.forEach(link => { |
| link.classList.remove('text-amber-200'); |
| if (link.getAttribute('href') === `#${current}`) { |
| link.classList.add('text-amber-200'); |
| } |
| }); |
| }); |
| }); |
| </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=swa3ed/myworks" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
