فراغیب

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

→ تفاوت با ویرایش قدیمی‌تر
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
 
(۹ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد)
خط ۲۴: خط ۲۴:
     direction:rtl;
     direction:rtl;
     width:100%;
     width:100%;
    max-width:100%;
     margin:0;
     margin:0;
     padding:0;
     padding:0;
     background:#fff;
     background:#fff;


خط ۵۷: خط ۵۹:
.print-banner-section h1,
.print-banner-section h1,
.print-banner-section h2,
.print-banner-section h2,
.print-banner-section h3,
.print-banner-section p{
.print-banner-section p{
     margin-top:0;
     margin-top:0;
خط ۷۶: خط ۷۹:
/* =========================================================
/* =========================================================
   HERO
   HERO
  عکس و متن بدون خط و مرز
========================================================= */
========================================================= */


خط ۸۲: خط ۸۴:
     display:grid;
     display:grid;
     grid-template-columns:1fr;
     grid-template-columns:1fr;
     width:100%;
     width:100%;
     overflow:hidden;
     overflow:hidden;
     border-radius:26px;
     border-radius:26px;
     background:#fff;
     background:#fff;
}
}
خط ۹۵: خط ۱۰۱:
.print-banner-hero-image{
.print-banner-hero-image{
     position:relative;
     position:relative;
     width:100%;
     width:100%;
     height:clamp(260px,55vw,560px);
     height:clamp(260px,55vw,560px);
     overflow:hidden;
     overflow:hidden;
     margin:0;
     margin:0;
     padding:0;
     padding:0;
خط ۱۰۴: خط ۱۱۴:
.print-banner-hero-image img{
.print-banner-hero-image img{
     display:block;
     display:block;
     width:100%;
     width:100%;
     height:100%;
     height:100%;
     margin:0;
     margin:0;
     padding:0;
     padding:0;
     border:0;
     border:0;


خط ۱۲۱: خط ۱۳۴:
.print-banner-hero-content{
.print-banner-hero-content{
     display:flex;
     display:flex;
     flex-direction:column;
     flex-direction:column;
     justify-content:center;
     justify-content:center;
     align-items:center;
     align-items:justify;


     width:100%;
     width:100%;
     padding:25px 15px;
     padding:25px 15px;


     background:#fff;
     background:#fff;
     text-align:center;
 
     text-align:justify;
}
}


/* =========================================================
  TITLE
========================================================= */


.print-banner-title{
.print-banner-title{
     width:100%;
     width:100%;
     margin:0 0 12px;
     margin:0 0 12px;


خط ۱۴۰: خط ۱۶۲:


     font-size:clamp(28px,7vw,62px);
     font-size:clamp(28px,7vw,62px);
     line-height:1.45;
     line-height:1.45;
     font-weight:900;
     font-weight:900;
}
}


.print-banner-title span{
.print-banner-title span{
خط ۱۴۹: خط ۱۷۲:
}
}


/* =========================================================
  SUBTITLE
========================================================= */


.print-banner-subtitle{
.print-banner-subtitle{
     display:flex;
     display:flex;
     align-items:center;
     align-items:center;
     justify-content:center;
     justify-content:center;


     width:100%;
     width:100%;
     gap:9px;
     gap:9px;


خط ۱۶۳: خط ۱۹۲:


     font-size:clamp(16px,3.5vw,27px);
     font-size:clamp(16px,3.5vw,27px);
     line-height:1.8;
     line-height:1.8;
     font-weight:800;
     font-weight:800;
}
}


.print-banner-subtitle::before,
.print-banner-subtitle::before,
خط ۱۷۵: خط ۲۰۵:


     width:clamp(25px,5vw,55px);
     width:clamp(25px,5vw,55px);
     height:2px;
     height:2px;


خط ۱۸۲: خط ۲۱۳:
}
}


/* =========================================================
  DESCRIPTION
========================================================= */


.print-banner-description{
.print-banner-description{
     width:100%;
     width:100%;
     max-width:680px;
     max-width:680px;


خط ۱۹۲: خط ۲۲۸:


     font-size:clamp(15px,2.2vw,19px);
     font-size:clamp(15px,2.2vw,19px);
     line-height:2.15;
     line-height:2.15;
}
}
خط ۱۹۷: خط ۲۳۴:


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


.print-banner-benefits{
.print-banner-benefits{
     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{
خط ۲۱۴: خط ۲۵۸:


     display:flex;
     display:flex;
     flex-direction:column;
     flex-direction:column;
     align-items:center;
     align-items:center;
     justify-content:center;
     justify-content:center;
خط ۲۲۱: خط ۲۶۷:
     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:center;
     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{
     display:flex;
     display:flex;
     align-items:center;
     align-items:center;
     justify-content:center;
     justify-content:center;
خط ۲۵۸: خط ۳۳۰:




/* رنگ آیکون‌ها */
.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{
     color:var(--green);
     color:var(--green);
}
}


.print-benefit:nth-child(3) .print-benefit-icon{
.print-benefit:nth-child(3) .print-benefit-icon{
خط ۲۶۸: خط ۳۴۰:
}
}


/* =========================================================
  BENEFIT TITLE
========================================================= */


.print-benefit-title{
.print-benefit-title{
خط ۲۷۵: خط ۳۵۱:


     font-size:13px;
     font-size:13px;
     line-height:1.8;
     line-height:1.8;
     font-weight:700;
     font-weight:700;
    text-align:center;
}
}


خط ۲۸۸: خط ۳۶۸:


     display:flex;
     display:flex;
     align-items:center;
     align-items:center;
     justify-content:center;
     justify-content:center;
خط ۲۹۳: خط ۳۷۴:
     width:100%;
     width:100%;


     margin:30px 0 0;
     margin:10px 0 0;
}
}


.print-section-heading::before{
.print-section-heading::before{
خط ۳۰۱: خط ۳۸۱:


     position:absolute;
     position:absolute;
     right:0;
     right:0;
     left:0;
     left:0;
خط ۳۰۹: خط ۳۹۰:
}
}


.print-section-heading h2{
    position:relative;


.print-section-heading h2{
    z-index:2;
 
    min-width:180px;
 
    margin:0;
 
    padding:2px 10px;
 
    border-radius:50px;
 
    background:var(--navy);
 
    color:#fff;
 
    text-align:center;
 
    font-size:15px;
 
    line-height:1.6;
 
    font-weight:800;
}
 
.print-section-heading h3{
     position:relative;
     position:relative;
     z-index:2;
     z-index:2;


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


     font-size:21px;
     font-size:21px;
     line-height:1.6;
     line-height:1.6;
     font-weight:800;
     font-weight:800;
}
}
خط ۳۳۵: خط ۴۴۴:


/* =========================================================
/* =========================================================
   PORTFOLIO CONTAINER
   PORTFOLIO
========================================================= */
========================================================= */


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


     border:1px solid var(--navy);
     border:1px solid var(--navy);
     border-radius:22px;
     border-radius:22px;


     background:#fff;
     background:#fff;
}
}
/* =========================================================
  PORTFOLIO GRID
  بسیار مهم:
  بدون height ثابت
========================================================= */


.print-portfolio-grid{
.print-portfolio-grid{
خط ۳۷۱: خط ۴۷۴:
     padding:0;
     padding:0;
}
}
/* =========================================================
  PORTFOLIO ITEM
  نسبت ثابت باعث می‌شود همه عکس‌ها یک اندازه باشند
========================================================= */


.print-portfolio-item{
.print-portfolio-item{
خط ۴۰۲: خط ۴۹۹:
     isolation:isolate;
     isolation:isolate;
}
}
/* =========================================================
  PORTFOLIO IMAGE
========================================================= */


.print-portfolio-item img{
.print-portfolio-item img{
خط ۴۲۶: خط ۵۱۸:


     object-fit:cover;
     object-fit:cover;
     object-position:center;
     object-position:center;


خط ۴۳۵: خط ۵۲۸:


/* =========================================================
/* =========================================================
   HOVER DESCRIPTION
   CAPTION
========================================================= */
========================================================= */


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


     display:flex;
     display:flex;
     align-items:center;
     align-items:center;
     justify-content:center;
     justify-content:center;


     width:100%;
     width:100%;
     min-height:72px;
     min-height:72px;


     margin:0;
     margin:0;
     padding:10px 12px;
     padding:10px 12px;


خط ۴۶۲: خط ۵۵۸:


     font-size:14px;
     font-size:14px;
     line-height:1.8;
     line-height:1.8;
     font-weight:700;
     font-weight:700;


     opacity:0;
     opacity:0;
     visibility:hidden;
     visibility:hidden;


خط ۴۷۲: خط ۵۷۱:
     z-index:3;
     z-index:3;
}
}
/* فقط نمایش توضیح با Hover */


.print-portfolio-item:hover
.print-portfolio-item:hover
خط ۴۹۵: خط ۵۹۱:


     border:1px solid var(--border);
     border:1px solid var(--border);
     border-radius:22px;
     border-radius:22px;


     background:#fff;
     background:#fff;
}
}


