فراغیب

تست: تفاوت میان نسخه‌ها

→ تفاوت با ویرایش قدیمی‌تر
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
 
(۷۶ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد)
خط ۱: خط ۱:


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