فراغیب

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

→ تفاوت با ویرایش قدیمی‌تر
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
 
(۱۸ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد)
خط ۱: خط ۱:
<!-- کانتینر اصلی با طراحی ریسپانسیو و سایه ملایم -->


<!-- شروع کانتینر اصلی با پس‌زمینه آبی آسمانی ابر و بادی و چیدمان وسط‌چین -->
<div style="margin: 15px auto; padding: 15px; direction: rtl; text-align: right;  
<div style=" margin: 0px auto; padding: 10px; direction: rtl; text-align: center;  
             background-color: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px;  
             background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 50%, #f0f9ff 100%); /* ایجاد رنگ پس‌زمینه ابر و بادی */
             box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); max-width: 1000px; box-sizing: border-box;">
            border-radius: 16px; /* منحنی کردن گوشه‌های کل باکس گالری */
   
             box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* ایجاد سایه ملایم دور کادر */
    <!-- ایجاد چیدمان انعطاف‌پذیر (Flexbox) با قابلیت شکستن خط در موبایل -->
            box-sizing: border-box;">
     <div style="display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: center;">     
     <div style="display: flex; gap: 10px; justify-content: center; margin-bottom: 10px; width: 100%;">     
<div style="width: 620px;margin: 1px auto; padding: 5px; direction: rtl; text-align: right;  
        <!-- متن -->
            background-color: #ffffff; border: 1px solid #89CFF0; border-radius: 12px; ">              
        <div style="flex: 1 1 calc(50% - 5px); max-width: 485px; min-width: 0; display: flex; flex-direction: column; align-items: center; padding: 1px;
        <!-- بخش متن (در دسکتاپ عرض بیشتر را می‌گیرد و در موبایل تمام‌عرض می‌شود) -->
                    border-radius: 15px; /* منحنی کردن گوشه‌های کادر تصویر بزرگ اول */">
        <div style="flex: 2 1 70%; min-width: 280px; padding: 5px;">
            <!-- نگهدارنده تصویر بزرگ جهت برش و هم‌ترازی با نسبت ۴:۳ -->
            <div style="font-size: 1em; line-height: 1.8; color: #2d3748;">
            <div style="width: 100%; aspect-ratio: 4/3; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 9px;">
متن مورد نظر
              <p>آقای شیری با ۲۰ سال تجربه در ساخت جلومبلی و میز عسلی، فعالیت خود را بر اساس نیازهای واقعی دکوراسیون داخلی شروع کرده است. این مجموعه روی طراحی و تولید میزهایی کار می‌کند که کنار مبلمان خانه و محل کار استفاده می‌شوند و هم زیبا هستند و هم کاربردی. هدف برند جلومبلی شیری این است که محصولاتی با کیفیت، بادوام و مناسب برای فضای داخلی ارائه کند. نیازهای واقعی دکوراسیون داخلی شروع کرده است. این مجموعه روی طراحی و تولید میزهایی کار می‌کند که کنار مبلمان خانه و محل کار استفاده می‌شوند و هم زیبا هستند و هم کاربردی. هدف برند جلومبلی شیری این است که محصولاتی با کیفیت، بادوام و مناسب برای فضای داخلی ارائه کند.</p>
             </div>
             </div>
         </div>
         </div>
         <!-- عکس بزرگ  -->
</div>       
         <div >
         <!-- بخش تصویر (در دسکتاپ عرض مشخص دارد و در موبایل وسط‌چین و متناسب می‌شود) -->
            <div >
         <div style="flex: 1 1 30%; max-width: 300px; text-align: center; margin: 0 auto;">
                [[تصویر:12.jpg|300 px|center]]
<html>
            </div>    
    <div style="border-radius: 15px; overflow: hidden;">
 
<!--https://dl.faraghaib.ir/m/103/gap.png                  نمونه آدرس دهی-->
<img src="آدرس عکس مورد نظر" style="width:300px;height:200px;">
 
    </div>
</html>
         </div>
         </div>
       
     </div>
     </div>
</div>
</div>
برگرفته از «https://fa.faraghaib.ir/wiki/الگو:کانتینر_متن_و_عکس»