پرش به محتوا

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

از فراغیب
→ تفاوت با ویرایش قدیمی‌تر
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
 
(۳۰ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد)
خط ۱: خط ۱:
<!-- شروع کانتینر اصلی گالری با پس‌زمینه آبی آسمانی ابر و بادی و چیدمان وسط‌چین -->
<!-- شروع کانتینر اصلی گالری با پس‌زمینه آبی آسمانی ابر و بادی و چیدمان وسط‌چین -->
<div style="max-width: 1000px; margin: 0px auto; padding: 10px; direction: rtl; text-align: center;  
<div style="max-width: 1000px; margin: 0px auto; padding: 10px; direction: rtl; text-align: center;  
             background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 50%, #f0f9ff 100%); /* ایجاد رنگ پس‌زمینه ابر و بادی */
             background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%); /* ایجاد رنگ پس‌زمینه ابر و بادی */
             border-radius: 16px; /* منحنی کردن گوشه‌های کل باکس گالری */
             border-radius: 16px; /* منحنی کردن گوشه‌های کل باکس گالری */
             box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* ایجاد سایه ملایم دور کادر */">
             box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* ایجاد سایه ملایم دور کادر */
            box-sizing: border-box;{{{style|}}};">


     <!-- ردیف اول: دو عکس بزرگ (همواره کنار هم در موبایل و دسکتاپ) -->
     <!-- ردیف اول: دو عکس بزرگ (همواره کنار هم در موبایل و دسکتاپ بدون شکستن خط) -->
     <div style="display: flex; gap: 10px; justify-content: center; margin-bottom: 5px;">
     <div style="display: flex; gap: 10px; justify-content: center; margin-bottom: 10px; width: 100%;">
          
          
         <!-- عکس بزرگ اول -->
         <!-- عکس بزرگ اول -->
         <div style="flex: 1; max-width: 480px; display: flex; flex-direction: column; align-items: center; border: 5px solid #6495ED; background-color:#F0BB78; padding: 5px; box-sizing: border-box;  
         <div style="flex: 1 1 calc(50% - 5px); max-width: 485px; min-width: 0; display: flex; flex-direction: column; align-items: center; border: 5px solid #3b82f6; background-color: #ffffff; padding: 1px; box-sizing: border-box;  
                     border-radius: 15px; /* منحنی کردن گوشه‌های کادر تصویر بزرگ اول */">
                     border-radius: 15px; /* منحنی کردن گوشه‌های کادر تصویر بزرگ اول */
{{{first big border style|}}};">
             <!-- نگهدارنده تصویر بزرگ جهت برش و هم‌ترازی با نسبت ۴:۳ -->
             <!-- نگهدارنده تصویر بزرگ جهت برش و هم‌ترازی با نسبت ۴:۳ -->
             <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: 9px;{{{first big picture style|}}};">
                 [[File:3.jpg|thumb|link=|class=not-resized|350px|center]]
                 [[File:{{{تصویر1}}}|thumb|link=|class=not-resized|center]]
             </div>
             </div>
             <!-- کپشن تک‌خطی تصویر بزرگ اول: وسط‌چین، بدون کادر، با فاصله کمتر -->
             <!-- کپشن تک‌خطی تصویر بزرگ اول: فونت کوچک‌شده به 75% برای سازگاری کامل موبایل -->
             <div style="margin-top: 15px; font-size: 70%; color: #000000; font-weight: bold; text-align: center; width: 100%;
             <div style="margin-top: 3px; margin-bottom: 3px; font-size: 75%; color: #000000; font-weight: bold; text-align: center; width: 95%;
                         line-height: 2; border: none; background: transparent; box-shadow: none; outline: none;
                         line-height: 1.1; 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;{{{first caption big style|}}};">
