الگو:نقاط روی عکس: تفاوت میان نسخهها
بدون خلاصۀ ویرایش |
بدون خلاصۀ ویرایش |
||
| (یک نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد) | |||
| خط ۱: | خط ۱: | ||
<html lang="fa" dir="rtl"> | <html lang="fa" dir="rtl"> | ||
| خط ۱۸۱: | خط ۱۸۰: | ||
<!-- عکس اول --> | <!-- عکس اول --> | ||
<figure class="interactive-image"> | <figure class="interactive-image"> | ||
<img class="interactive-image__main" src="https://dl.faraghaib.ir/m/ | <img class="interactive-image__main" src="https://dl.faraghaib.ir/m/260001/26000113.jpg" alt="ست نخی تابستانه مردانه پوشاک سجاد" loading="lazy"> | ||
<div class="hotspot-wrapper" style="--x: 40%; --y: 25%;"> | <div class="hotspot-wrapper" style="--x: 40%; --y: 25%;"> | ||
<button class="image-hotspot" type="button"></button> | <button class="image-hotspot" type="button"></button> | ||
<div class="hotspot-card"> | <div class="hotspot-card"> | ||
<img class="hotspot-card__image" src="https://dl.faraghaib.ir/m/ | <img class="hotspot-card__image" src="https://dl.faraghaib.ir/m/260001/26000114.jpg" alt="بلوز نخی"> | ||
<strong class="hotspot-card__title">بلوز نخی تابستانه</strong> | <strong class="hotspot-card__title">بلوز نخی تابستانه</strong> | ||
<p class="hotspot-card__description">جنس ۱۰۰٪ پنبه با تنخور خنک</p> | <p class="hotspot-card__description">جنس ۱۰۰٪ پنبه با تنخور خنک</p> | ||
| خط ۱۹۴: | خط ۱۹۳: | ||
<button class="image-hotspot" type="button"></button> | <button class="image-hotspot" type="button"></button> | ||
<div class="hotspot-card"> | <div class="hotspot-card"> | ||
<img class="hotspot-card__image" src="https://dl.faraghaib.ir/m/ | <img class="hotspot-card__image" src="https://dl.faraghaib.ir/m/260001/26000115.jpg" alt="شلوار نخی"> | ||
<strong class="hotspot-card__title">شلوار نخی تابستانه</strong> | <strong class="hotspot-card__title">شلوار نخی تابستانه</strong> | ||
<p class="hotspot-card__description">طراحی راحت و ایدهآل</p> | <p class="hotspot-card__description">طراحی راحت و ایدهآل</p> | ||
| خط ۲۰۴: | خط ۲۰۳: | ||
<!-- عکس دوم --> | <!-- عکس دوم --> | ||
<figure class="interactive-image"> | <figure class="interactive-image"> | ||
<img class="interactive-image__main" src="https://dl.faraghaib.ir/m/ | <img class="interactive-image__main" src="https://dl.faraghaib.ir/m/260001/26000116.jpg" alt="بلوز تابستانه سجاد" loading="lazy"> | ||
<div class="hotspot-wrapper" style="--x: 35%; --y: 25%;"> | <div class="hotspot-wrapper" style="--x: 35%; --y: 25%;"> | ||
<button class="image-hotspot" type="button"></button> | <button class="image-hotspot" type="button"></button> | ||
<div class="hotspot-card"> | <div class="hotspot-card"> | ||
<img class="hotspot-card__image" src="https://dl.faraghaib.ir/m/ | <img class="hotspot-card__image" src="https://dl.faraghaib.ir/m/260001/26000117.jpg" alt="پارچه بلوز"> | ||
<strong class="hotspot-card__title">پارچه نخی خنک</strong> | <strong class="hotspot-card__title">پارچه نخی خنک</strong> | ||
<p class="hotspot-card__description">پارچه نرم و سبک تابستانه</p> | <p class="hotspot-card__description">پارچه نرم و سبک تابستانه</p> | ||
| خط ۲۱۷: | خط ۲۱۶: | ||
<button class="image-hotspot" type="button"></button> | <button class="image-hotspot" type="button"></button> | ||
<div class="hotspot-card"> | <div class="hotspot-card"> | ||
<img class="hotspot-card__image" src="https://dl.faraghaib.ir/m/ | <img class="hotspot-card__image" src="https://dl.faraghaib.ir/m/260001/26000118.jpeg" alt="دوخت بلوز"> | ||
<strong class="hotspot-card__title">دوخت تمیز</strong> | <strong class="hotspot-card__title">دوخت تمیز</strong> | ||
<p class="hotspot-card__description">تنخور عالی با دوخت صنعتی</p> | <p class="hotspot-card__description">تنخور عالی با دوخت صنعتی</p> | ||
| خط ۲۲۷: | خط ۲۲۶: | ||
<!-- عکس سوم --> | <!-- عکس سوم --> | ||
<figure class="interactive-image"> | <figure class="interactive-image"> | ||
<img class="interactive-image__main" src="https://dl.faraghaib.ir/m/ | <img class="interactive-image__main" src="https://dl.faraghaib.ir/m/260001/26000119.jpg" alt="شلوار تابستانه سجاد" loading="lazy"> | ||
<div class="hotspot-wrapper" style="--x: 48%; --y: 35%;"> | <div class="hotspot-wrapper" style="--x: 48%; --y: 35%;"> | ||
<button class="image-hotspot" type="button"></button> | <button class="image-hotspot" type="button"></button> | ||
<div class="hotspot-card"> | <div class="hotspot-card"> | ||
<img class="hotspot-card__image" src="https://dl.faraghaib.ir/m/ | <img class="hotspot-card__image" src="https://dl.faraghaib.ir/m/260001/26000120.jpg" alt="جنس شلوار"> | ||
<strong class="hotspot-card__title">جنس سبک و راحت</strong> | <strong class="hotspot-card__title">جنس سبک و راحت</strong> | ||
<p class="hotspot-card__description">مناسب برای استفاده طولانی مدت</p> | <p class="hotspot-card__description">مناسب برای استفاده طولانی مدت</p> | ||
| خط ۲۴۰: | خط ۲۳۹: | ||
<button class="image-hotspot" type="button"></button> | <button class="image-hotspot" type="button"></button> | ||
<div class="hotspot-card"> | <div class="hotspot-card"> | ||
<img class="hotspot-card__image" src="https://dl.faraghaib.ir/m/ | <img class="hotspot-card__image" src="https://dl.faraghaib.ir/m/260001/26000110.jpg" alt="فرم شلوار"> | ||
<strong class="hotspot-card__title">استایل تابستانه</strong> | <strong class="hotspot-card__title">استایل تابستانه</strong> | ||
<p class="hotspot-card__description">طراحی خوشفرم و مدرن</p> | <p class="hotspot-card__description">طراحی خوشفرم و مدرن</p> | ||
| خط ۲۵۲: | خط ۲۵۱: | ||
</body> | </body> | ||
</html> | </html> | ||