فراغیب

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

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


<!-- بخش Hero -->
<!-- بخش Hero -->
<section class="sajad-hero" style="
<section class="sajad-hero" style="
  /* تنظیمات رنگ‌ها */
   --hero-bg:#FFFFFF;
   --hero-bg: #FFFFF;
   --hero-title:#100E47;
   --hero-title: #100E47;
   --hero-text:#3E3A36;
   --hero-text: #3E3A36;
   --hero-badge-bg:#FFB6C1;
   --hero-badge-bg: #FFB6C1;
   --hero-btn-bg:#100E47;
   --hero-btn-bg: #100E47;
">
">
  <div class="sajad-hero__container">


    <!-- محتوای متنی -->
<div class="sajad-hero__container">
    <div class="sajad-hero__content">
 
    <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><br>
<div class="sajad-hero__content">
      <span class="sajad-hero__badge">همراه مطمئن درمان ناباروری</span>
 
      <h1 class="sajad-hero__title">خدمات ما به شما:</h1>
<h3 style="font-family:iransans;">
      <p class="sajad-hero__description">
<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>
 
<br>
 
<span class="sajad-hero__badge">
همراه مطمئن درمان ناباروری
</span>
 
<h1 class="sajad-hero__title">
خدمات ما به شما:
</h1>
 
<p class="sajad-hero__description">
 
<ul style="font-family:iransans;">
<ul style="font-family:iransans;">


خط ۲۸: خط ۴۰:


</ul>
</ul>
      </p>
   
    </div>


    <!-- تصاویر با چیدمان پله‌ای -->
</p>
    <div class="sajad-hero__media">
 
      <!-- عکس زیرین -->
</div>
      <div class="sajad-hero__img sajad-hero__img--back">
 
        <img
<div class="sajad-hero__media">
    src="https://dl.faraghaib.ir/m/109/109m020.png"
 
    alt="محصول پوشاک سجاد"
<div class="sajad-hero__img sajad-hero__img--back">
    style="
 
        width:100%;
<img
    display:flex;
src="https://dl.faraghaib.ir/m/109/109m020.png"
    align-items:center;
alt="محصول پوشاک سجاد">
    justify-content:center;
 
    overflow:hidden;
</div>
    ">
 
      </div>
</div>
      <!-- عکس رویی (کوچک‌تر شده) -->
 
      <!--div class="sajad-hero__img sajad-hero__img--back">
</div>
        <img src="https://dl.faraghaib.ir/m/109/109m019.jpg" alt="محصول مکمل سجاد">
      </div-->
    </div>


  </div>
</section>
</section>


<style>
<style>
/* Reset & Container */
 
.sajad-hero {
/*===============================
  background: var(--hero-bg);
Base (Mobile First)
  padding: 80px 20px;
================================*/
  direction: rtl;
 
  overflow: hidden;
.sajad-hero{
  font-family: iransans; /* فونت دلخواه را اینجا ست کن */
 
background:var(--hero-bg);
 
padding:40px 15px;
 
direction:rtl;
 
overflow:hidden;
 
font-family:iransans;
 
}
}


.sajad-hero__container {
.sajad-hero__container{
  max-width: 1100px;
 
  margin: 0 auto;
max-width:1100px;
  display: grid;
 
  grid-template-columns: 1fr 1fr;
margin:auto;
  align-items: center;
 
  gap: 40px;
display:grid;
 
grid-template-columns:1fr;
 
gap:35px;
 
align-items:center;
 
}
}


/* متن و تایپوگرافی */
.sajad-hero__content{
.sajad-hero__badge {
 
  display: inline-block;
text-align:center;
  background: var(--hero-badge-bg);
 
  color: #000;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 1.1rem;
  margin-bottom: 20px;
}
}


.sajad-hero__title {
.sajad-hero__badge{
  color: var(--hero-title);
 
  font-size: 3rem;
display:inline-block;
  line-height: 1.2;
 
  margin-bottom: 20px;
background:var(--hero-badge-bg);
 
padding:8px 16px;
 
border-radius:8px;
 
margin-bottom:20px;
 
font-size:1rem;
 
}
}


.sajad-hero__description {
.sajad-hero__title{
  color: var(--hero-text);
 
  font-size: 1.1rem;
color:var(--hero-title);
  line-height: 1.8;
 
  margin-bottom: 30px;
font-size:2rem;
 
line-height:1.4;
 
margin-bottom:20px;
 
}
}


.sajad-hero__button {
.sajad-hero__description{
  background: var(--hero-btn-bg);
 
  color: #fff;
color:var(--hero-text);
  padding: 15px 30px;
 
  border-radius: 50px;
font-size:1rem;
  text-decoration: none;
 
  font-weight: bold;
line-height:2;
  display: inline-block;
 
margin-bottom:20px;
 
}
}


/* بخش تصاویر - منطق جدید */
.sajad-hero__button{
.sajad-hero__media {
 
  position: relative;
background:var(--hero-btn-bg);
  height: 500px; /* فضای کلی تصاویر */
 
color:#fff;
 
padding:14px 28px;
 
border-radius:50px;
 
display:inline-block;
 
text-decoration:none;
 
}
}


.sajad-hero__img {
.sajad-hero__media{
  width:100%;
 
    display:flex;
display:flex;
    align-items:center;
 
    justify-content:center;
justify-content:center;
    overflow:hidden;
 
align-items:center;
 
width:100%;
 
height:auto;
 
overflow:visible;
 
margin:0;
 
}
}


.sajad-hero__img img {
.sajad-hero__img{
  display:block;
 
    width:100%;
width:100%;
    height:auto;
 
    max-width:100%;
display:flex;
    object-fit:contain;
 
justify-content:center;
 
align-items:center;
 
overflow:visible;
 
}
}


/* عکس زیری */
.sajad-hero__img img{
.sajad-hero__img--back {
 
  width: 350px;
display:block;
  height: 600px;
 
left: 20px;
width:100%;
  top: 0;
 
  z-index: 5;
max-width:320px;
 
height:auto;
 
object-fit:contain;
 
}
}


/* عکس رویی (کوچک و جدا شده) */
/*===============================
.sajad-hero__img--front {
Desktop
  width: 250px;
================================*/
  height: 450px; /* ارتفاع کمتر برای عدم تداخل لبه پایین */
 
  left: 200px;  /* فاصله افقی از عکس زیری */
@media(min-width:769px){
  top: 150px;  /* فاصله از بالا برای ایجاد اثر پله‌ای */
 
  z-index: 2;
.sajad-hero{
  border: 4px solid #fff; /* برای تفکیک بهتر */
 
padding:80px 20px;
 
}
}


/* ریسپانسیو برای موبایل */
.sajad-hero__container{
@media (max-width: 768px) {
 
  .sajad-hero__container {
grid-template-columns:1fr 1fr;
    grid-template-columns: 1fr;
 
    text-align: center;
gap:40px;
  }
 
  .sajad-hero__media {
}
    height: 350px;
 
    margin-top: 50px;
.sajad-hero__content{
  }
 
  .sajad-hero__img--back {
text-align:right;
    width: 200px;
 
    height: 280px;
}
    left: 10%;
 
  }
.sajad-hero__title{
  .sajad-hero__img--front {
 
    width: 180px;
font-size:3rem;
    height: 200px;
 
    left: 45%;
}
    top: 100px;
 
  }
.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>


}


</style>


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