توضیحات عکس بزرگ اول
توضیحات تصویر 1
             </div>
             </div>
         </div>
         </div>


         <!-- عکس بزرگ دوم -->
         <!-- عکس بزرگ دوم -->
         <div style="flex: 1; max-width: 480px; display: flex; flex-direction: column; align-items: center; border: 5px solid #6495ED; background-color:#F0BB78; padding: 5px; box-sizing: border-box;  
         <div style="flex: 1 1 calc(50% - 5px); max-width: 485px; min-width: 0; display: flex; flex-direction: column; align-items: center; border: 5px solid #3b82f6; background-color: #ffffff; padding: 1px; box-sizing: border-box;  
                     border-radius: 12px; /* منحنی کردن گوشه‌های کادر تصویر بزرگ دوم */">
                     border-radius: 15px; /* منحنی کردن گوشه‌های کادر تصویر بزرگ دوم */
{{{second big border style|}}};">
             <!-- نگهدارنده تصویر بزرگ جهت برش و هم‌ترازی با نسبت ۴:۳ -->
             <!-- نگهدارنده تصویر بزرگ جهت برش و هم‌ترازی با نسبت ۴:۳ -->
             <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: 9px;{{{second big picture style|}}};">
                 [[File:7.jpg|thumb|link=|class=not-resized|350px|center]]
                 [[File:{{{تصویر2}}}|thumb|link=|class=not-resized|center]]
             </div>
             </div>
             <!-- کپشن تک‌خطی تصویر بزرگ دوم: وسط‌چین، بدون کادر، با فاصله کمتر -->
             <!-- کپشن تک‌خطی تصویر بزرگ دوم: فونت کوچک‌شده به 75% برای سازگاری کامل موبایل -->
             <div style="margin-top: 15px; font-size: 70%; color: #000000; font-weight: bold; text-align: center; width: 100%;
             <div style="margin-top: 3px; margin-bottom: 3px; font-size: 75%; color: #000000; font-weight: bold; text-align: center; width: 95%;
                         line-height: 2; border: none; background: transparent; box-shadow: none; outline: none;
                         line-height: 1.1; 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;{{{second caption big style|}}};">
توضیحات عکس بزرگ دوم
توضیحات تصویر2
             </div>
             </div>
         </div>
         </div>
خط ۴۰: خط ۴۳:
     </div>
     </div>


     <!-- ردیف دوم: چهار عکس کوچک (همواره در یک ردیف در موبایل و دسکتاپ) -->
     <!-- ردیف دوم: چهار عکس کوچک (همواره در یک ردیف در موبایل و دسکتاپ بدون شکستن خط) -->
     <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; justify-content: center;">
     <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; justify-content: center; width: 100%;{{{second row style|}}}">
          
          
         <!-- عکس کوچک ۱ -->
         <!-- عکس کوچک ۱ -->
         <div style="display: flex; flex-direction: column; align-items: center; border: 5px solid #6495ED; background-color: #F0BB78; padding: 4px; box-sizing: border-box;  
         <div style="display: flex; flex-direction: column; align-items: center; border: 5px solid #3b82f6; background-color: #ffffff; padding: 4px; box-sizing: border-box;  
                     border-radius: 8px; /* منحنی کردن گوشه‌های کادر تصویر کوچک اول */">
                     border-radius: 15px; min-width: 0; /* منحنی کردن گوشه‌های کادر تصویر کوچک اول */
{{{first small border style|}}};">
             <!-- نگهدارنده تصویر کوچک جهت برش مربعی ۱:۱ -->
             <!-- نگهدارنده تصویر کوچک جهت برش مربعی ۱:۱ -->
             <div style="width: 100%; aspect-ratio: 1/1; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 6px;">
             <div style="width: 100%; aspect-ratio: 1/1; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 8px;{{{first small picture style|}}};">
                 [[File:1.jpg|thumb|link=|class=not-resized|250px|center]]
                 [[File:{{{تصویر کوچک1}}}|thumb|link=|class=not-resized|center]]
             </div>
             </div>
             <!-- کپشن تک‌خطی تصویر کوچک اول: وسط‌چین، بدون کادر، با فاصله کمتر -->
             <!-- کپشن تک‌خطی تصویر کوچک اول: فونت بسیار کوچک‌شده به 65% برای جلوگیری از تداخل متن -->
             <div style="margin-bottom: 1px; font-size: 80%; color: #000000; text-align: center; width: 100%;
             <div style="margin-top: 3px; margin-bottom: 1px; font-size: 65%; color: #000000; font-weight: bold; text-align: center; width: 95%;
                         line-height: 1.1; border: none; background: transparent; box-shadow: none; outline: none;
                         line-height: 1; 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;{{{first small caption style|}}};">
