كيفية إنشاء: بطاقة المنتج

كيفية إنشاء بطاقة المنتج

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

<div class="كاردين">
  <img src="jeans3.jpg" alt="جينز" style="عرض:100%">
  <h1>جينز مخصصة</h1>
  <p class="سعر">$19.99</p>
  <p>نص حول الجينز...</p>
  <p><button>أضف إلى السلة</button></p>
</div>

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

.كاردين {
  ظل: 0 4 بكسل 8 بكسل 0 rgba(0, 0, 0, 0.2);
  أقصى عرض: 300 بكسل;
  ال边际: نفس الوسط;
  محاذاة النص: الوسط;
  عائلة الخط: arial;
}
.سعر {
  لون النص: الرمادي;
  حجم الخط: 22 بكسل;
}
.كاردين يُنقر عليه {
  حافة: لا;
  حدود: 0;
  حجم الحشوة: 12 بكسل;
  لون النص: الأبيض;
  لون الخلفية: #000;
  محاذاة النص: الوسط;
  نقطة مؤشر: السهم;
  عرض: 100%;
  حجم الخط: 18 بكسل;
}
.كاردين يُنقر عليه {
  الشفافية: 0.7;
}

جرب بنفسك