پرش به محتوا

کانتینر 3 در 2 - فراغیب

از فراغیب
→ تفاوت با ویرایش قدیمی‌تر
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
 
خط ۱: خط ۱:
<html>
<html>


<div class="dpx-section">
<section class="dp-blog-section" aria-label="آخرین مقالات دماوند پلیمر">


     <div class="dpx-grid">
     <div class="dp-blog-grid">


         <!-- ================= Card 1 ================= -->
         <!-- کارت 1 -->
        <article class="dp-card">


        <article class="dpx-card">
            <a href="#" class="dp-card-image">


            <div class="dpx-image">
                <img
                    src="images/article-1.webp"
                    alt="راهنمای خرید مخزن پلی اتیلن"
                    loading="lazy"
                    decoding="async"
                    width="420"
                    height="320">


                 <span class="dpx-badge">
                 <span class="dp-badge">راهنمای خرید</span>
                    محبوب
                </span>


                <picture>
            </a>


                    <source srcset="images/security-door.webp" type="image/webp">
            <div class="dp-card-content">


                    <img
                <div class="dp-meta">
                        src="images/security-door.jpg"
                        alt="راهنمای خرید درب ضد سرقت"
                        width="520"
                        height="340"
                        loading="lazy"
                        decoding="async">


                 </picture>
                    <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">
 
                    مطالعه مقاله


                <span class="dpx-gradient"></span>
                    <svg viewBox="0 0 24 24">
 
                        <path d="M15 6l-6 6 6 6"/>
 
                    </svg>
 
                </a>


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


            <div class="dpx-content">
                <span class="dp-badge">قیمت</span>


                <span class="dpx-category">
            </a>
                    راهنمای خرید
                </span>


                <h3 class="dpx-title">
            <div class="dp-card-content">


                    <a href="/wiki/راهنمای_خرید_درب_ضد_سرقت">
                <div class="dp-meta">


                         راهنمای خرید درب ضد سرقت
                    <span class="dp-category">
                         قیمت
                    </span>


                    <time datetime="2026-07-28">
                        ۲۸ تیر ۱۴۰۵
                    </time>
                </div>
                <h2 class="dp-title">
                    <a href="#">
                        قیمت مخزن پلی اتیلن
                     </a>
                     </a>


                 </h3>
                 </h2>


                 <p class="dpx-desc">
                 <p class="dp-desc">


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


                 </p>
                 </p>


                 <div class="dpx-spacer"></div>
                 <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>


                <div class="dpx-footer">
            </a>


                    <span class="dpx-meta">
            <div class="dp-card-content">


                        بروزرسانی ۱۴۰۵
                <div class="dp-meta">


                    <span class="dp-category">
                        کاربردها
                     </span>
                     </span>


                     <a class="dpx-more"
                     <time datetime="2026-07-27">
                      href="/wiki/راهنمای_خرید_درب_ضد_سرقت">
                        ۲۷ تیر ۱۴۰۵
                    </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>


                        <svg viewBox="0 0 24 24"
                    <time datetime="2026-07-26">
                            fill="none"
                        ۲۶ تیر ۱۴۰۵
                            stroke="currentColor"
                    </time>
                            stroke-width="2">


                            <path d="M15 18l-6-6 6-6"/>
                </div>


                        </svg>
                <h2 class="dp-title">


                    <a href="#">
                        مخزن پلی اتیلن سه لایه
                     </a>
                     </a>


                 </div>
                 </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>
             </div>
