فراغیب

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

→ تفاوت با ویرایش قدیمی‌ترتفاوت با ویرایش جدیدتر ←
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
خط ۱: خط ۱:


<html lang="fa" dir="rtl">
<html lang="fa" dir="rtl">
<head>
<head>
     <meta charset="UTF-8">
     <meta charset="UTF-8">
خط ۶: خط ۷:


     <title>کارت‌های محتوا</title>
     <title>کارت‌های محتوا</title>
    <meta name="description"
          content="مجموعه‌ای از مطالب آموزشی، مقالات تخصصی و آموزش‌های کاربردی">


     <style>
     <style>
         /* =========================
 
         /* =========================================================
           RESET
           RESET
         ========================= */
         ========================================================= */


         * {
         *,
        *::before,
        *::after {
             box-sizing: border-box;
             box-sizing: border-box;
             margin: 0;
             margin: 0;
             padding: 0;
             padding: 0;
        }
        html {
            width: 100%;
            overflow-x: hidden;
         }
         }


         body {
         body {
             font-family: Tahoma, Arial, sans-serif;
             width: 100%;
            margin: 0;
            padding: 0;
             background: #ffffff;
             background: #ffffff;
            color: #374151;
            font-family:
                Tahoma,
                Arial,
                sans-serif;
             direction: rtl;
             direction: rtl;
            overflow-x: hidden;
         }
         }


