پرش به محتوا

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

از فراغیب
→ تفاوت با ویرایش قدیمی‌ترتفاوت با ویرایش جدیدتر ←
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
خط ۱: خط ۱:
<html>
<html lang="fa" dir="rtl">
 
<!-- =========================================================
    دستگاه چاپ بنر | اکوسالوند
    Mobile First + SEO + Responsive
========================================================= -->


<link rel="stylesheet"
<link rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">


<style>
<style>


/* =========================================================
/* =========================================================
   VARIABLES
   ROOT
========================================================= */
========================================================= */
.print-banner-section {
    --navy: #0b3157;
    --navy-dark: #071f38;
    --green: #238b68;
    --green-dark: #176b50;
    --gold: #c99a2e;
    --gold-light: #e8c86a;
    --white: #ffffff;
    --light: #f7f8f5;
    --text: #17202a;
    --border: #d9dedb;


     direction: rtl;
.print-banner-section{
     width: 100%;
    --navy:#0b3157;
     box-sizing: border-box;
    --navy-dark:#071f38;
     font-family: IRANSans, "Vazirmatn", Tahoma, Arial, sans-serif;
    --green:#238b68;
     color: var(--text);
    --green-dark:#176b50;
     background: var(--white);
    --gold:#c99a2e;
    --gold-light:#e8c86a;
    --white:#ffffff;
    --light:#f7f8f5;
    --text:#17202a;
    --border:#d9dedb;
 
     direction:rtl;
     width:100%;
     margin:0;
    padding:0;
    background:#fff;
 
     font-family:
        IRANSans,
        "Vazirmatn",
        Tahoma,
        Arial,
        sans-serif;
 
     color:var(--text);
     box-sizing:border-box;
}
}
/* =========================================================
  RESET
========================================================= */


.print-banner-section *,
.print-banner-section *,
.print-banner-section *::before,
.print-banner-section *::before,
.print-banner-section *::after {
.print-banner-section *::after{
     box-sizing: border-box;
     box-sizing:border-box;
}
 
.print-banner-section img{
    max-width:100%;
}
 
.print-banner-section figure,
.print-banner-section h1,
.print-banner-section h2,
.print-banner-section p{
    margin-top:0;
}
}


خط ۴۴: خط ۶۵:
   MAIN CONTAINER
   MAIN CONTAINER
========================================================= */
========================================================= */
.print-banner-container {
 
     width: min(1500px, 100%);
.print-banner-container{
     margin: 0 auto;
     width:100%;
     padding: 12px;
    max-width:1500px;
     margin:0 auto;
     padding:10px;
}
}


خط ۵۳: خط ۷۶:
/* =========================================================
/* =========================================================
   HERO
   HERO
   عکس + متن بدون مرز
   عکس و متن بدون خط و مرز
========================================================= */
========================================================= */
.print-banner-hero {
 
     display: flex;
.print-banner-hero{
     flex-direction: column;
     display:grid;
     width: 100%;
     grid-template-columns:1fr;
     overflow: hidden;
     width:100%;
     border-radius: 26px;
     overflow:hidden;
     background: #fff;
     border-radius:26px;
     background:#fff;
}
}




/* IMAGE */
/* =========================================================
.print-banner-hero-image {
  HERO IMAGE
     width: 100%;
========================================================= */
     min-height: 280px;
 
     overflow: hidden;
.print-banner-hero-image{
    position:relative;
     width:100%;
     height:clamp(260px,55vw,560px);
     overflow:hidden;
    margin: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%;
     min-height: 280px;
     margin:0;
     object-fit: cover;
    padding:0;
     object-position: center;
    border:0;
 
     object-fit:cover;
     object-position:center;
}
}




/* TEXT */
/* =========================================================
.print-banner-hero-content {
  HERO CONTENT
     display: flex;
========================================================= */
     flex-direction: column;
 
     justify-content: center;
.print-banner-hero-content{
     text-align: center;
     display:flex;
     padding: 28px 18px;
     flex-direction:column;
     background: #fff;
     justify-content:center;
     align-items:center;
 
    width:100%;
     padding:25px 15px;
 
     background:#fff;
    text-align:center;
}
}


.print-banner-title {
 
     margin: 0 0 15px;
.print-banner-title{
     color: var(--navy);
    width:100%;
     font-size: clamp(28px, 6vw, 56px);
     margin:0 0 12px;
     line-height: 1.5;
 
     font-weight: 900;
     color:var(--navy);
 
     font-size:clamp(28px,7vw,62px);
     line-height:1.45;
     font-weight:900;
}
}


