الگو:کانتینر متن و کارت: تفاوت میان نسخهها
صفحهای تازه حاوی « <html lang="fa" dir="rtl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>همراه شما در تمامی خدمات کافی نت</title> <meta name="description" content="ارائه خدمات حرفهای کافی نت شامل ثبت نام، خدمات دولت الکترونیک، امور بانکی، ترجمه، ثبت شرکت، مالیات، بیمه،...» ایجاد کرد |
بدون خلاصۀ ویرایش |
||
| خط ۱: | خط ۱: | ||
<html lang="fa" dir="rtl"> | <html lang="fa" dir="rtl"> | ||
<style> | |||
/*================================================== | |||
RESET | |||
==================================================*/ | |||
*{ | |||
margin:0; | |||
padding:0; | |||
box-sizing:border-box; | |||
} | |||
html{ | |||
scroll-behavior:smooth; | |||
} | |||
body{ | |||
font-family:"Vazirmatn",sans-serif; | |||
background:#ffffff; | |||
color:#222; | |||
line-height:2; | |||
overflow-x:hidden; | |||
} | |||
img{ | |||
max-width:100%; | |||
display:block; | |||
} | |||
a{ | |||
text-decoration:none; | |||
} | |||
ul{ | |||
list-style:none; | |||
} | |||
/*================================================== | |||
CONTAINER | |||
==================================================*/ | |||
.container{ | |||
width:min(1200px,92%); | |||
margin:auto; | |||
} | |||
/*================================================== | |||
SECTION | |||
==================================================*/ | |||
.about-cafenet{ | |||
padding:90px 0; | |||
background:#fff; | |||
overflow:hidden; | |||
} | |||
.about-cafenet .container{ | |||
display:grid; | |||
grid-template-columns:1fr 1.2fr; | |||
gap:70px; | |||
align-items:center; | |||
} | |||
/* کارتها سمت راست */ | |||
.stats-wrapper{ | |||
order:1; | |||
} | |||
/* متن سمت چپ */ | |||
.about-content{ | |||
order:2; | |||
} | |||
/*================================================== | |||
CONTENT | |||
==================================================*/ | |||
.section-subtitle{ | |||
display:inline-block; | |||
background:#ebfff6; | |||
color:#00b96b; | |||
padding:8px 18px; | |||
border-radius:40px; | |||
font-size:14px; | |||
font-weight:700; | |||
margin-bottom:18px; | |||
} | |||
.about-content h2{ | |||
font-size:38px; | |||
font-weight:800; | |||
color:#111; | |||
line-height:1.5; | |||
margin-bottom:18px; | |||
} | |||
.about-content p{ | |||
font-size:15px; | |||
color:#666; | |||
text-align:justify; | |||
line-height:2; | |||
margin-bottom:30px; | |||
} | |||
/*================================================== | |||
BUTTON | |||
==================================================*/ | |||
.main-btn{ | |||
display:inline-flex; | |||
align-items:center; | |||
gap:10px; | |||
background:#00c97b; | |||
color:#fff; | |||
padding:14px 26px; | |||
border-radius:12px; | |||
font-weight:700; | |||
transition:.35s; | |||
box-shadow:0 12px 30px rgba(0,201,123,.18); | |||
} | |||
.main-btn:hover{ | |||
transform:translateY(-4px); | |||
background:#00b86d; | |||
} | |||
.main-btn i{ | |||
transition:.3s; | |||
} | |||
.main-btn:hover i{ | |||
transform:translateX(-5px); | |||
} | |||
/*================================================== | |||
CARDS | |||
==================================================*/ | |||
.stats-wrapper{ | |||
position:relative; | |||
display:grid; | |||
grid-template-columns:repeat(2,1fr); | |||
gap:18px; | |||
z-index:2; | |||
} | |||
.stat-card{ | |||
background:#fff; | |||
border-radius:18px; | |||
padding:26px 22px; | |||
border:1px solid #f3f3f3; | |||
transition:.35s; | |||
box-shadow: | |||
0 8px 24px rgba(0,0,0,.05); | |||
position:relative; | |||
z-index:2; | |||
} | |||
.stat-card:hover{ | |||
transform:translateY(-8px); | |||
border-color:#00c97b; | |||
box-shadow: | |||
0 18px 45px rgba(0,0,0,.10); | |||
} | |||
/*================================================== | |||
ICON | |||
==================================================*/ | |||
.stat-card .icon{ | |||
width:56px; | |||
height:56px; | |||
border-radius:16px; | |||
background:#ecfff7; | |||
display:flex; | |||
align-items:center; | |||
justify-content:center; | |||
color:#00c97b; | |||
font-size:22px; | |||
margin-bottom:15px; | |||
transition:.35s; | |||
} | |||
.stat-card:hover .icon{ | |||
background:#00c97b; | |||
color:#fff; | |||
transform:rotate(-8deg); | |||
} | |||
/*================================================== | |||
TEXT | |||
==================================================*/ | |||
.stat-card h3{ | |||
font-size:28px; | |||
color:#00b96b; | |||
font-weight:800; | |||
margin-bottom:6px; | |||
line-height:1; | |||
} | |||
.stat-card p{ | |||
font-size:13px; | |||
color:#666; | |||
white-space:nowrap; | |||
overflow:hidden; | |||
text-overflow:ellipsis; | |||
} | |||
/*================================================== | |||
SHADOW | |||
==================================================*/ | |||
.stats-shadow{ | |||
position:absolute; | |||
left:50%; | |||
top:50%; | |||
transform:translate(-50%,-50%); | |||
width:92%; | |||
height:92%; | |||
background:rgba(0,0,0,.08); | |||
filter:blur(55px); | |||
border-radius:45px; | |||
opacity:.55; | |||
z-index:-1; | |||
} | |||
/*================================================== | |||
FLOATING EFFECT | |||
==================================================*/ | |||
.stat-card:nth-child(2), | |||
.stat-card:nth-child(4){ | |||
margin-top:30px; | |||
} | |||
/*================================================== | |||
BACKGROUND SHAPES | |||
==================================================*/ | |||
.stats-wrapper::before{ | |||
content:""; | |||
position:absolute; | |||
width:170px; | |||
height:170px; | |||
right:-60px; | |||
top:-60px; | |||
border-radius:50%; | |||
background:#00c97b15; | |||
filter:blur(40px); | |||
z-index:-2; | |||
} | |||
.stats-wrapper::after{ | |||
content:""; | |||
position:absolute; | |||
width:170px; | |||
height:170px; | |||
left:-60px; | |||
bottom:-60px; | |||
border-radius:50%; | |||
background:#00c97b10; | |||
filter:blur(45px); | |||
z-index:-2; | |||
} | |||
/*================================================== | |||
RESPONSIVE | |||
==================================================*/ | |||
@media(max-width:1100px){ | |||
.about-cafenet .container{ | |||
gap:45px; | |||
} | |||
.about-content h2{ | |||
font-size:34px; | |||
} | |||
} | |||
@media(max-width:992px){ | |||
.about-cafenet{ | |||
padding:70px 0; | |||
} | |||
.about-cafenet .container{ | |||
grid-template-columns:1fr; | |||
} | |||
.stats-wrapper{ | |||
order:1; | |||
max-width:650px; | |||
margin:auto; | |||
} | |||
.about-content{ | |||
order:2; | |||
text-align:center; | |||
} | |||
.about-content p{ | |||
text-align:center; | |||
} | |||
.main-btn{ | |||
justify-content:center; | |||
} | |||
} | |||
@media(max-width:768px){ | |||
.about-cafenet{ | |||
padding:60px 0; | |||
} | |||
.about-content h2{ | |||
font-size:28px; | |||
} | |||
.about-content p{ | |||
font-size:14px; | |||
} | |||
.stats-wrapper{ | |||
grid-template-columns:1fr; | |||
gap:16px; | |||
} | |||
.stat-card:nth-child(2), | |||
.stat-card:nth-child(4){ | |||
margin-top:0; | |||
} | |||
.stat-card{ | |||
padding:22px 18px; | |||
} | |||
.stat-card .icon{ | |||
width:52px; | |||
height:52px; | |||
font-size:20px; | |||
} | |||
.stat-card h3{ | |||
font-size:24px; | |||
} | |||
.stat-card p{ | |||
font-size:13px; | |||
} | |||
.main-btn{ | |||
width:100%; | |||
justify-content:center; | |||
} | |||
.stats-shadow{ | |||
width:100%; | |||
height:100%; | |||
filter:blur(35px); | |||
} | |||
} | |||
@media(max-width:480px){ | |||
.container{ | |||
width:94%; | |||
} | |||
.about-content h2{ | |||
font-size:24px; | |||
} | |||
.section-subtitle{ | |||
font-size:13px; | |||
} | |||
.about-content p{ | |||
font-size:13px; | |||
} | |||
.stat-card{ | |||
border-radius:16px; | |||
} | |||
} | |||
/*================================================== | |||
PERFORMANCE | |||
==================================================*/ | |||
.stat-card, | |||
.main-btn, | |||
.icon{ | |||
will-change:transform; | |||
} | |||
.about-content, | |||
.stats-wrapper{ | |||
position:relative; | |||
z-index:2; | |||
} | |||
</style> | |||
<head> | <head> | ||