قائمة التنقل للموقع
<!DOCTYPE html> <html lang="ar" dir="rtl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>عن المنتجع - منتجع الجولف الفاخر</title> <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap" rel="stylesheet"> <script src="https://cdn.tailwindcss.com"></script> <link rel="stylesheet" href="فف.css"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> </head> <body class="font-[Tajawal] bg-[#f8f8f8]"> <header class="bg-white shadow-md"> <nav class="container mx-auto px-4 py-4"> <div class="flex items-center justify-between"> <div class="relative group z-50"> <button class="flex items-center space-x-2 space-x-reverse text-[#4CAF50] hover:text-[#2E7D32] transition-colors duration-300 bg-white rounded-lg px-4 py-2 shadow-sm"> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path> </svg> <svg class="w-5 h-5 transform group-hover:rotate-180 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path> </svg> </button> <div class="absolute right-0 mt-2 w-56 bg-white rounded-xl shadow-2xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transform group-hover:translate-y-0 -translate-y-3 transition-all duration-300 ease-out border border-gray-100"> <div class="py-2 rounded-xl bg-white"> <a href="home.html" class="flex items-center px-6 py-3 text-[#4CAF50] hover:bg-gray-50 hover:text-[#2E7D32] transition-colors duration-200 first:rounded-t-xl last:rounded-b-xl border-b border-gray-100">الصفحة الرئيسية</a> <a href="store.html" class="flex items-center px-6 py-3 text-[#4CAF50] hover:bg-gray-50 hover:text-[#2E7D32] transition-colors duration-200 border-b border-gray-100">متجر المحترفين</a> <a href="golf.html" class="flex items-center px-6 py-3 text-[#4CAF50] hover:bg-gray-50 hover:text-[#2E7D32] transition-colors duration-200 border-b border-gray-100">رياضة الغولف</a> <a href="about.html" class="flex items-center px-6 py-3 text-[#4CAF50] hover:bg-gray-50 hover:text-[#2E7D32] transition-colors duration-200 border-b border-gray-100">عن المنتجع</a> <a href="almrafg.html" class="flex items-center px-6 py-3 text-[#4CAF50] hover:bg-gray-50 hover:text-[#2E7D32] transition-colors duration-200 border-b border-gray-100">المرافق المقدمة</a> <a href="contact.html" class="flex items-center px-6 py-3 text-[#4CAF50] hover:bg-gray-50 hover:text-[#2E7D32] transition-colors duration-200">التواصل معنا</a> </div> </div> </div> <img src="img/لوجو.jpg" alt="شعار المنتجع" class="h-16 mx-auto"> <div class="flex items-center space-x-4 space-x-reverse"> <a href="home.html" class="text-[#4CAF50] hover:text-[#2E7D32] px-3 py-2">الصفحة الرئيسية</a> <a href="store.html" class="text-[#4CAF50] hover:text-[#2E7D32] px-3 py-2">متجر المحترفين</a> <a href="golf.html" class="text-[#4CAF50] hover:text-[#2E7D32] px-3 py-2">رياضة الغولف</a> <a href="about.html" class="text-[#4CAF50] hover:text-[#2E7D32] px-3 py-2">عن المنتجع</a> </div> </div> </nav> </header> <!-- المحتوى الرئيسي --> <section class="container mx-auto px-4 py-16"> <h2 class="text-3xl font-bold text-center mb-12">خدماتنا المميزة</h2> <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <div class="bg-white p-6 rounded-lg shadow-lg"> <img src="img/ملعب جولف.webp" alt="ملعب الجولف" class="w-full h-48 object-cover rounded-lg mb-4"> <h3 class="text-xl font-bold mb-2">ملعب جولف احترافي</h3> <p class="text-gray-600">ملعب مصمم على أعلى المستويات العالمية</p> </div> <div class="bg-white p-6 rounded-lg shadow-lg"> <img src="img/صور مطاعم.webp" alt="المطعم" class="w-full h-48 object-cover rounded-lg mb-4"> <h3 class="text-xl font-bold mb-2">مطعم فاخر</h3> <p class="text-gray-600">أشهى المأكولات العالمية والمحلية</p> </div> <div class="bg-white p-6 rounded-lg shadow-lg"> <img src="img/جناح فاخر.jpg" alt="السبا" class="w-full h-48 object-cover rounded-lg mb-4"> <h3 class="text-xl font-bold mb-2">سبا وعافية</h3> <p class="text-gray-600">استرخاء كامل مع علاجات متخصصة</p> </div> </div> </section> </main> <!-- المرافق المقدمة (جدول) --> <h3 class="text-2xl font-bold text-center mb-8">المرافق المقدمة في المنتجع</h3> <table class="min-w-full table-auto"> <thead class="bg-[#4CAF50] text-white"> <tr> <th class="px-6 py-3">الخدمة</th> <th class="px-6 py-3">التفاصيل</th> </tr> </thead> <tbody> <tr> <td class="px-6 py-4 border-b">المطاعم</td> <td class="px-6 py-4 border-b">مطاعم تقدم أفضل المأكولات المحلية والعالمية</td> </tr> <tr> <td class="px-6 py-4 border-b">المقاهي</td> <td class="px-6 py-4 border-b">مقاهي مع إطلالات رائعة وخدمات ممتازة</td> </tr> <tr> <td class="px-6 py-4 border-b">ملاعب الفنادق</td> <td class="px-6 py-4 border-b">ملاعب غولف حصرية مصممة لأقصى درجات المتعة</td> </tr> </tbody> </table> <!-- متجر المحترفين --> <div class="mt-16 text-center"> <h3 class="text-2xl font-bold mb-4">متجر المحترفين</h3> <p>متجرنا يقدم أفضل المعدات لأداء مميز في رياضة الغولف</p> </div> <!-- صفحة التواصل معنا --> <div class="mt-16 text-center"> <h3 class="text-2xl font-bold mb-4">التواصل معنا</h3> <p>لأي استفسار، يمكنكم التواصل معنا عبر البريد الإلكتروني أو الهاتف</p> <p>البريد الإلكتروني: info@golfresort.com</p> <p>الهاتف: +966 123 456 789</p> </div> </section> </main> <!-- الفوتر --> <footer class="bg-[#2E7D32] text-white py-12"> <div class="container mx-auto px-4"> <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> <div> <h4 class="text-xl font-bold mb-4">اتصل بنا</h4> <p>هاتف: +966 123 456 789</p> <p>البريد الإلكتروني: info@golfresort.com</p> </div> <div> <h4 class="text-xl font-bold mb-4">روابط سريعة</h4> <ul> <li><a href="about.html" class="hover:text-gray-300">حول المنتجع</a></li> <li><a href="booking.html" class="hover:text-gray-300">الحجوزات</a></li> <li><a href="contact.html" class="hover:text-gray-300">نواصل معنا </a></li> </ul> </div> <div> <h4 class="text-xl font-bold mb-4">تابعنا</h4> <div class="flex space-x-4 space-x-reverse"> <a href="#" class="hover:text-gray-300">فيسبوك</a> <a href="#" class="hover:text-gray-300">تويتر</a> <a href="#" class="hover:text-gray-300">انستغرام</a> </div> </div> <div> <h4 class="text-xl font-bold mb-4">النشرة البريدية</h4> <input type="email" placeholder="البريد الإلكتروني" class="w-full p-2 rounded-lg text-black"> </div> </div> <div class="mt-8 text-center border-t border-white pt-8"> <p>© 2025 منتجع الجولف الفاخر. جميع الحقوق محفوظة</p> </div> <footer class="bg-[#2E7D32] text-white py-12"> <div class="container mx-auto px-4"> <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> <div> <h4 class="text-xl font-bold mb-4">اتصل بنا</h4> <p>هاتف: +966 123 456 789</p> <p>البريد الإلكتروني: info@golfresort.com</p> </div> <div> <h4 class="text-xl font-bold mb-4">روابط سريعة</h4> <ul> <li><a href="about.html" class="hover:text-gray-300">حول المنتجع</a></li> <li><a href="booking.html" class="hover:text-gray-300">الحجوزات</a></li> <li><a href="contact.html" class="hover:text-gray-300">اتصل بنا</a></li> </ul> </div> <div> <h4 class="text-xl font-bold mb-4">تابعنا</h4> <div class="flex space-x-4 space-x-reverse"> <a href="https://www.facebook.com/yourpage" target="_blank" class="text-white hover:text-gray-300"> <i class="fa-brands fa-facebook fa-2x"></i> فيسبوك </a> <a href="https://www.instagram.com/yourprofile" target="_blank" class="text-white hover:text-gray-300"> <i class="fa-brands fa-instagram fa-2x"></i> انستجرام </a> <a href="https://t.me/yourchannel" target="_blank" class="text-white hover:text-gray-300"> <i class="fa-brands fa-telegram fa-2x"></i> تليجرام </a> </div> </div> <div> <h4 class="text-xl font-bold mb-4">النشرة البريدية</h4> <input type="email" placeholder="البريد الإلكتروني" class="w-full p-2 rounded-lg text-black"> <button class="newsletter-button mt-2 bg-[#4CAF50] text-white px-4 py-2 rounded-lg hover:bg-[#2E7D32]">اشترك</button> </div> </div> <div class="mt-8 text-center border-t border-white pt-8"> <p>© 2024 منتجع الجولف الفاخر. جميع الحقوق محفوظة</p> </div> </div> </footer> <script src="java.js"></script> </body> </html> بدي تحطلي فيديو قابل للتصغير والتكبير بجانب الصور الموجودة بالصفحة ومع التاثيرات للصور يعني تكبيرولا تغير محتوى الموجود من نص وصو