پرش به محتوا

کانتینر ترکیبی - فراغیب

از فراغیب
→ تفاوت با ویرایش قدیمی‌تر
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
 
(۵ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد)
خط ۲۴: خط ۲۴:
     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;
خط ۲۹۵: خط ۳۷۶:
     margin:10px 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;
خط ۳۰۸: خط ۳۸۹:
     background:var(--gold);
     background:var(--gold);
}
}


.print-section-heading h2{
.print-section-heading h2{
     position:relative;
     position:relative;
     z-index:2;
     z-index:2;


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


     font-size:15px;
     font-size:15px;
     line-height:1.6;
     line-height:1.6;
     font-weight:800;
     font-weight:800;
}
}
خط ۳۳۵: خط ۴۱۸:
.print-section-heading h3{
.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-portfolio-item{
     .print-banner-benefits{
         aspect-ratio:1.25 / 1;
         grid-template-columns:repeat(2,minmax(0,1fr));
 
        gap:7px;
     }
     }


    .print-benefit{
        min-height:110px;
    }
    .print-portfolio-item{
        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%;


    .print-banner-subtitle{
         margin-bottom:12px;
         font-size:clamp(20px,2vw,26px);
    }


        font-size:clamp(36px,3.5vw,54px);


    .print-banner-description{
         line-height:1.4;
        font-size:17px;
         line-height:2.15;
     }
     }




     /* =====================================================
     .print-banner-subtitle{
      BENEFITS
 
    ===================================================== */
        width:100%;


    .print-banner-benefits{
         margin-bottom:13px;
         margin-top:28px;
    }


        font-size:clamp(19px,1.8vw,24px);


    .print-benefit{
         line-height:1.8;
         min-height:120px;
     }
     }




     /* =====================================================
     .print-banner-subtitle::before,
      PORTFOLIO
    .print-banner-subtitle::after{
      دقیقاً ۵ تصویر
 
    ===================================================== */
        width:42px;


    .print-portfolio{
         flex:0 0 42px;
         padding:20px 8px 8px;
     }
     }




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


         gap:9px;
         max-width:590px;


         align-items:stretch;
         font-size:16px;
    }


        line-height:2;


    .print-portfolio-item{
         text-align:justify;
        width:100%;
     }
 
         aspect-ratio:1.05 / 1;
 
        height:auto;
     }




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


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




     .print-advantage{
     .print-benefit{
         min-height:95px;
 
         padding:8px 12px;
         min-height:100px;
    }
 
         padding:8px 5px;


        border:1px solid rgba(11,49,87,.25);


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




     .print-advantage-icon{
     .print-benefit-icon{
 
         width:40px;
         width:40px;
         height:40px;
         height:40px;
    }


        margin-bottom:5px;


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


}


    .print-benefit-title{


/* =========================================================
        font-size:12px;
  LARGE DESKTOP
========================================================= */


@media (min-width:1200px){
        line-height:1.7;
 
    .print-banner-container{
        padding:22px;
     }
     }




     .print-banner-hero{
     /* SECTION HEADINGS */
        grid-template-columns:
            minmax(0,53%)
            minmax(0,47%);
    }
 


     .print-banner-hero-image{
     .print-section-heading{
        min-height:560px;
    }


        margin-top:20px;


    .print-banner-hero-image img{
         margin-bottom:0;
         min-height:560px;
     }
     }




     .print-banner-hero-content{
     .print-section-heading h2{
        padding:35px 40px;
    }


        min-width:170px;


    .print-banner-title{
         padding:4px 22px;
         font-size:clamp(42px,4vw,64px);
    }


        font-size:16px;


    .print-banner-description{
         line-height:1.7;
         font-size:18px;
     }
     }




     /* نمونه کارها */
     /* PORTFOLIO */
    .print-portfolio-grid{
        gap:10px;
    }


    .print-portfolio{


    .print-portfolio-item{
        width:100%;
         aspect-ratio:1.18 / 1;
 
        margin:0;
 
        padding:16px 8px 8px;
 
         border-radius:20px;
     }
     }




     .print-portfolio-caption{
     .print-portfolio-grid{
        min-height:76px;
        font-size:15px;
    }


}
        display:grid;


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


/* =========================================================
        gap:9px;
  VERY LARGE SCREEN
========================================================= */


@media (min-width:1500px){
        width:100%;


    .print-banner-container{
        align-items:stretch;
        padding:25px;
     }
     }




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


}
        width:100%;


        aspect-ratio:1 / 1;


/* =========================================================
        height:auto;
  TOUCH DEVICES
 
  در موبایل توضیح روی عکس قابل مشاهده است
        border-radius:13px;
========================================================= */
    }


@media (hover:none){


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


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


         background:
         object-fit:cover;
            linear-gradient(
                to top,
                rgba(7,31,56,.96),
                rgba(7,31,56,.65)
            );
     }
     }


}


    .print-portfolio-caption{


/* =========================================================
        min-height:66px;
  جلوگیری از فضای اضافی احتمالی قالب
========================================================= */


.print-banner-section
        padding:8px 7px;
.print-portfolio-item::after{


    content:none !important;
        font-size:12px;
}


.print-banner-section
        line-height:1.7;
.print-portfolio-item{
     }
     font-size:0 !important;
}


