فراغیب

الگو:کانتبنر 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...» ایجاد کرد
 
بدون خلاصۀ ویرایش
 
خط ۱: خط ۱:
<html>
<html lang="fa" dir="rtl">
 
<!-- =========================
<!-- =========================
     Font Awesome 6.6
     Font Awesome 6.6
خط ۷: خط ۸:




<section class="hex-services" aria-label="خدمات مکانیکی، جلوبندی و هیدرولیک فرمان">
<section class="hex-services"
        aria-label="خدمات مکانیکی، جلوبندی و هیدرولیک فرمان">


     <!-- =========================
     <!-- =========================
         ردیف اول
         ردیف اول - 5 کادر
     ========================= -->
     ========================= -->
     <div class="hex-row">
     <div class="hex-row">


         <!-- تعمیر موتور -->
         <!-- تعمیر موتور -->
         <a href="#" class="hex-item brown" aria-label="تعمیر موتور خودرو">
         <a href="#"
          class="hex-item brown"
          aria-label="تعمیر موتور خودرو">
 
            <svg class="hex-bg"
                viewBox="0 0 100 115"
                aria-hidden="true">


            <svg class="hex-bg" viewBox="0 0 100 115" aria-hidden="true">
                 <polygon
                 <polygon
                     points="50,2 94,27 94,88 50,113 6,88 6,27"
                     points="50,2 94,27 94,88 50,113 6,88 6,27"
خط ۲۵: خط ۳۱:
                     stroke-width="2"
                     stroke-width="2"
                     stroke-linejoin="round"/>
                     stroke-linejoin="round"/>
             </svg>
             </svg>


             <div class="hex-content">
             <div class="hex-content">
                 <i class="fa-solid fa-gears"></i>
                 <i class="fa-solid fa-gears" aria-hidden="true"></i>
                 <strong>تعمیر موتور</strong>
                 <strong>تعمیر موتور</strong>
             </div>
             </div>
خط ۳۶: خط ۴۳:


         <!-- تعمیر گیربکس -->
         <!-- تعمیر گیربکس -->
         <a href="#" class="hex-item brown" aria-label="تعمیر گیربکس خودرو">
         <a href="#"
          class="hex-item brown"
          aria-label="تعمیر گیربکس خودرو">
 
            <svg class="hex-bg"
                viewBox="0 0 100 115"
                aria-hidden="true">


            <svg class="hex-bg" viewBox="0 0 100 115" aria-hidden="true">
                 <polygon
                 <polygon
                     points="50,2 94,27 94,88 50,113 6,88 6,27"
                     points="50,2 94,27 94,88 50,113 6,88 6,27"
خط ۴۵: خط ۵۷:
                     stroke-width="2"
                     stroke-width="2"
                     stroke-linejoin="round"/>
                     stroke-linejoin="round"/>
             </svg>
             </svg>


             <div class="hex-content">
             <div class="hex-content">
                 <i class="fa-solid fa-car"></i>
                 <i class="fa-solid fa-car" aria-hidden="true"></i>
                 <strong>تعمیر گیربکس</strong>
                 <strong>تعمیر گیربکس</strong>
             </div>
             </div>
خط ۵۶: خط ۶۹:


         <!-- جلوبندی سازی -->
         <!-- جلوبندی سازی -->
         <a href="#" class="hex-item brown" aria-label="جلوبندی سازی خودرو">
         <a href="#"
          class="hex-item brown"
          aria-label="جلوبندی سازی خودرو">
 
            <svg class="hex-bg"
                viewBox="0 0 100 115"
                aria-hidden="true">


            <svg class="hex-bg" viewBox="0 0 100 115" aria-hidden="true">
                 <polygon
                 <polygon
                     points="50,2 94,27 94,88 50,113 6,88 6,27"
                     points="50,2 94,27 94,88 50,113 6,88 6,27"
خط ۶۵: خط ۸۳:
                     stroke-width="2"
                     stroke-width="2"
                     stroke-linejoin="round"/>
                     stroke-linejoin="round"/>
             </svg>
             </svg>


             <div class="hex-content">
             <div class="hex-content">
                 <i class="fa-solid fa-screwdriver-wrench"></i>
                 <i class="fa-solid fa-screwdriver-wrench"
                  aria-hidden="true"></i>
                 <strong>جلوبندی‌سازی</strong>
                 <strong>جلوبندی‌سازی</strong>
             </div>
             </div>
