پرش به محتوا

چیدمان تصاویر - فراغیب

از فراغیب
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
خط ۳: خط ۳:
             background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 50%, #f0f9ff 100%); /* ایجاد رنگ پس‌زمینه ابر و بادی */
             background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 50%, #f0f9ff 100%); /* ایجاد رنگ پس‌زمینه ابر و بادی */
             border-radius: 16px; /* منحنی کردن گوشه‌های کل باکس گالری */
             border-radius: 16px; /* منحنی کردن گوشه‌های کل باکس گالری */
             box-shadow: 0 50px 50px rgba(0,0,0,0.05); /* ایجاد سایه ملایم دور کادر */">
             box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* ایجاد سایه ملایم دور کادر */">


     <!-- ردیف اول: دو عکس بزرگ (همواره کنار هم در موبایل و دسکتاپ) -->
     <!-- ردیف اول: دو عکس بزرگ (همواره کنار هم در موبایل و دسکتاپ) -->
     <div style="display: flex; gap: 15px; justify-content: center; margin-bottom: 5px;">
     <div style="display: flex; gap: 10px; justify-content: center; margin-bottom: 5px;">
          
          
         <!-- عکس بزرگ اول -->
         <!-- عکس بزرگ اول -->
         <div style="flex: 1; max-width: 480px; display: flex; flex-direction: column; align-items: center; border: 1px solid #b3e5fc; background-color: rgba(255, 255, 255, 0.85); padding: 8px; box-sizing: border-box;  
         <div style="flex: 1; max-width: 480px; display: flex; flex-direction: column; align-items: center; border: 5px solid #0B8452; background-color:#Fc6600; padding: 5px; box-sizing: border-box;  
                     border-radius: 12px; /* منحنی کردن گوشه‌های کادر تصویر بزرگ اول */">
                     border-radius: 15px; /* منحنی کردن گوشه‌های کادر تصویر بزرگ اول */">
             <!-- نگهدارنده تصویر بزرگ جهت برش و هم‌ترازی با نسبت ۴:۳ -->
             <!-- نگهدارنده تصویر بزرگ جهت برش و هم‌ترازی با نسبت ۴:۳ -->
             <div style="width: 100%; aspect-ratio: 4/3; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 8px;">
             <div style="width: 100%; aspect-ratio: 4/3; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 8px;">
خط ۱۶: خط ۱۶:
             </div>
             </div>
             <!-- کپشن تک‌خطی تصویر بزرگ اول: وسط‌چین، بدون کادر، با فاصله کمتر -->
             <!-- کپشن تک‌خطی تصویر بزرگ اول: وسط‌چین، بدون کادر، با فاصله کمتر -->
             <div style="margin-top: 0px; font-size: 90%; color: #0288d1; font-weight: bold; text-align: center; width: 100%;
             <div style="margin-top: 30px; font-size: 90%; color: #000000; font-weight: bold; text-align: center; width: 100%;
                         line-height: 1.1; border: none; background: transparent; box-shadow: none; outline: none;
                         line-height: 0; border: none; background: transparent; box-shadow: none; outline: none;
                         white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                         white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                توضیحات عکس بزرگ اول
توضیحات عکس بزرگ اول بیشتر شودکسبلتصتلصهلب
             </div>
             </div>
         </div>
         </div>

نسخهٔ ‏۷ ژوئیهٔ ۲۰۲۶، ساعت ۰۸:۳۳

توضیحات عکس بزرگ اول بیشتر شودکسبلتصتلصهلب

               توضیحات عکس بزرگ دوم
               توضیحات ۱
               توضیحات ۲
               توضیحات ۳
               توضیحات ۴