خط ۸۹: خط ۲۴۹:
         </article>
         </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%;
    background:
        linear-gradient(
            120deg,
            transparent,
            rgba(255,255,255,.35),
            transparent
        );
    transition:.65s;
}
.dp-btn:hover::before{
    left:130%;
}
.dp-btn:hover{
    transform:translateY(-2px);
    box-shadow:
        0 10px 22px rgba(0,150,136,.28);
}
/* آیکون */
.dp-btn svg{
    transition:.3s;
}
.dp-btn:hover svg{
    transform:translateX(-5px);
}
/* عکس */
.dp-card-image{
    background:#eef7f8;
}
.dp-card img{
    will-change:transform;
}
/* ظاهر متن */
.dp-desc{
    text-align:justify;
}
/* فاصله خطوط بهتر */
.dp-title{
    letter-spacing:-.2px;
}
/* انتخاب متن */
.dp-card ::selection{
    background:#009688;
    color:#fff;
}
/* فوکوس برای سئو و دسترس‌پذیری */
.dp-card a:focus-visible{
    outline:2px solid #00bcd4;
    outline-offset:4px;
    border-radius:8px;
}
/* انیمیشن ورود */
@keyframes dpFade{
    from{
        opacity:0;
        transform:translateY(30px);
    }
    to{
        opacity:1;
        transform:none;
    }
}
.dp-card{
    animation:dpFade .55s ease both;
}
/* تاخیر کارت‌ها */
.dp-card:nth-child(2){
    animation-delay:.08s;
}
.dp-card:nth-child(3){
    animation-delay:.16s;
}
.dp-card:nth-child(4){
    animation-delay:.24s;
}
.dp-card:nth-child(5){
    animation-delay:.32s;
}
.dp-card:nth-child(6){
    animation-delay:.40s;
}
/* کاهش انیمیشن برای کاربران حساس */
@media (prefers-reduced-motion:reduce){
*{
animation:none!important;
transition:none!important;
}
}
/*======================================================
        Damavand Polymer Professional Responsive
======================================================*/
/* جلوگیری از پرش تصویر (CLS) */
.dp-card-image{
    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%;


}


        <!-- ================= Card 2 ================= -->
.dp-card-content{


        <article class="dpx-card">
    flex:1;


            <div class="dpx-image">
    display:flex;


                <picture>
    flex-direction:column;


                    <source srcset="images/install.webp" type="image/webp">
}


                    <img
                        src="images/install.jpg"
                        alt="آموزش نصب درب ضد سرقت"
                        width="520"
                        height="340"
                        loading="lazy"
                        decoding="async">


                </picture>
/* توضیح همیشه فضای میانی را پر کند */


                <span class="dpx-gradient"></span>
.dp-desc{
 
    flex:1;
 
}


            </div>


            <div class="dpx-content">
/* دکمه همیشه پایین کارت */


                <span class="dpx-category">
.dp-btn{


                    آموزش
    margin-top:auto;


                </span>
}


                <h3 class="dpx-title">


                    <a href="/wiki/نصب_درب_ضد_سرقت">
/* عنوان حداکثر دو خط */


                        آموزش نصب درب ضد سرقت
.dp-title{


                    </a>
    display:-webkit-box;


                </h3>
    -webkit-line-clamp:2;


                <p class="dpx-desc">
    -webkit-box-orient:vertical;


                    با مراحل نصب اصولی، رگلاژ، نکات فنی و اشتباهات رایج
    overflow:hidden;
                    هنگام نصب درب ضد سرقت آشنا شوید.


                </p>
}


                <div class="dpx-spacer"></div>


                <div class="dpx-footer">
/* توضیح حداکثر چهار خط */


                    <span class="dpx-meta">
.dp-desc{


                        آموزش تخصصی
    display:-webkit-box;


                    </span>
    -webkit-line-clamp:4;


                    <a class="dpx-more"
    -webkit-box-orient:vertical;
                      href="/wiki/نصب_درب_ضد_سرقت">


                        بیشتر
    overflow:hidden;


                        <svg viewBox="0 0 24 24"
}
                            fill="none"
                            stroke="currentColor"
                            stroke-width="2">


                            <path d="M15 18l-6-6 6-6"/>


                        </svg>
/* Badge شیشه‌ای */


                    </a>
.dp-badge{


                </div>
    backdrop-filter:blur(10px);


            </div>
    -webkit-backdrop-filter:blur(10px);


        </article>
    background:rgba(255,255,255,.88);


    border:1px solid rgba(255,255,255,.5);


}


        <!-- ================= Card 3 ================= -->


        <article class="dpx-card">
/* متای مقاله */


            <div class="dpx-image">