توضیحات ۱
<!-- توضیحات تصویر کوچک1-->
             </div>
             </div>
         </div>
         </div>


         <!-- عکس کوچک ۲ -->
         <!-- عکس کوچک ۲ -->
         <div style="display: flex; flex-direction: column; align-items: center; border: 5px solid #6495ED; background-color: #F0BB78; padding: 4px; box-sizing: border-box;  
         <div style="display: flex; flex-direction: column; align-items: center; border: 5px solid #3b82f6; background-color: #ffffff; padding: 4px; box-sizing: border-box;  
                     border-radius: 8px; /* منحنی کردن گوشه‌های کادر تصویر کوچک دوم */">
                     border-radius: 15px; min-width: 0; /* منحنی کردن گوشه‌های کادر تصویر کوچک دوم */
{{{second small border style|}}};">
             <!-- نگهدارنده تصویر کوچک جهت برش مربعی ۱:۱ -->
             <!-- نگهدارنده تصویر کوچک جهت برش مربعی ۱:۱ -->
             <div style="width: 100%; aspect-ratio: 1/1; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 6px;">
             <div style="width: 100%; aspect-ratio: 1/1; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 8px;{{{second small picture style|}}};">
                 [[File:22.jpg|thumb|link=|class=not-resized|250px|center]]
                 [[File:{{{تصویر کوچک2}}}|thumb|link=|class=not-resized|center]]
             </div>
             </div>
             <!-- کپشن تک‌خطی تصویر کوچک دوم: وسط‌چین، بدون کادر، با فاصله کمتر -->
             <!-- کپشن تک‌خطی تصویر کوچک دوم: فونت بسیار کوچک‌شده به 65% برای جلوگیری از تداخل متن -->
             <div style="margin-bottom: 1px; font-size: 80%; color: #000000; text-align: center; width: 100%;
             <div style="margin-top: 3px; margin-bottom: 1px; font-size: 65%; color: #000000; font-weight: bold; text-align: center; width: 95%;
                         line-height: 1.1; border: none; background: transparent; box-shadow: none; outline: none;
                         line-height: 1; 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;{{{second small caption style|}}};">
توضیحات ۲
<!--توضیحات تصویر کوچک2-->
             </div>
             </div>
         </div>
         </div>


         <!-- عکس کوچک ۳ -->
         <!-- عکس کوچک ۳ -->
         <div style="display: flex; flex-direction: column; align-items: center; border: 5px solid #6495ED; background-color: #F0BB78; padding: 4px; box-sizing: border-box;  
         <div style="display: flex; flex-direction: column; align-items: center; border: 5px solid #3b82f6; background-color: #ffffff; padding: 4px; box-sizing: border-box;  
                     border-radius: 8px; /* منحنی کردن گوشه‌های کادر تصویر کوچک سوم */">
                     border-radius: 15px; min-width: 0; /* منحنی کردن گوشه‌های کادر تصویر کوچک سوم */">
             <!-- نگهدارنده تصویر کوچک جهت برش مربعی ۱:۱ -->
             <!-- نگهدارنده تصویر کوچک جهت برش مربعی ۱:۱ -->
             <div style="width: 100%; aspect-ratio: 1/1; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 6px;">
             <div style="width: 100%; aspect-ratio: 1/1; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 8px;">
                 [[File:4.jpg|thumb|link=|class=not-resized|250px|center]]
                 [[File:{{{تصویر کوچک3}}}|thumb|link=|class=not-resized|center]]
             </div>
             </div>
             <!-- کپشن تک‌خطی تصویر کوچک سوم: وسط‌چین، بدون کادر، با فاصله کمتر -->
             <!-- کپشن تک‌خطی تصویر کوچک سوم: فونت بسیار کوچک‌شده به 65% برای جلوگیری از تداخل متن -->
             <div style="margin-bottom: 1px; font-size: 80%; color: #000000; text-align: center; width: 100%;
             <div style="margin-top: 3px; margin-bottom: 1px; font-size: 65%; color: #000000; font-weight: bold; text-align: center; width: 95%;
                         line-height: 1.1; border: none; background: transparent; box-shadow: none; outline: none;
                         line-height: 1; 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;">
