پرش به محتوا

کانتینر متن و عکس/بخشنده - فراغیب

از فراغیب
→ تفاوت با ویرایش قدیمی‌ترتفاوت با ویرایش جدیدتر ←
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
خط ۱: خط ۱:
<!-- کانتینر اصلی با طراحی ریسپانسیو و سایه ملایم -->
<html>
 
<!-- استایل کامل دکمه و چیدمان -->
<style>
    /* کانتینر اصلی داخلی: متن راست، دکمه چپ و پایین */
    .donation-row {
        display: flex;
        flex-wrap: nowrap;
        gap: 20px;
        align-items: stretch;
        justify-content: space-between;
        direction: rtl;
    }
 
    /* بخش متن */
    .donation-text-box {
        flex: 1 1 auto;
        min-width: 0;
    }
 
    /* بخش دکمه: سمت چپ و پایین */
    .signup-box {
        flex: 0 0 auto;
        display: flex;
        align-items: flex-end;
        justify-content: flex-start;
        direction: ltr;
        padding-bottom: 5px;
    }
 
    /* دکمه شیشه‌ای، سه‌بعدی و همیشه دایره‌ای */
    .glass-button {
        width: clamp(72px, 8vw, 105px);
        aspect-ratio: 1 / 1;
        padding: 0;
        flex: 0 0 auto;
 
        display: inline-flex;
        align-items: center;
        justify-content: center;
 
        border: 1.5px solid rgba(255, 255, 255, 0.72);
        border-radius: 50%;
        outline: none;
 
        /* رنگ صورتی پاستلی، هماهنگ با تصویر */
        background: radial-gradient(
            circle at 30% 25%,
            rgba(255, 255, 255, 0.82) 0%,
            rgba(255, 235, 241, 0.52) 34%,
            rgba(244, 177, 194, 0.40) 100%
        );
 
        /* حالت شیشه‌ای */
        backdrop-filter: blur(10px) saturate(135%);
        -webkit-backdrop-filter: blur(10px) saturate(135%);
 
        /* سایه و عمق سه‌بعدی */
        box-shadow:
            0 7px 16px rgba(181, 104, 128, 0.24),
            0 2px 5px rgba(255, 255, 255, 0.66) inset,
            0 -3px 6px rgba(161, 77, 103, 0.14) inset;
 
        color: #704452;
        font-family: Tahoma, Arial, sans-serif;
        font-size: clamp(0.68rem, 1.25vw, 0.9rem);
        font-weight: 700;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
 
        transition: transform 0.25s ease, box-shadow 0.25s ease,
            background 0.25s ease;
    }
 
    .glass-button:hover {
        transform: translateY(-3px) scale(1.03);
        background: radial-gradient(
            circle at 30% 25%,
            rgba(255, 255, 255, 0.92) 0%,
            rgba(255, 230, 238, 0.66) 35%,
            rgba(239, 157, 180, 0.52) 100%
        );
        box-shadow:
            0 11px 22px rgba(181, 104, 128, 0.32),
            0 2px 5px rgba(255, 255, 255, 0.76) inset,
            0 -3px 6px rgba(161, 77, 103, 0.14) inset;
    }
 
    .glass-button:active {
        transform: translateY(1px) scale(0.96);
        box-shadow:
            0 4px 10px rgba(181, 104, 128, 0.22),
            0 1px 3px rgba(255, 255, 255, 0.55) inset;
    }
 
    .glass-button:focus-visible {
        outline: 3px solid rgba(137, 207, 240, 0.75);
        outline-offset: 3px;
    }


<div style="margin: 15px auto; padding: 15px; direction: rtl; text-align: right;
    /* موبایل: متن و دکمه بدون خروج از کادر در یک ردیف می‌مانند */
            background-color: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px;
    @media (max-width: 520px) {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); max-width: 1000px; box-sizing: border-box;">
        .donation-row {
   
             gap: 10px;
    <!-- ایجاد چیدمان انعطاف‌پذیر (Flexbox) با قابلیت شکستن خط در موبایل -->
         }
    <div style="display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: center;">   
<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: 2 1 70%; min-width: 280px; padding: 5px;">
            <div style="font-size: 1em; line-height: 1.8; color: #2d3748;">
'''گروه اهدای مثبت بخشنده'''


مرجع معرفی متقاضیان خدمات درمان ناباروری در سراسر ایران با رعایت ضوابط قانونی.
        .signup-box {
            padding-bottom: 0;
        }


''خدمات:''
        .glass-button {
* '''اهدای تخمک'''
            width: 68px;
* '''رحم جایگزین'''
            font-size: 0.66rem;
* '''اهدای جنین'''
        }
    }
</style>