.print-banner-subtitle {
 
     display: flex;
.print-banner-title span{
    align-items: center;
     white-space:nowrap;
    justify-content: center;
    gap: 10px;
    margin: 0 0 18px;
    color: var(--navy);
    font-size: clamp(17px, 3vw, 27px);
    font-weight: 800;
    line-height: 1.8;
}
}
.print-banner-subtitle{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    gap:9px;
    margin:0 0 15px;
    color:var(--navy);
    font-size:clamp(16px,3.5vw,27px);
    line-height:1.8;
    font-weight:800;
}


.print-banner-subtitle::before,
.print-banner-subtitle::before,
.print-banner-subtitle::after {
.print-banner-subtitle::after{
     content: "";
     content:"";
     display: block;
 
     width: 35px;
     display:block;
     height: 2px;
 
     flex-shrink: 0;
     width:clamp(25px,5vw,55px);
     background: var(--gold);
     height:2px;
 
     flex:0 0 auto;
 
     background:var(--gold);
}
}


.print-banner-description {
 
     max-width: 650px;
.print-banner-description{
     margin: 0 auto;
    width:100%;
     font-size: clamp(15px, 2vw, 19px);
     max-width:680px;
     line-height: 2.2;
 
    color: #222;
     margin:0 auto;
 
    color:#222;
 
     font-size:clamp(15px,2.2vw,19px);
     line-height:2.15;
}
}




/* =========================================================
/* =========================================================
   BENEFITS ICONS
   BENEFITS
========================================================= */
========================================================= */
.print-banner-benefits {
 
     display: grid;
.print-banner-benefits{
     grid-template-columns: repeat(2, 1fr);
     display:grid;
     margin-top: 28px;
     grid-template-columns:repeat(2,1fr);
     border-top: 1px solid #e3e3e3;
 
     width:100%;
 
     margin-top:25px;
}
}


.print-benefit {
 
     position: relative;
.print-benefit{
     display: flex;
     position:relative;
     flex-direction: column;
 
     align-items: center;
     display:flex;
     justify-content: center;
     flex-direction:column;
     text-align: center;
     align-items:center;
     min-height: 125px;
     justify-content:center;
     padding: 15px 8px;
 
     min-width:0;
     min-height:115px;
 
     padding:12px 7px;
 
    text-align:center;
}
}


.print-benefit:not(:last-child)::after {
 
     content: "";
.print-benefit:not(:last-child)::after{
     position: absolute;
     content:"";
     left: 0;
 
     top: 20%;
     position:absolute;
     height: 60%;
 
    width: 1px;
    top:20%;
     background: #d4d4d4;
     left:0;
 
     width:1px;
     height:60%;
 
     background:#d5d5d5;
}
}


.print-benefit-icon {
 
     width: 48px;
.print-benefit-icon{
     height: 48px;
     display:flex;
     margin-bottom: 8px;
     align-items:center;
     display: flex;
     justify-content:center;
     align-items: center;
 
     justify-content: center;
     width:46px;
     color: var(--navy);
     height:46px;
     font-size: 34px;
 
     margin-bottom:7px;
 
     color:var(--navy);
 
     font-size:31px;
}
}


.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 {
 
     color: var(--gold);
.print-benefit:nth-child(3) .print-benefit-icon{
     color:var(--gold);
}
}


.print-benefit-title {
 
     margin: 0;
.print-benefit-title{
     color: #111;
     margin:0;
     font-size: 14px;
 
     line-height: 1.8;
     color:#111;
     font-weight: 700;
 
     font-size:13px;
     line-height:1.8;
     font-weight:700;
}
}


خط ۱۹۴: خط ۲۸۳:
   SECTION TITLE
   SECTION TITLE
========================================================= */
========================================================= */
.print-section-heading {
 
     position: relative;
.print-section-heading{
     display: flex;
     position:relative;
     justify-content: center;
 
     align-items: center;
     display:flex;
     margin: 35px 0 0;
    align-items:center;
     justify-content:center;
 
     width:100%;
 
     margin:30px 0 0;
}
}


.print-section-heading h2 {
 
     position: relative;
.print-section-heading::before{
     z-index: 2;
     content:"";
     min-width: 190px;
 
     margin: 0;
     position:absolute;
     padding: 7px 30px;
     right:0;
    border-radius: 50px;
     left:0;
     background: var(--navy);
 
    color: #fff;
     height:1px;
    text-align: center;
 
    font-size: 21px;
     background:var(--gold);
    font-weight: 800;
    box-shadow: 0 4px 12px rgba(11,49,87,.12);
}
}