خط ۷۶: خط ۹۶:


         <!-- هیدرولیک فرمان -->
         <!-- هیدرولیک فرمان -->
         <a href="#" class="hex-item brown" aria-label="تعمیر هیدرولیک فرمان">
         <a href="#"
          class="hex-item brown"
          aria-label="تعمیر هیدرولیک فرمان">
 
            <svg class="hex-bg"
                viewBox="0 0 100 115"
                aria-hidden="true">


            <svg class="hex-bg" viewBox="0 0 100 115" aria-hidden="true">
                 <polygon
                 <polygon
                     points="50,2 94,27 94,88 50,113 6,88 6,27"
                     points="50,2 94,27 94,88 50,113 6,88 6,27"
خط ۸۵: خط ۱۱۰:
                     stroke-width="2"
                     stroke-width="2"
                     stroke-linejoin="round"/>
                     stroke-linejoin="round"/>
             </svg>
             </svg>


             <div class="hex-content">
             <div class="hex-content">
                 <i class="fa-solid fa-car"></i>
                 <i class="fa-solid fa-car" aria-hidden="true"></i>
                 <strong>هیدرولیک فرمان</strong>
                 <strong>هیدرولیک فرمان</strong>
             </div>
             </div>
خط ۹۶: خط ۱۲۲:


         <!-- تعویض روغن -->
         <!-- تعویض روغن -->
         <a href="#" class="hex-item brown" aria-label="تعویض روغن خودرو">
         <a href="#"
          class="hex-item brown"
          aria-label="تعویض روغن خودرو">
 
            <svg class="hex-bg"
                viewBox="0 0 100 115"
                aria-hidden="true">


            <svg class="hex-bg" viewBox="0 0 100 115" aria-hidden="true">
                 <polygon
                 <polygon
                     points="50,2 94,27 94,88 50,113 6,88 6,27"
                     points="50,2 94,27 94,88 50,113 6,88 6,27"
خط ۱۰۵: خط ۱۳۶:
                     stroke-width="2"
                     stroke-width="2"
                     stroke-linejoin="round"/>
                     stroke-linejoin="round"/>
             </svg>
             </svg>


             <div class="hex-content">
             <div class="hex-content">
                 <i class="fa-solid fa-oil-can"></i>
                 <i class="fa-solid fa-oil-can"
                  aria-hidden="true"></i>
                 <strong>تعویض روغن</strong>
                 <strong>تعویض روغن</strong>
             </div>
             </div>
خط ۱۱۸: خط ۱۵۱:


     <!-- =========================
     <!-- =========================
         ردیف دوم
         ردیف دوم - 4 کادر
     ========================= -->
     ========================= -->
     <div class="hex-row second-row">
     <div class="hex-row second-row">


         <!-- سیستم ترمز -->
         <!-- سیستم ترمز -->
         <a href="#" class="hex-item brown" aria-label="تعمیر سیستم ترمز">
         <a href="#"
          class="hex-item brown"
          aria-label="تعمیر سیستم ترمز خودرو">
 
            <svg class="hex-bg"
                viewBox="0 0 100 115"
                aria-hidden="true">


            <svg class="hex-bg" viewBox="0 0 100 115" aria-hidden="true">
                 <polygon
                 <polygon
                     points="50,2 94,27 94,88 50,113 6,88 6,27"
                     points="50,2 94,27 94,88 50,113 6,88 6,27"
خط ۱۳۲: خط ۱۷۰:
                     stroke-width="2"
                     stroke-width="2"
                     stroke-linejoin="round"/>
                     stroke-linejoin="round"/>
             </svg>
             </svg>


             <div class="hex-content">
             <div class="hex-content">
                 <i class="fa-solid fa-circle-stop"></i>
                 <i class="fa-solid fa-circle-stop"
                  aria-hidden="true"></i>
                 <strong>سیستم ترمز</strong>
                 <strong>سیستم ترمز</strong>
             </div>
             </div>
