موقع Mealify – Landing Page احترافية لمطعم (Responsive Restaurant Landing Page)
تفاصيل العمل
موقع Mealify هو Landing Page احترافية مصممة لعرض خدمات مطعم بشكل عصري وجذاب، تم تطويرها باستخدام HTML وCSS فقط (بدون JavaScript) مع التركيز على الأداء العالي وتجربة المستخدم السلسة.
الموقع عبارة عن صفحة واحدة (Single Page) تتيح للمستخدم التنقل بسهولة بين الأقسام المختلفة من خلال التمرير أو عبر شريط تنقل ثابت، مما يوفر تجربة تصفح بسيطة وسريعة ومناسبة لمواقع المطاعم.
بنية الـ Landing Page:
يتكون الموقع من 4 أقسام رئيسية مترابطة داخل نفس الصفحة:
الرئيسية (Home)
الطهاة (Chefs)
معرض الصور (Gallery)
التواصل (Contact)
أهم مميزات الـ Landing Page:
?️ Responsive Navbar ثابت
شريط تنقل ثابت أعلى الصفحة (Fixed) مع ظل خفيف
يحتوي على لوجو Mealify بتصميم مميز
روابط تنقل بتأثير Underline باستخدام CSS فقط (:has() و :target)
قائمة جانبية (Sidebar) للشاشات الصغيرة تعمل باستخدام CSS Checkbox Hack
? Dark Mode كامل
إمكانية التبديل بين الوضع الفاتح والمظلم
تم تنفيذه بالكامل باستخدام CSS فقط بدون JavaScript
تغيير تلقائي لألوان جميع عناصر الصفحة (Navbar – Cards – Forms)
? Hero Section (واجهة الصفحة)
تصميم Full Screen (100vh)
عنوان كبير بخط مميز (Amatic SC)
أزرار Call To Action:
Book a Table
Watch a Video
صورة تفاعلية مع:
Drop Shadow
حركة Shake Animation عند الـ Hover
?? قسم الطهاة (Chefs)
عرض الطهاة في Grid متجاوب
تصميم Cards احترافي مع تأثير:
Scale عند الـ Hover
قائمة سوشيال ميديا تظهر بانسيابية (Sliding Animation)
استخدام عنصر SVG لإضافة لمسة تصميمية مميزة
?️ معرض الصور (Gallery)
استخدام CSS Columns Layout لعرض الصور بشكل مرن
تأثير Hover احترافي:
تكبير الصورة (Scale)
ظهور Overlay يحتوي على اسم الطبق ووصفه
? قسم التواصل (Contact)
خريطة Google Maps مدمجة
بطاقات معلومات (العنوان – الإيميل – الهاتف – ساعات العمل)
نموذج تواصل كامل:
Name
Subject
Message
تأثير Focus على الحقول لتجربة استخدام أفضل
? Footer متكامل
تصميم بخلفية مميزة مع Overlay داكن
يحتوي على:
معلومات عن المطعم
أيقونات السوشيال ميديا
نموذج اشتراك (Subscribe)
روابط سريعة مع تأثيرات Hover
بيانات التواصل
التقنيات المستخدمة:
HTML5
CSS3 (Vanilla بدون JavaScript)
Font Awesome 6
Google Fonts (Amatic SC & Inter)
Google Maps Embed API
CSS Variables (Custom Properties)
CSS :has() Selector
CSS Checkbox Hack