.print-advantages-grid{
.print-advantages-grid{
خط ۵۰۹: خط ۶۰۵:
     width:100%;
     width:100%;
}
}


.print-advantage{
.print-advantage{
خط ۵۲۲: خط ۶۱۷:


     min-width:0;
     min-width:0;
     min-height:75px;
     min-height:75px;


خط ۵۲۸: خط ۶۲۴:
     text-align:center;
     text-align:center;
}
}


.print-advantage:not(:last-child){
.print-advantage:not(:last-child){
     border-bottom:1px dotted #aaa;
     border-bottom:1px dotted #aaa;
}
}


.print-advantage-icon{
.print-advantage-icon{
     display:flex;
     display:flex;
     align-items:center;
     align-items:center;
     justify-content:center;
     justify-content:center;
خط ۵۴۶: خط ۶۴۱:


     border:2px solid var(--navy);
     border:2px solid var(--navy);
     border-radius:50%;
     border-radius:50%;


خط ۵۵۲: خط ۶۴۸:
     font-size:16px;
     font-size:16px;
}
}


.print-advantage-text{
.print-advantage-text{
خط ۵۶۰: خط ۶۵۵:


     font-size:14px;
     font-size:14px;
     line-height:1.8;
     line-height:1.8;
     font-weight:700;
     font-weight:700;
}
}
خط ۵۹۷: خط ۶۹۴:


     .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;
     }
     }


