پرش به محتوا

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

از فراغیب
→ تفاوت با ویرایش قدیمی‌تر
دیداریویکی‌متن
بدون خلاصۀ ویرایش
برچسب‌ها: ویرایش همراه ویرایش از وبگاه همراه
بدون خلاصۀ ویرایش
 
(۳ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد)
خط ۱: خط ۱:
<html>
<!-- کانتینر اصلی با طراحی ریسپانسیو و سایه ملایم -->


<!-- بخش Hero -->
<div style="margin: 15px auto; padding: 15px; direction: rtl; text-align: right;
<section class="sajad-hero" style="
            background-color: #ffffff; border: 1px solid #fff; border-radius: 12px;
  --hero-bg:#FFFFFF;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); max-width: 1000px; box-sizing: border-box;">
  --hero-title:#100E47;
   
  --hero-text:#3E3A36;
    <!-- ایجاد چیدمان انعطاف‌پذیر (Flexbox) با قابلیت شکستن خط در موبایل -->
  --hero-badge-bg:#FFB6C1;
    <div style="display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: center;">   
  --hero-btn-bg:#100E47;
<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__container">


<div class="sajad-hero__content">
<h3 ">
 
[[الگو:فرم ثبت نام|تکمیل فرم]]،
<h3 style="font-family:iransans;">
اولین قدم برای دریافت مشاوره دقیق‌تر است.
<a href="https://fa.faraghaib.ir/wiki/%D8%A7%D9%84%DA%AF%D9%88:%D9%81%D8%B1%D9%85_%D8%AB%D8%A8%D8%AA_%D9%86%D8%A7%D9%85">
تکمیل فرم</a>، اولین قدم برای دریافت مشاوره دقیق‌تر است.
</h3>
</h3>


<br>
<span class="sajad-hero__badge>
 
<span class="sajad-hero__badge">
همراه مطمئن درمان ناباروری
همراه مطمئن درمان ناباروری
</span>
</span>


<h1 class="sajad-hero__title">
            <h1 class="sajad-hero__title">
خدمات ما به شما:
                خدمات ما به شما:
</h1>
            </h1>


<p class="sajad-hero__description">
            <ul class="sajad-hero__description">


<ul style="font-family:iransans;">
                <li>
                    <strong>اهدای تخمک:</strong>
                    شامل شرایط سنی، پزشکی و پرداخت مبالغ متفاوت بسته به شهر.
                </li>


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


<li><strong>رحم جایگزین:</strong> شامل شرایط سنی، پزشکی، سابقه بارداری و هزینه‌های کلان.</li>
                <li>
                    <strong>اهدای جنین:</strong>
                    شرایط خاص برای زوجین اهداکننده اسپرم و تخمک.
                </li>


<li><strong>اهدای جنین:</strong> شرایط خاص برای زوجین اهداکننده اسپرم و تخمک.</li>
            </ul>


</ul>


</p>


</div>


<div class="sajad-hero__media">


<div class="sajad-hero__img sajad-hero__img--back">
            </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;">


<img
<!--https://dl.faraghaib.ir/m/103/gap.png                  نمونه آدرس دهی-->
src="https://dl.faraghaib.ir/m/109/109m020.png"
<img src="https://dl.faraghaib.ir/m/109/109m020.png" style="width:300px;height:200px;">
alt="محصول پوشاک سجاد">
 
</div>


    </div>
</html>
        </div>
       
    </div>
</div>
</div>
</div>
</section>
<style>
/*===============================
Base (Mobile First)
================================*/
.sajad-hero{
background:var(--hero-bg);
padding:40px 15px;
direction:rtl;
overflow:hidden;
font-family:iransans;
}
.sajad-hero__container{
max-width:1100px;
margin:auto;
display:grid;
grid-template-columns:1fr;
gap:35px;
align-items:center;
}
.sajad-hero__content{
text-align:center;
}
.sajad-hero__badge{
display:inline-block;
background:var(--hero-badge-bg);
padding:8px 16px;
border-radius:8px;
margin-bottom:20px;
font-size:1rem;
}
.sajad-hero__title{
color:var(--hero-title);
font-size:2rem;
line-height:1.4;
margin-bottom:20px;
}
.sajad-hero__description{
color:var(--hero-text);
font-size:1rem;
line-height:2;
margin-bottom:20px;
}
.sajad-hero__button{
background:var(--hero-btn-bg);
color:#fff;
padding:14px 28px;
border-radius:50px;
display:inline-block;
text-decoration:none;
}
.sajad-hero__media{
display:flex;
justify-content:center;
align-items:center;
width:100%;
height:auto;
overflow:visible;
margin:0;
}
.sajad-hero__img{
width:100%;
display:flex;
justify-content:center;
align-items:center;
overflow:visible;
}
.sajad-hero__img img{
display:block;
width:100%;
max-width:320px;
height:auto;
object-fit:contain;
}
/*===============================
Desktop
================================*/
@media(min-width:769px){
.sajad-hero{
padding:80px 20px;
}
.sajad-hero__container{
grid-template-columns:1fr 1fr;
gap:40px;
}
.sajad-hero__content{
text-align:right;
}
.sajad-hero__title{
font-size:3rem;
}
.sajad-hero__description{
font-size:1.1rem;
}
.sajad-hero__media{
position:relative;
height:500px;
display:block;
}
.sajad-hero__img{
position:absolute;
overflow:hidden;
}
.sajad-hero__img img{
max-width:100%;
width:100%;
}
.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;
}
}
</style>
</html>

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



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

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

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

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



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