.print-section-heading::before {
 
     content: "";
.print-section-heading h2{
     position: absolute;
    position:relative;
     right: 0;
     z-index:2;
     left: 0;
 
     height: 1px;
     min-width:180px;
     background: var(--gold);
 
     margin:0;
 
     padding:6px 30px;
 
     border-radius:50px;
 
     background:var(--navy);
 
    color:#fff;
 
    text-align:center;
 
    font-size:21px;
    line-height:1.6;
    font-weight:800;
}
}




/* =========================================================
/* =========================================================
   PORTFOLIO
   PORTFOLIO CONTAINER
  بدون اسلایدر و بدون حرکت
========================================================= */
========================================================= */
.print-portfolio {
 
     margin-top: -1px;
.print-portfolio{
     padding: 22px 8px 10px;
    width:100%;
     border: 1px solid var(--navy);
 
     border-radius: 22px;
     margin:0;
     background: #fff;
 
     padding:20px 8px 8px;
 
     border:1px solid var(--navy);
     border-radius:22px;
 
     background:#fff;
}
}




/* GRID */
/* =========================================================
.print-portfolio-grid {
  PORTFOLIO GRID
     display: grid;
  بسیار مهم:
     grid-template-columns: 1fr;
  بدون height ثابت
     gap: 10px;
========================================================= */
 
.print-portfolio-grid{
     display:grid;
 
     grid-template-columns:
        repeat(1,minmax(0,1fr));
 
     gap:10px;
 
    width:100%;
 
    margin:0;
    padding:0;
}
}




/* CARD */
/* =========================================================
.print-portfolio-item {
  PORTFOLIO ITEM
     position: relative;
  نسبت ثابت باعث می‌شود همه عکس‌ها یک اندازه باشند
     height: 240px;
========================================================= */
     margin: 0;
 
     overflow: hidden;
.print-portfolio-item{
     border-radius: 15px;
     position:relative;
     background: #eee;
 
    display:block;
 
    width:100%;
 
    aspect-ratio:1.25 / 1;
 
     min-width:0;
 
     margin:0;
    padding:0;
 
     overflow:hidden;
 
     border-radius:15px;
 
     background:#eef1ef;
 
    line-height:0;
 
    isolation:isolate;
}
}




/* IMAGE */
/* =========================================================
.print-portfolio-item img {
  PORTFOLIO IMAGE
     display: block;
========================================================= */
     width: 100%;
 
     height: 100%;
.print-portfolio-item img{
     object-fit: cover;
    position:absolute;
     object-position: center;
 
}
    inset:0;
 
     display:block;
 
     width:100%;
     height:100%;
 
     max-width:none;
 
    margin:0;
     padding:0;
 
    border:0;


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


/*
    vertical-align:middle;
  هیچ transition یا animation برای تصویر وجود ندارد.
 
  بنابراین اسلایدر کاملاً ثابت است.
    line-height:0;
*/
}




خط ۲۷۸: خط ۴۳۷:
   HOVER DESCRIPTION
   HOVER DESCRIPTION
========================================================= */
========================================================= */
.print-portfolio-caption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;


    display: flex;
.print-portfolio-caption{
    align-items: center;
     position:absolute;
     justify-content: center;


     min-height: 75px;
     right:0;
     padding: 12px 15px;
     bottom:0;
    left:0;


     background: rgba(7, 31, 56, .92);
     display:flex;
     color: #fff;
     align-items:center;
    justify-content:center;


     text-align: center;
     width:100%;
    font-size: 15px;
     min-height:72px;
     line-height: 1.8;
    font-weight: 700;


     /* مخفی در حالت عادی */
     margin:0;
     opacity: 0;
    padding:10px 12px;
     visibility: hidden;
 
    background:rgba(7,31,56,.94);
 
    color:#fff;
 
    text-align:center;
 
    font-size:14px;
    line-height:1.8;
    font-weight:700;
 
     opacity:0;
     visibility:hidden;
 
    pointer-events:none;
 
    z-index:3;
}
}




/* فقط هنگام هاور */
/* فقط نمایش توضیح با Hover */
.print-portfolio-item:hover .print-portfolio-caption {
 
     opacity: 1;
.print-portfolio-item:hover
     visibility: visible;
.print-portfolio-caption{
     opacity:1;
     visibility:visible;
}
}