خط ۱۴۲: خط ۱۸۲:




         <!-- عیب یابی خودرو -->
         <!-- عیب یابی -->
         <a href="#" class="hex-item brown" aria-label="عیب یابی خودرو">
         <a href="#"
          class="hex-item brown"
          aria-label="عیب یابی خودرو">
 
            <svg class="hex-bg"
                viewBox="0 0 100 115"
                aria-hidden="true">


            <svg class="hex-bg" viewBox="0 0 100 115" aria-hidden="true">
                 <polygon
                 <polygon
                     points="50,2 94,27 94,88 50,113 6,88 6,27"
                     points="50,2 94,27 94,88 50,113 6,88 6,27"
خط ۱۵۲: خط ۱۹۷:
                     stroke-width="2"
                     stroke-width="2"
                     stroke-linejoin="round"/>
                     stroke-linejoin="round"/>
             </svg>
             </svg>


             <div class="hex-content">
             <div class="hex-content">
                 <i class="fa-solid fa-laptop-code"></i>
                 <i class="fa-solid fa-laptop-code"
                  aria-hidden="true"></i>
                 <strong>عیب‌یابی خودرو</strong>
                 <strong>عیب‌یابی خودرو</strong>
             </div>
             </div>
خط ۱۶۳: خط ۲۱۰:


         <!-- سرویس دوره ای -->
         <!-- سرویس دوره ای -->
         <a href="#" class="hex-item brown" aria-label="سرویس دوره ای خودرو">
         <a href="#"
          class="hex-item brown"
          aria-label="سرویس دوره ای خودرو">
 
            <svg class="hex-bg"
                viewBox="0 0 100 115"
                aria-hidden="true">


            <svg class="hex-bg" viewBox="0 0 100 115" aria-hidden="true">
                 <polygon
                 <polygon
                     points="50,2 94,27 94,88 50,113 6,88 6,27"
                     points="50,2 94,27 94,88 50,113 6,88 6,27"
خط ۱۷۲: خط ۲۲۴:
                     stroke-width="2"
                     stroke-width="2"
                     stroke-linejoin="round"/>
                     stroke-linejoin="round"/>
             </svg>
             </svg>


             <div class="hex-content">
             <div class="hex-content">
                 <i class="fa-solid fa-car-side"></i>
                 <i class="fa-solid fa-car-side"
                  aria-hidden="true"></i>
                 <strong>سرویس دوره‌ای</strong>
                 <strong>سرویس دوره‌ای</strong>
             </div>
             </div>
خط ۱۸۲: خط ۲۳۶:




         <!-- تنظیم فرمان و چرخ -->
         <!-- فرمان و چرخ -->
         <a href="#" class="hex-item brown" aria-label="فرمان و چرخ">
         <a href="#"
          class="hex-item brown"
          aria-label="تنظیم فرمان و چرخ خودرو">
 
            <svg class="hex-bg"
                viewBox="0 0 100 115"
                aria-hidden="true">


            <svg class="hex-bg" viewBox="0 0 100 115" aria-hidden="true">
                 <polygon
                 <polygon
                     points="50,2 94,27 94,88 50,113 6,88 6,27"
                     points="50,2 94,27 94,88 50,113 6,88 6,27"
خط ۱۹۲: خط ۲۵۱:
                     stroke-width="2"
                     stroke-width="2"
                     stroke-linejoin="round"/>
                     stroke-linejoin="round"/>
             </svg>
             </svg>


             <div class="hex-content">
             <div class="hex-content">
                 <i class="fa-solid fa-arrows-left-right-to-line"></i>
                 <i class="fa-solid fa-arrows-left-right-to-line"
                  aria-hidden="true"></i>
                 <strong>فرمان و چرخ</strong>
                 <strong>فرمان و چرخ</strong>
             </div>
             </div>
خط ۲۰۸: خط ۲۶۹:
<style>
<style>


/* =========================================
/* =====================================================
   تنظیمات اصلی
  MOBILE FIRST
========================================= */
   تنظیمات پایه برای موبایل
===================================================== */


