چگونه ایجاد می‌شود: کارت محصول

چگونه کارت محصول ایجاد کنیم

گام اول - افزودن HTML:

<div class="کارت">
  <img src="jeans3.jpg" alt="Jeans" style="عرض:100%">
  <h1>شلوار جین دوخته شده</h1>
  <p class="قیمت">$19.99</p>
  <p>متن درباره شلوار جین...</p>
  <p><button>افزودن به سبد خرید</button></p>
</div>

گام دوم - افزودن CSS:

.کارت {
  تاریکی_قاب: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  بیشترین_عرض: 300px;
  مجرد: خودکار;
  جمع_متن: مرکزی;
  خانواده_قلم: arial;
}
.قیمت {
  رنگ: خاکستری;
  اندازه_قلم: 22px;
}
.کارت دکمه {
  حاشیه_خطی: none;
  حاشیه: 0;
  پادگزار: 12px;
  رنگ: سفید;
  رنگ_پس‌زمینه: #000;
  جمع_متن: مرکزی;
  مکان_نما: pointer;
  عرض: 100%;
  اندازه_قلم: 18px;
}
.کارت دکمه:hover {
  شفافیت: 0.7;
}

آزمایش کنید