فراغیب

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

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


<meta charset="UTF-8">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">


<meta name="viewport"
<title>محمدرضا شایق | مدرس خودشناسی</title>
      content="width=device-width, initial-scale=1.0">


<title>
<meta name="description"
چاپ و تبلیغات | چاپ تراکت، پوستر، کارت ویزیت و خدمات تبلیغاتی
content="محمدرضا شایق، مدرس خودشناسی و توسعه فردی؛ آموزش خودشناسی، آگاهی فردی و رشد شخصی.">
</title>
 
<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;


<meta name="description"
    --gold:#f4b942;
content="خدمات چاپ و تبلیغات شامل چاپ تراکت، پوستر، کارت ویزیت، بنر، فلکس، هولوگرام و طراحی لوگو با کیفیت بالا و قیمت مناسب. سفارش چاپ و تبلیغات حرفه‌ای.">
    --gold-dark:#d79b20;
    --gold-light:rgba(244,185,66,.12);


<meta name="keywords"
    --white:#ffffff;
content="چاپ و تبلیغات, چاپ تراکت, چاپ پوستر, چاپ کارت ویزیت, چاپ هولوگرام, چاپ بنر, چاپ فلکس, طراحی لوگو, خدمات چاپ, تبلیغات">
    --text:#f4f4f4;
    --muted:#a1a1a1;


<meta name="robots"
    --border:rgba(255,255,255,.09);
content="index, follow">


<meta name="author"
    --shadow:
content="چاپ و تبلیغات">
        0 15px 45px rgba(0,0,0,.35);


<link rel="canonical"
    --sidebar:105px;
      href="https://example.com/">


<link rel="stylesheet"
    /* فاصله سایدبار از لبه چپ و بالای مانیتور — فقط این عدد را تغییر بده */
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
    --sidebar-offset-top:-20px;
    --sidebar-offset-left:40px;


}


<style>


/* =====================================================
/* =========================================================
   RESET
   RESET
===================================================== */
========================================================= */


* {
*,
*::before,
*::after{
     box-sizing:border-box;
     box-sizing:border-box;
    margin:0;
    padding:0;
}
}


html {
html{
     scroll-behavior:smooth;
     scroll-behavior:smooth;
    scroll-padding-top:20px;
}
}


body {
body{
 
    margin:0;
 
    text-align:center;


     font-family:
     font-family:
         IRANSans,
         "Vazirmatn",
         Tahoma,
         Tahoma,
         Arial,
         Arial,
         sans-serif;
         sans-serif;


     background:#fff;
     background:var(--black);


     color:#202124;
     color:var(--text);


     line-height:1.9;
     line-height:1.9;
خط ۶۶: خط ۱۰۶:
}
}


img {
body.section-locked{
 
    overflow:hidden;
 
}
 
img{


     display:block;
     display:block;
خط ۷۶: خط ۱۲۲:
}
}


a {
a{


     text-decoration:none;
     text-decoration:none;
خط ۸۴: خط ۱۳۰:
}
}


button,
input,
textarea{


/* =====================================================
    font-family:inherit;
  VARIABLES
===================================================== */


:root {
}


    /* =========================
ul{
      رنگ اصلی - سبز
    ========================= */


     --primary: #20b957;
     padding:0;


     /* سبز تیره برای هاور و بخش‌های مهم */
     margin:0;
    --primary-dark: #168a40;


    list-style:none;
}


    /* =========================
      رنگ مکمل سوم - سرمه‌ای
    ========================= */


    --secondary: #16324f;
/* =========================================================
  PAGE
========================================================= */


.page{


     /* =========================
     min-height:100vh;
      طلایی - رنگ تأکیدی
    ========================= */


     --accent: #d4a72c;
     background:var(--black);


    /* طلایی روشن برای جزئیات و آیکون‌ها */
}
    --gold-light: #f2c94c;


    /* طلایی تیره برای هاور */
    --gold-dark: #b88916;


/* =========================================================
  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;
      رنگ‌های خنثی
    ========================= */


     --light: #f7f8fa;
     left:0;


     --white: #ffffff;
     width:var(--sidebar);


     --text: #202124;
     height:100vh;


     --muted: #6b7280;
     background:#000;


     --border: #e5e7eb;
     border-right:
        1px solid rgba(255,255,255,.08);


    z-index:9999;


     /* =========================
     display:flex;
      سایه
    ========================= */


     --shadow:
     flex-direction:column;
        0 8px 20px rgba(0,0,0,.08);


    align-items:center;


     /* =========================
     padding:25px 0;
      عرض اصلی
    ========================= */


    --max-width: 1200px;
}
}




/* =========================================================
  LOGO
========================================================= */


/* =====================================================
.sidebar-logo{
  MAIN CONTAINER
===================================================== */


.container {
    width:100%;


     width:92%;
     text-align:center;


     max-width:var(--max-width);
     padding-bottom:25px;


     margin-left:auto !important;
     margin-bottom:20px;


     margin-right:auto !important;
     border-bottom:
        1px solid rgba(255,255,255,.08);


}
}


.logo-circle{


/* =====================================================
    width:48px;
  HEADER
===================================================== */


.header {
    height:48px;
 
    margin:auto;


     position:sticky;
     border-radius:50%;


     top:0;
     display:grid;


     z-index:1000;
     place-items:center;


     background:rgba(255,255,255,.97);
     background:var(--gold);


     backdrop-filter:blur(12px);
     color:#000;


     border-bottom:1px solid var(--border);
     font-size:1.15rem;
 
    box-shadow:
        0 8px 25px rgba(244,185,66,.2);


}
}


.header-inner {
.sidebar-logo h2{


     min-height:70px;
     display:none;


    display:flex;
}


    align-items:center;
.sidebar-logo span{


     justify-content:space-between;
     display:none;


    gap:15px;
}


}


.logo {
/* =========================================================
  ICON MENU
========================================================= */


    display:flex;
.sidebar-menu{


     align-items:center;
     width:100%;


     gap:10px;
     display:flex;


     font-size:18px;
     flex-direction:column;


     font-weight:900;
     align-items:center;


     white-space:nowrap;
     gap:8px;


}
}


.logo-icon {
.sidebar-menu li{


     width:42px;
     width:100%;
 
    height:42px;


     display:flex;
     display:flex;
    align-items:center;


     justify-content:center;
     justify-content:center;


    background:var(--primary);
}


    color:#fff;
.sidebar-menu a{


     border-radius:12px;
     position:relative;


     font-size:20px;
     width:50px;


}
    height:50px;


.desktop-menu {
    display:grid;


     display:none;
     place-items:center;


}
    border-radius:14px;


.header-call {
    color:#777;


     display:flex;
     font-size:1.05rem;


     align-items:center;
     transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;


    justify-content:center;
}


    width:44px;


    height:44px;
/* Tooltip */


    border-radius:12px;
.sidebar-menu a::after{


     background:#fff0f1;
     content:attr(data-title);


     color:var(--primary);
     position:absolute;


     font-size:18px;
     left:68px;


}
    top:50%;


    transform:
        translateY(-50%)
        translateX(-5px);


/* =====================================================
    white-space:nowrap;
  TOP BANNER
===================================================== */


.top-banner {
    background:#181818;


     width:100%;
     border:
        1px solid rgba(255,255,255,.1);


     text-align:center;
     color:#fff;


     margin:0 auto;
     padding:6px 12px;


     padding: 0px 0px  20px  0px ;
     border-radius:8px;


}
    font-family:
 
        "Vazirmatn",
.top-banner-inner {
        sans-serif;


     display:block;
     font-size:.7rem;


     width:100%;
     font-weight:600;


     max-width:1200px;
     opacity:0;


     margin:0 auto;
     pointer-events:none;


     overflow:hidden;
     transition:
        opacity .2s ease,
        transform .2s ease;


     border-radius:8px;
     box-shadow:
        0 8px 25px rgba(0,0,0,.4);


}
}


.top-banner img {
.sidebar-menu a:hover::after{


     width:100%;
     opacity:1;
 
    height:auto;


     margin:0 auto;
     transform:
        translateY(-50%)
        translateX(0);


}
}


.sidebar-menu a:hover{


/* =====================================================
    color:var(--gold);
  HERO
===================================================== */


.hero {
    background:var(--gold-light);


     padding:20px 0 30px;
     transform:translateX(2px);


}
}


.hero-box {
.sidebar-menu a.active{


     position:relative;
     color:#000;


     min-height:480px;
     background:var(--gold);


     border-radius:24px;
     box-shadow:
        0 8px 25px rgba(244,185,66,.18);
 
}


    overflow:hidden;


    display:flex;
/* =========================================================
  SIDEBAR SOCIAL
========================================================= */


    align-items:center;
.sidebar-bottom{


     justify-content:center;
     margin-top:auto;


     text-align:center;
     width:100%;


     background:
     padding-top:20px;
    linear-gradient(
        135deg,
        rgba(17,24,39,.96),
        rgba(17,24,39,.72)
    );


}
    border-top:
        1px solid rgba(255,255,255,.08);


.hero-bg {
    display:flex;


     position:absolute;
     justify-content:center;


    inset:0;
}


    background-image:
.sidebar-social{
    url("https://images.unsplash.com/photo-1586953208448-b95a79798f07?auto=format&fit=crop&w=1600&q=80");


     background-size:cover;
     display:flex;


     background-position:center;
     flex-direction:column;


     opacity:.38;
     gap:7px;


}
}


.hero-overlay {
.sidebar-social a{


     position:absolute;
     width:38px;


     inset:0;
     height:38px;


     background:
     display:grid;
    linear-gradient(
        90deg,
        rgba(0,0,0,.9),
        rgba(0,0,0,.45)
    );


}
    place-items:center;


.hero-content {
    border-radius:10px;


     position:relative;
     background:#111;


     z-index:2;
     color:#777;


     color:#fff;
     font-size:.8rem;


     width:100%;
     transition:.2s;


    max-width:750px;
}


    margin-left:auto;
.sidebar-social a:hover{


     margin-right:auto;
     color:#000;


     padding:35px 25px;
     background:var(--gold);
 
    text-align:center;


}
}


