کانتبنر 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-row">

        <!-- تعمیر موتور -->
        <a href="#" class="hex-item brown" aria-label="تعمیر موتور خودرو">

            <svg class="hex-bg" viewBox="0 0 100 115" aria-hidden="true">
                <polygon
                    points="50,2 94,27 94,88 50,113 6,88 6,27"
                    stroke="currentColor"
                    fill="currentColor"
                    stroke-width="2"
                    stroke-linejoin="round"/>
            </svg>

            <div class="hex-content">
                <i class="fa-solid fa-gears"></i>
                <strong>تعمیر موتور</strong>
            </div>

        </a>


        <!-- تعمیر گیربکس -->
        <a href="#" class="hex-item brown" aria-label="تعمیر گیربکس خودرو">

            <svg class="hex-bg" viewBox="0 0 100 115" aria-hidden="true">
                <polygon
                    points="50,2 94,27 94,88 50,113 6,88 6,27"
                    stroke="currentColor"
                    fill="currentColor"
                    stroke-width="2"
                    stroke-linejoin="round"/>
            </svg>

            <div class="hex-content">
                <i class="fa-solid fa-car"></i>
                <strong>تعمیر گیربکس</strong>
            </div>

        </a>


        <!-- جلوبندی سازی -->
        <a href="#" class="hex-item brown" aria-label="جلوبندی سازی خودرو">

            <svg class="hex-bg" viewBox="0 0 100 115" aria-hidden="true">
                <polygon
                    points="50,2 94,27 94,88 50,113 6,88 6,27"
                    stroke="currentColor"
                    fill="currentColor"
                    stroke-width="2"
                    stroke-linejoin="round"/>
            </svg>

            <div class="hex-content">
                <i class="fa-solid fa-screwdriver-wrench"></i>
                <strong>جلوبندی‌سازی</strong>
            </div>

        </a>


        <!-- هیدرولیک فرمان -->
        <a href="#" class="hex-item brown" aria-label="تعمیر هیدرولیک فرمان">

            <svg class="hex-bg" viewBox="0 0 100 115" aria-hidden="true">
                <polygon
                    points="50,2 94,27 94,88 50,113 6,88 6,27"
                    stroke="currentColor"
                    fill="currentColor"
                    stroke-width="2"
                    stroke-linejoin="round"/>
            </svg>

            <div class="hex-content">
                <i class="fa-solid fa-car"></i>
                <strong>هیدرولیک فرمان</strong>
            </div>

        </a>


        <!-- تعویض روغن -->
        <a href="#" class="hex-item brown" aria-label="تعویض روغن خودرو">

            <svg class="hex-bg" viewBox="0 0 100 115" aria-hidden="true">
                <polygon
                    points="50,2 94,27 94,88 50,113 6,88 6,27"
                    stroke="currentColor"
                    fill="currentColor"
                    stroke-width="2"
                    stroke-linejoin="round"/>
            </svg>

            <div class="hex-content">
                <i class="fa-solid fa-oil-can"></i>
                <strong>تعویض روغن</strong>
            </div>

        </a>

    </div>


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

        <!-- سیستم ترمز -->
        <a href="#" class="hex-item brown" aria-label="تعمیر سیستم ترمز">

            <svg class="hex-bg" viewBox="0 0 100 115" aria-hidden="true">
                <polygon
                    points="50,2 94,27 94,88 50,113 6,88 6,27"
                    stroke="currentColor"
                    fill="currentColor"
                    stroke-width="2"
                    stroke-linejoin="round"/>
            </svg>

            <div class="hex-content">
                <i class="fa-solid fa-circle-stop"></i>
                <strong>سیستم ترمز</strong>
            </div>

        </a>


        <!-- عیب یابی خودرو -->
        <a href="#" class="hex-item brown" aria-label="عیب یابی خودرو">

            <svg class="hex-bg" viewBox="0 0 100 115" aria-hidden="true">
                <polygon
                    points="50,2 94,27 94,88 50,113 6,88 6,27"
                    stroke="currentColor"
                    fill="currentColor"
                    stroke-width="2"
                    stroke-linejoin="round"/>
            </svg>

            <div class="hex-content">
                <i class="fa-solid fa-laptop-code"></i>
                <strong>عیب‌یابی خودرو</strong>
            </div>

        </a>


        <!-- سرویس دوره ای -->
        <a href="#" class="hex-item brown" aria-label="سرویس دوره ای خودرو">

            <svg class="hex-bg" viewBox="0 0 100 115" aria-hidden="true">
                <polygon
                    points="50,2 94,27 94,88 50,113 6,88 6,27"
                    stroke="currentColor"
                    fill="currentColor"
                    stroke-width="2"
                    stroke-linejoin="round"/>
            </svg>

            <div class="hex-content">
                <i class="fa-solid fa-car-side"></i>
                <strong>سرویس دوره‌ای</strong>
            </div>

        </a>


        <!-- تنظیم فرمان و چرخ -->
        <a href="#" class="hex-item brown" aria-label="فرمان و چرخ">

            <svg class="hex-bg" viewBox="0 0 100 115" aria-hidden="true">
                <polygon
                    points="50,2 94,27 94,88 50,113 6,88 6,27"
                    stroke="currentColor"
                    fill="currentColor"
                    stroke-width="2"
                    stroke-linejoin="round"/>
            </svg>

            <div class="hex-content">
                <i class="fa-solid fa-arrows-left-right-to-line"></i>
                <strong>فرمان و چرخ</strong>
            </div>

        </a>

    </div>

