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

بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
خط ۱: خط ۱:
<html>
<html>
<section class="about-cafenet">


    <div class="container">
<section class="kafi-net-stats" aria-label="آمار و معرفی کافی نت من">
 
  <div class="container">
        <!-- ===========================
    <div class="content-wrapper">
                متن (سمت راست)
      <div class="text-side">
        ============================ -->
        <h2>همراه و در کنار شماییم</h2>
 
        <p>با کافی نت من به بیش از صدها خدمات اینترنتی بصورت کاملاً غیرحضوری دسترسی دارین. فقط با چند کلیک ساده سفارش شما در دستان شما قرار دارد. کافیه یک بار از خدمات «کافی نت من» استفاده کنید تا جزئی از خانواده ما شوید. دیگر نیازی نیست برای انجام کارهای کافی نت‌های سنتی مراجعه کنید.</p>
        <div class="about-content">
      </div>
 
            <span class="section-subtitle">
                خدمات کافی نت
            </span>
 
            <p>
                <b>همراه مطمئن شما در انجام خدمات اینترنتی</b>
            </p>
 
            <p>
                کافی نت ما با ارائه صدها خدمت اینترنتی، اداری و ثبت‌نامی، انجام تمامی امور آنلاین شما را با سرعت، دقت و امنیت بالا بر عهده دارد. از ثبت‌نام سامانه‌های دولتی، خدمات بانکی، بیمه، مالیات، ترجمه مدارک، رزرو بلیط و ثبت شرکت گرفته تا بسیاری از خدمات تخصصی دیگر، همه در کوتاه‌ترین زمان و با پشتیبانی کامل انجام می‌شود.
            </p>
 
            <a href="/services" class="main-btn">
 
                مشاهده خدمات
 
                <i class="fa-solid fa-arrow-left"></i>
 
            </a>
 
        </div>
 
        <!-- ===========================
                کارت‌ها (سمت چپ)
        ============================ -->
 
        <div class="stats-wrapper">
 
            <!-- کارت اول -->
 
            <article class="stat-card">
 
                <div class="card-top">
 
                    <span class="card-title">
                        خدمات انجام شده
                    </span>
 
                    <div class="icon">
 
                        <i class="fa-solid fa-file-circle-check"></i>
 
                    </div>
 
                </div>
 
                <h3>+۵۰ هزار</h3>
 
            </article>
 
            <!-- کارت دوم -->
 
            <article class="stat-card">
 
                <div class="card-top">
 
                    <span class="card-title">
                        مشتریان دائمی
                    </span>
 
                    <div class="icon">
 
                        <i class="fa-solid fa-users"></i>
 
                    </div>
 
                </div>
 
                <h3>+۵ هزار</h3>
 
            </article>
 
            <!-- کارت سوم -->
 
            <article class="stat-card">
 
                <div class="card-top">
 
                    <span class="card-title">
                        رضایت مشتریان
                    </span>
 
                    <div class="icon">
 
                        <i class="fa-solid fa-face-smile"></i>
 
                    </div>
 
                </div>
 
                <h3>۹۹٪</h3>
 
            </article>
 
            <!-- کارت چهارم -->
 
            <article class="stat-card">
 
                <div class="card-top">
 
                    <span class="card-title">
                        سابقه فعالیت
                    </span>
 
                    <div class="icon">
 
                        <i class="fa-solid fa-calendar-check"></i>
 
                    </div>
 
                </div>
 
                <h3>۱۰+ سال</h3>
 
            </article>
 
        </div>


      <div class="stats-grid">
        <article class="stat-card">
          <span class="number">+50k</span>
          <p>خدمت ارائه شده</p>
        </article>
        <article class="stat-card">
          <span class="number">+500k</span>
          <p>کاربر فعال</p>
        </article>
        <article class="stat-card">
          <span class="number">100%</span>
          <p>رضایت مشتریان</p>
        </article>
        <article class="stat-card">
          <span class="number">+2000</span>
          <p>روز حضور در مارکت</p>
        </article>
      </div>
     </div>
     </div>
 
  </div>
</section>
</section>




</html>
</html>