پرش به محتوا

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

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


<!-- بخش Hero -->
<!-- =========================
<section class="sajad-hero" style="
    بخش Hero
  --hero-bg:#FFFFFF;
========================= -->
  --hero-title:#100E47;
<section class="sajad-hero"
  --hero-text:#3E3A36;
    style="
  --hero-badge-bg:#FFB6C1;
        --hero-bg:#FFFFFF;
  --hero-btn-bg:#100E47;
        --hero-title:#100E47;
">
        --hero-text:#3E3A36;
        --hero-badge-bg:#FFB6C1;
        --hero-btn-bg:#100E47;
    ">


<div class="sajad-hero__container">
    <div class="sajad-hero__container">


<div class="sajad-hero__content">
        <!-- محتوای متنی -->
        <div class="sajad-hero__content">


<h3 style="font-family:iransans;">
            <h3 class="sajad-hero__intro">
<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 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>
                </a>،
                اولین قدم برای دریافت مشاوره دقیق‌تر است.
            </h3>


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


<span class="sajad-hero__badge">
            <h1 class="sajad-hero__title">
همراه مطمئن درمان ناباروری
                خدمات ما به شما:
</span>
            </h1>


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


<p class="sajad-hero__description">
                <li>
                    <strong>اهدای تخمک:</strong>
                    شامل شرایط سنی، پزشکی و پرداخت مبالغ متفاوت بسته به شهر.
                </li>


<ul style="font-family:iransans;">
                <li>
                    <strong>رحم جایگزین:</strong>
                    شامل شرایط سنی، پزشکی، سابقه بارداری و هزینه‌های کلان.
                </li>


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


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


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


</ul>
        <!-- تصویر -->
        <div class="sajad-hero__media">


</p>
            <div class="sajad-hero__img sajad-hero__img--back">


</div>
                <img
                    src="https://dl.faraghaib.ir/m/109/109m020.png"
                    alt="محصول پوشاک سجاد"
                    loading="lazy"
                    decoding="async"
                >


<div class="sajad-hero__media">
            </div>


<div class="sajad-hero__img sajad-hero__img--back">
        </div>


<img
    </div>
src="https://dl.faraghaib.ir/m/109/109m020.png"
alt="محصول پوشاک سجاد">


</div>
</section>


</div>


</div>
<style>


</section>
/* ==================================================
  Base Reset
================================================== */
 
.sajad-hero,
.sajad-hero *,
.sajad-hero *::before,
.sajad-hero *::after {
    box-sizing: border-box;
}


<style>


/*===============================
/* ==================================================
Base (Mobile First)
  Hero - Mobile First
================================*/
================================================== */


.sajad-hero{
.sajad-hero {


background:var(--hero-bg);
    width: 100%;
    max-width: 100%;


padding:40px 15px;
    background: var(--hero-bg);


direction:rtl;
    padding: 35px 15px;


overflow:hidden;
    direction: rtl;


font-family:iransans;
    overflow: hidden;


    font-family: iransans, Tahoma, Arial, sans-serif;
}
}


.sajad-hero__container{


max-width:1100px;
/* ==================================================
  Container
================================================== */


margin:auto;
.sajad-hero__container {


display:grid;
    width: 100%;
    max-width: 1100px;


grid-template-columns:1fr;
    margin: 0 auto;


gap:35px;
    display: grid;


align-items:center;
    grid-template-columns: 1fr;


    gap: 30px;
    align-items: center;
}
}


.sajad-hero__content{


text-align:center;
/* ==================================================
  Content
================================================== */
 
.sajad-hero__content {
 
    width: 100%;
 
    min-width: 0;


    text-align: center;
}
}


.sajad-hero__badge{


display:inline-block;
/* ==================================================
  Intro Text
================================================== */


background:var(--hero-badge-bg);
.sajad-hero__intro {


padding:8px 16px;
    margin: 0 0 22px;


border-radius:8px;
    color: var(--hero-text);


margin-bottom:20px;
    font-size: clamp(1rem, 3.8vw, 1.35rem);


font-size:1rem;
    line-height: 2;


    font-weight: 600;
}
}


.sajad-hero__title{
.sajad-hero__intro a {


color:var(--hero-title);
    color: var(--hero-title);


font-size:2rem;
    font-weight: 700;


line-height:1.4;
    text-decoration: none;
}


margin-bottom:20px;
.sajad-hero__intro a:hover {


    text-decoration: underline;
}
}


.sajad-hero__description{


color:var(--hero-text);
/* ==================================================
  Badge
================================================== */
 
.sajad-hero__badge {
 
    display: inline-block;
 
    max-width: 100%;
 
    background: var(--hero-badge-bg);
 
    padding: 8px 16px;


font-size:1rem;
    border-radius: 8px;


line-height:2;
    margin-bottom: 18px;


margin-bottom:20px;
    font-size: clamp(.9rem, 3.5vw, 1rem);


    line-height: 1.8;
    white-space: normal;
}
}


