|
|
| (۲۹ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد) |
| خط ۱: |
خط ۱: |
| <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%);
| |
|
| |
|
| /* سایه و عمق سهبعدی */
| | <div style="margin: 15px auto; padding: 15px; direction: rtl; text-align: right; |
| box-shadow:
| | background-color: #ffffff; border: 1px solid #fff; border-radius: 12px; |
| 0 7px 16px rgba(181, 104, 128, 0.24),
| | box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); max-width: 1000px; box-sizing: border-box;"> |
| 0 2px 5px rgba(255, 255, 255, 0.66) inset, | | |
| 0 -3px 6px rgba(161, 77, 103, 0.14) inset; | | <!-- ایجاد چیدمان انعطافپذیر (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 #fff; 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;"> |
|
| |
|
| 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,
| | <h3 "> |
| background 0.25s ease;
| | [[الگو:فرم ثبت نام|تکمیل فرم]]، |
| }
| | اولین قدم برای دریافت مشاوره دقیقتر است. |
| | </h3> |
|
| |
|
| .glass-button:hover {
| | <span class="sajad-hero__badge> |
| transform: translateY(-3px) scale(1.03);
| | همراه مطمئن درمان ناباروری |
| background: radial-gradient(
| | </span> |
| 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 {
| | <h1 class="sajad-hero__title"> |
| transform: translateY(1px) scale(0.96);
| | خدمات ما به شما: |
| box-shadow:
| | </h1> |
| 0 4px 10px rgba(181, 104, 128, 0.22), | |
| 0 1px 3px rgba(255, 255, 255, 0.55) inset;
| |
| }
| |
|
| |
|
| .glass-button:focus-visible {
| | <ul class="sajad-hero__description"> |
| outline: 3px solid rgba(137, 207, 240, 0.75);
| |
| outline-offset: 3px;
| |
| }
| |
|
| |
|
| /* موبایل: متن و دکمه بدون خروج از کادر در یک ردیف میمانند */
| | <li> |
| @media (max-width: 520px) {
| | <strong>اهدای تخمک:</strong> |
| .donation-row {
| | شامل شرایط سنی، پزشکی و پرداخت مبالغ متفاوت بسته به شهر. |
| gap: 10px;
| | </li> |
| }
| |
|
| |
|
| .signup-box {
| | <li> |
| padding-bottom: 0;
| | <strong>رحم جایگزین:</strong> |
| }
| | شامل شرایط سنی، پزشکی، سابقه بارداری و هزینههای کلان. |
| | </li> |
|
| |
|
| .glass-button {
| | <li> |
| width: 68px;
| | <strong>اهدای جنین:</strong> |
| font-size: 0.66rem;
| | شرایط خاص برای زوجین اهداکننده اسپرم و تخمک. |
| }
| | </li> |
| }
| |
| </style> | |
|
| |
|
| <!-- کانتینر اصلی -->
| | </ul> |
| <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 style="border-radius: 15px; overflow: hidden;"> |
| | |
| | <!--https://dl.faraghaib.ir/m/103/gap.png نمونه آدرس دهی--> |
| | <img src="https://dl.faraghaib.ir/m/109/109m020.png" style="width:300px;height:200px;"> |
|
| |
|
| <!-- بخش دکمه؛ تراز شده در پایین و سمت چپ -->
| | </div> |
| | | </html> |
| <button type="button" class="glass-button">ثبتنام</button>
| |
| </div> | | </div> |
| | |
| </div> | | </div> |
| </div> | | </div> |
|
| |
|
| |
| </html>
| |
