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

→ تفاوت با ویرایش قدیمی‌تر

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

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

کپشن دلخواه

@@ خط ۱: / خط ۱: @@
-<div style="display: flex; flex-direction: row; flex-wrap: wrap; gap: 15px; justify-content: center; align-items: flex-start; width: 100%; margin: 15px 0; box-sizing: border-box;">
+<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: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1 1 150px; max-width: 180px; box-sizing: border-box;">
+  <!-- نکته: برای هر آیتم، کلاس‌های مربوط به افکت سه‌بعدی باید در استایل‌شیت اصلی تعریف شده باشد -->
-     {{کانتینرعکس دایره|تصویر={{{تصویر1|}}}}}
-    {{#if:{{{کپشن1|}}}|
+   <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: block; font-size: 0.95em; line-height: 1.4; text-align: center; color: #333; word-wrap: break-word; width: 100%;">
+     <div class="wiki-3d-circle">
-        {{{کپشن1}}}
+      <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 style="display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1 1 150px; max-width: 180px; box-sizing: border-box;">
+     <div class="wiki-3d-circle">
-     {{کانتینرعکس دایره|تصویر={{{تصویر2|}}}}}
+      <div class="wiki-3d-inner-frame-circle">
-    {{#if:{{{کپشن2|}}}|
+        <div class="wiki-3d-image-wrapper-circle">
-      <div style="display: block; font-size: 0.95em; line-height: 1.4; text-align: center; color: #333; word-wrap: break-word; width: 100%;">
-         {{{کپشن2}}}
+             <!-- 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 style="display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1 1 150px; max-width: 180px; box-sizing: border-box;">
+     <div class="wiki-3d-circle">
-     {{کانتینرعکس دایره|تصویر={{{تصویر3|}}}}}
+      <div class="wiki-3d-inner-frame-circle">
-    {{#if:{{{کپشن3|}}}|
+        <div class="wiki-3d-image-wrapper-circle">
-      <div style="display: block; font-size: 0.95em; line-height: 1.4; text-align: center; color: #333; word-wrap: break-word; width: 100%;">
-         {{{کپشن3}}}
+             <!-- 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 style="display: flex; flex-content: column; flex-direction: column; align-items: center; gap: 8px; flex: 1 1 150px; max-width: 180px; box-sizing: border-box;">
+     <div class="wiki-3d-circle">
-     {{کانتینرعکس دایره|تصویر={{{تصویر4|}}}}}
+      <div class="wiki-3d-inner-frame-circle">
-    {{#if:{{{کپشن4|}}}|
+        <div class="wiki-3d-image-wrapper-circle">
-      <div style="display: block; font-size: 0.95em; line-height: 1.4; text-align: center; color: #333; word-wrap: break-word; width: 100%;">
-         {{{کپشن4}}}
+             <!-- 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 style="display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1 1 150px; max-width: 180px; box-sizing: border-box;">
+     <div class="wiki-3d-circle">
-     {{کانتینرعکس دایره|تصویر={{{تصویر5|}}}}}
+      <div class="wiki-3d-inner-frame-circle">
-    {{#if:{{{کپشن5|}}}|
+        <div class="wiki-3d-image-wrapper-circle">
-      <div style="display: block; font-size: 0.95em; line-height: 1.4; text-align: center; color: #333; word-wrap: break-word; width: 100%;">
-         {{{کپشن5}}}
+             <!-- 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>
+</html>