خط ۳۱۵: خط ۴۸۶:
   ADVANTAGES
   ADVANTAGES
========================================================= */
========================================================= */
.print-advantages {
    margin-top: 0;
    padding: 25px 10px;


     border: 1px solid var(--border);
.print-advantages{
     border-radius: 22px;
     width:100%;
 
     margin:0;


     background: #fff;
    padding:20px 8px;
 
    border:1px solid var(--border);
    border-radius:22px;
 
     background:#fff;
}
}


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


.print-advantage {
 
     display: flex;
.print-advantage{
     flex-direction: row-reverse;
     display:flex;
     align-items: center;
 
     justify-content: center;
     flex-direction:row-reverse;
     gap: 12px;
 
     min-height: 80px;
     align-items:center;
     padding: 12px 10px;
     justify-content:center;
     text-align: center;
 
     gap:10px;
 
    min-width:0;
     min-height:75px;
 
     padding:10px;
 
     text-align:center;
}
}


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


.print-advantage-icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;


     display: flex;
.print-advantage-icon{
     align-items: center;
     display:flex;
     justify-content: center;
     align-items:center;
     justify-content:center;
 
    flex:0 0 auto;
 
    width:38px;
    height:38px;
 
    border:2px solid var(--navy);
    border-radius:50%;


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


    color: var(--navy);
     font-size:16px;
     font-size: 17px;
}
}


.print-advantage-text {
 
     margin: 0;
.print-advantage-text{
     font-size: 14px;
     margin:0;
     line-height: 1.9;
 
     font-weight: 700;
    color:#111;
     color: #111;
 
     font-size:14px;
     line-height:1.8;
     font-weight:700;
}
 
 
/* =========================================================
  SMALL MOBILE
========================================================= */
 
@media (max-width:399px){
 
    .print-banner-container{
        padding:7px;
    }
 
    .print-banner-hero{
        border-radius:20px;
    }
 
    .print-banner-hero-content{
        padding:20px 10px;
    }
 
    .print-banner-title{
        font-size:27px;
    }
 
    .print-banner-subtitle{
        font-size:15px;
    }
 
     .print-banner-description{
        font-size:14px;
        line-height:2;
    }
 
    .print-banner-benefits{
        grid-template-columns:repeat(2,1fr);
    }
 
    .print-benefit{
        min-height:105px;
    }
 
    .print-benefit-title{
        font-size:12px;
    }
 
    .print-portfolio-item{
        aspect-ratio:1.2 / 1;
    }
 
}
 
 
/* =========================================================
  MOBILE
========================================================= */
 
@media (min-width:400px) and (max-width:599px){
 
    .print-banner-container{
        padding:9px;
    }
 
    .print-portfolio-item{
        aspect-ratio:1.25 / 1;
    }
 
}
}


خط ۳۷۴: خط ۶۳۵:
   TABLET
   TABLET
