كيفية إنشاء: فصل (1/2)

تعلم كيفية استخدام CSS لإنشاء تأثير فصل (50/50).

تجربة شخصية

كيفية إنشاء فصل

الخطوة الأولى - إضافة HTML:

<div class="split left">
  <div class="centered">
    <img src="img_avatar2.png" alt="Avatar woman">
    <h2>جين فليكس</h2>
    <p>نص هنا.</p>
  </div>
</div>
<div class="split right">
  <div class="centered">
    <img src="img_avatar.png" alt="Avatar man">
    <h2>بيل جيتس</h2>
    <p>نص هنا أيضًا.</p>
  </div>
</div>

الخطوة الثانية - إضافة CSS:

/* قسím الشاشة إلى نصفين */
.split {
  الارتفاع: 100%;
  عرض: 50%;
  الموقع: ثابت;
  مؤشر التسلسل: 1;
  العمود العازل: 0;
  التفريغ الأفقي: غير مرئي;
  ملء الأعلى: 20px;
}
/* تحكم في الجانب الأيسر */
.left {
  اليسار: 0;
  لون الخلفية: #111;
}
/* تحكم في الجانب الأيمن */
.right {
  اليمين: 0;
  لون الخلفية: أحمر;
}
/* إذا كنت تريد أن يتمركز المحتوى في الاتجاهين الأفقي والعمودي */
.centered {
  الموقع: مطلق;
  العمود العازل: 50%;
  اليسار: 50%;
  تحويل: نقل(-50%, -50%);
  text-align: center;
}
/* إذا كنت بحاجة، قم بتعيين نمط الصورة داخل الصندوق المركزي */
.centered img {
  width: 150px;
  border-radius: 50%;
}

تجربة شخصية