بطاقة ملف شخصي مستجيبة Responsive Profile Card بـ HTML و CSS - كود كامل + شرح
📁 أحدث الأخبار التقنية
0

بطاقة ملف شخصي مستجيبة Responsive Profile Card بـ HTML و CSS - كود كامل + شرح

مصطفى أمان مصطفى أمان
كيفية إنشاء بطاقة ملف شخصي متحركة باستخدام HTML وCSS [الشيفرة البرمجية مضمنة]

دليل خطوة بخطوة لإنشاء بطاقة ملف شخصي مستجيبة (Responsive Profile Card) باستخدام HTML وCSS مع الكود الكامل

إذا كنت تبحث عن كود جاهز لإنشاء بطاقة ملف شخصي مستجيبة (Responsive Profile Card) باستخدام HTML وCSS، فأنت في المكان الصحيح. في هذا الدليل ستجد الكود الكامل شرحاً تفصيلياً لكل خطوة، من بناء هيكل HTML إلى كتابة تنسيقات CSS وSCSS، حتى تحصل على بطاقة احترافية متحركة تعمل على جميع أحجام الشاشات بدون أي مكتبات خارجية.

من تجربتي في تطوير الويب، لاحظت أن بطاقة الملف الشخصي هي من أكثر المكونات طلباً من المبتدئين لأنها تجمع في مكان واحد: التعامل مع الصور الدائرية، التدرجات اللونية (Gradients)، ومفهوم الاستجابة (Responsiveness). بمجرد إتقانها ستكون قادراً على بناء أي مكون CSS آخر بسهولة.

أنا مصطفى أمان، وسأأخذك في هذا الدليل خطوة بخطوة لبناء المشروع من الصفر، مع شرح كل سطر كود حتى تفهم ليس فقط الكيف بل أيضاً السبب.

ما الذي ستبنيه في هذا الدليل؟

ستنشئ بطاقة ملف شخصي تحتوي على:

  • صورة شخصية دائرية بإطار ملوّن
  • اسم المستخدم ومسماه الوظيفي
  • أيقونات وسائل التواصل الاجتماعي قابلة للنقر
  • زر معلومات يُظهر تفاصيل إضافية عند الضغط
  • تصميم يعمل على الهاتف والجهاز اللوحي وسطح المكتب
النتيجة النهائية لتطبيق مشروع بطاقة الملف الشخصي

النتيجة النهائية: بطاقة ملف شخصي متحركة ومستجيبة.

ما تحتاجه قبل البدء

هذا المشروع مناسب للمبتدئين، لكنك ستحتاج إلى معرفة أساسية بـ:

المهارة المستوى المطلوب للتعلم من أين؟
HTML أساسي (العلامات والهيكل) دليل تعلم البرمجة
CSS أساسي (Box Model، Flexbox) —
SCSS (اختياري) لا يُشترط موضح في المقال
💡 تنبيه: الكود الكامل متاح في مستودع GitHub المذكور في نهاية المقال. يمكنك تحميله مباشرة إذا أردت تجربة النتيجة قبل الشرح.

إنشاء بنية المشروع

تتكون بنية المشروع من سبعة ملفات كما يلي:

  • index.html: ملف HTML الرئيسي.
  • assets\css\styles.css: ملف CSS الرئيسي.
  • assets\img\perfil.png: صورة الملف الشخصي.
  • assets\scss\styles.scss: ملف SCSS الرئيسي.
  • assets\scss\base\_base.scss: ملف SCSS الأساسي.
  • assets\scss\components\_card.scss: ملف SCSS للمكونات.
  • assets\scss\config\_variables.scss: ملف SCSS للمتغيرات.

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

card-info/
├── index.html
└── assets/
    ├── css/
    │   └── styles.css
    ├── img/
    │   └── perfil.png
    └── scss/
        ├── styles.scss
        ├── base/
        │   └── _base.scss
        ├── components/
        │   └── _card.scss
        └── config/
            └── _variables.scss

إنشاء ملف index.html الأساسي للبطاقة

في البداية سوف نحتاج إلى إنشاء المجلد الرئيسي للمشروع ثم نسميه "card-info" وبالطبع يمكنك تسميته كما تريد.

بعد ذلك سنقوم بإنشاء الهيكل الأساسي للصفحة، وذلك من خلال إنشاء ملف "index.html"، ويُعَدّ هذا الملف بمثابة القلب النابض للصفحة، فهو يحتوي على الترتيب والتنظيم الأساسي لعناصر الواجهة.