خط ۳۰: خط ۵۰:


         a {
         a {
            color: inherit;
             text-decoration: none;
             text-decoration: none;
            color: inherit;
         }
         }




         /* =========================
         /* =========================================================
           MAIN CONTAINER
           MAIN CONTAINER
         ========================= */
         ========================================================= */


         .content-container {
         .content-container {
خط ۴۳: خط ۶۳:
             max-width: 1400px;
             max-width: 1400px;
             margin: 0 auto;
             margin: 0 auto;
             padding: 12px;
             padding: 18px 13px;
         }
         }




         /* =========================
         /* =========================================================
           MAIN GRID
           MAIN GRID
         ========================= */
         
          دسکتاپ:
          ستون چپ = کارت‌های تصویری
          ستون راست = کارت اصلی
         ========================================================= */


         .content-grid {
         .content-grid {
            width: 100%;
             display: grid;
             display: grid;
             grid-template-columns: 1fr;
             grid-template-columns: minmax(0, 1fr);
             gap: 16px;
             gap: 16px;
            align-items: stretch;
         }
         }




         /* =========================
         /* =========================================================
           LEFT CARDS
           LEFT SIDE
         ========================= */
         ========================================================= */


         .left-cards {
         .left-cards {
            width: 100%;
             display: grid;
             display: grid;
             grid-template-columns: 1fr 1fr;
 
            /*
              ردیف اول کمی کوتاه‌تر
              ردیف دوم کمی بلندتر
            */
             grid-template-columns:
                minmax(0, 1fr)
                minmax(0, 1fr);
 
            grid-template-rows:
                minmax(0, .95fr)
                minmax(0, 1fr);
 
             gap: 16px;
             gap: 16px;
        }


        /* کارت بزرگ بالایی */
             min-width: 0;
        .top-small-card {
             grid-column: 1 / -1;
         }
         }




         /* =========================
         /* =========================================================
           SMALL IMAGE CARDS
           IMAGE CARD
         ========================= */
         ========================================================= */


         .image-card {
         .image-card {
             position: relative;
             position: relative;
            display: block;
             width: 100%;
             width: 100%;
            height: 100%;
            min-width: 0;
            min-height: 0;
             overflow: hidden;
             overflow: hidden;
            border-radius: 22px;
 
             background: #e5edf7;
             background: #e5edf7;
             aspect-ratio: 1 / 0.75;
 
             border-radius: 24px;
 
            isolation: isolate;
         }
         }


         .image-card img {
         .image-card img {
             width: 100%;
             width: 100%;
             height: 100%;
             height: 100%;
            /*
              تصویر کاملاً فضای کارت را پر می‌کند.
              نسبت کارت‌ها مطابق تصویر مرجع تنظیم شده است.
            */
             object-fit: cover;
             object-fit: cover;
             object-position: center;
             object-position: center;
             transition: transform 0.35s ease;
 
            transform: scale(1);
             transition:
                transform .3s ease;
         }
         }
        /*
          فقط یک Hover بسیار ظریف
        */


         .image-card:hover img {
         .image-card:hover img {
             transform: scale(1.03);
             transform: scale(1.015);
         }
         }




         /* =========================
         /* =========================================================
           MAIN RIGHT CARD
          TOP LARGE CARD
         ========================= */
        ========================================================= */
 
        .top-small-card {
            grid-column: 1 / -1;
 
            /*
              نسبت واقعی‌تر نسبت به تصویر مرجع
            */
            aspect-ratio: 2.27 / 1;
        }
 
 
        /* =========================================================
          BOTTOM CARDS
        ========================================================= */
 
        .left-cards > .image-card:not(.top-small-card) {
            aspect-ratio: 1.04 / 1;
        }
 
 
        /* =========================================================
           MAIN CARD
         ========================================================= */


         .main-card {
         .main-card {
             width: 100%;
             width: 100%;
            min-width: 0;
             background: #ffffff;
             background: #ffffff;
             border-radius: 28px;
             border-radius: 28px;
             padding: 24px;
             padding: 24px;
             box-shadow: 0 8px 30px rgba(0, 0, 0, 0.07);
 
             box-shadow:
                0 8px 30px rgba(0, 0, 0, .065);
 
            display: flex;
            flex-direction: column;
 
            /*
              ارتفاع کارت با ستون سمت چپ هماهنگ می‌شود
            */
            height: 100%;
         }
         }




         /* تصویر اصلی */
         /* =========================================================
          MAIN IMAGE
        ========================================================= */


         .main-card-image {
         .main-card-image {
            display: block;
             width: 100%;
             width: 100%;
             aspect-ratio: 16 / 7.5;
 
            /*
              تصویر مرجع تقریباً 16:9 است
            */
             aspect-ratio: 16 / 9;
 
             overflow: hidden;
             overflow: hidden;
             border-radius: 18px;
             border-radius: 18px;
            background: #0b3555;
            flex-shrink: 0;
         }
         }


         .main-card-image img {
         .main-card-image img {
             width: 100%;
             width: 100%;
             height: 100%;
             height: 100%;
             object-fit: cover;
             object-fit: cover;
             object-position: center;
             object-position: center;
            transition:
                transform .3s ease;
        }
        .main-card-image:hover img {
            transform: scale(1.012);
         }
         }




         /* متن کارت اصلی */
         /* =========================================================
          MAIN TEXT
        ========================================================= */


         .main-card-text {
         .main-card-text {
            width: 100%;
             margin-top: 20px;
             margin-top: 20px;
             color: #777;
 
             color: #777777;
 
             font-size: 15px;
             font-size: 15px;
             line-height: 2.1;
            font-weight: 400;
 
             line-height: 2.15;
 
             text-align: right;
             text-align: right;
            /*
              جلوگیری از کشیده شدن بیش از حد متن
            */
            max-width: 100%;
         }
         }




         /* =========================
        .main-card-text strong {
            color: #555555;
            font-weight: 700;
        }
 
 
         /* =========================================================
           MAIN BUTTON
           MAIN BUTTON
         ========================= */
         ========================================================= */


         .main-card-button {
         .main-card-button {
             display: inline-flex;
             display: inline-flex;
             align-items: center;
             align-items: center;
             justify-content: center;
             justify-content: center;
            align-self: flex-start;
             gap: 8px;
             gap: 8px;


             margin-top: 22px;
             margin-top: 20px;


             min-height: 50px;
             min-height: 50px;
            padding: 7px 12px 7px 16px;


             border: 1px solid #555;
            padding:
                5px
                10px
                5px
                14px;
 
             border:
                1px solid #555555;
 
             border-radius: 9px;
             border-radius: 9px;


             background: #ffffff;
             background: #ffffff;
             color: #f58220;
             color: #f58220;


             font-size: 14px;
             font-size: 14px;
             font-weight: bold;
             font-weight: 700;
 
            white-space: nowrap;


             transition:
             transition:
                 background 0.25s ease,
                 background .25s ease,
                 color 0.25s ease,
                 color .25s ease,
                 transform 0.25s ease;
                 transform .25s ease;
         }
         }


         .main-card-button span {
         .main-card-button span {
            width: 38px;
            height: 38px;
             display: flex;
             display: flex;
             align-items: center;
             align-items: center;
             justify-content: center;
             justify-content: center;


             width: 38px;
             flex-shrink: 0;
            height: 38px;


             border-radius: 7px;
             border-radius: 7px;
             background: #ff841c;
             background: #ff841c;
             color: #ffffff;
             color: #ffffff;


             font-size: 18px;
             font-size: 17px;
            line-height: 1;
         }
         }


         .main-card-button:hover {
         .main-card-button:hover {
             background: #ff841c;
             background: #ff841c;
             color: #ffffff;
             color: #ffffff;
             transform: translateY(-2px);
             transform: translateY(-2px);
         }
         }


         .main-card-button:hover span {
         .main-card-button:hover span {
خط ۱۹۸: خط ۳۶۲:




         /* =========================
         /* =========================================================
           TABLET
           TABLET
         ========================= */
         ========================================================= */


         @media (min-width: 600px) {
         @media (min-width: 600px) {


             .content-container {
             .content-container {
                 padding: 16px;
                 padding: 18px 16px;
             }
             }


خط ۲۱۴: خط ۳۷۸:
             .left-cards {
             .left-cards {
                 gap: 18px;
                 gap: 18px;
            }
            .image-card {
                border-radius: 24px;
             }
             }


             .main-card {
             .main-card {
                 padding: 24px;
                 padding: 20px;
                border-radius: 25px;
             }
             }


             .main-card-text {
             .main-card-text {
                 font-size: 15px;
                 font-size: 15px;
                line-height: 2.1;
             }
             }
         }
         }




         /* =========================
         /* =========================================================
           DESKTOP
           DESKTOP
         ========================= */
         ========================================================= */


         @media (min-width: 900px) {
         @media (min-width: 900px) {


             .content-container {
             .content-container {
                 padding: 18px;
                 padding:
                    18px
                    13px;
             }
             }


             .content-grid {
             .content-grid {
                 /*
                 /*
                   ستون سمت چپ = 1.02
                   دو ستون کاملاً هم‌اندازه
                  ستون سمت راست = 1
                 */
                 */
                 grid-template-columns: 1fr 1fr;
                 grid-template-columns:
                    minmax(0, 1fr)
                    minmax(0, 1fr);
 
                 gap: 24px;
                 gap: 24px;


                 direction: ltr;
                 align-items: stretch;
             }
             }


             /*
             /*
               برگرداندن جهت داخلی کارت‌ها
               ترتیب بصری دقیقاً مثل تصویر مرجع
             */
             */
            .left-cards,
            .main-card {
                direction: rtl;
            }


             .left-cards {
             .left-cards {
                 grid-template-columns: 1fr 1fr;
                 order: 1;
 
                 gap: 24px;
                 gap: 24px;
                /*
                  ارتفاع کل ستون برابر کارت اصلی
                */
                grid-template-rows:
                    minmax(0, .95fr)
                    minmax(0, 1fr);
             }
             }
            .main-card {
                order: 2;
                padding: 24px;
                border-radius: 28px;
            }
            /*
              کارت بالایی
            */


             .top-small-card {
             .top-small-card {
                 grid-column: 1 / -1;
                 aspect-ratio: 2.27 / 1;
             }
             }


             .image-card {
 
                 aspect-ratio: 1 / 0.72;
            /*
                border-radius: 24px;
              دو کارت پایین
            */
 
             .left-cards > .image-card:not(.top-small-card) {
                 aspect-ratio: 1.04 / 1;
             }
             }


             .top-small-card {
 
                 aspect-ratio: 2.15 / 1;
            /*
              تصویر اصلی
            */
 
             .main-card-image {
                 aspect-ratio: 16 / 9;
 
                border-radius: 18px;
             }
             }


            .main-card {
                padding: 24px;
                border-radius: 28px;
            }


             .main-card-text {
             .main-card-text {
                margin-top: 20px;
                 font-size: 15px;
                 font-size: 15px;
                 line-height: 2.15;
                 line-height: 2.15;
            }
            .main-card-button {
                margin-top: 20px;
             }
             }
         }
         }




         /* =========================
         /* =========================================================
           LARGE DESKTOP
           LARGE DESKTOP
         ========================= */
         ========================================================= */


         @media (min-width: 1200px) {
         @media (min-width: 1200px) {


             .content-container {
             .content-container {
                 padding: 18px 12px;
                 padding:
                    18px
                    13px;
             }
             }


             .content-grid {
             .content-grid {
                grid-template-columns: 1fr 1fr;
                 gap: 24px;
                 gap: 24px;
             }
             }


             .left-cards {
             .left-cards {
                 gap: 24px;
                 gap: 24px;
             }
             }


             .main-card {
             .main-card {
                 padding: 24px;
                 padding: 24px;
                border-radius: 28px;
             }
             }
            .main-card-image {
                border-radius: 18px;
            }


             .main-card-text {
             .main-card-text {
خط ۳۱۹: خط ۵۳۲:




         /* =========================
         /* =========================================================
          VERY LARGE DESKTOP
        ========================================================= */
 
        @media (min-width: 1400px) {
 
            .content-container {
                max-width: 1400px;
 
                padding-left: 13px;
                padding-right: 13px;
            }
 
            .content-grid {
                gap: 24px;
            }
 
            .left-cards {
                gap: 24px;
            }
 
            .main-card {
                padding: 24px;
            }
        }
 
 
        /* =========================================================
           MOBILE
           MOBILE
         ========================= */
         ========================================================= */


         @media (max-width: 599px) {
         @media (max-width: 899px) {


             .content-container {
             .content-container {
                 padding: 10px;
                 padding: 12px;
             }
             }


             .content-grid {
             .content-grid {
                 grid-template-columns: 1fr;
                 grid-template-columns: 1fr;
                 gap: 14px;
 
                 gap: 16px;
             }
             }


             /*
             /*
               در موبایل همه کارت‌ها زیر هم
               در موبایل کارت اصلی اول نمایش داده شود
             */
             */
            .main-card {
                order: 1;
                height: auto;
                padding: 16px;
                border-radius: 22px;
            }


             .left-cards {
             .left-cards {
                 display: grid;
                 order: 2;
 
                 grid-template-columns: 1fr;
                 grid-template-columns: 1fr;
                 gap: 14px;
 
                grid-template-rows: auto;
 
                 gap: 16px;
             }
             }


             .top-small-card {
             .top-small-card {
                 grid-column: auto;
                 grid-column: auto;
                aspect-ratio: 2.27 / 1;
             }
             }


             .image-card {
 
             .left-cards > .image-card:not(.top-small-card) {
                aspect-ratio: 1.04 / 1;
            }
 
 
            .main-card-image {
                 aspect-ratio: 16 / 9;
                 aspect-ratio: 16 / 9;
                 border-radius: 18px;
 
                 border-radius: 15px;
            }
 
 
            .main-card-text {
                margin-top: 16px;
 
                font-size: 14px;
 
                line-height: 2.1;
            }
 
 
            .main-card-button {
                margin-top: 16px;
 
                min-height: 48px;
 
                font-size: 14px;
            }
 
 
            .main-card-button span {
                width: 36px;
                height: 36px;
 
                font-size: 16px;
            }
        }
 
 
        /* =========================================================
          SMALL MOBILE
        ========================================================= */
 
        @media (max-width: 480px) {
 
            .content-container {
                padding: 10px;
            }
 
 
            .content-grid {
                gap: 14px;
            }
 
 
            .left-cards {
                gap: 14px;
             }
             }


             .main-card {
             .main-card {
                 padding: 14px;
                 padding: 12px;
                 border-radius: 20px;
 
                 border-radius: 19px;
             }
             }


             .main-card-image {
             .main-card-image {
                aspect-ratio: 16 / 9;
                 border-radius: 13px;
                 border-radius: 14px;
             }
             }


             .main-card-text {
             .main-card-text {
                 margin-top: 14px;
                 margin-top: 14px;
                 font-size: 13px;
 
                 font-size: 14px;
 
                 line-height: 2;
                 line-height: 2;
             }
             }


             .main-card-button {
             .main-card-button {
                 margin-top: 16px;
                 margin-top: 14px;
 
                 min-height: 46px;
                 min-height: 46px;
                padding:
                    5px
                    8px
                    5px
                    10px;
                 font-size: 13px;
                 font-size: 13px;
             }
             }


             .main-card-button span {
             .main-card-button span {
                 width: 34px;
                 width: 34px;
                 height: 34px;
                 height: 34px;
                font-size: 15px;
            }
            .image-card {
                border-radius: 18px;
             }
             }
         }
         }




         /* =========================
         /* =========================================================
           VERY SMALL MOBILE
           VERY SMALL MOBILE
         ========================= */
         ========================================================= */


         @media (max-width: 380px) {
         @media (max-width: 360px) {


             .content-container {
             .content-container {
                 padding: 8px;
                 padding: 8px;
             }
             }


             .main-card {
             .main-card {
                 padding: 10px;
                 padding: 10px;
             }
             }
            .left-cards {
                gap: 12px;
            }
            .main-card-text {
                font-size: 13px;
                line-height: 1.95;
            }


             .image-card {
             .image-card {
                 border-radius: 15px;
                 border-radius: 16px;
             }
             }
        }


            .main-card-image {
        /* =========================================================
                 border-radius: 12px;
          ACCESSIBILITY
        ========================================================= */
 
        @media (prefers-reduced-motion: reduce) {
 
            *,
            *::before,
            *::after {
                 scroll-behavior: auto !important;
                transition: none !important;
                animation: none !important;
             }
             }


             .main-card-text {
            .image-card img,
                 font-size: 12px;
             .main-card-image img {
                line-height: 1.9;
                 transform: none !important;
             }
             }
         }
         }


     </style>
     </style>
</head>
</head>


خط ۴۲۱: خط ۷۸۶:




             <!-- =================================
             <!-- =====================================================
                 سمت چپ - سه کارت تصویری
                 سمت چپ
            ================================== -->
                ===================================================== -->


             <section class="left-cards" aria-label="کارت‌های تصویری">
             <section
                class="left-cards"
                aria-label="کارت‌های آموزشی">




                 <!-- کارت بزرگ بالایی -->
                 <!-- کارت بزرگ بالایی -->


                 <a href="#" class="image-card top-small-card">
                 <a
                    href="#"
                    class="image-card top-small-card"
                    aria-label="آموزش‌های ادوپ کانکت">


                     <img
                     <img
                         src="https://dl.faraghaib.ir/m/260009-01/260009-01-11.jpg"
                         src="https://dl.faraghaib.ir/m/260009-01/260009-01-11.jpg"
                         alt="تصویر آموزشی"
                         alt="آموزش‌های ادوپ کانکت"
                         loading="lazy"
                         loading="lazy"
                     >
                     >
خط ۴۴۱: خط ۸۱۱:




                 <!-- کارت کوچک پایین سمت راست -->
                 <!-- کارت پایین اول -->


                 <a href="#" class="image-card">
                 <a
                    href="#"
                    class="image-card"
                    aria-label="آموزش سامانه مودل">


                     <img
                     <img
                         src="https://dl.faraghaib.ir/m/260009-01/260009-01-12.jpg"
                         src="https://dl.faraghaib.ir/m/260009-01/260009-01-12.jpg"
                         alt="تصویر خدمات"
                         alt="آموزش سامانه مودل"
                         loading="lazy"
                         loading="lazy"
                     >
                     >
خط ۴۵۴: خط ۸۲۷:




                 <!-- کارت کوچک پایین سمت چپ -->
                 <!-- کارت پایین دوم -->


                 <a href="#" class="image-card">
                 <a
                    href="#"
                    class="image-card"
                    aria-label="آموزش cPanel">


                     <img
                     <img
                         src="https://dl.faraghaib.ir/m/260009-01/260009-01-13.jpg"
                         src="https://dl.faraghaib.ir/m/260009-01/260009-01-13.jpg"
                         alt="تصویر خدمات"
                         alt="آموزش cPanel"
                         loading="lazy"
                         loading="lazy"
                     >
                     >


                 </a>
                 </a>


             </section>
             </section>
خط ۴۷۱: خط ۸۴۶:




             <!-- =================================
             <!-- =====================================================
                 سمت راست - کارت اصلی
                 سمت راست - کارت اصلی
            ================================== -->
                ===================================================== -->


             <article class="main-card">
             <article class="main-card">
خط ۴۸۰: خط ۸۵۵:
                 <!-- تصویر اصلی -->
                 <!-- تصویر اصلی -->


                 <a href="#" class="main-card-image">
                 <a
                    href="#"
                    class="main-card-image"
                    aria-label="مشاهده مقاله">


                     <img
                     <img
                         src="https://dl.faraghaib.ir/m/260009-01/260009-01-17.jpg"
                         src="https://dl.faraghaib.ir/m/260009-01/260009-01-17.jpg"
                         alt="عنوان مقاله و محتوای آموزشی"
                         alt="مقاله آموزشی و محتوای تخصصی"
                         fetchpriority="high"
                         fetchpriority="high"
                     >
                     >
خط ۴۹۴: خط ۸۷۲:


                 <p class="main-card-text">
                 <p class="main-card-text">
                     هر مقاله، یک کلید طلایی برای موفقیت است!
                     هر مقاله، یک کلید طلایی برای موفقیت است!
                     اینجا دانش تخصصی به عمل خالص تبدیل می‌شود.
                     اینجا دانش تخصصی به عمل خالص تبدیل می‌شود.
                    ما در هر مطلب، با ارائه تحلیل‌های کاربردی و نکات کلیدی،
                    شما را برای یک خرید هوشمندانه و راهبردی راهنمایی می‌کنیم.
                    از نقد و مقایسه فنی محصولات پیشرو تا ارائه راهکارهای
                    بهینه‌سازی که واقعاً نتیجه می‌دهند.


                 </p>
                 </p>
خط ۵۰۲: خط ۸۸۵:
                 <!-- دکمه -->
                 <!-- دکمه -->


                 <a href="#" class="main-card-button">
                 <a
                    href="#"
                    class="main-card-button"
                    aria-label="مشاهده مقالات">


                     <span>◀</span>
                     <span>◀</span>
خط ۵۲۱: خط ۹۰۷:


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