Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Persian Bites Delight | Full Menu</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Poppins:wght@300;400;600&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| } | |
| .menu-category { | |
| scroll-margin-top: 100px; | |
| } | |
| .menu-item:hover .menu-item-details { | |
| border-left-color: #b45309; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-amber-50"> | |
| <!-- Navigation --> | |
| <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"> | |
| <i data-feather="award" class="text-amber-300"></i> | |
| <a href="index.html" class="text-2xl font-bold font-serif">Persian Bites</a> | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="index.html" class="hover:text-amber-300 transition">Home</a> | |
| <a href="#starters" class="hover:text-amber-300 transition">Menu</a> | |
| <a href="index.html#about" class="hover:text-amber-300 transition">About</a> | |
| <a href="reservation.html" class="hover:text-amber-300 transition">Reservations</a> | |
| </div> | |
| <button class="md:hidden focus:outline-none" id="menu-btn"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div class="md:hidden hidden bg-amber-800 px-4 py-2" id="mobile-menu"> | |
| <a href="index.html" class="block py-2 hover:text-amber-300">Home</a> | |
| <a href="#starters" class="block py-2 hover:text-amber-300">Menu</a> | |
| <a href="index.html#about" class="block py-2 hover:text-amber-300">About</a> | |
| <a href="reservation.html" class="block py-2 hover:text-amber-300">Reservations</a> | |
| </div> | |
| </nav> | |
| <!-- Menu Header --> | |
| <section class="bg-amber-900/90 text-white py-16" style="background-image: url('http://static.photos/food/1200x630/44'); background-size: cover; background-position: center;"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h1 class="text-4xl md:text-5xl font-serif font-bold mb-4">Persian Cuisine Menu</h1> | |
| <p class="text-xl max-w-2xl mx-auto">Explore our authentic Iranian dishes prepared with traditional recipes and premium ingredients</p> | |
| </div> | |
| </section> | |
| <!-- Menu Navigation --> | |
| <div class="bg-white shadow-sm sticky top-16 z-40"> | |
| <div class="container mx-auto px-4 overflow-x-auto"> | |
| <div class="flex space-x-6 py-3"> | |
| <a href="#starters" class="whitespace-nowrap text-amber-900 hover:text-amber-700 font-medium">Starters</a> | |
| <a href="#salads" class="whitespace-nowrap text-amber-900 hover:text-amber-700 font-medium">Salads</a> | |
| <a href="#soups" class="whitespace-nowrap text-amber-900 hover:text-amber-700 font-medium">Soups</a> | |
| <a href="#kababs" class="whitespace-nowrap text-amber-900 hover:text-amber-700 font-medium">Kababs</a> | |
| <a href="#stews" class="whitespace-nowrap text-amber-900 hover:text-amber-700 font-medium">Stews</a> | |
| <a href="#rice" class="whitespace-nowrap text-amber-900 hover:text-amber-700 font-medium">Rice Dishes</a> | |
| <a href="#desserts" class="whitespace-nowrap text-amber-900 hover:text-amber-700 font-medium">Desserts</a> | |
| <a href="#drinks" class="whitespace-nowrap text-amber-900 hover:text-amber-700 font-medium">Drinks</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Menu Content --> | |
| <div class="container mx-auto px-4 py-12"> | |
| <!-- Starters --> | |
| <section id="starters" class="menu-category mb-16"> | |
| <div class="text-center mb-8"> | |
| <h2 class="text-2xl font-serif font-bold text-amber-900 border-b border-amber-200 pb-2 inline-block px-8">Starters & Appetizers</h2> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <!-- Item 1 --> | |
| <div class="menu-item bg-white rounded-lg shadow-sm overflow-hidden flex"> | |
| <div class="w-1/3"> | |
| <img src="http://static.photos/food/320x240/1" alt="Mirza Ghasemi" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="menu-item-details w-2/3 p-4 border-l-4 border-amber-100 transition"> | |
| <h3 class="font-bold text-lg text-amber-900">Mirza Ghasemi</h3> | |
| <p class="text-sm text-gray-600 mb-2">Smoked eggplant with tomato, garlic and eggs</p> | |
| <span class="text-amber-700 font-bold">$8.99</span> | |
| </div> | |
| </div> | |
| <!-- Item 2 --> | |
| <div class="menu-item bg-white rounded-lg shadow-sm overflow-hidden flex"> | |
| <div class="w-1/3"> | |
| <img src="http://static.photos/food/320x240/2" alt="Kashk-e Bademjan" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="menu-item-details w-2/3 p-4 border-l-4 border-amber-100 transition"> | |
| <h3 class="font-bold text-lg text-amber-900">Kashk-e Bademjan</h3> | |
| <p class="text-sm text-gray-600 mb-2">Eggplant dip with whey, fried onion and mint</p> | |
| <span class="text-amber-700 font-bold">$7.99</span> | |
| </div> | |
| </div> | |
| <!-- Item 3 --> | |
| <div class="menu-item bg-white rounded-lg shadow-sm overflow-hidden flex"> | |
| <div class="w-1/3"> | |
| <img src="http://static.photos/food/320x240/3" alt="Sabzi Khordan" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="menu-item-details w-2/3 p-4 border-l-4 border-amber-100 transition"> | |
| <h3 class="font-bold text-lg text-amber-900">Sabzi Khordan</h3> | |
| <p class="text-sm text-gray-600 mb-2">Fresh herb platter with feta, walnuts and radish</p> | |
| <span class="text-amber-700 font-bold">$6.99</span> | |
| </div> | |
| </div> | |
| <!-- Item 4 --> | |
| <div class="menu-item bg-white rounded-lg shadow-sm overflow-hidden flex"> | |
| <div class="w-1/3"> | |
| <img src="http://static.photos/food/320x240/4" alt="Ash Reshteh" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="menu-item-details w-2/3 p-4 border-l-4 border-amber-100 transition"> | |
| <h3 class="font-bold text-lg text-amber-900">Ash Reshteh</h3> | |
| <p class="text-sm text-gray-600 mb-2">Persian noodle soup with herbs and beans (cup)</p> | |
| <span class="text-amber-700 font-bold">$5.99</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Salads --> | |
| <section id="salads" class="menu-category mb-16"> | |
| <div class="text-center mb-8"> | |
| <h2 class="text-2xl font-serif font-bold text-amber-900 border-b border-amber-200 pb-2 inline-block px-8">Salads</h2> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <!-- Item 1 --> | |
| <div class="menu-item bg-white rounded-lg shadow-sm overflow-hidden flex"> | |
| <div class="w-1/3"> | |
| <img src="http://static.photos/food/320x240/5" alt="Shirazi Salad" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="menu-item-details w-2/3 p-4 border-l-4 border-amber-100 transition"> | |
| <h3 class="font-bold text-lg text-amber-900">Shirazi Salad</h3> | |
| <p class="text-sm text-gray-600 mb-2">Diced cucumbers, tomatoes, onions with lime dressing</p> | |
| <span class="text-amber-700 font-bold">$7.99</span> | |
| </div> | |
| </div> | |
| <!-- Item 2 --> | |
| <div class="menu-item bg-white rounded-lg shadow-sm overflow-hidden flex"> | |
| <div class="w-1/3"> | |
| <img src="http://static.photos/food/320x240/6" alt="Persian Garden Salad" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="menu-item-details w-2/3 p-4 border-l-4 border-amber-100 transition"> | |
| <h3 class="font-bold text-lg text-amber-900">Persian Garden Salad</h3> | |
| <p class="text-sm text-gray-600 mb-2">Mixed greens with pomegranate, walnuts and feta</p> | |
| <span class="text-amber-700 font-bold">$9.99</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Kababs --> | |
| <section id="kababs" class="menu-category mb-16"> | |
| <div class="text-center mb-8"> | |
| <h2 class="text-2xl font-serif font-bold text-amber-900 border-b border-amber-200 pb-2 inline-block px-8">Kababs</h2> | |
| <p class="text-gray-600 mt-2">All kababs served with saffron basmati rice, grilled tomato and sumac</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <!-- Item 1 --> | |
| <div class="menu-item bg-white rounded-lg shadow-sm overflow-hidden flex"> | |
| <div class="w-1/3"> | |
| <img src="http://static.photos/food/320x240/7" alt="Chelo Kabab Koobideh" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="menu-item-details w-2/3 p-4 border-l-4 border-amber-100 transition"> | |
| <h3 class="font-bold text-lg text-amber-900">Chelo Kabab Koobideh</h3> | |
| <p class="text-sm text-gray-600 mb-2">Two skewers of seasoned ground beef & lamb</p> | |
| <span class="text-amber-700 font-bold">$18.99</span> | |
| </div> | |
| </div> | |
| <!-- Item 2 --> | |
| <div class="menu-item bg-white rounded-lg shadow-sm overflow-hidden flex"> | |
| <div class="w-1/3"> | |
| <img src="http://static.photos/food/320x240/8" alt="Chelo Kabab Barg" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="menu-item-details w-2/3 p-4 border-l-4 border-amber-100 transition"> | |
| <h3 class="font-bold text-lg text-amber-900">Chelo Kabab Barg</h3> | |
| <p class="text-sm text-gray-600 mb-2">Tender cuts of marinated filet mignon</p> | |
| <span class="text-amber-700 font-bold">$22.99</span> | |
| </div> | |
| </div> | |
| <!-- Item 3 --> | |
| <div class="menu-item bg-white rounded-lg shadow-sm overflow-hidden flex"> | |
| <div class="w-1/3"> | |
| <img src="http://static.photos/food/320x240/9" alt="Joojeh Kabab" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="menu-item-details w-2/3 p-4 border-l-4 border-amber-100 transition"> | |
| <h3 class="font-bold text-lg text-amber-900">Joojeh Kabab</h3> | |
| <p class="text-sm text-gray-600 mb-2">Marinated chicken breast with saffron</p> | |
| <span class="text-amber-700 font-bold">$17.99</span> | |
| </div> | |
| </div> | |
| <!-- Item 4 --> | |
| <div class="menu-item bg-white rounded-lg shadow-sm overflow-hidden flex"> | |
| <div class="w-1/3"> | |
| <img src="http://static.photos/food/320x240/10" alt="Kabab Soltani" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="menu-item-details w-2/3 p-4 border-l-4 border-amber-100 transition"> | |
| <h3 class="font-bold text-lg text-amber-900">Kabab Soltani</h3> | |
| <p class="text-sm text-gray-600 mb-2">One skewer Koobideh & one skewer Barg</p> | |
| <span class="text-amber-700 font-bold">$23.99</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Stews --> | |
| <section id="stews" class="menu-category mb-16"> | |
| <div class="text-center mb-8"> | |
| <h2 class="text-2xl font-serif font-bold text-amber-900 border-b border-amber-200 pb-2 inline-block px-8">Stews (Khoresht)</h2> | |
| <p class="text-gray-600 mt-2">All stews served with saffron basmati rice</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <!-- Item 1 --> | |
| <div class="menu-item bg-white rounded-lg shadow-sm overflow-hidden flex"> | |
| <div class="w-1/3"> | |
| <img src="http://static.photos/food/320x240/11" alt="Ghormeh Sabzi" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="menu-item-details w-2/3 p-4 border-l-4 border-amber-100 transition"> | |
| <h3 class="font-bold text-lg text-amber-900">Ghormeh Sabzi</h3> | |
| <p class="text-sm text-gray-600 mb-2">Herb stew with kidney beans, dried lime and beef</p> | |
| <span class="text-amber-700 font-bold">$16.99</span> | |
| </div> | |
| </div> | |
| <!-- Item 2 --> | |
| <div class="menu-item bg-white rounded-lg shadow-sm overflow-hidden flex"> | |
| <div class="w-1/3"> | |
| <img src="http://static.photos/food/320x240/12" alt="Fesenjan" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="menu-item-details w-2/3 p-4 border-l-4 border-amber-100 transition"> | |
| <h3 class="font-bold text-lg text-amber-900">Fesenjan</h3> | |
| <p class="text-sm text-gray-600 mb-2">Pomegranate walnut stew with chicken</p> | |
| <span class="text-amber-700 font-bold">$17.99</span> | |
| </div> | |
| </div> | |
| <!-- Item 3 --> | |
| <div class="menu-item bg-white rounded-lg shadow-sm overflow-hidden flex"> | |
| <div class="w-1/3"> | |
| <img src="http://static.photos/food/320x240/13" alt="Gheimeh" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="menu-item-details w-2/3 p-4 border-l-4 border-amber-100 transition"> | |
| <h3 class="font-bold text-lg text-amber-900">Khoresht Gheimeh</h3> | |
| <p class="text-sm text-gray-600 mb-2">Yellow split pea stew with beef & french fries</p> | |
| <span class="text-amber-700 font-bold">$16.99</span> | |
| </div> | |
| </div> | |
| <!-- Item 4 --> | |
| <div class="menu-item bg-white rounded-lg shadow-sm overflow-hidden flex"> | |
| <div class="w-1/3"> | |
| <img src="http://static.photos/food/320x240/14" alt="Bademjan" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="menu-item-details w-2/3 p-4 border-l-4 border-amber-100 transition"> | |
| <h3 class="font-bold text-lg text-amber-900">Khoresht Bademjan</h3> | |
| <p class="text-sm text-gray-600 mb-2">Eggplant and tomato stew with beef</p> | |
| <span class="text-amber-700 font-bold">$16.99</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Rice Dishes --> | |
| <section id="rice" class="menu-category mb-16"> | |
| <div class="text-center mb-8"> | |
| <h2 class="text-2xl font-serif font-bold text-amber-900 border-b border-amber-200 pb-2 inline-block px-8">Rice Dishes (Polo)</h2> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <!-- Item 1 --> | |
| <div class="menu-item bg-white rounded-lg shadow-sm overflow-hidden flex"> | |
| <div class="w-1/3"> | |
| <img src="http://static.photos/food/320x240/15" alt="Baghali Polo" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="menu-item-details w-2/3 p-4 border-l-4 border-amber-100 transition"> | |
| <h3 class="font-bold text-lg text-amber-900">Baghali Polo</h3> | |
| <p class="text-sm text-gray-600 mb-2">Dill rice with broad beans and lamb shank</p> | |
| <span class="text-amber-700 font-bold">$19.99</span> | |
| </div> | |
| </div> | |
| <!-- Item 2 --> | |
| <div class="menu-item bg-white rounded-lg shadow-sm overflow-hidden flex"> | |
| <div class="w-1/3"> | |
| <img src="http://static.photos/food/320x240/16" alt="Zereshk Polo" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="menu-item-details w-2/3 p-4 border-l-4 border-amber-100 transition"> | |
| <h3 class="font-bold text-lg text-amber-900">Zereshk Polo</h3> | |
| <p class="text-sm text-gray-600 mb-2">Barberry rice with chicken</p> | |
| <span class="text-amber-700 font-bold">$17.99</span> | |
| </div> | |
| </div> | |
| <!-- Item 3 --> | |
| <div class="menu-item bg-white rounded-lg shadow-sm overflow-hidden flex"> | |
| <div class="w-1/3"> | |
| <img src="http://static.photos/food/320x240/17" alt="Sabzi Polo" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="menu-item-details w-2/3 p-4 border-l-4 border-amber-100 transition"> | |
| <h3 class="font-bold text-lg text-amber-900">Sabzi Polo</h3> | |
| <p class="text-sm text-gray-600 mb-2">Herb rice served with fish (Nowruz special)</p> | |
| <span class="text-amber-700 font-bold">$18.99</span> | |
| </div> | |
| </div> | |
| <!-- Item 4 --> | |
| <div class="menu-item bg-white rounded-lg shadow-sm overflow-hidden flex"> | |
| <div class="w-1/3"> | |
| <img src="http://static.photos/food/320x240/18" alt="Tahchin" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="menu-item-details w-2/3 p-4 border-l-4 border-amber-100 transition"> | |
| <h3 class="font-bold text-lg text-amber-900">Tahchin</h3> | |
| <p class="text-sm text-gray-600 mb-2">Baked saffron rice cake with chicken</p> | |
| <span class="text-amber-700 font-bold">$16.99</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Desserts --> | |
| <section id="desserts" class="menu-category mb-16"> | |
| <div class="text-center mb-8"> | |
| <h2 class="text-2xl font-serif font-bold text-amber-900 border-b border-amber-200 pb-2 inline-block px-8">Desserts</h2> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <!-- Item 1 --> | |
| <div class="menu-item bg-white rounded-lg shadow-sm overflow-hidden flex"> | |
| <div class="w-1/3"> | |
| <img src="http://static.photos/food/320x240/19" alt="Baklava" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="menu-item-details w-2/3 p-4 border-l-4 border-amber-100 transition"> | |
| <h3 class="font-bold text-lg text-amber-900">Persian Baklava</h3> | |
| <p class="text-sm text-gray-600 mb-2">Layered pastry with pistachios and rose syrup</p> | |
| <span class="text-amber-700 font-bold">$6.99</span> | |
| </div> | |
| </div> | |
| <!-- Item 2 --> | |
| <div class="menu-item bg-white rounded-lg shadow-sm overflow-hidden flex"> | |
| <div class="w-1/3"> | |
| <img src="http://static.photos/food/320x240/20" alt="Faloodeh" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="menu-item-details w-2/3 p-4 border-l-4 border-amber-100 transition"> | |
| <h3 class="font-bold text-lg text-amber-900">Faloodeh</h3> | |
| <p class="text-sm text-gray-600 mb-2">Persian rosewater sorbet with rice noodles</p> | |
| <span class="text-amber-700 font-bold">$5.99</span> | |
| </div> | |
| </div> | |
| <!-- Item 3 --> | |
| <div class="menu-item bg-white rounded-lg shadow-sm overflow-hidden flex"> | |
| <div class="w-1/3"> | |
| <img src="http://static.photos/food/320x240/21" alt="Bastani" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="menu-item-details w-2/3 p-4 border-l-4 border-amber-100 transition"> | |
| <h3 class="font-bold text-lg text-amber-900">Bastani</h3> | |
| <p class="text-sm text-gray-600 mb-2">Saffron ice cream with pistachios</p> | |
| <span class="text-amber-700 font-bold">$5.99</span> | |
| </div> | |
| </div> | |
| <!-- Item 4 --> | |
| <div class="menu-item bg-white rounded-lg shadow-sm overflow-hidden flex"> | |
| <div class="w-1/3"> | |
| <img src="http://static.photos/food/320x240/22" alt="Zoolbia" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="menu-item-details w-2/3 p-4 border-l-4 border-amber-100 transition"> | |
| <h3 class="font-bold text-lg text-amber-900">Zoolbia Bamieh</h3> | |
| <p class="text-sm text-gray-600 mb-2">Fried dough soaked in saffron syrup</p> | |
| <span class="text-amber-700 font-bold">$5.99</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Drinks --> | |
| <section id="drinks" class="menu-category"> | |
| <div class="text-center mb-8"> | |
| <h2 class="text-2xl font-serif font-bold text-amber-900 border-b border-amber-200 pb-2 inline-block px-8">Beverages</h2> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <!-- Item 1 --> | |
| <div class="menu-item bg-white rounded-lg shadow-sm overflow-hidden flex"> | |
| <div class="w-1/3"> | |
| <img src="http://static.photos/food/320x240/23" alt="Doogh" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="menu-item-details w-2/3 p-4 border-l-4 border-amber-100 transition"> | |
| <h3 class="font-bold text-lg text-amber-900">Doogh</h3> | |
| <p class="text-sm text-gray-600 mb-2">Persian yogurt drink with mint</p> | |
| <span class="text-amber-700 font-bold">$3.99</span> | |
| </div> | |
| </div> | |
| <!-- Item 2 --> | |
| <div class="menu-item bg-white rounded-lg shadow-sm overflow-hidden flex"> | |
| <div class="w-1/3"> | |
| <img src="http://static.photos/food/320x240/24" alt="Sharbat" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="menu-item-details w-2/3 p-4 border-l-4 border-amber-100 transition"> | |
| <h3 class="font-bold text-lg text-amber-900">Sharbat-e Sekanjabin</h3> | |
| <p class="text-sm text-gray-600 mb-2">Mint vinegar syrup drink</p> | |
| <span class="text-amber-700 font-bold">$3.99</span> | |
| </div> | |
| </div> | |
| <!-- Item 3 --> | |
| <div class="menu-item bg-white rounded-lg shadow-sm overflow-hidden flex"> | |
| <div class="w-1/3"> | |
| <img src="http://static.photos/food/320x240/25" alt="Tea" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="menu-item-details w-2/3 p-4 border-l-4 border-amber-100 transition"> | |
| <h3 class="font-bold text-lg text-amber-900">Persian Tea</h3> | |
| <p class="text-sm text-gray-600 mb-2">Black tea served with rock candy</p> | |
| <span class="text-amber-700 font-bold">$2.99</span> | |
| </div> | |
| </div> | |
| <!-- Item 4 --> | |
| <div class="menu-item bg-white rounded-lg shadow-sm overflow-hidden flex"> | |
| <div class="w-1/3"> | |
| <img src="http://static.photos/food/320x240/26" alt="Coffee" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="menu-item-details w-2/3 p-4 border-l-4 border-amber-100 transition"> | |
| <h3 class="font-bold text-lg text-amber-900">Persian Coffee</h3> | |
| <p class="text-sm text-gray-600 mb-2">Strong coffee with cardamom</p> | |
| <span class="text-amber-700 font-bold">$3.99</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-amber-950 text-amber-100 py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-serif font-bold mb-4">Persian Bites</h3> | |
| <p class="mb-4">Bringing the authentic taste of Persia to your table since 2005.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="hover:text-amber-300 transition"><i data-feather="instagram"></i></a> | |
| <a href="#" class="hover:text-amber-300 transition"><i data-feather="facebook"></i></a> | |
| <a href="#" class="hover:text-amber-300 transition"><i data-feather="twitter"></i></a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Hours</h4> | |
| <p class="mb-2">Monday - Thursday: 11am - 10pm</p> | |
| <p class="mb-2">Friday - Saturday: 11am - 11pm</p> | |
| <p>Sunday: 12pm - 9pm</p> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Location</h4> | |
| <p class="mb-2">123 Saffron Street</p> | |
| <p class="mb-2">Tehran District</p> | |
| <p>New York, NY 10001</p> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Contact</h4> | |
| <p class="mb-2 flex items-center"> | |
| <i data-feather="phone" class="mr-2 w-4 h-4"></i> (212) 555-0123 | |
| </p> | |
| <p class="mb-2 flex items-center"> | |
| <i data-feather="mail" class="mr-2 w-4 h-4"></i> info@persianbites.com | |
| </p> | |
| <a href="reservation.html" class="inline-block mt-4 bg-amber-800 hover:bg-amber-700 text-white px-4 py-2 rounded text-sm transition">Make Reservation</a> | |
| </div> | |
| </div> | |
| <div class="border-t border-amber-800 mt-8 pt-8 text-center text-sm"> | |
| <p>© 2023 Persian Bites Delight. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('menu-btn').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Initialize feather icons | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> | |