فراغیب

الگو:کانتینر متن و عکس/بخشنده: تفاوت میان نسخه‌ها

→ تفاوت با ویرایش قدیمی‌ترتفاوت با ویرایش جدیدتر ←
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
خط ۱: خط ۱:
<html>
<html>


<!-- استایل کامل دکمه و چیدمان -->
<style>
    /* کانتینر اصلی داخلی: متن راست، دکمه چپ و پایین */
    .donation-row {
        display: flex;
        flex-wrap: nowrap;
        gap: 20px;
        align-items: stretch;
        justify-content: space-between;
        direction: rtl;
    }


    /* بخش متن */
<!-- بخش Hero -->
    .donation-text-box {
<section class="sajad-hero" style="
        flex: 1 1 auto;
  /* تنظیمات رنگ‌ها */
        min-width: 0;
  --hero-bg: #E5D5C0;
    }
  --hero-title: #100E47;
  --hero-text: #3E3A36;
  --hero-badge-bg: #100E47;
  --hero-btn-bg: #100E47;
">
  <div class="sajad-hero__container">


     /* بخش دکمه: سمت چپ و پایین */
     <!-- محتوای متنی -->
     .signup-box {
     <div class="sajad-hero__content">
        flex: 0 0 auto;
      <span class="sajad-hero__badge">کیفیت تضمینی، استایل ماندگار</span>
        display: flex;
      <h1 class="sajad-hero__title">با سجاد، بهترین‌ها را بپوشید</h1>
        align-items: flex-end;
      <p class="sajad-hero__description">
         justify-content: flex-start;
         ما در «پوشاک سجاد» با دقت فراوان، بهترین‌های بازار را برای شما گلچین کرده‌ایم. تجربه خریدی راحت، سریع و با کیفیت را همین حالا شروع کنید.
        direction: ltr;
      </p>
        padding-bottom: 5px;
      <a href="#" class="sajad-hero__button">مشاهده محصولات</a>
     }
     </div>


     /* دکمه شیشه‌ای، سه‌بعدی و همیشه دایره‌ای */
     <!-- تصاویر با چیدمان پله‌ای -->
     .glass-button {
    <div class="sajad-hero__media">
         width: clamp(72px, 8vw, 105px);
      <!-- عکس زیرین -->
         aspect-ratio: 1 / 1;
      <div class="sajad-hero__img sajad-hero__img--back">
         padding: 0;
        <img
         flex: 0 0 auto;
    src="https://dl.faraghaib.ir/m/109/109m08.jpg"
     alt="محصول پوشاک سجاد"
    style="
         width:100%;
        height:100%;
         object-fit:contain;
         object-position:center;
         display:block;
    ">
      </div>
      <!-- عکس رویی (کوچک‌تر شده) -->
      <div class="sajad-hero__img sajad-hero__img--front">
        <img src="https://dl.faraghaib.ir/m/101/m101shalvareslimfit1.jpg" alt="محصول مکمل سجاد">
      </div>
    </div>


        display: inline-flex;
  </div>
        align-items: center;
</section>
        justify-content: center;


        border: 1.5px solid rgba(255, 255, 255, 0.72);
<style>
        border-radius: 50%;
/* Reset & Container */
        outline: none;
.sajad-hero {
  background: var(--hero-bg);
  padding: 80px 20px;
  direction: rtl;
  overflow: hidden;
  font-family: sans-serif; /* فونت دلخواه را اینجا ست کن */
}


        /* رنگ صورتی پاستلی، هماهنگ با تصویر */
.sajad-hero__container {
        background: radial-gradient(
  max-width: 1100px;
            circle at 30% 25%,
  margin: 0 auto;
            rgba(255, 255, 255, 0.82) 0%,
  display: grid;
            rgba(255, 235, 241, 0.52) 34%,
  grid-template-columns: 1fr 1fr;
            rgba(244, 177, 194, 0.40) 100%
  align-items: center;
        );
  gap: 40px;
}


        /* حالت شیشه‌ای */
/* متن و تایپوگرافی */
        backdrop-filter: blur(10px) saturate(135%);
.sajad-hero__badge {
        -webkit-backdrop-filter: blur(10px) saturate(135%);
  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 {
        box-shadow:
  color: var(--hero-title);
            0 7px 16px rgba(181, 104, 128, 0.24),
  font-size: 3rem;
            0 2px 5px rgba(255, 255, 255, 0.66) inset,
  line-height: 1.2;
            0 -3px 6px rgba(161, 77, 103, 0.14) inset;
  margin-bottom: 20px;
}


        color: #704452;
.sajad-hero__description {
        font-family: Tahoma, Arial, sans-serif;
  color: var(--hero-text);
        font-size: clamp(0.68rem, 1.25vw, 0.9rem);
  font-size: 1.1rem;
        font-weight: 700;
  line-height: 1.8;
        line-height: 1;
  margin-bottom: 30px;
        white-space: nowrap;
}
        cursor: pointer;


        transition: transform 0.25s ease, box-shadow 0.25s ease,
.sajad-hero__button {
            background 0.25s ease;
  background: var(--hero-btn-bg);
    }
  color: #fff;
  padding: 15px 30px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
}


    .glass-button:hover {
/* بخش تصاویر - منطق جدید */
        transform: translateY(-3px) scale(1.03);
.sajad-hero__media {
        background: radial-gradient(
  position: relative;
            circle at 30% 25%,
  height: 500px; /* فضای کلی تصاویر */
            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 {
.sajad-hero__img {
        transform: translateY(1px) scale(0.96);
  position: absolute;
        box-shadow:
  border-radius: 20px;
            0 4px 10px rgba(181, 104, 128, 0.22),
  overflow: hidden;
            0 1px 3px rgba(255, 255, 255, 0.55) inset;
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
    }
  background: #eee;
}


    .glass-button:focus-visible {
.sajad-hero__img img {
        outline: 3px solid rgba(137, 207, 240, 0.75);
  width: 100%;
        outline-offset: 3px;
  height: 100%;
    }
  object-fit: cover;
}


    /* موبایل: متن و دکمه بدون خروج از کادر در یک ردیف می‌مانند */
/* عکس زیری */
    @media (max-width: 520px) {
.sajad-hero__img--back {
        .donation-row {
  width: 280px;
            gap: 10px;
  height: 400px;
        }
  left: 20px;
  top: 0;
  z-index: 1;
}


        .signup-box {
/* عکس رویی (کوچک و جدا شده) */
            padding-bottom: 0;
.sajad-hero__img--front {
        }
  width: 250px;
  height: 280px; /* ارتفاع کمتر برای عدم تداخل لبه پایین */
  left: 200px;  /* فاصله افقی از عکس زیری */
  top: 150px;  /* فاصله از بالا برای ایجاد اثر پله‌ای */
  z-index: 2;
  border: 4px solid #fff; /* برای تفکیک بهتر */
}


        .glass-button {
/* ریسپانسیو برای موبایل */
            width: 68px;
@media (max-width: 768px) {
            font-size: 0.66rem;
  .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>
</style>


<!-- کانتینر اصلی -->
<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>




</html>
</html>
برگرفته از «https://fa.faraghaib.ir/wiki/الگو:کانتینر_متن_و_عکس/بخشنده»