فراغیب

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

→ تفاوت با ویرایش قدیمی‌تر
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
 
(یک نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد)
خط ۱: خط ۱:
<html lang="fa" dir="rtl">
<html lang="fa" dir="rtl">


خط ۸۴: خط ۸۳:
.print-banner-hero{
.print-banner-hero{
     display:grid;
     display:grid;
     grid-template-columns:1fr;
     grid-template-columns:1fr;


خط ۲۳۶: خط ۲۳۴:


/* =========================================================
/* =========================================================
   BENEFITS
   BENEFITS TABLE
========================================================= */
========================================================= */


خط ۲۴۲: خط ۲۴۰:
     display:grid;
     display:grid;


     grid-template-columns:repeat(2,1fr);
     grid-template-columns:repeat(2,minmax(0,1fr));


     width:100%;
     width:100%;


     margin-top:25px;
     margin-top:25px;
    gap:8px;
}
}
/* =========================================================
  BENEFIT CELL
========================================================= */


.print-benefit{
.print-benefit{
خط ۲۶۲: خط ۲۶۷:
     min-height:115px;
     min-height:115px;


     padding:12px 7px;
     padding:12px 8px;
 
    border:1px solid rgba(11,49,87,.22);
 
    border-radius:12px;
 
    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #fbfcfa 100%
        );


     text-align:justify;
     text-align:center;
 
    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}
}


/* حذف خطوط قبلی */
.print-benefit:not(:last-child)::after{
.print-benefit:not(:last-child)::after{
     content:"";
     display:none;
}
 


    position:absolute;
/* Hover دسکتاپ */
@media (hover:hover){


     top:20%;
     .print-benefit:hover{
    left:0;
        border-color:var(--gold);


    width:1px;
        box-shadow:
    height:60%;
            0 5px 16px rgba(11,49,87,.10);


    background:#d5d5d5;
        transform:translateY(-2px);
    }
}
}
/* =========================================================
  BENEFIT ICON
========================================================= */


.print-benefit-icon{
.print-benefit-icon{
خط ۲۹۷: خط ۳۲۹:
}
}


/* رنگ آیکون‌ها */
.print-benefit:nth-child(2) .print-benefit-icon,
.print-benefit:nth-child(2) .print-benefit-icon,
.print-benefit:nth-child(4) .print-benefit-icon{
.print-benefit:nth-child(4) .print-benefit-icon{
خط ۳۰۶: خط ۳۴۰:
}
}


.print-benefit-title{
 
     margin:0;
/* =========================================================
  BENEFIT TITLE
========================================================= */
 
.print-benefit-title{
     margin:0;


     color:#111;
     color:#111;
خط ۳۱۶: خط ۳۵۵:


     font-weight:700;
     font-weight:700;
    text-align:center;
}
}


خط ۳۶۶: خط ۴۰۷:
     color:#fff;
     color:#fff;


     text-align:justify;
     text-align:center;


     font-size:15px;
     font-size:15px;
خط ۳۹۲: خط ۴۳۳:
     color:#fff;
     color:#fff;


     text-align:justify;
     text-align:center;


     font-size:21px;
     font-size:21px;
خط ۵۱۴: خط ۵۵۵:
     color:#fff;
     color:#fff;


     text-align:justify;
     text-align:center;


     font-size:14px;
     font-size:14px;
خط ۵۸۱: خط ۶۲۲:
     padding:10px;
     padding:10px;


     text-align:justify;
     text-align:center;
}
}


خط ۶۵۳: خط ۶۹۴:


     .print-banner-benefits{
     .print-banner-benefits{
         grid-template-columns:repeat(2,1fr);
         grid-template-columns:repeat(2,minmax(0,1fr));
 
        gap:6px;
 
        margin-top:20px;
     }
     }


     .print-benefit{
     .print-benefit{
         min-height:105px;
         min-height:105px;
        padding:10px 5px;
        border-radius:10px;
    }
    .print-benefit-icon{
        width:40px;
        height:40px;
        font-size:27px;
        margin-bottom:5px;
     }
     }


     .print-benefit-title{
     .print-benefit-title{
         font-size:12px;
         font-size:12px;
        line-height:1.7;
     }
     }