خط ۶۱۱: خط ۷۲۶:
         aspect-ratio:1.2 / 1;
         aspect-ratio:1.2 / 1;
     }
     }
}
}


خط ۶۲۳: خط ۷۳۷:
     .print-banner-container{
     .print-banner-container{
         padding:9px;
         padding:9px;
    }
    .print-banner-benefits{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:7px;
    }
    .print-benefit{
        min-height:110px;
     }
     }


خط ۶۲۸: خط ۷۵۲:
         aspect-ratio:1.25 / 1;
         aspect-ratio:1.25 / 1;
     }
     }
}
}


خط ۶۴۲: خط ۷۶۵:
     }
     }


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


    /* مزایا */
         gap:7px;
    .print-banner-benefits{
         grid-template-columns:repeat(5,minmax(0,1fr));
     }
     }


     .print-benefit{
     .print-benefit{
         min-height:125px;
         min-height:125px;
     }
     }


     .print-benefit-title{
     .print-benefit-title{
خط ۶۵۸: خط ۷۸۱:
     }
     }


    /* نمونه کارها */
     .print-portfolio-grid{
     .print-portfolio-grid{
         grid-template-columns:
         grid-template-columns:
خط ۶۶۶: خط ۷۸۷:
         gap:11px;
         gap:11px;
     }
     }


     .print-portfolio-item{
     .print-portfolio-item{
خط ۶۷۲: خط ۷۹۲:
     }
     }


    /* مزایا پایین */
     .print-advantages-grid{
     .print-advantages-grid{
         grid-template-columns:
         grid-template-columns:
             repeat(2,minmax(0,1fr));
             repeat(2,minmax(0,1fr));
     }
     }


     .print-advantage{
     .print-advantage{
         min-height:85px;
         min-height:85px;
     }
     }


     .print-advantage:nth-child(odd){
     .print-advantage:nth-child(odd){
         border-left:1px dotted #aaa;
         border-left:1px dotted #aaa;
     }
     }


     .print-advantage:nth-last-child(-n+2){
     .print-advantage:nth-last-child(-n+2){
         border-bottom:0;
         border-bottom:0;
     }
     }
}
}




