دایره های کنار هم - فراغیب

دیداریویکی‌متن

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

کپشن دلخواه

@@ خط ۱: / خط ۱: @@
+<html>
+<div style="display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 20px; width: 100%; margin: 20px 0; padding: 0; box-sizing: border-box;">
-    <!-- ردیف دوم: چهار عکس کوچک (همواره در یک ردیف در موبایل و دسکتاپ بدون شکستن خط) -->
+  <!-- ساختار تکرار شونده برای ۵ آیتم -->
-    <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; flex: 0 1 calc(20% - 20px); min-width: 120px; max-width: 180px;">
-         <div style="display: flex; flex-direction: column; align-items: center; border: 5px solid #3b82f6; background-color: #ffffff; padding: 4px; box-sizing: border-box;
+    <div class="wiki-3d-circle">
-                    border-radius: 15px; min-width: 0; /* منحنی کردن گوشه‌های کادر تصویر کوچک اول */
+      <div class="wiki-3d-inner-frame-circle">
-{{{first small border style|}}};">
+         <div class="wiki-3d-image-wrapper-circle">
-            <!-- نگهدارنده تصویر کوچک جهت برش مربعی ۱:۱ -->
-            <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|}}};">
+             <!-- https://dl.faraghaib.ir/m/103/cam.png            نمونه آدرس دهی     -->
-                [[File:{{{تصویر کوچک1}}}|thumb|link=|class=not-resized|center]]
+              <img src="آدرس عکس مورد نظر">
-            </div>
-            <!-- کپشن تک‌خطی تصویر کوچک اول: فونت بسیار کوچک‌شده به 65% برای جلوگیری از تداخل متن -->
+   </div>
-            <div style="margin-top: 3px; margin-bottom: 1px; font-size: 65%; color: #000000; font-weight: bold; text-align: center; width: 95%;
+      </div>
-                        line-height: 1; border: none; background: transparent; box-shadow: none; outline: none;
+    </div>
-                        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;{{{first small caption style|}}};">
+    <div style="font-size: 0.9em; text-align: center; margin-top: 8px; font-weight: bold;">
-<!-- توضیحات تصویر کوچک1-->
-            </div>
+<a href="/wiki/نام_صفحه_مورد_نظر">
+کپشن دلخواه
+</a>
+    </div>
+  </div>
+  <div style="display: flex; flex-direction: column; align-items: center; flex: 0 1 calc(20% - 20px); min-width: 120px; max-width: 180px;">
+    <div class="wiki-3d-circle">
+      <div class="wiki-3d-inner-frame-circle">
+        <div class="wiki-3d-image-wrapper-circle">
+             <!-- https://dl.faraghaib.ir/m/103/cam.png            نمونه آدرس دهی     -->
+              <img src="آدرس عکس مورد نظر">
          </div>
+      </div>
+    </div>
+    <div style="font-size: 0.9em; text-align: center; margin-top: 8px; font-weight: bold;">
+<a href="/wiki/نام_صفحه_مورد_نظر">
+کپشن دلخواه
+</a>
+    </div>
+  </div>
+  <div style="display: flex; flex-direction: column; align-items: center; flex: 0 1 calc(20% - 20px); min-width: 120px; max-width: 180px;">
+    <div class="wiki-3d-circle">
+      <div class="wiki-3d-inner-frame-circle">
+        <div class="wiki-3d-image-wrapper-circle">
-        <!-- عکس کوچک ۲ -->
+             <!-- https://dl.faraghaib.ir/m/103/cam.png            نمونه آدرس دهی     -->
-        <div style="display: flex; flex-direction: column; align-items: center; border: 5px solid #3b82f6; background-color: #ffffff; padding: 4px; box-sizing: border-box;
+              <img src="آدرس عکس مورد نظر">
-                    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: 8px;{{{second small picture style|}}};">
-                [[File:{{{تصویر کوچک2}}}|thumb|link=|class=not-resized|center]]
-            </div>
-            <!-- کپشن تک‌خطی تصویر کوچک دوم: فونت بسیار کوچک‌شده به 65% برای جلوگیری از تداخل متن -->
-            <div style="margin-top: 3px; margin-bottom: 1px; font-size: 65%; color: #000000; font-weight: bold; text-align: center; width: 95%;
-                        line-height: 1; border: none; background: transparent; box-shadow: none; outline: none;
-                        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;{{{second small caption style|}}};">
-<!--توضیحات تصویر کوچک2-->
-            </div>
          </div>
