پرش به محتوا

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

از فراغیب
→ تفاوت با ویرایش قدیمی‌تر
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
 
(۸ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد)
خط ۱: خط ۱:
<html>
<!-- کانتینر اصلی با طراحی ریسپانسیو و سایه ملایم -->
 
 
<!-- بخش Hero -->
<section class="sajad-hero" style="
  /* تنظیمات رنگ‌ها */
  --hero-bg: #FFFFF;
  --hero-title: #100E47;
  --hero-text: #3E3A36;
  --hero-badge-bg: #FFB6C1;
  --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><strong>اهدای تخمک:</strong> شامل شرایط سنی، پزشکی و پرداخت مبالغ متفاوت بسته به شهر.</li>
 
<li><strong>رحم جایگزین:</strong> شامل شرایط سنی، پزشکی، سابقه بارداری و هزینه‌های کلان.</li>
 
<li><strong>اهدای جنین:</strong> شرایط خاص برای زوجین اهداکننده اسپرم و تخمک.</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: iransans; /* فونت دلخواه را اینجا ست کن */
}


.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: #000;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 1.1rem;
  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: 350px;
  height: 600px;
left: 20px;
  top: 0;
  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>

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



تکمیل فرم، اولین قدم برای دریافت مشاوره دقیق‌تر است.

همراه مطمئن درمان ناباروری

خدمات ما به شما:

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



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