موقع ويب ترويجي لمنتجات "Buldak"

نوع العمل:

صفحة هبوط (Landing Page) تعرض علامة بولداك التجارية ومنتجاتها، مع أقسام متعددة: الرئيسية، المنتجات، الجديد، النشرة البريدية، الاتصال. تهدف إلى تعريف الزوار بالمنتجات وجذبهم للتفاعل عبر روابط التواصل الاجتماعي والنشرة البريدية.

ميزاته:

تصميم عصري وجذاب بألوان داكنة (أسود، رمادي) مع لون أصفر متوهج كعنصر تأكيد، مما يعكس هوية العلامة التجارية الحارة والجريئة.

تجاوب كامل مع جميع أحجام الشاشات (هاتف، جهاز لوحي، كمبيوتر) باستخدام تقنيات الـ Media Queries و Grid و Flexbox.

قائمة تنقل مخفية (Hamburger Menu) تظهر على الشاشات الصغيرة، تم تنفيذها بطريقة "checkbox hack" بدون جافاسكريبت.

بطاقات منتجات متحركة (hover effects) تحتوي على صور شفافة، نكهات، تفاصيل (الوزن، درجة الحرارة)، وزر للمشاهدة.

قسم "What's New" يعرض منتجين جديدين مع وصف مختصر.

نموذج بسيط للاشتراك في النشرة البريدية.

أيقونات وسائل التواصل الاجتماعي من Font Awesome مع تأثيرات تكبير عند التمرير.

رسوم متحركة (animations) للعناصر الرئيسية عند تحميل الصفحة، مع احترام تفضيلات المستخدمين لتقليل الحركة (prefers-reduced-motion).

استخدام متغيرات CSS (Custom Properties) لتوحيد الألوان والخطوط وسهولة الصيانة.

طريقة التنفيذ:

هيكل الصفحة مكتوب بلغة HTML5 مع وسوم دلالية (header, main, section, footer) وتحسين لمحركات البحث (meta description).

تم ربط ملف CSS خارجي يحتوي على جميع التنسيقات.

استُخدمت تقنيات CSS الحديثة:

Flexbox لترتيب العناصر في الشريط العلوي وقسم الهيرو والروابط الاجتماعية.

CSS Grid لتنظيم بطاقات المنتجات وقسم What's New بشكل مرن ومتناسق.

وحدات مرنة مثل clamp() لتحديد أحجام الخطوط المتجاوبة، و auto-fit مع minmax() لضبط عدد الأعمدة.

محددات (pseudo-classes) مثل :hover و :checked لتفعيل القائمة المنسدلة بدون جافاسكريبت.

إطارات مفتاحية (keyframes) لإنشاء حركات دخول (slideInRight, fadeInUp).

تم اختبار التجاوب عبر نقاط توقف (breakpoints) عند 900px و 768px و 480px لضمان عرض مثالي على جميع الأجهزة.

تم إضافة سكريبت بسيط لتمرير الصفحة إلى الأعلى عند إعادة التحميل، وتحسين تجربة المستخدم.