مربع های کنار هم/موبایل نیکان - فراغیب

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

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

موبایل

انواع شارژر

انواع موبایل

شارژر

هولدر موبایل

@@ خط ۱: / خط ۱: @@
 <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-wrap: wrap; justify-content: center; align-items: flex-start; gap: 20px; width: 100%; margin: 20px 0; padding: 15px; box-sizing: border-box; background-color: #FFFAF0; border-radius: 15px; border: 1px solid #FFD580;">
-   <!-- ساختار تکرار شونده برای ۵ آیتم -->
+   <!-- آیتم‌ها با تم رنگی گرم -->
-   <!-- نکته: برای هر آیتم، کلاس‌های مربوط به افکت سه‌بعدی باید در استایل‌شیت اصلی تعریف شده باشد -->
+   <!-- استایل‌دهی Inline برای اطمینان از نمایش صحیح رنگ‌ها -->
    <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-box">
+     <div class="wiki-3d-box" style="border: 2px solid #FF7F50; border-radius: 50%; padding: 3px; background: #FFF4E6; box-shadow: 0 4px 6px rgba(255, 127, 80, 0.2);">
-       <div class="wiki-3d-inner-frame">
+       <div class="wiki-3d-inner-frame" style="border: 2px solid #FFD580; border-radius: 50%; overflow: hidden;">
          <div class="wiki-3d-image-wrapper-circle">
-                  <img src="https://dl.faraghaib.ir/m/106/3.jpg">
+                  <img src="https://dl.faraghaib.ir/m/106/3.jpg" style="width: 100px; height: 100px; object-fit: cover; display: block;">
          </div>
        </div>
      </div>
-<div style="font-size: 0.9em; text-align: center; margin-top: 8px; font-weight: bold;">
+    <div style="font-size: 0.9em; text-align: center; margin-top: 8px; font-weight: bold; color: #D32F2F;">
        موبایل
-</div>
+    </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-box">
+     <div class="wiki-3d-box" style="border: 2px solid #FF7F50; border-radius: 50%; padding: 3px; background: #FFF4E6; box-shadow: 0 4px 6px rgba(255, 127, 80, 0.2);">
-       <div class="wiki-3d-inner-frame">
+       <div class="wiki-3d-inner-frame" style="border: 2px solid #FFD580; border-radius: 50%; overflow: hidden;">
          <div class="wiki-3d-image-wrapper-circle">
-             <img src="https://dl.faraghaib.ir/m/106/8.jpg">
+             <img src="https://dl.faraghaib.ir/m/106/8.jpg" style="width: 100px; height: 100px; object-fit: cover; display: block;">
         </div>
        </div>
      </div>
-     <div style="font-size: 0.9em; text-align: center; margin-top: 8px; font-weight: bold;">
+     <div style="font-size: 0.9em; text-align: center; margin-top: 8px; font-weight: bold; color: #D32F2F;">
               انواع شارژر
       </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-box">
+     <div class="wiki-3d-box" style="border: 2px solid #FF7F50; border-radius: 50%; padding: 3px; background: #FFF4E6; box-shadow: 0 4px 6px rgba(255, 127, 80, 0.2);">
-       <div class="wiki-3d-inner-frame">
+       <div class="wiki-3d-inner-frame" style="border: 2px solid #FFD580; border-radius: 50%; overflow: hidden;">
          <div class="wiki-3d-image-wrapper-circle">
-               <img src="https://dl.faraghaib.ir/m/106/5.jpg">
+               <img src="https://dl.faraghaib.ir/m/106/5.jpg" style="width: 100px; height: 100px; object-fit: cover; display: block;">
          </div>
        </div>
      </div>
-     <div style="font-size: 0.9em; text-align: center; margin-top: 8px; font-weight: bold;">
+     <div style="font-size: 0.9em; text-align: center; margin-top: 8px; font-weight: bold; color: #D32F2F;">
           انواع موبایل
      </div>
-    </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-box">
+     <div class="wiki-3d-box" style="border: 2px solid #FF7F50; border-radius: 50%; padding: 3px; background: #FFF4E6; box-shadow: 0 4px 6px rgba(255, 127, 80, 0.2);">
-       <div class="wiki-3d-inner-frame">
+       <div class="wiki-3d-inner-frame" style="border: 2px solid #FFD580; border-radius: 50%; overflow: hidden;">
          <div class="wiki-3d-image-wrapper-circle">
-              <img src="https://dl.faraghaib.ir/m/106/7.jpg">
+              <img src="https://dl.faraghaib.ir/m/106/7.jpg" style="width: 100px; height: 100px; object-fit: cover; display: block;">
           </div>
        </div>
      </div>
-     <div style="font-size: 0.9em; text-align: center; margin-top: 8px; font-weight: bold;">
+     <div style="font-size: 0.9em; text-align: center; margin-top: 8px; font-weight: bold; color: #D32F2F;">
               شارژر
      </div>
-    </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-box">
+     <div class="wiki-3d-box" style="border: 2px solid #FF7F50; border-radius: 50%; padding: 3px; background: #FFF4E6; box-shadow: 0 4px 6px rgba(255, 127, 80, 0.2);">
-       <div class="wiki-3d-inner-frame">
+       <div class="wiki-3d-inner-frame" style="border: 2px solid #FFD580; border-radius: 50%; overflow: hidden;">
          <div class="wiki-3d-image-wrapper-circle">
-                 <img src="https://dl.faraghaib.ir/m/106/9.jpg">
+                 <img src="https://dl.faraghaib.ir/m/106/9.jpg" style="width: 100px; height: 100px; object-fit: cover; display: block;">
          </div>
        </div>
      </div>
-     <div style="font-size: 0.9em; text-align: center; margin-top: 8px; font-weight: bold;">
+     <div style="font-size: 0.9em; text-align: center; margin-top: 8px; font-weight: bold; color: #D32F2F;">
                هولدر موبایل
      </div>
-    </div>
+  </div>
 </div>
 </html>