فراغیب

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

دیداریویکی‌متن
صفحه‌ای تازه حاوی «<html> <!-- ========================================================= دستگاه چاپ بنر | اکوساوند Mobile First + SEO + Responsive ========================================================= --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"> <style> /* ========================================================= VARIABLES ======================...» ایجاد کرد
 
بدون خلاصۀ ویرایش
 
(۱۲ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد)
خط ۱: خط ۱:
<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%;
     max-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 h3,
.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;
 
     border-radius: 26px;
     width:100%;
     background: #fff;
 
     overflow:hidden;
 
     border-radius:26px;
 
     background:#fff;
}
 
 
/* =========================================================
  HERO IMAGE
========================================================= */
 
.print-banner-hero-image{
    position:relative;
 
    width:100%;
 
    height:clamp(260px,55vw,560px);
 
    overflow:hidden;
 
    margin:0;
    padding:0;
}
}


.print-banner-hero-image img{
    display:block;


/* IMAGE */
    width:100%;
.print-banner-hero-image {
     height:100%;
     width: 100%;
 
     min-height: 280px;
     margin:0;
     overflow: hidden;
    padding:0;
 
    border:0;
 
    object-fit:cover;
     object-position:center;
}
}


.print-banner-hero-image img {
 
     display: block;
/* =========================================================
     width: 100%;
  HERO CONTENT
     height: 100%;
========================================================= */
     min-height: 280px;
 
     object-fit: cover;
.print-banner-hero-content{
     object-position: center;
     display:flex;
 
    flex-direction:column;
 
    justify-content:center;
     align-items:justify;
 
     width:100%;
 
     padding:25px 15px;
 
     background:#fff;
 
     text-align:justify;
}
}




/* TEXT */
/* =========================================================
.print-banner-hero-content {
  TITLE
     display: flex;
========================================================= */
     flex-direction: column;
 
     justify-content: center;
.print-banner-title{
     text-align: center;
     width:100%;
     padding: 28px 18px;
 
     background: #fff;
     margin:0 0 12px;
 
     color:var(--navy);
 
     font-size:clamp(28px,7vw,62px);
 
     line-height:1.45;
 
     font-weight:900;
}
}


.print-banner-title {
.print-banner-title span{
     margin: 0 0 15px;
     white-space:nowrap;
    color: var(--navy);
    font-size: clamp(28px, 6vw, 56px);
    line-height: 1.5;
    font-weight: 900;
}
}


