دایره های کنار هم - فراغیب
Esfandiari (بحث | مشارکتها) جایگزینی صفحه با '{{کانتینر عکس دایره |تصویر=search.png }}' برچسب: جایگزین شد |
Esfandiari (بحث | مشارکتها) بدون خلاصۀ ویرایش |
||
| (۸۸ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد) | |||
| خط ۱: | خط ۱: | ||
<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: 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;"> | |||
<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> | |||
</html> | |||