کافی نت: تفاوت میان نسخه‌ها

(۱۶ نسخهٔ میانی ویرایش شده توسط یک کاربر دیگر نشان داده نشد)

خط ۱:

خط ۵۳:

خط ۵۴:

</div>

~~~~

~~<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%); /* ایجاد رنگ پس‌زمینه ابر و بادی */~~

~~border-radius: 16px; /* منحنی کردن گوشه‌های کل باکس گالری */~~

~~box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* ایجاد سایه ملایم دور کادر */~~

~~box-sizing: border-box;">~~

~~~~

~~<div style="display: flex; gap: 10px; justify-content: center; margin-bottom: 10px; width: 100%;">~~

~~~~

<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 #7ED957; background-color: #2A9D8F; padding: 1px; box-sizing: border-box;

~~border-radius: 15px; /* منحنی کردن گوشه‌های کادر تصویر بزرگ اول */">~~

~~~~

~~<div style="width: 100%; aspect-ratio: 4/3; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 9px;">~~

~~[[File:3.jpg|thumb|link=|class=not-resized|center]]~~

~~</div>~~

~~~~

~~<div style="margin-top: 4px; margin-bottom: 4px; font-size: 90%; color: #000000; font-weight: bold; text-align: center; width: 100%;~~

~~line-height: 1.2; border: none; background: transparent; box-shadow: none; outline: none;~~

~~white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">~~

~~توضیحات عکس 1~~

~~</div>~~

~~~~

<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 #7ED957; background-color: #2A9D8F; padding: 1px; box-sizing: border-box;~~

~~border-radius: 15px; /* منحنی کردن گوشه‌های کادر تصویر بزرگ دوم */">~~

~~~~

~~<div style="width: 100%; aspect-ratio: 4/3; overflow: hidden; display:~~ flex~~; align-items: center; justify~~-~~content~~: ~~center; border-radius: 9px;">~~

~~[[File:7.jpg|thumb|link=|class=not-resized|center]]~~

~~</div>~~

~~~~

~~<div style="margin-top: 4px; margin-bottom: 4px; font-size: 90%; color: #000000; font-weight: bold; text-align: center; width: 100%;~~

~~line-height: 1.2; border: none; background: transparent; box-shadow: none; outline: none;~~

~~white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">~~

~~توضیات عکس 2~~

~~</div>~~

~~~~

~~<div style="display: grid; grid-template-columns: repeat(4, 1fr)~~; gap: 10px; justify-content: center~~; width: 100%;">~~

~~~~

~~<div style="display: flex; flex-direction: column~~; align-items~~: center; border: 5px solid #7ED957; background-color: #2A9D8F; padding: 4px; box-sizing: border-box;~~

~~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: 8px~~;">

~~[[File:1.jpg|thumb|link=|class=not-resized|center]]~~

~~</div>~~

~~~~

~~<div style="margin-top: 4px; margin-bottom: 1px; font-size: 80%; color: #000000; text-align: center; width: 100%;~~

~~line-height: 1.1; border: none; background: transparent; box-shadow: none; outline: none;~~

~~white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">~~

~~دوربین سقفی~~

~~</div>~~

~~~~

~~<div style="display: flex; flex-direction: column; align-items: center; border: 5px solid #7ED957; background-color: #2A9D8F; padding: 4px; box-sizing: border-box;~~

~~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: 8px;">~~

~~[[File:22.jpg|thumb|link=|class=not-resized|center]]~~

~~</div>~~

~~~~

~~<div style="margin-top: 4px~~; margin~~-bottom: 1px; font-size: 80%; color: #000000; text-align: center; width: 100%;~~

~~line-height: 1.1; border: none; background: transparent; box-shadow: none; outline: none;~~

~~white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">~~

~~دوربین دیواری~~

~~</div>~~

~~~~

~~<div style="display: flex; flex-direction: column; align-items: center; border~~: 5px ~~solid #7ED957; background-color: #2A9D8F; padding: 4px; box-sizing: border-box;~~