.print-banner-subtitle {
 
     display: flex;
/* =========================================================
     align-items: center;
  SUBTITLE
     justify-content: center;
========================================================= */
     gap: 10px;
 
     margin: 0 0 18px;
.print-banner-subtitle{
     color: var(--navy);
     display:flex;
     font-size: clamp(17px, 3vw, 27px);
 
    font-weight: 800;
     align-items:center;
     line-height: 1.8;
     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;
/* =========================================================
     margin: 0 auto;
  DESCRIPTION
     font-size: clamp(15px, 2vw, 19px);
========================================================= */
     line-height: 2.2;
 
    color: #222;
.print-banner-description{
    width:100%;
 
     max-width:680px;
 
     margin:0 auto;
 
    color:#222;
 
     font-size:clamp(15px,2.2vw,19px);
 
     line-height:2.15;
}
}




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


.print-benefit {
 
     position: relative;
/* =========================================================
     display: flex;
  BENEFIT CELL
     flex-direction: column;
========================================================= */
     align-items: center;
 
     justify-content: center;
.print-benefit{
     text-align: center;
     position:relative;
     min-height: 125px;
 
     padding: 15px 8px;
     display:flex;
 
     flex-direction:column;
 
     align-items:center;
     justify-content:center;
 
     min-width:0;
     min-height:115px;
 
     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;
 
    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}
 
 
/* حذف خطوط قبلی */
.print-benefit:not(:last-child)::after{
    display:none;
}
}


.print-benefit:not(:last-child)::after {
 
    content: "";
/* Hover دسکتاپ */
    position: absolute;
@media (hover:hover){
    left: 0;
 
    top: 20%;
    .print-benefit:hover{
    height: 60%;
        border-color:var(--gold);
    width: 1px;
 
     background: #d4d4d4;
        box-shadow:
            0 5px 16px rgba(11,49,87,.10);
 
        transform:translateY(-2px);
     }
}
}


.print-benefit-icon {
 
     width: 48px;
/* =========================================================
     height: 48px;
  BENEFIT ICON
     margin-bottom: 8px;
========================================================= */
     display: flex;
 
     align-items: center;
.print-benefit-icon{
     justify-content: center;
     display:flex;
     color: var(--navy);
 
     font-size: 34px;
     align-items:center;
     justify-content:center;
 
     width:46px;
     height:46px;
 
     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 {
.print-benefit:nth-child(3) .print-benefit-icon{
     color: var(--gold);
     color:var(--gold);
}
}


.print-benefit-title {
 
     margin: 0;
/* =========================================================
     color: #111;
  BENEFIT TITLE
     font-size: 14px;
========================================================= */
     line-height: 1.8;
 
     font-weight: 700;
.print-benefit-title{
     margin:0;
 
     color:#111;
 
     font-size:13px;
 
     line-height:1.8;
 
     font-weight:700;
 
    text-align:center;
}
}


خط ۱۹۴: خط ۳۶۳:
   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:10px 0 0;
}
}


.print-section-heading h2 {
.print-section-heading::before{
     position: relative;
     content:"";
     z-index: 2;
 
     min-width: 190px;
     position:absolute;
     margin: 0;
 
     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 {
.print-section-heading h2{
     content: "";
    position:relative;
     position: absolute;
 
     right: 0;
    z-index:2;
     left: 0;
 
     height: 1px;
    min-width:180px;
     background: var(--gold);
 
    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;
 
     z-index:2;
 
     min-width:180px;
 
     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
  بدون اسلایدر و بدون حرکت
========================================================= */
========================================================= */
.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;
}
}


.print-portfolio-grid{
    display:grid;


/* GRID */
     grid-template-columns:
.print-portfolio-grid {
        repeat(1,minmax(0,1fr));
    display: grid;
 
     grid-template-columns: 1fr;
     gap:10px;
     gap: 10px;
 
    width:100%;
 
    margin:0;
    padding:0;
}
}


.print-portfolio-item{
    position:relative;


/* CARD */
    display:block;
.print-portfolio-item {
 
     position: relative;
    width:100%;
     height: 240px;
 
     margin: 0;
    aspect-ratio:1.25 / 1;
     overflow: hidden;
 
     border-radius: 15px;
     min-width:0;
     background: #eee;
 
     margin:0;
     padding:0;
 
     overflow:hidden;
 
     border-radius:15px;
 
     background:#eef1ef;
 
    line-height:0;
 
    isolation:isolate;
}
}


.print-portfolio-item img{
    position:absolute;


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


    vertical-align:middle;


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




/* =========================================================
/* =========================================================
   HOVER DESCRIPTION
   CAPTION
========================================================= */
========================================================= */
.print-portfolio-caption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;


     display: flex;
.print-portfolio-caption{
     align-items: center;
    position:absolute;
     justify-content: center;
 
    right:0;
    bottom:0;
    left:0;
 
     display:flex;
 
     align-items:center;
     justify-content:center;
 
    width:100%;
 
    min-height:72px;
 
    margin:0;
 
    padding:10px 12px;


     min-height: 75px;
     background:rgba(7,31,56,.94);
    padding: 12px 15px;


    background: rgba(7, 31, 56, .92);
     color:#fff;
     color: #fff;


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


     /* مخفی در حالت عادی */
     font-size:14px;
     opacity: 0;
 
     visibility: hidden;
    line-height:1.8;
 
    font-weight:700;
 
     opacity:0;
 
     visibility:hidden;
 
    pointer-events:none;
 
    z-index:3;
}
}


 
.print-portfolio-item:hover
/* فقط هنگام هاور */
.print-portfolio-caption{
.print-portfolio-item:hover .print-portfolio-caption {
     opacity:1;
     opacity: 1;
     visibility:visible;
     visibility: visible;
}
}


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


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


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


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


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


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


.print-advantage-icon {
.print-advantage-icon{
     flex: 0 0 auto;
    display:flex;
     width: 38px;
 
     height: 38px;
    align-items:center;
    justify-content:center;
 
     flex:0 0 auto;
 
     width:38px;
     height:38px;
 
    border:2px solid var(--navy);
 
    border-radius:50%;
 
    color:var(--navy);
 
    font-size:16px;
}
 
.print-advantage-text{
    margin:0;
 
    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,minmax(0,1fr));
 
        gap:6px;
 
        margin-top:20px;
    }
 
    .print-benefit{
        min-height:105px;
 
        padding:10px 5px;
 
        border-radius:10px;
    }
 
    .print-benefit-icon{
        width:40px;
        height:40px;
 
        font-size:27px;


    display: flex;
        margin-bottom:5px;
    align-items: center;
     }
     justify-content: center;


     border: 2px solid var(--navy);
     .print-benefit-title{
    border-radius: 50%;
        font-size:12px;
        line-height:1.7;
    }


     color: var(--navy);
     .print-portfolio-item{
    font-size: 17px;
        aspect-ratio:1.2 / 1;
    }
}
}


.print-advantage-text {
 
     margin: 0;
/* =========================================================
    font-size: 14px;
  MOBILE
     line-height: 1.9;
========================================================= */
     font-weight: 700;
 
     color: #111;
@media (min-width:400px) and (max-width:599px){
 
    .print-banner-container{
        padding:9px;
     }
 
    .print-banner-benefits{
        grid-template-columns:repeat(2,minmax(0,1fr));
 
        gap:7px;
     }
 
    .print-benefit{
        min-height:110px;
     }
 
    .print-portfolio-item{
        aspect-ratio:1.25 / 1;
     }
}
}


خط ۳۷۴: خط ۷۵۸:
   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,minmax(0,1fr));
 
        gap:7px;
    }
 
    .print-benefit{
        min-height:125px;
     }
     }


     .print-banner-benefits {
     .print-benefit-title{
         grid-template-columns: repeat(5, 1fr);
         font-size:13px;
     }
     }


     .print-portfolio-grid {
     .print-portfolio-grid{
         grid-template-columns: repeat(2, 1fr);
         grid-template-columns:
         gap: 12px;
            repeat(3,minmax(0,1fr));
 
         gap:11px;
     }
     }


     .print-portfolio-item {
     .print-portfolio-item{
         height: 250px;
         aspect-ratio:1.3 / 1;
     }
     }


     .print-advantages-grid {
     .print-advantages-grid{
         grid-template-columns: repeat(2, 1fr);
         grid-template-columns:
            repeat(2,minmax(0,1fr));
     }
     }


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


     .print-advantage:nth-last-child(-n+2) {
    .print-advantage:nth-child(odd){
         border-bottom: 0;
        border-left:1px dotted #aaa;
    }
 
     .print-advantage:nth-last-child(-n+2){
         border-bottom:0;
     }
     }
}
}
خط ۴۱۰: خط ۸۱۴:
   DESKTOP
   DESKTOP