/* =========================================================
/* =========================================================
   LAPTOP / DESKTOP
   DESKTOP
========================================================= */
========================================================= */


خط ۷۰۴: خط ۸۱۸:


     .print-banner-container{
     .print-banner-container{
         padding:20px;
        width:100%;
 
        max-width:1400px;
 
        margin-left:auto;
        margin-right:auto;
 
         padding:18px 20px 24px;
     }
     }




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


     .print-banner-hero{
     .print-banner-hero{
         grid-template-columns:
         grid-template-columns:
             minmax(0,53%)
             minmax(0,1.08fr)
             minmax(0,47%);
             minmax(0,.92fr);


         align-items:stretch;
         align-items:stretch;


         min-height:0;
        width:100%;
 
         min-height:430px;
 
        max-height:560px;


         border-radius:27px;
         border-radius:24px;
     }
     }




     .print-banner-hero-image{
     .print-banner-hero-image{
         height:auto;
 
         min-height:520px;
        width:100%;
 
         height:100%;
 
         min-height:430px;
 
        max-height:560px;
     }
     }




     .print-banner-hero-image img{
     .print-banner-hero-image img{
        width:100%;
         height:100%;
         height:100%;
         min-height:520px;
 
         min-height:430px;
 
        max-height:560px;
 
        object-fit:cover;
 
        object-position:center;
     }
     }


    /* HERO CONTENT */


     .print-banner-hero-content{
     .print-banner-hero-content{
        width:100%;
         min-width:0;
         min-width:0;


         padding:30px 32px;
        min-height:430px;
 
         padding:35px 34px;
 
        overflow:hidden;
     }
     }




     .print-banner-title{
     .print-banner-title{
         font-size:clamp(38px,4vw,60px);
 
        width:100%;
 
        margin-bottom:12px;
 
         font-size:clamp(36px,3.5vw,54px);
 
        line-height:1.4;
     }
     }




     .print-banner-subtitle{
     .print-banner-subtitle{
         font-size:clamp(20px,2vw,26px);
 
        width:100%;
 
        margin-bottom:13px;
 
         font-size:clamp(19px,1.8vw,24px);
 
        line-height:1.8;
    }
 
 
    .print-banner-subtitle::before,
    .print-banner-subtitle::after{
 
        width:42px;
 
        flex:0 0 42px;
     }
     }




     .print-banner-description{
     .print-banner-description{
         font-size:17px;
 
         line-height:2.15;
        max-width:590px;
 
         font-size:16px;
 
         line-height:2;
 
        text-align:justify;
     }
     }




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


     .print-banner-benefits{
     .print-banner-benefits{
         margin-top:28px;
 
        grid-template-columns:
            repeat(5,minmax(0,1fr));
 
        width:100%;
 
         margin-top:20px;
 
        gap:8px;
     }
     }




     .print-benefit{
     .print-benefit{
         min-height:120px;
 
         min-height:100px;
 
        padding:8px 5px;
 
        border:1px solid rgba(11,49,87,.25);
 
        border-radius:11px;
     }
     }




     /* =====================================================
    .print-benefit-icon{
      PORTFOLIO
 
      دقیقاً ۵ تصویر
        width:40px;
     ===================================================== */
        height:40px;
 
        margin-bottom:5px;
 
        font-size:27px;
    }
 
 
    .print-benefit-title{
 
        font-size:12px;
 
        line-height:1.7;
    }
 
 
     /* SECTION HEADINGS */
 
    .print-section-heading{
 
        margin-top:20px;
 
        margin-bottom:0;
    }
 
 
    .print-section-heading h2{
 
        min-width:170px;
 
        padding:4px 22px;
 
        font-size:16px;
 
        line-height:1.7;
    }
 
 
     /* PORTFOLIO */


     .print-portfolio{
     .print-portfolio{
         padding:20px 8px 8px;
 
        width:100%;
 
        margin:0;
 
         padding:16px 8px 8px;
 
        border-radius:20px;
     }
     }




     .print-portfolio-grid{
     .print-portfolio-grid{
        display:grid;
         grid-template-columns:
         grid-template-columns:
             repeat(5,minmax(0,1fr));
             repeat(5,minmax(0,1fr));


         gap:9px;
         gap:9px;
        width:100%;


         align-items:stretch;
         align-items:stretch;
خط ۷۹۵: خط ۱٬۰۳۷:


     .print-portfolio-item{
     .print-portfolio-item{
         width:100%;
         width:100%;


         aspect-ratio:1.05 / 1;
         aspect-ratio:1 / 1;


         height:auto;
         height:auto;
        border-radius:13px;
     }
     }




     /* =====================================================
    .print-portfolio-item img{
      ADVANTAGES
 
     ===================================================== */
        width:100%;
        height:100%;
 
        object-fit:cover;
    }
 
 
    .print-portfolio-caption{
 
        min-height:66px;
 
        padding:8px 7px;
 
        font-size:12px;
 
        line-height:1.7;
    }
 
 
     /* ADVANTAGES */
 
     .print-advantages{
 
        width:100%;
 
        margin:0;
 
        padding:12px 8px;
 
        border-radius:20px;
    }
 


     .print-advantages-grid{
     .print-advantages-grid{
        display:grid;
         grid-template-columns:
         grid-template-columns:
             repeat(5,minmax(0,1fr));
             repeat(5,minmax(0,1fr));
        width:100%;
     }
     }




     .print-advantage{
     .print-advantage{
         min-height:95px;
 
         padding:8px 12px;
         min-height:82px;
 
         padding:8px 10px;
 
        gap:8px;
     }
     }




     .print-advantage:not(:last-child){
     .print-advantage:not(:last-child){
         border-left:1px dotted #aaa;
         border-left:1px dotted #aaa;
         border-bottom:0;
         border-bottom:0;
     }
     }
خط ۸۲۶: خط ۱٬۱۱۳:


     .print-advantage-icon{
     .print-advantage-icon{
         width:40px;
 
         height:40px;
         width:36px;
         height:36px;
 
        font-size:15px;
     }
     }




     .print-advantage-text{
     .print-advantage-text{
         font-size:14px;
 
         font-size:12px;
 
        line-height:1.75;
     }
     }
}
}