.sajad-hero__button{


background:var(--hero-btn-bg);
/* ==================================================
  Title
================================================== */


color:#fff;
.sajad-hero__title {


padding:14px 28px;
    color: var(--hero-title);


border-radius:50px;
    font-size: clamp(1.7rem, 7vw, 3rem);


display:inline-block;
    line-height: 1.5;


text-decoration:none;
    margin: 0 0 18px;


    font-weight: 700;
}
}


.sajad-hero__media{


display:flex;
/* ==================================================
  Description / List
================================================== */


justify-content:center;
.sajad-hero__description {


align-items:center;
    width: 100%;


width:100%;
    margin: 0;


height:auto;
    padding: 0 20px 0 0;


overflow:visible;
    color: var(--hero-text);


margin:0;
    font-size: clamp(.95rem, 3.8vw, 1.1rem);


    line-height: 2;
    text-align: right;
}
}


.sajad-hero__img{
.sajad-hero__description li {


width:100%;
    margin-bottom: 12px;
 
    padding-right: 5px;
}


display:flex;
.sajad-hero__description li:last-child {


justify-content:center;
    margin-bottom: 0;
}


align-items:center;
.sajad-hero__description strong {


overflow:visible;
    color: var(--hero-title);


    font-weight: 700;
}
}


.sajad-hero__img img{


display:block;
/* ==================================================
  Media
================================================== */
 
.sajad-hero__media {
 
    width: 100%;
 
    min-width: 0;
 
    display: flex;
 
    justify-content: center;


width:100%;
    align-items: center;


max-width:320px;
    overflow: visible;


height:auto;
    margin: 0 auto;


object-fit:contain;
    order: 2;
border-radius:8px;
}
}


/*===============================
Desktop
================================*/


@media(min-width:769px){
/* ==================================================
  Image Wrapper
================================================== */
 
.sajad-hero__img {
 
    width: 100%;
 
    max-width: 320px;
 
    display: flex;
 
    justify-content: center;


.sajad-hero{
    align-items: center;


padding:80px 20px;
    overflow: visible;


    margin: 0 auto;
}
}


.sajad-hero__container{


grid-template-columns:1fr 1fr;
/* ==================================================
  Image
================================================== */
 
.sajad-hero__img img {
 
    display: block;
 
    width: 100%;
 
    max-width: 100%;
 
    height: auto;


gap:40px;
    object-fit: contain;


    border-radius: 8px;
}
}


.sajad-hero__content{


text-align:right;
/* ==================================================
  Tablet
================================================== */
 
@media (min-width: 600px) {
 
    .sajad-hero {
 
        padding: 50px 25px;
    }
 
    .sajad-hero__container {
 
        gap: 40px;
    }
 
    .sajad-hero__img {
 
        max-width: 380px;
    }
 
    .sajad-hero__description {
 
        padding-right: 25px;
    }


}
}


.sajad-hero__title{


font-size:3rem;
/* ==================================================
  Desktop
================================================== */
 
@media (min-width: 769px) {
 
    .sajad-hero {
 
        padding: 70px 30px;
    }
 
    .sajad-hero__container {
 
        grid-template-columns: minmax(0, 1fr) minmax(300px, 1fr);
 
        gap: 50px;
 
        min-height: 500px;
    }
 
    .sajad-hero__content {
 
        text-align: right;
 
        order: 1;
    }
 
    .sajad-hero__media {


}
        order: 2;
 
        height: auto;
 
        min-height: 500px;
 
        position: relative;
 
        display: flex;
 
        justify-content: center;
 
        align-items: center;
    }
 
    .sajad-hero__img {
 
        width: 350px;
 
        max-width: 100%;
 
        height: auto;
 
        position: relative;
 
        left: auto;
 
        top: auto;
    }
 
    .sajad-hero__img img {
 
        width: 100%;


.sajad-hero__description{
        max-width: 100%;


font-size:1.1rem;
        height: auto;
    }


}
}


.sajad-hero__media{


position:relative;
/* ==================================================
  Large Desktop
================================================== */


height:500px;
@media (min-width: 1100px) {


display:block;
    .sajad-hero {


}
        padding: 80px 30px;
    }
 
    .sajad-hero__container {


.sajad-hero__img{
        gap: 70px;
    }


position:absolute;
    .sajad-hero__img {


overflow:hidden;
        width: 400px;
    }


}
}


.sajad-hero__img img{


max-width:100%;
/* ==================================================
  Very Small Mobile
================================================== */


width:100%;
@media (max-width: 360px) {


}
    .sajad-hero {
 
        padding: 28px 12px;
    }


.sajad-hero__img--back{
    .sajad-hero__container {


width:350px;
        gap: 25px;
    }


height:600px;
    .sajad-hero__intro {


left:20px;
        line-height: 1.9;
    }


top:0;
    .sajad-hero__description {


z-index:5;
        padding-right: 18px;


}
        font-size: .9rem;


.sajad-hero__img--front{
        line-height: 1.9;
    }


width:250px;
    .sajad-hero__badge {


height:450px;
        padding: 7px 12px;
    }


left:200px;
}


top:150px;


z-index:2;
/* ==================================================
  Prevent horizontal overflow
================================================== */


border:4px solid #fff;
.sajad-hero img {


    max-width: 100%;
}
}


.sajad-hero a {
    overflow-wrap: anywhere;
}
}


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

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

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

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

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

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