========================================================= */
========================================================= */
@media (min-width: 900px) {


     .print-banner-container {
@media (min-width:900px){
         padding: 24px;
 
     .print-banner-container{
        width:100%;
 
        max-width:1400px;
 
        margin-left:auto;
        margin-right:auto;
 
         padding:18px 20px 24px;
     }
     }


     /*
 
      عکس و متن کنار هم
     /* HERO */
      بدون border بین آنها
 
    */
     .print-banner-hero{
     .print-banner-hero {
 
        display: grid;
         grid-template-columns:
         grid-template-columns: 52% 48%;
            minmax(0,1.08fr)
         min-height: 560px;
            minmax(0,.92fr);
         border-radius: 28px;
 
        align-items:stretch;
 
        width:100%;
 
         min-height:430px;
 
        max-height:560px;
 
         border-radius:24px;
     }
     }


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


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


     .print-banner-hero-content {
 
         padding: 35px 40px;
    /* HERO CONTENT */
         text-align: center;
 
     .print-banner-hero-content{
 
        width:100%;
 
        min-width:0;
 
        min-height:430px;
 
         padding:35px 34px;
 
         overflow:hidden;
     }
     }


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


     .print-banner-subtitle {
 
         font-size: 25px;
     .print-banner-subtitle{
 
        width:100%;
 
        margin-bottom:13px;
 
         font-size:clamp(19px,1.8vw,24px);
 
        line-height:1.8;
     }
     }


     .print-banner-subtitle::before,
     .print-banner-subtitle::before,
     .print-banner-subtitle::after {
     .print-banner-subtitle::after{
         width: 55px;
 
         width:42px;
 
        flex:0 0 42px;
     }
     }


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


     .print-banner-benefits {
 
         margin-top: 35px;
    /* =====================================================
         border-top: 0;
      HERO BENEFITS DESKTOP
    ===================================================== */
 
     .print-banner-benefits{
 
        grid-template-columns:
            repeat(5,minmax(0,1fr));
 
        width:100%;
 
         margin-top:20px;
 
         gap:8px;
     }
     }


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


     .print-portfolio {
 
         padding: 20px 8px 10px;
     .print-benefit-icon{
         border-radius: 22px;
 
        width:40px;
         height:40px;
 
        margin-bottom:5px;
 
         font-size:27px;
     }
     }


    /*
 
      در دسکتاپ 5 تصویر کنار هم
     .print-benefit-title{
    */
 
     .print-portfolio-grid {
         font-size:12px;
         grid-template-columns: repeat(5, 1fr);
 
         gap: 10px;
         line-height:1.7;
     }
     }


     .print-portfolio-item {
 
         height: 260px;
    /* SECTION HEADINGS */
 
     .print-section-heading{
 
         margin-top:20px;
 
        margin-bottom:0;
     }
     }


     .print-advantages-grid {
 
         grid-template-columns: repeat(5, 1fr);
     .print-section-heading h2{
 
        min-width:170px;
 
        padding:4px 22px;
 
         font-size:16px;
 
        line-height:1.7;
     }
     }


     .print-advantage {
 
         min-height: 100px;
    /* PORTFOLIO */
         padding: 10px 15px;
 
     .print-portfolio{
 
        width:100%;
 
         margin:0;
 
         padding:16px 8px 8px;
 
        border-radius:20px;
     }
     }


     .print-advantage:not(:last-child) {
 
         border-left: 1px dotted #aaa;
     .print-portfolio-grid{
         border-bottom: 0;
 
        display:grid;
 
        grid-template-columns:
            repeat(5,minmax(0,1fr));
 
        gap:9px;
 
         width:100%;
 
         align-items:stretch;
     }
     }


     .print-advantage-icon {
 
         width: 40px;
     .print-portfolio-item{
         height: 40px;
 
         width:100%;
 
        aspect-ratio:1 / 1;
 
         height:auto;
 
        border-radius:13px;
     }
     }


     .print-advantage-text {
 
         font-size: 15px;
    .print-portfolio-item img{
 
        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{
 
        display:grid;
 
        grid-template-columns:
            repeat(5,minmax(0,1fr));
 
        width:100%;
    }
 
 
    .print-advantage{
 
        min-height:82px;
 
        padding:8px 10px;
 
        gap:8px;
    }
 
 
    .print-advantage:not(:last-child){
 
        border-left:1px dotted #aaa;
 
        border-bottom:0;
    }
 
 
    .print-advantage-icon{
 
        width:36px;
        height:36px;
 
        font-size:15px;
    }
 
 
     .print-advantage-text{
 
         font-size:12px;
 
        line-height:1.75;
     }
     }
}
}
خط ۵۱۳: خط ۱٬۱۳۳:
   LARGE DESKTOP
   LARGE DESKTOP