توضیحات ۳
<!--توضیحات تصویر کوچک3-->
             </div>
             </div>
         </div>
         </div>


         <!-- عکس کوچک ۴ -->
         <!-- عکس کوچک ۴ -->
      <div style="display: flex; flex-direction: column; align-items: center; border: 5px solid #6495ED; background-color: #F0BB78; padding: 4px; box-sizing: border-box;  
        <div style="display: flex; flex-direction: column; align-items: center; border: 5px solid #3b82f6; background-color: #ffffff; padding: 4px; box-sizing: border-box;  
border-radius: 8px; /* منحنی کردن گوشه‌های کادر تصویر کوچک چهارم */">
                    border-radius: 15px; min-width: 0; /* منحنی کردن گوشه‌های کادر تصویر کوچک چهارم */">
             <!-- نگهدارنده تصویر کوچک جهت برش مربعی ۱:۱ -->
             <!-- نگهدارنده تصویر کوچک جهت برش مربعی ۱:۱ -->
             <div style="width: 100%; aspect-ratio: 1/1; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 6px;">
             <div style="width: 100%; aspect-ratio: 1/1; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 8px;">
                 [[File:9.jpg|thumb|link=|class=not-resized|250px|center]]
                 [[File:{{{تصویر کوچک4}}}|thumb|link=|class=not-resized|center]]
             </div>
             </div>
             <!-- کپشن تک‌خطی تصویر کوچک چهارم: وسط‌چین، بدون کادر، با فاصله کمتر -->
             <!-- کپشن تک‌خطی تصویر کوچک چهارم: فونت بسیار کوچک‌شده به 65% برای جلوگیری از تداخل متن -->
             <div style="margin-bottom: 1px; font-size: 80%; color: #000000; text-align: center; width: 100%;
             <div style="margin-top: 3px; margin-bottom: 1px; font-size: 65%; color: #000000; font-weight: bold; text-align: center; width: 95%;
                         line-height: 1.1; border: none; background: transparent; box-shadow: none; outline: none;
                         line-height: 1; 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;">
توضیحات ۴
<!--توضیحات تصویر کوچک4-->
             </div>
             </div>
         </div>
         </div>
خط ۱۰۶: خط ۱۱۱:


</div>
</div>
{{صفحه اصلی/قاب
|heading style = background: #89CFF0;text-align: center;
|عنوان = نصــب دوربیــن مــدار بستــه
|محتوا = من خلیفه هستم، متخصص سیستم‌های امنیتی و بنیان‌گذار برند '''« دیـــــده بــان »'''.
خرید و فروش ونصب انواع دوربین های مدار بسته AHD و IP و نصب دزدگیرهای اماکن برای مراکز صنعتی، مسکونی، اداری، تجاری و جک اتوماتیک، ایفون و...
افتخار دارم که در منطقه، به عنوان یکی از متخصصین شناخته‌شده در این حوزه فعالیت می‌کنم. هدف من در «دیده بان» فقط نصب یک دوربین نیست؛ هدف من این است که با تکیه بر سال‌ها تجربه، چشمِ مراقب و مطمئن شما باشم.
با '''« دیـــــده بــان »'''، امنیت را با تخصص تجربه کنید.
}}
{{صفحه اصلی/قاب
|heading style = background:#89CFF0
|عنوان= راه هــای ارتبــاطی
|محتوا= :
* ☎️ شماره تماس: ۰۹۱۹۱۶۰۶۷۷8
*
*
* 📷 اینستاگرام: @dideban021
*
* 📌 آدرس: نسیم شهر - خیابان چمران
*
* 🚀 رزرو سریع:
}}

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

               [[File:{{{تصویر1}}}|thumb|link=|class=not-resized|center]]

توضیحات تصویر 1 

               [[File:{{{تصویر2}}}|thumb|link=|class=not-resized|center]]

توضیحات تصویر2 

               [[File:{{{تصویر کوچک1}}}|thumb|link=|class=not-resized|center]]

               [[File:{{{تصویر کوچک2}}}|thumb|link=|class=not-resized|center]]

               [[File:{{{تصویر کوچک3}}}|thumb|link=|class=not-resized|center]]

               [[File:{{{تصویر کوچک4}}}|thumb|link=|class=not-resized|center]]
برگرفته از «https://fa.faraghaib.ir/w/index.php?title=الگو:چیدمان_تصاویر&oldid=2523»