موقع عبارة عن Landing Page لمطعم (Mealify)

نوع العمل

الموقع عبارة عن Landing Page لمطعم (Mealify)، معمول باستخدام HTML + CSS + FontAwesome + Google Fonts. الهدف منه تسويق المطعم، عرض الخدمات، الطهاة، صور الأطباق، والتواصل مع العملاء.

مميزاته

تصميم عصري ومنظم

Navbar ثابت بأعلى الصفحة (Sticky).

تقسيم لأقسام واضحة: (Home – Chefs – Gallery – Contact – Footer).

Responsive Layout (جزئيًا)

استخدام Flexbox و Grid لتقسيم العناصر.

تنسيق احترافي للأقسام (صور، نصوص، أزرار).

Animations & Hover Effects

حركات في الأزرار والـ Navbar.

تأثير الاهتزاز على الصورة الرئيسية.

Overlay على صور الـ Gallery عند الـ hover.

ظهور شريط السوشيال ميديا للطهاة عند الوقوف على الكارد.

محتوى تسويقي كامل

دعوة للحجز (Book a Table).

فيديو ترويجي (زر Watch a Video).

Gallery للأطباق.

قسم معلومات التواصل مع Google Map.

Newsletter للاشتراك بالعروض.

استخدام ألوان متناسقة

الأحمر (#ce1212) للـ Highlights والدعوات للتفاعل.

الرمادي الفاتح للخلفيات.

توازن بين الأبيض والأسود في النصوص.

طريقة التنفيذ

HTML: بنيت هيكل الموقع بالكامل (divs, sections, headers, forms).

CSS:

استخدمت المتغيرات (CSS Variables) للتحكم في الخطوط.

Flexbox و Grid لتنظيم العناصر.

Keyframes للأنيميشن (مثل تحريك الخط تحت الروابط + اهتزاز الصورة).

Font Awesome: أيقونات للسوشيال ميديا + الأزرار + التواصل.

Google Fonts: خطين مختلفين (Amatic SC للعناوين – Roboto للنصوص).

Embedded Google Map: مدمجة مباشرة داخل Contact.

باختصار:

العمل عبارة عن Landing Page احترافية لمطعم بتصميم جذاب، سهلة الاستخدام، غنية بالتأثيرات البصرية، وتخدم الهدف التسويقي (جذب العميل + تشجيعه على التواصل/الحجز).