.print-banner-section
.print-portfolio-item img{
    font-size:0 !important;
}


    /* ADVANTAGES */


/* =========================================================
    .print-advantages{
  ACCESSIBILITY
========================================================= */


@media (prefers-reduced-motion:reduce){
        width:100%;


    .print-banner-section *,
         margin:0;
    .print-banner-section *::before,
    .print-banner-section *::after{
        animation:none !important;
        transition:none !important;
         scroll-behavior:auto !important;
    }


}
        padding:12px 8px;


</style>
        border-radius:20px;
    }




<section class="print-banner-section"
    .print-advantages-grid{
        aria-labelledby="print-banner-title">


<div class="print-banner-container">
        display:grid;


        grid-template-columns:
            repeat(5,minmax(0,1fr));
        width:100%;
    }


<!-- =========================================================
    HERO
========================================================= -->


<header class="print-banner-hero">
    .print-advantage{


        min-height:82px;


    <!-- تصویر دستگاه -->
        padding:8px 10px;


     <div class="print-banner-hero-image">
        gap:8px;
     }


        <img
            src="https://dl.faraghaib.ir/m/260005-01/260005-01-04.jpg"
            alt="دستگاه چاپ بنر اکوسالوند با کیفیت چاپ بالا"
            loading="eager"
        >


     </div>
     .print-advantage:not(:last-child){


        border-left:1px dotted #aaa;


     <!-- متن -->
        border-bottom:0;
     }


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


        <h1 id="print-banner-title"
    .print-advantage-icon{
            class="print-banner-title">


            دستگاه چاپ بنر
        width:36px;
            <span>(اکوسالوند)</span>
        height:36px;


         </h1>
         font-size:15px;
    }




        <h2 class="print-banner-subtitle">
    .print-advantage-text{


            چاپ با کیفیت بالا، رنگ‌های زنده و ماندگار
        font-size:12px;


         </h2>
         line-height:1.75;
    }
}




        <p class="print-banner-description">
/* =========================================================
  LARGE DESKTOP
========================================================= */


            چاپ اکوسالوند نسل جدید چاپ فضای باز است که