.hero-badge {


    display:inline-flex;
/* =========================================================
  MAIN
========================================================= */


    align-items:center;
.main-content{


     justify-content:center;
     margin-left:calc(var(--sidebar) + var(--sidebar-offset));


     padding:5px 13px;
     min-width:0;


    margin-bottom:14px;
}


    background:rgba(255,183,3,.15);


    border:1px solid rgba(255,183,3,.5);
/* =========================================================
  MOBILE HEADER
========================================================= */


    color:var(--accent);
.mobile-header{


     border-radius:50px;
     display:none;
 
    font-size:13px;
 
    font-weight:bold;


}
}


.hero h1 {


    font-size:clamp(28px,7vw,54px);
/* =========================================================
  CONTAINER
========================================================= */


    line-height:1.35;
.container{


     margin-bottom:15px;
     width:min(
 
        calc(100% - 70px),
     font-weight:900;
        1120px
     );


     text-align:center;
     margin-inline:auto;


}
}


.hero h1 span {


    color:var(--accent);
/* =========================================================
  SECTION
========================================================= */


}
.section{


.hero p {
    position:relative;


     color:#f1f1f1;
     padding:55px 0;


     font-size:15px;
     min-height:auto;


     max-width:650px;
     display:flex;


     margin:0 auto 25px;
     align-items:center;


     text-align:center;
     background:#080808;


}
}


.hero-buttons {
.section:nth-child(even){


     display:flex;
     background:#0d0d0d;


    flex-direction:column;
}


    align-items:center;


    justify-content:center;
/* =========================================================
  SECTION TITLE
========================================================= */


    gap:10px;
.section-title{


     width:100%;
     width:100%;


     margin:0 auto;
    text-align:center;
 
     margin-bottom:28px;


}
}


.btn {
.section-title small{


     display:flex;
     display:block;


     align-items:center;
     color:var(--gold);


     justify-content:center;
     font-size:.8rem;
 
    font-weight:800;


     gap:9px;
     margin-bottom:8px;


    min-height:50px;
}


    padding:0 20px;
.section-title h2{


     border-radius:12px;
     margin:0;


     font-weight:bold;
     color:#fff;


     transition:.25s;
     font-size:
        clamp(1.9rem,4vw,2.8rem);


}
    font-weight:900;


.btn-primary {
    line-height:1.4;


    background:var(--primary);
}


    color:#fff;
.section-title p{


}
    max-width:650px;


.btn-primary:hover {
    margin:12px 0 0;


     background:var(--primary-dark);
     color:var(--muted);


     transform:translateY(-2px);
     font-size:.88rem;


}
}


.btn-light {


    background:#fff;
/* =========================================================
  HERO
========================================================= */


    color:#111827;
.hero{


}
    background:


.btn-light:hover {
        radial-gradient(
            circle at 70% 25%,
            rgba(244,185,66,.09),
            transparent 32%
        ),


    transform:translateY(-2px);
        #050505;


}
}


.hero-inner{


/* =====================================================
    max-width:900px;
  FEATURES
===================================================== */


.features {
    margin:auto;


     padding:20px 0 40px;
     text-align:center;


}
}


.feature-grid {
.hero-label{


     display:grid;
     display:inline-flex;


     grid-template-columns:repeat(2,1fr);
     align-items:center;


     gap:12px;
     gap:8px;


     justify-items:stretch;
     padding:8px 17px;


}
    border-radius:50px;


.feature {
    background:var(--gold-light);


     width:100%;
     border:
        1px solid rgba(244,185,66,.15);


     background:#fff;
     color:var(--gold);


     border:1px solid var(--border);
     font-size:.78rem;


     border-radius:16px;
     font-weight:800;


     padding:20px 12px;
     margin-bottom:22px;


    text-align:center;
}


     box-shadow:var(--shadow);
.hero-label i{
 
     font-size:.45rem;


}
}


.feature-icon {
.hero h1{


     width:48px;
     margin:0;


     height:48px;
     color:#fff;


     margin:0 auto 10px;
     font-size:
        clamp(2.5rem,7vw,5rem);


     display:flex;
     line-height:1.25;


     align-items:center;
     font-weight:900;


    justify-content:center;
}


    border-radius:14px;
.hero h1 span{


     background:#fff1f2;
     display:block;


     color:var(--primary);
     color:var(--gold);


    font-size:20px;
}


}
.hero-subtitle{


.feature h2 {
    margin-top:12px;


     font-size:15px;
     color:#eee;


     margin-bottom:3px;
     font-size:
        clamp(1.05rem,3vw,1.4rem);


     text-align:center;
     font-weight:700;


}
}


.feature p {
.hero-description{
 
    max-width:680px;


     font-size:12px;
     margin:18px auto 30px;


     color:var(--muted);
     color:#999;


     text-align:center;
     font-size:.95rem;


}
}


.hero-buttons{
    display:flex;


/* =====================================================
    justify-content:flex-start;
  SECTION
===================================================== */


.section {
    flex-wrap:wrap;


     padding:15px 0;
     gap:12px;


}
}


.section-header {
.btn{


     width:100%;
     display:inline-flex;


     margin:0 auto 25px;
     align-items:center;


     text-align:center !important;
     justify-content:center;


}
    gap:8px;


.section-title {
    min-height:50px;


     width:100%;
     padding:10px 23px;


     font-size:25px;
     border-radius:12px;
 
    font-weight:900;


     color:var(--secondary);
     font-size:.82rem;


     margin:0 auto 7px;
     font-weight:800;


     text-align:center !important;
     transition:
        transform .2s ease,
        box-shadow .2s ease;


}
}


.section-title span {
.btn:hover{


     color:var(--primary);
     transform:translateY(-3px);


}
}


.section-description {
.btn-dark{
 
    background:#fff;
 
    color:#000;


    max-width:650px;
}


    margin:0 auto;
.btn-gold{


     color:var(--muted);
     background:var(--gold);


     font-size:14px;
     color:#000;


     text-align:center !important;
     box-shadow:
        0 10px 30px rgba(244,185,66,.12);


}
}


.btn-outline{


/* =====================================================
    border:
  SERVICES
        1px solid rgba(255,255,255,.15);
===================================================== */


.services-grid {
    color:#fff;


     display:grid;
     background:#0d0d0d;
 
}


    grid-template-columns:repeat(2,1fr);


    gap:12px;
/* =========================================================
  HERO INFO
========================================================= */


    justify-items:stretch;
.hero-info{


}
    margin-top:50px;


.service-card {
    display:grid;


     width:100%;
     grid-template-columns:
        repeat(5,1fr);


     background:#fff;
     gap:12px;


    border:1px solid var(--border);
}


    border-radius:18px;
.hero-info-box{


     overflow:hidden;
     padding:18px 10px;


     transition:.3s;
     background:#0e0e0e;


     box-shadow:
     border:
         0 5px 20px rgba(0,0,0,.05);
         1px solid rgba(255,255,255,.08);


     text-align:center;
     border-radius:15px;


}
}


.service-card:hover {
.hero-info-box i{


     transform:translateY(-5px);
     color:var(--gold);


     box-shadow:
     font-size:1.1rem;
        0 12px 30px rgba(0,0,0,.12);


}
}


.service-image {
.hero-info-box strong{


     width:100%;
     display:block;
 
    color:#fff;


     height:145px;
     margin-top:4px;


     overflow:hidden;
     font-size:.9rem;


}
}


.service-image img {
.hero-info-box span{


     width:100%;
     display:block;


     height:100%;
     color:#777;


     object-fit:cover;
     font-size:.68rem;


    transition:.4s;
}


}


.service-card:hover
/* =========================================================
.service-image img {
  ABOUT
========================================================= */


    transform:scale(1.06);
.about-grid{


}
    display:grid;


.service-content {
    grid-template-columns:
        .9fr 1.1fr;


     padding:15px;
     gap:60px;


     text-align:center;
     align-items:center;


}
}


.service-content h3 {
.about-image{
 
    padding:10px;


     font-size:16px;
     background:#111;


     margin-bottom:5px;
     border:
        1px solid rgba(255,255,255,.08);


     text-align:center;
     border-radius:18px;


}
}


.service-content p {
.about-image img{


     color:var(--muted);
     width:100%;


     font-size:12px;
     aspect-ratio:4/5;


     line-height:1.8;
     object-fit:contain;


     margin-bottom:10px;
     border-radius:12px;


     text-align:center;
     background:#161616;


}
}


.service-link {
.about-content h2{


     color:var(--primary);
     margin:0 0 15px;


     font-size:12px;
     color:#fff;


     font-weight:bold;
     font-size:
        clamp(1.8rem,4vw,2.5rem);


    display:flex;
}


    align-items:center;
.about-content p{


     justify-content:center;
     color:#999;


     gap:5px;
     font-size:.9rem;
 
    text-align:center;


}
}


.about-list{


/* =====================================================
    margin-top:22px;
  CATEGORIES
===================================================== */


.category-section {
}
 
.about-list li{


     background:var(--light);
     display:flex;


}
    align-items:flex-start;


.category-grid {
    gap:10px;


     display:grid;
     margin-bottom:11px;


     grid-template-columns:repeat(2,1fr);
     color:#ddd;


     gap:12px;
     font-size:.84rem;


     justify-items:stretch;
     font-weight:600;


}
}