خط ۸۴۵: خط ۱٬۱۳۷:


     .print-banner-container{
     .print-banner-container{
         padding:22px;
 
        max-width:1450px;
 
         padding:20px 24px 28px;
     }
     }




     .print-banner-hero{
     .print-banner-hero{
         grid-template-columns:
         grid-template-columns:
             minmax(0,53%)
             minmax(0,1.06fr)
             minmax(0,47%);
             minmax(0,.94fr);
 
        min-height:470px;
 
        max-height:570px;
 
        border-radius:26px;
     }
     }




     .print-banner-hero-image{
     .print-banner-hero-image{
         min-height:560px;
 
         min-height:470px;
 
        max-height:570px;
     }
     }




     .print-banner-hero-image img{
     .print-banner-hero-image img{
         min-height:560px;
 
         min-height:470px;
 
        max-height:570px;
     }
     }




     .print-banner-hero-content{
     .print-banner-hero-content{
         padding:35px 40px;
 
        min-height:470px;
 
         padding:40px 42px;
     }
     }




     .print-banner-title{
     .print-banner-title{
         font-size:clamp(42px,4vw,64px);
 
         font-size:clamp(42px,3.3vw,60px);
 
        line-height:1.4;
    }
 
 
    .print-banner-subtitle{
 
        font-size:clamp(20px,1.7vw,26px);
     }
     }




     .print-banner-description{
     .print-banner-description{
         font-size:18px;
 
        max-width:620px;
 
         font-size:17px;
 
        line-height:2.1;
    }
 
 
    .print-banner-benefits{
 
        margin-top:24px;
 
        gap:9px;
    }
 
 
    .print-benefit{
 
        min-height:105px;
 
        padding:8px 7px;
 
        border-radius:12px;
    }
 
 
    .print-benefit-icon{
 
        width:44px;
        height:44px;
 
        font-size:29px;
    }
 
 
    .print-benefit-title{
 
        font-size:13px;
 
        line-height:1.75;
    }
 
 
    .print-section-heading{
 
        margin-top:22px;
    }
 
 
    .print-section-heading h2{
 
        min-width:190px;
 
        padding:5px 28px;
 
        font-size:17px;
    }
 
 
    .print-portfolio{
 
        padding:17px 9px 9px;
     }
     }




    /* نمونه کارها */
     .print-portfolio-grid{
     .print-portfolio-grid{
         gap:10px;
         gap:10px;
     }
     }
