تست: تفاوت میان نسخهها
بدون خلاصۀ ویرایش |
بدون خلاصۀ ویرایش |
||
| خط ۱: | خط ۱: | ||
<!DOCTYPE html> | |||
<html lang="fa" dir="rtl"> | |||
<head> | <head> | ||
| خط ۲۸: | خط ۲۹: | ||
:root{ | :root{ | ||
--black:# | --black:#050505; | ||
--black-2:# | --black-2:#0c0c0c; | ||
--black-3:#141414; | |||
--gold:#f4b942; | --gold:#f4b942; | ||
--gold-dark:# | --gold-dark:#d79b20; | ||
--gold-light: | --gold-light:rgba(244,185,66,.12); | ||
--white:#ffffff; | --white:#ffffff; | ||
--text:#f4f4f4; | |||
--muted:#a1a1a1; | |||
--border:rgba(255,255,255,.09); | |||
--border: | |||
-- | --shadow: | ||
0 15px 45px rgba(0,0,0,.35); | |||
--sidebar: | --sidebar:105px; | ||
} | } | ||
| خط ۶۶: | خط ۶۳: | ||
html{ | html{ | ||
scroll-behavior:smooth; | scroll-behavior:smooth; | ||
scroll-padding-top: | scroll-padding-top:20px; | ||
} | } | ||
| خط ۷۸: | خط ۷۵: | ||
Arial, | Arial, | ||
sans-serif; | sans-serif; | ||
background:var(--black); | |||
color:var(--text); | color:var(--text); | ||
line-height:1.9; | line-height:1.9; | ||
overflow-x:hidden; | overflow-x:hidden; | ||
} | |||
body.section-locked{ | |||
overflow:hidden; | |||
} | } | ||
img{ | img{ | ||
display:block; | |||
max-width:100%; | max-width:100%; | ||
height:auto; | height:auto; | ||
} | } | ||
| خط ۱۱۶: | خط ۱۱۹: | ||
ul{ | ul{ | ||
padding:0; | |||
margin:0; | margin:0; | ||
list-style:none; | list-style:none; | ||
| خط ۱۳۳: | خط ۱۳۶: | ||
min-height:100vh; | min-height:100vh; | ||
background:var(--black); | |||
} | } | ||
| خط ۱۳۸: | خط ۱۴۳: | ||
/* ========================================================= | /* ========================================================= | ||
LEFT SIDEBAR | LEFT ICON SIDEBAR | ||
========================================================= */ | ========================================================= */ | ||
| خط ۱۵۳: | خط ۱۵۸: | ||
height:100vh; | height:100vh; | ||
background: | background:#000; | ||
border-right: | |||
1px solid rgba(255,255,255,.08); | |||
z-index: | z-index:9999; | ||
display:flex; | display:flex; | ||
| خط ۱۶۳: | خط ۱۶۹: | ||
flex-direction:column; | flex-direction:column; | ||
align-items:center; | |||
padding:25px 0; | |||
} | } | ||
/* ========================================================= | |||
LOGO | |||
========================================================= */ | |||
.sidebar-logo{ | .sidebar-logo{ | ||
width:100%; | |||
text-align:center; | text-align:center; | ||
padding-bottom: | padding-bottom:25px; | ||
margin-bottom:20px; | margin-bottom:20px; | ||
border-bottom: | border-bottom: | ||
1px solid rgba(255,255,255,. | 1px solid rgba(255,255,255,.08); | ||
} | } | ||
| خط ۱۸۴: | خط ۱۹۷: | ||
.logo-circle{ | .logo-circle{ | ||
width: | width:48px; | ||
height: | height:48px; | ||
margin: | margin:auto; | ||
border-radius:50%; | border-radius:50%; | ||
| خط ۱۹۸: | خط ۲۱۱: | ||
background:var(--gold); | background:var(--gold); | ||
color: | color:#000; | ||
font-size:1. | font-size:1.15rem; | ||
box-shadow: | |||
0 8px 25px rgba(244,185,66,.2); | |||
} | } | ||
| خط ۲۰۶: | خط ۲۲۲: | ||
.sidebar-logo h2{ | .sidebar-logo h2{ | ||
display:none; | |||
} | } | ||
| خط ۲۱۸: | خط ۲۲۸: | ||
.sidebar-logo span{ | .sidebar-logo span{ | ||
display: | display:none; | ||
} | } | ||
| خط ۲۳۰: | خط ۲۳۴: | ||
/* ========================================================= | /* ========================================================= | ||
ICON MENU | |||
========================================================= */ | ========================================================= */ | ||
.sidebar-menu{ | .sidebar-menu{ | ||
width:100%; | |||
display:flex; | |||
flex-direction:column; | |||
align-items:center; | |||
gap:8px; | |||
} | } | ||
| خط ۲۴۱: | خط ۲۵۳: | ||
.sidebar-menu li{ | .sidebar-menu li{ | ||
width:100%; | |||
display:flex; | |||
justify-content:center; | |||
} | } | ||
| خط ۲۴۷: | خط ۲۶۳: | ||
.sidebar-menu a{ | .sidebar-menu a{ | ||
position:relative; | |||
width:50px; | |||
height:50px; | |||
display:grid; | |||
place-items:center; | |||
border-radius:14px; | |||
color:#777; | |||
font- | font-size:1.05rem; | ||
transition: | transition: | ||
background .2s ease, | background .2s ease, | ||
color .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-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- | .sidebar-menu a:hover::after{ | ||
opacity:1; | |||
transform: | |||
translateY(-50%) | |||
translateX(0); | |||
} | |||
.sidebar-menu a:hover{ | |||
color:var(--gold); | |||
background: | background:var(--gold-light); | ||
transform:translateX(2px); | |||
} | } | ||
.sidebar- | .sidebar-menu a.active{ | ||
color:#000; | |||
background:var(--gold); | background:var(--gold); | ||
box-shadow: | |||
0 8px 25px rgba(244,185,66,.18); | |||
} | } | ||
| خط ۳۴۱: | خط ۳۷۰: | ||
/* ========================================================= | /* ========================================================= | ||
SIDEBAR SOCIAL | |||
========================================================= */ | ========================================================= */ | ||
. | .sidebar-bottom{ | ||
margin- | 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:var(--sidebar); | |||
min-width:0; | |||
} | } | ||
/* ========================================================= | |||
MOBILE HEADER | |||
========================================================= */ | |||
.mobile-header{ | |||
display:none; | |||
} | } | ||
| خط ۴۳۹: | خط ۴۵۶: | ||
/* ========================================================= | /* ========================================================= | ||
CONTAINER | |||
========================================================= */ | ========================================================= */ | ||
. | .container{ | ||
min- | width:min( | ||
calc(100% - 70px), | |||
1120px | |||
); | |||
margin-inline:auto; | |||
} | |||
/* ========================================================= | |||
SECTION | |||
========================================================= */ | |||
.section{ | |||
position:relative; | |||
padding:100px 0; | |||
min-height:100vh; | |||
display:flex; | |||
align-items:center; | |||
background:#080808; | |||
} | } | ||
. | .section:nth-child(even){ | ||
background:#0d0d0d; | |||
} | |||
/* ========================================================= | |||
SECTION TITLE | |||
========================================================= */ | |||
.section-title{ | |||
width:100%; | |||
text-align:center; | |||
font-size:.8rem; | margin-bottom:50px; | ||
} | |||
.section-title small{ | |||
display:block; | |||
color:var(--gold); | |||
font-size:.8rem; | |||
font-weight:800; | font-weight:800; | ||
margin-bottom: | margin-bottom:8px; | ||
} | } | ||
. | .section-title h2{ | ||
margin:0; | margin:0; | ||
color:#fff; | |||
font-size: | font-size: | ||
clamp( | clamp(1.9rem,4vw,2.8rem); | ||
font-weight:900; | font-weight:900; | ||
line-height:1.4; | |||
} | } | ||
. | .section-title p{ | ||
max-width:650px; | |||
margin:12px auto 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- | .hero-inner{ | ||
max-width:850px; | |||
margin:auto; | |||
text-align:center; | |||
} | } | ||
. | .hero-label{ | ||
display:inline-flex; | display:inline-flex; | ||
| خط ۵۶۰: | خط ۵۸۸: | ||
align-items:center; | 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-size:.78rem; | |||
font-weight:800; | font-weight:800; | ||
margin-bottom:22px; | |||
} | } | ||
. | .hero-label i{ | ||
font-size:.45rem; | |||
} | } | ||
. | .hero h1{ | ||
margin:0; | |||
color:#fff; | color:#fff; | ||
font-size: | |||
clamp(2.5rem,7vw,5rem); | |||
line-height:1.25; | |||
font-weight:900; | |||
} | } | ||
. | .hero h1 span{ | ||
display:block; | |||
color:var(-- | color:var(--gold); | ||
} | } | ||
. | .hero-subtitle{ | ||
margin-top:12px; | |||
color:#eee; | |||
font-size: | |||
clamp(1.05rem,3vw,1.4rem); | |||
font-weight:700; | |||
} | |||
.hero- | .hero-description{ | ||
max-width:680px; | |||
margin:18px auto 30px; | |||
color:#999; | |||
font-size:.95rem; | |||
} | } | ||
.hero- | .hero-buttons{ | ||
display:flex; | |||
justify-content:center; | |||
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:. | 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(4,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(-- | color:var(--gold); | ||
font-size:. | font-size:1.1rem; | ||
} | } | ||
. | .hero-info-box strong{ | ||
display:block; | |||
color:#fff; | |||
margin-top:4px; | |||
font-size:.9rem; | |||
} | |||
.hero-info-box span{ | |||
display:block; | |||
color:#777; | |||
font- | 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; | |||
border- | |||
} | } | ||
. | .about-image img{ | ||
width:100%; | |||
aspect-ratio:4/5; | |||
object-fit:contain; | |||
border-radius:12px; | |||
background:#161616; | |||
} | } | ||
. | .about-content h2{ | ||
margin:0 0 15px; | |||
margin | |||
color:#fff; | color:#fff; | ||
font-size: | font-size: | ||
clamp(1.8rem,4vw,2.5rem); | |||
} | } | ||
. | .about-content p{ | ||
color:# | color:#999; | ||
font-size:. | font-size:.9rem; | ||
} | } | ||
.about-list{ | |||
margin-top:22px; | |||
} | |||
.about-list li{ | |||
display:flex; | |||
align-items:flex-start; | |||
gap:10px; | |||
margin: | margin-bottom:11px; | ||
color:#ddd; | |||
font-size:.84rem; | |||
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(4,1fr); | |||
gap:15px; | |||
} | } | ||
. | .counter{ | ||
text-align:center; | |||
padding:28px 10px; | |||
border- | 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 | |||
========================================================= */ | |||
.skills-grid{ | |||
max-width:900px; | |||
margin:auto; | |||
display:grid; | |||
grid-template-columns: | |||
repeat(2,1fr); | |||
gap:18px 35px; | |||
} | } | ||
. | .skill{ | ||
padding:19px; | |||
background:#111; | |||
border: | |||
1px solid rgba(255,255,255,.07); | |||
border-radius:14px; | |||
} | |||
.skill-title{ | |||
display:flex; | |||
justify-content:space-between; | |||
color:#eee; | |||
font-size:.83rem; | |||
font-weight:800; | |||
margin | margin-bottom:9px; | ||
} | } | ||
. | .skill-title span:last-child{ | ||
color:var(--gold); | |||
color:var(-- | |||
} | } | ||
.skill-bar{ | |||
height:7px; | |||
background:#242424; | |||
border-radius:50px; | |||
overflow:hidden; | 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 | .card{ | ||
background:#101010; | |||
border: | |||
1px solid rgba(255,255,255,.08); | |||
border-radius: | 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: | color:var(--gold); | ||
font-size:.66rem; | |||
font- | font-weight:800; | ||
} | } | ||
/* ========================================================= | |||
TIMELINE | |||
========================================================= */ | |||
.timeline{ | |||
max-width:850px; | |||
margin | margin:auto; | ||
} | } | ||
. | .timeline-item{ | ||
position:relative; | |||
padding: | |||
0 30px 38px; | |||
border- | 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- | font-size:1.05rem; | ||
} | } | ||
. | .timeline-item p{ | ||
color:#888; | |||
font-size: | font-size:.81rem; | ||
margin: | 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-person img{ | ||
width:45px; | |||
height:45px; | |||
border-radius:50%; | |||
object-fit:cover; | |||
} | } | ||
.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:. | 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:75px 0; | |||
} | } | ||
. | .about-grid{ | ||
grid-template-columns:1fr; | 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{ | |||
padding: | scroll-padding-top:65px; | ||
} | } | ||
. | .container{ | ||
width: | |||
calc(100% - 28px); | |||
} | } | ||
. | .section{ | ||
min-height:100vh; | |||
padding:65px 0; | |||
} | } | ||
. | .hero{ | ||
padding: | padding: | ||
70px 0 50px; | |||
} | } | ||
. | .hero h1{ | ||
font-size: | |||
clamp(2.2rem,12vw,3.3rem); | |||
} | } | ||
. | .hero-subtitle{ | ||
font-size: | font-size:1rem; | ||
} | } | ||
. | .hero-description{ | ||
font-size:. | 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; | |||
} | |||
.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:35px; | |||
} | |||
.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; | |||
} | |||
} | |||
/* ========================================================= | |||
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> | </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> | |||
<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> | |||
</aside> | |||
<!-- ===================================================== | |||
MOBILE HEADER | |||
===================================================== --> | |||
<header class="mobile-header"> | |||
<strong> | |||
محمدرضا شایق | مدرس خودشناسی | |||
</strong> | |||
</header> | |||
<!-- ===================================================== | |||
MAIN | |||
===================================================== --> | |||
<main class="main-content"> | |||
<!-- ===================================================== | |||
HOME | |||
===================================================== --> | |||
<section class="section hero" | |||
id="home"> | |||
< | <div class="container"> | ||
< | <div class="hero-inner"> | ||
< | <div class="hero-label"> | ||
< | <i class="fa-solid fa-circle"></i> | ||
مدرس خودشناسی و توسعه فردی | |||
</div> | |||
< | <h1> | ||
محمدرضا | |||
<span> | <span> | ||
شایق | |||
</span> | </span> | ||
</ | </h1> | ||
<div class=" | <div class="hero-subtitle"> | ||
مدرس خودشناسی و آگاهی فردی | |||
</div> | </div> | ||
< | <p class="hero-description"> | ||
خودشناسی میتواند نقطه شروع یک تغییر واقعی | |||
در زندگی باشد؛ مسیری برای شناخت بهتر خود، | |||
توانمندیها، احساسات و انتخابهای آگاهانهتر. | |||
</p> | |||
< | <div class="hero-buttons"> | ||
<a href="#about" | |||
class="btn btn-gold"> | |||
<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 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> | ||
مسیر رشد | |||
</span> | </span> | ||
</div> | </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> | ||
ارتباط با خود | |||
</span> | </span> | ||
</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="about-grid"> | |||
<div class="about-image"> | |||
< | <img | ||
src="https://images.unsplash.com/photo-1560250097-0b93528c311a?auto=format&fit=crop&w=1000&q=85" | |||
alt="محمدرضا شایق مدرس خودشناسی" | |||
loading="lazy"> | |||
</div> | </div> | ||
<div class="about-content"> | |||
</ | <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 class="counter"> | ||
<i class="fa-solid fa-star"></i> | |||
<strong> | |||
95% | |||
</strong> | |||
< | <span> | ||
رضایت | |||
</span> | |||
</div> | |||
</div> | |||
</div> | |||
</section> | |||
</section> | |||
<!-- ===================================================== | <!-- ===================================================== | ||
SKILLS | |||
===================================================== --> | |||
<section class="section" | <section class="section" | ||
id=" | id="skills"> | ||
<div class="container"> | <div class="container"> | ||
| خط ۲٬۵۸۴: | خط ۲٬۴۸۹: | ||
<small> | <small> | ||
تخصصها | |||
</small> | </small> | ||
<h2> | <h2> | ||
حوزههای تخصصی | |||
</h2> | </h2> | ||
| خط ۲٬۵۹۴: | خط ۲٬۴۹۹: | ||
<div class=" | <div class="skills-grid"> | ||
< | <div class="skill"> | ||
<div class=" | <div class="skill-title"> | ||
<span> | |||
<span | |||
خودشناسی | خودشناسی | ||
</span> | </span> | ||
< | <span> | ||
95% | |||
</ | </span> | ||
</div> | </div> | ||
<div class="skill-bar"> | |||
<span style="--width:95%"></span> | |||
</div> | |||
</div> | |||
<div class="skill"> | |||
<div class=" | <div class="skill-title"> | ||
<span | <span> | ||
توسعه فردی | توسعه فردی | ||
</span> | </span> | ||
< | <span> | ||
90% | |||
</ | </span> | ||
</div> | </div> | ||
<div class="skill-bar"> | |||
<span style="--width:90%"></span> | |||
</div> | |||
</div> | |||
<div class="skill"> | |||
<div class=" | <div class="skill-title"> | ||
<span | <span> | ||
کارگاه | آموزش و کارگاه | ||
</span> | </span> | ||
< | <span> | ||
92% | |||
</ | </span> | ||
</div> | |||
<div class="skill-bar"> | |||
< | <span style="--width:92%"></span> | ||
</div> | </div> | ||
</ | </div> | ||
<div class="skill"> | |||
< | <div class="skill-title"> | ||
<span> | |||
مهارتهای فردی | |||
</span> | |||
< | <span> | ||
88% | |||
</span> | |||
< | </div> | ||
<div class="skill-bar"> | |||
<span style="--width:88%"></span> | |||
</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> | ||
خودشناسی | |||
</h3> | </h3> | ||
<p> | <p> | ||
شناخت ویژگیها، افکار، احساسات، | |||
ارزشها و الگوهای رفتاری. | |||
</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> | ||
<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> | ||
برگزاری دورهها و کارگاههای آموزشی | |||
در زمینه خودشناسی و توسعه فردی. | |||
</p> | </p> | ||
</article> | |||
<article class="card"> | |||
<div class="card-icon"> | |||
<i class="fa-solid fa-heart"></i> | |||
</div> | |||
</ | <h3> | ||
ارتباط با خود | |||
</h3> | |||
</ | <p> | ||
ایجاد رابطهای آگاهانهتر با خود، | |||
نیازها و خواستههای شخصی. | |||
</p> | |||
</article> | </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=" | <div class="card-image"> | ||
<img | <img | ||
src="https:// | src="https://images.unsplash.com/photo-1499750310107-5fef28a66643?auto=format&fit=crop&w=1000&q=85" | ||
alt=" | alt="دوره خودشناسی" | ||
loading="lazy"> | 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://images.unsplash.com/photo-1531482615713-2afd69097998?auto=format&fit=crop&w=1000&q=85" | |||
alt="دوره توسعه فردی" | |||
loading="lazy"> | |||
</div> | |||
<div class="card-content"> | |||
<span class="card-tag"> | |||
توسعه فردی | |||
</span> | |||
<h3> | |||
مسیر رشد فردی | |||
</h3> | |||
<p> | |||
شناخت موانع رشد و ایجاد مسیر | |||
عملی برای پیشرفت شخصی. | |||
</p> | |||
</div> | |||
</article> | |||
<article class="card | <article class="card course-card"> | ||
<div class="card-image"> | <div class="card-image"> | ||
<img | <img | ||
src="https://images.unsplash.com/photo- | src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?auto=format&fit=crop&w=1000&q=85" | ||
alt="خودشناسی | alt="کارگاه خودشناسی" | ||
loading="lazy"> | loading="lazy"> | ||
| خط ۲٬۹۵۵: | خط ۲٬۸۴۶: | ||
<div class="card-content"> | <div class="card-content"> | ||
<span class=" | <span class="card-tag"> | ||
کارگاه | |||
</span> | </span> | ||
<h3> | <h3> | ||
آگاهی و انتخاب | |||
</h3> | </h3> | ||
<p> | <p> | ||
بررسی الگوهای ذهنی و رفتاری | |||
برای انتخابهای آگاهانهتر. | |||
</p> | </p> | ||
| خط ۲٬۹۷۳: | خط ۲٬۸۶۴: | ||
</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> | ||
| خط ۳٬۰۷۸: | خط ۲٬۹۵۸: | ||
<!-- ===================================================== | <!-- ===================================================== | ||
TESTIMONIALS | |||
===================================================== --> | |||
<section class="section" | <section class="section" | ||
id=" | id="testimonials"> | ||
<div class="container"> | <div class="container"> | ||
| خط ۳٬۰۸۹: | خط ۲٬۹۶۹: | ||
<small> | <small> | ||
نظرات | |||
</small> | </small> | ||
<h2> | <h2> | ||
تجربه همراهان | |||
</h2> | </h2> | ||
| خط ۳٬۰۹۹: | خط ۲٬۹۷۹: | ||
<div class=" | <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"> | |||
<img | |||
src="https://i.pravatar.cc/100?img=32" | |||
alt="شرکت کننده دوره"> | |||
<div> | <div> | ||
<strong> | <strong> | ||
سارا احمدی | |||
</strong> | </strong> | ||
<span> | |||
شرکتکننده دوره | |||
</span> | |||
</div> | </div> | ||
| خط ۳٬۱۲۷: | خط ۳٬۰۱۳: | ||
</div> | </div> | ||
</article> | |||
<article class="card testimonial"> | |||
<div class=" | <div class="quote"> | ||
<i class="fa-solid fa-quote-right"></i> | |||
</div> | |||
< | <p> | ||
محتوای دوره بسیار کاربردی بود و کمک کرد | |||
نقاط قوت خودم را بهتر بشناسم. | |||
</p> | |||
<div class="testimonial-person"> | |||
</ | <img | ||
src="https://i.pravatar.cc/100?img=12" | |||
alt="شرکت کننده کارگاه"> | |||
<div> | <div> | ||
<strong> | <strong> | ||
علی رضایی | |||
</strong> | </strong> | ||
<span> | |||
شرکتکننده کارگاه | |||
</span> | |||
</div> | </div> | ||
| خط ۳٬۱۵۰: | خط ۳٬۰۴۷: | ||
</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"> | |||
</ | <img | ||
src="https://i.pravatar.cc/100?img=47" | |||
alt="شرکت کننده دوره"> | |||
<div> | <div> | ||
<strong> | <strong> | ||
مریم کریمی | |||
</strong> | </strong> | ||
<span> | |||
شرکتکننده دوره | |||
</span> | |||
</div> | </div> | ||
| خط ۳٬۱۷۳: | خط ۳٬۰۸۱: | ||
</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://images.unsplash.com/photo-1499750310107-5fef28a66643?auto=format&fit=crop&w=1000&q=85" | |||
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://images.unsplash.com/photo-1531482615713-2afd69097998?auto=format&fit=crop&w=1000&q=85" | |||
alt="رشد فردی"> | |||
</div> | </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://images.unsplash.com/photo-1506784983877-45594efa4cbe?auto=format&fit=crop&w=1000&q=85" | |||
alt="انتخاب آگاهانه"> | |||
</p> | </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. | document.body.classList.remove( | ||
"section-locked" | |||
); | |||
} | } | ||
); | |||
} | |||
); | |||
/* ------------------------------------------------- | |||
INITIAL STATE | |||
------------------------------------------------- */ | |||
document.body.classList.remove( | |||
" | "section-locked" | ||
); | ); | ||
} | } | ||
| خط ۳٬۳۶۵: | خط ۳٬۷۰۰: | ||
</body> | </body> | ||
</html> | </html> | ||