فراغیب

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

→ تفاوت با ویرایش قدیمی‌تر
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
 
(یک نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد)
خط ۱: خط ۱:
<html>
<html>
<div class="fgwiki-grid-container">


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


        <!-- Card 1 -->
    <div class="dp-blog-grid">
        <article class="fgwiki-card">


            <div class="fgwiki-image">
        <!-- کارت 1 -->
                <a href="/wiki/صفحه_اول">
        <article class="dp-card">
                    <img src="images/image1.webp"
 
                        alt="عنوان خدمت اول"
            <a href="#" class="dp-card-image">
                        loading="lazy"
 
                        width="500"
                <img
                        height="320">
                    src="images/article-1.webp"
                 </a>
                    alt="راهنمای خرید مخزن پلی اتیلن"
             </div>
                    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>


            <div class="fgwiki-content">
                <h2 class="dp-title">


                <h3>
                     <a href="#">
                     <a href="/wiki/صفحه_اول">
                         راهنمای خرید مخزن پلی اتیلن
                         عنوان خدمت اول
                     </a>
                     </a>
                </h3>


                 <p>
                </h2>
                     توضیح کوتاه حدود دو خط درباره این بخش، شامل کلمات کلیدی مهم
 
                    برای سئو و معرفی مختصر صفحه مقصد.
                 <p class="dp-desc">
 
                     اگر قصد خرید مخزن پلی اتیلن دارید، در این مقاله مهم‌ترین نکات انتخاب ظرفیت، کیفیت، تعداد لایه و کاربرد انواع مخازن را بررسی کرده‌ایم.
 
                 </p>
                 </p>


                 <div class="fgwiki-more">
                 <a href="#" class="dp-btn">
                     <a href="/wiki/صفحه_اول">
 
                         بیشتر
                    مطالعه مقاله
                     </a>
 
                 </div>
                     <svg viewBox="0 0 24 24">
 
                         <path d="M15 6l-6 6 6 6"/>
 
                     </svg>
 
                 </a>


             </div>
             </div>
خط ۴۰: خط ۶۶:
         </article>
         </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>


        <!-- Card 2 -->
                    <time datetime="2026-07-28">
        <article class="fgwiki-card">
                        ۲۸ تیر ۱۴۰۵
                    </time>


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


            <div class="fgwiki-content">
                <h2 class="dp-title">


                <h3>
                     <a href="#">
                     <a href="/wiki/صفحه_دوم">
                         قیمت مخزن پلی اتیلن
                         عنوان خدمت دوم
                     </a>
                     </a>
                </h3>


                 <p>
                </h2>
                    توضیحی کوتاه و کاربردی درباره این خدمت یا محصول که کاربران را
 
                     برای ورود به صفحه اصلی ترغیب کند.
                 <p class="dp-desc">
 
                     قیمت مخزن پلی اتیلن به ظرفیت، تعداد لایه، برند تولیدکننده و نوع مواد اولیه بستگی دارد.
 
                 </p>
                 </p>


                 <div class="fgwiki-more">
                 <a href="#" class="dp-btn">
                     <a href="/wiki/صفحه_دوم">
 
                         بیشتر
                    مطالعه مقاله
                     </a>
 
                 </div>
                     <svg viewBox="0 0 24 24">
 
                         <path d="M15 6l-6 6 6 6"/>
 
                     </svg>
 
                 </a>


             </div>
             </div>
خط ۷۷: خط ۱۲۷:
         </article>
         </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">


        <!-- Card 3 -->
                <span class="dp-badge">کاربردها</span>
        <article class="fgwiki-card">


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


            <div class="fgwiki-content">
                <div class="dp-meta">


                <h3>
                     <span class="dp-category">
                     <a href="/wiki/صفحه_سوم">
                         کاربردها
                         عنوان خدمت سوم
                     </span>
                     </a>
                </h3>


                <p>
                    <time datetime="2026-07-27">
                    این متن نمونه است و می‌توانید خلاصه‌ای از محتوای صفحه را در
                        ۲۷ تیر ۱۴۰۵
                     حدود دو خط برای بهبود سئو و تجربه کاربری قرار دهید.
                     </time>
                </p>


                <div class="fgwiki-more">
                    <a href="/wiki/صفحه_سوم">
                        بیشتر
                    </a>
                 </div>
                 </div>


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


        </article>
                    <a href="#">
        <!-- Card 4 -->
                        کاربرد مخزن پلی اتیلن
        <article class="fgwiki-card">
                    </a>


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


            <div class="fgwiki-content">
                <p class="dp-desc">


                <h3>
                     از مخازن پلی اتیلن برای ذخیره آب، مواد غذایی، مواد شیمیایی و بسیاری از مایعات صنعتی استفاده می‌شود.
                     <a href="/wiki/صفحه_چهارم">
                        عنوان خدمت چهارم
                    </a>
                </h3>


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


                 <div class="fgwiki-more">
                 <a href="#" class="dp-btn">
                    <a href="/wiki/صفحه_چهارم">
                        بیشتر
                    </a>
                </div>


            </div>
                    مطالعه مقاله


        </article>
                    <svg viewBox="0 0 24 24">


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


        <!-- Card 5 -->
                    </svg>
        <article class="fgwiki-card">


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


             <div class="fgwiki-content">
        </article>
 
        <!-- کارت 4 -->
        <article class="dp-card">
 
             <a href="#" class="dp-card-image">


                 <h3>
                 <img
                     <a href="/wiki/صفحه_پنجم">
                     src="images/article-4.webp"
                        عنوان خدمت پنجم
                    alt="مخزن سه لایه"
                     </a>
                    loading="lazy"
                </h3>
                    decoding="async"
                     width="420"
                    height="320">


                 <p>
                 <span class="dp-badge">محصولات</span>
                    خلاصه‌ای از محتوای این صفحه با استفاده از کلمات کلیدی اصلی تا
                    هم برای کاربران و هم برای موتورهای جستجو مفید باشد.
                </p>


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


             </div>
             <div class="dp-card-content">


        </article>
                <div class="dp-meta">


                    <span class="dp-category">
                        محصولات
                    </span>


        <!-- Card 6 -->
                    <time datetime="2026-07-26">
        <article class="fgwiki-card">
                        ۲۶ تیر ۱۴۰۵
                    </time>


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


            <div class="fgwiki-content">
                <h2 class="dp-title">


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


                 <p>
                </h2>
                     معرفی کوتاه این بخش همراه با توضیحی جذاب که نرخ کلیک را افزایش
 
                    داده و کاربران را به مشاهده جزئیات هدایت کند.
                 <p class="dp-desc">
 
                     مخازن سه لایه دماوند پلیمر با مقاومت بالا در برابر اشعه UV، بهترین گزینه برای نگهداری آب شرب هستند.
 
                 </p>
                 </p>


                 <div class="fgwiki-more">
                 <a href="#" class="dp-btn">
                     <a href="/wiki/صفحه_ششم">
 
                         بیشتر
                    مطالعه مقاله
                     </a>
 
                 </div>
                     <svg viewBox="0 0 24 24">
 
                         <path d="M15 6l-6 6 6 6"/>
 
                     </svg>
 
                 </a>


             </div>
             </div>
خط ۲۲۵: خط ۲۵۱:
     </div>
     </div>


</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%;
 
}
 
.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;
 
}
 


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