الكود:

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!--=============== الأيقونات ===============-->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet">

    <!--=============== سي إس إس ===============-->
    <link rel="stylesheet" href="assets/css/styles.css">

    <title>Card info button - Valley4Techs</title>
</head>
<body>
    <div class="container">
        <!-- البطاقة -->
        <!-- باقي الكود ستجده في مستودع Github -->
    </div>
</body>
</html>

شرح الكود:

  • السطر <!DOCTYPE html>: يُعَدّ علامة البداية ويُحدد نوع الوثيقة كـ HTML5.
  • السطر <html lang="ar">: يحدد لغة الصفحة، حيث يكون القيمة "ar" للغة العربية.
  • السطر <head>: يحتوي على المعلومات الرئيسية للصفحة مثل التعريفات والرموز الوظيفية.
  • السطر <meta charset="UTF-8">: يحدد ترميز الحروف ليكون UTF-8.
  • السطر <meta name="viewport"...>: يُعد تكوين لعرض الصفحة على مختلف أحجام الشاشات.
  • روابط التنسيق: تشير إلى ملفات الـ CSS المستخدمة لتنسيق الصفحة.
  • السطر <title>: يعطي الصفحة عنوانًا يظهر في شريط المتصفح.
  • السطر <body>: يحتوي على محتوى الصفحة الظاهر للمستخدم.

إنشاء ملف styles.css الأساسي للبطاقة

في هذا القسم سوف نقوم بإنشاء مجلد نضع بداخله أصول المشروع، وسوف نقوم بتسمية هذا المجلد "assets"، بعد ذلك سوف نقوم بإنشاء مجلد آخر داخل مجلد assets وسوف نقوم بتسميته "css".

الآن سنقوم بإنشاء ملف باسم "styles.css" الذي سيحتوي على التنسيقات الأساسية لصفحتنا، سوف يتضمن هذا الملف القواعد الأساسية للألوان، الخطوط، وترتيب العناصر.

الكود:

/*=============== خطوط جوجل ===============*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");

/*=============== متغيرات سي إس إس ===============*/
:root {
  /*========== الألوان ==========*/
  /*وضع الألوان HSL (تدرج اللون، التشبع، الإضاءة)*/
  --first-color: hsl(175, 55%, 40%);
  --first-color-light: hsl(175, 30%, 48%);
  --first-color-lighten: hsl(175, 40%, 62%);
  --gradient-color: linear-gradient(180deg,
                  hsl(178, 35%, 45%),
                  hsl(178, 55%, 28%));
  --title-color: hsl(175, 40%, 16%);
  --text-color: hsl(175, 8%, 50%);
  --white-color: #fff;
  --body-color: hsl(175, 100%, 99%);

  /*========== الخط والطباعة ==========*/
  /*.5rem = 8px | 1rem = 16px ...*/
  --body-font: "Poppins", sans-serif;
  --h2-font-size: 1.25rem;
  --normal-font-size: .938rem;
  --smaller-font-size: .75rem;
}

/*=============== الأساسيات ===============*/
/* باقي الكود ستجده في مستودع Github */

شرح الكود:

  • السطر import url: يتم استيراد خطوط جوجل Poppins لتحسين جمالية الخطوط في الصفحة.
  • العنصر :root { ... }: يعرف المتغيرات الرئيسية المستخدمة في الصفحة، مثل: الألوان وأحجام الخطوط.
  • العنصر * { ... }: يقوم بتعيين خصائص عامة لكل العناصر لتحسين التنسيق وتجنب المشاكل في التصميم.
  • العنصر body { ... }: يضبط خصائص النصوص والألوان الخلفية للصفحة.
  • العناصر ul, a, img: تحديد التنسيق الأساسي لعناصر القوائم والروابط والصور.
  • العناصر .container, .card, .info: تنسيقات مخصصة لعناصر الصفحة مثل البطاقة ومعلومات البطاقة.
  • العنصر .info:hover { ... }: تحديد التنسيق عند تحويل الماوس على معلومات البطاقة.

تمثل هذه التنسيقات الأساسية التي تجعل الصفحة تظهر بشكل جذاب ومرتب، مما يسهم في تحسين تجربة المستخدم.