خط ۸۸۸: خط ۱٬۲۷۰:


     .print-portfolio-item{
     .print-portfolio-item{
         aspect-ratio:1.18 / 1;
 
         aspect-ratio:1.05 / 1;
 
        border-radius:14px;
     }
     }




     .print-portfolio-caption{
     .print-portfolio-caption{
         min-height:76px;
 
         font-size:15px;
         min-height:70px;
 
        padding:9px;
 
         font-size:13px;
    }
 
 
    .print-advantages{
 
        padding:14px 9px;
    }
 
 
    .print-advantage{
 
        min-height:88px;
 
        padding:8px 12px;
    }
 
 
    .print-advantage-icon{
 
        width:39px;
        height:39px;
     }
     }


    .print-advantage-text{
        font-size:13px;
    }
}
}




/* =========================================================
/* =========================================================
   VERY LARGE SCREEN
   VERY LARGE DESKTOP
========================================================= */
========================================================= */


خط ۹۰۷: خط ۱٬۳۲۲:


     .print-banner-container{
     .print-banner-container{
         padding:25px;
 
        max-width:1500px;
 
         padding:22px 26px 30px;
    }
 
 
    .print-banner-hero{
 
        grid-template-columns:
            minmax(0,1.05fr)
            minmax(0,.95fr);
 
        min-height:500px;
 
        max-height:580px;
    }
 
 
    .print-banner-hero-image{
 
        min-height:500px;
 
        max-height:580px;
    }
 
 
    .print-banner-hero-image img{
 
        min-height:500px;
 
        max-height:580px;
    }
 
 
    .print-banner-hero-content{
 
        min-height:500px;
 
        padding:45px 48px;
    }
 
 
    .print-banner-title{
 
        font-size:60px;
    }
 
 
    .print-banner-description{
 
        font-size:18px;
     }
     }




     .print-portfolio-item{
     .print-portfolio-item{
         aspect-ratio:1.2 / 1;
 
         aspect-ratio:1.08 / 1;
     }
     }


    .print-portfolio-caption{
        min-height:74px;
        font-size:14px;
    }
}
}


خط ۹۲۰: خط ۱٬۳۹۴:
/* =========================================================
/* =========================================================
   TOUCH DEVICES
   TOUCH DEVICES
  در موبایل توضیح روی عکس قابل مشاهده است
========================================================= */
========================================================= */


خط ۹۲۶: خط ۱٬۳۹۹:


     .print-portfolio-caption{
     .print-portfolio-caption{
         opacity:1;
         opacity:1;
         visibility:visible;
         visibility:visible;


خط ۹۳۸: خط ۱٬۴۱۳:
             );
             );
     }
     }
}
}


خط ۹۵۴: خط ۱٬۴۲۸:
.print-banner-section
.print-banner-section
.print-portfolio-item{
.print-portfolio-item{
     font-size:0 !important;
     font-size:0 !important;
}
}
خط ۹۵۹: خط ۱٬۴۳۴:
.print-banner-section
.print-banner-section
.print-portfolio-item img{
.print-portfolio-item img{
     font-size:0 !important;
     font-size:0 !important;
}
}
خط ۹۷۲: خط ۱٬۴۴۸:
     .print-banner-section *::before,
     .print-banner-section *::before,
     .print-banner-section *::after{
     .print-banner-section *::after{
         animation:none !important;
         animation:none !important;
         transition:none !important;
         transition:none !important;
         scroll-behavior:auto !important;
         scroll-behavior:auto !important;
     }
     }
}
}