.category {
.about-list i{


     width:100%;
     color:var(--gold);


     min-height:110px;
     margin-top:6px;


    border-radius:17px;
}


    padding:18px;


    background:#fff;
/* =========================================================
  COUNTERS
========================================================= */


    display:flex;
.counters{


     flex-direction:column;
     background:#000 !important;


    justify-content:center;
}


    align-items:center;
.counter-grid{


     text-align:center;
     display:grid;


     border:1px solid var(--border);
     grid-template-columns:
        repeat(6,1fr);


     transition:.3s;
     gap:12px;


}
}


.category:hover {
.counter{
 
    text-align:center;


     border-color:var(--primary);
     padding:28px 10px;


     transform:translateY(-3px);
     border-right:
        1px solid rgba(255,255,255,.08);


}
}


.category i {
.counter:last-child{
 
    font-size:25px;


     color:var(--primary);
     border-right:0;
 
    margin-bottom:7px;


}
}


.category strong {
.counter i{


     font-size:14px;
     color:var(--gold);


     text-align:center;
     font-size:1.35rem;


}
}


.category span {
.counter strong{


     color:var(--muted);
     display:block;


     font-size:11px;
     color:#fff;


     text-align:center;
     font-size:2rem;


}
}


.counter span{


/* =====================================================
    color:#777;
  ABOUT
===================================================== */


.about {
    font-size:.72rem;
 
}


    display:flex;


    flex-direction:column;
/* =========================================================
  SKILLS
========================================================= */


    gap:25px;
.skills-grid{


     align-items:center;
     max-width:1050px;


}
    margin:auto;


.about-image {
    display:grid;


     width:100%;
     grid-template-columns:
        repeat(2,1fr);


     min-height:300px;
     gap:22px 28px;


    border-radius:20px;
}


    overflow:hidden;
.skill{


}
    padding:24px;


.about-image img {
    background:#111;


     width:100%;
     border:
        1px solid rgba(255,255,255,.07);


     height:100%;
     border-radius:18px;


     min-height:300px;
     min-height:230px;


     object-fit:cover;
     text-align:right;


}
}


.about-content {
.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%;
     width:100%;
    height:100%;
    object-fit:cover;
}
.skill-title{


     text-align:center;
     display:flex;


}
    justify-content:space-between;


.about-content h2 {
    color:#eee;


     font-size:25px;
     font-size:.83rem;


     margin-bottom:12px;
     font-weight:800;


     text-align:center;
     margin-bottom:9px;


}
}


.about-content h2 span {
.skill-title span:last-child{


     color:var(--primary);
     color:var(--gold);


}
}


.about-content p {
.skill-bar{


     color:var(--muted);
     height:7px;


     font-size:14px;
     background:#242424;


     margin:0 auto 15px;
     border-radius:50px;


     text-align:center;
     overflow:hidden;
 
    max-width:700px;


}
}


.about-list {
.skill-bar span{


     list-style:none;
     display:block;


     display:grid;
     width:var(--width);


     gap:8px;
     height:100%;


     width:fit-content;
     background:var(--gold);


     max-width:100%;
     border-radius:inherit;
 
    margin:0 auto;
 
    padding:0;


}
}


.about-list li {


    display:flex;
/* =========================================================
  CARDS
========================================================= */


    align-items:center;
.cards-grid{


     justify-content:center;
     width:100%;


     gap:8px;
     display:grid;


     font-size:13px;
     grid-template-columns:
        repeat(3,1fr);


     text-align:center;
     gap:20px;


}
}


.about-list i {
.card{


     color:#16a34a;
     background:#101010;


}
    border:
        1px solid rgba(255,255,255,.08);


    border-radius:18px;


/* =====================================================
    padding:28px 24px;
  SPECIAL
===================================================== */


.special-box {
    box-shadow:
        0 10px 35px rgba(0,0,0,.25);


     background:
     transition:
    linear-gradient(
         transform .2s ease,
         135deg,
         border-color .2s ease;
         #111827,
        #252f3f
    );


    color:#fff;
}


    border-radius:22px;
.card:hover{


     padding:30px 20px;
     transform:translateY(-5px);


     text-align:center;
     border-color:
        rgba(244,185,66,.3);


}
}


.special-grid {
.card-icon{
 
    width:55px;
 
    height:55px;


     display:grid;
     display:grid;


     gap:15px;
     place-items:center;


     justify-items:stretch;
     border-radius:15px;
 
    background:var(--gold-light);


}
    color:var(--gold);


.special-item {
    font-size:1.25rem;


     width:100%;
     margin-bottom:18px;


    display:flex;
}


    flex-direction:column;
.card h3{


     gap:10px;
     margin:0 0 8px;


     align-items:center;
     color:#fff;


     justify-content:center;
     font-size:1.05rem;


    padding:18px 15px;
}


    background:rgba(255,255,255,.06);
.card p{


     border:1px solid rgba(255,255,255,.1);
     margin:0;


     border-radius:15px;
     color:#888;


     text-align:center;
     font-size:.8rem;


}
}


.special-icon {


    width:44px;
/* =========================================================
  COURSE IMAGE
========================================================= */


    min-width:44px;
.course-card{


     height:44px;
     padding:0;


     border-radius:12px;
     overflow:hidden;


    display:flex;
}


    align-items:center;
.card-image{


     justify-content:center;
     padding:9px;


     background:var(--primary);
     background:#080808;


}
}


.special-item h3 {
.card-image img{


     color:#fff;
     width:100%;
 
    aspect-ratio:16/10;


     font-size:15px;
     object-fit:contain;


     margin-bottom:3px;
     background:#151515;


     text-align:center;
     border-radius:12px;


}
}


.special-item p {
.card-content{


     color:#d1d5db;
     padding:22px;


    font-size:12px;
}


    text-align:center;
.card-tag{


}
    display:inline-block;


.white {
    padding:4px 10px;


     color:#fff !important;
     border-radius:50px;


}
    background:var(--gold-light);


    color:var(--gold);


/* =====================================================
    font-size:.66rem;
  BLOG
===================================================== */


.blog-grid {
    font-weight:800;


    display:grid;
}


    grid-template-columns:1fr;


    gap:15px;
/* =========================================================
  TIMELINE
========================================================= */


    justify-items:stretch;
.timeline{


}
    max-width:850px;


.blog-card {
    margin:auto;


    width:100%;
}


    border:1px solid var(--border);
.timeline-item{


     border-radius:18px;
     position:relative;
 
    overflow:hidden;
 
    background:#fff;


     transition:.3s;
     padding:
        0 30px 38px;


     text-align:center;
     border-right:
        2px solid #222;


}
}


.blog-card:hover {
.timeline-item:last-child{
 
    transform:translateY(-4px);


     box-shadow:var(--shadow);
     border-right-color:transparent;


}
}


.blog-image {
.timeline-item::before{


     height:180px;
     content:"";


     overflow:hidden;
     position:absolute;


}
    right:-8px;


.blog-image img {
    top:3px;


     width:100%;
     width:14px;


     height:100%;
     height:14px;


     object-fit:cover;
     border-radius:50%;


}
    background:var(--gold);


.blog-content {
    box-shadow:
 
        0 0 0 4px #0d0d0d;
    padding:16px;
 
    text-align:center;


}
}


.blog-category {
.timeline-year{


     font-size:11px;
     color:var(--gold);


     color:var(--primary);
     font-size:.76rem;


     font-weight:bold;
     font-weight:800;


}
}


.blog-content h3 {
.timeline-item h3{


     font-size:16px;
     margin:5px 0;


     margin:5px 0 7px;
     color:#fff;


     text-align:center;
     font-size:1.05rem;


}
}


.blog-content p {
.timeline-item p{


     font-size:12px;
     color:#888;


     color:var(--muted);
     font-size:.81rem;


     text-align:center;
     margin:0;


}
}




/* =====================================================
/* =========================================================
   CTA
   TESTIMONIAL
===================================================== */
========================================================= */


.cta {
.testimonial{


     width:100%;
     background:#101010;


    padding:20px 0 50px;
}


    display:flex;
.quote{


     justify-content:center;
     color:var(--gold);


     align-items:center;
     font-size:1.8rem;


    text-align:center;
}


}
.testimonial p{


.cta .container {
    color:#999;


     width:92%;
     font-size:.82rem;


    max-width:var(--max-width);
}


    margin-left:auto !important;
.testimonial-person{


     margin-right:auto !important;
     display:flex;


}
    align-items:center;


.cta-box {
    gap:10px;


     width:100%;
     margin-top:18px;


    max-width:1000px;
}


     margin-left:auto !important;
.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;
}


    margin-right:auto !important;
.testimonial-person strong{


     background:
     display:block;
    linear-gradient(
        135deg,
        var(--primary),
        #b91c2c
    );


     color:#fff;
     color:#fff;


     border-radius:22px;
     font-size:.8rem;


    padding:35px 20px;
}


    display:flex;
.testimonial-person span{


     flex-direction:column;
     display:block;
 
    align-items:center;


     justify-content:center;
     color:#666;


     text-align:center;
     font-size:.67rem;


}
}


.cta-box h2 {


    width:100%;
/* =========================================================
  BLOG
========================================================= */


    font-size:25px;
.blog-card{


     margin-bottom:10px;
     padding:0;


     text-align:center;
     overflow:hidden;


}
}


.cta-box p {
.blog-card .card-image img{


     max-width:650px;
     aspect-ratio:16/9;


    font-size:14px;
}


    margin:0 auto 20px;
.blog-card .card-content{


     color:#ffe9eb;
     padding:20px;


    text-align:center;
}


}
.blog-date{


.cta-box .btn {
    color:var(--gold);


     margin-left:auto;
     font-size:.68rem;


     margin-right:auto;
     font-weight:800;


}
}


 
.blog-card h3{
/* =====================================================
  FOOTER
===================================================== */
 
.footer {
 
    background:#111827;


     color:#fff;
     color:#fff;


     padding:45px 0 20px;
     font-size:1rem;


     text-align:center;
     margin:7px 0;


}
}


