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

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

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

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

کپشن و توضیح عکس اول

کپشن و توضیح عکس دوم

کپشن و توضیح عکس سوم

کپشن و توضیح عکس چهارم

کپشن و توضیح عکس پنجم

@@ خط ۱: / خط ۱: @@
-<div style="display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 10px; width: 100%;">
+<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;">
      <!-- آیتم ۱ -->
-     <div style="flex: 1 1 18%; min-width: 150px; text-align: center; margin-bottom: 15px;">
+  <!-- دایره سه‌بعدی بیرونی با کلاس انیمیشن هاور -->
-        [[پرونده:نصب دوربین.png|150px|center|alt=توضیح سئو شده عکس اول درباره دوربین امنیتی یا دزدگیر]]
+  <div class="wiki-3d-circle" >
-        <p style="font-size: 14px; margin-top: 8px; color: #333; line-height: 1.6;">کپشن و توضیح عکس اول</p>
+    <!-- قاب سفید داخلی -->
-    </div>
+     <div class="wiki-3d-inner-frame-circle" >
+      <!-- نگهدارنده تصویر با قابلیت فیت شدن خودکار -->
+      <div class="wiki-3d-image-wrapper">
+[[پرونده:نصب دوربین.png|150px|center|alt=توضیح سئو شده عکس اول درباره دوربین امنیتی یا دزدگیر]]
+</div>
+</div>
+</div>
+<p style="font-size: 14px; margin-top: 8px; color: #333; line-height: 1.6;">کپشن و توضیح عکس اول</p>
      <!-- آیتم ۲ -->
-     <div style="flex: 1 1 18%; min-width: 150px; text-align: center; margin-bottom: 15px;">
+  <!-- دایره سه‌بعدی بیرونی با کلاس انیمیشن هاور -->
-        [[پرونده:فروش.png|150px|center|alt=توضیح سئو شده عکس دوم]]
+  <div class="wiki-3d-circle" >
+     <!-- قاب سفید داخلی -->
+    <div class="wiki-3d-inner-frame-circle" >
+      <!-- نگهدارنده تصویر با قابلیت فیت شدن خودکار -->
+      <div class="wiki-3d-image-wrapper">
+[[پرونده:فروش.png|150px|center|alt=توضیح سئو شده عکس دوم]]
+</div>
+</div>
+</div>
          <p style="font-size: 14px; margin-top: 8px; color: #333; line-height: 1.6;">کپشن و توضیح عکس دوم</p>
-    </div>
      <!-- آیتم ۳ -->
-     <div style="flex: 1 1 18%; min-width: 150px; text-align: center; margin-bottom: 15px;">
+  <!-- دایره سه‌بعدی بیرونی با کلاس انیمیشن هاور -->
-        [[پرونده:مشاوره.png|150px|center|alt=توضیح سئو شده عکس سوم]]
+  <div class="wiki-3d-circle" >
+     <!-- قاب سفید داخلی -->
+    <div class="wiki-3d-inner-frame-circle" >
+      <!-- نگهدارنده تصویر با قابلیت فیت شدن خودکار -->
+      <div class="wiki-3d-image-wrapper">
+[[پرونده:مشاوره.png|150px|center|alt=توضیح سئو شده عکس سوم]]
+</div>
+</div>
+</div>
          <p style="font-size: 14px; margin-top: 8px; color: #333; line-height: 1.6;">کپشن و توضیح عکس سوم</p>
-    </div>
      <!-- آیتم ۴ -->
-     <div style="flex: 1 1 18%; min-width: 150px; text-align: center; margin-bottom: 15px;">
+   <!-- دایره سه‌بعدی بیرونی با کلاس انیمیشن هاور -->
-        [[پرونده:امنیت.png|150px|center|alt=توضیح سئو شده عکس چهارم]]
+  <div class="wiki-3d-circle" >
+     <!-- قاب سفید داخلی -->
+    <div class="wiki-3d-inner-frame-circle" >
+      <!-- نگهدارنده تصویر با قابلیت فیت شدن خودکار -->
+      <div class="wiki-3d-image-wrapper">
+[[پرونده:امنیت.png|150px|center|alt=توضیح سئو شده عکس چهارم]]
+</div>
+</div>
+</div>
          <p style="font-size: 14px; margin-top: 8px; color: #333; line-height: 1.6;">کپشن و توضیح عکس چهارم</p>
-    </div>
      <!-- آیتم ۵ -->
-     <div style="flex: 1 1 18%; min-width: 150px; text-align: center; margin-bottom: 15px;">
+  <!-- دایره سه‌بعدی بیرونی با کلاس انیمیشن هاور -->
-        [[پرونده:تعمیر.png|150px|center|alt=توضیح سئو شده عکس پنجم]]
+  <div class="wiki-3d-circle" >
+     <!-- قاب سفید داخلی -->
+    <div class="wiki-3d-inner-frame-circle" >
+      <!-- نگهدارنده تصویر با قابلیت فیت شدن خودکار -->
+      <div class="wiki-3d-image-wrapper">
+[[پرونده:تعمیر.png|150px|center|alt=توضیح سئو شده عکس پنجم]]
+</div>
+</div>
+</div>
          <p style="font-size: 14px; margin-top: 8px; color: #333; line-height: 1.6;">کپشن و توضیح عکس پنجم</p>
-    </div>
 </div>