.dp-meta{


                <span class="dpx-badge">
    border-bottom:1px solid #edf2f5;


                    جدید
    padding-bottom:12px;


                </span>
    margin-bottom:18px;


                <picture>
}


                    <source srcset="images/lock.webp" type="image/webp">


                    <img
/* تاریخ */
                        src="images/lock.jpg"
                        alt="بهترین قفل درب ضد سرقت"
                        width="520"
                        height="340"
                        loading="lazy"
                        decoding="async">


                </picture>
.dp-meta time{


                <span class="dpx-gradient"></span>
    white-space:nowrap;


            </div>
}


            <div class="dpx-content">


                <span class="dpx-category">
/* لینک عنوان */


                    امنیت
.dp-title a{


                </span>
    display:inline;


                <h3 class="dpx-title">
}


                    <a href="/wiki/قفل_درب_ضد_سرقت">


                        بهترین قفل درب ضد سرقت
/* دکمه */


                    </a>
.dp-btn{


                </h3>
    min-height:48px;


                <p class="dpx-desc">
    border-radius:50px;


                    مقایسه کامل انواع قفل، سیلندر، مغزی و سیستم‌های
}
                    امنیتی مورد استفاده در درب‌های ضد سرقت.


                </p>


                <div class="dpx-spacer"></div>
/* تصاویر همیشه Responsive */


                <div class="dpx-footer">
.dp-card img{


                    <span class="dpx-meta">
    max-width:100%;


                        راهنمای تخصصی
    height:auto;


                    </span>
}


                    <a class="dpx-more"
                      href="/wiki/قفل_درب_ضد_سرقت">


                        بیشتر
/* فاصله بین کارت‌ها در نمایشگرهای بزرگ */


                        <svg viewBox="0 0 24 24"
@media (min-width:1400px){
                            fill="none"
                            stroke="currentColor"
                            stroke-width="2">


                            <path d="M15 18l-6-6 6-6"/>
.dp-blog-grid{


                        </svg>
gap:34px;


                    </a>
}


                </div>
}


            </div>


        </article>
/* لپ‌تاپ */


        <!-- ================= Card 4 ================= -->
@media (max-width:1200px){


        <article class="dpx-card">
.dp-blog-grid{


            <div class="dpx-image">
grid-template-columns:repeat(3,1fr);


                <span class="dpx-badge">ویژه</span>
gap:22px;


                <a href="/wiki/نگهداری_درب_ضد_سرقت">
}


                    <picture>
.dp-title{


                        <source srcset="images/maintenance.webp" type="image/webp">
font-size:20px;


                        <img
}
                            src="images/maintenance.jpg"
                            alt="نگهداری و افزایش عمر درب ضد سرقت"
                            width="520"
                            height="340"
                            loading="lazy"
                            decoding="async">


                    </picture>
}


                </a>


                <span class="dpx-gradient"></span>
/* تبلت */


            </div>
@media (max-width:992px){


            <div class="dpx-content">
.dp-blog-grid{


                <span class="dpx-category">
grid-template-columns:repeat(2,minmax(0,1fr));
                    نگهداری
                </span>


                <h3 class="dpx-title">
gap:20px;


                    <a href="/wiki/نگهداری_درب_ضد_سرقت">
}


                        نگهداری و افزایش عمر درب ضد سرقت
.dp-card-image{


                    </a>
min-height:200px;


                </h3>
}


                <p class="dpx-desc">
}


                    با روش‌های صحیح نگهداری، سرویس دوره‌ای، تنظیم لولا و افزایش
                    طول عمر درب ضد سرقت آشنا شوید.


                </p>
/* موبایل */


                <div class="dpx-spacer"></div>
