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

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

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

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

کپشن دلخواه

@@ خط ۱: / خط ۱: @@
-<div style="display:flex; flex-direction:row; flex-wrap:wrap; gap:10px; justify-content:center; align-items:flex-start; width:100%; margin:5px 0;">
+<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; flex:1 1 180px; max-width:250px;">
+  <!-- ساختار تکرار شونده برای ۵ آیتم -->
-     {{کانتینرعکس دایره|تصویر={{{تصویر1|}}}}}
+  <!-- نکته: برای هر آیتم، کلاس‌های مربوط به افکت سه‌بعدی باید در استایل‌شیت اصلی تعریف شده باشد -->
-    {{#if:{{{کپشن1|}}}|
-<div style="display:block; font-size:1em; line-height:0.9; margin-top:0px; text-align:center;">
+   <div style="display: flex; flex-direction: column; align-items: center; flex: 0 1 calc(20% - 20px); min-width: 120px; max-width: 180px;">
-{{{کپشن1}}}
+     <div class="wiki-3d-circle">
-       </div>
+       <div class="wiki-3d-inner-frame-circle">
-    }}
+        <div class="wiki-3d-image-wrapper-circle">
-  </div>
-  <div style="display:flex; flex-direction:column; align-items:center; flex:1 1 180px; max-width:250px;">
+             <!-- https://dl.faraghaib.ir/m/103/cam.png            نمونه آدرس دهی     -->
-    {{کانتینرعکس دایره|تصویر={{{تصویر2|}}}}}
+              <img src="آدرس عکس مورد نظر">
-    {{#if:{{{کپشن2|}}}|
-<div style="display:block; font-size:1em; line-height:0.9; margin-top:0px; text-align:center;">{{{کپشن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 style="display:flex; flex-direction:column; align-items:center; flex:1 1 180px; max-width:250px;">
+     </div>
-    {{کانتینرعکس دایره|تصویر={{{تصویر3|}}}}}
-     {{#if:{{{کپشن3|}}}|
-<div style="display:block; font-size:1em; line-height:0.9; margin-top:0px; text-align:center;">
-{{{کپشن3}}}
-      </div>
-    }}
    </div>
-   <div style="display:flex; flex-direction:column; align-items:center; flex:1 1 180px; max-width:250px;">
+   <div style="display: flex; flex-direction: column; align-items: center; flex: 0 1 calc(20% - 20px); min-width: 120px; max-width: 180px;">
-     {{کانتینرعکس دایره|تصویر={{{تصویر4|}}}}}
+     <div class="wiki-3d-circle">
-{{#if:{{{کپشن4|}}}|
+       <div class="wiki-3d-inner-frame-circle">
-<div style="display:block; font-size:1em; line-height:0.9; margin-top:0px; text-align:center;">
+        <div class="wiki-3d-image-wrapper-circle">
-{{{کپشن4}}}
-       </div>
-    }}
-  </div>
-  <div style="display:flex; flex-direction:column; align-items:center; flex:1 1 180px; max-width:250px;">
+             <!-- https://dl.faraghaib.ir/m/103/cam.png            نمونه آدرس دهی     -->
-    {{کانتینرعکس دایره|تصویر={{{تصویر5|}}}}}
+              <img src="آدرس عکس مورد نظر">
-    {{#if:{{{کپشن5|}}}|
-<div style="display:block; font-size:1em; line-height:0.9; margin-top:0px; text-align:center;">
+        </div>
-{{{کپشن5}}}
        </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>
+  <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            نمونه آدرس دهی     -->
+              <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            نمونه آدرس دهی     -->
+              <img src="آدرس عکس مورد نظر">
+        </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;width:180px;">
+<a href="/wiki/نام_صفحه_مورد_نظر">
+کپشن دلخواه
-  <div style="
+</a>
-    width:130px;
-    height:130px;
-    border-radius:50%;
-    background:#fff;
-    display:flex;
-    justify-content:center;
-    align-items:center;
-    box-shadow:0 0 25px rgba(0,0,0,.12);
-    border:3px solid rgba(255,255,255,.8);
-    margin-bottom:4px;
-  ">
-    {{{تصویر6|}}}
-  </div>
-  <div style="
-    margin-top:0;
-    padding-top:0;
-    line-height:1.1;
-    font-size:22px;
-    text-align:center;
-    color:#3d67b0;
-    font-weight:500;
-  ">
-    {{{کپشن6|}}}
    </div>
 </div>
+</html>