پرش به محتوا

کانتینر 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>
<div class="fgwiki-grid-container">


/*=====================================================
     <div class="fgwiki-grid">
     Responsive
======================================================*/


@media (max-width:1100px){
        <!-- Card 1 -->
        <article class="fgwiki-card">


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


        gap:22px;
            <div class="fgwiki-content">


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


    .fgwiki-card{
                <p>
                    توضیح کوتاه حدود دو خط درباره این بخش، شامل کلمات کلیدی مهم
                    برای سئو و معرفی مختصر صفحه مقصد.
                </p>


        min-height:200px;
                <div class="fgwiki-more">
                    <a href="/wiki/صفحه_اول">
                        بیشتر
                    </a>
                </div>


    }
            </div>


    .fgwiki-image{
        </article>


        width:40%;
        height:200px;


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


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


        width:60%;
            <div class="fgwiki-content">
        padding:22px;


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


    .fgwiki-content h3{
                <p>
                    توضیحی کوتاه و کاربردی درباره این خدمت یا محصول که کاربران را
                    برای ورود به صفحه اصلی ترغیب کند.
                </p>


        font-size:1.15rem;
                <div class="fgwiki-more">
                    <a href="/wiki/صفحه_دوم">
                        بیشتر
                    </a>
                </div>


    }
            </div>


    .fgwiki-content p{
        </article>


        font-size:.93rem;


         line-height:1.9;
         <!-- Card 3 -->
        <article class="fgwiki-card">


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


}
            <div class="fgwiki-content">


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


@media (max-width:900px){
                <p>
                    این متن نمونه است و می‌توانید خلاصه‌ای از محتوای صفحه را در
                    حدود دو خط برای بهبود سئو و تجربه کاربری قرار دهید.
                </p>


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


        grid-template-columns:1fr;
            </div>


         gap:22px;
         </article>
 
    }
 
}
 
 
@media (max-width:640px){
 
    .fgwiki-grid-container{
 
        padding:0 12px;
 
        margin:30px auto;
 
    }
 
    .fgwiki-card{
 
        flex-direction:column;
 
        min-height:auto;
 
    }
 
    .fgwiki-card::before{
 
        width:100%;
        height:6px;
 
        top:0;
        right:0;
 
    }
 
    .fgwiki-image{
 
        width:100%;
        height:220px;
 
        order:1;
 
    }
 
    .fgwiki-content{
 
        width:100%;
 
        order:2;
 
        padding:20px 18px;
 
    }
 
    .fgwiki-content h3{
 
        font-size:1.08rem;
 
        margin-bottom:12px;
 
    }
 
    .fgwiki-content p{
 
        font-size:.92rem;
 
        -webkit-line-clamp:3;
 
    }
 
    .fgwiki-more{
 
        margin-top:18px;
 
    }
 
    .fgwiki-more a{
 
        padding:10px 18px;
 
        font-size:.88rem;
 
    }
 
}
 
 
@media (max-width:420px){
 
    .fgwiki-image{
 
        height:190px;
 
    }
 
    .fgwiki-content{
 
        padding:18px 16px;
 
    }
 
    .fgwiki-content h3{
 
        font-size:1rem;
 
    }
 
    .fgwiki-content p{
 
        font-size:.88rem;
 
        line-height:1.8;
 
    }
 
}
 
 
/*=====================================================
    Accessibility & Performance
======================================================*/
 
.fgwiki-card,
.fgwiki-card *,
.fgwiki-card *::before,
.fgwiki-card *::after{
 
    box-sizing:border-box;
 
}
 
.fgwiki-image img{
 
    backface-visibility:hidden;
 
    will-change:transform;
 
}
 
.fgwiki-card a:focus{
 
    outline:2px solid #00b894;
 
    outline-offset:3px;
 
}
 
.fgwiki-card:hover h3{
 
    color:#00b894;
 
}
 
.fgwiki-content h3,
.fgwiki-content p{
 
    word-break:break-word;
 
}
 
.fgwiki-card img{
 
    max-width:100%;
 
    height:auto;
 
}
         <!-- Card 4 -->
         <!-- Card 4 -->
         <article class="fgwiki-card">
         <article class="fgwiki-card">

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

عنوان خدمت اول

عنوان خدمت اول

توضیح کوتاه حدود دو خط درباره این بخش، شامل کلمات کلیدی مهم برای سئو و معرفی مختصر صفحه مقصد.

بیشتر
عنوان خدمت دوم

عنوان خدمت دوم

توضیحی کوتاه و کاربردی درباره این خدمت یا محصول که کاربران را برای ورود به صفحه اصلی ترغیب کند.

بیشتر
عنوان خدمت سوم

عنوان خدمت سوم

این متن نمونه است و می‌توانید خلاصه‌ای از محتوای صفحه را در حدود دو خط برای بهبود سئو و تجربه کاربری قرار دهید.

بیشتر
عنوان خدمت چهارم

عنوان خدمت چهارم

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

بیشتر
عنوان خدمت پنجم

عنوان خدمت پنجم

خلاصه‌ای از محتوای این صفحه با استفاده از کلمات کلیدی اصلی تا هم برای کاربران و هم برای موتورهای جستجو مفید باشد.

بیشتر
عنوان خدمت ششم

عنوان خدمت ششم

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

بیشتر

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