@media (max-width:768px){


                <div class="dpx-footer">
.dp-blog-grid{


                    <span class="dpx-meta">
grid-template-columns:1fr;
                        آموزش کاربردی
                    </span>


                    <a class="dpx-more"
gap:18px;
                      href="/wiki/نگهداری_درب_ضد_سرقت">


                        بیشتر
}


                        <svg viewBox="0 0 24 24"
.dp-card{
                            fill="none"
                            stroke="currentColor"
                            stroke-width="2"
                            stroke-linecap="round"
                            stroke-linejoin="round">


                            <path d="M15 18l-6-6 6-6"/>
border-radius:16px;


                        </svg>
}


                    </a>
.dp-card-content{


                </div>
padding:18px;


            </div>
}


        </article>
.dp-card-image{


min-height:210px;


}


        <!-- ================= Card 5 ================= -->
.dp-title{


        <article class="dpx-card">
font-size:18px;


            <div class="dpx-image">
line-height:1.8;


                <a href="/wiki/قیمت_درب_ضد_سرقت">
}


                    <picture>
.dp-desc{


                        <source srcset="images/price.webp" type="image/webp">
font-size:14px;


                        <img
line-height:2;
                            src="images/price.jpg"
                            alt="قیمت درب ضد سرقت و عوامل مؤثر بر قیمت"
                            width="520"
                            height="340"
                            loading="lazy"
                            decoding="async">


                    </picture>
}


                </a>
.dp-meta{


                <span class="dpx-gradient"></span>
flex-wrap:wrap;


            </div>
gap:8px;


            <div class="dpx-content">
}


                <span class="dpx-category">
.dp-btn{
                    قیمت
                </span>


                <h3 class="dpx-title">
width:100%;


                    <a href="/wiki/قیمت_درب_ضد_سرقت">
justify-content:center;


                        قیمت درب ضد سرقت و عوامل مؤثر بر قیمت
}


                    </a>
}


                </h3>


                <p class="dpx-desc">
/* موبایل کوچک */


                    بررسی عوامل مؤثر بر قیمت، تفاوت مدل‌های اقتصادی و لوکس و
@media (max-width:480px){
                    نکات مهم قبل از خرید درب ضد سرقت.


                </p>
.dp-blog-section{


                <div class="dpx-spacer"></div>
padding:12px;


                <div class="dpx-footer">
}


                    <span class="dpx-meta">
.dp-card-content{
                        راهنمای خرید
                    </span>


                    <a class="dpx-more"
padding:16px;
                      href="/wiki/قیمت_درب_ضد_سرقت">


                        بیشتر
}


                        <svg viewBox="0 0 24 24"
.dp-title{
                            fill="none"
                            stroke="currentColor"
                            stroke-width="2"
                            stroke-linecap="round"
                            stroke-linejoin="round">


                            <path d="M15 18l-6-6 6-6"/>
font-size:17px;


                        </svg>
}


                    </a>
.dp-desc{


                </div>
font-size:13px;


            </div>
}


        </article>
.dp-card-image{


min-height:190px;


}


        <!-- ================= Card 6 ================= -->
.dp-badge{


        <article class="dpx-card">
font-size:11px;


            <div class="dpx-image">
padding:6px 12px;


                <span class="dpx-badge">پرفروش</span>
}


                <a href="/wiki/مقایسه_درب_ضد_سرقت">
}


                    <picture>


                        <source srcset="images/comparison.webp" type="image/webp">
/* مانیتورهای بزرگ */


                        <img
@media (min-width:1700px){
                            src="images/comparison.jpg"
                            alt="مقایسه انواع درب ضد سرقت"
                            width="520"
                            height="340"
                            loading="lazy"
                            decoding="async">


                    </picture>
.dp-blog-section{


                </a>
max-width:1600px;


                <span class="dpx-gradient"></span>
}


            </div>
}


            <div class="dpx-content">


                <span class="dpx-category">
/* بهبود کیفیت فونت */
                    مقایسه
                </span>


                <h3 class="dpx-title">
.dp-blog-section{


                    <a href="/wiki/مقایسه_درب_ضد_سرقت">
-webkit-font-smoothing:antialiased;


                        مقایسه انواع درب ضد سرقت
-moz-osx-font-smoothing:grayscale;


                    </a>
text-rendering:optimizeLegibility;


                </h3>
}


                <p class="dpx-desc">


                    مقایسه کامل درب‌های ضد سرقت ایرانی، ترک، MDF، PVC و فلزی
