تصميم موقع لمركز جيم Profit Gym باستخدام html - css - javascript

المشروع عبارة عن موقع إلكتروني لنادي رياضي ProFit Gym، مصمم للتعريف بخدمات النادي وبرامجه الرياضية المختلفة.

الموقع يحتوي على:

واجهة رئيسية جذابة مع شعار النادي وصورة خلفية رياضية.

قسم Fitness Programs يتيح البحث عن برامج التمرين حسب النوع أو الكلمة المفتاحية.

قسم About Us للتعريف بالنادي وخبراته.

إحصائيات عن النادي (عدد التمارين – الخطط التدريبية – المدربين – العملاء السعداء).

قسم Why Choose Us يوضح مميزات النادي (مدربين محترفين – برامج متخصصة – خطط تدريب مرنة).

قائمة Workout Plans لعرض أحدث برامج التدريب (كروس فيت، يوجا، زومبا، MMA).

عرض خاص للعملاء الجدد: خصم 30% على أول خطة تدريبية.

قسم Expert Trainers للتعريف بالمدربين المحترفين.

قسم Testimonials لآراء وتجارب العملاء.

استمارة Contact Us للتواصل مع النادي.

هدف المشروع

إنشاء واجهة رقمية احترافية للنادي تساعد في التسويق وزيادة عدد العملاء.

تسهيل عملية البحث عن برامج التمرين واختيار الخطة المناسبة.

إبراز خبرة النادي وفريق المدربين المحترفين.

جذب عملاء جدد من خلال العروض الترويجية.

تحسين تجربة المستخدم عبر تصميم عصري متجاوب يعمل على كل الأجهزة.

الأدوات المستخدمة في المشروع

HTML 5 → لبناء هيكل الموقع وتقسيم الصفحات.

CSS 3 → لتنسيق الألوان والخطوط وتصميم واجهة جذابة (استخدام Flex-box/Grid).

JavaScript → لإضافة التفاعلية (سلايدر المدربين، Testimonials، البحث في البرامج).

( تم استخدام مكتبات مثل Bootstrap و Font Awesome للأيقونات والتنسيق).

خطوات تنفيذ المشروع

أ) التخطيط (Planning)

تحديد الأقسام الرئيسية (Home – About – Programs – Trainers – Testimonials – Contact).

تصميم Wire-frame لتوضيح تدفق المستخدم داخل الموقع.

اختيار ألوان مرتبطة باللياقة البدنية (أزرق – أبيض – أسود).

ب) التصميم (Design)

استخدام صور قوية وملهمة للرياضيين والتمارين.

تقسيم المحتوى بشكل مريح باستخدام CSS Grid & Flex-box.

إضافة أيقونات ورموز تعبر عن الخدمات والبرامج.

ج) التطوير (Development)

إنشاء البنية الأساسية بـ HTML.

تنسيق متكامل بـ CSS (تصميم متجاوب Responsive Design).

برمجة التفاعل بـ JavaScript مثل:

البحث في البرامج.

عرض الشرائح (Sliders) للمدربين وآراء العملاء.

استمارة التواصل.

د) الاختبار (Testing)

تجربة الموقع على مختلف المتصفحات (Chrome – Edge – Firefox).

اختبار تجاوب التصميم على الموبايل والتابلت.