product preview card component

قمت بتطوير مكون واجهة مستخدم (UI Component) لعرض منتج بطريقة جذابة ومبسطة باستخدام HTML وCSS فقط، وهو مثالي لمتاجر التجارة الإلكترونية أو تطبيقات عرض المنتجات.

تفاصيل العمل:

تصميم كارت عرض منتج يحتوي على:

- صورة للمنتج

- اسم المنتج ووصف مختصر

- السعر الحالي والسعر السابق (مع توضيح الخصم)

- زر لإضافة المنتج إلى السلة (Add to Cart)

- هيكلية HTML منظمة تسهّل إعادة الاستخدام والتعديل.

- اعتماد CSS Flexbox وGrid لهيكلة مرنة واستجابة ممتازة.

- تم استخدام Media Queries لضمان توافق التصميم مع جميع أحجام الشاشات.

- إضافة تأثيرات hover بسيطة لتحسين التفاعل، مثل تغيير لون الزر أو تكبير صورة المنتج.

مناسب لـ:

مواقع التجارة الإلكترونية، كتالوجات المنتجات، صفحات العروض، أو أي واجهة تتطلب عرض منتج بشكل أنيق وواضح.

التقنيات المستخدمة:

HTML5, CSS3 (بدون مكتبات أو أطر عمل خارجية)