إضافة صورة الملف الشخصي

تعتبر صورة الملف الشخصي جزءًا أساسيًا من التصميم في هذا المشروع، حيث تُستخدم كأفاتار لتمثيل الشخص صاحب البطاقة، لذلك يتم تحميل هذه الصورة باعتبارها جزءًا من الإعدادات الشخصية للبطاقة.

ولتنفيذ ذلك سوف نقوم بإنشاء مجلد جديد داخل مجلد الأصول assets، وسوف نقوم بتسمية المجلد الجديد "img"، بعد ذلك نقوم بإضافة صورة رمزية تمثل الوجه الخاص بالمستخدم أو الشخصية المقدمة في البطاقة، وبإمكانك تسمية ملف الصورة بأي اسم تريده، ففي حالتنا سوف نقوم بتسمية ملف الصورة بـ "perfil.png".

⚠️ تنبيه مهم: تأكد من أن خلفية صورتك شفافة (PNG) حتى يظهر الإطار الدائري الملوّن بشكل صحيح. إذا كانت الصورة بخلفية بيضاء ستخفي الإطار الجميل للبطاقة.

إنشاء ملف styles.scss

في عمليات تنظيم المشروع وتقسيمه إلى أجزاء منفصلة، يأتي دور ملف styles.scss ليكون المحور الرئيسي لتنسيق الصفحة وتحديد الأنماط البصرية للعناصر.

ولتنفيذ ذلك سوف نقوم بإنشاء مجلد جديد داخل مجلد الأصول assets، وسوف نقوم بتسمية المجلد الجديد "scss"، بعد ذلك سنقوم بإنشاء ملف باسم "styles.scss" الذي سوف تكون وظيفته استدعاء الثلاثة ملفات المسؤولة عن تصميم البطاقة.

الكود:

@import 'config/variables';
@import 'base/base';
@import 'components/card';

شرح الكود:

  • السطر الأول، يتم استيراد ملف variables الذي يحتوي على المتغيرات التي تحدد الألوان وحجم الخطوط والخط الرئيسي المستخدم في المشروع.
  • السطر الثاني، يتم استيراد ملف base الذي يحتوي على الأسلوب الأساسي للمشروع، مثل: تحديد خصائص الهيكل العام للصفحة والأسلوب النصي العام.
  • السطر الثالث، يتم استيراد ملف card الذي يحتوي على تنسيقات البطاقة ومكوناتها.

إنشاء ملف base.scss_

يُعد ملف base.scss_ هو النقطة التي تُسلط الضوء على تعريفات الأساسيات اللازمة لجعل الصفحة أكثر قراءة وتصفحًا.

ولتنفيذ ذلك سوف نقوم بإنشاء مجلد جديد داخل مجلد scss، وسوف نقوم بتسمية المجلد الجديد "base"، بعد ذلك سنقوم بإنشاء ملف باسم "base.scss_" ثم نكتب بداخله الشيفرة البرمجية التالية.

الكود:

/*=============== الأساسيات ===============*/
*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body{
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    background-color: var(--body-color);
    color: var(--text-color);
}

ul{
    list-style: none;
}

a{
    text-decoration: none;
}

img{
    max-width: 100%;
    height: auto;
}

شرح الكود:

  • العنصر *{}: لتعيين قيم الـ box-sizing والتي تحدد كيف يتم حساب حجم العناصر وتخطيطها في الصفحة.
  • العنصر body{}: لتحدد خصائص النصوص الرئيسية للصفحة، مثل: نوع الخط وحجم الخط، ولون الخلفية، ولون النص.
  • العنصر ul{}: لإزالة النقاط السوداء التي تظهر أصلاً مع القوائم.
  • العنصر a{}: لإزالة التأثير الافتراضي للروابط وتحدد النصوص المستخدمة للروابط باللون الافتراضي.
  • العنصر img{}: لتحدد خصائص الصور، مثل: أقصى عرض وارتفاع للصور.

إنشاء ملف card.scss_

في ملف card.scss_، يتم تعريف تصميم وتنسيقات البطاقة الرئيسية للمشروع، حيث يلعب هذا الملف دورًا حيويًا في تحديد شكل وأسلوب العرض للبطاقة.

ولتنفيذ ذلك سوف نقوم بإنشاء مجلد جديد داخل مجلد scss، وسوف نقوم بتسمية المجلد الجديد "components"، بعد ذلك سنقوم بإنشاء ملف باسم "card.scss_" ثم نكتب بداخله الشيفرة البرمجية التالية.