خط ۹۹۴: خط ۱٬۴۷۲:
<header class="print-banner-hero">
<header class="print-banner-hero">


    <!-- تصویر دستگاه -->


     <div class="print-banner-hero-image">
     <div class="print-banner-hero-image">


         <img
         <img
             src="https://dl.faraghaib.ir/m/260005-01/260005-01-04.jpg"
             src="https://dl.faraghaib.ir/m/260005-01/260005-01-67.png"
             alt="دستگاه چاپ بنر اکوسالوند با کیفیت چاپ بالا"
             alt="دستگاه چاپ بنر اکوسالوند با کیفیت چاپ بالا"
             loading="eager"
             loading="eager"
خط ۱٬۰۰۷: خط ۱٬۴۸۳:
     </div>
     </div>


    <!-- متن -->


     <div class="print-banner-hero-content">
     <div class="print-banner-hero-content">
خط ۱٬۰۳۰: خط ۱٬۵۰۴:
         <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 class="print-benefit-icon">
                 <div class="print-benefit-icon">
                     <i class="fa-solid fa-award"
                     <i class="fa-solid fa-award"
                       aria-hidden="true"></i>
                       aria-hidden="true"></i>
                 </div>
                 </div>


خط ۱٬۰۶۴: خط ۱٬۵۳۶:


                 <div class="print-benefit-icon">
                 <div class="print-benefit-icon">
                     <i class="fa-solid fa-sun"
                     <i class="fa-solid fa-sun"
                       aria-hidden="true"></i>
                       aria-hidden="true"></i>
                 </div>
                 </div>


خط ۱٬۰۸۱: خط ۱٬۵۵۱:


                 <div class="print-benefit-icon">
                 <div class="print-benefit-icon">
                     <i class="fa-solid fa-leaf"
                     <i class="fa-solid fa-leaf"
                       aria-hidden="true"></i>
                       aria-hidden="true"></i>
                 </div>
                 </div>


خط ۱٬۰۹۸: خط ۱٬۵۶۶:


                 <div class="print-benefit-icon">
                 <div class="print-benefit-icon">
                     <i class="fa-solid fa-gauge-high"
                     <i class="fa-solid fa-gauge-high"
                       aria-hidden="true"></i>
                       aria-hidden="true"></i>
                 </div>
                 </div>


خط ۱٬۱۱۵: خط ۱٬۵۸۱:


                 <div class="print-benefit-icon">
                 <div class="print-benefit-icon">
                     <i class="fa-solid fa-thumbs-up"
                     <i class="fa-solid fa-thumbs-up"
                       aria-hidden="true"></i>
                       aria-hidden="true"></i>
                 </div>
                 </div>


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


</div>


</section>


<!-- =========================================================
<!-- =========================================================
     نمونه کارها
     PORTFOLIO
========================================================= -->
========================================================= -->


<div class="print-section-heading">
<div class="print-section-heading">


     <h2>
     <h2>نمونه کارها</h2>
        نمونه کارها
    </h2>


</div>
</div>
خط ۱٬۱۵۲: خط ۱٬۶۱۶:
<section class="print-portfolio"
<section class="print-portfolio"
         aria-label="نمونه کارهای چاپ بنر">
         aria-label="نمونه کارهای چاپ بنر">


<div class="print-portfolio-grid">
<div class="print-portfolio-grid">


    <!-- نمونه 1 -->


     <figure class="print-portfolio-item">
     <figure class="print-portfolio-item">


         <img
         <img
             src="https://dl.faraghaib.ir/m/260005-01/260005-01-58.png"
             src="https://dl.faraghaib.ir/m/260005-01/260005-01-66.png"
             alt="چاپ بنر تبلیغاتی فضای باز"
             alt="چاپ بنر تبلیغاتی فضای باز"
             loading="lazy"
             loading="lazy"
خط ۱٬۱۷۴: خط ۱٬۶۳۵:
     </figure>
     </figure>


    <!-- نمونه 2 -->


     <figure class="print-portfolio-item">
     <figure class="print-portfolio-item">