خط ۶۸۰: خط ۷۳۹:
     }
     }


     .print-portfolio-item{
    .print-banner-benefits{
        grid-template-columns:repeat(2,minmax(0,1fr));
 
        gap:7px;
    }
 
    .print-benefit{
        min-height:110px;
    }
 
     .print-portfolio-item{
         aspect-ratio:1.25 / 1;
         aspect-ratio:1.25 / 1;
     }
     }
خط ۶۹۶: خط ۷۶۵:
     }
     }


    /* پنج سلول در یک ردیف */
     .print-banner-benefits{
     .print-banner-benefits{
         grid-template-columns:repeat(5,minmax(0,1fr));
         grid-template-columns:
            repeat(5,minmax(0,1fr));
 
        gap:7px;
     }
     }


خط ۷۴۰: خط ۸۱۳:
/* =========================================================
/* =========================================================
   DESKTOP
   DESKTOP
  مخصوص صفحات ویکی‌پدیایی
========================================================= */
========================================================= */


خط ۷۵۷: خط ۸۲۹:




     /* =====================================================
     /* HERO */
      HERO DESKTOP
    ===================================================== */


     .print-banner-hero{
     .print-banner-hero{
خط ۸۰۶: خط ۸۷۶:




     /* =====================================================
     /* HERO CONTENT */
      HERO CONTENT
    ===================================================== */


     .print-banner-hero-content{
     .print-banner-hero-content{
خط ۸۷۰: خط ۹۳۸:


     /* =====================================================
     /* =====================================================
       HERO BENEFITS
       HERO BENEFITS DESKTOP
     ===================================================== */
     ===================================================== */


خط ۸۸۱: خط ۹۴۹:


         margin-top:20px;
         margin-top:20px;
        gap:8px;
     }
     }


خط ۸۸۹: خط ۹۵۹:


         padding:8px 5px;
         padding:8px 5px;
        border:1px solid rgba(11,49,87,.25);
        border-radius:11px;
     }
     }


خط ۹۱۱: خط ۹۸۵:




     /* =====================================================
     /* SECTION HEADINGS */
      SECTION HEADINGS
    ===================================================== */


     .print-section-heading{
     .print-section-heading{
خط ۹۳۵: خط ۱٬۰۰۷:




     /* =====================================================
     /* PORTFOLIO */
      PORTFOLIO DESKTOP
    ===================================================== */


     .print-portfolio{
     .print-portfolio{
خط ۹۹۹: خط ۱٬۰۶۹:




     /* =====================================================
     /* ADVANTAGES */
      ADVANTAGES DESKTOP
    ===================================================== */


     .print-advantages{
     .print-advantages{
خط ۱٬۰۶۴: خط ۱٬۱۳۲:
/* =========================================================
/* =========================================================
   LARGE DESKTOP
   LARGE DESKTOP
  1200px+
========================================================= */
========================================================= */


خط ۱٬۱۴۲: خط ۱٬۲۰۹:


         margin-top:24px;
         margin-top:24px;
        gap:9px;
     }
     }


خط ۱٬۱۵۰: خط ۱٬۲۱۹:


         padding:8px 7px;
         padding:8px 7px;
        border-radius:12px;
     }
     }


خط ۱٬۲۴۶: خط ۱٬۳۱۷:
/* =========================================================
/* =========================================================
   VERY LARGE DESKTOP
   VERY LARGE DESKTOP
  1500px+
========================================================= */
========================================================= */


خط ۱٬۴۳۴: خط ۱٬۵۰۴:
         <p class="print-banner-description">
         <p class="print-banner-description">


        چاپ اکوسالونت با کیفیت بالا، دوام عالی و رنگ‌های درخشان، گزینه‌ای مناسب برای چاپ فضای باز است.
            چاپ اکوسالونت با کیفیت بالا، دوام عالی و رنگ‌های درخشان،
            گزینه‌ای مناسب برای چاپ فضای باز است.


         </p>
         </p>


        <!-- =================================================
            BENEFITS TABLE
        ================================================= -->


         <div class="print-banner-benefits"
         <div class="print-banner-benefits"
خط ۱٬۵۱۶: خط ۱٬۵۹۱:


             </div>
             </div>


         </div>
         </div>
خط ۱٬۵۲۳: خط ۱٬۵۹۹:
</header>
</header>


</div>
</section>


<!-- =========================================================
<!-- =========================================================
برگرفته از «https://fa.faraghaib.ir/wiki/الگو:کانتینر_ترکیبی»