الكود:

/*=============== البطاقة ===============*/
.container{
    height: 100vh;
    margin-inline: 1.5rem;
    display: grid;
    place-items: center;
}

.card{
    position: relative;
    width: 290px;
    background: var(--gradient-color);
    border-radius: 1rem 1rem 11rem 11rem;
    padding: 2.5rem 1.5rem 3.5rem;
    text-align: center;
    box-shadow: 0 8px 32px hsla(178, 55%, 20%, .15);

    &__img{
        width: 90px;
    }
    &__border{
      /* باقي الكود ستجده في مستودع Github */
    }
}

شرح الكود:

  • العنصر .container{}: يُعيد تعريف خصائص الحاوية الرئيسية للصفحة، حيث يُحدد ارتفاع الحاوية ويوضح التموضع في وسط الصفحة.
  • العنصر .card{}: يحتوي على تعريفات البطاقة الرئيسية، مع تحديد الشكل العام والألوان المستخدمة.
  • العنصر position: relative;: يقوم بتعيين البطاقة بوضع نسبي لتمكين استخدام مواقع التموضع النسبية داخلها.
  • العنصر width: 290px;: يقوم بتحديد العرض الإجمالي للبطاقة.
  • العنصر background: var(--gradient-color);: يقوم باستخدام تدرج الألوان كخلفية للبطاقة.
  • العنصر border-radius: 1rem 1rem 11rem 11rem;: يقوم بتحديد حواف مستديرة للبطاقة لإضفاء لمسة جمالية.

إنشاء ملف variables.scss_

يعتبر ملف variables.scss_ من الأقسام الحيوية في تقسيم المشروع، حيث يقوم بتعريف المتغيرات التي تُستخدم في جميع ملفات الأنماط لتحديد الألوان والخطوط المستخدمة.

ولتنفيذ ذلك سوف نقوم بإنشاء مجلد جديد داخل مجلد scss، وسوف نقوم بتسمية المجلد الجديد "config"، بعد ذلك سنقوم بإنشاء ملف باسم "variables.scss_" ثم نكتب بداخله الشيفرة البرمجية التالية.

الكود:

/*=============== خطوط جوجل ===============*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500');

/*=============== متغيرات سي إس إس ===============*/
:root{
    /*========== الألوان ==========*/
    /*وضع الألوان HSL (تدرج اللون، التشبع، الإضاءة)*/
    --first-color: hsl(175, 55%, 40%);
    --first-color-light: hsl(175, 30%, 48%);
    --first-color-lighten: hsl(175, 40%, 62%);
    --gradient-color: linear-gradient(180deg,
                    hsl(178, 35%, 45%),
                    hsl(178, 55%, 28%));
    --title-color: hsl(175, 40%, 16%);
    --text-color: hsl(175, 8%, 50%);
    --white-color: #fff;
    --body-color: hsl(175, 100%, 99%);

    /*========== الخط والطباعة ==========*/
    /*.5rem = 8px | 1rem = 16px ...*/
    --body-font: 'Poppins', sans-serif;
    --h2-font-size: 1.25rem;
    --normal-font-size: .938rem;
    --smaller-font-size: .75rem;
}

شرح الكود:

  • السطر الأول، يقوم باستيراد خطوط Google Fonts من نوع Poppins بوزن 400 و 500.
  • العنصر :root{}: يعمل على إضافة تعريف المتغيرات الجذرية التي تُستخدم لتحديد الألوان والخطوط في المشروع بشكل عام.
  • العنصر --first-color: يحدد لون أساسي للمشروع باستخدام نموذج HSL.
  • العنصر --gradient-color: يحدد تدرج الألوان الذي يستخدم كخلفية للبطاقة.

كيف تجعل بطاقة ملفك الشخصي مستجيبة (Responsive)؟

من أكثر الأسئلة التي أتلقاها: لماذا يبدو التصميم جميلاً على الشاشة الكبيرة لكن يتكسر على الهاتف؟ الحل في خطوتين أساسيتين:

1. استخدم وحدات نسبية بدلاً من البكسل الثابت

لاحظت أن الخطأ الشائع الذي يقع فيه المبتدئون هو استخدام px لكل شيء. في هذا المشروع نستخدم rem للمسافات (المبني على 16px)، مما يجعل البطاقة تتكيف مع إعدادات المتصفح للمستخدم.

