شاهد المشروع على GitHub

؟ هيكل المشروع

payment-app/
│-- index.html
│-- styles.css
│-- images/
│   └-- credit-card.png

؟ كيفية استخدام هذا المشروع

1. تنزيل المستودع أو استنساخه:

   git clone https://github.com/yourusername/simple_interface.git

1. انتقل إلى دليل المشروع:

   cd payment_app_interface

1. افتح ملف Index.html في متصفحك لعرض واجهة تطبيق الدفع.

؟ المفاهيم والميزات الرئيسية

1. هيكل HTML:

   • التنقل في الشريط الجانبي: استخدام التنقل وul لشريط جانبي بسيط.
   • أقسام المحتوى الرئيسية:
     • عرض التوازن ببطاقة مصممة.
     • نموذج الدفع مع حقول الإدخال وزر الإرسال.
     • قائمة المعاملات باستخدام عناصر ul وli.

2. تصميم CSS:

   • تخطيط Flexbox: يستخدم لمحاذاة الشريط الجانبي والمحتوى الرئيسي.
   • أنظمة الألوان: ألوان مميزة للشريط الجانبي والأزرار وأنواع المعاملات (الدخل مقابل النفقات).
   • تأثيرات التحويم: تعليقات تفاعلية للأزرار وروابط الشريط الجانبي.
   • تصميم سريع الاستجابة: شريط جانبي ذو عرض ثابت مع محتوى رئيسي مرن.

3. المهارات المتوسطة التي يتم ممارستها:

   • تخطيطات معقدة مع شريط جانبي وأقسام متعددة.
   • تصميم النموذج لإدخال المستخدم.
   • تصميم متسق لواجهة المستخدم مع أقسام مميزة وعناصر تفاعلية.