محاكاة لحساب شخصي على موقع ما، طورته باستخدام HTML و CSS

لقد قمت بإنشاء مشروع يعمل كحساب شخصي على موقع إلكتروني. طورت هذه الصفحة باستخدام HTML وCSS، مما يجعلها متجاوبة بالكامل على جميع الأجهزة باستخدام Flexbox وGrid وMedia Queries.

يحتوي المشروع على 8 صفحات: لوحة التحكم (Dashboard)، الإعدادات (Settings)، الملف الشخصي (Profile)، المشاريع (Projects)، الدورات التدريبية (Courses)، الأصدقاء (Friends)، الملفات (Files)، والخطط (Plans).

تتضمن كل صفحة ما يلي:

- شريط جانبي يحتوي على الشعار وروابط التنقل المؤدية إلى الصفحات الخاصة بها.

- رأس (Header) يحتوي على شريط بحث يتوسع عند النقر عليه، وأيقونة إشعارات خاصة بالحساب، وصورة الملف الشخصي لمالك الحساب.

- العديد من العناصر التي تعرض معلومات أو تقوم بوظائف محددة.

- شريط تمرير مخصص (Scrollbar) لقسم الأدوات فقط، وليس للصفحة بأكملها.

- يظهر شريط تمرير في الشريط الجانبي إذا تجاوز طوله ارتفاع الجهاز.

- مربعات اختيار وأزرار دائرية مخصصة باستخدام CSS فقط، مع رسوم متحركة وتأثيرات خاصة في صفحة الملف الشخصي.

- شريط تقدم موحد يُستخدم في الصفحات ذات الصلة.

- تمييز الرابط الخاص بالصفحة الحالية في الشريط الجانبي.

- رسوم متحركة تفاعلية لمعظم عناصر الصفحة، لذا تفاعل الآن مع كل عنصر في الصفحات لمعرفة ما يحدث.

- تصميم متجاوب حيث يتم تصغير الشريط الجانبي على الأجهزة اللوحية والهواتف المحمولة لتوفير مساحة أكبر لمحتوى الصفحة.

- لكل صفحة رمز مميز (Favicon) وعنوان (Title) وملف CSS خاص بها، بينما توجد الأنماط العامة في ملف master.css.