2. أضف Media Queries للشاشات الصغيرة

أضف هذا الكود في نهاية ملف _card.scss لضبط حجم البطاقة على الشاشات الكبيرة:

/*=============== نقاط التوقف (Breakpoints) ===============*/

/* للشاشات الصغيرة 320px */
@media screen and (max-width: 320px) {
    .card {
        width: 250px;
        padding: 2rem 1rem 3rem;
    }
}

/* للشاشات المتوسطة 576px وما فوق */
@media screen and (min-width: 576px) {
    .card {
        width: 320px;
    }
}
💡 نصيحة من التجربة: استخدم Chrome DevTools (F12 ثم أيقونة الهاتف) لاختبار التصميم على أحجام شاشات مختلفة دون الحاجة لجهاز حقيقي. اضغط على Ctrl + Shift + M لتفعيل وضع المحاكاة.

أخطاء شائعة عند إنشاء بطاقة CSS وكيف تتجنبها

بعد تجربة عدة مشاريع مشابهة، هذه هي الأخطاء الأكثر تكراراً:

الخطأ السبب الحل
الصورة لا تظهر دائرية نسيان overflow: hidden مع border-radius: 50% أضف overflow: hidden لحاوية الصورة
SCSS لا يُترجم إلى CSS عدم تثبيت مترجم SCSS ثبّت امتداد Live Sass Compiler في VS Code
البطاقة تتكسر على الهاتف نسيان meta viewport أو استخدام px ثابتة أضف meta viewport واستخدم rem وMedia Queries
أيقونات Remixicon لا تظهر رابط CDN خاطئ أو لا يوجد إنترنت تأكد من الرابط الصحيح أو حمّل المكتبة محلياً

كيف تضيف أنيميشن Hover للبطاقة؟

مما ميّز هذا المشروع في رأيي هو تأثير الـ Hover الذي يُظهر معلومات إضافية عند تمرير الماوس على البطاقة. إليك كيف يعمل:

يعتمد الأنيميشن على مبدأين أساسيين في CSS:

  • الخاصية transform: translateY(): تحرّك العنصر بشكل عمودي عند التفاعل.
  • الخاصية transition: تُحدد مدة وشكل الحركة لتبدو سلسة وطبيعية.
/* في ملف _card.scss */
.card__info {
    position: absolute;
    bottom: -4rem;        /* مخفي في البداية */
    transition: bottom .3s ease;
}

.card:hover .card__info,
.card:focus .card__info {
    bottom: 1.5rem;      /* يظهر عند hover */
}
💡 إضافة دعم اللمس للهاتف: لاحظت أن تأثير hover لا يعمل على شاشات اللمس. الحل هو إضافة tabindex="0" للبطاقة في HTML وتفعيل :focus في CSS أيضاً كما يظهر في الكود أعلاه.

النتيجة النهائية

في النهاية، بعد أن تحصل على الشيفرة البرمجية الكاملة للمشروع من مستودع Github الخاص بالمدونة، من المفترض أن تكون النتيجة كما هو موضح بالصورة المتحركة التالية:

كيفية إنشاء بطاقة ملف شخصي متحركة Card Profile باستخدام HTML و CSS [الشيفرة البرمجية مضمنة]

النتيجة النهائية لتطبيق مشروع بطاقة الملف الشخصي

كيف تخصّص البطاقة لمشاريعك الخاصة؟

بعد تجربة عدة أدوات ومشاريع مشابهة، وجدت أن أسرع طريقة لتخصيص البطاقة هي تغيير المتغيرات في ملف _variables.scss فقط دون المساس ببقية الكود:

ما تريد تغييره المتغير مثال
لون البطاقة --gradient-color غيّر قيم HSL للون الذي تريده
نوع الخط --body-font استبدل 'Poppins' بأي خط من Google Fonts
لون الخلفية --body-color أي قيمة HSL أو Hex

إذا أردت الإلهام بتصاميم مختلفة، اطلع على مسار تعلم تطوير الويب الذي يشرح كيف تطور مهاراتك في CSS إلى مستوى متقدم.

📬

هل استفدت من هذا المقال؟

انضم إلى مئات المشتركين واحصل على أحدث المقالات والدروس مباشرة في بريدك الإلكتروني.

