پرش به محتوا

تست - فراغیب

از فراغیب
→ تفاوت با ویرایش قدیمی‌ترتفاوت با ویرایش جدیدتر ←
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
خط ۱: خط ۱:
 
<!DOCTYPE html>
<!-- html lang="fa" dir="rtl">
<html lang="fa" dir="rtl">
<head>
<head>
     <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>
     <title>مراقبت های دوران بارداری</title>
     <style>
     <style>
         /* تنظیمات پایه برای حذف فاصله‌های اضافی */
         :root {
        body, html {
             --cyan: #00bcd4;
             margin: 0;
             --orange: #e57373; /* رنگ تمایز گرم */
             padding: 0;
             --yellow: #fdd835;
             height: 100%;
             --bg-body: #fff5f5;
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
         }
         }


        /* بخش اصلی که پس‌زمینه در آن قرار دارد */
         .main-container {
         .background-container {
             display: grid;
             /* آدرس عکس خود را در قسمت url جایگزین کنید */
             grid-template-columns: 300px 1fr; /* ستون راست عکس، ستون چپ متن */
            background-image: url('https://dl.faraghaib.ir/m/104/m104denizdoor1.jpg');
             gap: 20px;
              
             background-color: #fff9f7;
            /* نکته اصلی اینجاست: این خط باعث ثابت ماندن عکس می‌شود */
             padding: 20px;
            background-attachment: fixed;
             border-radius: 20px;
           
             border: 1px solid #ffe0e0;
            /* تنظیمات برای اینکه عکس کل صفحه را پر کند و وسط باشد */
             max-width: 1000px;
             background-position: center;
             margin: 20px auto;
             background-repeat: no-repeat;
             font-family: Tahoma, Arial, sans-serif;
             background-size: cover;
              
            min-height: 100vh;
             display: flex;
             flex-direction: column;
             align-items: center;
             padding: 50px 20px;
         }
         }


         /* استایل کادر یا محتوایی که روی عکس قرار می‌گیرد */
         /* بخش 1: عکس سمت راست */
         .content-box {
         .img-section img {
             background-color: rgba(255, 255, 255, 0.85); /* رنگ سفید با کمی شفافیت */
             width: 100%;
             padding: 40px;
            height: 100%;
             object-fit: cover;
             border-radius: 15px;
             border-radius: 15px;
            max-width: 800px;
            width: 100%;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            line-height: 1.8;
            text-align: justify;
         }
         }


         h1 {
         /* بخش 2: عنوان و لینک های بالا */
             color: #fff;
        .top-info {
             text-align: center;
             display: flex;
        }
             flex-direction: column;
 
             gap: 15px;
        p {
            color: #fff;
             font-size: 1.1rem;
         }
         }
    </style>
         .breadcrumb { color: var(--cyan); font-size: 0.85rem; font-weight: bold; }
