صفحهٔ اصلی: تفاوت میان نسخه‌ها

جزبدون خلاصۀ ویرایش
برچسب: ویرایش مبدأ ۲۰۱۷
جزبدون خلاصۀ ویرایش
برچسب: ویرایش مبدأ ۲۰۱۷
خط ۱: خط ۱:
<div style="display: flex; flex-wrap: wrap; flex-direction: row-reverse; align-items: center; justify-content: center; width: 100%; max-width: 800px; margin: 0 auto; background-color: #fdf6e3; padding: 20px; border: 1px solid #ccc; box-shadow: 0 4px 12px rgba(0,0,0,0.1); border-radius: 8px; text-align: right;">
<div style="display: flex; flex-direction: row-reverse; flex-wrap: wrap; align-items: center; justify-content: center; background-color: #fdf6e3; padding: 20px; border: 1px solid #ccc; box-shadow: 0 4px 12px rgba(0,0,0,0.1); border-radius: 8px; max-width: 100%; margin: 0 auto;">
   <div style="flex-shrink: 0;">[[پرونده:حوزه-مجازی-ضحی.png|300px]]</div>
   <div style="flex: 0 0 300px; margin: 10px;">[[پرونده:حوزه-مجازی-ضحی.png|300px]]</div>
   <div style="flex: 1; min-width: 300px; font-size: 1.1rem; color: #333; text-align: justify;">
   <div style="flex: 1 1 300px; font-size: 1.1rem; color: #333; text-align: justify; margin: 10px;">
این یک متن نمونه است که در سمت راست تصویر قرار دارد. در حالت موبایل، این متن به زیر تصویر منتقل می‌شود. طراحی واکنش‌گرا، کادر و سایه برای زیبایی بیشتر اضافه شده‌اند. حالا کل محتوا در مرکز صفحه و با عرض ثابت نمایش داده می‌شود.
    این یک متن نمونه است که در سمت راست تصویر قرار دارد. در حالت دسکتاپ، متن و تصویر کنار هم هستند و در موبایل به‌صورت خودکار زیر هم قرار می‌گیرند. طراحی واکنش‌گرا، کادر و سایه برای زیبایی بیشتر اضافه شده‌اند.
   </div>
   </div>
</div>
</div>




برگرفته از «http://zooha.ir/صفحهٔ_اصلی»