واجهة اختيار تفاعلية (Responsive Interest Picker) بتقنيات CSS3 الحديثة

في هذا المشروع، قمت بتحويل تصميم معقد يحتوي على عناصر متداخلة إلى صفحة ويب حية باستخدام تقنيات Pure CSS3. ركزت على إظهار مهاراتي في التحكم في أبعاد العناصر وتموضعها دون الحاجة لأي مكتبات خارجية.

المهارات البرمجية التي طبقتها:

Advanced Positioning: استخدمت الـ Relative و Absolute Positioning مع الـ Z-index لخلق تأثير التداخل (Overlapping) بين البطاقات، وهو تكنيك يتطلب دقة عالية في ضبط المسافات.

Flexbox Layout: اعتمدت على Flexbox لتنظيم المحتوى الداخلي للبطاقات وضمان توزيع السعر وزر الشراء بشكل مثالي مهما تغير طول النص.

Semantic HTML5: بنيت الهيكل باستخدام عناصر HTML5 دلالية لضمان صداقة الكود لمحركات البحث (SEO) وسهولة الوصول.

Custom Styling: قمت ببرمجة تأثيرات الـ Highlight والحدود المخصصة وتنسيق القوائم لتعطي شكلاً عصرياً يطابق التصميم الأصلي تماماً.

Responsive Architecture: صممت الكود بحيث يكون "Mobile-first"، حيث تتحول البطاقات بسلاسة من الوضع المتداخل العرضي إلى الوضع الرأسي المنظم على الشاشات الصغيرة.