========================================================= */
========================================================= */
@media (min-width: 1200px) {


     .print-banner-hero {
@media (min-width:1200px){
         grid-template-columns: 53% 47%;
 
         min-height: 590px;
    .print-banner-container{
 
        max-width:1450px;
 
        padding:20px 24px 28px;
    }
 
 
     .print-banner-hero{
 
         grid-template-columns:
            minmax(0,1.06fr)
            minmax(0,.94fr);
 
        min-height:470px;
 
        max-height:570px;
 
        border-radius:26px;
    }
 
 
    .print-banner-hero-image{
 
        min-height:470px;
 
        max-height:570px;
    }
 
 
    .print-banner-hero-image img{
 
        min-height:470px;
 
        max-height:570px;
    }
 
 
    .print-banner-hero-content{
 
         min-height:470px;
 
        padding:40px 42px;
    }
 
 
    .print-banner-title{
 
        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-image,
 
    .print-banner-hero-image img {
     .print-banner-hero{
         min-height: 590px;
 
        grid-template-columns:
            minmax(0,1.05fr)
            minmax(0,.95fr);
 
        min-height:500px;
 
         max-height:580px;
     }
     }


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




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


     .print-portfolio-caption {
@media (prefers-reduced-motion:reduce){
        opacity: 1;
 
        visibility: visible;
     .print-banner-section *,
         min-height: 65px;
    .print-banner-section *::before,
         background: linear-gradient(
    .print-banner-section *::after{
            to top,
 
            rgba(7,31,56,.95),
         animation:none !important;
            rgba(7,31,56,.65)
 
         );
         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">
 
 
     <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"
            HERO
            class="print-banner-title">
         ================================================== -->
 
         <header class="print-banner-hero">
            دستگاه چاپ بنر
            <span>(اکوسالوند)</span>
 
         </h1>
 
 
         <h2 class="print-banner-subtitle">
 
            چاپ با کیفیت بالا، رنگ‌های زنده و ماندگار
 
        </h2>




            <!-- تصویر اصلی -->
        <p class="print-banner-description">
            <div class="print-banner-hero-image">


                <!--
            چاپ اکوسالونت با کیفیت بالا، دوام عالی و رنگ‌های درخشان،
                    فقط آدرس عکس را عوض کنید.
            گزینه‌ای مناسب برای چاپ فضای باز است.
                    هر اندازه عکسی قرار دهید، ساختار به هم نمی ریزد.
                -->
                <img
                    src="https://dl.faraghaib.ir/m/260005-01/260005-01-04.jpg"
                    alt="دستگاه چاپ بنر اکوساوند با کیفیت چاپ بالا"
                    loading="eager"
                >


            </div>
        </p>




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


                <h1 id="print-banner-title"
        <div class="print-banner-benefits"
                    class="print-banner-title">
            aria-label="مزایای دستگاه چاپ بنر">
                    دستگاه چاپ بنر
                    <span>(اکوساوند)</span>
                </h1>




                <h2 class="print-banner-subtitle">
            <div class="print-benefit">
                    چاپ با کیفیت بالا، رنگ‌های زنده و ماندگار
                </h2>


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


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


                    <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>
                    </div>


            <div class="print-benefit">


                    <div class="print-benefit">
                <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>


                        <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-gauge-high"
                              aria-hidden="true"></i>
                        </div>


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


                <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">
            <div class="print-benefit">
                            مقرون به صرفه
                            و اقتصادی
                        </p>
                    </div>


                <div class="print-benefit-icon">
                    <i class="fa-solid fa-thumbs-up"
                      aria-hidden="true"></i>
                 </div>
                 </div>
                <p class="print-benefit-title">
                    مقرون به صرفه
                    و اقتصادی
                </p>


             </div>
             </div>


        </header>


        </div>


    </div>


        <!-- =================================================
</header>
            نمونه کارها
 
        ================================================== -->
</div>


        <div class="print-section-heading">
</section>
            <h2>نمونه کارها</h2>
        </div>


<!-- =========================================================
    PORTFOLIO
========================================================= -->


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


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


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




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


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


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


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


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


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


                    <img
    </figure>
                        src="PORTFOLIO-2.jpg"
                        alt="چاپ پوستر تبلیغاتی فروشگاه"
                        loading="lazy"
                    >


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


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


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


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


                    <img
    </figure>
                        src="PORTFOLIO-3.jpg"
                        alt="چاپ تبلیغات روی بدنه اتوبوس"
                        loading="lazy"
                    >


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


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


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


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


                    <img
    </figure>
                        src="PORTFOLIO-4.jpg"
                        alt="چاپ استند و بنر تبلیغاتی"
                        loading="lazy"
                    >


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


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


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


                <!-- نمونه 5 -->
        <figcaption class="print-portfolio-caption">
                <figure class="print-portfolio-item">
            چاپ استند و بنر تبلیغاتی
            مناسب رویدادها
        </figcaption>


                    <img
    </figure>
                        src="PORTFOLIO-5.jpg"
                        alt="چاپ تصویر و طرح دکوراتیو"
                        loading="lazy"
                    >


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


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


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


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


        </section>
    </figure>




</div>


        <!-- =================================================
</section>
            مزایا
        ================================================== -->


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


<!-- =========================================================
    ADVANTAGES
========================================================= -->


        <section class="print-advantages"
<div class="print-section-heading">
                aria-label="مزایای چاپ اکوساوند">


            <div class="print-advantages-grid">
    <h2>مزایا</h2>


</div>


                <div class="print-advantage">


                    <div class="print-advantage-icon">
<section class="print-advantages"
                        <i class="fa-solid fa-check"
        aria-label="مزایای چاپ اکوسالوند">
                          aria-hidden="true"></i>
                    </div>


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


                </div>


    <div class="print-advantage">


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


                    <div class="print-advantage-icon">
        <p class="print-advantage-text">
                        <i class="fa-solid fa-check"
            چاپ بر روی طیف وسیعی
                          aria-hidden="true"></i>
            از متریال‌ها
                    </div>
        </p>


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


                </div>


    <div class="print-advantage">


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


                    <div class="print-advantage-icon">
        <p class="print-advantage-text">
                        <i class="fa-solid fa-check"
            رنگ‌های زنده
                          aria-hidden="true"></i>
            با ماندگاری طولانی
                    </div>
        </p>


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


                </div>


    <div class="print-advantage">


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


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


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


                </div>


    <div class="print-advantage">


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


                    <div class="print-advantage-icon">
        <p class="print-advantage-text">
                        <i class="fa-solid fa-check"
            سازگار با محیط زیست
                          aria-hidden="true"></i>
            بدون بوی تند
                    </div>
        </p>


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


                </div>


    <div class="print-advantage">


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


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


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


</section>
</section>


</div>
</section>


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