|
|
| (۱۳ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد) |
| خط ۱: |
خط ۱: |
| <html>
| | <!-- کانتینر اصلی با طراحی ریسپانسیو و سایه ملایم --> |
| | |
| | |
| <!-- بخش Hero --> | |
| <section class="sajad-hero" style="
| |
| /* تنظیمات رنگها */
| |
| --hero-bg: #FFFFF;
| |
| --hero-title: #100E47;
| |
| --hero-text: #3E3A36;
| |
| --hero-badge-bg: #100E47;
| |
| --hero-btn-bg: #100E47;
| |
| ">
| |
| <div class="sajad-hero__container">
| |
|
| |
|
| <!-- محتوای متنی -->
| | <div style="margin: 15px auto; padding: 15px; direction: rtl; text-align: right; |
| <div class=" sajad- hero__content"> | | background-color: #ffffff; border: 1px solid #fff; border-radius: 12px; |
| <span class="sajad-hero__badge">همراه مطمئن درمان ناباروری</span>
| | box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); max-width: 1000px; box-sizing: border-box;"> |
| <h1 class="sajad-hero__title">خدمات ما به شما:</h1>
| |
| <p class="sajad-hero__description">
| |
| <ul style="font-family:iransans;">
| |
| | |
| <li>اهدای تخمک: شامل شرایط سنی، پزشکی و پرداخت مبالغ متفاوت بسته به شهر.</li>
| |
| | |
| <li>رحم جایگزین: شامل شرایط سنی، پزشکی، سابقه بارداری و هزینههای کلان.</li>
| |
| | |
| <li>اهدای جنین: شرایط خاص برای زوجین اهداکننده اسپرم و تخمک.</li>
| |
| | |
| </ul>
| |
| </p>
| |
| | | |
| </div> | | <!-- ایجاد چیدمان انعطافپذیر (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;"> |
|
| |
|
| <!-- تصاویر با چیدمان پلهای -->
| |
| <div class="sajad-hero__media">
| |
| <!-- عکس زیرین -->
| |
| <div class="sajad-hero__img sajad-hero__img--back">
| |
| <img
| |
| src="https://dl.faraghaib.ir/m/109/109m020.png"
| |
| alt="محصول پوشاک سجاد"
| |
| style="
| |
| width:100%;
| |
| display:flex;
| |
| align-items:center;
| |
| justify-content:center;
| |
| overflow:hidden;
| |
| ">
| |
| </div>
| |
| <!-- عکس رویی (کوچکتر شده) -->
| |
| <!--div class="sajad-hero__img sajad-hero__img--back">
| |
| <img src="https://dl.faraghaib.ir/m/109/109m019.jpg" alt="محصول مکمل سجاد">
| |
| </div-->
| |
| </div>
| |
|
| |
|
| </div>
| | <h3 "> |
| </section> | | [[الگو:فرم ثبت نام|تکمیل فرم]]، |
| | اولین قدم برای دریافت مشاوره دقیقتر است. |
| | </h3> |
|
| |
|
| <style> | | <span class="sajad-hero__badge> |
| /* Reset & Container */
| | همراه مطمئن درمان ناباروری |
| .sajad-hero {
| | </span> |
| background: var(--hero-bg);
| |
| padding: 80px 20px;
| |
| direction: rtl;
| |
| overflow: hidden;
| |
| font-family: sans-serif; /* فونت دلخواه را اینجا ست کن */
| |
| }
| |
|
| |
|
| .sajad-hero__container {
| | <h1 class="sajad-hero__title"> |
| max-width: 1100px;
| | خدمات ما به شما: |
| margin: 0 auto;
| | </h1> |
| display: grid;
| |
| grid-template-columns: 1fr 1fr;
| |
| align-items: center;
| |
| gap: 40px;
| |
| }
| |
|
| |
|
| /* متن و تایپوگرافی */
| | <ul class="sajad-hero__description"> |
| .sajad-hero__badge {
| |
| display: inline-block;
| |
| background: var(--hero-badge-bg);
| |
| color: #fff;
| |
| padding: 8px 16px;
| |
| border-radius: 8px;
| |
| font-size: 0.9rem;
| |
| margin-bottom: 20px;
| |
| }
| |
|
| |
|
| .sajad-hero__title {
| | <li> |
| color: var(--hero-title);
| | <strong>اهدای تخمک:</strong> |
| font-size: 3rem;
| | شامل شرایط سنی، پزشکی و پرداخت مبالغ متفاوت بسته به شهر. |
| line-height: 1.2;
| | </li> |
| margin-bottom: 20px;
| |
| }
| |
|
| |
|
| .sajad-hero__description {
| | <li> |
| color: var(--hero-text);
| | <strong>رحم جایگزین:</strong> |
| font-size: 1.1rem;
| | شامل شرایط سنی، پزشکی، سابقه بارداری و هزینههای کلان. |
| line-height: 1.8;
| | </li> |
| margin-bottom: 30px;
| |
| }
| |
|
| |
|
| .sajad-hero__button {
| | <li> |
| background: var(--hero-btn-bg);
| | <strong>اهدای جنین:</strong> |
| color: #fff;
| | شرایط خاص برای زوجین اهداکننده اسپرم و تخمک. |
| padding: 15px 30px;
| | </li> |
| border-radius: 50px;
| |
| text-decoration: none;
| |
| font-weight: bold;
| |
| display: inline-block;
| |
| }
| |
|
| |
|
| /* بخش تصاویر - منطق جدید */ | | </ul> |
| .sajad-hero__media {
| |
| position: relative;
| |
| height: 500px; /* فضای کلی تصاویر */
| |
| }
| |
|
| |
|
| .sajad-hero__img {
| |
| width:100%;
| |
| display:flex;
| |
| align-items:center;
| |
| justify-content:center;
| |
| overflow:hidden;
| |
| }
| |
|
| |
|
| .sajad-hero__img img {
| |
| display:block;
| |
| width:100%;
| |
| height:auto;
| |
| max-width:100%;
| |
| object-fit:contain;
| |
| }
| |
|
| |
|
| /* عکس زیری */
| |
| .sajad-hero__img--back {
| |
| width: 300px;
| |
| height: 520px;
| |
| z-index: 5;
| |
| }
| |
|
| |
|
| /* عکس رویی (کوچک و جدا شده) */
| |
| .sajad-hero__img--front {
| |
| width: 250px;
| |
| height: 450px; /* ارتفاع کمتر برای عدم تداخل لبه پایین */
| |
| left: 200px; /* فاصله افقی از عکس زیری */
| |
| top: 150px; /* فاصله از بالا برای ایجاد اثر پلهای */
| |
| z-index: 2;
| |
| border: 4px solid #fff; /* برای تفکیک بهتر */
| |
| }
| |
|
| |
| /* ریسپانسیو برای موبایل */
| |
| @media (max-width: 768px) {
| |
| .sajad-hero__container {
| |
| grid-template-columns: 1fr;
| |
| text-align: center;
| |
| }
| |
| .sajad-hero__media {
| |
| height: 350px;
| |
| margin-top: 50px;
| |
| }
| |
| .sajad-hero__img--back {
| |
| width: 200px;
| |
| height: 280px;
| |
| left: 10%;
| |
| }
| |
| .sajad-hero__img--front {
| |
| width: 180px;
| |
| height: 200px;
| |
| left: 45%;
| |
| top: 100px;
| |
| }
| |
| }
| |
| </style>
| |
|
| |
|
| | </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> | | </html> |
| | </div> |
| | |
| | </div> |
| | </div> |