فراغیب

تست۶: تفاوت میان نسخه‌ها

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


</style>
</style>
<style>
/* =========================================================
  ACCESSIBLE LARGE TYPE + RESPONSIVE HERO SLIDER OVERRIDES
========================================================= */
.positive-donation-page{font-size:18px;line-height:2;}
.positive-donation-page .pd-title h2{font-size:1.75rem;}
.positive-donation-page .pd-title span{font-size:1rem;padding:7px 17px;}
.positive-donation-page .pd-title p{font-size:1rem;}
.positive-donation-page .pd-brand-text strong{font-size:1.08rem;}
.positive-donation-page .pd-brand-text small{font-size:.86rem;}
.positive-donation-page .pd-quick-card strong{font-size:1rem;}
.positive-donation-page .pd-quick-card small{font-size:.86rem;}
.positive-donation-page .pd-start h2{font-size:1.5rem;}
.positive-donation-page .pd-start p{font-size:1rem;}
.positive-donation-page .pd-start-option{font-size:.95rem;}
.positive-donation-page .pd-donation-card h3{font-size:1.3rem;}
.positive-donation-page .pd-donation-card p{font-size:.95rem;}
.positive-donation-page .pd-donation-actions a{font-size:.82rem;padding:8px 12px;}
.positive-donation-page .pd-choice-card h3{font-size:1.3rem;}
.positive-donation-page .pd-choice-card p{font-size:.95rem;}
.positive-donation-page .pd-choice-card a{font-size:.82rem;}
.positive-donation-page .pd-image-slide{height:230px;}
.positive-donation-page .pd-image-slide span{font-size:1rem;}
.positive-donation-page .pd-benefit strong{font-size:.95rem;}
.positive-donation-page .pd-benefit small{font-size:.82rem;}
.positive-donation-page .pd-step strong{font-size:.95rem;}
.positive-donation-page .pd-step small{font-size:.82rem;}
.positive-donation-page .pd-article-image{height:230px;}
.positive-donation-page .pd-article-body small{font-size:.8rem;}
.positive-donation-page .pd-article-body h3{font-size:1.08rem;}
.positive-donation-page .pd-article-body p{font-size:.88rem;}
.positive-donation-page .pd-faq summary{font-size:.95rem;}
.positive-donation-page .pd-faq p{font-size:.88rem;}
.positive-donation-page .pd-cta h2{font-size:1.55rem;}
.positive-donation-page .pd-cta p{font-size:.95rem;}
.positive-donation-page .pd-footer h3{font-size:1rem;}
.positive-donation-page .pd-footer p,.positive-donation-page .pd-footer li{font-size:.82rem;}
.pd-hero-slider{position:relative;min-height:360px;background:var(--purple);isolation:isolate;}
.pd-hero-slides{position:absolute;inset:0;}
.pd-hero-slide{position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .45s ease;}
.pd-hero-slide.is-active{opacity:1;visibility:visible;pointer-events:auto;}
.pd-hero-slide>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;}
.pd-hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(63,32,88,.9),rgba(88,49,116,.62),rgba(232,91,155,.18));z-index:1;}
.pd-hero-slider .pd-hero-content{position:relative;z-index:2;min-height:360px;padding:30px 24px;justify-content:center;align-items:flex-start;}
.pd-hero-arrow{position:absolute;z-index:5;top:50%;transform:translateY(-50%);width:48px;height:48px;border:1px solid rgba(255,255,255,.35);border-radius:50%;background:rgba(63,32,88,.58);color:#fff;font-size:2rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.pd-hero-prev{right:14px;}
.pd-hero-next{left:14px;}
.pd-hero-dots{position:absolute;z-index:5;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:8px;direction:ltr;}
.pd-hero-dots button{width:11px;height:11px;border:1px solid rgba(255,255,255,.75);border-radius:50%;background:rgba(255,255,255,.35);padding:0;cursor:pointer;}
.pd-hero-dots button.is-active{width:28px;border-radius:20px;background:#fff;}
@media (min-width:700px){
.positive-donation-page{font-size:18px;}
.positive-donation-page .pd-title h2{font-size:2rem;}
.positive-donation-page .pd-title p{font-size:1.05rem;}
.positive-donation-page .pd-menu a{font-size:.9rem;}
.positive-donation-page .pd-header-btn{font-size:.88rem;}
.pd-hero-slider,.pd-hero-slider .pd-hero-content{min-height:450px;}
.pd-hero-slider .pd-hero-content{padding:55px 70px;}
.positive-donation-page .pd-hero h1{font-size:2.6rem;}
.positive-donation-page .pd-hero p{font-size:1.08rem;}
.positive-donation-page .pd-btn{font-size:.95rem;min-height:50px;padding:10px 22px;}
.positive-donation-page .pd-image-slide{height:260px;}
.positive-donation-page .pd-article-image{height:260px;}
}
@media (min-width:1050px){
.positive-donation-page{font-size:19px;}
.positive-donation-page .pd-title h2{font-size:2.15rem;}
.pd-hero-slider,.pd-hero-slider .pd-hero-content{min-height:520px;}
.pd-hero-slider .pd-hero-content{padding:70px 85px;}
.positive-donation-page .pd-hero h1{font-size:3.05rem;}
.positive-donation-page .pd-hero p{font-size:1.12rem;}
.positive-donation-page .pd-image-slide{height:290px;}
.positive-donation-page .pd-article-image{height:275px;}
.pd-hero-arrow{width:54px;height:54px;}
}
@media (max-width:480px){
.pd-hero-slider,.pd-hero-slider .pd-hero-content{min-height:430px;}
.pd-hero-slider .pd-hero-content{padding:28px 52px 38px 52px;}
.positive-donation-page .pd-hero h1{font-size:2rem;}
.positive-donation-page .pd-hero p{font-size:.98rem;line-height:2.05;}
.positive-donation-page .pd-hero-badge{font-size:.88rem;}
.positive-donation-page .pd-btn{font-size:.88rem;padding:9px 14px;}
.pd-hero-arrow{width:38px;height:38px;font-size:1.6rem;}
.pd-hero-prev{right:8px;} .pd-hero-next{left:8px;}
.positive-donation-page .pd-image-slide{height:240px;}
.positive-donation-page .pd-article-image{height:230px;}
}
@media (max-width:390px){
.positive-donation-page{font-size:17px;}
.pd-hero-slider,.pd-hero-slider .pd-hero-content{min-height:400px;}
.pd-hero-slider .pd-hero-content{padding:24px 46px 34px;}
.positive-donation-page .pd-hero h1{font-size:1.78rem;}
.positive-donation-page .pd-hero p{font-size:.9rem;}
}
@media (prefers-reduced-motion:reduce){.pd-hero-slide{transition:none;}}
</style>




خط ۱٬۹۸۴: خط ۲٬۰۸۳:
======================================================= -->
======================================================= -->


<section class="pd-hero">
<section class="pd-hero pd-hero-slider" aria-label="بنرهای گروه اهدای مثبت بخشنده">


     <div class="pd-hero-content">
     <div class="pd-hero-slides">
        <article class="pd-hero-slide is-active" data-slide="0">
            <img src="YOUR-BANNER-1-URL" alt="گروه اهدای مثبت بخشنده - اهدای تخمک، اهدای جنین و رحم جایگزین" loading="eager">
            <div class="pd-hero-overlay"></div>
            <div class="pd-hero-content">
                <span class="pd-hero-badge">همراه شما در مسیر تشکیل خانواده</span>
                <h1>گروه <strong>اهدای مثبت بخشنده</strong></h1>
                <p>همراهی و راهنمایی در مسیر اهدای تخمک، اهدای جنین و رحم جایگزین با تأکید بر آگاهی، احترام و حفظ حریم خصوصی.</p>
                <div class="pd-buttons">
                    <a href="#donation" class="pd-btn pd-btn-main">مشاهده خدمات اهدا</a>
                    <a href="#contact" class="pd-btn pd-btn-light">دریافت مشاوره</a>
                </div>
            </div>
        </article>


         <span class="pd-hero-badge">
         <article class="pd-hero-slide" data-slide="1">
             همراه شما در مسیر تشکیل خانواده
            <img src="YOUR-BANNER-2-URL" alt="اهدای تخمک و راهنمایی تخصصی" loading="lazy">
         </span>
            <div class="pd-hero-overlay"></div>
            <div class="pd-hero-content">
                <span class="pd-hero-badge">آگاهی پیش از تصمیم‌گیری</span>
                <h1><strong>اهدای تخمک</strong> با همراهی و آگاهی</h1>
                <p>اطلاعات اولیه درباره شرایط، مراحل و مسیر دریافت یا اهدای تخمک را ساده‌تر دنبال کنید.</p>
                <div class="pd-buttons">
                    <a href="#egg" class="pd-btn pd-btn-main">آشنایی با اهدای تخمک</a>
                    <a href="#contact" class="pd-btn pd-btn-light">مشاوره</a>
                </div>
             </div>
         </article>


         <h1>
         <article class="pd-hero-slide" data-slide="2">
             گروه
            <img src="YOUR-BANNER-3-URL" alt="اهدای جنین و رحم جایگزین" loading="lazy">
             <strong>
             <div class="pd-hero-overlay"></div>
                 اهدای مثبت بخشنده
             <div class="pd-hero-content">
            </strong>
                 <span class="pd-hero-badge">مسیر روشن‌تر برای خانواده</span>
        </h1>
                <h1><strong>اهدای جنین و رحم جایگزین</strong></h1>
 
                <p>با مطالعه اطلاعات کاربردی و دریافت راهنمایی مناسب، مسیر خدمات موردنظر خود را بهتر بشناسید.</p>
        <p>
                <div class="pd-buttons">
            همراهی و راهنمایی در مسیر
                    <a href="#donation" class="pd-btn pd-btn-main">مشاهده خدمات</a>
            اهدای تخمک، اهدای جنین و رحم جایگزین
                    <a href="#articles" class="pd-btn pd-btn-light">مجله اهدای مثبت</a>
            با تأکید بر آگاهی، احترام و حفظ حریم خصوصی.
                </div>
        </p>
            </div>
 
        </article>
        <div class="pd-buttons">
    </div>


            <a href="#donation"
    <button class="pd-hero-arrow pd-hero-prev" type="button" aria-label="بنر قبلی">‹</button>
              class="pd-btn pd-btn-main">
    <button class="pd-hero-arrow pd-hero-next" type="button" aria-label="بنر بعدی">›</button>
                مشاهده خدمات اهدا
            </a>
 
            <a href="#contact"
              class="pd-btn pd-btn-light">
                دریافت مشاوره
            </a>
 
        </div>


    <div class="pd-hero-dots" role="tablist" aria-label="انتخاب بنر">
        <button type="button" class="is-active" data-go="0" aria-label="بنر اول"></button>
        <button type="button" data-go="1" aria-label="بنر دوم"></button>
        <button type="button" data-go="2" aria-label="بنر سوم"></button>
     </div>
     </div>
</section>
</section>


خط ۲٬۴۵۵: خط ۲٬۵۷۱:


                 <img
                 <img
                     src="https://dl.faraghaib.ir/m/260009-01/260009-01-15.jpg"
                     src="IMAGE-SLIDE-2"
                     alt="اهدای جنین"
                     alt="اهدای جنین"
                     loading="lazy"
                     loading="lazy"
خط ۳٬۱۷۶: خط ۳٬۲۹۲:




<script>
(function(){
  const root=document.querySelector('.positive-donation-page');
  if(!root) return;
  const slides=[...root.querySelectorAll('.pd-hero-slide')];
  const dots=[...root.querySelectorAll('.pd-hero-dots button')];
  const prev=root.querySelector('.pd-hero-prev');
  const next=root.querySelector('.pd-hero-next');
  if(!slides.length) return;
  let index=0,timer;
  function show(i){
    index=(i+slides.length)%slides.length;
    slides.forEach((s,n)=>s.classList.toggle('is-active',n===index));
    dots.forEach((d,n)=>d.classList.toggle('is-active',n===index));
  }
  function start(){timer=setInterval(()=>show(index+1),5500);}
  function restart(){clearInterval(timer);start();}
  prev&&prev.addEventListener('click',()=>{show(index-1);restart();});
  next&&next.addEventListener('click',()=>{show(index+1);restart();});
  dots.forEach(d=>d.addEventListener('click',()=>{show(Number(d.dataset.go));restart();}));
  root.addEventListener('mouseenter',()=>clearInterval(timer));
  root.addEventListener('mouseleave',start);
  start();
})();
</script>
</div>
</div>


</html>
</html>
برگرفته از «https://fa.faraghaib.ir/wiki/تست۶»