.hex-services {
.hex-services {


     --hex-width: 110px;
    /* اندازه پایه شش ضلعی */
     --hex-gap: 2px;
     --hex-width: 21vw;
 
    /* فاصله بین شش ضلعی ها */
     --hex-gap: 0px;


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


     margin: 0 auto;
     margin: 0 auto;
     padding: 20px 5px;
 
    /*
      padding بسیار کم تا شش ضلعی ها
      حداکثر فضای عرضی صفحه را بگیرند
    */
     padding: 18px 0;


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




/* =========================================
/* =====================================================
   ردیف ها
   ردیف شش ضلعی ها
========================================= */
===================================================== */


.hex-row {
.hex-row {
خط ۲۵۰: خط ۳۲۰:
     gap: var(--hex-gap);
     gap: var(--hex-gap);


    /*
      جلوگیری از رفتن کادرها به خط بعد
    */
     flex-wrap: nowrap;
     flex-wrap: nowrap;
}
}




/* ردیف دوم */
/* =====================================================
  ردیف دوم
===================================================== */
 
.second-row {
.second-row {
    /*
      ردیف دوم کمی داخل تر قرار می گیرد
      تا حالت تصویری مشابه نمونه حفظ شود
    */
    padding-left: 9%;
    padding-right: 9%;
     margin-top: -1px;
     margin-top: -1px;
    box-sizing: border-box;
}
}




/* =========================================
/* =====================================================
   شش ضلعی
   شش ضلعی
========================================= */
===================================================== */


.hex-item {
.hex-item {
خط ۲۶۸: خط ۳۵۴:
     position: relative;
     position: relative;


     flex: 0 1 var(--hex-width);
    /*
      در موبایل فضای مساوی می گیرند
    */
     flex: 1 1 0;


     width: var(--hex-width);
     width: var(--hex-width);
    min-width: 0;


     aspect-ratio: 100 / 115;
     aspect-ratio: 100 / 115;
خط ۲۸۱: خط ۳۷۲:
     text-decoration: none;
     text-decoration: none;


     color: #444;
     color: #ffffff;


     box-sizing: border-box;
     box-sizing: border-box;


    /*
      بزرگ شدن بسیار ملایم هنگام هاور
    */
     transition:
     transition:
         transform .25s ease,
         transform .25s ease,
خط ۲۹۳: خط ۳۸۷:




/* =========================================
/* =====================================================
   پس زمینه SVG
   SVG
========================================= */
===================================================== */


.hex-bg {
.hex-bg {
خط ۳۱۴: خط ۴۰۸:




/* =========================================
/* =====================================================
   محتوای داخل شش ضلعی
   محتوای شش ضلعی
========================================= */
===================================================== */


.hex-content {
.hex-content {
خط ۳۲۲: خط ۴۱۶:
     position: relative;
     position: relative;


     width: 82%;
    /*
      فضای بیشتر برای متن
    */
     width: 88%;


     display: flex;
     display: flex;
خط ۳۳۳: خط ۴۳۰:
     text-align: center;
     text-align: center;


     line-height: 1.3;
     line-height: 1.25;


     z-index: 2;
     z-index: 2;
    /*
      جلوگیری از خروج متن
    */
    overflow: hidden;
}
}




/* =========================================
/* =====================================================
   آیکون
   آیکون
========================================= */
===================================================== */


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


     font-size: 30px;
    /*
      بزرگ‌تر از نسخه قبلی
      ولی کاملاً ریسپانسیو
    */
     font-size: clamp(21px, 7vw, 30px);


     line-height: 1;
     line-height: 1;


     margin-bottom: 8px;
     margin-bottom: 7px;
 
    flex-shrink: 0;
}
}




/* =========================================
/* =====================================================
   متن
   متن
========================================= */
===================================================== */


.hex-content strong {
.hex-content strong {
خط ۳۶۵: خط ۴۷۳:
         sans-serif;
         sans-serif;


     font-size: 12px;
    /*
      فونت بزرگ‌تر و ریسپانسیو
    */
     font-size: clamp(9px, 2.8vw, 13px);


     font-weight: 600;
     font-weight: 700;
 
    line-height: 1.35;


     white-space: nowrap;
     white-space: nowrap;
    /*
      متن همیشه وسط باشد
    */
    text-align: center;
}
}




/* =========================================
/* =====================================================
   رنگ ها
   رنگ نوشته
========================================= */
===================================================== */


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


.green {
 
     color: #ffffff;
/* =====================================================
  رنگ شش ضلعی
===================================================== */
 
.brown .hex-bg polygon {
 
     color: #795548;
 
}
}


.orange {
 
     color: #ffffff;
/* =====================================================
  هاور
===================================================== */
 
.hex-item:hover {
 
    transform: translateY(-4px) scale(1.025);
 
    filter: brightness(.95);
 
     z-index: 5;
}
}


.brown {
 
    color: #ffffff;
/* =====================================================
  فوکوس برای دسترسی
===================================================== */
 
.hex-item:focus-visible {
 
    outline: 2px solid #333;
 
    outline-offset: 3px;
 
}
}


.white {
    color: #444444;
}


/* =====================================================
  موبایل خیلی کوچک
  320px تا 380px
===================================================== */


/* =========================================
@media (max-width: 380px) {
  رنگ SVG
========================================= */


.purple .hex-bg polygon {
    .hex-services {
    color: #603bb5;


}
        padding-top: 12px;
        padding-bottom: 12px;


.green .hex-bg polygon {
     }
     color: #00d968;
}


.orange .hex-bg polygon {
    .hex-content i {
    color: #ff8a00;
}


.brown .hex-bg polygon {
        font-size: clamp(19px, 6.5vw, 24px);
    color: #795548;
}


.white .hex-bg polygon {
        margin-bottom: 5px;


     color: #ffffff;
     }


     stroke: #c8c8c8;
     .hex-content strong {
}


        font-size: clamp(8px, 2.5vw, 10px);


/* =========================================
    }
  هاور
========================================= */


.hex-item:hover {
    .second-row {


    transform: translateY(-4px);
        padding-left: 8%;
        padding-right: 8%;


     filter: brightness(.96);
     }


    z-index: 5;
}
}




/* =========================================
/* =====================================================
   فوکوس
   موبایل متوسط
========================================= */
  381px تا 599px
===================================================== */


.hex-item:focus-visible {
@media (min-width: 381px) and (max-width: 599px) {
 
    .hex-content i {
 
        font-size: clamp(22px, 6.5vw, 30px);
 
    }
 
    .hex-content strong {
 
        font-size: clamp(10px, 2.7vw, 13px);


     outline: 2px solid #333;
     }


    outline-offset: 3px;
}
}




/* =========================================
/* =====================================================
   تبلت
   تبلت
========================================= */
===================================================== */


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


     .hex-services {
     .hex-services {
        --hex-width: 105px;
    }


}
        --hex-width: 125px;
 
        --hex-gap: 1px;
 
        max-width: 780px;


        padding: 25px 5px;


/* =========================================
    }
  دسکتاپ
========================================= */


@media (min-width: 900px) {


     .hex-services {
     .second-row {


         --hex-width: 110px;
         padding-left: 8%;
        padding-right: 8%;


        max-width: 680px;
     }
     }


     .hex-content i {
     .hex-content i {
         font-size: 31px;
 
         font-size: 34px;
 
        margin-bottom: 8px;
 
     }
     }


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


خط ۴۹۰: خط ۶۴۳:




/* =========================================
/* =====================================================
   موبایل
   دسکتاپ
========================================= */
===================================================== */


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


     .hex-services {
     .hex-services {


         --hex-width: 20vw;
         --hex-width: 140px;
         --hex-gap: 0;
 
         max-width: 850px;
 
        padding: 30px 5px;


        padding: 15px 2px;
     }
     }


    .hex-item {


        flex: 1 1 0;
    .second-row {


         width: auto;
         padding-left: 8%;
        padding-right: 8%;


        min-width: 0;
     }
     }


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


         font-size: clamp(17px, 6vw, 25px);
         font-size: 38px;
 
        margin-bottom: 9px;


        margin-bottom: 5px;
     }
     }


     .hex-content strong {
     .hex-content strong {


         font-size: clamp(8px, 2.4vw, 11px);
         font-size: 15px;
 
     }
     }


    /* ردیف دوم وسط چین */
}
     .second-row {
 
 
/* =====================================================
  دسکتاپ بزرگ
===================================================== */
 
@media (min-width: 1200px) {
 
     .hex-services {
 
        --hex-width: 150px;
 
        max-width: 920px;
 
    }
 
 
    .hex-content i {
 
        font-size: 40px;
 
    }
 
 
    .hex-content strong {
 
        font-size: 16px;


        padding-left: 10%;
        padding-right: 10%;
     }
     }


خط ۵۳۵: خط ۷۱۷:


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