پرش به محتوا

کانتینر نامنظم - فراغیب

از فراغیب
→ تفاوت با ویرایش قدیمی‌ترتفاوت با ویرایش جدیدتر ←
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
برچسب: برگردانده‌شده
خط ۴: خط ۴:
     <meta charset="UTF-8">
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>اهدای تخمک، اهدای جنین و رحم جایگزین</title>
    <meta name="description"
        content="آشنایی با اهدای تخمک، اهدای جنین و رحم جایگزین، مراحل درمان، مراقبت‌های پزشکی و مشاوره تخصصی ناباروری.">
    <meta name="keywords"
        content="اهدای تخمک, اهدای جنین, رحم جایگزین, رحم اجاره ای, درمان ناباروری, IVF, انتقال جنین">
     <style>
     <style>
         * { box-sizing: border-box; margin: 0; padding: 0; }
        :root {
          
            --page-bg: #f4f6f8;
         .gallery-wrapper {
            --card-bg: #ffffff;
            --dark: #20252b;
            --muted: #707983;
            --pink: #e879a8;
            --pink-light: #fff0f6;
            --blue: #7ba7d9;
            --green: #9ebfae;
            --yellow: #ead38b;
            --purple: #b29ccf;
            --radius-large: 28px;
            --radius-medium: 20px;
            --shadow: 0 12px 35px rgba(32, 37, 43, 0.08);
            --font: Tahoma, Arial, sans-serif;
        }
 
         * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
 
         html {
            scroll-behavior: smooth;
        }
 
        body {
            min-height: 100vh;
            background: var(--page-bg);
            color: var(--dark);
            font-family: var(--font);
            line-height: 1.8;
            padding: 28px;
        }
 
         .page-wrapper {
            width: min(1180px, 100%);
            margin: 0 auto;
        }
 
        /* هدر کوچک صفحه */
        .page-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 20px;
            margin-bottom: 24px;
        }
 
        .page-header h1 {
            font-size: clamp(1.2rem, 2.3vw, 2rem);
            font-weight: 800;
        }
 
        .page-header p {
            color: var(--muted);
            font-size: 0.85rem;
            max-width: 500px;
        }
 
        /*
          ساختار اصلی:
          12 ستون برای کنترل دقیق اندازه و جای کارت‌ها
        */
        .bento-layout {
             display: grid;
             display: grid;
             grid-template-columns: repeat(3, 1fr);
             grid-template-columns: repeat(12, minmax(0, 1fr));
             grid-auto-rows: 200px;
             grid-template-rows: repeat(12, 64px);
             gap: 10px;
             gap: 18px;
             padding: 10px;
            direction: ltr;
             max-width: 1200px;
        }
             margin: auto;
 
        .service-card {
            direction: rtl;
            min-width: 0;
            min-height: 0;
             padding: 12px;
            background: var(--card-bg);
            border-radius: var(--radius-large);
            box-shadow: var(--shadow);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            transition:
                transform 0.3s ease,
                box-shadow 0.3s ease;
        }
 
        .service-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 42px rgba(32, 37, 43, 0.14);
        }
 
        /*
          جایگذاری نامنظم کارت‌ها
          کارت‌ها عمداً اندازه یکسان ندارند.
        */
 
        .card-egg {
            grid-column: 1 / 5;
            grid-row: 1 / 7;
            transform: rotate(-1deg);
        }
 
        .card-embryo {
            grid-column: 5 / 10;
            grid-row: 1 / 6;
            transform: rotate(1deg);
        }
 
        .card-surrogacy {
            grid-column: 10 / 13;
            grid-row: 1 / 8;
            transform: rotate(-1.5deg);
        }
 
        .card-medical {
            grid-column: 1 / 4;
            grid-row: 7 / 11;
            transform: rotate(1.2deg);
        }
 
        .card-legal {
            grid-column: 4 / 8;
            grid-row: 6 / 12;
            transform: rotate(-0.8deg);
        }
 
        .card-care {
             grid-column: 8 / 11;
            grid-row: 6 / 10;
            transform: rotate(1.5deg);
        }
 
        .card-consultation {
            grid-column: 11 / 13;
            grid-row: 8 / 13;
            transform: rotate(-1deg);
        }
 
        .card-success {
            grid-column: 1 / 4;
            grid-row: 11 / 13;
            transform: rotate(-1.5deg);
        }
 
        .card-info-wide {
            grid-column: 8 / 11;
            grid-row: 10 / 13;
             transform: rotate(-1deg);
         }
         }


         .gallery-item {
        /* بخش بزرگ تصویر داخل هر کارت */
         .card-visual {
             position: relative;
             position: relative;
            flex: 1 1 auto;
            min-height: 0;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
             overflow: hidden;
             overflow: hidden;
             border-radius: 25px 0 25px 0;
             border-radius: var(--radius-medium);
             cursor: pointer;
             margin-bottom: 10px;
            padding: 10px;
            background: #f8fafb;
         }
         }


        /* فیت شدن تصویر در هر اندازه ای */
         .card-visual img {
         .gallery-item img {
            display: block;
             width: 100%;
             width: 100%;
             height: 100%;
             height: 100%;
             object-fit: cover;  
            min-width: 0;
             display: block;
            min-height: 0;
 
            /*
              تصویر کامل نمایش داده می‌شود.
              contain باعث می‌شود هیچ بخشی از تصویر بریده نشود.
            */
             object-fit: contain;
            object-position: center;
        }
 
        /* کادر کوچک توضیحات در پایین */
        .card-caption {
            flex: 0 0 auto;
            min-height: 82px;
            padding: 11px 14px;
            border-radius: var(--radius-medium);
            background: #ffffff;
             border: 1px solid #edf0f2;
         }
         }


         /* افکت باز شدن از وسط به طرفین */
         .card-caption h2,
         .overlay {
         .card-caption h3 {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: rgba(0, 0, 0, 0.6);
             display: flex;
             display: flex;
            justify-content: center;
             align-items: center;
             align-items: center;
             color: #fff;
             gap: 7px;
             font-weight: bold;
             margin-bottom: 3px;
              
             color: var(--dark);
            /* شروع: لایه از وسط جمع شده */
             font-size: clamp(0.82rem, 1.2vw, 1.05rem);
             clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%);
             line-height: 1.6;
             transition: clip-path 0.5s ease-out;
         }
         }


         /* زمان هاور: باز شدن به طرفین */
         .card-caption h2::before,
         .gallery-item:hover .overlay {
         .card-caption h3::before {
             clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
             content: "";
            width: 8px;
            height: 8px;
            flex: 0 0 8px;
            border-radius: 50%;
            background: var(--pink);
         }
         }


         .wide { grid-column: span 2; }
         .card-caption p {
            color: var(--mut: var(--muted);
            font-size: clamp(0.68rem,vw, 0.84rem);
            line-height: 1.75;
        }


         /* حفظ چیدمان در موبایل */
        .keyword {
         @media (max-width: 480px) {
            display: flex;
             .gallery-wrapper { grid-auto-rows: 120px; }
            flex-wrap: wrap;
            gap: 4px;
            margin-top: 5px;
        }
 
        .keyword span {
            padding: 1px 7px;
            border-radius: 20px;
            background: var(--pink-light);
            color: #c55884;
            font-size: 0.64rem;
            white-space: nowrap;
        }
 
        /* رنگ‌بندی تصویری کارت‌ها */
        .card-egg .card-visual {
            background: #fff0f5;
        }
 
        .card-embryo .card-visual {
            background: #eef6ff;
        }
 
        .card-surrogacy .card-visual {
            background: #f2f8f3;
        }
 
        .card-medical .card-visual {
            background: #fff9e9;
        }
 
        .card-legal .card-visual {
            background: #f7f0ff;
        }
 
        .card-care .card-visual {
            background: #edf8fa;
        }
 
        .card-consultation .card-visual {
            background: #fff1ec;
        }
 
        .card-success .card-visual {
            background: #f1f6ed;
        }
 
        .card-info-wide .card-visual {
            background: #f2f1fa;
        }
 
        /*
          اگر تصویر خیلی عریض یا خیلی بلند باشد،
          همچنان کامل داخل محدوده کارت قرار می‌گیرد.
        */
        .card-visual img[src=""] {
            display: none;
        }
 
        /* تبلت */
        @media (max-width: 900px) {
            body {
                padding: 20px;
            }
 
            .bento-layout {
                grid-template-columns: repeat(6, minmax(0, 1fr));
                grid-template-rows: repeat(18, 55px);
                gap: 14px;
            }
 
            .card-egg {
                grid-column: 1 / 4;
                grid-row: 1 / 7;
            }
 
            .card-embryo {
                grid-column: 4 / 7;
                grid-row: 1 / 6;
            }
 
            .card-surrogacy {
                grid-column: 1 / 3;
                grid-row: 7 / 13;
            }
 
            .card-medical {
                grid-column: 3 / 5;
                grid-row: 6 / 11;
            }
 
            .card-legal {
                grid-column: 5 / 7;
                grid-row: 6 / 12;
            }
 
            .card-care {
                grid-column: 1 / 4;
                grid-row: 13 / 18;
            }
 
            .card-consultation {
                grid-column: 4 / 7;
                grid-row: 12 / 18;
            }
 
            .card-success {
                grid-column: 1 / 3;
                grid-row: 18 / 20;
            }
 
            .card-info-wide {
                grid-column: 3 / 7;
                grid-row: 18 / 20;
            }
        }
 
         /* موبایل */
         @media (max-width: 600px) {
            body {
                padding: 12px;
            }
 
             .page-header {
                display: block;
                margin-bottom: 16px;
            }
 
            .page-header p {
                margin-top: 5px;
            }
 
            .bento-layout {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                grid-auto-rows: 210px;
                gap: 12px;
            }
 
            .service-card {
                padding: 8px;
                border-radius: 20px;
            }
 
            .card-egg {
                grid-column: 1 / 2;
                grid-row: span 2;
            }
 
            .card-embryo {
                grid-column: 2 / 3;
                grid-row: span 2;
            }
 
            .card-surrogacy {
                grid-column: 1 / 3;
                grid-row: span 2;
            }
 
            .card-medical {
                grid-column: 1 / 2;
                grid-row: span 2;
            }
 
            .card-legal {
                grid-column: 2 / 3;
                grid-row: span 2;
            }
 
            .card-care {
                grid-column: 1 / 3;
                grid-row: span 2;
            }
 
            .card-consultation {
                grid-column: 1 / 2;
                grid-row: span 2;
            }
 
            .card-success {
                grid-column: 2 / 3;
                grid-row: span 2;
            }
 
            .card-info-wide {
                grid-column: 1 / 3;
                grid-row: span 2;
            }
 
            .card-caption {
                min-height: 72px;
                padding: 8px 10px;
            }
 
            .card-caption p {
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }
 
            .keyword {
                display: none;
            }
         }
         }
     </style>
     </style>
</head>
</head>
<body>
<body>


     <div class="gallery-wrapper">
     <main class="page-wrapper">
         <div class="gallery-item wide"><img src="image1.jpg" alt="شهربازی"><div class="overlay">شهربازی</div></div>
 
        <div class="gallery-item"><img src="image2.jpg" alt="استخر"><div class="overlay">استخر و سونا</div></div>
         <header class="page-header">
        <div class="gallery-item"><img src="image3.jpg" alt="رستوران"><div class="overlay">رستوران</div></div>
            <div>
        <div class="gallery-item wide"><img src="image4.jpg" alt="منو ویژه"><div class="overlay">منو ویژه</div></div>
                <h1>اهدای تخمک، اهدای جنین و رحم جایگزین</h1>
        <div class="gallery-item"><img src="image5.jpg" alt="فروشگاه"><div class="overlay">فروشگاه</div></div>
                <p>
        <div class="gallery-item wide"><img src="image6.jpg" alt="پارک آبی"><div class="overlay">پارک آبی</div></div>
                    اطلاعات کاربردی درباره روش‌های کمک‌باروری، بررسی‌های پزشکی
     </div>
                    و مراقبت‌های تخصصی درمان ناباروری
                </p>
            </div>
        </header>
 
        <section class="bento-layout" aria-label="خدمات اهدای تخمک، اهدای جنین و رحم جایگزین">
 
            <!-- کارت اهدای تخمک -->
            <article class="service-card card-egg">
                <figure class="card-visual">
                    <img
                        src="images/egg-donation.jpg"
                        alt="اهدای تخمک و بررسی سلامت اهداکننده"
                        loading="lazy">
                </figure>
 
                <div class="card-caption">
                    <h2>اهدای تخمک</h2>
                    <p>
                        انتخاب اهداکننده مناسب پس از ارزیابی پزشکی، آزمایش‌های هورمونی
                        و بررسی سلامت عمومی.
                    </p>
                    <div class="keyword">
                        <span>اهدای تخمک</span>
                        <span>تخمک اهدایی</span>
                    </div>
                </div>
            </article>
 
            <!-- کارت اهدای جنین -->
            <article class="service-card card-embryo">
                <figure class="card-visual">
                    <img
                        src="images/embryo-donation.jpg"
                        alt="اهدای جنین و انتقال جنین به رحم"
                        loading="lazy">
                </figure>
 
                <div class="card-caption">
                    <h2>اهدای جنین</h2>
                    <p>
                        آشنایی با روند دریافت، آماده‌سازی و انتقال جنین اهدایی
                        تحت نظر متخصص ناباروری.
                    </p>
                    <div class="keyword">
                        <span>اهدای جنین</span>
                        <span>انتقال جنین</span>
                    </div>
                </div>
            </article>
 
            <!-- کارت رحم جایگزین -->
            <article class="service-card card-surrogacy">
                <figure class="card-visual">
                    <img
                        src="images/surrogacy.jpg"
                        alt="رحم جایگزین و مراقبت از بارداری"
                        loading="lazy">
                </figure>
 
                <div class="card-caption">
                    <h2>رحم جایگزین</h2>
                    <p>
                        استفاده از ظرفیت رحم جایگزین برای حمل جنین و پیگیری مراقبت‌های
                        پزشکی در طول بارداری.
                    </p>
                    <div class="keyword">
                        <span>رحم جایگزین</span>
                        <span>رحم اجاره‌ای</span>
                    </div>
                </div>
            </article>
 
            <!-- کارت ارزیابی پزشکی -->
            <article class="service-card card-medical">
                <figure class="card-visual">
                    <img
                        src="images/medical-checkup.jpg"
                        alt="ارزیابی پزشکی در درمان ناباروری"
                        loading="lazy">
                </figure>
 
                <div class="card-caption">
                    <h3>ارزیابی پزشکی</h3>
                    <p>
                        انجام آزمایش‌ها و بررسی‌های لازم پیش از شروع درمان.
                    </p>
                    <div class="keyword">
                        <span>آزمایش ناباروری</span>
                    </div>
                </div>
            </article>
 
            <!-- کارت مشاوره حقوقی -->
            <article class="service-card card-legal">
                <figure class="card-visual">
                    <img
                        src="images/legal-consultation.jpg"
                        alt="مشاوره حقوقی اهدای جنین و رحم جایگزین"
                        loading="lazy">
                </figure>
 
                <div class="card-caption">
                    <h3>مشاوره حقوقی</h3>
                    <p>
                        بررسی جنبه‌های حقوقی، رضایت‌نامه‌ها و قراردادهای مرتبط
                        با درمان کمک‌باروری.
                    </p>
                    <div class="keyword">
                        <span>قرارداد رحم جایگزین</span>
                    </div>
                </div>
            </article>
 
            <!-- کارت مراقبت بارداری -->
            <article class="service-card card-care">
                <figure class="card-visual">
                    <img
                        src="images/pregnancy-care.jpg"
                        alt="مراقبت‌های دوران بارداری"
                        loading="lazy">
                </figure>
 
                <div class="card-caption">
                    <h3>مراقبت‌های بارداری</h3>
                    <p>
                        پیگیری سلامت مادر و جنین با ویزیت‌های منظم و سونوگرافی.
                    </p>
                    <div class="keyword">
                        <span>مراقبت بارداری</span>
                        <span>سلامت جنین</span>
                    </div>
                </div>
            </article>
 
            <!-- کارت مشاوره تخصصی -->
            <article class="service-card card-consultation">
                <figure class="card-visual">
                    <img
                        src="images/consultation.jpg"
                        alt="مشاوره تخصصی درمان ناباروری"
                        loading="lazy">
                </figure>
 
                <div class="card-caption">
                    <h3>مشاوره تخصصی</h3>
                    <p>
                        دریافت راهنمایی از تیم درمان برای انتخاب روش مناسب.
                    </p>
                    <div class="keyword">
                        <span>مشاوره ناباروری</span>
                    </div>
                </div>
            </article>
 
            <!-- کارت موفقیت درمان -->
            <article class="service-card card-success">
                <figure class="card-visual">
                    <img
                        src="images/success.jpg"
                        alt="موفقیت در درمان ناباروری"
                        loading="lazy">
                </figure>
 
                <div class="card-caption">
                    <h3>مسیر درمان</h3>
                    <p>
                        برنامه‌ریزی مرحله‌به‌مرحله برای درمان ایمن و آگاهانه.
                    </p>
                </div>
            </article>
 
            <!-- کارت اطلاعات تکمیلی -->
            <article class="service-card card-info-wide">
                <figure class="card-visual">
                    <img
                        src="images/fertility-info.jpg"
                        alt="اطلاعات روش‌های کمک‌باروری"
                        loading="lazy">
                </figure>
 
                <div class="card-caption">
                    <h3>روش‌های کمک‌باروری</h3>
                    <p>
                        مقایسه اهدای تخمک، اهدای جنین و رحم جایگزین با توجه
                        به شرایط پزشکی هر فرد.
                    </p>
                    <div class="keyword">
                        <span>درمان ناباروری</span>
                        <span>روش کمک‌باروری</span>
                    </div>
                </div>
            </article>
 
        </section>
     </main>


</body>
</body>
</html>
</html>

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

اهدای تخمک، اهدای جنین و رحم جایگزین

اهدای تخمک، اهدای جنین و رحم جایگزین

اطلاعات کاربردی درباره روش‌های کمک‌باروری، بررسی‌های پزشکی و مراقبت‌های تخصصی درمان ناباروری

اهدای تخمک و بررسی سلامت اهداکننده

اهدای تخمک

انتخاب اهداکننده مناسب پس از ارزیابی پزشکی، آزمایش‌های هورمونی و بررسی سلامت عمومی.

اهدای تخمک تخمک اهدایی
اهدای جنین و انتقال جنین به رحم

اهدای جنین

آشنایی با روند دریافت، آماده‌سازی و انتقال جنین اهدایی تحت نظر متخصص ناباروری.

اهدای جنین انتقال جنین
رحم جایگزین و مراقبت از بارداری

رحم جایگزین

استفاده از ظرفیت رحم جایگزین برای حمل جنین و پیگیری مراقبت‌های پزشکی در طول بارداری.

رحم جایگزین رحم اجاره‌ای
ارزیابی پزشکی در درمان ناباروری

ارزیابی پزشکی

انجام آزمایش‌ها و بررسی‌های لازم پیش از شروع درمان.

آزمایش ناباروری
مشاوره حقوقی اهدای جنین و رحم جایگزین

مشاوره حقوقی

بررسی جنبه‌های حقوقی، رضایت‌نامه‌ها و قراردادهای مرتبط با درمان کمک‌باروری.

قرارداد رحم جایگزین
مراقبت‌های دوران بارداری

مراقبت‌های بارداری

پیگیری سلامت مادر و جنین با ویزیت‌های منظم و سونوگرافی.

مراقبت بارداری سلامت جنین
مشاوره تخصصی درمان ناباروری

مشاوره تخصصی

دریافت راهنمایی از تیم درمان برای انتخاب روش مناسب.

مشاوره ناباروری
موفقیت در درمان ناباروری

مسیر درمان

برنامه‌ریزی مرحله‌به‌مرحله برای درمان ایمن و آگاهانه.

اطلاعات روش‌های کمک‌باروری

روش‌های کمک‌باروری

مقایسه اهدای تخمک، اهدای جنین و رحم جایگزین با توجه به شرایط پزشکی هر فرد.

درمان ناباروری روش کمک‌باروری

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