.footer-grid {


    display:grid;
/* =========================================================
  CTA
========================================================= */


    gap:30px;
.cta{


     justify-items:center;
     background:#000 !important;


}
}


.footer-grid > div {
.cta-inner{


     width:100%;
     max-width:750px;
 
    margin:auto;


     text-align:center;
     text-align:center;
خط ۱٬۳۵۵: خط ۱٬۴۵۲:
}
}


.footer h3 {
.cta h2{


     font-size:17px;
     margin:0 0 10px;


     margin-bottom:12px;
     color:#fff;


     text-align:center;
     font-size:
        clamp(1.9rem,4vw,2.8rem);


}
}


.footer p {
.cta p{


     color:#cbd5e1;
     color:#888;


     font-size:13px;
     font-size:.88rem;


     text-align:center;
     margin-bottom:22px;


}
}


.footer-links {


    list-style:none;
/* =========================================================
  CONTACT
========================================================= */
 
.contact-grid{


     display:grid;
     display:grid;


     gap:6px;
     grid-template-columns:
        .8fr 1.2fr;


     padding:0;
     gap:35px;


    text-align:center;
}


}
.contact-list{


.footer-links li {
    display:grid;


     text-align:center;
     gap:12px;


}
}


.footer-links a {
.contact-item{


     color:#cbd5e1;
     display:flex;


     font-size:13px;
     align-items:center;
 
    gap:14px;


     transition:.2s;
     padding:16px;


}
    background:#111;


.footer-links a:hover {
    border:
        1px solid rgba(255,255,255,.07);


     color:#fff;
     border-radius:14px;


}
}


.contact-item {
.contact-icon{


     display:flex;
     width:45px;


     align-items:center;
     height:45px;


     justify-content:center;
     flex:0 0 45px;


     gap:10px;
     display:grid;


     margin-bottom:10px;
     place-items:center;


     color:#cbd5e1;
     border-radius:12px;


     font-size:13px;
     background:var(--gold-light);


     text-align:center;
     color:var(--gold);


}
}


.contact-item i {
.contact-item small{


     color:var(--accent);
     display:block;


     width:20px;
     color:#666;
 
    font-size:.67rem;


}
}


.social {
.contact-item strong{


     display:flex;
     color:#eee;


     justify-content:center;
     font-size:.8rem;


    gap:8px;
}


    margin-top:15px;
.contact-form{


}
    background:#101010;


.social a {
    padding:28px;


     width:40px;
     border:
        1px solid rgba(255,255,255,.08);


     height:40px;
     border-radius:18px;


    border-radius:10px;
}


    display:flex;
.form-grid{


     align-items:center;
     display:grid;


     justify-content:center;
     grid-template-columns:
        repeat(2,1fr);


     background:rgba(255,255,255,.08);
     gap:15px;
 
    transition:.2s;


}
}


.social a:hover {
.form-group.full{


     background:var(--primary);
     grid-column:1/-1;


}
}


.footer-bottom {
.form-group label{


     margin-top:30px;
     display:block;


     padding-top:15px;
     color:#ddd;


     border-top:1px solid rgba(255,255,255,.1);
     font-size:.74rem;


     text-align:center;
     font-weight:800;


     color:#9ca3af;
     margin-bottom:5px;


    font-size:11px;
}


}
.form-group input,
.form-group textarea{


    width:100%;


/* =====================================================
    padding:12px 14px;
  MOBILE NAV
===================================================== */


.mobile-nav {
    border:
        1px solid rgba(255,255,255,.08);


     position:fixed;
     border-radius:10px;


     bottom:10px;
     background:#080808;


     right:3%;
     color:#fff;


     left:3%;
     outline:none;


     z-index:999;
     font-size:.78rem;


    height:62px;
}


    background:#111827;
.form-group input::placeholder,
.form-group textarea::placeholder{


     border-radius:18px;
     color:#555;


    display:flex;
}


    align-items:center;
.form-group textarea{


     justify-content:space-around;
     min-height:130px;


     box-shadow:
     resize:vertical;
        0 10px 30px rgba(0,0,0,.25);


}
}


.mobile-nav a {
.form-group input:focus,
.form-group textarea:focus{


     color:#cbd5e1;
     border-color:var(--gold);


    display:flex;
}


    flex-direction:column;


    align-items:center;
/* =========================================================
  FOOTER
========================================================= */


    justify-content:center;
.footer{


     gap:1px;
     padding:30px 0;


     font-size:10px;
     background:#000;


}
    color:#666;


.mobile-nav i {
    text-align:center;


     font-size:18px;
     border-top:
        1px solid rgba(255,255,255,.07);


}
}


.mobile-nav .active {
.footer strong{


     color:#fff;
     color:var(--gold);


}
}