+      </div>
+    </div>
+         <div style="font-size: 0.9em; text-align: center; margin-top: 8px; font-weight: bold;">
+<a href="/wiki/نام_صفحه_مورد_نظر">
+کپشن دلخواه
+</a>
+         </div>
+  </div>
+  <div style="display: flex; flex-direction: column; align-items: center; flex: 0 1 calc(20% - 20px); min-width: 120px; max-width: 180px;">
+    <div class="wiki-3d-circle">
+      <div class="wiki-3d-inner-frame-circle">
+        <div class="wiki-3d-image-wrapper-circle">
-        <!-- عکس کوچک ۳ -->
+             <!-- https://dl.faraghaib.ir/m/103/cam.png            نمونه آدرس دهی     -->
-        <div style="display: flex; flex-direction: column; align-items: center; border: 5px solid #3b82f6; background-color: #ffffff; padding: 4px; box-sizing: border-box;
+              <img src="آدرس عکس مورد نظر">
-                    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:{{{تصویر کوچک3}}}|thumb|link=|class=not-resized|center]]
-            </div>
-            <!-- کپشن تک‌خطی تصویر کوچک سوم: فونت بسیار کوچک‌شده به 65% برای جلوگیری از تداخل متن -->
-            <div style="margin-top: 3px; margin-bottom: 1px; font-size: 65%; color: #000000; font-weight: bold; text-align: center; width: 95%;
-                        line-height: 1; border: none; background: transparent; box-shadow: none; outline: none;
-                        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
-<!--توضیحات تصویر کوچک3-->
-            </div>
          </div>
+      </div>
+    </div>
+         <div style="font-size: 0.9em; text-align: center; margin-top: 8px; font-weight: bold;">
-        <!-- عکس کوچک ۴ -->
-        <div style="display: flex; flex-direction: column; align-items: center; border: 5px solid #3b82f6; background-color: #ffffff; padding: 4px; box-sizing: border-box;
+<a href="/wiki/نام_صفحه_مورد_نظر">
-                    border-radius: 15px; min-width: 0; /* منحنی کردن گوشه‌های کادر تصویر کوچک چهارم */">
+کپشن دلخواه
-            <!-- نگهدارنده تصویر کوچک جهت برش مربعی ۱:۱ -->
+</a>
-            <div style="width: 100%; aspect-ratio: 1/1; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 8px;">
-                [[File:{{{تصویر کوچک4}}}|thumb|link=|class=not-resized|center]]
+          </div>
-            </div>
+  </div>
-            <!-- کپشن تک‌خطی تصویر کوچک چهارم: فونت بسیار کوچک‌شده به 65% برای جلوگیری از تداخل متن -->
-            <div style="margin-top: 3px; margin-bottom: 1px; font-size: 65%; color: #000000; font-weight: bold; text-align: center; width: 95%;
+  <div style="display: flex; flex-direction: column; align-items: center; flex: 0 1 calc(20% - 20px); min-width: 120px; max-width: 180px;">
-                        line-height: 1; border: none; background: transparent; box-shadow: none; outline: none;
+    <div class="wiki-3d-circle">
-                        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
+      <div class="wiki-3d-inner-frame-circle">
-<!--توضیحات تصویر کوچک4-->
+        <div class="wiki-3d-image-wrapper-circle">
-            </div>
+             <!-- https://dl.faraghaib.ir/m/103/cam.png            نمونه آدرس دهی     -->
+              <img src="آدرس عکس مورد نظر">
          </div>
+      </div>
+    </div>
+         <div style="font-size: 0.9em; text-align: center; margin-top: 8px; font-weight: bold;">
-    </div>
+<a href="/wiki/نام_صفحه_مورد_نظر">
+کپشن دلخواه
+</a>
+  </div>
 </div>
+</html>