تست: تفاوت میان نسخهها
بدون خلاصۀ ویرایش |
بدون خلاصۀ ویرایش |
||
| (۶۴ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد) | |||
| خط ۱: | خط ۱: | ||
<html lang="fa" dir=" | <html lang="fa" dir="rtl"> | ||
<head> | <head> | ||
| خط ۶: | خط ۷: | ||
<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 | <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800;900&display=swap" | ||
rel="stylesheet"> | |||
<link rel="stylesheet" | <link rel="stylesheet" | ||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"> | 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); | |||
--muted:# | --white:#ffffff; | ||
--text:#f4f4f4; | |||
--muted:#a1a1a1; | |||
--border: | --border:rgba(255,255,255,.09); | ||
--shadow: | --shadow: | ||
0 | 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; | box-sizing:border-box; | ||
} | } | ||
html { | html{ | ||
scroll-behavior:smooth; | scroll-behavior:smooth; | ||
scroll-padding-top:20px; | |||
} | } | ||
body { | body{ | ||
margin:0; | |||
text-align:center; | |||
font-family: | font-family: | ||
"Vazirmatn", | |||
Tahoma, | Tahoma, | ||
Arial, | Arial, | ||
sans-serif; | sans-serif; | ||
background:var(-- | background:var(--black); | ||
color:var(--text); | color:var(--text); | ||
| خط ۸۶: | خط ۱۰۳: | ||
overflow-x:hidden; | overflow-x:hidden; | ||
} | } | ||
body.section-locked{ | |||
overflow:hidden; | |||
} | |||
img{ | |||
display:block; | display:block; | ||
max-width:100%; | |||
height:auto; | height:auto; | ||
} | } | ||
a { | a{ | ||
text-decoration:none; | text-decoration:none; | ||
color:inherit; | color:inherit; | ||
} | } | ||
button, | |||
input, | |||
textarea{ | |||
font-family:inherit; | |||
} | } | ||
ul{ | |||
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; | display:flex; | ||
flex-direction:column; | |||
align-items:center; | align-items:center; | ||
padding:25px 0; | |||
} | |||
/* ========================================================= | |||
LOGO | |||
========================================================= */ | |||
.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; | display:flex; | ||
flex-direction:column; | |||
align-items:center; | align-items:center; | ||
gap:8px; | |||
} | |||
.sidebar-menu li{ | |||
width:100%; | |||
display:flex; | |||
justify-content:center; | |||
} | } | ||
. | .sidebar-menu a{ | ||
position:relative; | |||
width:50px; | |||
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{ | |||
content:attr(data-title); | |||
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- | 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{ | |||
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; | 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: | 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 | ||
========================= */ | ========================================================= */ | ||
.section { | .section{ | ||
padding: | position:relative; | ||
padding:55px 0; | |||
min-height:auto; | |||
display:flex; | |||
align-items:center; | |||
background:#080808; | |||
} | |||
.section:nth-child(even){ | |||
background:#0d0d0d; | |||
} | } | ||
/* ========================================================= | |||
SECTION TITLE | |||
========================================================= */ | |||
.section- | .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: | |||
radial-gradient( | |||
circle at 70% 25%, | |||
rgba(244,185,66,.09), | |||
transparent 32% | |||
), | |||
#050505; | |||
} | } | ||
. | .hero-inner{ | ||
max-width:900px; | |||
margin:auto; | |||
text-align:center; | |||
} | } | ||
. | .hero-label{ | ||
display:inline-flex; | |||
align-items:center; | |||
gap:8px; | |||
padding:8px 17px; | |||
border-radius:50px; | |||
background:var(--gold-light); | |||
border: | |||
1px solid rgba(244,185,66,.15); | |||
color:var(--gold); | |||
font- | font-size:.78rem; | ||
font-weight:800; | |||
margin-bottom:22px; | |||
} | } | ||
.hero-label i{ | |||
font-size:.45rem; | |||
. | |||
} | } | ||
. | .hero h1{ | ||
margin:0; | |||
color:#fff; | |||
font-size: | |||
clamp(2.5rem,7vw,5rem); | |||
line-height:1.25; | |||
font-weight:900; | |||
} | |||
.hero h1 span{ | |||
display:block; | |||
color:var(--gold); | |||
} | |||
.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{ | |||
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{ | |||
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: | color:var(--gold); | ||
font-size:1.1rem; | |||
} | } | ||
. | .hero-info-box strong{ | ||
display: | display:block; | ||
color:#fff; | |||
margin-top:4px; | |||
font-size:.9rem; | |||
} | |||
.hero-info-box span{ | |||
display:block; | |||
color:#777; | |||
font-size:.68rem; | |||
} | } | ||
/* ========================================================= | |||
ABOUT | |||
========================================================= */ | |||
.about-grid{ | |||
display:grid; | |||
grid-template-columns: | |||
.9fr 1.1fr; | |||
gap:60px; | |||
align-items:center; | 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; | ||
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; | |||
} | } | ||
. | .about-list{ | ||
margin-top:22px; | |||
} | } | ||
. | .about-list li{ | ||
display:flex; | |||
align-items:flex-start; | |||
gap:10px; | |||
margin-bottom:11px; | |||
color:#ddd; | |||
. | font-size:.84rem; | ||
font- | font-weight:600; | ||
} | |||
.about-list i{ | |||
color:var(--gold); | |||
margin-top:6px; | |||
} | } | ||
/* ========================================================= | |||
COUNTERS | |||
========================================================= */ | |||
.counters{ | |||
background:#000 !important; | |||
} | } | ||
. | .counter-grid{ | ||
display:grid; | |||
grid-template-columns: | |||
repeat(6,1fr); | |||
gap:12px; | |||
} | |||
.counter{ | |||
text-align:center; | 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{ | ||
font-size: | color:#777; | ||
font-size:.72rem; | |||
} | } | ||
/* ========================================================= | |||
SKILLS | |||
========================================================= */ | |||
.skills-grid{ | |||
max-width:1050px; | |||
margin:auto; | |||
display:grid; | display:grid; | ||
gap: | 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{ | ||
display:flex; | display:flex; | ||
justify-content:space-between; | |||
color:#eee; | |||
font-size:.83rem; | |||
font-weight:800; | |||
margin-bottom:9px; | |||
} | } | ||
. | .skill-title span:last-child{ | ||
color:var(-- | 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{ | |||
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{ | ||
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:100%; | |||
aspect-ratio:16/10; | |||
object-fit:contain; | |||
background:#151515; | |||
border-radius:12px; | |||
} | |||
.card-content{ | |||
padding:22px; | |||
} | |||
.card-tag{ | |||
display:inline-block; | |||
padding:4px 10px; | |||
border-radius:50px; | |||
background:var(--gold-light); | |||
color:var(--gold); | |||
font-size:.66rem; | |||
font-weight:800; | |||
} | |||
/* ========================================================= | |||
TIMELINE | |||
========================================================= */ | |||
.timeline{ | |||
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; | |||
top:3px; | |||
width:14px; | |||
height:14px; | |||
border-radius:50%; | |||
background:var(--gold); | |||
box-shadow: | |||
0 0 0 4px #0d0d0d; | |||
} | |||
.timeline-year{ | |||
color:var(--gold); | |||
font-size:.76rem; | |||
font-weight:800; | |||
} | |||
.timeline-item h3{ | |||
margin:5px 0; | |||
color:#fff; | |||
font-size:1.05rem; | |||
} | |||
.timeline-item p{ | |||
color:#888; | |||
. | font-size:.81rem; | ||
margin:0; | |||
} | |||
/* ========================================================= | |||
TESTIMONIAL | |||
========================================================= */ | |||
.testimonial{ | |||
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{ | |||
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:#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: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{ | |||
color:#eee; | |||
font-size:.8rem; | |||
} | |||
.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:var(--gold); | |||
} | |||
.footer p{ | |||
margin:0; | |||
font-size:.72rem; | |||
} | |||
/* ========================================================= | |||
TABLET | |||
========================================================= */ | |||
@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:1fr; | |||
gap:35px; | |||
} | |||
.about-image{ | |||
max-width:550px; | |||
margin:auto; | |||
} | |||
.cards-grid{ | |||
grid-template-columns: | |||
repeat(2,1fr); | |||
} | |||
.contact-grid{ | |||
grid-template-columns:1fr; | |||
} | |||
} | |||
/* ========================================================= | |||
MOBILE | |||
========================================================= */ | |||
@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:1fr; | |||
} | |||
.form-group.full{ | |||
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> | |||
</ | </head> | ||
< | <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- | <i class="fa-solid fa-graduation-cap"></i> | ||
</a> | |||
</li> | </li> | ||
< | <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- | <i class="fa-solid fa-comments"></i> | ||
</a> | |||
</li> | </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> | |||
</ | |||
</ | </aside> | ||
<!-- ===================================================== | |||
MOBILE HEADER | |||
===================================================== --> | |||
< | <header class="mobile-header "> | ||
< | <strong> | ||
محمدرضا شایق | مدرس خودشناسی | |||
</strong> | |||
</header> | |||
< | <!-- ===================================================== | ||
MAIN | |||
===================================================== --> | |||
< | <main class="main-content full-width-page"> | ||
< | <!-- ===================================================== | ||
HOME | |||
===================================================== --> | |||
< | <section class="section hero" | ||
id="home"> | |||
<div class="container"> | |||
<div class=" | <div class="hero-inner"> | ||
< | <div class="hero-label"> | ||
</ | <i class="fa-solid fa-circle"></i> | ||
مدرس خودشناسی و توسعه فردی | |||
</div> | |||
< | <h1> | ||
محمدرضا | |||
<span> | |||
شایق | |||
</span> | |||
< | </h1> | ||
< | <div class="hero-subtitle"> | ||
مدرس خودشناسی و آگاهی فردی | |||
<div> | </div> | ||
<p | <p class="hero-description"> | ||
خودشناسی میتواند نقطه شروع یک تغییر واقعی | |||
در زندگی باشد؛ مسیری برای شناخت بهتر خود، | |||
توانمندیها، احساسات و انتخابهای آگاهانهتر. | |||
</ | </p> | ||
<div class=" | <div class="hero-buttons"> | ||
< | <a href="#about" | ||
class="btn btn-gold"> | |||
<i class="fa-solid fa- | <i class="fa-solid fa-user"></i> | ||
درباره من | |||
< | </a> | ||
< | <a href="#courses" | ||
class="btn btn-outline"> | |||
</ | <i class="fa-solid fa-graduation-cap"></i> | ||
مشاهده دورهها | |||
</a> | |||
<div | </div> | ||
< | <div class="hero-info"> | ||
<div> | <div class="hero-info-box"> | ||
< | <i class="fa-solid fa-brain"></i> | ||
< | <strong> | ||
خودشناسی | |||
</ | </strong> | ||
</ | <span> | ||
شناخت بهتر خود | |||
</span> | |||
</div> | </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> | ||
<div class="hero-info-box"> | |||
< | <i class="fa-solid fa-bullseye"></i> | ||
<strong> | |||
تمرکز | |||
</strong> | |||
< | <span> | ||
هدفمندی بیشتر | |||
</span> | |||
<div | </div> | ||
</div> | </div> | ||
<div | </div> | ||
</div> | |||
</section> | |||
</ | |||
< | <!-- ===================================================== | ||
ABOUT | |||
===================================================== --> | |||
< | <section class="section" | ||
id="about"> | |||
<div class="container"> | |||
<div class="section-title"> | |||
< | <small> | ||
درباره من | |||
</small> | |||
< | <h2> | ||
شناخت خود، آغاز مسیر تغییر | |||
</h2> | |||
< | </div> | ||
<div class=" | <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="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> | |||
< | </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 class="counter"> | |||
<i class="fa-solid fa-clock"></i> | |||
< | <strong> | ||
1000+ | |||
</strong> | |||
< | <span> | ||
ساعت آموزش | |||
</span> | |||
<div | </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- | <i class="fa-solid fa-award"></i> | ||
</ | <strong> | ||
10+ | |||
</strong> | |||
< | <span> | ||
سال تجربه | |||
</span> | |||
</div> | |||
</div> | </div> | ||
</div> | </div> | ||
</section> | |||
<!-- ===================================================== | |||
SKILLS | |||
===================================================== --> | |||
<section class="section" | |||
id="skills"> | |||
<div class="container"> | |||
<div class="section-title"> | |||
<small> | |||
تخصصها | |||
</small> | |||
<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="skill-title"> | |||
< | <span> | ||
خودشناسی | |||
</span> | |||
< | <span> | ||
95% | |||
</span> | |||
< | </div> | ||
< | <div class="skill-bar"> | ||
< | <span style="--width:95%"></span> | ||
</div> | |||
</div> | |||
< | <div class="skill"> | ||
</div> | <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="skill-bar"> | ||
< | <span style="--width:90%"></span> | ||
</div> | |||
</div> | |||
< | <div class="skill"> | ||
</div> | <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> | ||
< | <div class="skill-bar"> | ||
< | <span style="--width:92%"></span> | ||
</ | |||
</div> | </div> | ||
<div | </div> | ||
<div class="skill"> | |||
</div> | <div class="skill-image"> | ||
<img src="https://dl.faraghaib.ir/m/260021-01/260021-01-20.png" | |||
alt="تصویر حوزه تخصصی خودشناسی" | |||
loading="lazy"> | |||
</div> | |||
<div class=" | <div class="skill-title"> | ||
< | <span> | ||
مهارتهای فردی | |||
</span> | |||
<span> | |||
88% | |||
</span> | |||
</div> | </div> | ||
<div class=" | <div class="skill-bar"> | ||
< | <span style="--width:88%"></span> | ||
</div> | |||
</div> | </div> | ||
</div> | |||
</div> | </div> | ||
</section> | |||
<!-- ===================================================== | |||
SERVICES | |||
===================================================== --> | |||
< | <section class="section" | ||
id="services"> | |||
< | <div class="container"> | ||
< | <div class="section-title"> | ||
<small> | |||
آموزشها | |||
</small> | |||
<h2> | |||
در چه زمینههایی آموزش میدهم؟ | |||
</h2> | |||
< | <p> | ||
آموزشهایی برای شناخت بهتر خود و ساختن | |||
نگاه آگاهانهتر به زندگی. | |||
</p> | |||
< | </div> | ||
< | <div class="cards-grid"> | ||
< | <article class="card"> | ||
<div class="card-icon"> | |||
<i class="fa-solid fa-brain"></i> | |||
</div> | |||
< | <h3> | ||
خودشناسی | |||
</h3> | |||
< | <p> | ||
شناخت ویژگیها، افکار، احساسات، | |||
ارزشها و الگوهای رفتاری. | |||
</p> | |||
</article> | |||
<article class="card"> | |||
< | <div class="card-icon"> | ||
<i class="fa-solid fa-seedling"></i> | |||
class=" | </div> | ||
< | <h3> | ||
رشد فردی | |||
</h3> | |||
</ | <p> | ||
پیدا کردن موانع رشد و ایجاد تغییرات | |||
مثبت و پایدار در زندگی. | |||
</p> | |||
</article> | |||
< | <article class="card"> | ||
< | <div class="card-icon"> | ||
<i class="fa-solid fa-compass"></i> | |||
</div> | |||
</ | <h3> | ||
مسیر زندگی | |||
</h3> | |||
<p> | |||
شناخت علایق، ارزشها و توانمندیها | |||
برای انتخاب مسیر مناسبتر. | |||
</p> | |||
< | </article> | ||
< | <article class="card"> | ||
</ | <div class="card-icon"> | ||
<i class="fa-solid fa-lightbulb"></i> | |||
</div> | |||
</ | <h3> | ||
آگاهی فردی | |||
</h3> | |||
<p> | |||
افزایش شناخت نسبت به انتخابها، | |||
رفتارها و الگوهای ذهنی. | |||
</p> | |||
</article> | |||
<article class="card"> | |||
<div class="card-icon"> | |||
<i class="fa-solid fa-comments"></i> | |||
</div> | |||
<h3> | |||
کارگاه آموزشی | |||
</h3> | |||
<p> | |||
برگزاری دورهها و کارگاههای آموزشی | |||
در زمینه خودشناسی و توسعه فردی. | |||
</p> | |||
</article> | |||
<article class="card"> | |||
<div class="card-icon"> | |||
<i class="fa-solid fa-heart"></i> | |||
</div> | |||
<h3> | |||
ارتباط با خود | |||
</h3> | |||
<p> | |||
ایجاد رابطهای آگاهانهتر با خود، | |||
نیازها و خواستههای شخصی. | |||
</p> | |||
</article> | |||
</div> | |||
</div> | |||
</section> | |||
<!-- ===================================================== | |||
COURSES | |||
===================================================== --> | |||
<section class="section" | |||
id="courses"> | |||
<div class="container"> | |||
<div class="section-title"> | |||
<small> | |||
دورهها | |||
</small> | |||
<h2> | |||
دورههای آموزشی | |||
</h2> | |||
</div> | |||
<div class="cards-grid"> | |||
<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> | |||
</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 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> | |||
</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> | |||
</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> | |||
</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 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> | |||
</section> | |||
<!-- ===================================================== | |||
TESTIMONIALS | |||
===================================================== --> | |||
<section class="section" | |||
id="testimonials"> | |||
<div class="container"> | |||
<div class="section-title"> | |||
<small> | |||
نظرات | |||
</small> | |||
<h2> | |||
تجربه همراهان | |||
</h2> | |||
</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> | |||
</section> | |||
<!-- ===================================================== | |||
BLOG | |||
===================================================== --> | |||
<section class="section" | |||
id="blog"> | |||
<div class="container"> | |||
<div class="section-title"> | |||
<small> | |||
مجله خودشناسی | |||
</small> | |||
<h2> | |||
مقالات و مطالب آموزشی | |||
</h2> | |||
</div> | |||
<div class="cards-grid"> | |||
<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 class="card-content"> | |||
<span class="blog-date"> | |||
خودشناسی | |||
</span> | |||
<h3> | |||
خودشناسی چیست؟ | |||
</h3> | |||
<p> | |||
نگاهی ساده به مفهوم خودشناسی | |||
و اهمیت آن در زندگی. | |||
</p> | |||
</div> | |||
</article> | |||
<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 class="card-content"> | |||
<span class="blog-date"> | |||
رشد فردی | |||
</span> | |||
<h3> | |||
مسیر رشد فردی را چگونه پیدا کنیم؟ | |||
</h3> | |||
<p> | |||
چند نکته برای شناخت بهتر اهداف | |||
و مسیر شخصی. | |||
</p> | |||
</div> | |||
</article> | |||
<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 class="card-content"> | |||
<span class="blog-date"> | |||
آگاهی | |||
</span> | |||
<h3> | |||
انتخاب آگاهانه چگونه شکل میگیرد؟ | |||
</h3> | |||
<p> | |||
نقش آگاهی در تصمیمهای مهم | |||
و انتخابهای زندگی. | |||
</p> | |||
</div> | |||
</article> | |||
</div> | |||
</div> | |||
</section> | |||
<!-- ===================================================== | |||
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 | |||
===================================================== --> | |||
<section class="section" | |||
id="contact"> | |||
<div class="container"> | |||
<div class="section-title"> | |||
<small> | |||
ارتباط | |||
</small> | |||
<h2> | |||
با من در ارتباط باشید | |||
</h2> | |||
</div> | |||
<div class="contact-grid"> | |||
<div class="contact-list"> | |||
<div class="contact-item"> | |||
<div class="contact-icon"> | |||
<i class="fa-solid fa-phone"></i> | |||
</div> | |||
<div> | |||
<small> | |||
شماره تماس | |||
</small> | |||
<strong> | |||
۰۹۱۲۱۲۳۴۵۶۷۸ | |||
</strong> | |||
</div> | |||
</div> | |||
<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 class="contact-item"> | |||
<div class="contact-icon"> | |||
<i class="fa-brands fa-instagram"></i> | |||
</div> | |||
<div> | |||
<small> | |||
اینستاگرام | |||
</small> | |||
<strong> | |||
@yourusername | |||
</strong> | |||
</div> | |||
</div> | |||
</div> | |||
<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> | |||
</form> | |||
</div> | |||
</div> | |||
</section> | |||
<!-- ===================================================== | |||
FOOTER | |||
===================================================== --> | |||
<footer class="footer"> | |||
<div class="container"> | |||
<p> | |||
© تمامی حقوق برای | |||
<strong> | |||
محمدرضا شایق | |||
</strong> | |||
محفوظ است. | |||
</p> | |||
</div> | |||
</footer> | |||
</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> | ||