.mobile-nav .call {
.footer p{


     width:48px;
     margin:0;


     height:48px;
     font-size:.72rem;


    margin-top:-25px;
}


    border-radius:50%;


    background:var(--primary);
/* =========================================================
  TABLET
========================================================= */


    display:flex;
@media(max-width:900px){


     align-items:center;
     .left-sidebar{


    justify-content:center;
        display:none;


     border:5px solid #fff;
     }


     color:#fff;
     .main-content{


}
        margin-left:0;


    }


/* =====================================================
    .mobile-header{
  TABLET
===================================================== */


@media (min-width:600px) {
        position:sticky;


    .container {
        top:0;


         width:92%;
         z-index:999;


    }
        height:62px;


    .hero-box {
        display:flex;


         min-height:520px;
         align-items:center;


    }
        justify-content:center;


    .hero-content {
        background:#000;


         padding:50px;
         border-bottom:
            1px solid rgba(255,255,255,.08);


     }
     }


     .hero-buttons {
     .mobile-header strong{


         flex-direction:row;
         color:#fff;


         max-width:430px;
         font-size:.88rem;
 
        margin-left:auto;
 
        margin-right:auto;


     }
     }


     .btn {
     .container{


         flex:1;
         width:
            min(
                calc(100% - 45px),
                720px
            );


     }
     }


     .services-grid {
     .section{


         grid-template-columns:repeat(3,1fr);
         padding:45px 0;


     }
     }


     .category-grid {
     .about-grid{


         grid-template-columns:repeat(3,1fr);
         grid-template-columns:1fr;
 
        gap:35px;


     }
     }


     .feature-grid {
     .about-image{


         grid-template-columns:repeat(6,1fr);
         max-width:550px;
 
        margin:auto;


     }
     }


     .blog-grid {
     .cards-grid{


         grid-template-columns:repeat(3,1fr);
         grid-template-columns:
            repeat(2,1fr);


     }
     }


     .special-grid {
     .contact-grid{


         grid-template-columns:repeat(2,1fr);
         grid-template-columns:1fr;


     }
     }


    .about {
}
 
 
/* =========================================================
  MOBILE
========================================================= */
 
@media(max-width:600px){


        flex-direction:row;
    html{


         align-items:center;
         scroll-padding-top:65px;


     }
     }


     .about > * {
     .container{


         flex:1;
         width:
            calc(100% - 28px);


     }
     }


     .about-content {
     .section{
 
        min-height:auto;


         text-align:center;
         padding:35px 0;


     }
     }


}
    .hero{


        padding:
            70px 0 50px;


/* =====================================================
    }
  DESKTOP
===================================================== */


@media (min-width:900px) {
    .hero h1{


    .header-inner {
        font-size:
            clamp(2.2rem,12vw,3.3rem);


        min-height:78px;
    }


     }
     .hero-subtitle{


    .desktop-menu {
        font-size:1rem;


        display:flex;
    }


        align-items:center;
    .hero-description{


         justify-content:center;
         font-size:.86rem;


        gap:25px;
    }


        margin-right:auto;
    .hero-buttons{


         margin-left:30px;
         flex-direction:column;


     }
     }


     .desktop-menu a {
     .hero-buttons .btn{
 
        width:100%;


        font-size:14px;
    }


        font-weight:bold;
    .hero-info{


         color:#374151;
         grid-template-columns:
            repeat(2,1fr);


         transition:.2s;
         margin-top:35px;


     }
     }


     .desktop-menu a:hover {
     .counter-grid{


         color:var(--primary);
         grid-template-columns:
            repeat(2,1fr);


     }
     }


     .header-call {
     .counter{


         width:auto;
         border-right:0;


         padding:0 17px;
         border-bottom:
            1px solid rgba(255,255,255,.08);


        gap:8px;
    }


        font-size:13px;
    .counter strong{


         font-weight:bold;
         font-size:1.6rem;


     }
     }


      
     .skills-grid{


    .mobile-nav {
        grid-template-columns:1fr;


        display:none;
    }


    .skill-image{
        height:155px;
     }
     }


     .hero {
     .cards-grid{


         padding:30px 0 50px;
         grid-template-columns:1fr;


     }
     }


     .hero-content {
     .card{


         padding:70px;
         padding:22px 18px;


     }
     }


     .hero p {
     .card-image{


         font-size:16px;
         padding:8px;


     }
     }


     .services-grid {
     .card-image img{
 
        aspect-ratio:16/10;


         grid-template-columns:repeat(4,1fr);
         object-fit:contain;


     }
     }


     .category-grid {
     .timeline-item{


         grid-template-columns:repeat(5,1fr);
         padding-right:24px;


     }
     }


     .special-grid {
     .form-grid{


         grid-template-columns:repeat(3,1fr);
         grid-template-columns:1fr;


     }
     }


     .footer-grid {
     .form-group.full{


         grid-template-columns:2fr 1fr 1fr 1.5fr;
         grid-column:auto;


     }
     }


}
    .contact-form{


        padding:20px;


/* =====================================================
    }
  LARGE DESKTOP
===================================================== */
 
@media (min-width:1200px) {


     .hero-box {
     .section-title{


         min-height:570px;
         margin-bottom:20px;


     }
     }


     .section {
     .section-title h2{


         padding:65px 0;
         font-size:1.7rem;


     }
     }


     .service-image {
     .section-title p{


         height:180px;
         font-size:.8rem;


     }
     }
خط ۱٬۸۱۷: خط ۱٬۹۵۱:




/* =====================================================
/* =========================================================
   MOBILE FINAL ADJUSTMENTS
   EXTRA SMALL
===================================================== */
========================================================= */


@media (max-width:599px) {
@media(max-width:380px){


     .container {
     .container{


         width:94%;
         width:
            calc(100% - 22px);


     }
     }


     .section-title {
     .hero-info-box{


         font-size:23px;
         padding:14px 7px;
 
        line-height:1.6;


     }
     }


     .section-description {
     .hero-info-box strong{


         font-size:13px;
         font-size:.8rem;
 
        line-height:1.9;


     }
     }


     .about-list {
     .hero-info-box span{


         width:100%;
         font-size:.6rem;
 
        max-width:360px;


     }
     }


    .about-list li {
}
 
 
.card-content,
.contact-item > div:last-child,
.form-group label,
.form-group input,
.form-group textarea{
    text-align:center;
}


        justify-content:center;
.footer{
    text-align:center;
}


     }
.skill-image + .skill-title{
     margin-top:0;
}


    .cta-box {
/* =========================================================
  FINAL ALIGNMENT & SPACING
========================================================= */


        width:100%;
.section > .container{
    width:min(calc(100% - 50px),1180px);
    margin-inline:auto;
}


        padding:30px 18px;
.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;
}


    .cta-box h2 {
.about-grid{
    max-width:1080px;
}


        font-size:22px;
.cards-grid{
    max-width:1180px;
}


@media(max-width:900px){
    .section > .container{
        width:min(calc(100% - 40px),720px);
     }
     }


     .cta-box p {
     .counter-grid{
        grid-template-columns:repeat(3,1fr);
    }
}


         font-size:13px;
@media(max-width:600px){
    .section > .container{
         width:calc(100% - 28px);
    }


    .hero-buttons{
        justify-content:stretch;
     }
     }


    .cards-grid{
        gap:15px;
    }
}
}


</style>
/* =========================================================
  REDUCED MOTION
========================================================= */


</head>
@media(prefers-reduced-motion:reduce){


    *,
    *::before,
    *::after{


<body>
        scroll-behavior:auto !important;


        transition:none !important;


<!-- =====================================================
        animation:none !important;
    HEADER
 
===================================================== -->
    }
 
}
 
</style>
 
</head>
 
 
<body>
 
<div class="page">




<!-- =====================================================
<!-- =====================================================
     TOP BANNER
     LEFT ICON MENU
===================================================== -->
===================================================== -->


<div class="top-banner">
<aside class="left-sidebar">
 


<div class="top-banner-inner">
    <div class="sidebar-logo">


<img
        <div class="logo-circle">
src="https://dl.faraghaib.ir/m/260005-01/baner-01.png"
alt="چاپ و تبلیغات برادران نعمتی">


</div>
            <i class="fa-solid fa-user"></i>


</div>
        </div>


        <h2>
            محمدرضا شایق
        </h2>


        <span>
            مدرس خودشناسی
        </span>


<main id="home">
    </div>




    <nav>


<!-- =====================================================
        <ul class="sidebar-menu">
    FEATURES
===================================================== -->


<section class="features">


<div class="container">
            <li>


<div class="feature-grid">
                <a href="#home"
                  class="active"
                  data-title="خانه">


                    <i class="fa-solid fa-house"></i>


<div class="feature">
                </a>


<div class="feature-icon">
            </li>


<i class="fa-solid fa-print"></i>


</div>
            <li>


<h2>
                <a href="#about"
چاپ با کیفیت
                  data-title="درباره من">
</h2>


<p>
                    <i class="fa-solid fa-user"></i>
استفاده از متریال مناسب
</p>


</div>
                </a>


            </li>




<div class="feature">
            <li>


<div class="feature-icon">
                <a href="#skills"
                  data-title="تخصص‌ها">


<i class="fa-solid fa-bolt"></i>
                    <i class="fa-solid fa-chart-simple"></i>


</div>
                </a>


<h2>
            </li>
تحویل سریع
</h2>


<p>
اجرای سریع سفارشات
</p>


</div>
            <li>


                <a href="#services"
                  data-title="آموزش‌ها">


                    <i class="fa-solid fa-layer-group"></i>


<div class="feature">
                </a>


<div class="feature-icon">
            </li>


<i class="fa-solid fa-tags"></i>


</div>
            <li>


<h2>
                <a href="#courses"
قیمت مناسب
                  data-title="دوره‌ها">
</h2>


<p>
                    <i class="fa-solid fa-graduation-cap"></i>
قیمت‌گذاری منصفانه
</p>


</div>
                </a>


            </li>




<div class="feature">
            <li>


<div class="feature-icon">
                <a href="#experience"
                  data-title="سوابق">


<i class="fa-solid fa-print"></i>
                    <i class="fa-solid fa-briefcase"></i>


</div>
                </a>


<h2>
            </li>
کیفیت بالا
</h2>


<p>
چاپ باکیفیت و ماندگار
</p>


</div>
            <li>


<div class="feature">
                <a href="#testimonials"
                  data-title="نظرات">


<div class="feature-icon">
                    <i class="fa-solid fa-comments"></i>


<i class="fa-solid fa-file"></i>
                </a>


</div>
            </li>


<h2>
طراحی مدرن
</h2>


<p>
            <li>
طراحی بروز و مدرن
</p>


</div>
                <a href="#blog"
                  data-title="مقالات">


                    <i class="fa-solid fa-book-open"></i>


<div class="feature">
                </a>


<div class="feature-icon">
            </li>


<i class="fa-solid fa-headset"></i>


</div>
            <li>


<h2>
                <a href="#contact"
مشاوره تخصصی
                  data-title="ارتباط با من">
</h2>


<p>
                    <i class="fa-solid fa-envelope"></i>
راهنمایی قبل از سفارش
</p>


</div>
                </a>


            </li>


</div>


</div>
        </ul>


</section>
    </nav>
</html>


{{کانتینر خط و دایره/نعمتی}}


<html>
    <div class="sidebar-bottom">
<!-- =====================================================
    SERVICES
===================================================== -->


<section class="section"
        <div class="sidebar-social">
        id="services">


<div class="container">
            <a href="#" title="اینستاگرام">


<div class="section-header">
                <i class="fa-brands fa-instagram"></i>


<h2 class="section-title">
            </a>


خدمات
            <a href="#" title="تلگرام">
<span>
چاپ و تبلیغات
</span>


</h2>
                <i class="fa-brands fa-telegram"></i>


<p class="section-description">
            </a>


انواع خدمات چاپ و تبلیغات برای معرفی بهتر برند،
            <a href="#" title="واتساپ">
کسب‌وکار و محصولات شما با کیفیت حرفه‌ای.


</p>
                <i class="fa-brands fa-whatsapp"></i>


</div>
            </a>


        </div>


<div class="services-grid">
    </div>


</aside>




<article class="service-card">
<!-- =====================================================
    MOBILE HEADER
===================================================== -->


<div class="service-image">
<header class="mobile-header ">


<img
    <strong>
src="https://dl.faraghaib.ir/m/260005-01/260005-01-49.jpg"
        محمدرضا شایق | مدرس خودشناسی
alt="چاپ تراکت تبلیغاتی">
    </strong>


</div>
</header>


<div class="service-content">


<h3>
<!-- =====================================================
چاپ تراکت
    MAIN
</h3>
===================================================== -->


<p>
<main class="main-content full-width-page">
چاپ تراکت تبلیغاتی در انواع سایز و کاغذ
برای معرفی خدمات و محصولات کسب‌وکار.
</p>


<a href="#"
  class="service-link">


مشاهده جزئیات
<!-- =====================================================
    HOME
===================================================== -->


<i class="fa-solid fa-arrow-left"></i>
<section class="section hero"
        id="home">


</a>
    <div class="container">


</div>
        <div class="hero-inner">


</article>


            <div class="hero-label">


                <i class="fa-solid fa-circle"></i>


<article class="service-card">
                مدرس خودشناسی و توسعه فردی


<div class="service-image">
            </div>


<img
src="https://dl.faraghaib.ir/m/260005-01/260005-01-48.jpg"
alt="چاپ پوستر تبلیغاتی">


</div>
            <h1>


<div class="service-content">
                محمدرضا


<h3>
                <span>
چاپ پوستر
                    شایق
</h3>
                </span>


<p>
            </h1>
چاپ پوستر تبلیغاتی با کیفیت بالا برای
فروشگاه‌ها، شرکت‌ها و رویدادهای تبلیغاتی.
</p>


<a href="#"
  class="service-link">


مشاهده جزئیات
            <div class="hero-subtitle">


<i class="fa-solid fa-arrow-left"></i>
                مدرس خودشناسی و آگاهی فردی


</a>
            </div>


</div>


</article>
            <p class="hero-description">


                خودشناسی می‌تواند نقطه شروع یک تغییر واقعی
                در زندگی باشد؛ مسیری برای شناخت بهتر خود،
                توانمندی‌ها، احساسات و انتخاب‌های آگاهانه‌تر.


            </p>


<article class="service-card">


<div class="service-image">
            <div class="hero-buttons">


<img
                <a href="#about"
src="https://dl.faraghaib.ir/m/260005-01/260005-01-47.jpg"
                  class="btn btn-gold">
alt="چاپ کارت ویزیت">


</div>
                    <i class="fa-solid fa-user"></i>


<div class="service-content">
                    درباره من


<h3>
                </a>
چاپ کارت ویزیت
</h3>


<p>
طراحی و چاپ کارت ویزیت حرفه‌ای برای
معرفی برند و ارتباط بهتر با مشتریان.
</p>


<a href="#"
                <a href="#courses"
  class="service-link">
                  class="btn btn-outline">


مشاهده جزئیات
                    <i class="fa-solid fa-graduation-cap"></i>


<i class="fa-solid fa-arrow-left"></i>
                    مشاهده دوره‌ها


</a>
                </a>


</div>
            </div>


</article>


            <div class="hero-info">




<article class="service-card">
                <div class="hero-info-box">


<div class="service-image">
                    <i class="fa-solid fa-brain"></i>


<img
                    <strong>
src="https://dl.faraghaib.ir/m/260005-01/260005-01-52.jpg"
                        خودشناسی
alt="طراحی لوگو">
                    </strong>


</div>
                    <span>
                        شناخت بهتر خود
                    </span>


<div class="service-content">
                </div>


<h3>
طراحی لوگو
</h3>


<p>
                <div class="hero-info-box">
طراحی لوگوی اختصاصی و حرفه‌ای برای
ساخت هویت بصری ماندگار برند شما.
</p>


<a href="#"
                    <i class="fa-solid fa-seedling"></i>
  class="service-link">


مشاهده جزئیات
                    <strong>
                        رشد فردی
                    </strong>


<i class="fa-solid fa-arrow-left"></i>
                    <span>
                        مسیر رشد
                    </span>


</a>
                </div>


</div>


</article>
                <div class="hero-info-box">


                    <i class="fa-solid fa-lightbulb"></i>


                    <strong>
                        آگاهی
                    </strong>


<article class="service-card">
                    <span>
                        انتخاب آگاهانه
                    </span>


<div class="service-image">
                </div>


<img
src="https://dl.faraghaib.ir/m/260005-01/260005-01-04.jpg"
alt="چاپ بنر و فلکس">


</div>
                <div class="hero-info-box">


<div class="service-content">
                    <i class="fa-solid fa-heart"></i>


<h3>
                    <strong>
چاپ بنر و فلکس
                        آرامش
</h3>
                    </strong>


<p>
                    <span>
چاپ بنر و فلکس تبلیغاتی در ابعاد مختلف
                        ارتباط با خود
برای فضای داخلی و محیطی.
                    </span>
</p>


<a href="#"
                </div>
  class="service-link">


مشاهده جزئیات
                <div class="hero-info-box">


<i class="fa-solid fa-arrow-left"></i>
                    <i class="fa-solid fa-bullseye"></i>


</a>
                    <strong>
                        تمرکز
                    </strong>


</div>
                    <span>
                        هدفمندی بیشتر
                    </span>


</article>
                </div>




            </div>


<article class="service-card">
        </div>


<div class="service-image">
    </div>


<img
</section>
src="https://dl.faraghaib.ir/m/260005-01/260005-01-51.jpg"
alt="چاپ هولوگرام">


</div>


<div class="service-content">
<!-- =====================================================
    ABOUT
===================================================== -->


<h3>
<section class="section"
چاپ هولوگرام
        id="about">
</h3>


<p>
    <div class="container">
چاپ هولوگرام تبلیغاتی و امنیتی برای
برندینگ و افزایش اعتبار محصولات.
</p>


<a href="#"
        <div class="section-title">
  class="service-link">


مشاهده جزئیات
            <small>
                درباره من
            </small>


<i class="fa-solid fa-arrow-left"></i>
            <h2>
                شناخت خود، آغاز مسیر تغییر
            </h2>


</a>
        </div>


</div>


</article>
        <div class="about-grid">




            <div class="about-image">


<article class="service-card">
                <img
                src="https://dl.faraghaib.ir/m/260021-01/260021-01-16.png"
                alt="محمدرضا شایق مدرس خودشناسی"
                loading="lazy">


<div class="service-image">
            </div>


<img
src="https://dl.faraghaib.ir/m/260005-01/260005-01-39.jpg"
alt="چاپ کاتالوگ">


</div>
            <div class="about-content" style="text-align:right;">


<div class="service-content">
                <h2>
                    همراه شما در مسیر خودشناسی
                </h2>


<h3>
                <p>
چاپ کاتالوگ
</h3>


<p>
                    من محمدرضا شایق، مدرس خودشناسی هستم
طراحی و چاپ کاتالوگ حرفه‌ای برای
                    و تلاش می‌کنم مفاهیم خودشناسی و رشد فردی
معرفی محصولات و خدمات شرکت‌ها.
                    را به شکلی ساده، کاربردی و قابل استفاده
</p>
                    در زندگی روزمره آموزش دهم.


<a href="#"
                </p>
  class="service-link">


مشاهده جزئیات
                <p>


<i class="fa-solid fa-arrow-left"></i>
                    هدف این آموزش‌ها کمک به شناخت بهتر افکار،
                    احساسات، توانمندی‌ها، ارزش‌ها و الگوهای
                    رفتاری است تا هر فرد بتواند مسیر زندگی خود
                    را آگاهانه‌تر انتخاب کند.


</a>
                </p>


</div>


</article>
                <ul class="about-list">


                    <li>
                        <i class="fa-solid fa-check"></i>
                        شناخت بهتر ویژگی‌ها و توانمندی‌های فردی
                    </li>


                    <li>
                        <i class="fa-solid fa-check"></i>
                        افزایش آگاهی نسبت به افکار و احساسات
                    </li>


<article class="service-card">
                    <li>
                        <i class="fa-solid fa-check"></i>
                        شناخت موانع رشد شخصی
                    </li>


<div class="service-image">
                    <li>
                        <i class="fa-solid fa-check"></i>
                        حرکت آگاهانه‌تر در مسیر زندگی
                    </li>


<img
                </ul>
src="https://dl.faraghaib.ir/m/260005-01/260005-01-42.jpg"
alt="خدمات تبلیغات">


</div>
            </div>


<div class="service-content">
        </div>


<h3>
    </div>
خدمات تبلیغات
</h3>


<p>
</section>
طراحی و اجرای انواع تبلیغات چاپی برای
افزایش دیده‌شدن کسب‌وکار شما.
</p>


<a href="#"
  class="service-link">


مشاهده جزئیات
<!-- =====================================================
    COUNTERS
===================================================== -->


<i class="fa-solid fa-arrow-left"></i>
<section class="section counters">


</a>
    <div class="container">


</div>
        <div class="counter-grid">


</article>


            <div class="counter">


</div>
                <i class="fa-solid fa-users"></i>


</div>
                <strong>
                    500+
                </strong>


</section>
                <span>
                    شرکت‌کننده
                </span>


            </div>




<!-- =====================================================
            <div class="counter">
    CATEGORIES
===================================================== -->


<section class="section category-section"
                <i class="fa-solid fa-book"></i>
        id="categories">


<div class="container">
                <strong>
                    20+
                </strong>


<div class="section-header">
                <span>
                    دوره و کارگاه
                </span>


<h2 class="section-title">
            </div>


دسته‌بندی
<span>
خدمات
</span>


</h2>
            <div class="counter">


<p class="section-description">
                <i class="fa-solid fa-clock"></i>


محصولات و خدمات تبلیغاتی مورد نیاز کسب‌وکار خود را انتخاب کنید.
                <strong>
                    1000+
                </strong>


</p>
                <span>
                    ساعت آموزش
                </span>


</div>
            </div>




<div class="category-grid">
            <div class="counter">


                <i class="fa-solid fa-star"></i>


<a href="#"
                <strong>
  class="category">
                    95%
                </strong>


<i class="fa-solid fa-file-lines"></i>
                <span>
                    رضایت
                </span>


<strong>
            </div>
چاپ تراکت
</strong>


<span>
            <div class="counter">
تبلیغات مستقیم
</span>


</a>
                <i class="fa-solid fa-chalkboard-user"></i>


                <strong>
                    50+
                </strong>


                <span>
                    کارگاه آموزشی
                </span>


<a href="#"
            </div>
  class="category">


<i class="fa-solid fa-image"></i>
            <div class="counter">


<strong>
                <i class="fa-solid fa-award"></i>
چاپ پوستر
</strong>


<span>
                <strong>
تبلیغات محیطی
                    10+
</span>
                </strong>


</a>
                <span>
                    سال تجربه
                </span>


            </div>




<a href="#"
        </div>
  class="category">


<i class="fa-regular fa-address-card"></i>
    </div>


<strong>
</section>
کارت ویزیت
</strong>


<span>
معرفی برند
</span>
</a>


<!-- =====================================================
    SKILLS
===================================================== -->


<section class="section"
        id="skills">


<a href="#"
    <div class="container">
  class="category">


<i class="fa-solid fa-rectangle-ad"></i>
        <div class="section-title">


<strong>
            <small>
بنر و فلکس
                تخصص‌ها
</strong>
            </small>


<span>
            <h2>
تبلیغات محیطی
                حوزه‌های تخصصی
</span>
            </h2>


</a>
        </div>




        <div class="skills-grid">


<a href="#"
  class="category">


<i class="fa-solid fa-pen-nib"></i>
            <div class="skill">


<strong>
                <div class="skill-image">
طراحی لوگو
                    <img src="https://dl.faraghaib.ir/m/260021-01/260021-01-17.png"
</strong>
                        alt="تصویر حوزه تخصصی خودشناسی"
                        loading="lazy">
                </div>


<span>
                <div class="skill-title">
هویت بصری
</span>


</a>
                    <span>
                        خودشناسی
                    </span>


                    <span>
                        95%
                    </span>


                </div>


<a href="#"
                <div class="skill-bar">
  class="category">


<i class="fa-solid fa-book-open"></i>
                    <span style="--width:95%"></span>


<strong>
                </div>
کاتالوگ
</strong>


<span>
            </div>
معرفی محصولات
</span>


</a>


            <div class="skill">


                <div class="skill-image">
                    <img src="https://dl.faraghaib.ir/m/260021-01/260021-01-18.png"
                        alt="تصویر حوزه تخصصی خودشناسی"
                        loading="lazy">
                </div>


<a href="#"
                <div class="skill-title">
  class="category">


<i class="fa-solid fa-ticket"></i>
                    <span>
                        توسعه فردی
                    </span>


<strong>
                    <span>
چاپ لیبل
                        90%
</strong>
                    </span>


<span>
                </div>
برچسب محصولات
</span>


</a>
                <div class="skill-bar">


                    <span style="--width:90%"></span>


                </div>


<a href="#"
            </div>
  class="category">


<i class="fa-solid fa-stamp"></i>


<strong>
            <div class="skill">
هولوگرام
</strong>


<span>
                <div class="skill-image">
چاپ امنیتی
                    <img src="https://dl.faraghaib.ir/m/260021-01/260021-01-19.png"
</span>
                        alt="تصویر حوزه تخصصی خودشناسی"
                        loading="lazy">
                </div>


</a>
                <div class="skill-title">


                    <span>
                        آموزش و کارگاه
                    </span>


                    <span>
                        92%
                    </span>


<a href="#"
                </div>
  class="category">


<i class="fa-solid fa-envelope"></i>
                <div class="skill-bar">


<strong>
                    <span style="--width:92%"></span>
پاکت و سربرگ
</strong>


<span>
                </div>
ملزومات اداری
</span>


</a>
            </div>




            <div class="skill">


<a href="#"
                <div class="skill-image">
  class="category">
                    <img src="https://dl.faraghaib.ir/m/260021-01/260021-01-20.png"
                        alt="تصویر حوزه تخصصی خودشناسی"
                        loading="lazy">
                </div>


<i class="fa-solid fa-gift"></i>
                <div class="skill-title">


<strong>
                    <span>
محصولات تبلیغاتی
                        مهارت‌های فردی
</strong>
                    </span>


<span>
                    <span>
هدایای سازمانی
                        88%
</span>
                    </span>


</a>
                </div>


                <div class="skill-bar">


</div>
                    <span style="--width:88%"></span>


</div>
                </div>


</section>
            </div>




        </div>


    </div>


</section>




<!-- =====================================================
<!-- =====================================================
     ABOUT
     SERVICES
===================================================== -->
===================================================== -->


<section class="section"
<section class="section"
         id="about">
         id="services">
 
    <div class="container">


<div class="container">
        <div class="section-title">


<div class="section-header">
            <small>
                آموزش‌ها
            </small>


<h2 class="section-title">
            <h2>
                در چه زمینه‌هایی آموزش می‌دهم؟
            </h2>


درباره
            <p>
<span>
                آموزش‌هایی برای شناخت بهتر خود و ساختن
دستگاه های چاپ
                نگاه آگاهانه‌تر به زندگی.
</span>
            </p>


</h2>
        </div>


<p class="section-description">


ارائه خدمات تخصصی چاپ، طراحی و تبلیغات برای معرفی حرفه‌ای کسب‌وکارها.
        <div class="cards-grid">


</p>


</div>
            <article class="card">


                <div class="card-icon">
                    <i class="fa-solid fa-brain"></i>
                </div>


</html>
                <h3>
                    خودشناسی
                </h3>


{{کانتینر ترکیبی/نعمتی}}
                <p>
                    شناخت ویژگی‌ها، افکار، احساسات،
                    ارزش‌ها و الگوهای رفتاری.
                </p>


            </article>


<html>


            <article class="card">


                <div class="card-icon">
                    <i class="fa-solid fa-seedling"></i>
                </div>


                <h3>
                    رشد فردی
                </h3>


</div>
                <p>
                    پیدا کردن موانع رشد و ایجاد تغییرات
                    مثبت و پایدار در زندگی.
                </p>


</section>
            </article>




            <article class="card">


<!-- =====================================================
                <div class="card-icon">
    SPECIAL
                    <i class="fa-solid fa-compass"></i>
===================================================== -->
                </div>


<section class="section">
                <h3>
                    مسیر زندگی
                </h3>


<div class="container">
                <p>
                    شناخت علایق، ارزش‌ها و توانمندی‌ها
                    برای انتخاب مسیر مناسب‌تر.
                </p>


<div class="special-box">
            </article>




<div class="section-header">
            <article class="card">


<h2 class="section-title"
                <div class="card-icon">
    style="color:#fff">
                    <i class="fa-solid fa-lightbulb"></i>
                </div>


مزایای همکاری با ما
                <h3>
                    آگاهی فردی
                </h3>


</h2>
                <p>
                    افزایش شناخت نسبت به انتخاب‌ها،
                    رفتارها و الگوهای ذهنی.
                </p>


<p class="section-description"
            </article>
  style="color:#cbd5e1">


برای یک تبلیغ حرفه‌ای، فقط چاپ کافی نیست؛
کیفیت طراحی، انتخاب متریال و اجرای دقیق اهمیت دارد.


</p>
            <article class="card">


</div>
                <div class="card-icon">
                    <i class="fa-solid fa-comments"></i>
                </div>


                <h3>
                    کارگاه آموزشی
                </h3>


<div class="special-grid">
                <p>
                    برگزاری دوره‌ها و کارگاه‌های آموزشی
                    در زمینه خودشناسی و توسعه فردی.
                </p>


            </article>


<div class="special-item">


<div class="special-icon">
            <article class="card">


<i class="fa-solid fa-medal"></i>
                <div class="card-icon">
                    <i class="fa-solid fa-heart"></i>
                </div>


</div>
                <h3>
                    ارتباط با خود
                </h3>


<div>
                <p>
                    ایجاد رابطه‌ای آگاهانه‌تر با خود،
                    نیازها و خواسته‌های شخصی.
                </p>


<h3>
            </article>
کیفیت چاپ بالا
</h3>


<p>
تلاش برای ارائه چاپی تمیز، دقیق و متناسب با نیاز هر پروژه.
</p>


</div>
        </div>


</div>
    </div>


</section>




<div class="special-item">
<!-- =====================================================
    COURSES
===================================================== -->
 
<section class="section"
        id="courses">


<div class="special-icon">
    <div class="container">


<i class="fa-solid fa-clock"></i>
        <div class="section-title">


</div>
            <small>
                دوره‌ها
            </small>


<div>
            <h2>
                دوره‌های آموزشی
            </h2>


<h3>
        </div>
تحویل سریع سفارش
</h3>


<p>
مدیریت دقیق مراحل سفارش برای کاهش زمان آماده‌سازی.
</p>


</div>
        <div class="cards-grid">


</div>


            <article class="card course-card">


                <div class="card-image">


<div class="special-item">
                    <img
                    src="https://dl.faraghaib.ir/m/260021-01/260021-01-04.jpg"
                    alt="دوره خودشناسی"
                    loading="lazy">


<div class="special-icon">
                </div>


<i class="fa-solid fa-comments"></i>
                <div class="card-content">


</div>
                    <span class="card-tag">
                        خودشناسی
                    </span>


<div>
                    <h3>
                        شروع مسیر خودشناسی
                    </h3>


<h3>
                    <p>
مشاوره قبل از چاپ
                        آشنایی با مفاهیم پایه خودشناسی
</h3>
                        و شناخت بهتر خود.
                    </p>


<p>
                </div>
کمک به انتخاب مناسب‌ترین روش چاپ، جنس و ابعاد.
</p>


</div>
            </article>


</div>


            <article class="card course-card">


                <div class="card-image">


<div class="special-item">
                    <img
                    src="https://dl.faraghaib.ir/m/260021-01/260021-01-05.jpg"
                    alt="دوره توسعه فردی"
                    loading="lazy">


<div class="special-icon">
                </div>


<i class="fa-solid fa-palette"></i>
                <div class="card-content">


</div>
                    <span class="card-tag">
                        توسعه فردی
                    </span>


<div>
                    <h3>
                        مسیر رشد فردی
                    </h3>


<h3>
                    <p>
طراحی خلاقانه
                        شناخت موانع رشد و ایجاد مسیر
</h3>
                        عملی برای پیشرفت شخصی.
                    </p>


<p>
                </div>
طراحی تبلیغات متناسب با هویت بصری و نوع فعالیت برند.
</p>


</div>
            </article>


</div>


            <article class="card course-card">


                <div class="card-image">


<div class="special-item">
                    <img
                    src="https://dl.faraghaib.ir/m/260021-01/260021-01-06.jpg"
                    alt="کارگاه خودشناسی"
                    loading="lazy">


<div class="special-icon">
                </div>


<i class="fa-solid fa-layer-group"></i>
                <div class="card-content">


</div>
                    <span class="card-tag">
                        کارگاه
                    </span>


<div>
                    <h3>
                        آگاهی و انتخاب
                    </h3>


<h3>
                    <p>
تنوع خدمات
                        بررسی الگوهای ذهنی و رفتاری
</h3>
                        برای انتخاب‌های آگاهانه‌تر.
                    </p>


<p>
                </div>
از کارت ویزیت و تراکت تا بنر، هولوگرام و محصولات تبلیغاتی.
</p>


</div>
            </article>


</div>


            <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="special-item">
                <div class="card-content">
                    <span class="card-tag">مهارت فردی</span>


<div class="special-icon">
                    <h3>تقویت مهارت‌های فردی</h3>


<i class="fa-solid fa-handshake"></i>
                    <p>
                        تمرین مهارت‌های کاربردی برای
                        ارتباط بهتر با خود و دیگران.
                    </p>
                </div>


</div>
            </article>


<div>
            <article class="card course-card">


<h3>
                <div class="card-image">
همراه کسب‌وکار شما
                    <img
</h3>
                    src="https://dl.faraghaib.ir/m/260021-01/260021-01-08.jpg"
                    alt="دوره آگاهی فردی"
                    loading="lazy">
                </div>


<p>
                <div class="card-content">
هدف ما ایجاد یک همکاری مطمئن و بلندمدت با مشتریان است.
                    <span class="card-tag">آگاهی</span>
</p>


</div>
                    <h3>افزایش آگاهی فردی</h3>


</div>
                    <p>
                        شناخت الگوهای ذهنی و ایجاد
                        انتخاب‌های آگاهانه‌تر در زندگی.
                    </p>
                </div>


            </article>


</div>
            <article class="card course-card">


</div>
                <div class="card-image">
                    <img
                    src="https://dl.faraghaib.ir/m/260021-01/260021-01-09.jpg"
                    alt="کارگاه رشد فردی"
                    loading="lazy">
                </div>


</div>
                <div class="card-content">
                    <span class="card-tag">رشد فردی</span>


</section>
                    <h3>کارگاه مسیر رشد</h3>


                    <p>
                        بررسی موانع رشد و ساختن مسیر
                        عملی برای پیشرفت شخصی.
                    </p>
                </div>
            </article>
        </div>
    </div>
</section>




<!-- =====================================================
<!-- =====================================================
     BLOG
     EXPERIENCE
===================================================== -->
===================================================== -->


<section class="section"
<section class="section"
         id="blog">
         id="experience">
 
    <div class="container">


<div class="container">
        <div class="section-title">


<div class="section-header">
            <small>
                سوابق
            </small>


<h2 class="section-title">
            <h2>
                مسیر حرفه‌ای
            </h2>


آخرین
        </div>
<span>
مقالات چاپ و تبلیغات
</span>


</h2>


<p class="section-description">
        <div class="timeline">


مطالب آموزشی و کاربردی درباره چاپ،
طراحی و روش‌های تبلیغات مؤثر.


</p>
            <div class="timeline-item">


</div>
                <span class="timeline-year">
                    ۱۴۰۲ — اکنون
                </span>


                <h3>
                    مدرس خودشناسی و توسعه فردی
                </h3>


<div class="blog-grid">
                <p>
                    برگزاری دوره‌ها و کارگاه‌های آموزشی
                    در زمینه خودشناسی و رشد فردی.
                </p>


            </div>


<article class="blog-card">


<div class="blog-image">
            <div class="timeline-item">


<img
                <span class="timeline-year">
src="https://dl.faraghaib.ir/m/260005-01/260005-01-45.jpg"
                    ۱۳۹۹ — ۱۴۰۲
alt="راهنمای انتخاب چاپ تراکت">
                </span>


</div>
                <h3>
                    مدرس و برگزارکننده کارگاه
                </h3>


<div class="blog-content">
                <p>
                    طراحی و اجرای برنامه‌های آموزشی
                    با تمرکز بر آگاهی و مهارت‌های فردی.
                </p>


<span class="blog-category">
            </div>
چاپ
</span>


<h3>
چگونه بهترین نوع چاپ تراکت را انتخاب کنیم؟
</h3>


<p>
            <div class="timeline-item">
آشنایی با انواع کاغذ، ابعاد و نکات مهم برای چاپ تراکت تبلیغاتی.
</p>


</div>
                <span class="timeline-year">
                    ۱۳۹۷ — ۱۳۹۹
                </span>


</article>
                <h3>
                    آغاز فعالیت آموزشی
                </h3>


                <p>
                    آغاز فعالیت تخصصی در زمینه آموزش،
                    مطالعه و توسعه فردی.
                </p>


            </div>


<article class="blog-card">


<div class="blog-image">
        </div>


<img
    </div>
src="https://dl.faraghaib.ir/m/260005-01/260005-01-04.jpg"
alt="نکات طراحی پوستر تبلیغاتی">


</div>
</section>


<div class="blog-content">


<span class="blog-category">
<!-- =====================================================
طراحی
    TESTIMONIALS
</span>
===================================================== -->


<h3>
<section class="section"
اصول طراحی یک پوستر تبلیغاتی جذاب
        id="testimonials">
</h3>


<p>
    <div class="container">
با رعایت چند نکته ساده می‌توان پوستر تبلیغاتی مؤثرتری طراحی کرد.
</p>


</div>
        <div class="section-title">


</article>
            <small>
                نظرات
            </small>


            <h2>
                تجربه همراهان
            </h2>


        </div>


<article class="blog-card">


<div class="blog-image">
        <div class="cards-grid">


<img
src="https://dl.faraghaib.ir/m/260005-01/260005-01-46.jpg"
alt="اهمیت طراحی لوگو برای برند">


</div>
            <article class="card testimonial">


<div class="blog-content">
                <div class="quote">
                    <i class="fa-solid fa-quote-right"></i>
                </div>


<span class="blog-category">
                <p>
برندینگ
                    شرکت در دوره باعث شد نگاه متفاوتی
</span>
                    نسبت به خودم و تصمیم‌هایم پیدا کنم.
                </p>


<h3>
                <div class="testimonial-person">
چرا طراحی لوگو برای کسب‌وکار اهمیت دارد؟
</h3>


<p>
                    <div class="testimonial-avatar" aria-label="کارکتر خانم">
لوگو یکی از مهم‌ترین عناصر هویت بصری و معرفی برند است.
                        <i class="fa-solid fa-person-dress"></i>
</p>
                    </div>


</div>
                    <div>


</article>
                        <strong>
                            سارا احمدی
                        </strong>


                        <span>
                            شرکت‌کننده دوره
                        </span>


</div>
                    </div>


</div>
                </div>


</section>
            </article>




            <article class="card testimonial">


<!-- =====================================================
                <div class="quote">
    CTA
                    <i class="fa-solid fa-quote-right"></i>
===================================================== -->
                </div>


<section class="cta">
                <p>
                    محتوای دوره بسیار کاربردی بود و کمک کرد
                    نقاط قوت خودم را بهتر بشناسم.
                </p>


<div class="container">
                <div class="testimonial-person">


<div class="cta-box">
                    <div class="testimonial-avatar" aria-label="کارکتر آقا">
                        <i class="fa-solid fa-person"></i>
                    </div>


<h2>
                    <div>


برای تبلیغات کسب‌وکارتان آماده‌اید؟
                        <strong>
                            علی رضایی
                        </strong>


</h2>
                        <span>
                            شرکت‌کننده کارگاه
                        </span>


<p>
                    </div>


برای دریافت مشاوره، استعلام قیمت و ثبت سفارش
                </div>
چاپ و تبلیغات با ما تماس بگیرید.


</p>
            </article>


<a
href="tel:+989900000000"
class="btn btn-light">


<i class="fa-solid fa-phone"></i>
            <article class="card testimonial">


تماس با ما
                <div class="quote">
                    <i class="fa-solid fa-quote-right"></i>
                </div>


</a>
                <p>
                    فضای آموزشی خوب و محتوای دوره باعث شد
                    بعضی از الگوهای رفتاری خودم را بهتر ببینم.
                </p>


</div>
                <div class="testimonial-person">


</div>
                    <div class="testimonial-avatar" aria-label="کارکتر خانم">
                        <i class="fa-solid fa-person-dress"></i>
                    </div>


</section>
                    <div>


                        <strong>
                            مریم کریمی
                        </strong>


</main>
                        <span>
                            شرکت‌کننده دوره
                        </span>


                    </div>
                </div>
            </article>
        </div>
    </div>
</section>




<!-- =====================================================
<!-- =====================================================
     FOOTER
     BLOG
===================================================== -->
===================================================== -->


<footer class="footer"
<section class="section"
         id="contact">
        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>


<div class="footer-bottom">
                    <p>
                        نگاهی ساده به مفهوم خودشناسی
                        و اهمیت آن در زندگی.
                    </p>


© کلیه حقوق این وب‌سایت برای مجموعه چاپ و تبلیغات محفوظ است.
                </div>


            </article>




</div>
            <article class="card blog-card">


</footer>
                <div class="card-image">


                    <img
                    src="https://dl.faraghaib.ir/m/260021-01/260021-01-10.jpg"
                    alt="رشد فردی">


                </div>


<!-- =====================================================
                <div class="card-content">
    MOBILE NAV
===================================================== -->


<nav class="mobile-nav"
                    <span class="blog-date">
    aria-label="منوی موبایل">
                        رشد فردی
                    </span>


                    <h3>
                        مسیر رشد فردی را چگونه پیدا کنیم؟
                    </h3>


<a href="#home"
                    <p>
  class="active">
                        چند نکته برای شناخت بهتر اهداف
                        و مسیر شخصی.
                    </p>


<i class="fa-solid fa-house"></i>
                </div>


<span>
            </article>
خانه
</span>


</a>


            <article class="card blog-card">


<a href="#services">
                <div class="card-image">


<i class="fa-solid fa-print"></i>
                    <img
                    src="https://dl.faraghaib.ir/m/260021-01/260021-01-01.jpg"
                    alt="انتخاب آگاهانه">


<span>
                </div>
خدمات
</span>


</a>
                <div class="card-content">


                    <span class="blog-date">
                        آگاهی
                    </span>


<a
                    <h3>
href="tel:+989900000000"
                        انتخاب آگاهانه چگونه شکل می‌گیرد؟
class="call"
                    </h3>
aria-label="تماس">


<i class="fa-solid fa-phone"></i>
                    <p>
                        نقش آگاهی در تصمیم‌های مهم
                        و انتخاب‌های زندگی.
                    </p>


</a>
                </div>


            </article>


<a href="#about">


<i class="fa-solid fa-building"></i>
        </div>


<span>
    </div>
درباره ما
</span>


</a>
</section>




<a href="#contact">
<!-- =====================================================
    CTA
===================================================== -->


<i class="fa-solid fa-location-dot"></i>
<section class="section cta">


<span>
    <div class="container">
تماس
</span>


</a>
        <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"
        );
    }
);


</nav>
</script>




برگرفته از «https://fa.faraghaib.ir/wiki/تست»