کانتینر 4 تایی - فراغیب
صفحهای تازه حاوی «<html> <section class="sajad-categories" aria-label="دستهبندیهای پوشاک سجاد"> <h2 class="sr-only">دستهبندی محصولات پوشاک سجاد</h2> <div class="sajad-grid"> <a href="/women/shomiz-manto" class="sajad-card" title="ست نخی تابستانه"> <img src="https://dl.faraghaib.ir/m/101/m101shalvarset3.jpg" alt="ست نخی تابستانه" loading="lazy"> <span clas...» ایجاد کرد |
بدون خلاصۀ ویرایش |
||
| (یک نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد) | |||
| خط ۱: | خط ۱: | ||
<html> | <html> | ||
<!-- استایلهای لازم برای نمایش صحیح --> | |||
<style> | |||
.sajad-categories { | |||
width: 100%; | |||
direction: rtl; | |||
margin: 20px 0; | |||
} | |||
.sajad-grid { | |||
display: grid; | |||
/* نمایش دو ستونه در دسکتاپ */ | |||
grid-template-columns: repeat(2, 1fr); | |||
gap: 15px; | |||
} | |||
.sajad-card { | |||
position: relative; | |||
display: block; | |||
overflow: hidden; | |||
border-radius: 18px; /* گردی گوشهها */ | |||
aspect-ratio: 16 / 10; /* حفظ تناسب ابعاد */ | |||
text-decoration: none; | |||
background-color: #f0f0f0; | |||
box-shadow: 0 4px 12px rgba(0,0,0,0.08); | |||
} | |||
.sajad-card img { | |||
width: 100%; | |||
height: 100%; | |||
object-fit: cover; /* پر کردن کامل کادر بدون دفرمه شدن */ | |||
display: block; | |||
transition: transform 0.4s ease; | |||
} | |||
.sajad-card:hover img { | |||
transform: scale(1.08); /* زوم ملایم هنگام هاور */ | |||
} | |||
/* ایجاد سایه ملایم زیر متن برای خوانایی بیشتر */ | |||
.sajad-card::after { | |||
content: ""; | |||
position: absolute; | |||
inset: 0; | |||
background: linear-gradient(to top, rgba(0,0,0,0.4) 0%, transparent 40%); | |||
pointer-events: none; | |||
} | |||
.sajad-label { | |||
position: absolute; | |||
right: 15px; | |||
bottom: 15px; | |||
z-index: 5; | |||
color: #fff; /* پیشفرض سفید برای خوانایی روی گرادینت تاریک */ | |||
font-size: clamp(14px, 2vw, 18px); /* فونت ریسپانسیو */ | |||
font-weight: bold; | |||
text-shadow: 0 2px 4px rgba(0,0,0,0.5); | |||
} | |||
/* استایل متنهای تیره اگر عکس خیلی روشن باشد */ | |||
.sajad-label--dark { | |||
color: #222; | |||
text-shadow: 0 1px 2px rgba(255,255,255,0.8); | |||
} | |||
/* ریسپانسیو موبایل: زیر هم قرار گرفتن عکسها */ | |||
@media (max-width: 600px) { | |||
.sajad-grid { | |||
grid-template-columns: 1fr; | |||
} | |||
.sajad-card { | |||
aspect-ratio: 16 / 9; | |||
} | |||
} | |||
.sr-only { | |||
display: none; | |||
} | |||
</style> | |||
<section class="sajad-categories" aria-label="دستهبندیهای پوشاک سجاد"> | <section class="sajad-categories" aria-label="دستهبندیهای پوشاک سجاد"> | ||
<h2 class="sr-only">دستهبندی محصولات پوشاک سجاد</h2> | <h2 class="sr-only">دستهبندی محصولات پوشاک سجاد</h2> | ||
<div class="sajad-grid"> | <div class="sajad-grid"> | ||
<a href="/women/shomiz-manto" class="sajad-card" title=" | <!-- کارت اول --> | ||
<img src="https://dl.faraghaib.ir/m/101/m101shalvarset3.jpg" alt=" | <a href="/women/shomiz-manto" class="sajad-card" title="تی شرت نخی"> | ||
<span class="sajad-label"> | <img src="https://dl.faraghaib.ir/m/101/m101shalvarset3.jpg" alt="تی شرت نخی پوشاک سجاد" loading="lazy"> | ||
<span class="sajad-label">تی شرت نخی</span> | |||
</a> | </a> | ||
<a href="/women/jeans-belt" class="sajad-card" title=" | <!-- کارت دوم --> | ||
<img src="/ | <a href="/women/jeans-belt" class="sajad-card" title="ست نخی تابستانه"> | ||
<span class="sajad-label | <img src="https://dl.faraghaib.ir/m/101/m101shalvarset7.jpg" alt="ست نخی تابستانه پوشاک سجاد" loading="lazy"> | ||
<span class="sajad-label">ست نخی تابستانه</span> | |||
</a> | </a> | ||
<a href="/women/scarf-shawl" class="sajad-card" title=" | <!-- کارت سوم --> | ||
<img src="/ | <a href="/women/scarf-shawl" class="sajad-card" title="بلوز نخی تابستانه"> | ||
<img src="https://dl.faraghaib.ir/m/101/m101shalvarset5.jpg" alt="بلوز نخی تابستانه پوشاک سجاد" loading="lazy"> | |||
<span class="sajad-label">بلوز نخی تابستانه</span> | <span class="sajad-label">بلوز نخی تابستانه</span> | ||
</a> | </a> | ||
<a href="/women/shoes-bags" class="sajad-card" title=" | <!-- کارت چهارم --> | ||
<img src="/ | <a href="/women/shoes-bags" class="sajad-card" title="شلوار نخی تابستانه"> | ||
<span class="sajad-label | <img src="https://dl.faraghaib.ir/m/101/m101shalvarset8.jpg" alt="شلوار نخی تابستانه پوشاک سجاد" loading="lazy"> | ||
<span class="sajad-label">شلوار نخی تابستانه</span> | |||
</a> | </a> | ||
</div> | </div> | ||
</section> | </section> | ||
</html> | </html> | ||
نسخهٔ کنونی تا ۱۹ ژوئیهٔ ۲۰۲۶، ساعت ۱۱:۳۲
