فراغیب

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

دیداریویکی‌متن
صفحه‌ای تازه حاوی «<html> ←===================================================== Responsive ======================================================: @media (max-width:1100px){ .fgwiki-grid{ gap:22px; } .fgwiki-card{ min-height:200px; } .fgwiki-image{ width:40%; height:200px; } .fgwiki-content{ width:60%; padding:22px; } .fgwiki-content h3{ fon...» ایجاد کرد
 
بدون خلاصۀ ویرایش
 
(۲ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد)
خط ۱: خط ۱:
<html>
<html>


/*=====================================================
<section class="dp-blog-section" aria-label="آخرین مقالات دماوند پلیمر">
     Responsive
 
======================================================*/
    <div class="dp-blog-grid">
 
        <!-- کارت 1 -->
        <article class="dp-card">
 
            <a href="#" class="dp-card-image">
 
                <img
                    src="images/article-1.webp"
                    alt="راهنمای خرید مخزن پلی اتیلن"
                    loading="lazy"
                    decoding="async"
                    width="420"
                    height="320">
 
                <span class="dp-badge">راهنمای خرید</span>
 
            </a>
 
            <div class="dp-card-content">
 
                <div class="dp-meta">
 
                    <span class="dp-category">
                        راهنمای خرید
                    </span>
 
                    <time datetime="2026-07-29">
                        ۲۹ تیر ۱۴۰۵
                    </time>
 
                </div>
 
                <h2 class="dp-title">
 
                    <a href="#">
                        راهنمای خرید مخزن پلی اتیلن
                    </a>
 
                </h2>
 
                <p class="dp-desc">
 
                    اگر قصد خرید مخزن پلی اتیلن دارید، در این مقاله مهم‌ترین نکات انتخاب ظرفیت، کیفیت، تعداد لایه و کاربرد انواع مخازن را بررسی کرده‌ایم.
 
                </p>
 
                <a href="#" class="dp-btn">
 
                    مطالعه مقاله
 
                    <svg viewBox="0 0 24 24">
 
                        <path d="M15 6l-6 6 6 6"/>
 
                    </svg>
 
                </a>
 
            </div>
 
        </article>
 
        <!-- کارت 2 -->
        <article class="dp-card">
 
            <a href="#" class="dp-card-image">
 
                <img
                    src="images/article-2.webp"
                    alt="قیمت مخزن پلی اتیلن"
                    loading="lazy"
                    decoding="async"
                    width="420"
                    height="320">
 
                <span class="dp-badge">قیمت</span>
 
            </a>
 
            <div class="dp-card-content">
 
                <div class="dp-meta">
 
                    <span class="dp-category">
                        قیمت
                    </span>
 
                    <time datetime="2026-07-28">
                        ۲۸ تیر ۱۴۰۵
                    </time>
 
                </div>
 
                <h2 class="dp-title">
 
                    <a href="#">
                        قیمت مخزن پلی اتیلن
                    </a>
 
                </h2>
 
                <p class="dp-desc">
 
                    قیمت مخزن پلی اتیلن به ظرفیت، تعداد لایه، برند تولیدکننده و نوع مواد اولیه بستگی دارد.
 
                </p>
 
                <a href="#" class="dp-btn">
 
                    مطالعه مقاله
 
                    <svg viewBox="0 0 24 24">
 
                        <path d="M15 6l-6 6 6 6"/>
 
                    </svg>
 
                </a>
 
            </div>
 
        </article>
 
        <!-- کارت 3 -->
        <article class="dp-card">
 
            <a href="#" class="dp-card-image">
 
                <img
                    src="images/article-3.webp"
                    alt="کاربرد مخزن پلی اتیلن"
                    loading="lazy"
                    decoding="async"
                    width="420"
                    height="320">
 
                <span class="dp-badge">کاربردها</span>
 
            </a>
 
            <div class="dp-card-content">
 
                <div class="dp-meta">
 
                    <span class="dp-category">
                        کاربردها
                    </span>
 
                    <time datetime="2026-07-27">
                        ۲۷ تیر ۱۴۰۵
                    </time>
 
                </div>
 
                <h2 class="dp-title">
 
                    <a href="#">
                        کاربرد مخزن پلی اتیلن
                    </a>
 
                </h2>
 
                <p class="dp-desc">
 
                    از مخازن پلی اتیلن برای ذخیره آب، مواد غذایی، مواد شیمیایی و بسیاری از مایعات صنعتی استفاده می‌شود.
 
                </p>
 
                <a href="#" class="dp-btn">
 
                    مطالعه مقاله
 
                    <svg viewBox="0 0 24 24">
 
                        <path d="M15 6l-6 6 6 6"/>
 
                    </svg>
 
                </a>
 
            </div>
 
        </article>
 
        <!-- کارت 4 -->
        <article class="dp-card">
 
            <a href="#" class="dp-card-image">
 
                <img
                    src="images/article-4.webp"
                    alt="مخزن سه لایه"
                    loading="lazy"
                    decoding="async"
                    width="420"
                    height="320">
 
                <span class="dp-badge">محصولات</span>
 
            </a>
 
            <div class="dp-card-content">
 
                <div class="dp-meta">
 
                    <span class="dp-category">
                        محصولات
                    </span>
 
                    <time datetime="2026-07-26">
                        ۲۶ تیر ۱۴۰۵
                    </time>
 
                </div>
 
                <h2 class="dp-title">
 
                    <a href="#">
                        مخزن پلی اتیلن سه لایه
                    </a>
 
                </h2>
 
                <p class="dp-desc">
 
                    مخازن سه لایه دماوند پلیمر با مقاومت بالا در برابر اشعه UV، بهترین گزینه برای نگهداری آب شرب هستند.
 
                </p>
 
                <a href="#" class="dp-btn">
 
                    مطالعه مقاله
 
                    <svg viewBox="0 0 24 24">
 
                        <path d="M15 6l-6 6 6 6"/>
 
                    </svg>
 
                </a>
 
            </div>
 
        </article>
 
    </div>
 
</section>
 
/*==============================
  Damavand Polymer Blog Cards
  Base Layout
===============================*/
 
:root{
 
    --dp-primary:#009688;
    --dp-primary-dark:#00796b;
    --dp-secondary:#00bcd4;
 
    --dp-bg:#f5f9fb;
    --dp-card:#ffffff;
 
    --dp-text:#243746;
    --dp-muted:#6b7280;
 
    --dp-border:#e6edf2;
 
    --dp-radius:18px;
 
    --dp-shadow:
        0 8px 24px rgba(0,0,0,.05);
 
    --dp-shadow-hover:
        0 18px 45px rgba(0,0,0,.10);
 
    --dp-transition:.35s ease;
 
}
 
 
/*==============================*/
 
*,
*::before,
*::after{
 
    box-sizing:border-box;
 
}
 
.dp-blog-section{
 
    width:100%;
 
    max-width:1400px;
 
    margin:auto;
 
    padding:25px 18px;
 
}
 
.dp-blog-grid{
 
    display:grid;
 
    grid-template-columns:repeat(3,minmax(0,1fr));
 
    gap:28px;
 
    align-items:stretch;
 
}
 
 
/*==============================
        Card
===============================*/
 
.dp-card{
 
    background:var(--dp-card);
 
    border-radius:var(--dp-radius);
 
    overflow:hidden;
 
    display:flex;
 
    flex-direction:column;
 
    box-shadow:var(--dp-shadow);
 
    border:1px solid var(--dp-border);
 
    transition:var(--dp-transition);
 
    height:100%;
 
    position:relative;
 
}
 
 
/*==============================
      Image
===============================*/
 
.dp-card-image{
 
    position:relative;
 
    display:block;
 
    overflow:hidden;
 
    aspect-ratio:16/10;
 
    background:#eef6f8;
 
}
 
.dp-card-image img{
 
    width:100%;
 
    height:100%;
 
    display:block;
 
    object-fit:cover;
 
}
 
 
/*==============================
        Badge
===============================*/
 
.dp-badge{
 
    position:absolute;
 
    top:16px;
 
    right:16px;
 
    background:#e7faf8;
 
    color:var(--dp-primary);
 
    font-size:12px;
 
    font-weight:700;
 
    padding:7px 14px;
 
    border-radius:30px;
 
    line-height:1;
 
}
 
 
/*==============================
      Content
===============================*/
 
.dp-card-content{
 
    display:flex;
 
    flex-direction:column;
 
    flex:1;
 
    padding:24px;
 
}
 
 
/*==============================
          Meta
===============================*/
 
.dp-meta{
 
    display:flex;
 
    justify-content:space-between;
 
    align-items:center;
 
    gap:15px;
 
     margin-bottom:16px;
 
    font-size:13px;
 
    color:var(--dp-muted);
 
}
 
.dp-category{
 
    color:var(--dp-primary);
 
    font-weight:700;
 
}
 
 
/*==============================
        Title
===============================*/
 
.dp-title{
 
    margin:0;
 
    font-size:22px;
 
    line-height:1.7;
 
    font-weight:800;
 
}
 
.dp-title a{
 
    color:var(--dp-text);
 
    text-decoration:none;
 
}
 
 
/*==============================
      Description
===============================*/
 
.dp-desc{
 
    margin-top:18px;
 
    color:var(--dp-muted);
 
    font-size:15px;
 
    line-height:2;
 
    flex:1;
 
}
 
 
/*==============================
        Button
===============================*/
 
.dp-btn{
 
    margin-top:28px;
 
    align-self:flex-start;
 
    display:inline-flex;
 
    align-items:center;
 
    gap:10px;
 
    text-decoration:none;
 
    background:linear-gradient(
        135deg,
        var(--dp-secondary),
        var(--dp-primary)
    );
 
    color:#fff;
 
    padding:13px 22px;
 
    border-radius:40px;
 
    font-size:14px;
 
    font-weight:700;
 
}
 
.dp-btn svg{
 
    width:18px;
 
    height:18px;
 
    stroke:#fff;
 
    stroke-width:2;
 
    fill:none;
 
}
 
 
/*==============================
      Tablet
===============================*/
 
@media (max-width:1024px){
 
.dp-blog-grid{
 
grid-template-columns:repeat(2,1fr);
 
gap:22px;
 
}
 
.dp-title{
 
font-size:20px;
 
}
 
}
 
 
/*==============================
      Mobile
===============================*/
 
@media (max-width:768px){
 
.dp-blog-section{
 
padding:18px 12px;
 
}
 
.dp-blog-grid{
 
grid-template-columns:1fr;
 
gap:18px;
 
}
 
.dp-card-content{
 
padding:18px;
 
}
 
.dp-title{
 
font-size:18px;
 
line-height:1.8;
 
}
 
.dp-desc{
 
font-size:14px;
 
}
 
.dp-meta{
 
font-size:12px;
 
}
 
.dp-btn{
 
width:100%;
 
justify-content:center;
 
}
 
}
 
 
/*=========================================
      Professional Hover Effects
==========================================*/
 
/* حرکت نرم */
.dp-card,
.dp-card img,
.dp-btn,
.dp-title a,
.dp-badge{
 
    transition:all .35s cubic-bezier(.4,0,.2,1);
 
}
 
/* نوار رنگی کنار کارت */
.dp-card::before{
 
    content:"";
 
    position:absolute;
 
    top:0;
 
    right:0;
 
    width:6px;
 
    height:100%;
 
    background:linear-gradient(
        to bottom,
        #00c853,
        #00acc1
    );
 
    opacity:.85;
 
}
 
/* هاله گرادیانی */
.dp-card::after{
 
    content:"";
 
    position:absolute;
 
    inset:0;
 
    background:
    radial-gradient(circle at top right,
    rgba(0,188,212,.08),
    transparent 60%);
 
    opacity:0;
 
    transition:.45s;
 
    pointer-events:none;
 
}
 
/* Hover کارت */
 
.dp-card:hover{
 
    transform:translateY(-10px);
 
    box-shadow:
 
        0 18px 40px rgba(0,0,0,.10),
 
        0 8px 16px rgba(0,188,212,.10);
 
}
 
/* نمایش گرادیان */
 
.dp-card:hover::after{
 
    opacity:1;
 
}
 
/* زوم تصویر */
 
.dp-card:hover img{
 
    transform:scale(1.08);
 
}
 
/* تیره شدن ملایم تصویر */
 
.dp-card-image::before{
 
    content:"";
 
    position:absolute;
 
    inset:0;
 
    background:linear-gradient(
 
        rgba(0,0,0,0),
 
        rgba(0,0,0,.08)
 
    );
 
    opacity:0;
 
    transition:.4s;
 
    z-index:1;
 
}
 
.dp-card:hover .dp-card-image::before{
 
    opacity:1;
 
}
 
/* عنوان */
 
.dp-title a:hover{
 
    color:var(--dp-primary);
 
}
 
/* Badge */
 
.dp-card:hover .dp-badge{
 
    background:#009688;
 
    color:#fff;
 
}
 
/* دکمه */
 
.dp-btn{
 
    overflow:hidden;
 
    position:relative;
 
}
 
.dp-btn::before{
 
    content:"";
 
    position:absolute;
 
    top:0;
 
    left:-120%;
 
    width:120%;
 
    height:100%;


@media (max-width:1100px){
    background:


    .fgwiki-grid{
        linear-gradient(


        gap:22px;
            120deg,


    }
            transparent,


    .fgwiki-card{
            rgba(255,255,255,.35),


        min-height:200px;
            transparent


    }
        );


     .fgwiki-image{
     transition:.65s;


        width:40%;
}
        height:200px;


    }
.dp-btn:hover::before{


     .fgwiki-content{
     left:130%;


        width:60%;
}
        padding:22px;


    }
.dp-btn:hover{


     .fgwiki-content h3{
     transform:translateY(-2px);


        font-size:1.15rem;
    box-shadow:


    }
        0 10px 22px rgba(0,150,136,.28);


    .fgwiki-content p{
}


        font-size:.93rem;
/* آیکون */


        line-height:1.9;
.dp-btn svg{


     }
     transition:.3s;


}
}


.dp-btn:hover svg{


@media (max-width:900px){
    transform:translateX(-5px);


    .fgwiki-grid{
}


        grid-template-columns:1fr;
/* عکس */


        gap:22px;
.dp-card-image{


     }
     background:#eef7f8;


}
}


.dp-card img{


@media (max-width:640px){
    will-change:transform;


    .fgwiki-grid-container{
}


        padding:0 12px;
/* ظاهر متن */


        margin:30px auto;
.dp-desc{


     }
     text-align:justify;
 
}


    .fgwiki-card{
/* فاصله خطوط بهتر */


        flex-direction:column;
.dp-title{


        min-height:auto;
    letter-spacing:-.2px;


    }
}


    .fgwiki-card::before{
/* انتخاب متن */


        width:100%;
.dp-card ::selection{
        height:6px;


        top:0;
    background:#009688;
        right:0;


     }
     color:#fff;


    .fgwiki-image{
}


        width:100%;
/* فوکوس برای سئو و دسترس‌پذیری */
        height:220px;


        order:1;
.dp-card a:focus-visible{


     }
     outline:2px solid #00bcd4;


     .fgwiki-content{
     outline-offset:4px;


        width:100%;
    border-radius:8px;


        order:2;
}


        padding:20px 18px;
/* انیمیشن ورود */


    }
@keyframes dpFade{


     .fgwiki-content h3{
     from{


         font-size:1.08rem;
         opacity:0;


         margin-bottom:12px;
         transform:translateY(30px);


     }
     }


     .fgwiki-content p{
     to{


         font-size:.92rem;
         opacity:1;


         -webkit-line-clamp:3;
         transform:none;


     }
     }


    .fgwiki-more{
}


        margin-top:18px;
.dp-card{


     }
     animation:dpFade .55s ease both;


    .fgwiki-more a{
}


        padding:10px 18px;
/* تاخیر کارت‌ها */


        font-size:.88rem;
.dp-card:nth-child(2){


     }
     animation-delay:.08s;


}
}


.dp-card:nth-child(3){


@media (max-width:420px){
    animation-delay:.16s;


    .fgwiki-image{
}


        height:190px;
.dp-card:nth-child(4){


     }
     animation-delay:.24s;
 
}
 
.dp-card:nth-child(5){


     .fgwiki-content{
     animation-delay:.32s;


        padding:18px 16px;
}


    }
.dp-card:nth-child(6){


     .fgwiki-content h3{
     animation-delay:.40s;


        font-size:1rem;
}


    }
/* کاهش انیمیشن برای کاربران حساس */


    .fgwiki-content p{
@media (prefers-reduced-motion:reduce){


        font-size:.88rem;
*{


        line-height:1.8;
animation:none!important;


    }
transition:none!important;


}
}


}


/*=====================================================
/*======================================================
    Accessibility & Performance
        Damavand Polymer Professional Responsive
======================================================*/
======================================================*/


.fgwiki-card,
/* جلوگیری از پرش تصویر (CLS) */
.fgwiki-card *,
 
.fgwiki-card *::before,
.dp-card-image{
.fgwiki-card *::after{
 
    aspect-ratio:16 / 10;
 
    min-height:220px;
 
    overflow:hidden;
 
    background:#eef5f7;
 
}
 
.dp-card-image img{
 
    width:100%;
 
    height:100%;
 
    object-fit:cover;
 
    object-position:center;
 
}
 
 
/* ارتفاع مساوی تمام کارت‌ها */
 
.dp-blog-grid{
 
    align-items:stretch;
 
}
 
.dp-card{
 
    display:flex;
 
    flex-direction:column;
 
    height:100%;
 
}
 
.dp-card-content{
 
    flex:1;
 
    display:flex;
 
    flex-direction:column;
 
}
 
 
/* توضیح همیشه فضای میانی را پر کند */
 
.dp-desc{
 
    flex:1;
 
}
 
 
/* دکمه همیشه پایین کارت */
 
.dp-btn{
 
    margin-top:auto;
 
}
 
 
/* عنوان حداکثر دو خط */
 
.dp-title{
 
    display:-webkit-box;
 
    -webkit-line-clamp:2;
 
    -webkit-box-orient:vertical;
 
    overflow:hidden;
 
}
 
 
/* توضیح حداکثر چهار خط */
 
.dp-desc{
 
    display:-webkit-box;
 
    -webkit-line-clamp:4;
 
    -webkit-box-orient:vertical;


     box-sizing:border-box;
     overflow:hidden;


}
}


.fgwiki-image img{


    backface-visibility:hidden;
/* Badge شیشه‌ای */


     will-change:transform;
.dp-badge{
 
     backdrop-filter:blur(10px);
 
    -webkit-backdrop-filter:blur(10px);
 
    background:rgba(255,255,255,.88);
 
    border:1px solid rgba(255,255,255,.5);


}
}


.fgwiki-card a:focus{


     outline:2px solid #00b894;
/* متای مقاله */
 
.dp-meta{
 
     border-bottom:1px solid #edf2f5;


     outline-offset:3px;
     padding-bottom:12px;
 
    margin-bottom:18px;


}
}


.fgwiki-card:hover h3{


     color:#00b894;
/* تاریخ */
 
.dp-meta time{
 
     white-space:nowrap;


}
}


.fgwiki-content h3,
.fgwiki-content p{


     word-break:break-word;
/* لینک عنوان */
 
.dp-title a{
 
     display:inline;


}
}


.fgwiki-card img{
 
/* دکمه */
 
.dp-btn{
 
    min-height:48px;
 
    border-radius:50px;
 
}
 
 
/* تصاویر همیشه Responsive */
 
.dp-card img{


     max-width:100%;
     max-width:100%;
خط ۲۲۳: خط ۱٬۱۴۶:


}
}
        <!-- Card 4 -->
        <article class="fgwiki-card">


            <div class="fgwiki-image">
                <a href="/wiki/صفحه_چهارم">
                    <img src="images/image4.webp"
                        alt="عنوان خدمت چهارم"
                        loading="lazy"
                        width="500"
                        height="320">
                </a>
            </div>


            <div class="fgwiki-content">
/* فاصله بین کارت‌ها در نمایشگرهای بزرگ */
 
@media (min-width:1400px){
 
.dp-blog-grid{
 
gap:34px;
 
}
 
}
 
 
/* لپ‌تاپ */
 
@media (max-width:1200px){
 
.dp-blog-grid{
 
grid-template-columns:repeat(3,1fr);
 
gap:22px;
 
}
 
.dp-title{
 
font-size:20px;
 
}
 
}
 
 
/* تبلت */
 
@media (max-width:992px){
 
.dp-blog-grid{
 
grid-template-columns:repeat(2,minmax(0,1fr));
 
gap:20px;
 
}
 
.dp-card-image{
 
min-height:200px;
 
}
 
}
 
 
/* موبایل */
 
@media (max-width:768px){
 
.dp-blog-grid{
 
grid-template-columns:1fr;
 
gap:18px;
 
}
 
.dp-card{
 
border-radius:16px;
 
}
 
.dp-card-content{
 
padding:18px;
 
}
 
.dp-card-image{
 
min-height:210px;
 
}
 
.dp-title{
 
font-size:18px;
 
line-height:1.8;
 
}
 
.dp-desc{
 
font-size:14px;
 
line-height:2;
 
}
 
.dp-meta{
 
flex-wrap:wrap;
 
gap:8px;
 
}
 
.dp-btn{
 
width:100%;
 
justify-content:center;
 
}
 
}
 
 
/* موبایل کوچک */
 
@media (max-width:480px){
 
.dp-blog-section{
 
padding:12px;
 
}
 
.dp-card-content{
 
padding:16px;
 
}
 
.dp-title{
 
font-size:17px;
 
}
 
.dp-desc{
 
font-size:13px;
 
}
 
.dp-card-image{
 
min-height:190px;
 
}
 
.dp-badge{
 
font-size:11px;
 
padding:6px 12px;
 
}
 
}
 
 
/* مانیتورهای بزرگ */
 
@media (min-width:1700px){
 
.dp-blog-section{
 
max-width:1600px;
 
}


                <h3>
}
                    <a href="/wiki/صفحه_چهارم">
                        عنوان خدمت چهارم
                    </a>
                </h3>


                <p>
                    توضیحی کوتاه و سئو شده درباره این بخش که کاربر را با موضوع آشنا
                    کرده و او را به مطالعه ادامه مطلب ترغیب می‌کند.
                </p>


                <div class="fgwiki-more">
/* بهبود کیفیت فونت */
                    <a href="/wiki/صفحه_چهارم">
                        بیشتر
                    </a>
                </div>


            </div>
.dp-blog-section{


        </article>
-webkit-font-smoothing:antialiased;


-moz-osx-font-smoothing:grayscale;


        <!-- Card 5 -->
text-rendering:optimizeLegibility;
        <article class="fgwiki-card">


            <div class="fgwiki-image">
}
                <a href="/wiki/صفحه_پنجم">
                    <img src="images/image5.webp"
                        alt="عنوان خدمت پنجم"
                        loading="lazy"
                        width="500"
                        height="320">
                </a>
            </div>


            <div class="fgwiki-content">


                <h3>
/* جلوگیری از شکستن کلمات */
                    <a href="/wiki/صفحه_پنجم">
                        عنوان خدمت پنجم
                    </a>
                </h3>


                <p>
.dp-title,
                    خلاصه‌ای از محتوای این صفحه با استفاده از کلمات کلیدی اصلی تا
.dp-desc{
                    هم برای کاربران و هم برای موتورهای جستجو مفید باشد.
                </p>


                <div class="fgwiki-more">
word-break:normal;
                    <a href="/wiki/صفحه_پنجم">
                        بیشتر
                    </a>
                </div>


            </div>
overflow-wrap:break-word;


        </article>
}




        <!-- Card 6 -->
/* تصاویر بدون کشیدگی */
        <article class="fgwiki-card">


            <div class="fgwiki-image">
.dp-card img{
                <a href="/wiki/صفحه_ششم">
                    <img src="images/image6.webp"
                        alt="عنوان خدمت ششم"
                        loading="lazy"
                        width="500"
                        height="320">
                </a>
            </div>


            <div class="fgwiki-content">
display:block;


                <h3>
}
                    <a href="/wiki/صفحه_ششم">
                        عنوان خدمت ششم
                    </a>
                </h3>


                <p>
                    معرفی کوتاه این بخش همراه با توضیحی جذاب که نرخ کلیک را افزایش
                    داده و کاربران را به مشاهده جزئیات هدایت کند.
                </p>


                <div class="fgwiki-more">
/* حذف فاصله اضافی لینک‌ها */
                    <a href="/wiki/صفحه_ششم">
                        بیشتر
                    </a>
                </div>


            </div>
.dp-card a{


        </article>
text-decoration:none;


    </div>
}


</div>


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