موقع ويب كامل ومتجاوب

التصميم الجذاب والتفاعلي:

يتميز الموقع بتصميم عصري وجذاب مع استخدام صور خلفية كبيرة في قسم "Hero" لجذب الانتباه.

يتم استخدام مكتبة Animate.css لإضافة تأثيرات حركية مثل التلاشي والظهور عند التمرير.

قائمة تنقل متجاوبة:

يحتوي الموقع على قائمة تنقل ثابتة في الأعلى، مع إمكانية تصغيرها لعرض قائمة على الأجهزة المحمولة.

يتم تنفيذ ذلك باستخدام JavaScript لتغيير حالة القائمة عند النقر

أقسام الموقع:

الصفحة الرئيسية (Home): تحتوي على صورة خلفية كبيرة ونص ترحيبي مع زر "Learn More" للانتقال إلى قسم "About".

قسم "About": يعرض معلومات عن الموقع

قسم "Products": يعرض المنتجات التي تقدمها الموقع ومنتجات يتم عرض المنتجات في بطاقات تفاعلية مع صور.

قسم "Services": يعرض الخدمات التي تقدمها الموقع و يتم عرض الخدمات أيضًا في بطاقات تفاعلية.

قسم "Contact": يحتوي على نموذج تواصل بسيط يمكن للزوار إرسال رسائل من خلاله.

التفاعل مع المستخدم:

يتم استخدام JavaScript لإضافة تفاعلية مثل:

إظهار وإخفاء قائمة التنقل على الأجهزة المحمولة.

إرسال النموذج: عند إرسال نموذج الاتصال، يتم عرض رسالة تأكيد وإعادة تعيين النموذج.

التمرير السلس: يتم تنفيذ التمرير السلس عند النقر على روابط التنقل الداخلية.

إضافة تأثيرات الحركة: يتم إضافة تأثيرات الحركة عند ظهور العناصر أثناء التمرير.

التصميم المتجاوب:

الموقع مصمم ليكون متجاوبًا مع جميع أحجام الشاشات، بدءًا من الأجهزة المحمولة وحتى أجهزة الكمبيوتر المكتبية.

يتم تعديل تخطيط الصفحة وعرض العناصر بناءً على حجم الشاشة باستخدام استعلامات الوسائط في CSS.

التواصل الاجتماعي:

يحتوي الموقع على روابط للتواصل الاجتماعي في الجزء السفلي (Footer) مع أيقونات للفيسبوك، تويتر، وإنستجرام