الگو:کانتینر تصاویر خطی: تفاوت میان نسخهها
صفحهای تازه حاوی «<html> <style> ←تنظیمات پایه برای خوانایی: .product-categories { padding: 40px 20px; max-width: 1200px; margin: auto; } .category-list { display: flex; flex-wrap: wrap; ←برای شکستن خط در موبایل: gap: 20px; list-style: none; justify-content: center; } .category-item { flex: 1 1 150px; ←حداقل عرض آیتمها: max-width: 200px; t...» ایجاد کرد |
بدون خلاصۀ ویرایش |
||
| خط ۳: | خط ۳: | ||
/* تنظیمات پایه برای خوانایی */ | /* تنظیمات پایه برای خوانایی */ | ||
.product-categories { | .product-categories { | ||
background-color: #999999; | |||
padding: 40px 20px; | padding: 40px 20px; | ||
max-width: 1200px; | max-width: 1200px; | ||
| خط ۳۰: | خط ۳۱: | ||
} | } | ||
/* افکت هاور برای تجربه کاربری بهتر | /* افکت هاور برای تجربه کاربری بهتر | ||
.category-item:hover { | .category-item:hover { | ||
transform: translateY(-10px); | transform: translateY(-10px); | ||
} | }*/ | ||
/* ریسپانسیو برای موبایل */ | /* ریسپانسیو برای موبایل */ | ||
| خط ۷۷: | خط ۷۸: | ||
<li class="category-item"> | <li class="category-item"> | ||
<a href="/category/leather-bags"> | <a href="/category/leather-bags"> | ||
<img src="https://dl.faraghaib.ir/m/260008-01/260008-01-06. | <img src="https://dl.faraghaib.ir/m/260008-01/260008-01-06.jpeg" alt="کیف چرم طبیعی دستدوز"> | ||
<h3>کیف پول چرم</h3> | <h3>کیف پول چرم</h3> | ||
</a> | </a> | ||