تست: تفاوت میان نسخهها
بدون خلاصۀ ویرایش |
بدون خلاصۀ ویرایش |
||
| (۷۳ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد) | |||
| خط ۱: | خط ۱: | ||
<html lang="fa" dir="rtl"> | <html lang="fa" dir="rtl"> | ||
<head> | <head> | ||
<meta charset="UTF-8"> | <meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<title> | <title>محمدرضا شایق | مدرس خودشناسی</title> | ||
<meta name="description" | <meta name="description" | ||
content=" | content="محمدرضا شایق، مدرس خودشناسی و توسعه فردی؛ آموزش خودشناسی، آگاهی فردی و رشد شخصی."> | ||
<link rel="preconnect" href="https://fonts.googleapis.com"> | |||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |||
< | <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800;900&display=swap" | ||
rel="stylesheet"> | |||
<link rel="stylesheet" | |||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"> | |||
<style> | <style> | ||
#content { | |||
width: 95% !important; /* اجازه بده عرض صفحه زیاد شود */ | |||
max-width: none !important; /* هرگونه سقف عرض را حذف کن */ | |||
margin: 0 auto !important; /* وسطچین کردن کانتینر بزرگ شده */ | |||
} | |||
/* اگر قالب شما از کلاسهای دیگری برای بدنه استفاده میکند */ | |||
.mw-body { | |||
width: 95% !important; | |||
max-width: none !important; | |||
} | |||
/* ========================================================= | /* ========================================================= | ||
ROOT | |||
========================================================= */ | ========================================================= */ | ||
:root{ | |||
--black:#050505; | |||
--black-2:#0c0c0c; | |||
--black-3:#141414; | |||
--gold:#f4b942; | |||
--gold-dark:#d79b20; | |||
--gold-light:rgba(244,185,66,.12); | |||
--white:#ffffff; | |||
--text:#f4f4f4; | |||
--muted:#a1a1a1; | |||
--border:rgba(255,255,255,.09); | |||
--shadow: | |||
0 15px 45px rgba(0,0,0,.35); | |||
--sidebar:105px; | |||
/* فاصله سایدبار از لبه چپ و بالای مانیتور — فقط این عدد را تغییر بده */ | |||
--sidebar-offset-top:-20px; | |||
--sidebar-offset-left:40px; | |||
} | } | ||
/* ========================================================= | |||
RESET | |||
========================================================= */ | |||
*, | |||
*::before, | |||
*::after{ | |||
box-sizing:border-box; | |||
- | |||
} | } | ||
html{ | |||
scroll-behavior:smooth; | |||
scroll-padding-top:20px; | |||
padding: | |||
} | } | ||
body{ | |||
margin:0; | |||
text-align:center; | |||
font-family: | |||
"Vazirmatn", | |||
Tahoma, | |||
Arial, | |||
sans-serif; | |||
background:var(--black); | |||
color:var(--text); | |||
line-height:1.9; | |||
overflow-x:hidden; | |||
} | } | ||
body { | body.section-locked{ | ||
overflow:hidden; | |||
} | } | ||
img { | img{ | ||
max-width: 100%; | |||
height: auto; | display:block; | ||
max-width:100%; | |||
height:auto; | |||
} | } | ||
a { | a{ | ||
text-decoration: none; | |||
color: inherit; | text-decoration:none; | ||
color:inherit; | |||
} | } | ||
button { | button, | ||
font-family: inherit; | input, | ||
textarea{ | |||
font-family:inherit; | |||
} | } | ||
ul{ | |||
margin- | padding:0; | ||
margin:0; | |||
list-style:none; | |||
} | } | ||
/* ========================================================= | |||
PAGE | |||
========================================================= */ | |||
.page{ | |||
min-height:100vh; | |||
background:var(--black); | |||
} | } | ||
. | |||
/* ========================================================= | |||
LEFT ICON SIDEBAR | |||
========================================================= */ | |||
.left-sidebar{ | |||
margin-top:calc(var(--sidebar) + var(--sidebar-offset-top)); | |||
margin-left:calc(var(--sidebar) + var(--sidebar-offset-left)); | |||
position:fixed; | |||
top:0; | |||
left:0; | |||
width:var(--sidebar); | |||
height:100vh; | |||
background:#000; | |||
border-right: | |||
1px solid rgba(255,255,255,.08); | |||
z-index:9999; | |||
display:flex; | |||
flex-direction:column; | |||
align-items:center; | |||
padding:25px 0; | |||
} | } | ||
. | |||
display: | /* ========================================================= | ||
LOGO | |||
========================================================= */ | |||
font- | |||
.sidebar-logo{ | |||
width:100%; | |||
text-align:center; | |||
padding-bottom:25px; | |||
margin-bottom:20px; | |||
border-bottom: | |||
1px solid rgba(255,255,255,.08); | |||
} | |||
.logo-circle{ | |||
width:48px; | |||
height:48px; | |||
margin:auto; | |||
border-radius:50%; | |||
display:grid; | |||
place-items:center; | |||
background:var(--gold); | |||
color:#000; | |||
font-size:1.15rem; | |||
box-shadow: | |||
0 8px 25px rgba(244,185,66,.2); | |||
} | } | ||
. | .sidebar-logo h2{ | ||
display:none; | |||
} | } | ||
. | .sidebar-logo span{ | ||
display:none; | |||
} | } | ||
/* ========================================================= | /* ========================================================= | ||
ICON MENU | |||
========================================================= */ | ========================================================= */ | ||
. | .sidebar-menu{ | ||
width:100%; | |||
display:flex; | |||
flex-direction:column; | |||
align-items:center; | |||
gap:8px; | |||
} | } | ||
. | .sidebar-menu li{ | ||
display: flex; | width:100%; | ||
justify-content: | display:flex; | ||
justify-content:center; | |||
} | } | ||
. | .sidebar-menu a{ | ||
display: | |||
position:relative; | |||
width:50px; | |||
font-size: . | |||
height:50px; | |||
display:grid; | |||
place-items:center; | |||
border-radius:14px; | |||
color:#777; | |||
font-size:1.05rem; | |||
transition: | |||
background .2s ease, | |||
color .2s ease, | |||
transform .2s ease; | |||
} | } | ||
. | |||
/* Tooltip */ | |||
.sidebar-menu a::after{ | |||
background: | |||
content:attr(data-title); | |||
font-size: | position:absolute; | ||
left:68px; | |||
top:50%; | |||
transform: | |||
translateY(-50%) | |||
translateX(-5px); | |||
white-space:nowrap; | |||
background:#181818; | |||
border: | |||
1px solid rgba(255,255,255,.1); | |||
color:#fff; | |||
padding:6px 12px; | |||
border-radius:8px; | |||
font-family: | |||
"Vazirmatn", | |||
sans-serif; | |||
font-size:.7rem; | |||
font-weight:600; | |||
opacity:0; | |||
pointer-events:none; | |||
transition: | |||
opacity .2s ease, | |||
transform .2s ease; | |||
box-shadow: | |||
0 8px 25px rgba(0,0,0,.4); | |||
} | } | ||
. | .sidebar-menu a:hover::after{ | ||
opacity:1; | |||
transform: | |||
translateY(-50%) | |||
translateX(0); | |||
} | } | ||
. | .sidebar-menu a:hover{ | ||
color:var(--gold); | |||
background:var(--gold-light); | |||
transform:translateX(2px); | |||
} | } | ||
. | .sidebar-menu a.active{ | ||
display: none; | |||
color:#000; | |||
background:var(--gold); | |||
box-shadow: | |||
0 8px 25px rgba(244,185,66,.18); | |||
} | |||
/* ========================================================= | |||
SIDEBAR SOCIAL | |||
========================================================= */ | |||
.sidebar-bottom{ | |||
margin-top:auto; | |||
width:100%; | |||
padding-top:20px; | |||
border-top: | |||
1px solid rgba(255,255,255,.08); | |||
display:flex; | |||
justify-content:center; | |||
} | |||
.sidebar-social{ | |||
display:flex; | |||
flex-direction:column; | |||
gap:7px; | |||
} | |||
.sidebar-social a{ | |||
width:38px; | |||
height:38px; | |||
display:grid; | |||
place-items:center; | |||
border-radius:10px; | |||
background:#111; | |||
color:#777; | |||
font-size:.8rem; | |||
transition:.2s; | |||
} | |||
.sidebar-social a:hover{ | |||
color:#000; | |||
background:var(--gold); | |||
} | |||
/* ========================================================= | |||
MAIN | |||
========================================================= */ | |||
.main-content{ | |||
margin-left:calc(var(--sidebar) + var(--sidebar-offset)); | |||
min-width:0; | |||
} | |||
/* ========================================================= | |||
MOBILE HEADER | |||
========================================================= */ | |||
.mobile-header{ | |||
display:none; | |||
} | |||
/* ========================================================= | |||
CONTAINER | |||
========================================================= */ | |||
.container{ | |||
width:min( | |||
calc(100% - 70px), | |||
1120px | |||
); | |||
margin-inline:auto; | |||
} | |||
/* ========================================================= | |||
SECTION | |||
========================================================= */ | |||
.section{ | |||
position:relative; | |||
padding:55px 0; | |||
min-height:auto; | |||
display:flex; | |||
align-items:center; | |||
background:#080808; | |||
} | |||
.section:nth-child(even){ | |||
background:#0d0d0d; | |||
} | |||
/* ========================================================= | |||
SECTION TITLE | |||
========================================================= */ | |||
.section-title{ | |||
width:100%; | |||
text-align:center; | |||
margin-bottom:28px; | |||
} | |||
.section-title small{ | |||
display:block; | |||
color:var(--gold); | |||
font-size:.8rem; | |||
font-weight:800; | |||
margin-bottom:8px; | |||
} | |||
.section-title h2{ | |||
margin:0; | |||
color:#fff; | |||
font-size: | |||
clamp(1.9rem,4vw,2.8rem); | |||
font-weight:900; | |||
line-height:1.4; | |||
} | |||
.section-title p{ | |||
max-width:650px; | |||
margin:12px 0 0; | |||
color:var(--muted); | |||
font-size:.88rem; | |||
} | } | ||
| خط ۱۶۷: | خط ۵۸۰: | ||
========================================================= */ | ========================================================= */ | ||
.hero { | .hero{ | ||
background: | background: | ||
rgba( | radial-gradient( | ||
circle at 70% 25%, | |||
rgba(244,185,66,.09), | |||
transparent 32% | |||
), | ), | ||
#050505; | |||
} | } | ||
.hero- | .hero-inner{ | ||
max-width:900px; | |||
margin:auto; | |||
text-align:center; | |||
} | } | ||
.hero- | .hero-label{ | ||
display: inline- | |||
display:inline-flex; | |||
border: 1px solid rgba( | align-items:center; | ||
gap:8px; | |||
font- | |||
margin-bottom: | padding:8px 17px; | ||
border-radius:50px; | |||
background:var(--gold-light); | |||
border: | |||
1px solid rgba(244,185,66,.15); | |||
color:var(--gold); | |||
font-size:.78rem; | |||
font-weight:800; | |||
margin-bottom:22px; | |||
} | } | ||
.hero | .hero-label i{ | ||
font-size: | |||
font-size:.45rem; | |||
} | } | ||
.hero h1 | .hero h1{ | ||
color: | |||
margin:0; | |||
color:#fff; | |||
font-size: | |||
clamp(2.5rem,7vw,5rem); | |||
line-height:1.25; | |||
font-weight:900; | |||
} | } | ||
.hero | .hero h1 span{ | ||
display:block; | |||
color:var(--gold); | |||
} | } | ||
.hero- | .hero-subtitle{ | ||
margin-top:12px; | |||
color:#eee; | |||
font-size: | |||
clamp(1.05rem,3vw,1.4rem); | |||
font-weight:700; | |||
} | } | ||
. | .hero-description{ | ||
max-width:680px; | |||
margin:18px auto 30px; | |||
color:#999; | |||
font-size: . | |||
font-size:.95rem; | |||
} | } | ||
. | .hero-buttons{ | ||
display:flex; | |||
justify-content:flex-start; | |||
flex-wrap:wrap; | |||
gap:12px; | |||
} | } | ||
.btn- | .btn{ | ||
display:inline-flex; | |||
align-items:center; | |||
justify-content:center; | |||
gap:8px; | |||
min-height:50px; | |||
padding:10px 23px; | |||
border-radius:12px; | |||
font-size:.82rem; | |||
font-weight:800; | |||
transition: | |||
transform .2s ease, | |||
box-shadow .2s ease; | |||
} | } | ||
.btn:hover { | .btn:hover{ | ||
transform: translateY(- | |||
transform:translateY(-3px); | |||
} | |||
.btn-dark{ | |||
background:#fff; | |||
color:#000; | |||
} | |||
.btn-gold{ | |||
background:var(--gold); | |||
color:#000; | |||
box-shadow: | |||
0 10px 30px rgba(244,185,66,.12); | |||
} | |||
.btn-outline{ | |||
border: | |||
1px solid rgba(255,255,255,.15); | |||
color:#fff; | |||
background:#0d0d0d; | |||
} | } | ||
/* ========================================================= | /* ========================================================= | ||
HERO INFO | |||
========================================================= */ | ========================================================= */ | ||
. | .hero-info{ | ||
margin-top:50px; | |||
display:grid; | |||
grid-template-columns: | |||
repeat(5,1fr); | |||
gap:12px; | |||
} | } | ||
. | .hero-info-box{ | ||
padding:18px 10px; | |||
background:#0e0e0e; | |||
border: | |||
1px solid rgba(255,255,255,.08); | |||
border-radius:15px; | |||
} | } | ||
. | .hero-info-box i{ | ||
color:var(--gold); | |||
font-size:1.1rem; | |||
} | } | ||
. | .hero-info-box strong{ | ||
display:block; | |||
color:#fff; | |||
margin-top:4px; | |||
font-size:.9rem; | |||
} | } | ||
. | .hero-info-box span{ | ||
display: block; | |||
font-size: . | display:block; | ||
color:#777; | |||
font-size:.68rem; | |||
} | } | ||
/* ========================================================= | /* ========================================================= | ||
ABOUT | |||
========================================================= */ | ========================================================= */ | ||
. | .about-grid{ | ||
display:grid; | |||
grid-template-columns: | |||
.9fr 1.1fr; | |||
gap:60px; | |||
align-items:center; | |||
} | } | ||
. | .about-image{ | ||
padding:10px; | |||
background:#111; | |||
border: | |||
1px solid rgba(255,255,255,.08); | |||
border-radius:18px; | |||
} | } | ||
. | .about-image img{ | ||
width:100%; | |||
aspect-ratio:4/5; | |||
border-radius: | |||
object-fit:contain; | |||
border-radius:12px; | |||
background:#161616; | |||
} | } | ||
. | .about-content h2{ | ||
margin:0 0 15px; | |||
color:#fff; | |||
font-size: | |||
clamp(1.8rem,4vw,2.5rem); | |||
} | } | ||
. | .about-content p{ | ||
color:#999; | |||
font-size:.9rem; | |||
font-size: | |||
} | } | ||
. | .about-list{ | ||
margin- | margin-top:22px; | ||
} | } | ||
. | .about-list li{ | ||
font-size: . | display:flex; | ||
align-items:flex-start; | |||
gap:10px; | |||
margin-bottom:11px; | |||
color:#ddd; | |||
font-size:.84rem; | |||
font-weight:600; | |||
} | } | ||
. | .about-list i{ | ||
color:var(--gold); | |||
margin-top:6px; | |||
} | } | ||
/* ========================================================= | /* ========================================================= | ||
COUNTERS | |||
========================================================= */ | ========================================================= */ | ||
. | .counters{ | ||
background: var(-- | |||
color: #fff; | background:#000 !important; | ||
} | |||
.counter-grid{ | |||
display:grid; | |||
grid-template-columns: | |||
repeat(6,1fr); | |||
gap:12px; | |||
} | |||
.counter{ | |||
text-align:center; | |||
padding:28px 10px; | |||
border-right: | |||
1px solid rgba(255,255,255,.08); | |||
} | |||
.counter:last-child{ | |||
border-right:0; | |||
} | |||
.counter i{ | |||
color:var(--gold); | |||
font-size:1.35rem; | |||
} | |||
.counter strong{ | |||
display:block; | |||
color:#fff; | |||
font-size:2rem; | |||
} | } | ||
. | .counter span{ | ||
color:#777; | |||
font-size:.72rem; | |||
} | } | ||
. | |||
/* ========================================================= | |||
SKILLS | |||
========================================================= */ | |||
background: | |||
.skills-grid{ | |||
max-width:1050px; | |||
margin:auto; | |||
display:grid; | |||
grid-template-columns: | |||
repeat(2,1fr); | |||
gap:22px 28px; | |||
} | |||
.skill{ | |||
padding:24px; | |||
background:#111; | |||
border: | |||
1px solid rgba(255,255,255,.07); | |||
border-radius:18px; | |||
min-height:230px; | |||
text-align:right; | |||
} | } | ||
. | .skill-image{ | ||
width:100%; | |||
height:135px; | |||
margin-bottom:18px; | |||
overflow:hidden; | |||
border-radius:14px; | |||
background:#181818; | |||
border:1px solid rgba(255,255,255,.06); | |||
} | } | ||
. | .skill-image img{ | ||
width:100%; | |||
height:100%; | |||
object-fit:cover; | |||
} | } | ||
. | .skill-title{ | ||
color: # | |||
font-size: . | display:flex; | ||
margin-bottom: | |||
justify-content:space-between; | |||
color:#eee; | |||
font-size:.83rem; | |||
font-weight:800; | |||
margin-bottom:9px; | |||
} | } | ||
. | .skill-title span:last-child{ | ||
color:var(--gold); | |||
} | } | ||
. | .skill-bar{ | ||
height:7px; | |||
background:#242424; | |||
border-radius:50px; | |||
overflow:hidden; | |||
} | } | ||
. | .skill-bar span{ | ||
display:block; | |||
width:var(--width); | |||
height:100%; | |||
background:var(--gold); | |||
border-radius:inherit; | |||
} | } | ||
/* ========================================================= | /* ========================================================= | ||
CARDS | |||
========================================================= */ | ========================================================= */ | ||
. | .cards-grid{ | ||
width:100%; | |||
display:grid; | |||
grid-template-columns: | |||
repeat(3,1fr); | |||
gap:20px; | |||
} | } | ||
. | .card{ | ||
background:#101010; | |||
border: | |||
1px solid rgba(255,255,255,.08); | |||
border-radius:18px; | |||
padding:28px 24px; | |||
box-shadow: | |||
0 10px 35px rgba(0,0,0,.25); | |||
transition: | |||
transform .2s ease, | |||
border-color .2s ease; | |||
} | } | ||
. | .card:hover{ | ||
transform:translateY(-5px); | |||
border-color: | |||
rgba(244,185,66,.3); | |||
} | } | ||
. | .card-icon{ | ||
font-size: | |||
margin-bottom: | width:55px; | ||
height:55px; | |||
display:grid; | |||
place-items:center; | |||
border-radius:15px; | |||
background:var(--gold-light); | |||
color:var(--gold); | |||
font-size:1.25rem; | |||
margin-bottom:18px; | |||
} | } | ||
. | .card h3{ | ||
color: | |||
font-size: .8rem; | margin:0 0 8px; | ||
color:#fff; | |||
font-size:1.05rem; | |||
} | |||
.card p{ | |||
margin:0; | |||
color:#888; | |||
font-size:.8rem; | |||
} | } | ||
/* ========================================================= | /* ========================================================= | ||
COURSE IMAGE | |||
========================================================= */ | ========================================================= */ | ||
. | .course-card{ | ||
padding:0; | |||
overflow:hidden; | |||
} | } | ||
. | .card-image{ | ||
padding:9px; | |||
background:#080808; | |||
} | } | ||
. | .card-image img{ | ||
width: | width:100%; | ||
aspect-ratio:16/10; | |||
background: # | object-fit:contain; | ||
border-radius: | background:#151515; | ||
border-radius:12px; | |||
} | } | ||
. | .card-content{ | ||
padding:22px; | |||
} | } | ||
. | .card-tag{ | ||
color: var(-- | display:inline-block; | ||
padding:4px 10px; | |||
border-radius:50px; | |||
background:var(--gold-light); | |||
color:var(--gold); | |||
font-size:.66rem; | |||
font-weight:800; | |||
} | } | ||
/* ========================================================= | /* ========================================================= | ||
TIMELINE | |||
========================================================= */ | ========================================================= */ | ||
. | .timeline{ | ||
padding: | |||
max-width:850px; | |||
margin:auto; | |||
} | |||
.timeline-item{ | |||
position:relative; | |||
padding: | |||
0 30px 38px; | |||
border-right: | |||
2px solid #222; | |||
} | |||
.timeline-item:last-child{ | |||
border-right-color:transparent; | |||
} | } | ||
. | .timeline-item::before{ | ||
content:""; | |||
position:absolute; | |||
right:-8px; | |||
border-radius: | top:3px; | ||
width:14px; | |||
box-shadow: 0 | |||
height:14px; | |||
border-radius:50%; | |||
background:var(--gold); | |||
box-shadow: | |||
0 0 0 4px #0d0d0d; | |||
} | } | ||
. | .timeline-year{ | ||
font-size: | |||
color:var(--gold); | |||
font-size:.76rem; | |||
font-weight:800; | |||
} | } | ||
. | .timeline-item h3{ | ||
color: # | |||
font-size: . | margin:5px 0; | ||
color:#fff; | |||
font-size:1.05rem; | |||
} | } | ||
. | .timeline-item p{ | ||
color:#888; | |||
font-size:.81rem; | |||
margin:0; | |||
} | } | ||
/* ========================================================= | /* ========================================================= | ||
TESTIMONIAL | |||
========================================================= */ | ========================================================= */ | ||
. | .testimonial{ | ||
background: # | |||
background:#101010; | |||
} | } | ||
. | .quote{ | ||
color:var(--gold); | |||
font-size:1.8rem; | |||
} | } | ||
. | .testimonial p{ | ||
color:#999; | |||
font-size:.82rem; | |||
} | } | ||
. | .testimonial-person{ | ||
display:flex; | |||
align-items:center; | |||
gap:10px; | |||
margin-top:18px; | |||
} | } | ||
. | .testimonial-avatar{ | ||
width:52px; | |||
height:52px; | |||
flex:0 0 52px; | |||
display:grid; | |||
place-items:center; | |||
border-radius:50%; | |||
background:var(--gold-light); | |||
border:1px solid rgba(244,185,66,.2); | |||
color:var(--gold); | |||
font-size:1.25rem; | |||
} | } | ||
. | .testimonial-person strong{ | ||
color: | display:block; | ||
color:#fff; | |||
font-size:.8rem; | |||
} | } | ||
. | .testimonial-person span{ | ||
display:block; | |||
color:#666; | |||
font-size:.67rem; | |||
} | } | ||
/* ========================================================= | /* ========================================================= | ||
BLOG | |||
========================================================= */ | ========================================================= */ | ||
. | .blog-card{ | ||
padding:0; | |||
overflow:hidden; | |||
} | |||
.blog-card .card-image img{ | |||
aspect-ratio:16/9; | |||
} | |||
.blog-card .card-content{ | |||
padding:20px; | |||
} | } | ||
. | .blog-date{ | ||
color:var(--gold); | |||
font-size:.68rem; | |||
font-weight:800; | |||
} | } | ||
. | .blog-card h3{ | ||
color:#fff; | |||
font-size:1rem; | |||
margin:7px 0; | |||
} | } | ||
. | |||
/* ========================================================= | |||
CTA | |||
========================================================= */ | |||
.cta{ | |||
background:#000 !important; | |||
} | } | ||
. | .cta-inner{ | ||
max-width:750px; | |||
margin:auto; | |||
text-align:center; | |||
} | } | ||
. | .cta h2{ | ||
margin:0 0 10px; | |||
color:#fff; | |||
font-size: | |||
clamp(1.9rem,4vw,2.8rem); | |||
} | } | ||
. | .cta p{ | ||
color: | |||
font-size: | color:#888; | ||
font-size:.88rem; | |||
margin-bottom:22px; | |||
} | } | ||
/* ========================================================= | /* ========================================================= | ||
CONTACT | |||
========================================================= */ | ========================================================= */ | ||
.contact-grid{ | |||
display:grid; | |||
grid-template-columns: | |||
.8fr 1.2fr; | |||
gap:35px; | |||
} | } | ||
. | .contact-list{ | ||
display: grid; | |||
gap: | display:grid; | ||
gap:12px; | |||
} | } | ||
. | .contact-item{ | ||
display:flex; | |||
align-items:center; | |||
gap:14px; | |||
padding:16px; | |||
background:#111; | |||
border: | |||
1px solid rgba(255,255,255,.07); | |||
border-radius:14px; | |||
} | } | ||
. | .contact-icon{ | ||
width:45px; | |||
height:45px; | |||
flex:0 0 45px; | |||
display:grid; | |||
place-items:center; | |||
border-radius:12px; | |||
background:var(--gold-light); | |||
color:var(--gold); | |||
} | } | ||
. | .contact-item small{ | ||
display:block; | |||
color:#666; | |||
font-size:.67rem; | |||
} | } | ||
. | .contact-item strong{ | ||
border | |||
margin- | color:#eee; | ||
padding- | |||
font-size:.8rem; | |||
color: # | |||
font-size: . | } | ||
.contact-form{ | |||
background:#101010; | |||
padding:28px; | |||
border: | |||
1px solid rgba(255,255,255,.08); | |||
border-radius:18px; | |||
} | |||
.form-grid{ | |||
display:grid; | |||
grid-template-columns: | |||
repeat(2,1fr); | |||
gap:15px; | |||
} | |||
.form-group.full{ | |||
grid-column:1/-1; | |||
} | |||
.form-group label{ | |||
display:block; | |||
color:#ddd; | |||
font-size:.74rem; | |||
font-weight:800; | |||
margin-bottom:5px; | |||
} | |||
.form-group input, | |||
.form-group textarea{ | |||
width:100%; | |||
padding:12px 14px; | |||
border: | |||
1px solid rgba(255,255,255,.08); | |||
border-radius:10px; | |||
background:#080808; | |||
color:#fff; | |||
outline:none; | |||
font-size:.78rem; | |||
} | |||
.form-group input::placeholder, | |||
.form-group textarea::placeholder{ | |||
color:#555; | |||
} | |||
.form-group textarea{ | |||
min-height:130px; | |||
resize:vertical; | |||
} | |||
.form-group input:focus, | |||
.form-group textarea:focus{ | |||
border-color:var(--gold); | |||
} | } | ||
/* ========================================================= | /* ========================================================= | ||
FOOTER | |||
========================================================= */ | ========================================================= */ | ||
. | .footer{ | ||
padding:30px 0; | |||
background:#000; | |||
color:#666; | |||
text-align:center; | |||
border-top: | |||
1px solid rgba(255,255,255,.07); | |||
} | } | ||
. | .footer strong{ | ||
color: | |||
color:var(--gold); | |||
} | } | ||
. | .footer p{ | ||
margin:0; | |||
font-size:.72rem; | |||
} | } | ||
| خط ۶۹۵: | خط ۱٬۶۸۱: | ||
========================================================= */ | ========================================================= */ | ||
@media ( | @media(max-width:900px){ | ||
.left-sidebar{ | |||
display:none; | |||
} | } | ||
. | .main-content{ | ||
margin-left:0; | |||
} | |||
.mobile-header{ | |||
position:sticky; | |||
top:0; | |||
z-index:999; | |||
height:62px; | |||
display:flex; | |||
align-items:center; | |||
justify-content:center; | |||
background:#000; | |||
border-bottom: | |||
1px solid rgba(255,255,255,.08); | |||
} | |||
.mobile-header strong{ | |||
color:#fff; | |||
font-size:.88rem; | |||
} | } | ||
. | .container{ | ||
width: | |||
min( | |||
calc(100% - 45px), | |||
720px | |||
); | |||
} | } | ||
. | .section{ | ||
padding:45px 0; | |||
} | } | ||
. | .about-grid{ | ||
grid-template-columns: | |||
grid-template-columns:1fr; | |||
gap:35px; | |||
} | } | ||
. | .about-image{ | ||
max-width:550px; | |||
margin:auto; | |||
} | } | ||
. | .cards-grid{ | ||
grid-template-columns: repeat(2, 1fr); | |||
grid-template-columns: | |||
repeat(2,1fr); | |||
} | } | ||
. | .contact-grid{ | ||
grid-template-columns: | |||
grid-template-columns:1fr; | |||
} | } | ||
} | } | ||
/* ========================================================= | /* ========================================================= | ||
MOBILE | |||
========================================================= */ | ========================================================= */ | ||
@media (min-width: | @media(max-width:600px){ | ||
html{ | |||
scroll-padding-top:65px; | |||
} | |||
.container{ | |||
width: | |||
calc(100% - 28px); | |||
} | |||
.section{ | |||
min-height:auto; | |||
padding:35px 0; | |||
} | |||
.hero{ | |||
padding: | |||
70px 0 50px; | |||
} | |||
.hero h1{ | |||
font-size: | |||
clamp(2.2rem,12vw,3.3rem); | |||
} | |||
.hero-subtitle{ | |||
font-size:1rem; | |||
} | |||
.hero-description{ | |||
font-size:.86rem; | |||
} | |||
.hero-buttons{ | |||
flex-direction:column; | |||
} | |||
.hero-buttons .btn{ | |||
width:100%; | |||
} | |||
.hero-info{ | |||
grid-template-columns: | |||
repeat(2,1fr); | |||
margin-top:35px; | |||
} | } | ||
. | .counter-grid{ | ||
grid-template-columns: | |||
repeat(2,1fr); | |||
} | } | ||
. | .counter{ | ||
border-right:0; | |||
border-bottom: | |||
1px solid rgba(255,255,255,.08); | |||
} | } | ||
. | .counter strong{ | ||
font-size:1.6rem; | |||
} | } | ||
. | .skills-grid{ | ||
grid-template-columns:1fr; | |||
} | } | ||
. | .skill-image{ | ||
height:155px; | |||
} | } | ||
. | .cards-grid{ | ||
grid-template-columns:1fr; | |||
} | } | ||
. | .card{ | ||
padding:22px 18px; | |||
} | |||
.card-image{ | |||
padding:8px; | |||
} | } | ||
. | .card-image img{ | ||
aspect-ratio:16/10; | |||
object-fit:contain; | |||
} | } | ||
. | .timeline-item{ | ||
padding-right:24px; | |||
} | } | ||
. | .form-grid{ | ||
grid-template-columns: | |||
grid-template-columns:1fr; | |||
} | } | ||
. | .form-group.full{ | ||
grid- | |||
grid-column:auto; | |||
} | } | ||
. | .contact-form{ | ||
padding:20px; | |||
} | } | ||
. | .section-title{ | ||
margin-bottom:20px; | |||
} | } | ||
. | .section-title h2{ | ||
font-size:1.7rem; | |||
} | } | ||
. | .section-title p{ | ||
font-size:.8rem; | |||
} | } | ||
. | } | ||
/* ========================================================= | |||
EXTRA SMALL | |||
========================================================= */ | |||
@media(max-width:380px){ | |||
.container{ | |||
width: | |||
calc(100% - 22px); | |||
} | } | ||
. | .hero-info-box{ | ||
padding:14px 7px; | |||
} | } | ||
.hero-info-box strong{ | |||
font-size:.8rem; | |||
} | } | ||
.hero-info-box span{ | |||
font-size:.6rem; | |||
} | |||
} | } | ||
.card-content, | |||
.contact-item > div:last-child, | |||
.form-group label, | |||
.form-group input, | |||
.form-group textarea{ | |||
text-align:center; | |||
} | |||
.footer{ | |||
text-align:center; | |||
} | |||
.skill-image + .skill-title{ | |||
margin-top:0; | |||
} | |||
/* ========================================================= | /* ========================================================= | ||
FINAL ALIGNMENT & SPACING | |||
========================================================= */ | ========================================================= */ | ||
.section > .container{ | |||
width:min(calc(100% - 50px),1180px); | |||
margin-inline:auto; | |||
} | |||
.section-title, | |||
.about-content, | |||
.card, | |||
.skill, | |||
.timeline, | |||
.contact-list, | |||
.contact-form{ | |||
text-align:center; | |||
} | |||
. | .hero-inner, | ||
.hero-info, | |||
.about-grid, | |||
.skills-grid, | |||
.cards-grid, | |||
.timeline, | |||
.contact-grid, | |||
.cta-inner{ | |||
margin-inline:auto; | |||
} | |||
.about-grid{ | |||
max-width:1080px; | |||
} | |||
.cards-grid{ | |||
max-width:1180px; | |||
} | |||
@media(max-width:900px){ | |||
.section > .container{ | |||
width:min(calc(100% - 40px),720px); | |||
} | |||
.counter-grid{ | |||
grid-template-columns:repeat(3,1fr); | |||
} | |||
} | |||
@media(max-width:600px){ | |||
.section > .container{ | |||
width:calc(100% - 28px); | |||
} | } | ||
. | .hero-buttons{ | ||
justify-content:stretch; | |||
} | } | ||
. | .cards-grid{ | ||
gap:15px; | |||
} | } | ||
} | |||
/* ========================================================= | |||
REDUCED MOTION | |||
========================================================= */ | |||
@media(prefers-reduced-motion:reduce){ | |||
*, | |||
*::before, | |||
*::after{ | |||
scroll-behavior:auto !important; | |||
transition:none !important; | |||
animation:none !important; | |||
} | |||
} | } | ||
</style> | </style> | ||
</head> | </head> | ||
| خط ۸۴۵: | خط ۲٬۰۹۰: | ||
<body> | <body> | ||
<div class="page"> | |||
<!-- ===================================================== | |||
LEFT ICON MENU | |||
===================================================== --> | |||
<aside class="left-sidebar"> | |||
<div class="sidebar-logo"> | |||
<div class="logo-circle"> | |||
<i class="fa-solid fa-user"></i> | |||
</div> | |||
<h2> | |||
محمدرضا شایق | |||
</h2> | |||
<span> | |||
مدرس خودشناسی | |||
</span> | |||
</div> | |||
<nav> | |||
<ul class="sidebar-menu"> | |||
<li> | |||
<a href="#home" | |||
class="active" | |||
data-title="خانه"> | |||
<i class="fa-solid fa-house"></i> | |||
</a> | |||
</li> | |||
<li> | |||
<a href="#about" | |||
data-title="درباره من"> | |||
<i class="fa-solid fa-user"></i> | |||
</a> | |||
</li> | |||
<li> | |||
<a href="#skills" | |||
data-title="تخصصها"> | |||
<i class="fa-solid fa-chart-simple"></i> | |||
</a> | |||
</li> | |||
<li> | |||
< | <a href="#services" | ||
data-title="آموزشها"> | |||
< | <i class="fa-solid fa-layer-group"></i> | ||
</a> | |||
</li> | |||
< | <li> | ||
<a href="#courses" | |||
data-title="دورهها"> | |||
<i class="fa-solid fa-graduation-cap"></i> | |||
</a> | |||
</li> | |||
<a href=" | |||
<li> | |||
</ | |||
<a href="#experience" | |||
data-title="سوابق"> | |||
<i class="fa-solid fa-briefcase"></i> | |||
</a> | |||
</li> | |||
<li> | |||
<a href="#testimonials" | |||
data-title="نظرات"> | |||
<i class="fa-solid fa-comments"></i> | |||
</a> | |||
</li> | |||
<li> | |||
<a href="#blog" | |||
data-title="مقالات"> | |||
<i class="fa-solid fa-book-open"></i> | |||
</a> | |||
</li> | |||
<li> | |||
<a href="#contact" | |||
data-title="ارتباط با من"> | |||
<i class="fa-solid fa-envelope"></i> | |||
</a> | |||
</li> | |||
</ul> | |||
</nav> | |||
<div class="sidebar-bottom"> | |||
<div class="sidebar-social"> | |||
<a href="#" title="اینستاگرام"> | |||
<i class="fa-brands fa-instagram"></i> | |||
</a> | |||
<a href="#" title="تلگرام"> | |||
<i class="fa-brands fa-telegram"></i> | |||
</a> | |||
<a href="#" title="واتساپ"> | |||
<i class="fa-brands fa-whatsapp"></i> | |||
</a> | |||
</div> | |||
</div> | </div> | ||
</aside> | |||
<!-- ===================================================== | |||
MOBILE HEADER | |||
===================================================== --> | |||
<header class="mobile-header "> | |||
<strong> | |||
محمدرضا شایق | مدرس خودشناسی | |||
</strong> | |||
</header> | </header> | ||
<!-- | <!-- ===================================================== | ||
MAIN | |||
====================================================== --> | ===================================================== --> | ||
<main class="main-content full-width-page"> | |||
< | <!-- ===================================================== | ||
HOME | |||
===================================================== --> | |||
<section class="hero"> | <section class="section hero" | ||
id="home"> | |||
<div class="container"> | <div class="container"> | ||
<div class="hero- | <div class="hero-inner"> | ||
<div class="hero-label"> | |||
<i class="fa-solid fa-circle"></i> | |||
مدرس خودشناسی و توسعه فردی | |||
</div> | |||
<h1> | <h1> | ||
< | محمدرضا | ||
<span> | |||
شایق | |||
</span> | |||
</h1> | </h1> | ||
<p> | |||
<div class="hero-subtitle"> | |||
مدرس خودشناسی و آگاهی فردی | |||
</div> | |||
<p class="hero-description"> | |||
خودشناسی میتواند نقطه شروع یک تغییر واقعی | |||
در زندگی باشد؛ مسیری برای شناخت بهتر خود، | |||
توانمندیها، احساسات و انتخابهای آگاهانهتر. | |||
</p> | </p> | ||
<div class="hero-buttons"> | <div class="hero-buttons"> | ||
<a href=" | <a href="#about" | ||
class="btn btn- | class="btn btn-gold"> | ||
<i class="fa-solid fa-user"></i> | |||
درباره من | |||
</a> | </a> | ||
<a href="# | |||
class="btn btn- | <a href="#courses" | ||
مشاهده | class="btn btn-outline"> | ||
<i class="fa-solid fa-graduation-cap"></i> | |||
مشاهده دورهها | |||
</a> | </a> | ||
</div> | |||
<div class="hero-info"> | |||
<div class="hero-info-box"> | |||
<i class="fa-solid fa-brain"></i> | |||
<strong> | |||
خودشناسی | |||
</strong> | |||
<span> | |||
شناخت بهتر خود | |||
</span> | |||
</div> | |||
<div class="hero-info-box"> | |||
<i class="fa-solid fa-seedling"></i> | |||
<strong> | |||
رشد فردی | |||
</strong> | |||
<span> | |||
مسیر رشد | |||
</span> | |||
</div> | |||
<div class="hero-info-box"> | |||
<i class="fa-solid fa-lightbulb"></i> | |||
<strong> | |||
آگاهی | |||
</strong> | |||
<span> | |||
انتخاب آگاهانه | |||
</span> | |||
</div> | |||
<div class="hero-info-box"> | |||
<i class="fa-solid fa-heart"></i> | |||
<strong> | |||
آرامش | |||
</strong> | |||
<span> | |||
ارتباط با خود | |||
</span> | |||
</div> | |||
<div class="hero-info-box"> | |||
<i class="fa-solid fa-bullseye"></i> | |||
<strong> | |||
تمرکز | |||
</strong> | |||
<span> | |||
هدفمندی بیشتر | |||
</span> | |||
</div> | |||
</div> | </div> | ||
| خط ۹۳۱: | خط ۲٬۴۴۵: | ||
<!-- | <!-- ===================================================== | ||
ABOUT | |||
===================================================== --> | |||
<section class=" | <section class="section" | ||
id="about"> | |||
<div class="container"> | <div class="container"> | ||
<div class=" | <div class="section-title"> | ||
<small> | |||
درباره من | |||
</small> | |||
<h2> | |||
شناخت خود، آغاز مسیر تغییر | |||
</h2> | |||
</div> | |||
<div class="about-grid"> | |||
<div class="about-image"> | |||
<img | |||
src="https://dl.faraghaib.ir/m/260021-01/260021-01-16.png" | |||
alt="محمدرضا شایق مدرس خودشناسی" | |||
loading="lazy"> | |||
</div> | </div> | ||
<div class=" | |||
< | <div class="about-content" style="text-align:right;"> | ||
<h2> | |||
همراه شما در مسیر خودشناسی | |||
</h2> | |||
<p> | |||
من محمدرضا شایق، مدرس خودشناسی هستم | |||
و تلاش میکنم مفاهیم خودشناسی و رشد فردی | |||
را به شکلی ساده، کاربردی و قابل استفاده | |||
در زندگی روزمره آموزش دهم. | |||
</p> | |||
<p> | |||
هدف این آموزشها کمک به شناخت بهتر افکار، | |||
احساسات، توانمندیها، ارزشها و الگوهای | |||
رفتاری است تا هر فرد بتواند مسیر زندگی خود | |||
را آگاهانهتر انتخاب کند. | |||
</p> | |||
<ul class="about-list"> | |||
<li> | |||
<i class="fa-solid fa-check"></i> | |||
شناخت بهتر ویژگیها و توانمندیهای فردی | |||
</li> | |||
<li> | |||
<i class="fa-solid fa-check"></i> | |||
افزایش آگاهی نسبت به افکار و احساسات | |||
</li> | |||
<li> | |||
<i class="fa-solid fa-check"></i> | |||
شناخت موانع رشد شخصی | |||
</li> | |||
<li> | |||
<i class="fa-solid fa-check"></i> | |||
حرکت آگاهانهتر در مسیر زندگی | |||
</li> | |||
</ul> | |||
</div> | </div> | ||
<div class=" | </div> | ||
<div class=" | |||
<strong> | </div> | ||
<span> | |||
</section> | |||
<!-- ===================================================== | |||
COUNTERS | |||
===================================================== --> | |||
<section class="section counters"> | |||
<div class="container"> | |||
<div class="counter-grid"> | |||
<div class="counter"> | |||
<i class="fa-solid fa-users"></i> | |||
<strong> | |||
500+ | |||
</strong> | |||
<span> | |||
شرکتکننده | |||
</span> | |||
</div> | |||
<div class="counter"> | |||
<i class="fa-solid fa-book"></i> | |||
<strong> | |||
20+ | |||
</strong> | |||
<span> | |||
دوره و کارگاه | |||
</span> | |||
</div> | </div> | ||
<div class=" | |||
<div class=" | <div class="counter"> | ||
<strong> | |||
<span> | <i class="fa-solid fa-clock"></i> | ||
<strong> | |||
1000+ | |||
</strong> | |||
<span> | |||
ساعت آموزش | |||
</span> | |||
</div> | |||
<div class="counter"> | |||
<i class="fa-solid fa-star"></i> | |||
<strong> | |||
95% | |||
</strong> | |||
<span> | |||
رضایت | |||
</span> | |||
</div> | |||
<div class="counter"> | |||
<i class="fa-solid fa-chalkboard-user"></i> | |||
<strong> | |||
50+ | |||
</strong> | |||
<span> | |||
کارگاه آموزشی | |||
</span> | |||
</div> | |||
<div class="counter"> | |||
<i class="fa-solid fa-award"></i> | |||
<strong> | |||
10+ | |||
</strong> | |||
<span> | |||
سال تجربه | |||
</span> | |||
</div> | </div> | ||
</div> | </div> | ||
| خط ۹۷۳: | خط ۲٬۶۴۴: | ||
<!-- | <!-- ===================================================== | ||
SKILLS | |||
===================================================== --> | |||
<section class=" | <section class="section" | ||
id=" | id="skills"> | ||
<div class="container"> | <div class="container"> | ||
| خط ۹۸۵: | خط ۲٬۶۵۵: | ||
<div class="section-title"> | <div class="section-title"> | ||
< | <small> | ||
تخصصها | |||
</small> | |||
<h2 | <h2> | ||
حوزههای تخصصی | |||
</h2> | </h2> | ||
</div> | |||
< | <div class="skills-grid"> | ||
<div class="skill"> | |||
<div class="skill-image"> | |||
<img src="https://dl.faraghaib.ir/m/260021-01/260021-01-17.png" | |||
alt="تصویر حوزه تخصصی خودشناسی" | |||
loading="lazy"> | |||
</div> | |||
<div class=" | <div class="skill-title"> | ||
<span> | |||
خودشناسی | |||
</span> | |||
<span> | |||
95% | |||
</span> | |||
</ | |||
</div> | |||
<div class="skill-bar"> | |||
<span style="--width:95%"></span> | |||
</div> | |||
</div> | |||
<div class="skill"> | |||
< | <div class="skill-image"> | ||
<img src="https://dl.faraghaib.ir/m/260021-01/260021-01-18.png" | |||
alt="تصویر حوزه تخصصی خودشناسی" | |||
loading="lazy"> | |||
</div> | |||
< | <div class="skill-title"> | ||
<span> | |||
توسعه فردی | |||
</span> | |||
<span> | |||
90% | |||
</span> | |||
</div> | |||
<div class=" | <div class="skill-bar"> | ||
<span style="--width:90%"></span> | |||
</div> | |||
</ | |||
</ | </div> | ||
< | <div class="skill"> | ||
<div class=" | <div class="skill-image"> | ||
<img src="https://dl.faraghaib.ir/m/260021-01/260021-01-19.png" | |||
alt="تصویر حوزه تخصصی خودشناسی" | |||
loading="lazy"> | |||
</div> | |||
< | <div class="skill-title"> | ||
<span> | |||
آموزش و کارگاه | |||
</span> | |||
<span> | |||
92% | |||
</span> | |||
</div> | |||
<div class="skill-bar"> | |||
</ | <span style="--width:92%"></span> | ||
</div> | |||
< | </div> | ||
<div class="skill"> | |||
<div class="skill-image"> | |||
<img src="https://dl.faraghaib.ir/m/260021-01/260021-01-20.png" | |||
alt="تصویر حوزه تخصصی خودشناسی" | |||
loading="lazy"> | |||
</div> | |||
<div class="skill-title"> | |||
<span> | |||
مهارتهای فردی | |||
</span> | |||
<span> | |||
88% | |||
</span> | |||
</div> | |||
<div class="skill-bar"> | |||
<span style="--width:88%"></span> | |||
</div> | |||
</div> | |||
</div> | </div> | ||
| خط ۱٬۱۱۶: | خط ۲٬۷۹۲: | ||
<!-- | <!-- ===================================================== | ||
SERVICES | |||
===================================================== --> | |||
<section class=" | <section class="section" | ||
id=" | id="services"> | ||
<div class="container"> | <div class="container"> | ||
| خط ۱٬۱۲۸: | خط ۲٬۸۰۳: | ||
<div class="section-title"> | <div class="section-title"> | ||
< | <small> | ||
آموزشها | |||
</small> | |||
<h2 | <h2> | ||
در چه زمینههایی آموزش میدهم؟ | |||
</h2> | </h2> | ||
<p> | |||
آموزشهایی برای شناخت بهتر خود و ساختن | |||
نگاه آگاهانهتر به زندگی. | |||
</p> | |||
</div> | </div> | ||
<div class=" | <div class="cards-grid"> | ||
<article class="card"> | |||
<div class="card-icon"> | |||
<i class="fa-solid fa-brain"></i> | |||
</div> | |||
<h3> | |||
خودشناسی | |||
</h3> | |||
<article class=" | <p> | ||
شناخت ویژگیها، افکار، احساسات، | |||
ارزشها و الگوهای رفتاری. | |||
</p> | |||
</article> | |||
<article class="card"> | |||
<div class="card-icon"> | |||
<i class="fa-solid fa-seedling"></i> | |||
</div> | |||
<h3> | <h3> | ||
رشد فردی | |||
</h3> | </h3> | ||
<p> | <p> | ||
پیدا کردن موانع رشد و ایجاد تغییرات | |||
مثبت و پایدار در زندگی. | |||
</p> | </p> | ||
| خط ۱٬۱۵۳: | خط ۲٬۸۵۸: | ||
<article class=" | <article class="card"> | ||
<div class="card-icon"> | |||
<i class="fa-solid fa-compass"></i> | |||
</div> | |||
<h3> | <h3> | ||
مسیر زندگی | |||
</h3> | </h3> | ||
<p> | <p> | ||
شناخت علایق، ارزشها و توانمندیها | |||
برای انتخاب مسیر مناسبتر. | |||
</p> | </p> | ||
| خط ۱٬۱۶۷: | خط ۲٬۸۷۶: | ||
<article class=" | <article class="card"> | ||
<div class="card-icon"> | |||
<i class="fa-solid fa-lightbulb"></i> | |||
</div> | |||
<h3> | <h3> | ||
آگاهی فردی | |||
</h3> | </h3> | ||
<p> | <p> | ||
افزایش شناخت نسبت به انتخابها، | |||
رفتارها و الگوهای ذهنی. | |||
</p> | </p> | ||
| خط ۱٬۱۸۱: | خط ۲٬۸۹۴: | ||
<article class=" | <article class="card"> | ||
<div class="card-icon"> | |||
<i class="fa-solid fa-comments"></i> | |||
</div> | |||
<h3> | <h3> | ||
کارگاه آموزشی | |||
</h3> | </h3> | ||
<p> | <p> | ||
برگزاری دورهها و کارگاههای آموزشی | |||
در زمینه خودشناسی و توسعه فردی. | |||
</p> | </p> | ||
</article> | </article> | ||
<article class="card"> | |||
<div class="card-icon"> | |||
<i class="fa-solid fa-heart"></i> | |||
</div> | |||
<h3> | |||
ارتباط با خود | |||
</h3> | |||
<p> | |||
ایجاد رابطهای آگاهانهتر با خود، | |||
نیازها و خواستههای شخصی. | |||
</p> | |||
</article> | |||
</div> | </div> | ||
| خط ۱٬۲۰۱: | خط ۲٬۹۳۷: | ||
<!-- | <!-- ===================================================== | ||
COURSES | |||
===================================================== --> | |||
<section | <section class="section" | ||
id="courses"> | |||
<div class="container"> | <div class="container"> | ||
| خط ۱٬۲۱۱: | خط ۲٬۹۴۸: | ||
<div class="section-title"> | <div class="section-title"> | ||
< | <small> | ||
دورهها | |||
</small> | |||
<h2 | <h2> | ||
دورههای آموزشی | |||
</h2> | </h2> | ||
| خط ۱٬۲۲۰: | خط ۲٬۹۵۹: | ||
<div class=" | <div class="cards-grid"> | ||
<div class=" | <article class="card course-card"> | ||
<div class="card-image"> | |||
<img | |||
src="https://dl.faraghaib.ir/m/260021-01/260021-01-04.jpg" | |||
alt="دوره خودشناسی" | |||
loading="lazy"> | |||
</div> | |||
<div class="card-content"> | |||
<span class="card-tag"> | |||
خودشناسی | |||
</span> | |||
<h3> | |||
شروع مسیر خودشناسی | |||
</h3> | |||
<p> | <p> | ||
آشنایی با مفاهیم پایه خودشناسی | |||
و شناخت بهتر خود. | |||
</p> | </p> | ||
</div> | |||
</article> | |||
<article class="card course-card"> | |||
<div class="card-image"> | |||
<img | |||
src="https://dl.faraghaib.ir/m/260021-01/260021-01-05.jpg" | |||
alt="دوره توسعه فردی" | |||
loading="lazy"> | |||
</div> | </div> | ||
</div> | <div class="card-content"> | ||
<span class="card-tag"> | |||
توسعه فردی | |||
</span> | |||
<h3> | |||
مسیر رشد فردی | |||
</h3> | |||
<p> | |||
شناخت موانع رشد و ایجاد مسیر | |||
عملی برای پیشرفت شخصی. | |||
</p> | |||
</div> | |||
</article> | |||
<article class="card course-card"> | |||
<div class="card-image"> | |||
<img | |||
src="https://dl.faraghaib.ir/m/260021-01/260021-01-06.jpg" | |||
alt="کارگاه خودشناسی" | |||
loading="lazy"> | |||
</div> | |||
<div class="card-content"> | |||
<span class="card-tag"> | |||
کارگاه | |||
</span> | |||
<h3> | |||
آگاهی و انتخاب | |||
</h3> | |||
<p> | |||
بررسی الگوهای ذهنی و رفتاری | |||
برای انتخابهای آگاهانهتر. | |||
</p> | |||
</div> | |||
</article> | |||
<article class="card course-card"> | |||
<div class="card-image"> | |||
<img | |||
src="https://dl.faraghaib.ir/m/260021-01/260021-01-07.jpg" | |||
alt="دوره مهارتهای فردی" | |||
loading="lazy"> | |||
</div> | |||
<div class="card-content"> | |||
<span class="card-tag">مهارت فردی</span> | |||
<h3>تقویت مهارتهای فردی</h3> | |||
<p> | <p> | ||
تمرین مهارتهای کاربردی برای | |||
ارتباط بهتر با خود و دیگران. | |||
</p> | </p> | ||
</div> | </div> | ||
</ | </article> | ||
<article class="card course-card"> | |||
<div class="card-image"> | |||
<img | |||
src="https://dl.faraghaib.ir/m/260021-01/260021-01-08.jpg" | |||
alt="دوره آگاهی فردی" | |||
loading="lazy"> | |||
</div> | |||
<div class="card-content"> | |||
<span class="card-tag">آگاهی</span> | |||
<h3>افزایش آگاهی فردی</h3> | |||
<p> | <p> | ||
شناخت الگوهای ذهنی و ایجاد | |||
انتخابهای آگاهانهتر در زندگی. | |||
</p> | </p> | ||
</div> | </div> | ||
</ | </article> | ||
<article class="card course-card"> | |||
<div class="card-image"> | |||
<img | |||
src="https://dl.faraghaib.ir/m/260021-01/260021-01-09.jpg" | |||
alt="کارگاه رشد فردی" | |||
loading="lazy"> | |||
</div> | |||
<div class="card-content"> | |||
<span class="card-tag">رشد فردی</span> | |||
<h3>کارگاه مسیر رشد</h3> | |||
<p> | <p> | ||
بررسی موانع رشد و ساختن مسیر | |||
عملی برای پیشرفت شخصی. | |||
</p> | </p> | ||
</div> | </div> | ||
</article> | |||
</div> | |||
</div> | |||
</section> | |||
<!-- ===================================================== | |||
EXPERIENCE | |||
===================================================== --> | |||
<section class="section" | |||
id="experience"> | |||
<div class="container"> | |||
<div class="section-title"> | |||
<small> | |||
سوابق | |||
</small> | |||
<h2> | |||
مسیر حرفهای | |||
</h2> | |||
</div> | |||
<div class="timeline"> | |||
<div class="timeline-item"> | |||
<span class="timeline-year"> | |||
۱۴۰۲ — اکنون | |||
</span> | |||
<h3> | |||
مدرس خودشناسی و توسعه فردی | |||
</h3> | |||
<p> | |||
برگزاری دورهها و کارگاههای آموزشی | |||
در زمینه خودشناسی و رشد فردی. | |||
</p> | |||
</div> | </div> | ||
<div class="timeline-item"> | |||
<span class="timeline-year"> | |||
۱۳۹۹ — ۱۴۰۲ | |||
</span> | |||
<h3> | |||
مدرس و برگزارکننده کارگاه | |||
</h3> | |||
<p> | |||
طراحی و اجرای برنامههای آموزشی | |||
با تمرکز بر آگاهی و مهارتهای فردی. | |||
</p> | |||
</div> | |||
<div class="timeline-item"> | |||
<span class="timeline-year"> | |||
۱۳۹۷ — ۱۳۹۹ | |||
</span> | |||
<h3> | |||
آغاز فعالیت آموزشی | |||
</h3> | |||
<p> | |||
آغاز فعالیت تخصصی در زمینه آموزش، | |||
مطالعه و توسعه فردی. | |||
</p> | |||
</div> | |||
</div> | </div> | ||
| خط ۱٬۲۸۴: | خط ۳٬۲۱۵: | ||
<!-- | <!-- ===================================================== | ||
TESTIMONIALS | |||
===================================================== --> | |||
<section class=" | <section class="section" | ||
id="testimonials"> | |||
<div class="container"> | <div class="container"> | ||
<div class=" | <div class="section-title"> | ||
<small> | |||
نظرات | |||
</small> | |||
<h2> | <h2> | ||
تجربه همراهان | |||
</h2> | </h2> | ||
<p> | </div> | ||
<div class="cards-grid"> | |||
<article class="card testimonial"> | |||
<div class="quote"> | |||
<i class="fa-solid fa-quote-right"></i> | |||
</div> | |||
<p> | |||
شرکت در دوره باعث شد نگاه متفاوتی | |||
نسبت به خودم و تصمیمهایم پیدا کنم. | |||
</p> | |||
<div class="testimonial-person"> | |||
<div class="testimonial-avatar" aria-label="کارکتر خانم"> | |||
<i class="fa-solid fa-person-dress"></i> | |||
</div> | |||
<div> | |||
<strong> | |||
سارا احمدی | |||
</strong> | |||
<span> | |||
شرکتکننده دوره | |||
</span> | |||
</div> | |||
</div> | |||
</article> | |||
<article class="card testimonial"> | |||
<div class="quote"> | |||
<i class="fa-solid fa-quote-right"></i> | |||
</div> | |||
<p> | |||
محتوای دوره بسیار کاربردی بود و کمک کرد | |||
نقاط قوت خودم را بهتر بشناسم. | |||
</p> | |||
<div class="testimonial-person"> | |||
<div class="testimonial-avatar" aria-label="کارکتر آقا"> | |||
<i class="fa-solid fa-person"></i> | |||
</div> | |||
<div> | |||
<strong> | |||
علی رضایی | |||
</strong> | |||
<span> | |||
شرکتکننده کارگاه | |||
</span> | |||
</div> | |||
</div> | |||
</article> | |||
<article class="card testimonial"> | |||
<div class="quote"> | |||
<i class="fa-solid fa-quote-right"></i> | |||
</div> | |||
<p> | |||
فضای آموزشی خوب و محتوای دوره باعث شد | |||
بعضی از الگوهای رفتاری خودم را بهتر ببینم. | |||
</p> | |||
<div class="testimonial-person"> | |||
<div class="testimonial-avatar" aria-label="کارکتر خانم"> | |||
<i class="fa-solid fa-person-dress"></i> | |||
</div> | |||
<div> | |||
<strong> | |||
مریم کریمی | |||
</strong> | |||
<span> | |||
شرکتکننده دوره | |||
</span> | |||
</div> | |||
</div> | |||
</ | |||
</article> | |||
</div> | </div> | ||
| خط ۱٬۳۲۵: | خط ۳٬۳۴۹: | ||
<!-- | <!-- ===================================================== | ||
BLOG | BLOG | ||
===================================================== --> | |||
<section class=" | <section class="section" | ||
id="blog | id="blog"> | ||
<div class="container"> | <div class="container"> | ||
| خط ۱٬۳۳۷: | خط ۳٬۳۶۰: | ||
<div class="section-title"> | <div class="section-title"> | ||
< | <small> | ||
مجله خودشناسی | |||
</small> | |||
<h2 | <h2> | ||
مقالات و | مقالات و مطالب آموزشی | ||
</h2> | </h2> | ||
| خط ۱٬۳۴۶: | خط ۳٬۳۷۱: | ||
<div class=" | <div class="cards-grid"> | ||
<article class="blog-card"> | <article class="card blog-card"> | ||
<div class="card-image"> | |||
<img | |||
src="https://dl.faraghaib.ir/m/260021-01/260021-01-02.jpg" | |||
alt="خودشناسی چیست"> | |||
</div> | </div> | ||
<div class=" | <div class="card-content"> | ||
<span> | <span class="blog-date"> | ||
خودشناسی | |||
</span> | |||
<h3> | <h3> | ||
خودشناسی چیست؟ | |||
</h3> | </h3> | ||
<p> | <p> | ||
نگاهی ساده به مفهوم خودشناسی | |||
و اهمیت آن در زندگی. | |||
</p> | </p> | ||
| خط ۱٬۳۷۴: | خط ۳٬۴۰۴: | ||
<article class="blog-card"> | <article class="card blog-card"> | ||
<div class="card-image"> | |||
<img | |||
src="https://dl.faraghaib.ir/m/260021-01/260021-01-10.jpg" | |||
alt="رشد فردی"> | |||
</div> | </div> | ||
<div class=" | <div class="card-content"> | ||
<span> | <span class="blog-date"> | ||
رشد فردی | |||
</span> | |||
<h3> | <h3> | ||
مسیر رشد فردی را چگونه پیدا کنیم؟ | |||
</h3> | </h3> | ||
<p> | <p> | ||
چند نکته برای شناخت بهتر اهداف | |||
و | و مسیر شخصی. | ||
</p> | </p> | ||
| خط ۱٬۳۹۹: | خط ۳٬۴۳۴: | ||
<article class="blog-card"> | <article class="card blog-card"> | ||
<div class="card-image"> | |||
<img | |||
src="https://dl.faraghaib.ir/m/260021-01/260021-01-01.jpg" | |||
alt="انتخاب آگاهانه"> | |||
</div> | </div> | ||
<div class=" | <div class="card-content"> | ||
<span> | <span class="blog-date"> | ||
آگاهی | |||
</span> | |||
<h3> | <h3> | ||
انتخاب آگاهانه چگونه شکل میگیرد؟ | |||
</h3> | </h3> | ||
<p> | <p> | ||
نقش آگاهی در تصمیمهای مهم | |||
و انتخابهای زندگی. | |||
</p> | </p> | ||
| خط ۱٬۴۲۲: | خط ۳٬۴۶۲: | ||
</article> | </article> | ||
</div> | </div> | ||
| خط ۱٬۴۳۰: | خط ۳٬۴۷۱: | ||
<!-- ====================================================== | <!-- ===================================================== | ||
CTA | |||
===================================================== --> | |||
<section class="section cta"> | |||
<div class="container"> | |||
<div class="cta-inner"> | |||
<h2> | |||
مسیر شناخت خود را شروع کنید | |||
</h2> | |||
<p> | |||
اگر میخواهید خودتان را بهتر بشناسید | |||
و آگاهانهتر مسیر زندگیتان را انتخاب کنید، | |||
با من در ارتباط باشید. | |||
</p> | |||
<a href="#contact" | |||
class="btn btn-gold"> | |||
<i class="fa-solid fa-arrow-left"></i> | |||
ارتباط با من | |||
</a> | |||
</div> | |||
</div> | |||
</section> | |||
<!-- ===================================================== | |||
CONTACT | CONTACT | ||
===================================================== --> | |||
<section class=" | <section class="section" | ||
id="contact | id="contact"> | ||
<div class="container"> | <div class="container"> | ||
| خط ۱٬۴۴۲: | خط ۳٬۵۱۸: | ||
<div class="section-title"> | <div class="section-title"> | ||
< | <small> | ||
ارتباط | |||
</small> | |||
<h2 | <h2> | ||
با من در ارتباط باشید | |||
</h2> | </h2> | ||
| خط ۱٬۴۵۴: | خط ۳٬۵۳۲: | ||
<div class="contact- | <div class="contact-list"> | ||
<div class="contact-item"> | <div class="contact-item"> | ||
< | <div class="contact-icon"> | ||
<i class="fa-solid fa-phone"></i> | |||
</div> | |||
< | <div> | ||
</ | <small> | ||
شماره تماس | |||
</small> | |||
<strong> | |||
۰۹۱۲۱۲۳۴۵۶۷۸ | |||
</strong> | |||
</div> | |||
</div> | </div> | ||
| خط ۱٬۴۷۳: | خط ۳٬۵۵۸: | ||
<div class="contact-item"> | <div class="contact-item"> | ||
< | <div class="contact-icon"> | ||
<i class="fa-regular fa-envelope"></i> | |||
</div> | |||
<div> | |||
<small> | |||
ایمیل | |||
</small> | |||
<strong> | |||
info@example.ir | |||
</ | </strong> | ||
</div> | |||
</div> | </div> | ||
| خط ۱٬۴۸۴: | خط ۳٬۵۷۹: | ||
<div class="contact-item"> | <div class="contact-item"> | ||
< | <div class="contact-icon"> | ||
<i class="fa-brands fa-instagram"></i> | |||
</div> | |||
<div> | |||
<small> | |||
اینستاگرام | |||
</small> | |||
<strong> | |||
@yourusername | |||
</strong> | |||
</div> | |||
</ | |||
</div> | </div> | ||
</div> | </div> | ||
<div class=" | <form class="contact-form"> | ||
<div class="form-grid"> | |||
<div class="form-group"> | |||
<label> | |||
نام و نام خانوادگی | |||
</label> | |||
<input | |||
type="text" | |||
placeholder="نام شما"> | |||
</div> | |||
<div class="form-group"> | |||
<label> | |||
شماره تماس | |||
</label> | |||
<input | |||
type="tel" | |||
placeholder="۰۹xxxxxxxxx"> | |||
</div> | |||
<div class="form-group full"> | |||
<label> | |||
موضوع | |||
</label> | |||
<input | |||
type="text" | |||
placeholder="موضوع پیام"> | |||
</div> | |||
<div class="form-group full"> | |||
<label> | |||
پیام | |||
</label> | |||
<textarea | |||
placeholder="پیام خود را بنویسید..."></textarea> | |||
</div> | |||
<div class="form-group full"> | |||
<button | |||
type="submit" | |||
class="btn btn-gold"> | |||
<i class="fa-regular fa-paper-plane"></i> | |||
ارسال پیام | |||
</button> | |||
</div> | |||
</div> | </div> | ||
</form> | |||
</div> | </div> | ||
| خط ۱٬۵۲۴: | خط ۳٬۶۸۲: | ||
</section> | </section> | ||
<!-- ===================================================== | |||
FOOTER | |||
===================================================== --> | |||
<footer class="footer"> | |||
<div class="container"> | |||
<p> | |||
© تمامی حقوق برای | |||
<strong> | |||
محمدرضا شایق | |||
</strong> | |||
محفوظ است. | |||
</p> | |||
</div> | |||
</footer> | |||
</main> | </main> | ||
</div> | |||
<!-- ===================================================== | |||
SECTION LOCK SYSTEM | |||
===================================================== --> | |||
<script> | |||
document.addEventListener( | |||
"DOMContentLoaded", | |||
function(){ | |||
const menuLinks = | |||
document.querySelectorAll( | |||
".sidebar-menu a" | |||
); | |||
const sections = | |||
document.querySelectorAll( | |||
"main section[id]" | |||
); | |||
let lockedSection = null; | |||
let isHome = true; | |||
/* ------------------------------------------------- | |||
CLICK MENU | |||
------------------------------------------------- */ | |||
menuLinks.forEach( | |||
link => { | |||
link.addEventListener( | |||
"click", | |||
function(event){ | |||
event.preventDefault(); | |||
const targetId = | |||
this.getAttribute("href"); | |||
const target = | |||
document.querySelector( | |||
targetId | |||
); | |||
if(!target) return; | |||
/* Active */ | |||
menuLinks.forEach( | |||
item => { | |||
item.classList.remove( | |||
"active" | |||
); | |||
} | |||
); | |||
this.classList.add( | |||
"active" | |||
); | |||
/* HOME */ | |||
if(targetId === "#home"){ | |||
lockedSection = null; | |||
isHome = true; | |||
document.body.classList.remove( | |||
"section-locked" | |||
); | |||
window.scrollTo({ | |||
top:0, | |||
behavior:"smooth" | |||
}); | |||
return; | |||
} | |||
/* OTHER SECTIONS */ | |||
isHome = false; | |||
lockedSection = target; | |||
document.body.classList.add( | |||
"section-locked" | |||
); | |||
target.scrollIntoView({ | |||
behavior:"smooth", | |||
block:"start" | |||
}); | |||
} | |||
); | |||
} | |||
); | |||
/* ------------------------------------------------- | |||
BLOCK MOUSE WHEEL | |||
------------------------------------------------- */ | |||
window.addEventListener( | |||
"wheel", | |||
function(event){ | |||
if( | |||
!isHome && | |||
lockedSection | |||
){ | |||
event.preventDefault(); | |||
} | |||
}, | |||
{ | |||
passive:false | |||
} | |||
); | |||
/* ------------------------------------------------- | |||
BLOCK TOUCH SCROLL | |||
------------------------------------------------- */ | |||
window.addEventListener( | |||
"touchmove", | |||
function(event){ | |||
if( | |||
!isHome && | |||
lockedSection | |||
){ | |||
event.preventDefault(); | |||
} | |||
}, | |||
{ | |||
passive:false | |||
} | |||
); | |||
/* | |||
/* ------------------------------------------------- | |||
BLOCK KEYBOARD SCROLL | |||
------------------------------------------------- */ | |||
window.addEventListener( | |||
"keydown", | |||
function(event){ | |||
if( | |||
!isHome && | |||
lockedSection | |||
){ | |||
const blockedKeys = [ | |||
"ArrowUp", | |||
"ArrowDown", | |||
"PageUp", | |||
"PageDown", | |||
"Home", | |||
"End", | |||
" ", | |||
"Spacebar" | |||
]; | |||
if( | |||
blockedKeys.includes( | |||
event.key | |||
) | |||
){ | |||
event.preventDefault(); | |||
} | |||
} | |||
} | |||
); | |||
*/ | |||
/* ------------------------------------------------- | |||
CLICKING HOME BUTTON INSIDE PAGE | |||
------------------------------------------------- */ | |||
document.querySelectorAll( | |||
'a[href="#home"]' | |||
).forEach( | |||
link => { | |||
link.addEventListener( | |||
"click", | |||
function(){ | |||
lockedSection = null; | |||
isHome = true; | |||
document.body.classList.remove( | |||
"section-locked" | |||
); | |||
} | |||
); | |||
} | |||
); | |||
/* ------------------------------------------------- | |||
INITIAL STATE | |||
------------------------------------------------- */ | |||
document.body.classList.remove( | |||
"section-locked" | |||
); | |||
} | |||
); | |||
</ | </script> | ||
</body> | </body> | ||
</html> | </html> | ||