@media (min-width:1200px){
            با استفاده از جوهرهای دوستدار محیط زیست،
            کیفیتی فوق‌العاده، دوام بالا و رنگ‌هایی
            درخشان را بر روی انواع متریال‌ها ارائه می‌دهد.


        </p>
    .print-banner-container{


        max-width:1450px;


         <!-- مزایای اصلی -->
         padding:20px 24px 28px;
    }


        <div class="print-banner-benefits"
            aria-label="مزایای دستگاه چاپ بنر">


    .print-banner-hero{


             <div class="print-benefit">
        grid-template-columns:
            minmax(0,1.06fr)
             minmax(0,.94fr);


                <div class="print-benefit-icon">
        min-height:470px;


                    <i class="fa-solid fa-award"
        max-height:570px;
                      aria-hidden="true"></i>


                </div>
        border-radius:26px;
    }


                <p class="print-benefit-title">
                    کیفیت چاپ بالا
                    و جزئیات دقیق
                </p>


            </div>
    .print-banner-hero-image{


        min-height:470px;


            <div class="print-benefit">
        max-height:570px;
    }


                <div class="print-benefit-icon">


                    <i class="fa-solid fa-sun"
    .print-banner-hero-image img{
                      aria-hidden="true"></i>


                </div>
        min-height:470px;


                <p class="print-benefit-title">
        max-height:570px;
                    مقاومت بالا در برابر
    }
                    نور خورشید و آب
                </p>


             </div>
 
 
    .print-banner-hero-content{
 
 
             <div class="print-benefit">
        min-height:470px;
 
 
                 <div class="print-benefit-icon">
        padding:40px 42px;
 
    }
                     <i class="fa-solid fa-leaf"
 
                       aria-hidden="true"></i>
 
 
    .print-banner-title{
                 </div>
 
        font-size:clamp(42px,3.3vw,60px);
 
        line-height:1.4;
    }
 
 
    .print-banner-subtitle{
 
        font-size:clamp(20px,1.7vw,26px);
    }
 
 
    .print-banner-description{
 
        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{
 
        gap:10px;
    }
 
 
    .print-portfolio-item{
 
        aspect-ratio:1.05 / 1;
 
        border-radius:14px;
    }
 
 
    .print-portfolio-caption{
 
        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 DESKTOP
========================================================= */
 
@media (min-width:1500px){
 
    .print-banner-container{
 
        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{
 
        aspect-ratio:1.08 / 1;
    }
 
 
    .print-portfolio-caption{
 
        min-height:74px;
 
        font-size:14px;
    }
}
 
 
/* =========================================================
  TOUCH DEVICES
========================================================= */
 
@media (hover:none){
 
    .print-portfolio-caption{
 
        opacity:1;
 
        visibility:visible;
 
        min-height:58px;
 
        background:
            linear-gradient(
                to top,
                rgba(7,31,56,.96),
                rgba(7,31,56,.65)
            );
    }
}
 
 
/* =========================================================
  جلوگیری از فضای اضافی احتمالی قالب
========================================================= */
 
.print-banner-section
.print-portfolio-item::after{
 
    content:none !important;
}
 
.print-banner-section
.print-portfolio-item{
 
    font-size:0 !important;
}
 
.print-banner-section
.print-portfolio-item img{
 
    font-size:0 !important;
}
 
 
/* =========================================================
  ACCESSIBILITY
========================================================= */
 
@media (prefers-reduced-motion:reduce){
 
    .print-banner-section *,
    .print-banner-section *::before,
    .print-banner-section *::after{
 
        animation:none !important;
 
        transition:none !important;
 
        scroll-behavior:auto !important;
    }
}
 
</style>
 
 
<section class="print-banner-section"
        aria-labelledby="print-banner-title">
 
<div class="print-banner-container">
 
 
<!-- =========================================================
    HERO
========================================================= -->
 
<header class="print-banner-hero">
 
 
    <div class="print-banner-hero-image">
 
        <img
            src="https://dl.faraghaib.ir/m/260005-01/260005-01-67.png"
            alt="دستگاه چاپ بنر اکوسالوند با کیفیت چاپ بالا"
            loading="eager"
        >
 
    </div>
 
 
    <div class="print-banner-hero-content">
 
        <h1 id="print-banner-title"
            class="print-banner-title">
 
            دستگاه چاپ بنر
            <span>(اکوسالوند)</span>
 
        </h1>
 
 
        <h2 class="print-banner-subtitle">
 
            چاپ با کیفیت بالا، رنگ‌های زنده و ماندگار
 
        </h2>
 
 
        <p class="print-banner-description">
 
            چاپ اکوسالونت با کیفیت بالا، دوام عالی و رنگ‌های درخشان،
            گزینه‌ای مناسب برای چاپ فضای باز است.
 
        </p>
 
 
        <!-- =================================================
            BENEFITS TABLE
        ================================================= -->
 
        <div class="print-banner-benefits"
            aria-label="مزایای دستگاه چاپ بنر">
 
 
            <div class="print-benefit">
 
                <div class="print-benefit-icon">
                    <i class="fa-solid fa-award"
                      aria-hidden="true"></i>
                </div>
 
                <p class="print-benefit-title">
                    کیفیت چاپ بالا
                    و جزئیات دقیق
                </p>
 
             </div>
 
 
             <div class="print-benefit">
 
                 <div class="print-benefit-icon">
                    <i class="fa-solid fa-sun"
                      aria-hidden="true"></i>
                </div>
 
                <p class="print-benefit-title">
                    مقاومت بالا در برابر
                    نور خورشید و آب
                </p>
 
            </div>
 
 
            <div class="print-benefit">
 
                <div class="print-benefit-icon">
                     <i class="fa-solid fa-leaf"
                       aria-hidden="true"></i>
                </div>
 
                <p class="print-benefit-title">
                    جوهرهای سازگار
                    با محیط زیست
                </p>
 
            </div>
 
 
            <div class="print-benefit">
 
                <div class="print-benefit-icon">
                    <i class="fa-solid fa-gauge-high"
                      aria-hidden="true"></i>
                </div>
 
                <p class="print-benefit-title">
                    سرعت چاپ بالا
                    و تحویل سریع
                </p>
 
            </div>
 
 
            <div class="print-benefit">
 
                <div class="print-benefit-icon">
                    <i class="fa-solid fa-thumbs-up"
                      aria-hidden="true"></i>
                 </div>


                 <p class="print-benefit-title">
                 <p class="print-benefit-title">
                     جوهرهای سازگار
                     مقرون به صرفه
                     با محیط زیست
                     و اقتصادی
                 </p>
                 </p>


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




            <div class="print-benefit">
        </div>


                <div class="print-benefit-icon">
    </div>


                    <i class="fa-solid fa-gauge-high"
</header>
                      aria-hidden="true"></i>
 
                </div>
 
                <p class="print-benefit-title">
                    سرعت چاپ بالا
                    و تحویل سریع
                </p>
 
            </div>
 
 
            <div class="print-benefit">
 
                <div class="print-benefit-icon">
 
                    <i class="fa-solid fa-thumbs-up"
                      aria-hidden="true"></i>
 
                </div>
 
                <p class="print-benefit-title">
                    مقرون به صرفه
                    و اقتصادی
                </p>
 
            </div>
 
 
        </div>
 
    </div>
 
</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">
خط ۱٬۱۹۵: خط ۱٬۶۳۵:
     </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/w/index.php?title=الگو:کانتینر_ترکیبی&oldid=6797»