/* جلوگیری از شکستن کلمات */
                    برای انتخاب بهترین گزینه متناسب با بودجه و نیاز شما.


                </p>
.dp-title,
.dp-desc{


                <div class="dpx-spacer"></div>
word-break:normal;


                <div class="dpx-footer">
overflow-wrap:break-word;


                    <span class="dpx-meta">
}
                        مقایسه تخصصی
                    </span>


                    <a class="dpx-more"
                      href="/wiki/مقایسه_درب_ضد_سرقت">


                        بیشتر
/* تصاویر بدون کشیدگی */


                        <svg viewBox="0 0 24 24"
.dp-card img{
                            fill="none"
                            stroke="currentColor"
                            stroke-width="2"
                            stroke-linecap="round"
                            stroke-linejoin="round">


                            <path d="M15 18l-6-6 6-6"/>
display:block;


                        </svg>
}


                    </a>


                </div>
/* حذف فاصله اضافی لینک‌ها */


            </div>
.dp-card a{


        </article>
text-decoration:none;


    </div>
}


</div>


</html>
</html>

نسخهٔ کنونی تا ‏۲۹ ژوئیهٔ ۲۰۲۶، ساعت ۱۰:۰۰

/*============================== 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%; background: linear-gradient( 120deg, transparent, rgba(255,255,255,.35), transparent ); transition:.65s; } .dp-btn:hover::before{ left:130%; } .dp-btn:hover{ transform:translateY(-2px); box-shadow: 0 10px 22px rgba(0,150,136,.28); } /* آیکون */ .dp-btn svg{ transition:.3s; } .dp-btn:hover svg{ transform:translateX(-5px); } /* عکس */ .dp-card-image{ background:#eef7f8; } .dp-card img{ will-change:transform; } /* ظاهر متن */ .dp-desc{ text-align:justify; } /* فاصله خطوط بهتر */ .dp-title{ letter-spacing:-.2px; } /* انتخاب متن */ .dp-card ::selection{ background:#009688; color:#fff; } /* فوکوس برای سئو و دسترس‌پذیری */ .dp-card a:focus-visible{ outline:2px solid #00bcd4; outline-offset:4px; border-radius:8px; } /* انیمیشن ورود */ @keyframes dpFade{ from{ opacity:0; transform:translateY(30px); } to{ opacity:1; transform:none; } } .dp-card{ animation:dpFade .55s ease both; } /* تاخیر کارت‌ها */ .dp-card:nth-child(2){ animation-delay:.08s; } .dp-card:nth-child(3){ animation-delay:.16s; } .dp-card:nth-child(4){ animation-delay:.24s; } .dp-card:nth-child(5){ animation-delay:.32s; } .dp-card:nth-child(6){ animation-delay:.40s; } /* کاهش انیمیشن برای کاربران حساس */ @media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important; } } /*====================================================== Damavand Polymer Professional Responsive ======================================================*/ /* جلوگیری از پرش تصویر (CLS) */ .dp-card-image{ 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; overflow:hidden; } /* Badge شیشه‌ای */ .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); } /* متای مقاله */ .dp-meta{ border-bottom:1px solid #edf2f5; padding-bottom:12px; margin-bottom:18px; } /* تاریخ */ .dp-meta time{ white-space:nowrap; } /* لینک عنوان */ .dp-title a{ display:inline; } /* دکمه */ .dp-btn{ min-height:48px; border-radius:50px; } /* تصاویر همیشه Responsive */ .dp-card img{ max-width:100%; height:auto; } /* فاصله بین کارت‌ها در نمایشگرهای بزرگ */ @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; } } /* بهبود کیفیت فونت */ .dp-blog-section{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; } /* جلوگیری از شکستن کلمات */ .dp-title, .dp-desc{ word-break:normal; overflow-wrap:break-word; } /* تصاویر بدون کشیدگی */ .dp-card img{ display:block; } /* حذف فاصله اضافی لینک‌ها */ .dp-card a{ text-decoration:none; }

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