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

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

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

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

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

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

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

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

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

@@ خط ۱: / خط ۱: @@
-<html>
 <div style="display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 10px; width: 100%;">
      <!-- آیتم ۱ -->
      <div style="flex: 1 1 18%; min-width: 150px; text-align: center; margin-bottom: 15px;">
-<img src="https://dl.faraghaib.ir/نصب دوربین.png" alt="توضیح سئو شده عکس اول" style="width: 100%; height: auto; border-radius: 8px;">
+        [[پرونده:نصب دوربین.png|150px|center|alt=توضیح سئو شده عکس اول درباره دوربین امنیتی یا دزدگیر]]
-<p style="font-size: 14px; margin-top: 8px; color: #333;">کپشن عکس اول</p>
+        <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;">
-<img src="https://dl.faraghaib.ir/فروش.png" alt="توضیح سئو شده عکس دوم" style="width: 100%; height: auto; border-radius: 8px;">
+        [[پرونده:فروش.png|150px|center|alt=توضیح سئو شده عکس دوم]]
-<p style="font-size: 14px; margin-top: 8px; color: #333;">کپشن عکس دوم</p>
+        <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;">
-<img src="https://dl.faraghaib.ir/مشاوره.png" alt="توضیح سئو شده عکس سوم" style="width: 100%; height: auto; border-radius: 8px;">
+        [[پرونده:مشاوره.png|150px|center|alt=توضیح سئو شده عکس سوم]]
-<p style="font-size: 14px; margin-top: 8px; color: #333;">کپشن عکس سوم</p>
+        <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;">
-<img src="https://dl.faraghaib.ir/امنیت.png" alt="توضیح سئو شده عکس چهارم" style="width: 100%; height: auto; border-radius: 8px;">
+        [[پرونده:امنیت.png|150px|center|alt=توضیح سئو شده عکس چهارم]]
-<p style="font-size: 14px; margin-top: 8px; color: #333;">کپشن عکس چهارم</p>
+        <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;">
-<img src="https://dl.faraghaib.ir/تعمیر.png" alt="توضیح سئو شده عکس پنجم" style="width: 100%; height: auto; border-radius: 8px;">
+        [[پرونده:تعمیر.png|150px|center|alt=توضیح سئو شده عکس پنجم]]
-<p style="font-size: 14px; margin-top: 8px; color: #333;">کپشن عکس پنجم</p>
+        <p style="font-size: 14px; margin-top: 8px; color: #333; line-height: 1.6;">کپشن و توضیح عکس پنجم</p>
      </div>
 </div>
-</html>