========================================================= */
========================================================= */
@media (min-width: 600px) {


     .print-banner-container {
@media (min-width:600px){
         padding: 18px;
 
     .print-banner-container{
         padding:15px;
     }
     }


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


     .print-portfolio-grid {
 
         grid-template-columns: repeat(2, 1fr);
     .print-benefit{
        gap: 12px;
         min-height:125px;
     }
     }


     .print-portfolio-item {
 
         height: 250px;
    .print-benefit-title{
        font-size:13px;
    }
 
 
    /* نمونه کارها */
    .print-portfolio-grid{
        grid-template-columns:
            repeat(3,minmax(0,1fr));
 
        gap:11px;
    }
 
 
     .print-portfolio-item{
         aspect-ratio:1.3 / 1;
    }
 
 
    /* مزایا پایین */
    .print-advantages-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
     }
     }


     .print-advantages-grid {
 
         grid-template-columns: repeat(2, 1fr);
     .print-advantage{
         min-height:85px;
     }
     }


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


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




/* =========================================================
/* =========================================================
   DESKTOP
   LAPTOP / DESKTOP
========================================================= */
========================================================= */
@media (min-width: 900px) {


     .print-banner-container {
@media (min-width:900px){
         padding: 24px;
 
     .print-banner-container{
         padding:20px;
    }
 
 
    /* =====================================================
      HERO DESKTOP
    ===================================================== */
 
    .print-banner-hero{
        grid-template-columns:
            minmax(0,53%)
            minmax(0,47%);
 
        align-items:stretch;
 
        min-height:0;
 
        border-radius:27px;
    }
 
 
    .print-banner-hero-image{
        height:auto;
        min-height:520px;
     }
     }


    /*
 
      عکس و متن کنار هم
     .print-banner-hero-image img{
      بدون border بین آنها
         height:100%;
    */
         min-height:520px;
     .print-banner-hero {
         display: grid;
        grid-template-columns: 52% 48%;
         min-height: 560px;
        border-radius: 28px;
     }
     }


     .print-banner-hero-image {
 
         min-height: 560px;
     .print-banner-hero-content{
         height: 100%;
         min-width:0;
 
         padding:30px 32px;
     }
     }


     .print-banner-hero-image img {
 
         min-height: 560px;
     .print-banner-title{
         font-size:clamp(38px,4vw,60px);
     }
     }


     .print-banner-hero-content {
 
         padding: 35px 40px;
     .print-banner-subtitle{
        text-align: center;
         font-size:clamp(20px,2vw,26px);
     }
     }


     .print-banner-title {
 
         font-size: clamp(38px, 4vw, 64px);
     .print-banner-description{
         font-size:17px;
        line-height:2.15;
     }
     }


     .print-banner-subtitle {
 
         font-size: 25px;
    /* =====================================================
      BENEFITS
    ===================================================== */
 
     .print-banner-benefits{
         margin-top:28px;
     }
     }


    .print-banner-subtitle::before,
 
     .print-banner-subtitle::after {
     .print-benefit{
         width: 55px;
         min-height:120px;
     }
     }


     .print-banner-description {
 
         font-size: 18px;
    /* =====================================================
         line-height: 2.15;
      PORTFOLIO
      دقیقاً ۵ تصویر
    ===================================================== */
 
    .print-portfolio{
        padding:20px 8px 8px;
    }
 
 
    .print-portfolio-grid{
        grid-template-columns:
            repeat(5,minmax(0,1fr));
 
        gap:9px;
 
        align-items:stretch;
    }
 
 
     .print-portfolio-item{
         width:100%;
 
        aspect-ratio:1.05 / 1;
 
        height:auto;
    }
 
 
    /* =====================================================
      ADVANTAGES
    ===================================================== */
 
    .print-advantages-grid{
        grid-template-columns:
            repeat(5,minmax(0,1fr));
    }
 
 
    .print-advantage{
        min-height:95px;
        padding:8px 12px;
    }
 
 
    .print-advantage:not(:last-child){
        border-left:1px dotted #aaa;
         border-bottom:0;
    }
 
 
    .print-advantage-icon{
        width:40px;
        height:40px;
    }
 
 
    .print-advantage-text{
        font-size:14px;
     }
     }


     .print-banner-benefits {
}
         margin-top: 35px;
 
        border-top: 0;
 
/* =========================================================
  LARGE DESKTOP
========================================================= */
 
@media (min-width:1200px){
 
     .print-banner-container{
         padding:22px;
     }
     }


     .print-benefit {
 
         min-height: 135px;
     .print-banner-hero{
         grid-template-columns:
            minmax(0,53%)
            minmax(0,47%);
     }
     }


     .print-portfolio {
 
         padding: 20px 8px 10px;
     .print-banner-hero-image{
        border-radius: 22px;
         min-height:560px;
     }
     }


    /*
 
      در دسکتاپ 5 تصویر کنار هم
     .print-banner-hero-image img{
    */
         min-height:560px;
     .print-portfolio-grid {
         grid-template-columns: repeat(5, 1fr);
        gap: 10px;
     }
     }


     .print-portfolio-item {
 
         height: 260px;
     .print-banner-hero-content{
         padding:35px 40px;
     }
     }


     .print-advantages-grid {
 
         grid-template-columns: repeat(5, 1fr);
     .print-banner-title{
         font-size:clamp(42px,4vw,64px);
     }
     }


     .print-advantage {
 
         min-height: 100px;
     .print-banner-description{
        padding: 10px 15px;
         font-size:18px;
     }
     }


     .print-advantage:not(:last-child) {
 
         border-left: 1px dotted #aaa;
    /* نمونه کارها */
        border-bottom: 0;
     .print-portfolio-grid{
         gap:10px;
     }
     }


     .print-advantage-icon {
 
         width: 40px;
     .print-portfolio-item{
        height: 40px;
         aspect-ratio:1.18 / 1;
     }
     }


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




/* =========================================================
/* =========================================================
   LARGE DESKTOP
   VERY LARGE SCREEN
========================================================= */
========================================================= */
@media (min-width: 1200px) {


     .print-banner-hero {
@media (min-width:1500px){
         grid-template-columns: 53% 47%;
 
        min-height: 590px;
     .print-banner-container{
         padding:25px;
     }
     }


    .print-banner-hero-image,
 
     .print-banner-hero-image img {
     .print-portfolio-item{
         min-height: 590px;
         aspect-ratio:1.2 / 1;
     }
     }


     .print-portfolio-item {
}
         height: 275px;
 
 
/* =========================================================
  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)
            );
     }
     }
}
}




/* =========================================================
/* =========================================================
   MOBILE TOUCH DEVICES
   جلوگیری از فضای اضافی احتمالی قالب
  روی موبایل Hover وجود ندارد؛ متن همیشه قابل مشاهده است.
========================================================= */
========================================================= */
@media (hover: none) and (max-width: 899px) {


    .print-portfolio-caption {
.print-banner-section
        opacity: 1;
.print-portfolio-item::after{
        visibility: visible;
 
        min-height: 65px;
    content:none !important;
        background: linear-gradient(
}
            to top,
 
            rgba(7,31,56,.95),
.print-banner-section
            rgba(7,31,56,.65)
.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;
     }
     }
}
}


خط ۵۵۵: خط ۹۸۵:
         aria-labelledby="print-banner-title">
         aria-labelledby="print-banner-title">


    <div class="print-banner-container">
<div class="print-banner-container">
 
 
<!-- =========================================================
    HERO
========================================================= -->
 
<header class="print-banner-hero">




        <!-- =================================================
    <!-- تصویر دستگاه -->
            HERO
        ================================================== -->
        <header class="print-banner-hero">


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


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


                <!--
    </div>
                    فقط آدرس عکس را عوض کنید.
                    هر اندازه عکسی قرار دهید، ساختار به هم نمی ریزد.
                -->
                <img
                    src="https://dl.faraghaib.ir/m/260005-01/260005-01-04.jpg"
                    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>
        <!-- مزایای اصلی -->
        <div class="print-banner-benefits"
            aria-label="مزایای دستگاه چاپ بنر">


            <!-- متن -->
            <div class="print-banner-hero-content">


                <h1 id="print-banner-title"
            <div class="print-benefit">
                    class="print-banner-title">
                    دستگاه چاپ بنر
                    <span>(اکوسالوند)</span>
                </h1>


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


                <h2 class="print-banner-subtitle">
                    <i class="fa-solid fa-award"
                    چاپ با کیفیت بالا، رنگ‌های زنده و ماندگار
                      aria-hidden="true"></i>
                </h2>


                </div>


                 <p class="print-banner-description">
                 <p class="print-benefit-title">
                     چاپ اکوسالوند نسل جدید چاپ فضای باز است که
                     کیفیت چاپ بالا
                    با استفاده از جوهرهای دوستدار محیط زیست،
                     و جزئیات دقیق
                     کیفیتی فوق‌العاده، دوام بالا و رنگ‌هایی
                    درخشان را بر روی انواع متریال‌ها ارائه می‌دهد.
                 </p>
                 </p>


            </div>


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


                    <div class="print-benefit">
            <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">
                <div class="print-benefit-icon">
                            کیفیت چاپ بالا
                            و جزئیات دقیق
                        </p>
                    </div>


                    <i class="fa-solid fa-sun"
                      aria-hidden="true"></i>


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


                        <p class="print-benefit-title">
                <p class="print-benefit-title">
                            مقاومت بالا در برابر
                    مقاومت بالا در برابر
                            نور خورشید و آب
                    نور خورشید و آب
                        </p>
                </p>
                    </div>


            </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">
            <div class="print-benefit">
                            جوهرهای سازگار
                            با محیط زیست
                        </p>
                    </div>


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


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


                        <p class="print-benefit-title">
                </div>
                            سرعت چاپ بالا
 
                            و تحویل سریع
                <p class="print-benefit-title">
                        </p>
                    جوهرهای سازگار
                    </div>
                    با محیط زیست
                </p>
 
            </div>




                    <div class="print-benefit">
            <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">
                <div class="print-benefit-icon">
                            مقرون به صرفه
 
                            و اقتصادی
                    <i class="fa-solid fa-gauge-high"
                        </p>
                      aria-hidden="true"></i>
                    </div>


                 </div>
                 </div>
                <p class="print-benefit-title">
                    سرعت چاپ بالا
                    و تحویل سریع
                </p>


             </div>
             </div>


        </header>


            <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 class="print-section-heading">
            <h2>نمونه کارها</h2>
         </div>
         </div>


    </div>
</header>


        <section class="print-portfolio"
                aria-label="نمونه کارهای چاپ بنر">




            <div class="print-portfolio-grid">
<!-- =========================================================
    نمونه کارها
========================================================= -->


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


                <!-- نمونه 1 -->
    <h2>
                <figure class="print-portfolio-item">
        نمونه کارها
    </h2>


                    <img
</div>
                        src="https://dl.faraghaib.ir/m/260005-01/260005-01-58.png"
                        alt="چاپ بنر تبلیغاتی فضای باز"
                        loading="lazy"
                    >


                    <figcaption class="print-portfolio-caption">
                        چاپ بنر تبلیغاتی فضای باز
                        با کیفیت بالا
                    </figcaption>


                </figure>
<section class="print-portfolio"
        aria-label="نمونه کارهای چاپ بنر">




                <!-- نمونه 2 -->
<div class="print-portfolio-grid">
                <figure class="print-portfolio-item">


                    <img
                        src="https://dl.faraghaib.ir/m/260005-01/260005-01-62.png"
                        alt="چاپ پوستر تبلیغاتی فروشگاه"
                        loading="lazy"
                    >


                    <figcaption class="print-portfolio-caption">
    <!-- نمونه 1 -->
                        چاپ پوستر تبلیغاتی
                        برای فروشگاه و برندها
                    </figcaption>


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


        <img
            src="https://dl.faraghaib.ir/m/260005-01/260005-01-58.png"
            alt="چاپ بنر تبلیغاتی فضای باز"
            loading="lazy"
        >


                <!-- نمونه 3 -->
        <figcaption class="print-portfolio-caption">
                <figure class="print-portfolio-item">
            چاپ بنر تبلیغاتی فضای باز
            با کیفیت بالا
        </figcaption>


                    <img
    </figure>
                        src="https://dl.faraghaib.ir/m/260005-01/260005-01-59.png"
                        alt="چاپ تبلیغات روی بدنه اتوبوس"
                        loading="lazy"
                    >


                    <figcaption class="print-portfolio-caption">
                        چاپ تبلیغات روی
                        وسایل نقلیه و اتوبوس
                    </figcaption>


                </figure>


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


                <!-- نمونه 4 -->
    <figure class="print-portfolio-item">
                <figure class="print-portfolio-item">


                    <img
        <img
                        src="https://dl.faraghaib.ir/m/260005-01/260005-01-60.png"
            src="https://dl.faraghaib.ir/m/260005-01/260005-01-62.png"
                        alt="چاپ استند و بنر تبلیغاتی"
            alt="چاپ پوستر تبلیغاتی فروشگاه"
                        loading="lazy"
            loading="lazy"
                    >
        >


                    <figcaption class="print-portfolio-caption">
        <figcaption class="print-portfolio-caption">
                        چاپ استند و بنر تبلیغاتی
            چاپ پوستر تبلیغاتی
                        مناسب رویدادها
            برای فروشگاه و برندها
                    </figcaption>
        </figcaption>


                </figure>
    </figure>




                <!-- نمونه 5 -->
                <figure class="print-portfolio-item">


                    <img
    <!-- نمونه 3 -->
                        src="https://dl.faraghaib.ir/m/260005-01/260005-01-61.png"
                        alt="چاپ تصویر و طرح دکوراتیو"
                        loading="lazy"
                    >


                    <figcaption class="print-portfolio-caption">
    <figure class="print-portfolio-item">
                        چاپ طرح‌های دکوراتیو
                        و تصاویر باکیفیت
                    </figcaption>


                </figure>
        <img
            src="https://dl.faraghaib.ir/m/260005-01/260005-01-59.png"
            alt="چاپ تبلیغات روی بدنه اتوبوس"
            loading="lazy"
        >


        <figcaption class="print-portfolio-caption">
            چاپ تبلیغات روی
            وسایل نقلیه و اتوبوس
        </figcaption>
    </figure>
    <!-- نمونه 4 -->
    <figure class="print-portfolio-item">
        <img
            src="https://dl.faraghaib.ir/m/260005-01/260005-01-60.png"
            alt="چاپ استند و بنر تبلیغاتی"
            loading="lazy"
        >
        <figcaption class="print-portfolio-caption">
            چاپ استند و بنر تبلیغاتی
            مناسب رویدادها
        </figcaption>
    </figure>
    <!-- نمونه 5 -->
    <figure class="print-portfolio-item">
        <img
            src="https://dl.faraghaib.ir/m/260005-01/260005-01-61.png"
            alt="چاپ تصویر و طرح دکوراتیو"
            loading="lazy"
        >
        <figcaption class="print-portfolio-caption">
            چاپ طرح‌های دکوراتیو
            و تصاویر باکیفیت
        </figcaption>
    </figure>
</div>
</section>
<!-- =========================================================
    مزایا
========================================================= -->
<div class="print-section-heading">
    <h2>
        مزایا
    </h2>
</div>
<section class="print-advantages"
        aria-label="مزایای چاپ اکوسالوند">
<div class="print-advantages-grid">
    <div class="print-advantage">
        <div class="print-advantage-icon">
            <i class="fa-solid fa-check"
              aria-hidden="true"></i>
        </div>
        <p class="print-advantage-text">
            چاپ بر روی طیف وسیعی
            از متریال‌ها
        </p>
    </div>


            </div>


        </section>


    <div class="print-advantage">


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


        <!-- =================================================
            <i class="fa-solid fa-check"
            مزایا
              aria-hidden="true"></i>
        ================================================== -->


        <div class="print-section-heading">
            <h2>مزایا</h2>
         </div>
         </div>


        <p class="print-advantage-text">


        <section class="print-advantages"
            رنگ‌های زنده
                aria-label="مزایای چاپ اکوسالوند">
            با ماندگاری طولانی


            <div class="print-advantages-grid">
        </p>


    </div>


                <div class="print-advantage">


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


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


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


        <p class="print-advantage-text">


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


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


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


                </div>




                <div class="print-advantage">
    <div class="print-advantage">


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


                    <p class="print-advantage-text">
            <i class="fa-solid fa-check"
                        مقاوم در برابر شرایط
              aria-hidden="true"></i>
                        جوی و خراش
                    </p>


                </div>
        </div>


        <p class="print-advantage-text">


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


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


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


                </div>




                <div class="print-advantage">
    <div class="print-advantage">


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


                    <p class="print-advantage-text">
            <i class="fa-solid fa-check"
                        هزینه نگهداری پایین
              aria-hidden="true"></i>
                        و عمر طولانی دستگاه
                    </p>


                </div>
        </div>


        <p class="print-advantage-text">


             </div>
             هزینه نگهداری پایین
            و عمر طولانی دستگاه


         </section>
         </p>


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


</section>
</section>


</div>
</section>


</html>
</html>

نسخهٔ ‏۲۳ اوت ۲۰۲۶، ساعت ۰۷:۳۷

دستگاه چاپ بنر اکوسالوند با کیفیت چاپ بالا

دستگاه چاپ بنر (اکوسالوند)

چاپ با کیفیت بالا، رنگ‌های زنده و ماندگار

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

کیفیت چاپ بالا و جزئیات دقیق

مقاومت بالا در برابر نور خورشید و آب

جوهرهای سازگار با محیط زیست

سرعت چاپ بالا و تحویل سریع

مقرون به صرفه و اقتصادی

نمونه کارها

چاپ بنر تبلیغاتی فضای باز
چاپ بنر تبلیغاتی فضای باز با کیفیت بالا
چاپ پوستر تبلیغاتی فروشگاه
چاپ پوستر تبلیغاتی برای فروشگاه و برندها
چاپ تبلیغات روی بدنه اتوبوس
چاپ تبلیغات روی وسایل نقلیه و اتوبوس
چاپ استند و بنر تبلیغاتی
چاپ استند و بنر تبلیغاتی مناسب رویدادها
چاپ تصویر و طرح دکوراتیو
چاپ طرح‌های دکوراتیو و تصاویر باکیفیت

مزایا

چاپ بر روی طیف وسیعی از متریال‌ها

رنگ‌های زنده با ماندگاری طولانی

مقاوم در برابر شرایط جوی و خراش

سازگار با محیط زیست بدون بوی تند

هزینه نگهداری پایین و عمر طولانی دستگاه

برگرفته از «https://fa.faraghaib.ir/w/index.php?title=الگو:کانتینر_ترکیبی&oldid=6781»