پرش به محتوا

کانتینر نامنظم - فراغیب

از فراغیب
تفاوت با ویرایش جدیدتر ←
دیداریویکی‌متن
صفحه‌ای تازه حاوی « <html lang="fa" dir="rtl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>گالری تصاویر مجموعه</title> <style> ←تنظیمات پایه برای خوانایی بهتر: * { box-sizing: border-box; margin: 0; padding: 0; } .gallery-wrapper { display: grid; grid-template-columns: repe...» ایجاد کرد
 
بدون خلاصۀ ویرایش
خط ۴: خط ۴:
     <meta charset="UTF-8">
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>گالری تصاویر مجموعه</title>
     <title>گالری ریسپانسیو اختصاصی</title>
     <style>
     <style>
        /* تنظیمات پایه برای خوانایی بهتر */
         * { box-sizing: border-box; margin: 0; padding: 0; }
         * { box-sizing: border-box; margin: 0; padding: 0; }
          
          
خط ۱۲: خط ۱۱:
             display: grid;
             display: grid;
             grid-template-columns: repeat(3, 1fr);
             grid-template-columns: repeat(3, 1fr);
             grid-auto-rows: 250px;
             grid-auto-rows: 150px; /* ارتفاع پایه برای حفظ تناسب در موبایل */
             gap: 15px;
             gap: 10px;
             padding: 20px;
             padding: 10px;
             max-width: 1200px;
             max-width: 1000px;
             margin: auto;
             margin: auto;
         }
         }
خط ۲۲: خط ۲۱:
             position: relative;
             position: relative;
             overflow: hidden;
             overflow: hidden;
             border-radius: 20px 0 20px 0;
            /* گوشه‌های درخواستی: راست-بالا تیز(0)، چپ-بالا گرد(20px)، راست-پایین گرد(20px)، چپ-پایین تیز(0) */
             border-radius: 20px 0 20px 0;  
             cursor: pointer;
             cursor: pointer;
         }
         }
خط ۳۳: خط ۳۳:
         }
         }


        /* لایه شفاف خاکستری روی عکس */
         .overlay {
         .overlay {
             position: absolute;
             position: absolute;
             top: 0;
             top: 0; left: 0;
            left: 0;
             width: 100%; height: 100%;
             width: 100%;
            height: 100%;
             background: rgba(0, 0, 0, 0.6);
             background: rgba(0, 0, 0, 0.6);
             display: flex;
             display: flex;
خط ۴۵: خط ۴۲:
             align-items: center;
             align-items: center;
             color: #fff;
             color: #fff;
             font-size: 1.5rem;
             font-size: 14px;
             font-weight: bold;
             font-weight: bold;
             opacity: 0;
             opacity: 0;
             transition: opacity 0.3s ease;
             transition: opacity 0.3s ease;
            border-radius: 0 20px 20px 0;
         }
         }


خط ۵۴: خط ۵۲:
         .gallery-item:hover img { transform: scale(1.1); }
         .gallery-item:hover img { transform: scale(1.1); }


         /* تعیین چیدمان ردیف ها مشابه تصویر شما */
         /* تعیین کادرهای عریض */
         .wide { grid-column: span 2; }
         .wide { grid-column: span 2; }


         /* ریسپانسیو موبایل */
         /* در موبایل عرض کادرها را کمی کوچک می‌کنیم تا در یک ردیف جا شوند */
         @media (max-width: 768px) {
         @media (max-width: 480px) {
             .gallery-wrapper {
             .gallery-wrapper {
                 grid-template-columns: 1fr;
                 grid-auto-rows: 100px; /* کاهش ارتفاع در موبایل */
                 grid-auto-rows: 200px;
                 gap: 5px;
             }
             }
             .wide { grid-column: span 1; }
             .overlay { font-size: 10px; } /* کوچک کردن متن برای موبایل */
         }
         }
     </style>
     </style>
خط ۷۱: خط ۶۹:
     <div class="gallery-wrapper">
     <div class="gallery-wrapper">
         <!-- ردیف ۱ -->
         <!-- ردیف ۱ -->
         <div class="gallery-item wide"><img src="https://dl.faraghaib.ir/m/260005/26000525.png" alt="شهربازی و گیم‌نت"><div class="overlay">شهربازی</div></div>
         <div class="gallery-item wide"><img src="https://dl.faraghaib.ir/m/260005/26000525.png" alt="شهربازی"><div class="overlay">شهربازی</div></div>
         <div class="gallery-item"><img src="https://dl.faraghaib.ir/m/260005/26000524.png" alt="استخر و سونا"><div class="overlay">استخر و سونا</div></div>
         <div class="gallery-item"><img src="https://dl.faraghaib.ir/m/260005/26000525.png" alt="استخر"><div class="overlay">استخر</div></div>
          
          
         <!-- ردیف ۲ -->
         <!-- ردیف ۲ -->
         <div class="gallery-item"><img src="https://dl.faraghaib.ir/m/260005/26000524.png" alt="سینی کباب رستوران"><div class="overlay">رستوران</div></div>
         <div class="gallery-item"><img src="https://dl.faraghaib.ir/m/260005/26000525.png" alt="رستوران"><div class="overlay">رستوران</div></div>
         <div class="gallery-item wide"><img src="https://dl.faraghaib.ir/m/260005/26000525.png" alt="غذاهای ایرانی و سنتی"><div class="overlay">منو ویژه</div></div>
         <div class="gallery-item wide"><img src="https://dl.faraghaib.ir/m/260005/26000525.png" alt="منو غذا"><div class="overlay">منو ویژه</div></div>
          
          
         <!-- ردیف ۳ -->
         <!-- ردیف ۳ -->
         <div class="gallery-item wide"><img src="https://dl.faraghaib.ir/m/260005/26000525.png" alt="فروشگاه پوشاک مردانه"><div class="overlay">فروشگاه</div></div>
         <div class="gallery-item"><img src="https://dl.faraghaib.ir/m/260005/26000525.png" alt="فروشگاه"><div class="overlay">فروشگاه</div></div>
         <div class="gallery-item"><img src="https://dl.faraghaib.ir/m/260005/26000524.png" alt="پارک آبی و سرسره"><div class="overlay">پارک آبی</div></div>
         <div class="gallery-item wide"><img src="https://dl.faraghaib.ir/m/260005/26000525.png" alt="پارک آبی"><div class="overlay">پارک آبی</div></div>
     </div>
     </div>


</body>
</body>
</html>
</html>

نسخهٔ ‏۱۶ اوت ۲۰۲۶، ساعت ۰۷:۴۲

گالری ریسپانسیو اختصاصی

شهربازی
شهربازی
استخر
استخر
رستوران
رستوران
منو غذا
منو ویژه
فروشگاه
فروشگاه
پارک آبی
پارک آبی

برگرفته از «https://fa.faraghaib.ir/w/index.php?title=الگو:کانتینر_نامنظم&oldid=6363»