موقعي
تفاصيل العمل
المظهر العام والتصميم
الموقع مصمم بتخطيط عصري وأنيق مع اتجاه نص من اليمين لليسار (RTL) لدعم اللغة العربية. يتميز الموقع بالألوان التالية:
خلفية عامة رمادية فاتحة (#f5f5f5)
شريط علوي باللون الأزرق الغامق (#2c3e50)
أزرار وأيقونات باللون الأزرق الفاتح (#3498db)
الهيكل العام
الشريط العلوي (Header): ثابت في أعلى الصفحة ويحتوي على:
شعار الموقع ("موقعي")
قائمة تنقل رئيسية (الرئيسية، الخدمات، المشاريع، اتصل بنا)
القسم الرئيسي (Hero Section):
صورة خلفية شفافة مع تدرج لوني
عنوان رئيسي كبير ("مرحبًا بكم في موقعي")
فقرة وصفية
زر دعوة للإجراء (Call-to-Action) "ابدأ الآن"
قسم الخدمات:
عنوان رئيسي ("خدماتنا")
شبكة من 6 بطاقات خدمة، كل بطاقة تحتوي على:
أيقونة مميزة
عنوان الخدمة
وصف مختصر
قسم المشاريع:
عنوان رئيسي ("مشاريعنا")
عرض لمشروعين في شكل بطاقات، كل بطاقة تحتوي على:
إطار عرض (iframe) يعرض صفحة من المشروع
معلومات عن المشروع (اسم ووصف)
قسم الاتصال:
عنوان رئيسي ("اتصل بنا")
نموذج اتصال يتضمن حقول ل:
الاسم
البريد الإلكتروني
الموضوع
الرسالة
زر إرسال
التذييل (Footer):
شعار الموقع
وصف مختصر
روابط وسائل التواصل الاجتماعي (أيقونات)
حقوق النشر
الميزات التفاعلية
تأثيرات التمرير:
عناصر تظهر تدريجياً عند التمرير (fade-in effect)
زر "العودة للأعلى" يظهر عند التمرير لأسفل
التنقل السلس:
نقاط الربط (anchor links) تنقل المستخدم بسلاسة إلى الأقسام المختلفة
التصميم المتجاوب:
الموقع يتكيف مع أحجام الشاشات المختلفة
على الشاشات الصغيرة (أقل من 768px):
إخفاء قائمة التنقل
تعديل حجم الخطوط
تغيير تخطيط عرض المشاريع إلى عمود واحد
العناصر التقنية
الأيقونات:
استخدام مكتبة Font Awesome للأيقونات
الخطوط:
استخدام خط Arial الأساسي مع خطوط sans-serif كبديل
الرسوم المتحركة:
تأثيرات تحويل (transform) عند تمرير المؤشر فوق البطاقات
انتقالات (transitions) سلسة للعناصر التفاعلية
المحتوى
الموقع يقدم نفسه كمنصة تقدم خدمات رقمية متكاملة تشمل:
تطوير الويب
تطبيقات الجوال
التسويق الرقمي
تصميم الجرافيك
تحسين محركات البحث (SEO)
استضافة المواقع
المشاريع المعروضة
مشروع حنين: موقع متكامل بتصميم عصري
مشروع المبرمجين الصغار: منصة تعليمية لتعليم البرمجة للأطفال
الوظائف البرمجية
نموذج الاتصال يعرض رسالة تأكيد عند الإرسال
تتبع موضع التمرير لعرض/إخفاء زر العودة للأعلى
كشف العناصر المرئية في الشاشة لتطبيق تأثيرات الظهور
الموقع مصمم بشكل احترافي مع الالتزام بأفضل ممارسات تجربة المستخدم (UX) وواجهة المستخدم (UI)، مع تركيز خاص على دعم اللغة العربية والاتجاه من اليمين لليسار.