الگو:نقاط روی عکس: تفاوت میان نسخه‌ها

بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
 
(یک نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد)
خط ۱: خط ۱:
<html>


<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/101/m101shalvarset7-1.jpg" alt="ست نخی تابستانه مردانه پوشاک سجاد" loading="lazy">
             <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/101/m101shalvarset1.jpg" alt="بلوز نخی">
                     <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/101/m101shalvarsason3.jpg" alt="شلوار نخی">
                     <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/101/m101shalvarset9-1.jpg" alt="بلوز تابستانه سجاد" loading="lazy">
             <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/101/m101shalvarset10.jpg" alt="پارچه بلوز">
                     <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/101/m101shalvarsason4.jpeg" alt="دوخت بلوز">
                     <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/101/m101shalvarset8-1.jpg" alt="شلوار تابستانه سجاد" loading="lazy">
             <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/101/m101shalvarset11.jpg" alt="جنس شلوار">
                     <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/101/m101shalvarsason1.jpg" alt="فرم شلوار">
                     <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>
</html>