نعم، أريد الاشتراك! ✉️

🔒 خصوصيتك مهمة لنا. لن نرسل رسائل مزعجة أبداً.

الخاتمة

وبهذا نكون قد استكملنا رحلة إنشاء بطاقة ملف شخصي مستجيبة (Responsive Profile Card) باستخدام HTML وCSS. تعلمنا في هذا الدليل:

  • بناء هيكل المشروع بشكل منظم باستخدام SCSS Partials
  • استخدام CSS Variables لتسهيل التخصيص والصيانة
  • إضافة أنيميشن Hover بالـ CSS فقط بدون JavaScript
  • جعل التصميم مستجيباً باستخدام Media Queries ووحدات rem
  • تجنب الأخطاء الشائعة التي يقع فيها المبتدئون

إذا أردت توسيع مهاراتك في تطوير الواجهات، أنصحك بالاطلاع على مقالات تطوير الويب الأخرى في وادي التكنولوجيا، وخاصة قالب موقع Grand Estate الذي يطبّق مفاهيم أكثر تقدماً في HTML وCSS.

📌 هل أعجبك هذا الدليل؟ إذا وجدت هذا المقال مفيدًا، ندعوك لمشاركته مع أصدقائك وزملائك المهتمين بالتقنية. ولا تنسَ استكشاف المزيد من الأدلة والشروحات التقنية العملية على وادي التكنولوجيا — حيث نُبسّط التقنية لتكون في متناول الجميع.

الأسئلة الشائعة

❓ هل يمكنني استخدام CSS عادي بدلاً من SCSS؟

نعم تماماً. SCSS هو مجرد امتداد لـ CSS يُترجم في النهاية إلى CSS عادي. إذا كنت مبتدئاً، استخدم ملف styles.css الجاهز مباشرة من مستودع GitHub دون الحاجة لتعلم SCSS. عندما تتقدم في مستواك، ستجد SCSS مفيداً جداً لتنظيم المشاريع الكبيرة.

❓ ما هي مكتبة Remixicon وهل هي مجانية؟

Remixicon هي مكتبة أيقونات مفتوحة المصدر ومجانية تماماً للاستخدام الشخصي والتجاري. تحتوي على أكثر من 2000 أيقونة بتصميم نظيف وحديث. تُضاف عبر CDN في رأس الصفحة أو تُنزّل محلياً من موقعها الرسمي.

❓ كيف أضيف أنيميشن flip card (البطاقة المقلوبة) بـ CSS؟

تأثير Flip Card يعتمد على خاصيتين: transform: rotateY(180deg) وbackface-visibility: hidden. تحتاج لعنصرين: وجه أمامي (Front) وخلفي (Back)، ثم عند الـ hover تُطبّق الـ transform على الحاوية. هذا المشروع لا يتضمن Flip Card لكن يمكنك بناؤه بسهولة بنفس المبادئ الموجودة هنا.

❓ هل هذا الكود يعمل في الـ React أو Vue؟

نعم، يمكنك تحويله بسهولة. في React، حوّل ملف HTML إلى .jsx مع تغيير class إلى className، وأدرج CSS كـ module أو استخدم styled-components. في Vue استخدمه مباشرة في <template> مع <style scoped>. الكود نفسه لا يحتاج تعديلاً جوهرياً.

❓ كيف أضيف عدة بطاقات في نفس الصفحة؟

ببساطة كرّر هيكل HTML للبطاقة وضع الحاويات في display: flex أو display: grid. مثال: .cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; }. هذا يجعل البطاقات تتوزع تلقائياً على الشاشة بشكل مستجيب.

أضف وادي التكنولوجيا كمصدر مفضّل على جوجل

اجعل مقالاتنا تظهر لك أولًا في نتائج البحث والأخبار

أضفنا الآن
مصطفى أمان
مصطفى أمان
صانع محتوى تعليمي تقني على مدونتي وعلى قناة اليوتيوب. وهدفي من هذا المحتوى هو محو الأمية المتعلقة بمجال تكنولوجيا المعلومات حتى نبدأ من حيث انتهى الأخرين.

مقالات قد تهمك

تعليقات
إرسال تعليق

يسعدنا أن نسمع آراءكم! اتركوا تعليقاً أدناه وشاركوا تجاربكم أو أسئلتكم.




    /*إشعار رسالة الكوكيز*/