<div class="radikalwp-card-price"><span class="radikalwp-card-price-flag">پیشنهاد ما<//span><h3 class="radikalwp-card-price-plan">اشتراک سهماهه<//h3><div class="radikalwp-card-price-amount">۴۹۰,۰۰۰ <small>تومان / ماه<//small><//div><ul class="radikalwp-card-price-list"><li>دسترسی به همه ۳۴۲ اسنیپت<//li><li>دانلود نامحدود قالبها<//li><li>پشتیبانی اختصاصی<//li><//ul><button class="radikalwp-card-price-btn">انتخاب پلن<//button><//div>
.radikalwp-card-price {
position: relative;
max-width: 290px;
padding: 34px 26px 28px;
background: #1e1b4b;
border-radius: 20px;
color: #fff;
box-shadow: 0 24px 54px rgba(30, 27, 75, .45);
transform: scale(1.04);
}
.radikalwp-card-price-flag {
position: absolute;
top: -14px;
right: 24px;
padding: 6px 16px;
font-size: 11.5px;
font-weight: 800;
color: #1e1b4b;
background: linear-gradient(135deg, #a5b4fc, #818cf8);
border-radius: 999px;
}
.radikalwp-card-price-plan {
margin: 0 0 12px;
font-size: 15px;
font-weight: 700;
color: #c7d2fe;
}
.radikalwp-card-price-amount {
font-size: 30px;
font-weight: 900;
margin-bottom: 20px;
}
.radikalwp-card-price-amount small { font-size: 12px; font-weight: 600; color: #a5b4fc; }
.radikalwp-card-price-list {
list-style: none;
margin: 0 0 24px;
padding: 0;
display: grid;
gap: 10px;
}
.radikalwp-card-price-list li {
position: relative;
padding-right: 26px;
font-size: 13px;
line-height: 1.8;
color: #e0e7ff;
}
.radikalwp-card-price-list li::before {
content: "✓";
position: absolute;
right: 0;
color: #4ade80;
font-weight: 900;
}
.radikalwp-card-price-btn {
width: 100%;
padding: 13px;
font-family: inherit;
font-size: 14.5px;
font-weight: 800;
color: #1e1b4b;
background: #fff;
border: none;
border-radius: 12px;
cursor: pointer;
transition: transform .25s ease;
}
.radikalwp-card-price-btn:hover { transform: scale(1.02); }
درباره این اسنیپت
کارت تعرفه با نشان «پیشنهاد ما» که با مقیاس بزرگتر، حاشیه گرادیانی و پسزمینه تیره از کارتهای دیگر متمایز میشود. لیست ویژگیها با تیک سبز و قیمت درشت با پسوند ماهانه در چیدمانی خوانا قرار دارند. برای جداول قیمت سهستونه که کارت میانی باید جلب توجه کند، انتخاب استاندارد است. ارتفاع برجسته با margin منفی مدیریت میشود.
پرسشهای متداول
برای ستونهای کنار، همان ساختار را با پسزمینه سفید و متن تیره و بدون کلاس برجسته استفاده کنید؛ تفاوت مقیاس و رنگ، میانی را برجسته میکند.
بله؛ span بج را حذف کنید. فاصله بالای کارت برای نمایش بج کمی بیشتر است؛ padding-top را به 26px کاهش دهید.
قیمت قدیمی را با خط خورده (text-decoration: line-through و رنگ کمرنگ) کنار قیمت اصلی بگذارید؛ با کمی استایل اضافه بدون بههمریختگی جا میشود.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۸ از ۳ رأی — برای امتیازدهی وارد شوید
شاید بپسندی
پلن حرفهای
- دسترسی کامل به اسنیپتها
- قالبهای ویژه المنتور
- پشتیبانی اولویتدار
کارت قیمت تیره لوکس
هدفون بیسیم استودیویی
صدای خالص، باتری ۳۰ ساعته و طراحی ارگونومیک برای کار روزمره.
کارت محصول با نوار قیمت
پلن حرفهای
- ۳۰ اسنیپت پریمیوم
- پشتیبانی اولویتدار
- بهروزرسانی مادامالعمر
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!