پرش به محتوا

کانتینر کله قندی/کاووسی - فراغیب

از فراغیب
دیداریویکی‌متن
صفحه‌ای تازه حاوی «<html> <!-- استایل پیشنهادی --> <style> .ad-container { display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; padding: 20px; } .ad-card { flex: 1 1 calc(20% - 20px); ←برای ۵ تا در دسکتاپ: min-width: 200px; text-align: center; background: #fff; padding-bottom: 20px; } .orange-box {...» ایجاد کرد
 
بدون خلاصۀ ویرایش
 
(۱۳ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد)
خط ۱: خط ۱:
<html>
<html>
<!-- استایل پیشنهادی -->
<style>
<style>
     .ad-container {
     .ad-container {
         display: flex;
         display: flex;
         flex-wrap: wrap;
         flex-wrap: wrap;
         gap: 15px;
         gap: 20px;
         justify-content: center;
         justify-content: center;
         padding: 20px;
         padding: 20px;
خط ۱۲: خط ۱۰:


     .ad-card {
     .ad-card {
         flex: 1 1 calc(20% - 20px); /* برای ۵ تا در دسکتاپ */
         flex: 1 1 180px; /* تنظیم برای ریسپانسیو شدن */
        min-width: 200px;
         text-align: center;
         text-align: center;
         background: #fff;
         max-width: 250px;
        padding-bottom: 20px;
     }
     }


     .orange-box {
     .orange-box {
         background-color: #ff8c00;
         background-color: #0F172A;
        border-radius: 20px 20px 0 0;
         height: 250px;
         height: 250px;
        /* این خط جادوی اصلی برای ایجاد حالت کله‌قندی است */
        clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
        font-weight: bold;
         display: flex;
         display: flex;
         flex-direction: column;
         flex-direction: column;
         align-items: center;
         align-items: center;
         justify-content: flex-end;
         justify-content: flex-start;
         padding-bottom: 20px;
         padding-top: 10px;
         position: relative;
         color: #d9d900;
        font-size: 0.9rem;
     }
     }


     .orange-box img { width: 80%; height: auto; margin-bottom: 15px; }
     .orange-box img {
        width: 90%;
        height: auto;
        margin-bottom: 10px;
    }


     .ad-card h3 { font-size: 1.2rem; margin-top: 10px; }
     .card-title {
   
        margin-top: 15px;
    /* Mobile First */
       
    @media (max-width: 768px) {
        font-size: 10px;
         .ad-card { flex: 1 1 calc(50% - 15px); } /* ۲ تا در هر ردیف موبایل */
         font-family: iransans;
     }
     }
</style>
</style>


<!-- ساختار HTML -->
<!-- ساختار HTML -->
<section class="ad-container">
<div class="ad-container">
     <!-- آیتم دوربین مداربسته -->
     <!-- آیتم ۱ -->
    <article class="ad-card">
        <div class="orange-box">
            <img src="https://dl.faraghaib.ir/m/260018/26001802.png" alt="دوربین مداربسته">
            <p>طراحی بهینه نقشه جانمایی دوربین‌ها برای نقاط کور.</p>
        </div>
        <h3 class="card-title">مشاوره و طراحی سیستم</h3>
    </article>
   
  <!-- آیتم 2 -->
    <article class="ad-card">
        <div class="orange-box">
            <img src="https://dl.faraghaib.ir/m/260018/26001803.jpg" alt="دوربین مداربسته">
            <p> IP، وایرلس و دستگاه‌های ضبط تصویر با گارانتی.</p>
        </div>
        <h3 class="card-title">فروش تجهیزات نظارتی</h3>
    </article>


  <!-- آیتم 3 -->
     <article class="ad-card">
     <article class="ad-card">
         <div class="orange-box">
         <div class="orange-box">
             <img src="cctv-camera.webp" alt="نصب و فروش دوربین مداربسته" title="دوربین مداربسته">
             <img src="https://dl.faraghaib.ir/m/260018/26001804.jpg" alt="دوربین مداربسته">
             <p>نصب و فروش دوربین مداربسته</p>
             <p>عیب‌یابی، رفع اختلالات تصویر</p>
            <strong>با آگهی آنلاین</strong>
         </div>
         </div>
         <h3>دوربین مداربسته</h3>
         <h3 class="card-title">تعمیر و نگهداری</h3>
     </article>
     </article>
 


  <!-- آیتم 4 -->
     <article class="ad-card">
     <article class="ad-card">
         <div class="orange-box">
         <div class="orange-box">
             <img src="cctv-camera.webp" alt="نصب و فروش دوربین مداربسته" title="دوربین مداربسته">
             <img src="https://dl.faraghaib.ir/m/260018/26001805.jpg" alt="دوربین مداربسته">
             <p>نصب و فروش دوربین مداربسته</p>
             <p>جایگزینی سیستم‌های قدیمی با دوربین‌های مدرن </p>
            <strong>با آگهی آنلاین</strong>
         </div>
         </div>
         <h3>دوربین مداربسته</h3>
         <h3 class="card-title">انتقال تصویر روی موبایل</h3>
     </article>
     </article>


  <!-- آیتم 5 -->
    <article class="ad-card">
        <div class="orange-box">
            <img src="https://dl.faraghaib.ir/m/260018/26001807.jpeg" alt="دوربین مداربسته">
            <p>حل مشکلات هارد دیسک و ضبط تصاویر .</p>
        </div>
        <h3 class="card-title">عیب‌یابی شبکه و ذخیره‌سازی</h3>
    </article>


<!-- آیتم 6 -->
     <article class="ad-card">
     <article class="ad-card">
         <div class="orange-box">
         <div class="orange-box">
             <img src="cctv-camera.webp" alt="نصب و فروش دوربین مداربسته" title="دوربین مداربسته">
             <img src="https://dl.faraghaib.ir/m/260018/26001807.jpeg" alt="دوربین مداربسته">
             <p>نصب و فروش دوربین مداربسته</p>
             <p>جهیز اتاق‌های مانیتورینگ کارخانه‌ها و برج‌ها.</p>
            <strong>با آگهی آنلاین</strong>
         </div>
         </div>
         <h3>دوربین مداربسته</h3>
         <h3 class="card-title">مشاوره و اجرای پروژه اتاق کنترل</h3>
     </article>
     </article>


 
<!-- آیتم 7 -->
     <article class="ad-card">
     <article class="ad-card">
         <div class="orange-box">
         <div class="orange-box">
             <img src="cctv-camera.webp" alt="نصب و فروش دوربین مداربسته" title="دوربین مداربسته">
             <img src="https://dl.faraghaib.ir/m/260018/26001804.jpg" alt="دوربین مداربسته">
             <p>نصب و فروش دوربین مداربسته</p>
             <p>بسترسازی شبکه با کابل فیبر نوری</p>
            <strong>با آگهی آنلاین</strong>
         </div>
         </div>
         <h3>دوربین مداربسته</h3>
         <h3 class="card-title">پیاده‌سازی فیبر نوری در پروژه‌های بزرگ</h3>
     </article>
     </article>


 
<!-- آیتم 8 -->
     <article class="ad-card">
     <article class="ad-card">
         <div class="orange-box">
         <div class="orange-box">
             <img src="cctv-camera.webp" alt="نصب و فروش دوربین مداربسته" title="دوربین مداربسته">
             <img src="https://dl.faraghaib.ir/m/260018/26001803.jpg" alt="دوربین مداربسته">
             <p>نصب و فروش دوربین مداربسته</p>
             <p>نظارت مداوم بر سلامت تجهیزات</p>
            <strong>با آگهی آنلاین</strong>
         </div>
         </div>
         <h3>دوربین مداربسته</h3>
         <h3 class="card-title">پشتیبانی و مانیتورینگ ۲۴ ساعته</h3>
     </article>
     </article>




</section>
 
</div>
 
 




</html>
</html>

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

دوربین مداربسته

طراحی بهینه نقشه جانمایی دوربین‌ها برای نقاط کور.

مشاوره و طراحی سیستم

دوربین مداربسته

IP، وایرلس و دستگاه‌های ضبط تصویر با گارانتی.

فروش تجهیزات نظارتی

دوربین مداربسته

عیب‌یابی، رفع اختلالات تصویر

تعمیر و نگهداری

دوربین مداربسته

جایگزینی سیستم‌های قدیمی با دوربین‌های مدرن

انتقال تصویر روی موبایل

دوربین مداربسته

حل مشکلات هارد دیسک و ضبط تصاویر .

عیب‌یابی شبکه و ذخیره‌سازی

دوربین مداربسته

جهیز اتاق‌های مانیتورینگ کارخانه‌ها و برج‌ها.

مشاوره و اجرای پروژه اتاق کنترل

دوربین مداربسته

بسترسازی شبکه با کابل فیبر نوری

پیاده‌سازی فیبر نوری در پروژه‌های بزرگ

دوربین مداربسته

نظارت مداوم بر سلامت تجهیزات

پشتیبانی و مانیتورینگ ۲۴ ساعته

برگرفته از «https://fa.faraghaib.ir/w/index.php?title=الگو:کانتینر_کله_قندی/کاووسی&oldid=5144»