~~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: 8px;">~~

~~[[File:4.jpg|thumb|link=|class=not-resized|center]]~~

~~</div>~~

~~~~

~~<div style="margin-top: 4px; margin-bottom: 1px; font-size: 80%; color: #000000; text-align: center; width: 100%;~~

~~line-height: 1.1; border: none; background: transparent; box-shadow: none; outline: none;~~

~~white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">~~

~~دوربین 360 درجه~~

~~</div>~~

~~~~

~~<div style="display: flex; flex-direction: column; align-items: center; border: 5px solid #7ED957; background-color: #2A9D8F; padding: 4px; box-sizing: border-box;~~

~~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: 8px;">~~

~~[[File:9.jpg|thumb|link=|class=not-resized|center]]~~

~~</div>~~

~~~~

~~<div style="margin-top: 4px; margin-bottom: 1px; font-size: 80%; color: #000000; text-align: center; width: 100%;~~

~~line-height: 1.1; border: none; background: transparent; box-shadow: none; outline: none;~~

~~white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">~~

~~دوربین بند انگشتی~~

~~</div>~~

</div>

@@ خط ۱: / خط ۱: @@
 <div class = "por tal-column-3-3 por tal-container-3" style = "margin-bottom: 16px; grid-column: span 3; padding: 1px; text-align: center; background: #89CFF0; border-radius: 10px; box-shadow: 2px 4px 11px 0px #becbd5; align-items: left; overflow: hidden">
 <div class = "portal-column-2-3" style = "">
@@ خط ۵۳: / خط ۵۴: @@
 </div>
