فراغیب

الگو:کانتینر کله قندی/کاووسی: تفاوت میان نسخه‌ها

→ تفاوت با ویرایش قدیمی‌تر
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
 
(۱۱ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد)
خط ۱۶: خط ۱۶:


     .orange-box {
     .orange-box {
         background-color: #ff8c00;
         background-color: #0F172A;
         height: 280px;
         height: 250px;
         /* این خط جادوی اصلی برای ایجاد حالت کله‌قندی است */
         /* این خط جادوی اصلی برای ایجاد حالت کله‌قندی است */
         clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
         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-start;
         justify-content: flex-start;
         padding-top: 40px;
         padding-top: 10px;
         color: white;
         color: #d9d900;
        font-size: 0.9rem;
     }
     }


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


     .card-title {
     .card-title {
         margin-top: 15px;
         margin-top: 15px;
         font-weight: bold;
       
         font-size: 1.2rem;
         font-size: 10px;
         font-family: iransans;
     }
     }
</style>
</style>
خط ۴۷: خط ۴۹:
     <article class="ad-card">
     <article class="ad-card">
         <div class="orange-box">
         <div class="orange-box">
             <img src="cctv.png" alt="دوربین مداربسته">
             <img src="https://dl.faraghaib.ir/m/260018/26001802.png" alt="دوربین مداربسته">
             <p>نصب و فروش آسان</p>
             <p>طراحی بهینه نقشه جانمایی دوربین‌ها برای نقاط کور.</p>
            <span>با آگهی آنلاین</span>
         </div>
         </div>
         <h3 class="card-title">دوربین مداربسته</h3>
         <h3 class="card-title">مشاوره و طراحی سیستم</h3>
     </article>
     </article>
      
      
خط ۵۷: خط ۵۸:
     <article class="ad-card">
     <article class="ad-card">
         <div class="orange-box">
         <div class="orange-box">
             <img src="cctv.png" alt="دوربین مداربسته">
             <img src="https://dl.faraghaib.ir/m/260018/26001803.jpg" alt="دوربین مداربسته">
             <p>نصب و فروش آسان</p>
             <p> IP، وایرلس و دستگاه‌های ضبط تصویر با گارانتی.</p>
            <span>با آگهی آنلاین</span>
         </div>
         </div>
         <h3 class="card-title">دوربین مداربسته</h3>
         <h3 class="card-title">فروش تجهیزات نظارتی</h3>
     </article>
     </article>


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


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


خط ۸۷: خط ۸۵:
     <article class="ad-card">
     <article class="ad-card">
         <div class="orange-box">
         <div class="orange-box">
             <img src="cctv.png" alt="دوربین مداربسته">
             <img src="https://dl.faraghaib.ir/m/260018/26001807.jpeg" alt="دوربین مداربسته">
             <p>نصب و فروش آسان</p>
             <p>حل مشکلات هارد دیسک و ضبط تصاویر .</p>
             <span>با آگهی آنلاین</span>
        </div>
        <h3 class="card-title">عیب‌یابی شبکه و ذخیره‌سازی</h3>
    </article>
 
<!-- آیتم 6 -->
    <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>
 
<!-- آیتم 7 -->
    <article class="ad-card">
        <div class="orange-box">
             <img src="https://dl.faraghaib.ir/m/260018/26001804.jpg" alt="دوربین مداربسته">
            <p>بسترسازی شبکه با کابل فیبر نوری</p>
        </div>
        <h3 class="card-title">پیاده‌سازی فیبر نوری در پروژه‌های بزرگ</h3>
    </article>
 
<!-- آیتم 8 -->
    <article class="ad-card">
        <div class="orange-box">
            <img src="https://dl.faraghaib.ir/m/260018/26001803.jpg" alt="دوربین مداربسته">
            <p>نظارت مداوم بر سلامت تجهیزات</p>
         </div>
         </div>
         <h3 class="card-title">دوربین مداربسته</h3>
         <h3 class="card-title">پشتیبانی و مانیتورینگ ۲۴ ساعته</h3>
     </article>
     </article>


برگرفته از «https://fa.faraghaib.ir/wiki/الگو:کانتینر_کله_قندی/کاووسی»