پرش به محتوا

کانتبنر 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...» ایجاد کرد
 
بدون خلاصۀ ویرایش
 
(۳ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد)
خط ۱۶: خط ۱۶:


         <!-- نصب دوربین مداربسته -->
         <!-- نصب دوربین مداربسته -->
     <a href="#" class="hex-item brown" aria-label="نصب دوربین مداربسته">
     <a href="#" class="hex-item green" 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">
خط ۳۵: خط ۳۵:


         <!-- فروش دوربین مداربسته -->
         <!-- فروش دوربین مداربسته -->
     <a href="#" class="hex-item brown" aria-label="فروش دوربین مداربسته">
     <a href="#" class="hex-item green" 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">
خط ۵۴: خط ۵۴:


         <!-- سیستم نظارتی -->
         <!-- سیستم نظارتی -->
     <a href="#" class="hex-item brown" aria-label="سیستم نظارتی دوربین مداربسته">
     <a href="#" class="hex-item green" 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">
خط ۷۴: خط ۷۴:


         <!-- انتقال تصویر -->
         <!-- انتقال تصویر -->
     <a href="#" class="hex-item brown" aria-label="انتقال تصویر دوربین مداربسته">
     <a href="#" class="hex-item green" 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">
خط ۹۳: خط ۹۳:




         <!-- پشتیبانی و تعمیرات -->
         <!-- تعمیرات -->
     <a href="#" class="hex-item brown" aria-label="پشتیبانی و تعمیر دوربین مداربسته">
     <a href="#" class="hex-item green" 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">
خط ۱۰۷: خط ۱۰۷:
         <div class="hex-content">
         <div class="hex-content">
             <i class="fa-solid fa-screwdriver-wrench" aria-hidden="true"></i>
             <i class="fa-solid fa-screwdriver-wrench" aria-hidden="true"></i>
             <strong>پشتیبانی-تعمیرات</strong>
             <strong>تعمیرات</strong>
         </div>
         </div>


خط ۱۲۰: خط ۱۲۰:
     <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 green" 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">
خط ۱۳۴: خط ۱۳۴:
         <div class="hex-content">
         <div class="hex-content">
             <i class="fa-solid fa-network-wired" aria-hidden="true"></i>
             <i class="fa-solid fa-network-wired" aria-hidden="true"></i>
             <strong>دوربین تحت شبکه</strong>
             <strong>دوربین شبکه ای</strong>
         </div>
         </div>


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


         <!-- دستگاه DVR و NVR -->
         <!-- دستگاه DVR و NVR -->
     <a href="#" class="hex-item brown" aria-label="دستگاه DVR و NVR">
     <a href="#" class="hex-item green" aria-label="دستگاه DVR و NVR">


         <svg class="hex-bg" viewBox="0 0 100 115" aria-hidden="true">
         <svg class="hex-bg" viewBox="0 0 100 115" aria-hidden="true">
خط ۱۶۱: خط ۱۶۱:


         <!-- کابل کشی و زیرساخت -->
         <!-- کابل کشی و زیرساخت -->
     <a href="#" class="hex-item brown" aria-label="کابل کشی و زیرساخت دوربین مداربسته">
     <a href="#" class="hex-item green" 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">
خط ۱۷۴: خط ۱۷۴:
         <div class="hex-content">
         <div class="hex-content">
             <i class="fa-solid fa-plug" aria-hidden="true"></i>
             <i class="fa-solid fa-plug" aria-hidden="true"></i>
             <strong>کابل‌ و زیرساخت</strong>
             <strong>کابل‌-زیرساخت</strong>
         </div>
         </div>


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


         <!-- امنیت هوشمند -->
         <!-- امنیت هوشمند -->
     <a href="#" class="hex-item brown" aria-label="هوشمندسازی و امنیت اماکن">
     <a href="#" class="hex-item green" 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">
خط ۲۰۲: خط ۲۰۲:


</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: #238b68;
 
     line-height: 1;
     line-height: 1;


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


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


     font-size: 12px;
     font-size: 13 px;


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


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


.white {
.white {
     color: #444444;
     color: #ffffff;
}
}
.green {
    color: #238b68;
}




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


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


خط ۴۱۴: خط ۴۲۴:


.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>

نسخهٔ کنونی تا ‏۲۴ اوت ۲۰۲۶، ساعت ۰۹:۱۷

نصب دوربین
فروش دوربین
سیستم نظارتی
انتقال تصویر
تعمیرات
دوربین شبکه ای
DVR و NVR
کابل‌-زیرساخت
امنیت هوشمند

برگرفته از «https://fa.faraghaib.ir/w/index.php?title=الگو:کانتبنر_6_ضلعی/کاووسی&oldid=6855»