فراغیب

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

→ تفاوت با ویرایش قدیمی‌تر
دیداریویکی‌متن
esfandiari>Javid
بدون خلاصۀ ویرایش
جز ۳۰ نسخه واردشده
 
(۱۱ نسخهٔ میانی ویرایش شده توسط یک کاربر دیگر نشان داده نشد)
خط ۵۰: خط ۵۰:


         /* بخش تصویر دوره */
         /* بخش تصویر دوره */
         .card-image-wrapper {
         .card-image-wrapper(4/3) {
             width: 100%;
             width: 100%;
             aspect-ratio: 16 / 9; /* حفظ تناسب تصویر */
             aspect-ratio: 4 / 3; /* حفظ تناسب تصویر */
            overflow: hidden;
            border-radius: 10px;
            margin-bottom: 20px;
            background-color: #ddd; /* جایگزین موقت تا عکس لود شود */
        }
 
 
.card-image-wrapper(3/2) {
            width: 100%;
            aspect-ratio: 3 / 2; /* حفظ تناسب تصویر */
            overflow: hidden;
            border-radius: 10px;
            margin-bottom: 20px;
            background-color: #ddd; /* جایگزین موقت تا عکس لود شود */
        }
 
.card-image-wrapper(long) {
            width: 100%;
            aspect-ratio: 3 / 1; /* حفظ تناسب تصویر */
             overflow: hidden;
             overflow: hidden;
             border-radius: 10px;
             border-radius: 10px;
خط ۱۱۸: خط ۱۳۷:


<!--  ردیف اول  -->
<!--  ردیف اول  -->
<h2>خدمات نصب و اجرای کولر گازی</h2>
<h2>نصب بی‌دردسر، کیفیت تضمینی نوین سرما گستر</h2>


<div class="card-grid">
<div class="card-grid">
خط ۱۲۴: خط ۱۴۳:
     <!-- کارت اول -->
     <!-- کارت اول -->
     <article class="card">
     <article class="card">
         <div class="card-image-wrapper">
         <div class="card-image-wrapper(3/2)">
             <img src="https://dl.faraghaib.ir/m/260022-01/260022-01-03.jpg" alt="نصب کولر گازی نوین سرما گستر">
             <img src="https://dl.faraghaib.ir/m/260022-01/260022-01-73.jpg" alt="نصب کولر گازی نوین سرما گستر">
         </div>
         </div>
         <h3 class="card-title">نصب تخصصی کولر گازی با اجرای اصولی</h3>
         <h3 class="card-title">نصب تخصصی کولر گازی با اجرای اصولی</h3>
خط ۱۳۲: خط ۱۵۱:
     <!-- کارت دوم -->
     <!-- کارت دوم -->
     <article class="card">
     <article class="card">
         <div class="card-image-wrapper">
         <div class="card-image-wrapper(4/3)">
             <img src="https://dl.faraghaib.ir/m/260022-01/260022-01-04.jpg" alt="سرویس کولر گازی نوین سرما گستر">
             <img src="https://dl.faraghaib.ir/m/260022-01/260022-01-69.PNG" alt="سرویس کولر گازی نوین سرما گستر">
         </div>
         </div>
         <h3 class="card-title">سرویس دوره‌ای کولر گازی برای عملکرد بهتر</h3>
         <h3 class="card-title">سرویس دوره‌ای کولر گازی برای عملکرد بهتر</h3>
خط ۱۴۰: خط ۱۵۹:
     <!-- کارت سوم -->
     <!-- کارت سوم -->
     <article class="card">
     <article class="card">
         <div class="card-image-wrapper">
         <div class="card-image-wrapper(4/3)">
             <img src="https://dl.faraghaib.ir/m/260022-01/260022-01-06.jpg" alt="تعمیر کولر گازی نوین سرما گستر">
             <img src="https://dl.faraghaib.ir/m/260022-01/260022-01-72.png" alt="تعمیر کولر گازی نوین سرما گستر">
         </div>
         </div>
         <h3 class="card-title">تعمیر تخصصی انواع کولر گازی و اسپلیت</h3>
         <h3 class="card-title">تعمیر تخصصی انواع کولر گازی و اسپلیت</h3>
خط ۱۴۸: خط ۱۶۷:
     <!-- کارت چهارم -->
     <!-- کارت چهارم -->
     <article class="card">
     <article class="card">
         <div class="card-image-wrapper">
         <div class="card-image-wrapper(4/3)">
             <img src="https://dl.faraghaib.ir/m/260022-01/260022-01-07.jpg" alt="خدمات کولر گازی نوین سرما گستر">
             <img src="https://dl.faraghaib.ir/m/260022-01/260022-01-74.png" alt="خدمات کولر گازی نوین سرما گستر">
         </div>
         </div>
         <h3 class="card-title">خدمات تخصصی کولر گازی با اجرای مطمئن</h3>
         <h3 class="card-title">خدمات تخصصی کولر گازی با اجرای مطمئن</h3>
خط ۱۶۳: خط ۱۸۲:


     <div style="display:inline-block; max-width:100%; overflow:hidden; border-radius:18px;">
     <div style="display:inline-block; max-width:100%; overflow:hidden; border-radius:18px;">
         <img src="https://dl.faraghaib.ir/m/260022-01/baner-01-04.jpg" alt="نوین سرما گستر">
         <img src="https://dl.faraghaib.ir/m/260022-01/260022-01-24.png" alt="نوین سرما گستر">
     </div>
     </div>


     <h2>خرید و فروش کولر گازی و اسپلیت</h2>
     <h2>نوین سرما گستر استاندارد نوین در خدمات کولر گازی</h2>


     <div class="card-grid">
     <div class="card-grid">
خط ۱۷۲: خط ۱۹۱:
         <!-- کارت اول -->
         <!-- کارت اول -->
         <article class="card">
         <article class="card">
             <div class="card-image-wrapper">
             <div class="card-image-wrapper(long)">
                 <img src="https://dl.faraghaib.ir/m/260022-01/260022-01-15.png" alt="خرید کولر گازی نوین سرما گستر">
                 <img src="https://dl.faraghaib.ir/m/260022-01/260022-01-68.PNG" alt="خرید کولر گازی نوین سرما گستر">
             </div>
             </div>
             <h3 class="card-title">خرید کولر گازی مناسب برای خانه و محل کار</h3>
             <h3 class="card-title">خرید کولر گازی مناسب برای خانه و محل کار</h3>
خط ۱۸۰: خط ۱۹۹:
         <!-- کارت دوم -->
         <!-- کارت دوم -->
         <article class="card">
         <article class="card">
             <div class="card-image-wrapper">
             <div class="card-image-wrapper(long)">
                 <img src="https://dl.faraghaib.ir/m/260022-01/260022-01-16.png" alt="فروش کولر گازی نوین سرما گستر">
                 <img src="https://dl.faraghaib.ir/m/260022-01/260022-01-56.png" alt="فروش کولر گازی نوین سرما گستر">
             </div>
             </div>
             <h3 class="card-title">فروش انواع کولر گازی و اسپلیت با مشاوره تخصصی</h3>
             <h3 class="card-title">فروش انواع کولر گازی و اسپلیت با مشاوره تخصصی</h3>
خط ۱۸۸: خط ۲۰۷:
         <!-- کارت سوم -->
         <!-- کارت سوم -->
         <article class="card">
         <article class="card">
             <div class="card-image-wrapper">
             <div class="card-image-wrapper(long)">
                 <img src="https://dl.faraghaib.ir/m/260022-01/260022-01-17.png" alt="اسپلیت سفارشی نوین سرما گستر">
                 <img src="https://dl.faraghaib.ir/m/260022-01/260022-01-40.jpg" alt="اسپلیت سفارشی نوین سرما گستر">
             </div>
             </div>
             <h3 class="card-title">اسپلیت سفارشی متناسب با نیاز و فضای شما</h3>
             <h3 class="card-title">اسپلیت سفارشی متناسب با نیاز و فضای شما</h3>
خط ۱۹۶: خط ۲۱۵:
         <!-- کارت چهارم -->
         <!-- کارت چهارم -->
         <article class="card">
         <article class="card">
             <div class="card-image-wrapper">
             <div class="card-image-wrapper(long)">
                 <img src="https://dl.faraghaib.ir/m/260022-01/260022-01-18.png" alt="انتخاب کولر گازی نوین سرما گستر">
                 <img src="https://dl.faraghaib.ir/m/260022-01/260022-01-41.jpg" alt="انتخاب کولر گازی نوین سرما گستر">
             </div>
             </div>
             <h3 class="card-title">انتخاب ظرفیت و مدل مناسب با مشاوره کارشناسی</h3>
             <h3 class="card-title">انتخاب ظرفیت و مدل مناسب با مشاوره کارشناسی</h3>
خط ۲۱۳: خط ۲۳۲:


     <div style="display:inline-block; max-width:100%; overflow:hidden; border-radius:18px;">
     <div style="display:inline-block; max-width:100%; overflow:hidden; border-radius:18px;">
         <img src="https://dl.faraghaib.ir/m/260022-01/260022-01-24.png" alt="شارژ گاز کولر گازی نوین سرما گستر">
         <img src="https://dl.faraghaib.ir/m/260022-01/baner-01-04.jpg" alt="شارژ گاز کولر گازی نوین سرما گستر">
     </div>
     </div>


    <h2>شارژ گاز و سرویس تخصصی کولر گازی</h2>
  <h2>نوین سرما گستر؛ آرامش تضمین‌شده در گرما</h2>


     <div class="card-grid">
     <div class="card-grid">
خط ۲۲۳: خط ۲۴۲:
         <article class="card">
         <article class="card">
             <div class="card-image-wrapper">
             <div class="card-image-wrapper">
                 <img src="https://dl.faraghaib.ir/m/260022-01/260022-01-19.png" alt="شارژ گاز کولر گازی">
                 <img src="https://dl.faraghaib.ir/m/260022-01/260022-01-66.png" alt="شارژ گاز کولر گازی">
             </div>
             </div>
             <h3 class="card-title">شارژ گاز کولر گازی برای بازگشت سرمایش مطلوب</h3>
             <h3 class="card-title">شارژ گاز کولر گازی برای بازگشت سرمایش مطلوب</h3>
خط ۲۳۱: خط ۲۵۰:
         <article class="card">
         <article class="card">
             <div class="card-image-wrapper">
             <div class="card-image-wrapper">
                 <img src="https://dl.faraghaib.ir/m/260022-01/260022-01-20.png" alt="سرویس تخصصی کولر گازی">
                 <img src="https://dl.faraghaib.ir/m/260022-01/260022-01-54.jpg" alt="سرویس تخصصی کولر گازی">
             </div>
             </div>
             <h3 class="card-title">سرویس کامل اسپلیت و بررسی عملکرد دستگاه</h3>
             <h3 class="card-title">سرویس کامل اسپلیت و بررسی عملکرد دستگاه</h3>
خط ۲۳۹: خط ۲۵۸:
         <article class="card">
         <article class="card">
             <div class="card-image-wrapper">
             <div class="card-image-wrapper">
                 <img src="https://dl.faraghaib.ir/m/260022-01/260022-01-25.png" alt="تعمیر تخصصی اسپلیت">
                 <img src="https://dl.faraghaib.ir/m/260022-01/260022-01-65.png" alt="تعمیر تخصصی اسپلیت">
             </div>
             </div>
             <h3 class="card-title">عیب‌یابی و تعمیر تخصصی انواع اسپلیت</h3>
             <h3 class="card-title">عیب‌یابی و تعمیر تخصصی انواع اسپلیت</h3>
خط ۲۴۷: خط ۲۶۶:
         <article class="card">
         <article class="card">
             <div class="card-image-wrapper">
             <div class="card-image-wrapper">
                 <img src="https://dl.faraghaib.ir/m/260022-01/260022-01-26.png" alt="سرویس و تعمیر کولر گازی">
                 <img src="https://dl.faraghaib.ir/m/260022-01/260022-01-71.jpg" alt="سرویس و تعمیر کولر گازی">
             </div>
             </div>
             <h3 class="card-title">سرویس و تعمیر اصولی برای افزایش عمر دستگاه</h3>
             <h3 class="card-title">سرویس و تعمیر اصولی برای افزایش عمر دستگاه</h3>
خط ۲۶۱: خط ۲۸۰:


     <div style="display:inline-block; max-width:100%; overflow:hidden; border-radius:18px;">
     <div style="display:inline-block; max-width:100%; overflow:hidden; border-radius:18px;">
         <img src="https://dl.faraghaib.ir/m/260022-01/260022-01-24.png" alt="انواع اسپلیت نوین سرما گستر">
         <img src="https://dl.faraghaib.ir/m/260022-01/baner-01-01.png" alt="انواع اسپلیت نوین سرما گستر">
     </div>
     </div>


خط ۲۷۰: خط ۲۸۹:
         <!-- کارت اول -->
         <!-- کارت اول -->
         <article class="card">
         <article class="card">
             <div class="card-image-wrapper">
             <div class="card-image-wrapper(3/2)">
                 <img src="https://dl.faraghaib.ir/m/260022-01/260022-01-19.png" alt="انواع اسپلیت">
                 <img src="https://dl.faraghaib.ir/m/260022-01/260022-01-77.png" alt="انواع اسپلیت">
             </div>
             </div>
             <h3 class="card-title">انواع اسپلیت برای فضاهای مسکونی و تجاری</h3>
             <h3 class="card-title">انواع اسپلیت برای فضاهای مسکونی و تجاری</h3>
خط ۲۷۸: خط ۲۹۷:
         <!-- کارت دوم -->
         <!-- کارت دوم -->
         <article class="card">
         <article class="card">
             <div class="card-image-wrapper">
             <div class="card-image-wrapper(3/2)">
                 <img src="https://dl.faraghaib.ir/m/260022-01/260022-01-20.png" alt="اسپلیت سفارشی">
                 <img src="https://dl.faraghaib.ir/m/260022-01/260022-01-70.jpg" alt="اسپلیت سفارشی">
             </div>
             </div>
             <h3 class="card-title">سفارشی‌سازی اسپلیت متناسب با نیاز مشتری</h3>
             <h3 class="card-title">سفارشی‌سازی اسپلیت متناسب با نیاز مشتری</h3>
خط ۲۸۶: خط ۳۰۵:
         <!-- کارت سوم -->
         <!-- کارت سوم -->
         <article class="card">
         <article class="card">
             <div class="card-image-wrapper">
             <div class="card-image-wrapper(3/2)">
                 <img src="https://dl.faraghaib.ir/m/260022-01/260022-01-25.png" alt="نصب و تعمیر اسپلیت">
                 <img src="https://dl.faraghaib.ir/m/260022-01/260022-01-77.png" alt="نصب و تعمیر اسپلیت">
             </div>
             </div>
             <h3 class="card-title">نصب، تعمیر و سرویس انواع اسپلیت</h3>
             <h3 class="card-title">نصب، تعمیر و سرویس انواع اسپلیت</h3>
خط ۲۹۴: خط ۳۱۳:
         <!-- کارت چهارم -->
         <!-- کارت چهارم -->
         <article class="card">
         <article class="card">
             <div class="card-image-wrapper">
             <div class="card-image-wrapper(3/2)">
                 <img src="https://dl.faraghaib.ir/m/260022-01/260022-01-26.png" alt="خدمات کولر گازی نوین سرما گستر">
                 <img src="https://dl.faraghaib.ir/m/260022-01/260022-01-64.jpg" alt="خدمات کولر گازی نوین سرما گستر">
             </div>
             </div>
             <h3 class="card-title">راهکار کامل سرمایش با خدمات نوین سرما گستر</h3>
             <h3 class="card-title">راهکار کامل سرمایش با خدمات نوین سرما گستر</h3>
برگرفته از «https://fa.faraghaib.ir/wiki/الگو:کانتینر_4_کادر/امامی»