تست: تفاوت میان نسخهها
بدون خلاصۀ ویرایش |
بدون خلاصۀ ویرایش |
||
| خط ۱: | خط ۱: | ||
<html lang="fa" dir="rtl"> | <html lang="fa" dir="rtl"> | ||
<head> | <head> | ||
<meta charset="UTF-8"> | <meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |||
< | <title>محمدرضا شایق | مدرس خودشناسی</title> | ||
<meta name="description" | <meta name="description" | ||
content="محمدرضا شایق، مدرس خودشناسی و توسعه فردی؛ آموزش خودشناسی، آگاهی فردی و رشد شخصی."> | |||
<link rel="preconnect" href="https://fonts.googleapis.com"> | |||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |||
<link rel="preconnect" | |||
<link rel="preconnect" | |||
<link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800;900&display=swap" | <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"> | |||
<style> | <style> | ||
| خط ۴۰: | خط ۲۸: | ||
:root{ | :root{ | ||
-- | --black:#171717; | ||
-- | --black-2:#222222; | ||
-- | --gold:#f4b942; | ||
-- | --gold-dark:#d99c20; | ||
-- | --gold-light:#fff3d3; | ||
--cream:# | --cream:#f7f5ef; | ||
--cream- | --cream-2:#efede5; | ||
--white:#ffffff; | --white:#ffffff; | ||
--text:# | --text:#222222; | ||
-- | --muted:#777777; | ||
--border:# | --border:#e4e1d9; | ||
-- | --shadow:0 10px 35px rgba(0,0,0,.07); | ||
-- | --radius:18px; | ||
-- | --sidebar:245px; | ||
} | } | ||
| خط ۸۴: | خط ۶۶: | ||
html{ | html{ | ||
scroll-behavior:smooth; | scroll-behavior:smooth; | ||
scroll-padding-top: | scroll-padding-top:30px; | ||
} | } | ||
| خط ۹۰: | خط ۷۲: | ||
margin:0; | margin:0; | ||
font-family: | font-family: | ||
| خط ۱۰۰: | خط ۷۸: | ||
Arial, | Arial, | ||
sans-serif; | sans-serif; | ||
color:var(--text); | |||
background:var(--cream); | |||
line-height:1.9; | line-height:1.9; | ||
| خط ۱۰۸: | خط ۹۰: | ||
img{ | img{ | ||
max-width:100%; | max-width:100%; | ||
height:auto; | height:auto; | ||
display:block; | |||
} | } | ||
a{ | a{ | ||
text-decoration:none; | |||
color:inherit; | color:inherit; | ||
} | } | ||
| خط ۱۳۳: | خط ۱۱۵: | ||
} | } | ||
ul{ | |||
margin:0; | |||
padding:0; | |||
list-style:none; | |||
} | } | ||
/* ========================================================= | |||
PAGE | |||
========================================================= */ | |||
.page{ | |||
min-height:100vh; | |||
} | } | ||
/* ========================================================= | |||
LEFT SIDEBAR | |||
========================================================= */ | |||
.left-sidebar{ | |||
position:fixed; | |||
top:0; | |||
left:0; | |||
width:var(--sidebar); | |||
height:100vh; | |||
background:var(--black); | |||
color:var(--white); | |||
z-index:1000; | |||
display:flex; | |||
flex-direction:column; | |||
padding:35px 20px; | |||
overflow-y:auto; | |||
} | } | ||
.sidebar-logo{ | |||
text-align:center; | |||
padding-bottom:28px; | |||
margin-bottom:20px; | |||
border-bottom: | |||
1px solid rgba(255,255,255,.1); | |||
} | } | ||
.logo-circle{ | |||
width:65px; | |||
height:65px; | |||
margin:0 auto 12px; | |||
border-radius:50%; | |||
display:grid; | |||
place-items:center; | |||
background:var(--gold); | |||
color:var(--black); | |||
font-size:1.6rem; | |||
} | } | ||
. | .sidebar-logo h2{ | ||
margin:0; | |||
color:#fff; | |||
font-size:1.1rem; | |||
font-size:. | |||
font-weight:800; | font-weight:800; | ||
} | } | ||
. | .sidebar-logo span{ | ||
display:block; | |||
margin-top:3px; | |||
color:#aaa; | |||
font-size:.75rem; | |||
} | |||
/* ========================================================= | |||
SIDEBAR MENU | |||
========================================================= */ | |||
.sidebar-menu{ | |||
margin: | margin-top:10px; | ||
} | } | ||
.sidebar-menu li{ | |||
margin-bottom:5px; | |||
} | |||
. | .sidebar-menu a{ | ||
display: | display:flex; | ||
align-items:center; | align-items:center; | ||
gap:12px; | |||
padding:12px 14px; | |||
border-radius:12px; | |||
color:#bdbdbd; | |||
font-size:.83rem; | |||
font-weight: | font-weight:600; | ||
transition: | transition: | ||
background .2s ease, | |||
color .2s ease; | |||
} | } | ||
. | .sidebar-menu a i{ | ||
width:22px; | |||
text-align:center; | |||
font-size:.9rem; | |||
} | } | ||
. | .sidebar-menu a:hover, | ||
.sidebar-menu a.active{ | |||
background: | background:rgba(244,185,66,.12); | ||
color:var(--gold); | |||
} | } | ||
. | .sidebar-bottom{ | ||
margin-top:auto; | |||
padding-top:25px; | |||
border-top: | |||
1px solid rgba(255,255,255,.1); | |||
text-align:center; | |||
} | |||
.sidebar-social{ | |||
display:flex; | |||
justify-content:center; | |||
gap:8px; | |||
} | } | ||
.sidebar-social a{ | |||
width:35px; | |||
height:35px; | |||
display:grid; | |||
place-items:center; | |||
border-radius:10px; | |||
background: | background:rgba(255,255,255,.07); | ||
color:#bbb; | |||
font-size:.8rem; | |||
} | } | ||
. | .sidebar-social a:hover{ | ||
background:var(--gold); | |||
color:var(--black); | |||
} | |||
/* ========================================================= | |||
MAIN | |||
========================================================= */ | |||
.main-content{ | |||
margin-left:var(--sidebar); | |||
min-width:0; | |||
} | |||
/* ========================================================= | |||
TOP MOBILE HEADER | |||
========================================================= */ | |||
.mobile-header{ | |||
display:none; | |||
} | } | ||
/* ========================================================= | |||
COMMON | |||
========================================================= */ | |||
.container{ | |||
width:min( | |||
calc(100% - 60px), | |||
1120px | |||
); | |||
margin-inline:auto; | |||
} | |||
.section{ | |||
padding:90px 0; | |||
} | } | ||
. | .section:nth-child(even){ | ||
background:var(--white); | |||
} | } | ||
. | .section-title{ | ||
text-align:center; | |||
margin-bottom:50px; | |||
} | |||
.section-title small{ | |||
display:inline-block; | |||
color:var(--gold-dark); | |||
font-weight:800; | |||
font-size:.85rem; | |||
margin-bottom:4px; | |||
} | } | ||
. | .section-title h2{ | ||
margin:0; | |||
font- | font-size:clamp(1.8rem,4vw,2.6rem); | ||
font-weight:900; | |||
line-height:1.4; | |||
} | } | ||
. | .section-title p{ | ||
max-width:650px; | |||
margin:10px auto 0; | |||
color:var(--muted); | |||
font-size:.9rem; | |||
} | } | ||
| خط ۴۷۴: | خط ۴۴۴: | ||
.hero{ | .hero{ | ||
min-height:100vh; | |||
display:flex; | |||
align-items:center; | |||
background: | background: | ||
radial-gradient( | radial-gradient( | ||
circle at | circle at 80% 20%, | ||
rgba(244,185,66,. | rgba(244,185,66,.14), | ||
transparent 30% | transparent 30% | ||
), | ), | ||
var(--cream); | |||
} | } | ||
.hero- | .hero-inner{ | ||
max-width:850px; | |||
margin:auto; | |||
text-align:center; | text-align:center; | ||
| خط ۵۰۹: | خط ۴۷۲: | ||
} | } | ||
.hero- | .hero-label{ | ||
display:inline-flex; | display:inline-flex; | ||
| خط ۵۱۷: | خط ۴۸۰: | ||
gap:8px; | gap:8px; | ||
padding: | padding:7px 16px; | ||
border-radius:50px; | border-radius:50px; | ||
background: | background:var(--gold-light); | ||
color: | color:var(--gold-dark); | ||
font-size:. | font-size:.8rem; | ||
font-weight:800; | font-weight:800; | ||
margin-bottom: | margin-bottom:20px; | ||
} | } | ||
.hero | .hero h1{ | ||
font-size:. | margin:0; | ||
font-size: | |||
clamp(2.2rem,7vw,4.5rem); | |||
line-height:1.3; | |||
font-weight:900; | |||
color:var(-- | color:var(--black); | ||
} | } | ||
.hero | .hero h1 span{ | ||
display:block; | |||
color:var(--gold-dark); | |||
} | } | ||
.hero- | .hero-subtitle{ | ||
margin:15px 0; | |||
font-size: | |||
clamp(1.05rem,3vw,1.35rem); | |||
font- | font-weight:700; | ||
} | } | ||
.hero- | .hero-description{ | ||
max-width:680px; | |||
margin:0 auto 30px; | |||
color:var(--muted); | |||
font-size:1rem; | |||
} | } | ||
.hero- | .hero-buttons{ | ||
display: | display:flex; | ||
justify-content:center; | |||
flex-wrap:wrap; | |||
gap:12px; | gap:12px; | ||
} | } | ||
. | .btn{ | ||
display:inline-flex; | |||
align-items:center; | |||
justify-content:center; | |||
gap:8px; | |||
min-height:50px; | |||
padding:10px 22px; | |||
border-radius:12px; | |||
font-weight:800; | |||
font-size:.85rem; | |||
transition: | |||
transform .2s ease, | |||
box-shadow .2s ease; | |||
} | |||
.btn:hover{ | |||
transform:translateY(-2px); | |||
} | } | ||
. | .btn-dark{ | ||
background:var(--black); | |||
color:#fff; | |||
box-shadow:var(--shadow); | |||
} | } | ||
. | .btn-gold{ | ||
background:var(--gold); | |||
color:var(--black); | |||
} | } | ||
. | .btn-outline{ | ||
border:1px solid var(--border); | |||
background:#fff; | |||
} | } | ||
| خط ۶۳۸: | خط ۶۱۴: | ||
/* ========================================================= | /* ========================================================= | ||
HERO INFO | |||
========================================================= */ | ========================================================= */ | ||
. | .hero-info{ | ||
margin-top:50px; | |||
display:grid; | display:grid; | ||
gap: | grid-template-columns: | ||
repeat(4,1fr); | |||
gap:12px; | |||
} | } | ||
. | .hero-info-box{ | ||
padding:17px 10px; | |||
background:#fff; | |||
border: | border: | ||
1px solid var(--border); | 1px solid var(--border); | ||
border-radius:15px; | |||
box-shadow: | |||
0 5px 20px rgba(0,0,0,.04); | |||
} | } | ||
. | .hero-info-box i{ | ||
color:var(--gold-dark); | |||
font-size:1.1rem; | |||
} | |||
.hero-info-box strong{ | |||
display:block; | |||
margin-top:4px; | |||
font-size:.95rem; | |||
} | } | ||
. | .hero-info-box span{ | ||
display:block; | |||
color:var(--muted); | |||
font-size: | font-size:.7rem; | ||
} | } | ||
/* ========================================================= | |||
ABOUT | |||
========================================================= */ | |||
.about-grid{ | |||
display:grid; | |||
grid-template-columns: | |||
.9fr 1.1fr; | |||
gap:60px; | |||
align-items:center; | |||
} | |||
.about-image{ | |||
background:var(--cream-2); | |||
padding:12px; | |||
border-radius:var(--radius); | |||
} | } | ||
.about- | .about-image img{ | ||
width:100%; | |||
aspect-ratio:4/5; | |||
object-fit:contain; | |||
border-radius:12px; | |||
background:#eee; | |||
} | } | ||
.about- | .about-content h2{ | ||
margin:0 0 15px; | |||
font-size: | |||
clamp(1.7rem,4vw,2.5rem); | |||
line-height:1.5; | |||
} | } | ||
.about- | .about-content p{ | ||
color:var(-- | color:var(--muted); | ||
font-size:. | font-size:.95rem; | ||
} | } | ||
.about- | .about-list{ | ||
font-size:. | margin-top:20px; | ||
} | |||
.about-list li{ | |||
display:flex; | |||
align-items:flex-start; | |||
gap:10px; | |||
margin-bottom:10px; | |||
font-size:.88rem; | |||
font-weight:600; | |||
} | |||
.about-list i{ | |||
color:var(--gold-dark); | |||
margin-top:6px; | |||
} | } | ||
| خط ۷۷۵: | خط ۷۶۷: | ||
/* ========================================================= | /* ========================================================= | ||
COUNTERS | |||
========================================================= */ | ========================================================= */ | ||
. | .counters{ | ||
background:var(-- | background:var(--black) !important; | ||
color: | color:#fff; | ||
} | } | ||
. | .counter-grid{ | ||
display:grid; | display:grid; | ||
grid-template-columns: | grid-template-columns: | ||
repeat( | repeat(4,1fr); | ||
gap: | gap:15px; | ||
} | } | ||
. | .counter{ | ||
text-align:center; | text-align:center; | ||
padding: | padding:25px 10px; | ||
border: | border-right: | ||
1px solid rgba(255,255,255,.1); | 1px solid rgba(255,255,255,.1); | ||
} | |||
.counter:last-child{ | |||
border-right:0; | |||
} | } | ||
. | .counter i{ | ||
color:var(-- | color:var(--gold); | ||
font-size:1. | font-size:1.4rem; | ||
} | } | ||
. | .counter strong{ | ||
display:block; | display:block; | ||
margin-top:4px; | |||
color: | color:#fff; | ||
font-size:2rem; | |||
} | } | ||
. | .counter span{ | ||
color:# | color:#aaa; | ||
font-size:. | font-size:.75rem; | ||
} | } | ||
| خط ۸۴۶: | خط ۸۳۶: | ||
/* ========================================================= | /* ========================================================= | ||
SKILLS | |||
========================================================= */ | ========================================================= */ | ||
. | .skills-grid{ | ||
max-width:900px; | |||
margin:auto; | |||
display:grid; | |||
grid-template-columns: | |||
repeat(2,1fr); | |||
gap: | gap:18px 35px; | ||
} | } | ||
. | .skill{ | ||
background:var(-- | background:var(--cream); | ||
padding:18px; | |||
border-radius: | border-radius:14px; | ||
} | |||
.skill-title{ | |||
display:flex; | |||
justify-content:space-between; | |||
font-size:.85rem; | |||
font-weight:800; | |||
margin-bottom:8px; | |||
} | } | ||
. | .skill-title span:last-child{ | ||
color:var(--gold-dark); | |||
} | |||
.skill-bar{ | |||
height:7px; | |||
background:#ddd9d0; | |||
border-radius:50px; | |||
overflow:hidden; | |||
} | } | ||
. | .skill-bar span{ | ||
display:block; | |||
height:100%; | |||
width:var(--width); | |||
background:var(--gold); | |||
border-radius:inherit; | |||
} | } | ||
| خط ۹۳۰: | خط ۹۱۲: | ||
/* ========================================================= | /* ========================================================= | ||
SERVICES | |||
========================================================= */ | ========================================================= */ | ||
. | .cards-grid{ | ||
display:grid; | |||
grid-template-columns: | |||
repeat(3,1fr); | |||
gap:20px; | |||
gap: | |||
} | } | ||
. | .card{ | ||
background:#fff; | |||
border: | border: | ||
1px solid var(--border); | 1px solid var(--border); | ||
border-radius: | border-radius:var(--radius); | ||
padding:28px 24px; | |||
box-shadow: | |||
0 5px 25px rgba(0,0,0,.04); | |||
transition: | |||
transform .2s ease, | |||
box-shadow .2s ease; | |||
} | } | ||
. | .card:hover{ | ||
transform:translateY(-5px); | |||
box-shadow: | |||
0 15px 40px rgba(0,0,0,.1); | |||
} | |||
.card-icon{ | |||
width:55px; | |||
height:55px; | |||
display:grid; | |||
place-items:center; | |||
border-radius:15px; | |||
background:var(--gold-light); | |||
color:var(--gold-dark); | |||
font-size:1.3rem; | |||
margin-bottom:18px; | |||
} | } | ||
. | .card h3{ | ||
margin:0 0 8px; | |||
font-size:1.1rem; | |||
} | |||
.card p{ | |||
margin:0; | |||
color:var(--muted); | |||
font-size:.82rem; | |||
} | } | ||
| خط ۱٬۰۰۲: | خط ۹۹۷: | ||
/* ========================================================= | /* ========================================================= | ||
COURSES | COURSES / PORTFOLIO | ||
========================================================= */ | ========================================================= */ | ||
. | .course-card{ | ||
padding:0; | |||
overflow:hidden; | |||
} | } | ||
. | .card-image{ | ||
padding:10px; | |||
background:var(--cream-2); | |||
} | } | ||
. | .card-image img{ | ||
width:100%; | |||
aspect-ratio:16/10; | |||
object-fit:contain; | |||
background:#fff; | |||
border-radius:12px; | |||
} | } | ||
. | .card-content{ | ||
padding: | padding:22px; | ||
} | } | ||
. | .card-tag{ | ||
display:inline-block; | |||
padding:4px 10px; | |||
border-radius:50px; | |||
background:var(--gold-light); | |||
color:var(--gold-dark); | |||
font-size:.68rem; | |||
font-weight:800; | |||
margin-bottom:8px; | |||
} | } | ||
/* ========================================================= | |||
TIMELINE | |||
========================================================= */ | |||
.timeline{ | |||
max-width:850px; | |||
margin:auto; | |||
} | |||
.timeline-item{ | |||
position:relative; | |||
padding: | |||
0 30px 35px; | |||
border-right: | |||
2px solid var(--border); | |||
} | } | ||
. | .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 var(--cream); | |||
} | } | ||
. | .timeline-year{ | ||
color:var(--gold-dark); | |||
font-size:.78rem; | |||
font-weight:800; | |||
} | } | ||
.timeline-item h3{ | |||
margin:5px 0; | |||
font-size:1.05rem; | |||
} | } | ||
.timeline{ | .timeline-item p{ | ||
color:var(--muted); | |||
font-size:.82rem; | |||
margin: | margin:0; | ||
} | } | ||
/* ========================================================= | |||
TESTIMONIALS | |||
========================================================= */ | |||
.testimonial{ | |||
background:var(--cream); | |||
} | } | ||
. | .quote{ | ||
color:var(--gold); | |||
font-size:1.8rem; | |||
} | } | ||
. | .testimonial p{ | ||
color:#666; | |||
font-size:.83rem; | |||
} | |||
.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; | |||
font-size:.82rem; | |||
} | } | ||
. | .testimonial-person span{ | ||
display:block; | |||
color:var(--muted); | |||
font-size:. | font-size:.68rem; | ||
} | } | ||
| خط ۱٬۲۱۱: | خط ۱٬۲۰۹: | ||
/* ========================================================= | /* ========================================================= | ||
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-dark); | |||
font-size:.7rem; | |||
font-weight:800; | |||
} | } | ||
. | .blog-card h3{ | ||
font-size:1rem; | |||
margin | margin:7px 0; | ||
} | } | ||
. | .blog-card p{ | ||
font-size:. | font-size:.78rem; | ||
} | } | ||
/* ========================================================= | |||
CTA | |||
========================================================= */ | |||
.cta{ | |||
background:var(--black) !important; | |||
color:#fff; | |||
} | } | ||
. | .cta-inner{ | ||
text-align:center; | |||
max-width:750px; | |||
margin:auto; | |||
} | |||
.cta h2{ | |||
margin:0 0 10px; | |||
font-size: | |||
clamp(1.8rem,4vw,2.8rem); | |||
color:#fff; | |||
} | } | ||
. | .cta p{ | ||
color: | color:#aaa; | ||
font-size:. | font-size:.9rem; | ||
margin-bottom:22px; | |||
} | } | ||
| خط ۱٬۲۹۸: | خط ۱٬۳۰۲: | ||
/* ========================================================= | /* ========================================================= | ||
CONTACT | |||
========================================================= */ | ========================================================= */ | ||
. | .contact-grid{ | ||
display:grid; | |||
grid-template-columns: | |||
.8fr 1.2fr; | |||
gap:35px; | |||
} | } | ||
. | .contact-list{ | ||
display:grid; | display:grid; | ||
gap: | gap:12px; | ||
} | } | ||
. | .contact-item{ | ||
display:flex; | |||
align-items:center; | |||
gap:14px; | |||
padding:16px; | |||
background:var(--cream); | |||
border-radius:14px; | |||
} | } | ||
. | .contact-icon{ | ||
width: | width:45px; | ||
height:45px; | |||
flex:0 0 45px; | |||
display:grid; | |||
place-items:center; | |||
border-radius:12px; | |||
background:var(--gold-light); | |||
color:var(--gold-dark); | |||
} | } | ||
. | .contact-item small{ | ||
display:block; | |||
color:var(--muted); | |||
font- | font-size:.68rem; | ||
} | } | ||
. | .contact-item strong{ | ||
font-size:.82rem; | |||
} | } | ||
. | .contact-form{ | ||
background:#fff; | |||
padding:28px; | |||
border-radius:var(--radius); | |||
border: | |||
1px solid var(--border); | |||
} | |||
.form-grid{ | |||
display:grid; | |||
grid-template-columns: | |||
repeat(2,1fr); | |||
gap:15px; | |||
} | |||
.form-group.full{ | |||
grid-column:1/-1; | |||
} | |||
.form-group label{ | |||
display:block; | |||
font-size:.75rem; | |||
font-weight:800; | |||
margin-bottom:5px; | |||
} | } | ||
. | .form-group input, | ||
.form-group textarea{ | |||
width:100%; | |||
padding:12px 14px; | |||
border: | |||
1px solid var(--border); | |||
border-radius:10px; | |||
background:var(--cream); | |||
outline:none; | |||
font-size:.8rem; | |||
} | } | ||
. | .form-group textarea{ | ||
min-height:130px; | |||
resize:vertical; | |||
} | } | ||
. | .form-group input:focus, | ||
.form-group textarea:focus{ | |||
border-color:var(--gold); | |||
} | |||
/* ========================================================= | |||
FOOTER | |||
========================================================= */ | |||
.footer{ | |||
background:var(--black); | |||
color:#aaa; | |||
padding:30px 0; | |||
text-align:center; | |||
} | |||
. | .footer strong{ | ||
color:var(--gold); | |||
} | } | ||
. | .footer p{ | ||
margin:0; | |||
font-size:.75rem; | |||
} | } | ||
/* ========================================================= | |||
TABLET | |||
========================================================= */ | |||
@media(max-width:900px){ | |||
.left-sidebar{ | |||
display:none; | |||
} | |||
.main-content{ | |||
margin-left:0; | |||
} | |||
.mobile-header{ | |||
position:sticky; | |||
top:0; | |||
z-index:999; | |||
height:65px; | |||
display:flex; | |||
align-items:center; | |||
justify-content:center; | |||
background: | |||
rgba(23,23,23,.96); | |||
color:#fff; | |||
border-bottom: | |||
1px solid rgba(255,255,255,.08); | |||
} | |||
.mobile-header strong{ | |||
font-size:.95rem; | |||
} | |||
.container{ | |||
width: | |||
min( | |||
calc(100% - 40px), | |||
700px | |||
); | |||
} | |||
.section{ | |||
padding:70px 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:70px; | |||
} | |||
.container{ | |||
width: | |||
calc(100% - 28px); | |||
} | |||
.section{ | |||
padding:55px 0; | |||
} | } | ||
. | .hero{ | ||
min-height:auto; | |||
padding: | |||
75px 0 55px; | |||
} | } | ||
. | .hero h1{ | ||
font-size: | |||
clamp(2rem,11vw,3rem); | |||
} | |||
.hero-subtitle{ | |||
font-size:1rem; | |||
} | |||
. | .hero-description{ | ||
font-size:.88rem; | |||
} | |||
.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,.1); | |||
} | } | ||
. | .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; | |||
} | |||
.testimonial{ | |||
padding:22px 18px; | |||
} | } | ||
. | .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:.82rem; | |||
} | |||
} | |||
/* ========================================================= | |||
EXTRA SMALL | |||
========================================================= */ | |||
@media(max-width:380px){ | |||
.container{ | |||
width: | |||
calc(100% - 22px); | |||
} | } | ||
. | .hero-info-box{ | ||
padding:14px 7px; | |||
} | |||
.hero-info-box strong{ | |||
font-size:.82rem; | |||
} | |||
.hero-info-box span{ | |||
font-size:.62rem; | |||
} | |||
} | } | ||
/* ========================================================= | |||
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"> | |||
<!-- ===================================================== | |||
DESKTOP LEFT SIDEBAR | |||
====================================================== --> | |||
<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"> | |||
<i class="fa-solid fa-house"></i> | |||
خانه | |||
</a> | |||
</li> | |||
<li> | |||
<a href="#about"> | |||
<i class="fa-solid fa-user"></i> | |||
درباره من | |||
</a> | |||
</li> | |||
<li> | |||
<a href="#skills"> | |||
<i class="fa-solid fa-chart-simple"></i> | |||
مهارتها | |||
</a> | |||
</li> | |||
<li> | |||
<a href="#services"> | |||
<i class="fa-solid fa-layer-group"></i> | |||
آموزشها | |||
</a> | |||
</li> | |||
<li> | |||
<a href="#courses"> | |||
<i class="fa-solid fa-graduation-cap"></i> | |||
دورهها | |||
</a> | |||
</li> | |||
<li> | |||
<a href="#experience"> | |||
<i class="fa-solid fa-briefcase"></i> | |||
سوابق | |||
</a> | |||
</li> | |||
<li> | |||
<a href="#testimonials"> | |||
<i class="fa-solid fa-comments"></i> | |||
نظرات | |||
</a> | |||
</li> | |||
<li> | |||
<a href="#blog"> | |||
<i class="fa-solid fa-book-open"></i> | |||
مقالات | |||
</a> | |||
</li> | |||
<li> | |||
<a href="#contact"> | |||
<i class="fa-solid fa-envelope"></i> | |||
ارتباط با من | |||
</a> | |||
</li> | |||
</ul> | |||
</nav> | |||
<div class="sidebar-bottom"> | |||
<div class="sidebar-social"> | |||
<a href="#"> | |||
<i class="fa-brands fa-instagram"></i> | |||
</a> | |||
<a href="#"> | |||
<i class="fa-brands fa-telegram"></i> | |||
</a> | |||
<a href="#"> | |||
<i class="fa-brands fa-whatsapp"></i> | |||
</a> | |||
</div> | |||
</div> | |||
</aside> | |||
<!-- ===================================================== | |||
MOBILE HEADER | |||
====================================================== --> | |||
<header class="mobile-header"> | |||
<strong> | |||
محمدرضا شایق | مدرس خودشناسی | |||
</strong> | |||
</header> | |||
<!-- ===================================================== | |||
MAIN CONTENT | |||
====================================================== --> | |||
<main class="main-content"> | |||
<!-- ===================================================== | |||
HERO | |||
====================================================== --> | |||
<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> | |||
</h1> | |||
<div class="hero-subtitle"> | |||
مدرس خودشناسی و آگاهی فردی | |||
</div> | |||
<p class="hero-description"> | |||
خودشناسی میتواند نقطه شروع یک تغییر واقعی | |||
در زندگی باشد؛ مسیری برای شناخت بهتر خود، | |||
توانمندیها، احساسات و انتخابهای آگاهانهتر. | |||
</p> | |||
<div class="hero-buttons"> | |||
<a href="#about" | |||
class="btn btn-dark"> | |||
<i class="fa-solid fa-user"></i> | |||
درباره من | |||
</a> | |||
<a href="#courses" | |||
class="btn btn-gold"> | |||
<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> | |||
</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> | |||
</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 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="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> | |||
<!-- ===================================================== | |||
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-title"> | ||
<span> | |||
خودشناسی | |||
</span> | |||
<span> | |||
95% | |||
</span> | |||
</div> | |||
<div class=" | <div class="skill-bar"> | ||
< | <span style="--width:95%"></span> | ||
</div> | |||
</div> | |||
<div class="skill"> | |||
<div class="skill-title"> | |||
<span> | |||
توسعه فردی | |||
</span> | |||
<span> | |||
90% | |||
</ | </span> | ||
</div> | </div> | ||
<div class="skill-bar"> | |||
<span style="--width:90%"></span> | |||
</div> | |||
</div> | |||
<div class="skill"> | |||
<div class="skill-title"> | |||
<span> | |||
آموزش و کارگاه | |||
</span> | |||
< | <span> | ||
92% | |||
</span> | |||
</div> | |||
<div class="skill-bar"> | |||
<span style="--width:92%"></span> | |||
</div> | |||
</div> | |||
<div class="skill"> | |||
<div class="skill-title"> | |||
<span> | |||
مهارتهای فردی | |||
</span> | |||
</ | <span> | ||
88% | |||
</span> | |||
</div> | |||
<div class="skill-bar"> | |||
<span style="--width:88%"></span> | |||
</div> | </div> | ||
| خط ۲٬۴۱۹: | خط ۲٬۴۱۶: | ||
<!-- | <!-- ===================================================== | ||
SERVICES | |||
====================================================== --> | |||
<section class=" | <section class="section" | ||
id=" | id="services"> | ||
<div class="container"> | <div class="container"> | ||
<div class=" | <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> | </div> | ||
<h3> | |||
خودشناسی | |||
</h3> | |||
<p> | <p> | ||
شناخت ویژگیها، افکار، احساسات، | |||
ارزشها و الگوهای رفتاری. | |||
</p> | |||
</article> | |||
<article class="card"> | |||
<div class="card-icon"> | |||
<i class="fa-solid fa-seedling"></i> | |||
< | </div> | ||
<h3> | |||
رشد فردی | |||
</h3> | |||
<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> | |||
</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://images.unsplash.com/photo-1499750310107-5fef28a66643?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 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 course-card"> | ||
<div class="card-image"> | |||
<img | |||
src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?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> | |||
</div> | </div> | ||
| خط ۲٬۶۵۹: | خط ۲٬۶۹۶: | ||
<!-- | <!-- ===================================================== | ||
EXPERIENCE | |||
====================================================== --> | |||
<section class=" | <section class="section" | ||
id=" | id="experience"> | ||
<div class="container"> | <div class="container"> | ||
<div class="section- | <div class="section-title"> | ||
< | <small> | ||
سوابق | |||
</ | </small> | ||
<h2> | <h2> | ||
مسیر حرفهای | |||
</h2> | </h2> | ||
</div> | </div> | ||
<div class=" | <div class="timeline"> | ||
< | <div class="timeline-item"> | ||
< | <span class="timeline-year"> | ||
۱۴۰۲ — اکنون | |||
</span> | |||
</ | |||
<h3> | <h3> | ||
مدرس خودشناسی و توسعه فردی | |||
</h3> | </h3> | ||
<p> | <p> | ||
برگزاری دورهها و کارگاههای آموزشی | |||
در زمینه خودشناسی و رشد فردی. | |||
</p> | </p> | ||
</ | </div> | ||
< | <div class="timeline-item"> | ||
< | <span class="timeline-year"> | ||
۱۳۹۹ — ۱۴۰۲ | |||
</span> | |||
<h3> | |||
مدرس و برگزارکننده کارگاه | |||
<h3> | |||
</h3> | </h3> | ||
<p> | <p> | ||
طراحی و اجرای برنامههای آموزشی | |||
با تمرکز بر آگاهی و مهارتهای فردی. | |||
</p> | </p> | ||
</ | </div> | ||
< | <div class="timeline-item"> | ||
< | <span class="timeline-year"> | ||
۱۳۹۷ — ۱۳۹۹ | |||
</span> | |||
</ | |||
<h3> | <h3> | ||
آغاز فعالیت آموزشی | |||
</h3> | </h3> | ||
<p> | <p> | ||
آغاز فعالیت تخصصی در زمینه آموزش، | |||
مطالعه و توسعه فردی. | |||
</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> | </div> | ||
<p> | <p> | ||
شرکت در دوره باعث شد نگاه متفاوتی | |||
نسبت به خودم و تصمیمهایم پیدا کنم. | |||
</p> | </p> | ||
<div class="testimonial-person"> | |||
<img | |||
src="https://i.pravatar.cc/100?img=32" | |||
alt="شرکت کننده دوره" | |||
loading="lazy"> | |||
<div> | |||
<strong> | |||
سارا احمدی | |||
</strong> | |||
<span> | |||
شرکتکننده دوره | |||
</span> | |||
</div> | |||
</div> | </div> | ||
< | </article> | ||
</ | |||
<article class="card testimonial"> | |||
<div class="quote"> | |||
<i class="fa-solid fa-quote-right"></i> | |||
</div> | |||
<p> | <p> | ||
محتوای دوره بسیار کاربردی بود و کمک کرد | |||
نقاط قوت خودم را بهتر بشناسم. | |||
</p> | </p> | ||
<div class="testimonial-person"> | |||
<img | |||
src="https://i.pravatar.cc/100?img=12" | |||
alt="شرکت کننده کارگاه" | |||
loading="lazy"> | |||
<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"> | |||
<img | |||
src="https://i.pravatar.cc/100?img=47" | |||
alt="شرکت کننده دوره" | |||
loading="lazy"> | |||
<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://images.unsplash.com/photo-1499750310107-5fef28a66643?auto=format&fit=crop&w=1000&q=85" | |||
alt="خودشناسی چیست" | |||
loading="lazy"> | |||
</div> | </div> | ||
<div class=" | <div class="card-content"> | ||
<span class="blog-date"> | |||
خودشناسی | |||
</span> | </span> | ||
< | <h3> | ||
خودشناسی چیست؟ | |||
</ | </h3> | ||
<p> | |||
نگاهی ساده به مفهوم خودشناسی | |||
و اهمیت آن در زندگی. | |||
</p> | |||
</div> | </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="رشد فردی" | |||
loading="lazy"> | |||
< | </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"> | |||
<div class=" | |||
<img | <img | ||
src="https://images.unsplash.com/photo-1506784983877-45594efa4cbe?auto=format&fit=crop&w=1000&q=85" | |||
alt="انتخاب آگاهانه" | |||
loading="lazy"> | |||
</div> | </div> | ||
<div class=" | <div class="card-content"> | ||
<span class=" | <span class="blog-date"> | ||
آگاهی | |||
</span> | </span> | ||
<h3> | <h3> | ||
انتخاب آگاهانه چگونه شکل میگیرد؟ | |||
</h3> | </h3> | ||
<p> | <p> | ||
نقش آگاهی در تصمیمهای مهم | |||
و انتخابهای زندگی. | |||
</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> | </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-dark"> | |||
<i class="fa-regular fa-paper-plane"></i> | |||
ارسال پیام | |||
</button> | |||
</ | |||
</div> | </div> | ||
| خط ۳٬۲۵۱: | خط ۳٬۲۴۸: | ||
</div> | </div> | ||
</ | </form> | ||
</div> | |||
</div> | |||
</section> | |||
<!-- ===================================================== | |||
FOOTER | |||
====================================================== --> | |||
<footer class="footer"> | |||
<div class="container"> | |||
<p> | |||
© تمامی حقوق برای | |||
<strong> | |||
محمدرضا شایق | |||
</strong> | |||
محفوظ است. | |||
</p> | |||
</div> | |||
</footer> | |||
</main> | |||
</main | |||
</ | </div> | ||
<!-- | <!-- ===================================================== | ||
ACTIVE | ACTIVE DESKTOP MENU | ||
====================================================== --> | |||
<script> | <script> | ||
| خط ۳٬۹۳۳: | خط ۳٬۳۰۰: | ||
); | ); | ||
const | const links = | ||
document.querySelectorAll( | document.querySelectorAll( | ||
". | ".sidebar-menu a" | ||
); | ); | ||
function | function updateMenu(){ | ||
let current = ""; | let current = ""; | ||
| خط ۳٬۹۴۵: | خط ۳٬۳۱۲: | ||
section => { | section => { | ||
const | const sectionTop = | ||
section.offsetTop - | section.offsetTop - 150; | ||
if( | if( | ||
window.scrollY >= | window.scrollY >= sectionTop | ||
){ | ){ | ||
| خط ۳٬۹۶۰: | خط ۳٬۳۲۷: | ||
); | ); | ||
links.forEach( | |||
link => { | link => { | ||
| خط ۳٬۹۸۵: | خط ۳٬۳۵۲: | ||
window.addEventListener( | window.addEventListener( | ||
"scroll", | "scroll", | ||
updateMenu, | |||
{passive:true} | {passive:true} | ||
); | ); | ||
updateMenu(); | |||
} | } | ||