الگو:کانتینر متن و کارت/کافی نت نور یکتا: تفاوت میان نسخه‌ها
esfandiari>Javid بدون خلاصۀ ویرایش |
esfandiari>Javid بدون خلاصۀ ویرایش |
||
| خط ۱: | خط ۱: | ||
<html> | <!DOCTYPE html> | ||
<html lang="fa" dir="rtl"> | |||
<head> | <head> | ||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> | <meta charset="UTF-8"> | ||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> | |||
<style> | |||
/* | |||
نکته مهم: برای استفاده از ایران‌سانس باید فایل فونت را داشته باشید. | |||
در اینجا ساختار استاندارد تعریف آن را قرار داده‌ام. | |||
*/ | |||
@font-face { | |||
font-family: 'IRANSans'; | |||
src: url('fonts/IRANSansWeb.woff2') format('woff2'); /* مسیر فایل فونت خود را اینجا قرار دهید */ | |||
font-weight: normal; | |||
font-style: normal; | |||
} | |||
body { | |||
margin: 0; | |||
padding: 0; | |||
/* استفاده از فونت ایران‌سانس و در صورت عدم دسترسی، فونت‌های استاندارد فارسی */ | |||
font-family: 'IRANSans', Tahoma, Arial, sans-serif; | |||
} | |||
.stats-section { | |||
padding: 50px 20px; | |||
background-color: #f9f9f9; | |||
text-align: center; | |||
} | |||
.container { | |||
max-width: 1200px; | |||
margin: 0 auto; | |||
} | |||
.text-side h2 { | |||
font-size: 2rem; | |||
color: #333; | |||
} | |||
.text-side p { | |||
color: #666; | |||
line-height: 1.8; | |||
max-width: 800px; | |||
margin: 20px auto; | |||
} | |||
.stats-grid { | |||
display: grid; | |||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |||
gap: 20px; | |||
margin-top: 40px; | |||
} | |||
.stat-card { | |||
background: #fff; | |||
padding: 30px; | |||
border-radius: 15px; | |||
box-shadow: 0 4px 15px rgba(0,0,0,0.05); | |||
transition: transform 0.3s ease; | |||
} | |||
.stat-card:hover { | |||
transform: translateY(-5px); | |||
} | |||
.stat-card .icon { | |||
font-size: 2.5rem; | |||
color: #007bff; | |||
margin-bottom: 15px; | |||
} | |||
.stat-info .number { | |||
display: block; | |||
font-size: 1.5rem; | |||
font-weight: bold; | |||
color: #222; | |||
} | |||
.stat-info p { | |||
margin: 5px 0 0; | |||
color: #777; | |||
font-size: 0.9rem; | |||
} | |||
</style> | |||
</head> | </head> | ||
<body> | |||
<section class="stats-section"> | <section class="stats-section"> | ||
<div class="container"> | <div class="container"> | ||
| خط ۱۸: | خط ۱۰۲: | ||
</div> | </div> | ||
</article> | </article> | ||
<article class="stat-card"> | <article class="stat-card"> | ||
<i class="icon fa fa-users"></i> | <i class="icon fa fa-users"></i> | ||
| خط ۲۵: | خط ۱۱۰: | ||
</div> | </div> | ||
</article> | </article> | ||
<article class="stat-card"> | <article class="stat-card"> | ||
<i class="icon fa fa-smile"></i> | <i class="icon fa fa-smile"></i> | ||
| خط ۳۲: | خط ۱۱۸: | ||
</div> | </div> | ||
</article> | </article> | ||
<article class="stat-card"> | <article class="stat-card"> | ||
<i class="icon fa fa-calendar-alt"></i> | <i class="icon fa fa-calendar-alt"></i> | ||
| خط ۴۳: | خط ۱۳۰: | ||
</section> | </section> | ||
</body> | |||
</html> | </html> | ||