کد تمیز
ساختار استاندارد و مستندسازی کامل برای توسعه آسان.
<div class="radikalwp-card-feature"><div class="radikalwp-card-feature-icon">⚡<//div><h3 class="radikalwp-card-feature-title">سرعت بارگذاری بالا<//h3><p class="radikalwp-card-feature-text">کدها سبک و بدون وابستگیاند تا امتیاز PageSpeed صفحات شما حفظ شود.<//p><//div>
.radikalwp-card-feature {
max-width: 280px;
padding: 30px 24px;
text-align: center;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 18px;
transition: transform .3s ease, box-shadow .3s ease;
}
.radikalwp-card-feature:hover {
transform: translateY(-6px);
box-shadow: 0 20px 40px rgba(15, 23, 42, .1);
}
.radikalwp-card-feature-icon {
width: 64px;
height: 64px;
margin: 0 auto 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
background: linear-gradient(135deg, #eef2ff, #e0e7ff);
border-radius: 50%;
transition: transform .45s ease;
}
.radikalwp-card-feature:hover .radikalwp-card-feature-icon { transform: rotate(10deg) scale(1.08); }
.radikalwp-card-feature-title {
margin: 0 0 10px;
font-size: 15.5px;
font-weight: 800;
color: #1e293b;
}
.radikalwp-card-feature-text {
margin: 0;
font-size: 12.5px;
line-height: 2;
color: #64748b;
}
کارت ویژگی با آیکون دایرهای گرادیانی، عنوان و توضیح دوخطی؛ بلوک پایه هر بخش «چرا ما». در هاور، پسزمینه آیکون میچرخد و کارت کمی بلند میشود تا تعامل زنده حس شود. سه کارت کنار هم شبکهای متقارن میسازند و برای صفحات محصول و خدمات ایدهآلاند. آیکون با SVG جایگزینپذیر است.
داخل div آیکون یک <svg> با width و height حدود 28 پیکسل بگذارید؛ رنگ آن را هم با fill یا stroke به رنگ برند تغییر دهید.
سه کارت را داخل گرید با minmax(260px, 1fr) و gap مناسب بچینید؛ در موبایل تکستون و در تبلت دو ستون میشود.
زاویه 10 درجه عمداً ملایم انتخاب شده است. اگر ظاهر رسمی میخواهید فقط scale را نگه دارید و rotate را حذف کنید.
میانگین امتیاز کاربران: ۴.۰ از ۶ رأی — برای امتیازدهی وارد شوید
ساختار استاندارد و مستندسازی کامل برای توسعه آسان.
تهران، خیابان آزادی، پلاک ۱۲۰
توسعهدهنده فرانتاند
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!