</head>
        .main-title { color: #333; font-size: 1.6rem; margin: 0; }
<body>
        .link-container { display: flex; align-items: center; gap: 10px; background: white; padding: 10px; border-radius: 30px; border: 1px solid #ddd; width: fit-content; }
 
        .description-text { line-height: 1.8; color: #555; }
   
         <div class="content-box">
          <div class="background-container">
            <h1>عنوان متن شما</h1>
            <p>
                این یک متن نمونه است. همانطور که می‌بینید، وقتی صفحه را به سمت پایین اسکرول می‌کنید،
                تصویر پس‌زمینه در جای خود ثابت می‌ماند و فقط این کادر سفید و متن‌های داخل آن حرکت می‌کنند.
            </p>
            <p>
                این تکنیک در طراحی وب بسیار محبوب است زیرا حس عمق (Parallax effect) ایجاد می‌کند
                و باعث می‌شود طراحی سایت شما حرفه‌ای‌تر به نظر برسد.
            </p>
            <!-- تکرار متن برای ایجاد اسکرول -->
         
           
</html -->


 
         /* بخش 3 و 4: پایین کانتینر */
<!DOCTYPE html>
         .bottom-section {
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>اسکرول متن روی پس‌زمینه ثابت</title>
    <style>
         /* استایل بدنه برای نمایش بهتر */
         body {
             display: flex;
             display: flex;
            justify-content: center;
             align-items: center;
             align-items: center;
             height: 100vh;
             gap: 15px;
             margin: 0;
             margin-top: 20px;
            background-color: #f0f0f0;
            font-family: Tahoma, Arial, sans-serif;
         }
         }
        .author-box { display: flex; align-items: center; gap: 10px; }
        .avatar { width: 50px; height: 50px; background: #ddd; border-radius: 50%; }
        .meta-items { display: flex; gap: 20px; color: #777; font-size: 0.9rem; }


         /* کادر اصلی */
         /* ریسپانسیو */
         .scroll-container {
         @media (max-width: 768px) {
            width: 400px;
             .main-container { grid-template-columns: 1fr; }
             height: 300px;
             .img-section { order: -1; } /* عکس به بالا می‌رود */
            border: 5px solid #333;
             .bottom-section { flex-direction: column; align-items: flex-start; }
            border-radius: 15px;
             overflow-y: auto; /* اجازه اسکرول عمودی */
            position: relative;
 
            /* تنظیمات تصویر پس‌زمینه */
            background-image: url('https://picsum.photos/800/600'); /* آدرس عکس خود را اینجا قرار دهید */
             background-size: cover;
            background-position: center;
           
            /* نکته اصلی اینجاست: این خط باعث می‌شود عکس ثابت بماند */
            background-attachment: fixed;
           
            /* برای خوانایی بهتر متن روی عکس، یک لایه نیمه‌شفاف اضافه می‌کنیم */
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
         }
         }
    </style>
</head>
<body>


        /* ایجاد یک لایه تیره روی عکس برای خوانایی متن (اختیاری) */
<section class="main-container">
        .scroll-container::before {
    <!-- بخش 1: تصویر -->
            content: "";
    <div class="img-section">
            position: absolute;
        <img src="path-to-image.jpg" alt="مراقبت های دوران بارداری">
            top: 0;
    </div>
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.4); /* رنگ سیاه با شفافیت ۴۰ درصد */
            z-index: 1;
        }


         /* استایل متن داخل کادر */
    <!-- بخش 2: عنوان و لینک ها -->
        .content {
    <div class="content-section">
             position: relative;
         <div class="top-info">
             z-index: 2; /* قرارگیری متن روی لایه تیره */
            <div class="breadcrumb">صفحه اصلی / زنان و مامایی</div>
            padding: 20px;
             <h1 class="main-title">راهنمای کامل مراقبت های دوران بارداری</h1>
            color: white;
             <div class="link-container">
             line-height: 1.8;
                <span>🔗</span>
             font-size: 18px;
                <input type="text" value="https://dl.faraghaib.ir/m/109/109m01.png" readonly style="border:none; background:transparent; width: 200px;">
             text-align: justify;
                <span>📋</span>
         }
             </div>
             <p class="description-text">
                مراقبت های دوران بارداری مجموعه‌ای از اقدامات پزشکی، تغذیه ای و سبک زندگی است که با هدف حفظ سلامت مادر و رشد طبیعی جنین انجام می شود. این مراقبت ها از ابتدای تشخیص بارداری آغاز شده و تا پس از زایمان ادامه دارد.
             </p>
         </div>


         /* زیباسازی نوار اسکرول (برای مرورگرهای Webkit) */
         <!-- بخش 3 و 4: پایین کانتینر -->
        .scroll-container::-webkit-scrollbar {
         <div class="bottom-section">
            width: 8px;
             <div class="author-box">
         }
                <div class="avatar"></div> <!-- اینجا آیکون یا عکس نویسنده -->
        .scroll-container::-webkit-scrollbar-thumb {
                <div>
             background: #888;
                    <strong>کلینیک باروری پویش</strong><br>
            border-radius: 10px;
                    <small>تیم تخصصی کلینیک پویش</small>
        }
                </div>
        .scroll-container::-webkit-scrollbar-thumb:hover {
            </div>
            background: #555;
        }
    </style>
</head>
<body>


    <div class="scroll-container">
            <div class="meta-items">
        <div class="content">
                <span>📅 تاریخ بازنویسی: ۶ مرداد ۱۴۰۵</span>
            <h2>متن اسکرول شونده</h2>
                <span>💬 بدون پاسخ</span>
            <p>این یک نمونه متن طولانی است تا بتوانید حالت اسکرول شدن را مشاهده کنید.</p>
                <span>📂 دسته بندی: زنان و مامایی</span>
            <p>همانطور که می‌بینید، متن‌ها به راحتی بالا و پایین می‌روند، اما تصویر پس‌زمینه در جای خود ثابت مانده است و حرکت نمی‌کند.</p>
             </div>
            <p>استفاده از <code>background-attachment: fixed;</code> کلید اصلی این افکت است.</p>
            <p>این تکنیک در طراحی‌های مدرن برای ایجاد عمق (Parallax Effect) بسیار کاربرد دارد.</p>
            <p>متن بیشتر برای تست اسکرول...</p>
            <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. همان لورم ایپسوم است.</p>
             <p>بخش انتهایی متن برای اطمینان از اسکرول کامل.</p>
            <p>تمام شد! امیدوارم این کد برای پروژه شما مفید باشد.</p>
         </div>
         </div>
     </div>
     </div>
</section>


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

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

<!DOCTYPE html> مراقبت های دوران بارداری

مراقبت های دوران بارداری
صفحه اصلی / زنان و مامایی

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

🔗 📋

مراقبت های دوران بارداری مجموعه‌ای از اقدامات پزشکی، تغذیه ای و سبک زندگی است که با هدف حفظ سلامت مادر و رشد طبیعی جنین انجام می شود. این مراقبت ها از ابتدای تشخیص بارداری آغاز شده و تا پس از زایمان ادامه دارد.

کلینیک باروری پویش
تیم تخصصی کلینیک پویش
📅 تاریخ بازنویسی: ۶ مرداد ۱۴۰۵ 💬 بدون پاسخ 📂 دسته بندی: زنان و مامایی

برگرفته از «https://fa.faraghaib.ir/w/index.php?title=تست&oldid=4796»