''همراهی در تمام مراحل:''
<!-- کانتینر اصلی -->
<div
    style="
        margin: 15px auto;
        padding: 15px;
        direction: rtl;
        text-align: right;
        background-color: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        max-width: 1000px;
        box-sizing: border-box;
    "
>
    <!-- یک ردیف: متن در راست / دکمه در گوشه پایین چپ -->
    <div class="donation-row">
        <!-- بخش متن -->
        <div
            class="donation-text-box"
            style="
                margin: 1px auto;
                padding: 5px;
                direction: rtl;
                text-align: right;
                background-color: #ffffff;
                border: 1px solid #89cff0;
                border-radius: 12px;
                box-sizing: border-box;
            "
        >
            <div
                style="
                    font-size: 1em;
                    line-height: 1.8;
                    color: #2d3748;
                "
            >
                <strong>گروه اهدای مثبت بخشنده</strong>
                <br /><br />


* '''مشاوره'''
                مرجع معرفی متقاضیان خدمات درمان ناباروری در سراسر ایران با رعایت
* '''آزمایش'''
                ضوابط قانونی.
* '''سونوگرافی'''
                <br /><br />
* '''قرارداد'''
* '''معرفی به مراکز درمانی'''


اگر شرایط '''اهدای تخمک''' یا '''رحم جایگزین''' را دارید، برای اطلاع از شرایط، زمان‌بندی و جزئیات پرداخت با '''گروه اهدای مثبت بخشنده''' در ارتباط باشید.
                <strong>خدمات:</strong>
                <ul style="margin: 6px 0; padding-right: 20px;">
                    <li><strong>اهدای تخمک</strong></li>
                    <li><strong>رحم جایگزین</strong></li>
                    <li><strong>اهدای جنین</strong></li>
                </ul>


اطلاعات کامل درباره خدمات '''اهدای تخمک، رحم جایگزین، اهدای جنین و درمان ناباروری''' با حفظ محرمانگی اطلاعات.
                <strong>همراهی در تمام مراحل:</strong>
                <ul style="margin: 6px 0; padding-right: 20px;">
                    <li><strong>مشاوره</strong></li>
                    <li><strong>آزمایش</strong></li>
                    <li><strong>سونوگرافی</strong></li>
                    <li><strong>قرارداد</strong></li>
                    <li><strong>معرفی به مراکز درمانی</strong></li>
                </ul>


                اگر شرایط <strong>اهدای تخمک</strong> یا
                <strong>رحم جایگزین</strong> را دارید، برای اطلاع از شرایط،
                زمان‌بندی و جزئیات پرداخت با
                <strong>گروه اهدای مثبت بخشنده</strong> در ارتباط باشید.
                <br /><br />
                اطلاعات کامل درباره خدمات <strong>اهدای تخمک</strong>،
                <strong>رحم جایگزین</strong>، <strong>اهدای جنین</strong> و
                <strong>درمان ناباروری</strong> با حفظ محرمانگی اطلاعات.
             </div>
             </div>
         </div>
         </div>
</div>       
        <!-- بخش تصویر (در دسکتاپ عرض مشخص دارد و در موبایل وسط‌چین و متناسب می‌شود) -->
        <div style="flex: 1 1 30%; max-width: 300px; text-align: center; margin: 0 auto;">
<html>
    <div class="button-container">
    <button class="glass-button">ثبت‌نام</button>
</div>


</html>
        <!-- بخش دکمه؛ تراز شده در پایین و سمت چپ -->
        <div class="signup-box">
            <button type="button" class="glass-button">ثبت‌نام</button>
         </div>
         </div>
       
     </div>
     </div>
</div>
</div>
</html>

نسخهٔ ‏۳ اوت ۲۰۲۶، ساعت ۰۵:۵۸

گروه اهدای مثبت بخشنده

مرجع معرفی متقاضیان خدمات درمان ناباروری در سراسر ایران با رعایت ضوابط قانونی.

خدمات:
  • اهدای تخمک
  • رحم جایگزین
  • اهدای جنین
همراهی در تمام مراحل:
  • مشاوره
  • آزمایش
  • سونوگرافی
  • قرارداد
  • معرفی به مراکز درمانی
اگر شرایط اهدای تخمک یا رحم جایگزین را دارید، برای اطلاع از شرایط، زمان‌بندی و جزئیات پرداخت با گروه اهدای مثبت بخشنده در ارتباط باشید.

اطلاعات کامل درباره خدمات اهدای تخمک، رحم جایگزین، اهدای جنین و درمان ناباروری با حفظ محرمانگی اطلاعات.

برگرفته از «https://fa.faraghaib.ir/w/index.php?title=الگو:کانتینر_متن_و_عکس/بخشنده&oldid=4824»