فراغیب

الگو:دایره های کنار هم: تفاوت میان نسخه‌ها

→ تفاوت با ویرایش قدیمی‌تر
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
 
(۵۴ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد)
خط ۱: خط ۱:
<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 200px; max-width: 250px; gap: 2px;">
  <!-- نکته: برای هر آیتم، کلاس‌های مربوط به افکت سه‌بعدی باید در استایل‌شیت اصلی تعریف شده باشد -->
         {{کانتینرعکس دایره|تصویر={{{تصویر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="font-size: 1em; text-align: center;">{{{کپشن1}}}</div>
    <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>
      
     <div style="font-size: 0.9em; text-align: center; margin-top: 8px; font-weight: bold;">
    <!-- برای آیتم‌های بعدی هم از همین استایل flex: 1 1 200px استفاده کنید -->
 
    <!-- ... -->
<a href="/wiki/نام_صفحه_مورد_نظر">
  <div style="display: flex; flex-direction: column; align-items: center; flex: 1 1 200px; max-width: 250px; gap: 2px;">
کپشن دلخواه
        {{کانتینرعکس دایره|تصویر={{{تصویر2|}}}}}
</a>
        {{#if:{{{کپشن2|}}}|
 
        <div style="font-size: 1em; text-align: center;">{{{کپشن1}}}</div>
        }}
     </div>
     </div>
   <div style="display: flex; flex-direction: column; align-items: center; flex: 1 1 200px; max-width: 250px; gap: 2px;">
  </div>
        {{کانتینرعکس دایره|تصویر={{{تصویر3|}}}}}
 
        {{#if:{{{کپشن3|}}}|
   <div style="display: flex; flex-direction: column; align-items: center; flex: 0 1 calc(20% - 20px); min-width: 120px; max-width: 180px;">
         <div style="font-size: 1em; text-align: center;">{{{کپشن1}}}</div>
    <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>
   <div style="display: flex; flex-direction: column; align-items: center; flex: 1 1 200px; max-width: 250px; gap: 2px;">
        <div style="font-size: 0.9em; text-align: center; margin-top: 8px; font-weight: bold;">
        {{کانتینرعکس دایره|تصویر={{{تصویر4|}}}}}
 
        {{#if:{{{کپشن4|}}}|
<a href="/wiki/نام_صفحه_مورد_نظر">
         <div style="font-size: 1em; text-align: center;">{{{کپشن1}}}</div>
کپشن دلخواه
        }}
</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>
   <div style="display: flex; flex-direction: column; align-items: center; flex: 1 1 200px; max-width: 250px; gap: 2px;">
        <div style="font-size: 0.9em; text-align: center; margin-top: 8px; font-weight: bold;">
        {{کانتینرعکس دایره|تصویر={{{تصویر5|}}}}}
 
        {{#if:{{{کپشن5|}}}|
 
         <div style="font-size: 1em; text-align: center;">{{{کپشن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>
        <div style="font-size: 0.9em; text-align: center; margin-top: 8px; font-weight: bold;">
<a href="/wiki/نام_صفحه_مورد_نظر">
کپشن دلخواه
</a>
  </div>


</div>
</div>
</html>
برگرفته از «https://fa.faraghaib.ir/wiki/الگو:دایره_های_کنار_هم»