<div class="radikalwp-card-product"><div class="radikalwp-card-product-img">🎧<//div><div class="radikalwp-card-product-body"><h3 class="radikalwp-card-product-name">هدفون بیسیم استودیویی<//h3><p class="radikalwp-card-product-desc">صدای خالص، باتری ۳۰ ساعته و طراحی ارگونومیک برای کار روزمره.<//p><//div><div class="radikalwp-card-product-pricebar"><span class="radikalwp-card-product-price">۲,۴۵۰,۰۰۰ تومان<//span><button class="radikalwp-card-product-buy">خرید<//button><//div><//div>
.radikalwp-card-product {
max-width: 300px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 18px;
overflow: hidden;
transition: transform .3s ease, box-shadow .3s ease;
}
.radikalwp-card-product:hover {
transform: translateY(-6px);
box-shadow: 0 22px 44px rgba(15, 23, 42, .14);
}
.radikalwp-card-product-img {
height: 150px;
display: flex;
align-items: center;
justify-content: center;
font-size: 56px;
background: linear-gradient(135deg, #eef2ff, #e0e7ff);
}
.radikalwp-card-product-body { padding: 18px 20px 14px; }
.radikalwp-card-product-name {
margin: 0 0 6px;
font-size: 15.5px;
font-weight: 800;
color: #1e293b;
}
.radikalwp-card-product-desc {
margin: 0;
font-size: 12.5px;
line-height: 1.9;
color: #64748b;
}
.radikalwp-card-product-pricebar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 20px;
background: linear-gradient(90deg, #4f46e5, #7c3aed);
}
.radikalwp-card-product-price { font-size: 13.5px; font-weight: 800; color: #fff; }
.radikalwp-card-product-buy {
padding: 7px 18px;
font-family: inherit;
font-size: 12.5px;
font-weight: 700;
color: #4338ca;
background: #fff;
border: none;
border-radius: 8px;
cursor: pointer;
transition: transform .2s ease;
}
.radikalwp-card-product-buy:hover { transform: scale(1.06); }
درباره این اسنیپت
کارت فروشگاهی با تصویر محصول، نام، توضیح کوتاه و نوار قیمت سرخورده در پایین که در هاور کمی بالا میآید. نوار قیمت پسزمینه گرادیانی دارد و چشم را مستقیم به مهمترین اطلاعات میبرد. چیدمان عمودی و فاصلهگذاری استاندارد، آن را برای فروشگاهها و صفحات محصول ایدهآل میکند. حالت هاور با بلند شدن ملایم و سایه عمیقتر تعامل را جذاب میکند.
پرسشهای متداول
کافی است داخل div تصویر بهجای ایموجی از <img> با width:100% و object-fit:cover استفاده کنید؛ ارتفاع 150px را هم در صورت نیاز تنظیم کنید.
بله؛ کلاس pricebar را حذف و قیمت را داخل body بگذارید. اما نوار رنگی در جذب نگاه به قیمت بسیار مؤثر است و توصیه میشود بماند.
میتوانید یک بج تخفیف زاویهدار رادیکالدبلیوپی را با position:absolute گوشه بالا-راست تصویر اضافه کنید؛ هر دو اسنیپت بدون تداخل با هم کار میکنند.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۱ از ۹ رأی — برای امتیازدهی وارد شوید
شاید بپسندی
هدفون بیسیم پرو
کارت محصول با گرادیان تصویر
هدفون بیسیم پرو
۱٬۲۹۰٬۰۰۰ تومانکارت محصول فانتزی سهبعدی
پلن حرفهای
- قالبهای پریمیوم
- پشتیبانی اختصاصی
- بهروزرسانی دائمی
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!