فراغیب

الگو:کانتبنر 6 ضلعی/کاووسی: تفاوت میان نسخه‌ها

تفاوت با ویرایش جدیدتر ←
دیداریویکی‌متن
صفحه‌ای تازه حاوی «<html> <!-- ========================= Font Awesome 6.6 ========================= --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"> <section class="hex-services" aria-label="خدمات مکانیکی، جلوبندی و هیدرولیک فرمان"> <!-- ========================= ردیف اول ========================= --> <div class="hex-ro...» ایجاد کرد
 
بدون خلاصۀ ویرایش
خط ۲۰۲: خط ۲۰۲:


</section>
</section>


<style>
<style>
خط ۲۱۲: خط ۲۱۱:
.hex-services {
.hex-services {


     --hex-width: 110px;
     --hex-width: 125px;
     --hex-gap: 2px;
     --hex-gap: 3px;


     width: 100%;
     width: 100%;
     max-width: 680px;
     max-width: 760px;


     margin: 0 auto;
     margin: 0 auto;
     padding: 20px 5px;
     padding: 25px 5px;


     box-sizing: border-box;
     box-sizing: border-box;
خط ۲۵۳: خط ۲۵۲:


/* ردیف دوم */
/* ردیف دوم */
.second-row {
.second-row {
     margin-top: -1px;
     margin-top: -1px;
خط ۲۶۳: خط ۲۶۳:


.hex-item {
.hex-item {
     position: relative;
     position: relative;


خط ۲۷۶: خط ۲۷۷:
     text-decoration: none;
     text-decoration: none;
     color: #444;
     color: #444;
     box-sizing: border-box;
     box-sizing: border-box;


خط ۲۸۶: خط ۲۸۸:
     z-index: 1;
     z-index: 1;
}
}


/* =========================================
/* =========================================
خط ۳۳۹: خط ۳۴۲:
.hex-content i {
.hex-content i {


     font-size: 30px;
     font-size: 34px;
 
     color: #DAA520;
     color: #DAA520;
     line-height: 1;
     line-height: 1;


     margin-bottom: 8px;
     margin-bottom: 9px;
}
}


خط ۳۵۹: خط ۳۶۴:
         sans-serif;
         sans-serif;


     font-size: 12px;
     font-size: 14px;


     font-weight: 600;
     font-weight: 600;
خط ۳۸۴: خط ۳۸۹:


.brown {
.brown {
    color: #ffffff;
    color: #ffffff;
}
}


خط ۳۹۸: خط ۴۰۳:
.purple .hex-bg polygon {
.purple .hex-bg polygon {
     color: #603bb5;
     color: #603bb5;
}
}


خط ۴۱۴: خط ۴۱۸:


.white .hex-bg polygon {
.white .hex-bg polygon {
     color: #ffffff;
     color: #ffffff;
     stroke: #c8c8c8;
     stroke: #c8c8c8;
}
}
خط ۴۵۴: خط ۴۵۶:


     .hex-services {
     .hex-services {
         --hex-width: 105px;
 
         --hex-width: 120px;
        --hex-gap: 3px;
 
        max-width: 750px;
 
        padding: 25px 5px;
    }
 
    .hex-content i {
        font-size: 34px;
    }
 
    .hex-content strong {
        font-size: 14px;
     }
     }


خط ۴۶۸: خط ۴۸۴:
     .hex-services {
     .hex-services {


         --hex-width: 110px;
         --hex-width: 125px;
        --hex-gap: 4px;


         max-width: 680px;
         max-width: 800px;
     }
     }


     .hex-content i {
     .hex-content i {
         font-size: 31px;
         font-size: 36px;
     }
     }


     .hex-content strong {
     .hex-content strong {
         font-size: 13px;
         font-size: 15px;
     }
     }


خط ۴۹۲: خط ۵۰۹:
     .hex-services {
     .hex-services {


         --hex-width: 20vw;
        /*
        * بزرگ‌تر از نسخه قبلی،
        * ولی همچنان متناسب با عرض موبایل
        */
         --hex-width: 22vw;
         --hex-gap: 0;
         --hex-gap: 0;


         padding: 15px 2px;
         padding: 18px 1px;
     }
     }


خط ۵۰۵: خط ۵۲۶:


         min-width: 0;
         min-width: 0;
    }
    .hex-content {
        width: 84%;
     }
     }


     .hex-content i {
     .hex-content i {


         font-size: clamp(17px, 6vw, 25px);
        /*
        * آیکون بزرگ‌تر و ریسپانسیو
        */
         font-size: clamp(20px, 6.5vw, 29px);


         margin-bottom: 5px;
         margin-bottom: 6px;
     }
     }


     .hex-content strong {
     .hex-content strong {
       
        font-size: clamp(8px, 2.4vw, 11px);
    }


.hex-content strong:hover {
        /*
        * فونت بزرگ‌تر برای خوانایی موبایل
        */
        font-size: clamp(10px, 2.8vw, 13px);


color: red
        line-height: 1.25;
}
    }


     /* ردیف دوم وسط چین */
     /* ردیف دوم وسط چین */
     .second-row {
     .second-row {


         padding-left: 10%;
         padding-left: 10%;
         padding-right: 10%;
         padding-right: 10%;
    }
}
/* =========================================
  موبایل خیلی کوچک
========================================= */
@media (max-width: 380px) {
    .hex-services {
        --hex-width: 21vw;
    }
    .hex-content i {
        font-size: clamp(18px, 6vw, 25px);
    }
    .hex-content strong {
        font-size: clamp(9px, 2.7vw, 11px);
    }
}
/* =========================================
  موبایل بزرگ
========================================= */
@media (min-width: 480px) and (max-width: 599px) {
    .hex-services {
        --hex-width: 22.5vw;
    }
    .hex-content i {
        font-size: clamp(22px, 6vw, 30px);
    }
    .hex-content strong {
        font-size: clamp(11px, 2.7vw, 14px);
     }
     }


خط ۵۳۴: خط ۶۰۶:


</style>
</style>
</html>
</html>
برگرفته از «https://fa.faraghaib.ir/wiki/الگو:کانتبنر_6_ضلعی/کاووسی»