+<div style="display:flex; flex-direction:row; flex-wrap:wrap; gap:10px; justify-content:center; align-items:flex-start; width:100%; margin:5px 0;">
+{{کانتینرعکس دایره}}
+{{کانتینرعکس دایره}}
+{{کانتینرعکس دایره}}
+{{کانتینرعکس دایره}}
+{{کانتینرعکس دایره}}
-<!-- شروع کانتینر اصلی گالری با پس‌زمینه آبی آسمانی ابر و بادی و چیدمان وسط‌چین -->
-<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%); /* ایجاد رنگ پس‌زمینه ابر و بادی */
-            border-radius: 16px; /* منحنی کردن گوشه‌های کل باکس گالری */
-            box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* ایجاد سایه ملایم دور کادر */
-            box-sizing: border-box;">
-    <!-- ردیف اول: دو عکس بزرگ (همواره کنار هم در موبایل و دسکتاپ بدون شکستن خط) -->
-    <div style="display: flex; gap: 10px; justify-content: center; margin-bottom: 10px; width: 100%;">
-        <!-- عکس بزرگ اول -->
-        <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 #7ED957; background-color: #2A9D8F; padding: 1px; box-sizing: border-box;
-                    border-radius: 15px; /* منحنی کردن گوشه‌های کادر تصویر بزرگ اول */">
-            <!-- نگهدارنده تصویر بزرگ جهت برش و هم‌ترازی با نسبت ۴:۳ -->
-            <div style="width: 100%; aspect-ratio: 4/3; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 9px;">
-                [[File:3.jpg|thumb|link=|class=not-resized|center]]
-            </div>
-            <!-- کپشن تک‌خطی تصویر بزرگ اول: وسط‌چین، بدون کادر، با فاصله کمتر -->
-            <div style="margin-top: 4px; margin-bottom: 4px; font-size: 90%; color: #000000; font-weight: bold; text-align: center; width: 100%;
-                        line-height: 1.2; border: none; background: transparent; box-shadow: none; outline: none;
-                        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
-                توضیحات عکس 1
-            </div>
-        </div>
-        <!-- عکس بزرگ دوم -->
-        <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 #7ED957; background-color: #2A9D8F; padding: 1px; box-sizing: border-box;
-                    border-radius: 15px; /* منحنی کردن گوشه‌های کادر تصویر بزرگ دوم */">
-            <!-- نگهدارنده تصویر بزرگ جهت برش و هم‌ترازی با نسبت ۴:۳ -->
-            <div style="width: 100%; aspect-ratio: 4/3; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 9px;">
-                [[File:7.jpg|thumb|link=|class=not-resized|center]]
-            </div>
-            <!-- کپشن تک‌خطی تصویر بزرگ دوم: وسط‌چین، بدون کادر، با فاصله کمتر -->
-            <div style="margin-top: 4px; margin-bottom: 4px; font-size: 90%; color: #000000; font-weight: bold; text-align: center; width: 100%;
-                        line-height: 1.2; border: none; background: transparent; box-shadow: none; outline: none;
-                        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
-                توضیات عکس 2
-            </div>
-        </div>
-    </div>
-    <!-- ردیف دوم: چهار عکس کوچک (همواره در یک ردیف در موبایل و دسکتاپ بدون شکستن خط) -->
-    <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; justify-content: center; width: 100%;">
-        <!-- عکس کوچک ۱ -->
-        <div style="display: flex; flex-direction: column; align-items: center; border: 5px solid #7ED957; background-color: #2A9D8F; padding: 4px; box-sizing: border-box;
-                    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: 8px;">
-                [[File:1.jpg|thumb|link=|class=not-resized|center]]
-            </div>
-            <!-- کپشن تک‌خطی تصویر کوچک اول -->
-            <div style="margin-top: 4px; margin-bottom: 1px; font-size: 80%; color: #000000; text-align: center; width: 100%;
-                        line-height: 1.1; border: none; background: transparent; box-shadow: none; outline: none;
-                        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
-                دوربین سقفی
-            </div>
-        </div>
-        <!-- عکس کوچک ۲ -->
-        <div style="display: flex; flex-direction: column; align-items: center; border: 5px solid #7ED957; background-color: #2A9D8F; padding: 4px; box-sizing: border-box;
-                    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: 8px;">
-                [[File:22.jpg|thumb|link=|class=not-resized|center]]
-            </div>
-            <!-- کپشن تک‌خطی تصویر کوچک دوم -->
-            <div style="margin-top: 4px; margin-bottom: 1px; font-size: 80%; color: #000000; text-align: center; width: 100%;
-                        line-height: 1.1; border: none; background: transparent; box-shadow: none; outline: none;
-                        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
-                دوربین دیواری
-            </div>
-        </div>
-        <!-- عکس کوچک ۳ -->
-        <div style="display: flex; flex-direction: column; align-items: center; border: 5px solid #7ED957; background-color: #2A9D8F; padding: 4px; box-sizing: border-box;
-                    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: 8px;">
-                [[File:4.jpg|thumb|link=|class=not-resized|center]]
-            </div>
-            <!-- کپشن تک‌خطی تصویر کوچک سوم -->
-            <div style="margin-top: 4px; margin-bottom: 1px; font-size: 80%; color: #000000; text-align: center; width: 100%;
-                        line-height: 1.1; border: none; background: transparent; box-shadow: none; outline: none;
-                        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
-                دوربین 360 درجه
-            </div>
-        </div>
-        <!-- عکس کوچک ۴ -->
-        <div style="display: flex; flex-direction: column; align-items: center; border: 5px solid #7ED957; background-color: #2A9D8F; padding: 4px; box-sizing: border-box;
-                    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: 8px;">
-                [[File:9.jpg|thumb|link=|class=not-resized|center]]
-            </div>
-            <!-- کپشن تک‌خطی تصویر کوچک چهارم -->
-            <div style="margin-top: 4px; margin-bottom: 1px; font-size: 80%; color: #000000; text-align: center; width: 100%;
-                        line-height: 1.1; border: none; background: transparent; box-shadow: none; outline: none;
-                        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
-                دوربین بند انگشتی
-            </div>
-        </div>
-    </div>
 </div>