</section>


<style>

/* =========================================
   تنظیمات اصلی
========================================= */

.hex-services {

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

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

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

    box-sizing: border-box;

    direction: rtl;

    font-family:
        IRANSans,
        Tahoma,
        Arial,
        sans-serif;
}


/* =========================================
   ردیف ها
========================================= */

.hex-row {

    width: 100%;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: var(--hex-gap);

    flex-wrap: nowrap;
}


/* ردیف دوم */
.second-row {
    margin-top: -1px;
}


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

.hex-item {

    position: relative;

    flex: 0 1 var(--hex-width);

    width: var(--hex-width);

    aspect-ratio: 100 / 115;

    display: flex;

    align-items: center;
    justify-content: center;

    text-decoration: none;

    color: #444;

    box-sizing: border-box;

    transition:
        transform .25s ease,
        filter .25s ease;

    z-index: 1;
}


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

.hex-bg {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: visible;

    pointer-events: none;

    z-index: -1;
}


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

.hex-content {

    position: relative;

    width: 82%;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;

    line-height: 1.3;

    z-index: 2;
}


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

.hex-content i {

    font-size: 30px;

    line-height: 1;

    margin-bottom: 8px;
}


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

.hex-content strong {

    font-family:
        IRANSans,
        Tahoma,
        Arial,
        sans-serif;

    font-size: 12px;

    font-weight: 600;

    white-space: nowrap;
}


/* =========================================
   رنگ ها
========================================= */

.purple {
    color: #ffffff;
}

.green {
    color: #ffffff;
}

.orange {
    color: #ffffff;
}

.brown {
     color: #ffffff;
}

.white {
    color: #444444;
}


/* =========================================
   رنگ SVG
========================================= */

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

}

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

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

.brown .hex-bg polygon {
    color: #795548;
}

.white .hex-bg polygon {

    color: #ffffff;

    stroke: #c8c8c8;
}


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

.hex-item:hover {

    transform: translateY(-4px);

    filter: brightness(.96);

    z-index: 5;
}


/* =========================================
   فوکوس
========================================= */

.hex-item:focus-visible {

    outline: 2px solid #333;

    outline-offset: 3px;
}


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

@media (min-width: 600px) {

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

}


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

@media (min-width: 900px) {

    .hex-services {

        --hex-width: 110px;

        max-width: 680px;
    }

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

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

}


/* =========================================
   موبایل
========================================= */

@media (max-width: 599px) {

    .hex-services {

        --hex-width: 20vw;
        --hex-gap: 0;

        padding: 15px 2px;
    }

    .hex-item {

        flex: 1 1 0;

        width: auto;

        min-width: 0;
    }

    .hex-content i {

        font-size: clamp(17px, 6vw, 25px);

        margin-bottom: 5px;
    }

    .hex-content strong {

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

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

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

}

</style>
</html>