خط ۱٬۱۹۳: خط ۱٬۶۵۱:
     </figure>
     </figure>


    <!-- نمونه 3 -->


     <figure class="print-portfolio-item">
     <figure class="print-portfolio-item">
خط ۱٬۲۱۲: خط ۱٬۶۶۷:
     </figure>
     </figure>


    <!-- نمونه 4 -->


     <figure class="print-portfolio-item">
     <figure class="print-portfolio-item">
خط ۱٬۲۳۱: خط ۱٬۶۸۳:
     </figure>
     </figure>


    <!-- نمونه 5 -->


     <figure class="print-portfolio-item">
     <figure class="print-portfolio-item">
خط ۱٬۲۵۴: خط ۱٬۷۰۳:


</section>
</section>




<!-- =========================================================
<!-- =========================================================
     مزایا
     ADVANTAGES
========================================================= -->
========================================================= -->


<div class="print-section-heading">
<div class="print-section-heading">


     <h2>
     <h2>مزایا</h2>
        مزایا
    </h2>


</div>
</div>
خط ۱٬۲۷۲: خط ۱٬۷۱۸:
<section class="print-advantages"
<section class="print-advantages"
         aria-label="مزایای چاپ اکوسالوند">
         aria-label="مزایای چاپ اکوسالوند">


<div class="print-advantages-grid">
<div class="print-advantages-grid">
خط ۱٬۲۸۰: خط ۱٬۷۲۵:


         <div class="print-advantage-icon">
         <div class="print-advantage-icon">
             <i class="fa-solid fa-check"
             <i class="fa-solid fa-check"
               aria-hidden="true"></i>
               aria-hidden="true"></i>
         </div>
         </div>


         <p class="print-advantage-text">
         <p class="print-advantage-text">
             چاپ بر روی طیف وسیعی
             چاپ بر روی طیف وسیعی
             از متریال‌ها
             از متریال‌ها
         </p>
         </p>


     </div>
     </div>




خط ۱٬۳۰۰: خط ۱٬۷۴۰:


         <div class="print-advantage-icon">
         <div class="print-advantage-icon">
             <i class="fa-solid fa-check"
             <i class="fa-solid fa-check"
               aria-hidden="true"></i>
               aria-hidden="true"></i>
         </div>
         </div>


         <p class="print-advantage-text">
         <p class="print-advantage-text">
             رنگ‌های زنده
             رنگ‌های زنده
             با ماندگاری طولانی
             با ماندگاری طولانی
         </p>
         </p>


     </div>
     </div>




خط ۱٬۳۲۰: خط ۱٬۷۵۵:


         <div class="print-advantage-icon">
         <div class="print-advantage-icon">
             <i class="fa-solid fa-check"
             <i class="fa-solid fa-check"
               aria-hidden="true"></i>
               aria-hidden="true"></i>
         </div>
         </div>


         <p class="print-advantage-text">
         <p class="print-advantage-text">
             مقاوم در برابر شرایط
             مقاوم در برابر شرایط
             جوی و خراش
             جوی و خراش
         </p>
         </p>


     </div>
     </div>




خط ۱٬۳۴۰: خط ۱٬۷۷۰:


         <div class="print-advantage-icon">
         <div class="print-advantage-icon">
             <i class="fa-solid fa-check"
             <i class="fa-solid fa-check"
               aria-hidden="true"></i>
               aria-hidden="true"></i>
         </div>
         </div>


         <p class="print-advantage-text">
         <p class="print-advantage-text">
             سازگار با محیط زیست
             سازگار با محیط زیست
             بدون بوی تند
             بدون بوی تند
         </p>
         </p>


     </div>
     </div>




خط ۱٬۳۶۰: خط ۱٬۷۸۵:


         <div class="print-advantage-icon">
         <div class="print-advantage-icon">
             <i class="fa-solid fa-check"
             <i class="fa-solid fa-check"
               aria-hidden="true"></i>
               aria-hidden="true"></i>
         </div>
         </div>


         <p class="print-advantage-text">
         <p class="print-advantage-text">
             هزینه نگهداری پایین
             هزینه نگهداری پایین
             و عمر طولانی دستگاه
             و عمر طولانی دستگاه
         </p>
         </p>


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