فراغیب

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

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


<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
========================================================= */


<meta name="description"
:root{
content="خدمات چاپ و تبلیغات شامل چاپ تراکت، پوستر، کارت ویزیت، بنر، فلکس، هولوگرام و طراحی لوگو با کیفیت بالا و قیمت مناسب. سفارش چاپ و تبلیغات حرفه‌ای.">
 
    --black:#050505;
    --black-2:#0c0c0c;
    --black-3:#141414;
 
    --gold:#f4b942;
    --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 {
}


    --primary:#e63946;
ul{


     --primary-dark:#c62835;
     padding:0;


     --secondary:#111827;
     margin:0;


     --accent:#ffb703;
     list-style:none;


    --light:#f7f8fa;
}
 
    --white:#ffffff;


    --text:#202124;


    --muted:#6b7280;
/* =========================================================
  PAGE
========================================================= */


    --border:#e5e7eb;
.page{


     --shadow:
     min-height:100vh;
        0 8px 30px rgba(0,0,0,.08);


     --max-width:1200px;
     background:var(--black);


}
}




/* =====================================================
/* =========================================================
   MAIN CONTAINER
   LEFT ICON SIDEBAR
===================================================== */
========================================================= */


.container {
.left-sidebar{
margin-top:calc(var(--sidebar) + var(--sidebar-offset-top));
margin-left:calc(var(--sidebar) + var(--sidebar-offset-left));


     width:92%;
     position:fixed;


     max-width:var(--max-width);
     top:0;


     margin-left:auto !important;
     left:0;


     margin-right:auto !important;
     width:var(--sidebar);


}
    height:100vh;


    background:#000;


/* =====================================================
    border-right:
  HEADER
        1px solid rgba(255,255,255,.08);
===================================================== */


.header {
    z-index:9999;


     position:sticky;
     display:flex;


     top:0;
     flex-direction:column;


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


     background:rgba(255,255,255,.97);
     padding:25px 0;


    backdrop-filter:blur(12px);
}


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


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


.header-inner {
.sidebar-logo{


     min-height:70px;
     width:100%;


     display:flex;
     text-align:center;


     align-items:center;
     padding-bottom:25px;


     justify-content:space-between;
     margin-bottom:20px;


     gap:15px;
     border-bottom:
        1px solid rgba(255,255,255,.08);


}
}


.logo {
.logo-circle{


     display:flex;
     width:48px;


     align-items:center;
     height:48px;


     gap:10px;
     margin:auto;


     font-size:18px;
     border-radius:50%;


     font-weight:900;
     display:grid;


     white-space:nowrap;
     place-items:center;


}
    background:var(--gold);


.logo-icon {
    color:#000;


     width:42px;
     font-size:1.15rem;


     height:42px;
     box-shadow:
        0 8px 25px rgba(244,185,66,.2);


    display:flex;
}


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


     justify-content:center;
     display:none;


    background:var(--primary);
}


    color:#fff;
.sidebar-logo span{


     border-radius:12px;
     display:none;
 
    font-size:20px;


}
}


.desktop-menu {


    display:none;
/* =========================================================
  ICON MENU
========================================================= */


}
.sidebar-menu{


.header-call {
    width:100%;


     display:flex;
     display:flex;
    flex-direction:column;


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


     justify-content:center;
     gap:8px;


    width:44px;
}


    height:44px;
.sidebar-menu li{


     border-radius:12px;
     width:100%;


     background:#fff0f1;
     display:flex;


     color:var(--primary);
     justify-content:center;
 
    font-size:18px;


}
}


.sidebar-menu a{


/* =====================================================
    position:relative;
  TOP BANNER
===================================================== */


.top-banner {
    width:50px;


     width:100%;
     height:50px;


     text-align:center;
     display:grid;


     margin:0 auto;
     place-items:center;


     padding: 0 0 80 0 ;
     border-radius:14px;


}
    color:#777;


.top-banner-inner {
    font-size:1.05rem;


     display:block;
     transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;


    width:100%;
}


    max-width:1200px;


    margin:0 auto;
/* Tooltip */


    overflow:hidden;
.sidebar-menu a::after{


     border-radius:8px;
     content:attr(data-title);


}
    position:absolute;


.top-banner img {
    left:68px;


     width:100%;
     top:50%;


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


     margin:0 auto;
     white-space:nowrap;


}
    background:#181818;


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


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


.hero {
    padding:6px 12px;


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


}
    font-family:
        "Vazirmatn",
        sans-serif;


.hero-box {
    font-size:.7rem;


     position:relative;
     font-weight:600;


     min-height:480px;
     opacity:0;


     border-radius:24px;
     pointer-events:none;


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


     display:flex;
     box-shadow:
        0 8px 25px rgba(0,0,0,.4);


    align-items:center;
}


    justify-content:center;
.sidebar-menu a:hover::after{


     text-align:center;
     opacity:1;


     background:
     transform:
    linear-gradient(
         translateY(-50%)
        135deg,
         translateX(0);
         rgba(17,24,39,.96),
         rgba(17,24,39,.72)
    );


}
}


.hero-bg {
.sidebar-menu a:hover{
 
    position:absolute;
 
    inset:0;
 
    background-image:
    url("https://images.unsplash.com/photo-1586953208448-b95a79798f07?auto=format&fit=crop&w=1600&q=80");


     background-size:cover;
     color:var(--gold);


     background-position:center;
     background:var(--gold-light);


     opacity:.38;
     transform:translateX(2px);


}
}


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


     position:absolute;
     color:#000;


     inset:0;
     background:var(--gold);


     background:
     box-shadow:
    linear-gradient(
         0 8px 25px rgba(244,185,66,.18);
         90deg,
        rgba(0,0,0,.9),
        rgba(0,0,0,.45)
    );


}
}


.hero-content {


    position:relative;
/* =========================================================
  SIDEBAR SOCIAL
========================================================= */


    z-index:2;
.sidebar-bottom{


     color:#fff;
     margin-top:auto;


     width:100%;
     width:100%;


     max-width:750px;
     padding-top:20px;


     margin-left:auto;
     border-top:
        1px solid rgba(255,255,255,.08);


     margin-right:auto;
     display:flex;


     padding:35px 25px;
     justify-content:center;
 
    text-align:center;


}
}


.hero-badge {
.sidebar-social{


     display:inline-flex;
     display:flex;


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


     justify-content:center;
     gap:7px;


    padding:5px 13px;
}


    margin-bottom:14px;
.sidebar-social a{


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


     border:1px solid rgba(255,183,3,.5);
     height:38px;


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


     border-radius:50px;
     place-items:center;


     font-size:13px;
     border-radius:10px;


     font-weight:bold;
     background:#111;


}
    color:#777;


.hero h1 {
    font-size:.8rem;


     font-size:clamp(28px,7vw,54px);
     transition:.2s;


    line-height:1.35;
}


    margin-bottom:15px;
.sidebar-social a:hover{


     font-weight:900;
     color:#000;


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


}
}


.hero h1 span {


     color:var(--accent);
/* =========================================================
  MAIN
========================================================= */
 
.main-content{
 
     margin-left:calc(var(--sidebar) + var(--sidebar-offset));
 
    min-width:0;


}
}


.hero p {


    color:#f1f1f1;
/* =========================================================
  MOBILE HEADER
========================================================= */


    font-size:15px;
.mobile-header{


     max-width:650px;
     display:none;


    margin:0 auto 25px;
}


    text-align:center;


}
/* =========================================================
  CONTAINER
========================================================= */


.hero-buttons {
.container{


     display:flex;
     width:min(
        calc(100% - 70px),
        1120px
    );


     flex-direction:column;
     margin-inline:auto;


    align-items:center;
}


    justify-content:center;


    gap:10px;
/* =========================================================
  SECTION
========================================================= */


    width:100%;
.section{


     margin:0 auto;
     position:relative;


}
    padding:55px 0;


.btn {
    min-height:auto;


     display:flex;
     display:flex;
خط ۴۵۳: خط ۵۰۹:
     align-items:center;
     align-items:center;


     justify-content:center;
     background:#080808;


    gap:9px;
}


    min-height:50px;
.section:nth-child(even){


     padding:0 20px;
     background:#0d0d0d;


    border-radius:12px;
}


    font-weight:bold;


    transition:.25s;
/* =========================================================
  SECTION TITLE
========================================================= */


}
.section-title{


.btn-primary {
    width:100%;


     background:var(--primary);
     text-align:center;


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


}
}


.btn-primary:hover {
.section-title small{


     background:var(--primary-dark);
     display:block;


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


}
    font-size:.8rem;


.btn-light {
    font-weight:800;


     background:#fff;
     margin-bottom:8px;
 
    color:#111827;


}
}


.btn-light:hover {
.section-title h2{


     transform:translateY(-2px);
     margin:0;


}
    color:#fff;


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


/* =====================================================
    font-weight:900;
  FEATURES
===================================================== */
 
.features {


     padding:20px 0 40px;
     line-height:1.4;


}
}


.feature-grid {
.section-title p{


     display:grid;
     max-width:650px;


     grid-template-columns:repeat(2,1fr);
     margin:12px 0 0;


     gap:12px;
     color:var(--muted);


     justify-items:stretch;
     font-size:.88rem;


}
}


.feature {


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


    background:#fff;
.hero{


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


    border-radius:16px;
        radial-gradient(
            circle at 70% 25%,
            rgba(244,185,66,.09),
            transparent 32%
        ),


    padding:20px 12px;
        #050505;


    text-align:center;
}


    box-shadow:var(--shadow);
.hero-inner{


}
    max-width:900px;


.feature-icon {
    margin:auto;


     width:48px;
     text-align:center;


    height:48px;
}


    margin:0 auto 10px;
.hero-label{


     display:flex;
     display:inline-flex;


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


     justify-content:center;
     gap:8px;


     border-radius:14px;
     padding:8px 17px;


     background:#fff1f2;
     border-radius:50px;


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


     font-size:20px;
     border:
        1px solid rgba(244,185,66,.15);


}
    color:var(--gold);


.feature h2 {
    font-size:.78rem;


     font-size:15px;
     font-weight:800;


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


}
}


.feature p {
.hero-label i{


     font-size:12px;
     font-size:.45rem;


    color:var(--muted);
}


    text-align:center;
.hero h1{


}
    margin:0;


    color:#fff;


/* =====================================================
    font-size:
  SECTION
        clamp(2.5rem,7vw,5rem);
===================================================== */


.section {
    line-height:1.25;


     padding:45px 0;
     font-weight:900;


}
}


.section-header {
.hero h1 span{


     width:100%;
     display:block;


     margin:0 auto 25px;
     color:var(--gold);


    text-align:center !important;
}


}
.hero-subtitle{


.section-title {
    margin-top:12px;


     width:100%;
     color:#eee;


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


     font-weight:900;
     font-weight:700;


    color:var(--secondary);
}


    margin:0 auto 7px;
.hero-description{


     text-align:center !important;
     max-width:680px;


}
    margin:18px auto 30px;


.section-title span {
    color:#999;


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


}
}


.section-description {
.hero-buttons{


     max-width:650px;
     display:flex;
 
    margin:0 auto;


     color:var(--muted);
     justify-content:flex-start;


     font-size:14px;
     flex-wrap:wrap;


     text-align:center !important;
     gap:12px;


}
}


.btn{


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


.services-grid {
    align-items:center;


     display:grid;
     justify-content:center;


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


     gap:12px;
     min-height:50px;


     justify-items:stretch;
     padding:10px 23px;


}
    border-radius:12px;


.service-card {
    font-size:.82rem;


     width:100%;
     font-weight:800;


     background:#fff;
     transition:
        transform .2s ease,
        box-shadow .2s ease;


    border:1px solid var(--border);
}
 
.btn:hover{


     border-radius:18px;
     transform:translateY(-3px);


    overflow:hidden;
}


    transition:.3s;
.btn-dark{


     box-shadow:
     background:#fff;
        0 5px 20px rgba(0,0,0,.05);


     text-align:center;
     color:#000;


}
}


.service-card:hover {
.btn-gold{
 
    background:var(--gold);


     transform:translateY(-5px);
     color:#000;


     box-shadow:
     box-shadow:
         0 12px 30px rgba(0,0,0,.12);
         0 10px 30px rgba(244,185,66,.12);


}
}


.service-image {
.btn-outline{


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


     height:145px;
     color:#fff;


     overflow:hidden;
     background:#0d0d0d;


}
}


.service-image img {


     width:100%;
/* =========================================================
  HERO INFO
========================================================= */
 
.hero-info{
 
     margin-top:50px;


     height:100%;
     display:grid;


     object-fit:cover;
     grid-template-columns:
        repeat(5,1fr);


     transition:.4s;
     gap:12px;


}
}


.service-card:hover
.hero-info-box{
.service-image img {


     transform:scale(1.06);
     padding:18px 10px;


}
    background:#0e0e0e;


.service-content {
    border:
        1px solid rgba(255,255,255,.08);


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


}
}


.service-content h3 {
.hero-info-box i{
 
    font-size:16px;


     margin-bottom:5px;
     color:var(--gold);


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


}
}


.service-content p {
.hero-info-box strong{


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


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


     line-height:1.8;
     margin-top:4px;


     margin-bottom:10px;
     font-size:.9rem;
 
    text-align:center;


}
}


.service-link {
.hero-info-box span{


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


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


     font-weight:bold;
     font-size:.68rem;


    display:flex;
}


    align-items:center;


    justify-content:center;
/* =========================================================
  ABOUT
========================================================= */


    gap:5px;
.about-grid{


     text-align:center;
     display:grid;


}
    grid-template-columns:
        .9fr 1.1fr;


    gap:60px;


/* =====================================================
    align-items:center;
  CATEGORIES
===================================================== */
 
.category-section {
 
    background:var(--light);


}
}


.category-grid {
.about-image{


     display:grid;
     padding:10px;


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


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


     justify-items:stretch;
     border-radius:18px;


}
}


.category {
.about-image img{


     width:100%;
     width:100%;


     min-height:110px;
     aspect-ratio:4/5;


     border-radius:17px;
     object-fit:contain;


     padding:18px;
     border-radius:12px;


     background:#fff;
     background:#161616;


    display:flex;
}


    flex-direction:column;
.about-content h2{


     justify-content:center;
     margin:0 0 15px;


     align-items:center;
     color:#fff;
 
    text-align:center;


     border:1px solid var(--border);
     font-size:
 
        clamp(1.8rem,4vw,2.5rem);
    transition:.3s;


}
}


.category:hover {
.about-content p{


     border-color:var(--primary);
     color:#999;


     transform:translateY(-3px);
     font-size:.9rem;


}
}


.category i {
.about-list{


    font-size:25px;
     margin-top:22px;
 
    color:var(--primary);
 
     margin-bottom:7px;


}
}


.category strong {
.about-list li{


     font-size:14px;
     display:flex;


     text-align:center;
     align-items:flex-start;


}
    gap:10px;


.category span {
    margin-bottom:11px;


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


     font-size:11px;
     font-size:.84rem;


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


}
}


.about-list i{
    color:var(--gold);


/* =====================================================
    margin-top:6px;
  ABOUT
===================================================== */


.about {
}


    display:flex;


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


    gap:25px;
.counters{


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


}
}


.about-image {
.counter-grid{


     width:100%;
     display:grid;


     min-height:300px;
     grid-template-columns:
        repeat(6,1fr);


     border-radius:20px;
     gap:12px;


    overflow:hidden;
}
 
.counter{


}
    text-align:center;


.about-image img {
    padding:28px 10px;


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


    height:100%;
}


    min-height:300px;
.counter:last-child{


     object-fit:cover;
     border-right:0;


}
}


.about-content {
.counter i{


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


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


}
}


.about-content h2 {
.counter strong{


     font-size:25px;
     display:block;


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


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


}
}


.about-content h2 span {
.counter span{


     color:var(--primary);
     color:#777;
 
    font-size:.72rem;


}
}


.about-content p {


    color:var(--muted);
/* =========================================================
  SKILLS
========================================================= */


    font-size:14px;
.skills-grid{


     margin:0 auto 15px;
     max-width:1050px;


     text-align:center;
     margin:auto;
 
    display:grid;
 
    grid-template-columns:
        repeat(2,1fr);


     max-width:700px;
     gap:22px 28px;


}
}


.about-list {
.skill{


     list-style:none;
     padding:24px;


     display:grid;
     background:#111;


     gap:8px;
     border:
        1px solid rgba(255,255,255,.07);


     width:fit-content;
     border-radius:18px;


     max-width:100%;
     min-height:230px;


     margin:0 auto;
     text-align:right;


    padding:0;
}


.skill-image{
    width:100%;
    height:135px;
    margin-bottom:18px;
    overflow:hidden;
    border-radius:14px;
    background:#181818;
    border:1px solid rgba(255,255,255,.06);
}
}


.about-list li {
.skill-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}
 
.skill-title{


     display:flex;
     display:flex;


     align-items:center;
     justify-content:space-between;


     justify-content:center;
     color:#eee;


     gap:8px;
     font-size:.83rem;


     font-size:13px;
     font-weight:800;


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


}
}


.about-list i {
.skill-title span:last-child{


     color:#16a34a;
     color:var(--gold);


}
}


.skill-bar{


/* =====================================================
    height:7px;
  SPECIAL
===================================================== */


.special-box {
    background:#242424;


     background:
     border-radius:50px;
    linear-gradient(
        135deg,
        #111827,
        #252f3f
    );


     color:#fff;
     overflow:hidden;


    border-radius:22px;
}


    padding:30px 20px;
.skill-bar span{


     text-align:center;
     display:block;
 
    width:var(--width);


}
    height:100%;


.special-grid {
    background:var(--gold);


     display:grid;
     border-radius:inherit;


    gap:15px;
}


    justify-items:stretch;


}
/* =========================================================
  CARDS
========================================================= */


.special-item {
.cards-grid{


     width:100%;
     width:100%;


     display:flex;
     display:grid;


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


     gap:10px;
     gap:20px;


    align-items:center;
}


    justify-content:center;
.card{


     padding:18px 15px;
     background:#101010;


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


     border:1px solid rgba(255,255,255,.1);
     border-radius:18px;


     border-radius:15px;
     padding:28px 24px;
 
    box-shadow:
        0 10px 35px rgba(0,0,0,.25);


     text-align:center;
     transition:
        transform .2s ease,
        border-color .2s ease;


}
}


.special-icon {
.card:hover{


     width:44px;
     transform:translateY(-5px);


     min-width:44px;
     border-color:
        rgba(244,185,66,.3);


    height:44px;
}


    border-radius:12px;
.card-icon{


     display:flex;
     width:55px;


     align-items:center;
     height:55px;


     justify-content:center;
     display:grid;


     background:var(--primary);
     place-items:center;


}
    border-radius:15px;


.special-item h3 {
    background:var(--gold-light);


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


     font-size:15px;
     font-size:1.25rem;


     margin-bottom:3px;
     margin-bottom:18px;


     text-align:center;
}
 
.card h3{
 
     margin:0 0 8px;
 
    color:#fff;
 
    font-size:1.05rem;


}
}


.special-item p {
.card p{


     color:#d1d5db;
     margin:0;


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


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


}
}


.white {


    color:#fff !important;
/* =========================================================
  COURSE IMAGE
========================================================= */


}
.course-card{


    padding:0;


/* =====================================================
    overflow:hidden;
  BLOG
===================================================== */


.blog-grid {
}
 
    display:grid;


    grid-template-columns:1fr;
.card-image{


     gap:15px;
     padding:9px;


     justify-items:stretch;
     background:#080808;


}
}


.blog-card {
.card-image img{


     width:100%;
     width:100%;


     border:1px solid var(--border);
     aspect-ratio:16/10;


     border-radius:18px;
     object-fit:contain;
 
    background:#151515;


     overflow:hidden;
     border-radius:12px;


    background:#fff;
}


    transition:.3s;
.card-content{


     text-align:center;
     padding:22px;


}
}


.blog-card:hover {
.card-tag{


     transform:translateY(-4px);
     display:inline-block;


     box-shadow:var(--shadow);
     padding:4px 10px;


}
    border-radius:50px;
 
    background:var(--gold-light);


.blog-image {
    color:var(--gold);


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


     overflow:hidden;
     font-weight:800;


}
}


.blog-image img {


    width:100%;
/* =========================================================
  TIMELINE
========================================================= */
 
.timeline{


     height:100%;
     max-width:850px;


     object-fit:cover;
     margin:auto;


}
}


.blog-content {
.timeline-item{


     padding:16px;
    position:relative;
 
     padding:
        0 30px 38px;


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


}
}


.blog-category {
.timeline-item:last-child{


     font-size:11px;
     border-right-color:transparent;


    color:var(--primary);
}
 
    font-weight:bold;


}
.timeline-item::before{


.blog-content h3 {
    content:"";


     font-size:16px;
     position:absolute;


     margin:5px 0 7px;
     right:-8px;


     text-align:center;
     top:3px;


}
    width:14px;


.blog-content p {
    height:14px;


     font-size:12px;
     border-radius:50%;


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


     text-align:center;
     box-shadow:
        0 0 0 4px #0d0d0d;


}
}


.timeline-year{


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


.cta {
    font-size:.76rem;


     width:100%;
     font-weight:800;


    padding:20px 0 50px;
}


    display:flex;
.timeline-item h3{


     justify-content:center;
     margin:5px 0;


     align-items:center;
     color:#fff;


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


}
}


.cta .container {
.timeline-item p{


     width:92%;
     color:#888;


     max-width:var(--max-width);
     font-size:.81rem;


     margin-left:auto !important;
     margin:0;
 
    margin-right:auto !important;


}
}


.cta-box {


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


    max-width:1000px;
.testimonial{


     margin-left:auto !important;
     background:#101010;


    margin-right:auto !important;
}


    background:
.quote{
    linear-gradient(
        135deg,
        var(--primary),
        #b91c2c
    );


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


     border-radius:22px;
     font-size:1.8rem;


    padding:35px 20px;
}


    display:flex;
.testimonial p{


     flex-direction:column;
     color:#999;
 
    align-items:center;
 
    justify-content:center;


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


}
}


.cta-box h2 {
.testimonial-person{


     width:100%;
     display:flex;


     font-size:25px;
     align-items:center;


     margin-bottom:10px;
     gap:10px;


     text-align:center;
     margin-top:18px;


}
}


.cta-box p {
.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;
}


    max-width:650px;
.testimonial-person strong{


     font-size:14px;
     display:block;


     margin:0 auto 20px;
     color:#fff;


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


    text-align:center;
}


}
.testimonial-person span{


.cta-box .btn {
    display:block;


     margin-left:auto;
     color:#666;


     margin-right:auto;
     font-size:.67rem;


}
}




/* =====================================================
/* =========================================================
   FOOTER
   BLOG
===================================================== */
========================================================= */


.footer {
.blog-card{


     background:#111827;
     padding:0;


     color:#fff;
     overflow:hidden;
 
}


    padding:45px 0 20px;
.blog-card .card-image img{


     text-align:center;
     aspect-ratio:16/9;


}
}


.footer-grid {
.blog-card .card-content{


     display:grid;
     padding:20px;


    gap:30px;
}


     justify-items:center;
.blog-date{
 
    color:var(--gold);
 
    font-size:.68rem;
 
     font-weight:800;


}
}


.footer-grid > div {
.blog-card h3{
 
    color:#fff;


     width:100%;
     font-size:1rem;


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


}
}


.footer h3 {


    font-size:17px;
/* =========================================================
  CTA
========================================================= */


    margin-bottom:12px;
.cta{


     text-align:center;
     background:#000 !important;


}
}


.footer p {
.cta-inner{


     color:#cbd5e1;
     max-width:750px;


     font-size:13px;
     margin:auto;


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


.footer-links {
.cta h2{


     list-style:none;
     margin:0 0 10px;


     display:grid;
     color:#fff;


     gap:6px;
     font-size:
        clamp(1.9rem,4vw,2.8rem);


    padding:0;
}


    text-align:center;
.cta p{


}
    color:#888;


.footer-links li {
    font-size:.88rem;


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


}
}


.footer-links a {


     color:#cbd5e1;
/* =========================================================
  CONTACT
========================================================= */
 
.contact-grid{
 
     display:grid;


     font-size:13px;
     grid-template-columns:
        .8fr 1.2fr;


     transition:.2s;
     gap:35px;


}
}


.footer-links a:hover {
.contact-list{
 
    display:grid;


     color:#fff;
     gap:12px;


}
}


.contact-item {
.contact-item{


     display:flex;
     display:flex;
خط ۱٬۳۸۱: خط ۱٬۵۰۳:
     align-items:center;
     align-items:center;


     justify-content:center;
     gap:14px;


     gap:10px;
     padding:16px;


     margin-bottom:10px;
     background:#111;


     color:#cbd5e1;
     border:
        1px solid rgba(255,255,255,.07);


     font-size:13px;
     border-radius:14px;


    text-align:center;
}
 
.contact-icon{


}
    width:45px;


.contact-item i {
    height:45px;


     color:var(--accent);
     flex:0 0 45px;


     width:20px;
     display:grid;


}
    place-items:center;


.social {
    border-radius:12px;


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


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


    gap:8px;
}


    margin-top:15px;
.contact-item small{


}
    display:block;


.social a {
    color:#666;


     width:40px;
     font-size:.67rem;


    height:40px;
}


    border-radius:10px;
.contact-item strong{


     display:flex;
     color:#eee;


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


    justify-content:center;
}


    background:rgba(255,255,255,.08);
.contact-form{


     transition:.2s;
     background:#101010;


}
    padding:28px;


.social a:hover {
    border:
        1px solid rgba(255,255,255,.08);


     background:var(--primary);
     border-radius:18px;


}
}


.footer-bottom {
.form-grid{


     margin-top:30px;
     display:grid;


     padding-top:15px;
     grid-template-columns:
        repeat(2,1fr);


     border-top:1px solid rgba(255,255,255,.1);
     gap:15px;


    text-align:center;
}


    color:#9ca3af;
.form-group.full{


     font-size:11px;
     grid-column:1/-1;


}
}


.form-group label{


/* =====================================================
    display:block;
  MOBILE NAV
===================================================== */


.mobile-nav {
    color:#ddd;


     position:fixed;
     font-size:.74rem;


     bottom:10px;
     font-weight:800;


     right:3%;
     margin-bottom:5px;


    left:3%;
}


    z-index:999;
.form-group input,
.form-group textarea{


     height:62px;
     width:100%;


     background:#111827;
     padding:12px 14px;


     border-radius:18px;
     border:
        1px solid rgba(255,255,255,.08);


     display:flex;
     border-radius:10px;
 
    background:#080808;


     align-items:center;
     color:#fff;


     justify-content:space-around;
     outline:none;


     box-shadow:
     font-size:.78rem;
        0 10px 30px rgba(0,0,0,.25);


}
}


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


     color:#cbd5e1;
     color:#555;


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


    justify-content:center;
.form-group textarea{


     gap:1px;
     min-height:130px;


     font-size:10px;
     resize:vertical;


}
}


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


     font-size:18px;
     border-color:var(--gold);


}
}


.mobile-nav .active {


    color:#fff;
/* =========================================================
  FOOTER
========================================================= */
 
.footer{


}
    padding:30px 0;


.mobile-nav .call {
    background:#000;


     width:48px;
     color:#666;


     height:48px;
     text-align:center;


     margin-top:-25px;
     border-top:
        1px solid rgba(255,255,255,.07);


    border-radius:50%;
}


    background:var(--primary);
.footer strong{


     display:flex;
     color:var(--gold);


    align-items:center;
}


    justify-content:center;
.footer p{


     border:5px solid #fff;
     margin:0;


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


}
}




/* =====================================================
/* =========================================================
   TABLET
   TABLET
===================================================== */
========================================================= */


@media (min-width:600px) {
@media(max-width:900px){


     .container {
     .left-sidebar{


         width:92%;
         display:none;


     }
     }


     .hero-box {
     .main-content{


         min-height:520px;
         margin-left:0;


     }
     }


     .hero-content {
     .mobile-header{


         padding:50px;
         position:sticky;


    }
        top:0;


    .hero-buttons {
        z-index:999;


         flex-direction:row;
         height:62px;


         max-width:430px;
         display:flex;


         margin-left:auto;
         align-items:center;


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


    }
        background:#000;


    .btn {
        border-bottom:
            1px solid rgba(255,255,255,.08);


        flex:1;
    }


     }
     .mobile-header strong{


    .services-grid {
        color:#fff;


         grid-template-columns:repeat(3,1fr);
         font-size:.88rem;


     }
     }


     .category-grid {
     .container{


         grid-template-columns:repeat(3,1fr);
         width:
            min(
                calc(100% - 45px),
                720px
            );


     }
     }


     .feature-grid {
     .section{


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


     }
     }


     .blog-grid {
     .about-grid{
 
        grid-template-columns:repeat(3,1fr);
 
    }


    .special-grid {
        grid-template-columns:1fr;


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


     }
     }


     .about {
     .about-image{


         flex-direction:row;
         max-width:550px;


         align-items:center;
         margin:auto;


     }
     }


     .about > * {
     .cards-grid{


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


     }
     }


     .about-content {
     .contact-grid{


         text-align:center;
         grid-template-columns:1fr;


     }
     }
خط ۱٬۶۴۱: خط ۱٬۷۷۴:




/* =====================================================
/* =========================================================
   DESKTOP
   MOBILE
===================================================== */
========================================================= */


@media (min-width:900px) {
@media(max-width:600px){


     .header-inner {
     html{


         min-height:78px;
         scroll-padding-top:65px;


     }
     }


     .desktop-menu {
     .container{


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


        align-items:center;
    }


        justify-content:center;
    .section{


         gap:25px;
         min-height:auto;


         margin-right:auto;
         padding:35px 0;
 
        margin-left:30px;


     }
     }


     .desktop-menu a {
     .hero{


         font-size:14px;
         padding:
            70px 0 50px;


        font-weight:bold;
    }


        color:#374151;
    .hero h1{


         transition:.2s;
         font-size:
            clamp(2.2rem,12vw,3.3rem);


     }
     }


     .desktop-menu a:hover {
     .hero-subtitle{


         color:var(--primary);
         font-size:1rem;


     }
     }


     .header-call {
     .hero-description{


         width:auto;
         font-size:.86rem;


        padding:0 17px;
    }
 
        gap:8px;


        font-size:13px;
    .hero-buttons{


         font-weight:bold;
         flex-direction:column;


     }
     }


     .header-call::after {
     .hero-buttons .btn{


         content:"تماس با ما";
         width:100%;


     }
     }


     .mobile-nav {
     .hero-info{
 
        grid-template-columns:
            repeat(2,1fr);


         display:none;
         margin-top:35px;


     }
     }


     .hero {
     .counter-grid{


         padding:30px 0 50px;
         grid-template-columns:
            repeat(2,1fr);


     }
     }


     .hero-content {
     .counter{


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


     }
     }


     .hero p {
     .counter strong{


         font-size:16px;
         font-size:1.6rem;


     }
     }


     .services-grid {
     .skills-grid{


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


     }
     }


     .category-grid {
     .skill-image{
        height:155px;
    }
 
    .cards-grid{


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


     }
     }


     .special-grid {
     .card{


         grid-template-columns:repeat(3,1fr);
         padding:22px 18px;


     }
     }


     .footer-grid {
     .card-image{


         grid-template-columns:2fr 1fr 1fr 1.5fr;
         padding:8px;


     }
     }


}
    .card-image img{


        aspect-ratio:16/10;


/* =====================================================
        object-fit:contain;
  LARGE DESKTOP
===================================================== */


@media (min-width:1200px) {
    }


     .hero-box {
     .timeline-item{


         min-height:570px;
         padding-right:24px;


     }
     }


     .section {
     .form-grid{


         padding:65px 0;
         grid-template-columns:1fr;


     }
     }


     .service-image {
     .form-group.full{


         height:180px;
         grid-column:auto;


     }
     }


}
    .contact-form{


        padding:20px;


/* =====================================================
    }
  MOBILE FINAL ADJUSTMENTS
===================================================== */


@media (max-width:599px) {
    .section-title{


    .container {
         margin-bottom:20px;
 
         width:94%;


     }
     }


     .section-title {
     .section-title h2{
 
        font-size:23px;


         line-height:1.6;
         font-size:1.7rem;


     }
     }


     .section-description {
     .section-title p{
 
        font-size:13px;


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


     }
     }


    .about-list {
}


        width:100%;


        max-width:360px;
/* =========================================================
  EXTRA SMALL
========================================================= */


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


     .about-list li {
     .container{


         justify-content:center;
         width:
            calc(100% - 22px);


     }
     }


     .cta-box {
     .hero-info-box{
 
        width:100%;


         padding:30px 18px;
         padding:14px 7px;


     }
     }


     .cta-box h2 {
     .hero-info-box strong{


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


     }
     }


     .cta-box p {
     .hero-info-box span{


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


     }
     }
خط ۱٬۸۴۹: خط ۱٬۹۸۴:
}
}


</style>


</head>
.card-content,
.contact-item > div:last-child,
.form-group label,
.form-group input,
.form-group textarea{
    text-align:center;
}


.footer{
    text-align:center;
}


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


/* =========================================================
  FINAL ALIGNMENT & SPACING
========================================================= */


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


<header class="header">
.section-title,
.about-content,
.card,
.skill,
.timeline,
.contact-list,
.contact-form{
    text-align:center;
}


<div class="container header-inner">
.hero-inner,
.hero-info,
.about-grid,
.skills-grid,
.cards-grid,
.timeline,
.contact-grid,
.cta-inner{
    margin-inline:auto;
}


<a href="#home"
.about-grid{
  class="logo"
    max-width:1080px;
  aria-label="صفحه اصلی چاپ و تبلیغات">
}


<span class="logo-icon">
.cards-grid{
    max-width:1180px;
}


<i class="fa-solid fa-print"></i>
@media(max-width:900px){
    .section > .container{
        width:min(calc(100% - 40px),720px);
    }


</span>
    .counter-grid{
        grid-template-columns:repeat(3,1fr);
    }
}


<span>
@media(max-width:600px){
چاپ و تبلیغات
    .section > .container{
</span>
        width:calc(100% - 28px);
    }


</a>
    .hero-buttons{
        justify-content:stretch;
    }


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


<nav class="desktop-menu"
/* =========================================================
    aria-label="منوی اصلی">
  REDUCED MOTION
========================================================= */


<a href="#home">
@media(prefers-reduced-motion:reduce){
صفحه اصلی
</a>


<a href="#services">
    *,
خدمات چاپ
    *::before,
</a>
    *::after{


<a href="#categories">
        scroll-behavior:auto !important;
دسته‌بندی خدمات
</a>


<a href="#about">
        transition:none !important;
درباره ما
</a>


<a href="#blog">
        animation:none !important;
مقالات
</a>


<a href="#contact">
    }
تماس با ما
</a>


</nav>
}


</style>


<a
</head>
href="tel:+989900000000"
class="header-call"
aria-label="تماس با چاپ و تبلیغات">


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


</a>
<body>
 
</div>
 
</header>


<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>




    <div class="sidebar-bottom">


<!-- =====================================================
        <div class="sidebar-social">
    SERVICES
===================================================== -->


<section class="section"
            <a href="#" title="اینستاگرام">
        id="services">


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


<div class="section-header">
            </a>


<h2 class="section-title">
            <a href="#" title="تلگرام">


خدمات
                <i class="fa-brands fa-telegram"></i>
<span>
چاپ و تبلیغات
</span>


</h2>
            </a>


<p class="section-description">
            <a href="#" title="واتساپ">


انواع خدمات چاپ و تبلیغات برای معرفی بهتر برند،
                <i class="fa-brands fa-whatsapp"></i>
کسب‌وکار و محصولات شما با کیفیت حرفه‌ای.


</p>
            </a>


</div>
        </div>


    </div>


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




<!-- =====================================================
    MOBILE HEADER
===================================================== -->


<article class="service-card">
<header class="mobile-header ">


<div class="service-image">
    <strong>
        محمدرضا شایق | مدرس خودشناسی
    </strong>


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


</div>


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


<h3>
<main class="main-content full-width-page">
چاپ تراکت
</h3>


<p>
چاپ تراکت تبلیغاتی در انواع سایز و کاغذ
برای معرفی خدمات و محصولات کسب‌وکار.
</p>


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


مشاهده جزئیات
<section class="section hero"
        id="home">


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


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


</div>


</article>
            <div class="hero-label">


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


                مدرس خودشناسی و توسعه فردی


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


<div class="service-image">


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


</div>
                محمدرضا


<div class="service-content">
                <span>
                    شایق
                </span>


<h3>
            </h1>
چاپ پوستر
</h3>


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


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


مشاهده جزئیات
                مدرس خودشناسی و آگاهی فردی


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


</a>


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


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


            </p>




<article class="service-card">
            <div class="hero-buttons">


<div class="service-image">
                <a href="#about"
                  class="btn btn-gold">


<img
                    <i class="fa-solid fa-user"></i>
src="https://dl.faraghaib.ir/m/260005-01/260005-01-47.jpg"
alt="چاپ کارت ویزیت">


</div>
                    درباره من


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


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


<p>
                <a href="#courses"
طراحی و چاپ کارت ویزیت حرفه‌ای برای
                  class="btn btn-outline">
معرفی برند و ارتباط بهتر با مشتریان.
</p>


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


مشاهده جزئیات
                    مشاهده دوره‌ها


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


</a>
            </div>


</div>


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




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


<article class="service-card">
                    <i class="fa-solid fa-brain"></i>


<div class="service-image">
                    <strong>
                        خودشناسی
                    </strong>


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


</div>
                </div>


<div class="service-content">


<h3>
                <div class="hero-info-box">
طراحی لوگو
</h3>


<p>
                    <i class="fa-solid fa-seedling"></i>
طراحی لوگوی اختصاصی و حرفه‌ای برای
ساخت هویت بصری ماندگار برند شما.
</p>


<a href="#"
                    <strong>
  class="service-link">
                        رشد فردی
                    </strong>


مشاهده جزئیات
                    <span>
                        مسیر رشد
                    </span>


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


</a>


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


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


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


                    <span>
                        انتخاب آگاهانه
                    </span>


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


<div class="service-image">


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


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


<div class="service-content">
                    <strong>
                        آرامش
                    </strong>


<h3>
                    <span>
چاپ بنر و فلکس
                        ارتباط با خود
</h3>
                    </span>


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


<a href="#"
                <div class="hero-info-box">
  class="service-link">


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


<i class="fa-solid fa-arrow-left"></i>
                    <strong>
                        تمرکز
                    </strong>


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


</div>
                </div>


</article>


            </div>


        </div>


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


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


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


</div>
<!-- =====================================================
    ABOUT
===================================================== -->


<div class="service-content">
<section class="section"
        id="about">


<h3>
    <div class="container">
چاپ هولوگرام
</h3>


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


<a href="#"
            <small>
  class="service-link">
                درباره من
            </small>


مشاهده جزئیات
            <h2>
                شناخت خود، آغاز مسیر تغییر
            </h2>


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


</a>


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


</article>


            <div class="about-image">


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


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


<div class="service-image">


<img
            <div class="about-content" style="text-align:right;">
src="https://dl.faraghaib.ir/m/260005-01/260005-01-39.jpg"
alt="چاپ کاتالوگ">


</div>
                <h2>
                    همراه شما در مسیر خودشناسی
                </h2>


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


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


<p>
                </p>
طراحی و چاپ کاتالوگ حرفه‌ای برای
معرفی محصولات و خدمات شرکت‌ها.
</p>


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


مشاهده جزئیات
                    هدف این آموزش‌ها کمک به شناخت بهتر افکار،
                    احساسات، توانمندی‌ها، ارزش‌ها و الگوهای
                    رفتاری است تا هر فرد بتواند مسیر زندگی خود
                    را آگاهانه‌تر انتخاب کند.


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


</a>


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


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


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


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


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


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


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


</div>
        </div>


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


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


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


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


مشاهده جزئیات
<section class="section counters">


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


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


</div>


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


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


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


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


</section>
            </div>




            <div class="counter">


<!-- =====================================================
                <i class="fa-solid fa-book"></i>
    CATEGORIES
===================================================== -->


<section class="section category-section"
                <strong>
        id="categories">
                    20+
                </strong>


<div class="container">
                <span>
                    دوره و کارگاه
                </span>


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


<h2 class="section-title">


دسته‌بندی
            <div class="counter">
<span>
خدمات
</span>


</h2>
                <i class="fa-solid fa-clock"></i>


<p class="section-description">
                <strong>
                    1000+
                </strong>


محصولات و خدمات تبلیغاتی مورد نیاز کسب‌وکار خود را انتخاب کنید.
                <span>
                    ساعت آموزش
                </span>


</p>
            </div>


</div>


            <div class="counter">


<div class="category-grid">
                <i class="fa-solid fa-star"></i>


                <strong>
                    95%
                </strong>


<a href="#"
                <span>
  class="category">
                    رضایت
                </span>


<i class="fa-solid fa-file-lines"></i>
            </div>


<strong>
            <div class="counter">
چاپ تراکت
</strong>


<span>
                <i class="fa-solid fa-chalkboard-user"></i>
تبلیغات مستقیم
</span>


</a>
                <strong>
                    50+
                </strong>


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


            </div>


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


<i class="fa-solid fa-image"></i>
                <i class="fa-solid fa-award"></i>


<strong>
                <strong>
چاپ پوستر
                    10+
</strong>
                </strong>


<span>
                <span>
تبلیغات محیطی
                    سال تجربه
</span>
                </span>


</a>
            </div>




        </div>


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


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


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


<span>
<!-- =====================================================
معرفی برند
    SKILLS
</span>
===================================================== -->


</a>
<section class="section"
        id="skills">
 
    <div class="container">
 
        <div class="section-title">


            <small>
                تخصص‌ها
            </small>


            <h2>
                حوزه‌های تخصصی
            </h2>


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


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


<strong>
        <div class="skills-grid">
بنر و فلکس
</strong>


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


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


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


                <div class="skill-title">


<a href="#"
                    <span>
  class="category">
                        خودشناسی
                    </span>


<i class="fa-solid fa-pen-nib"></i>
                    <span>
                        95%
                    </span>


<strong>
                </div>
طراحی لوگو
</strong>


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


</a>
                    <span style="--width:95%"></span>


                </div>


            </div>


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


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


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


<span>
                <div class="skill-title">
معرفی محصولات
</span>


</a>
                    <span>
                        توسعه فردی
                    </span>


                    <span>
                        90%
                    </span>


                </div>


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


<i class="fa-solid fa-ticket"></i>
                    <span style="--width:90%"></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-19.png"
                        alt="تصویر حوزه تخصصی خودشناسی"
                        loading="lazy">
                </div>


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


<i class="fa-solid fa-stamp"></i>
                    <span>
                        آموزش و کارگاه
                    </span>


<strong>
                    <span>
هولوگرام
                        92%
</strong>
                    </span>


<span>
                </div>
چاپ امنیتی
</span>


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


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


                </div>


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


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


<strong>
            <div class="skill">
پاکت و سربرگ
</strong>


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


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


                    <span>
                        مهارت‌های فردی
                    </span>


                    <span>
                        88%
                    </span>


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


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


<strong>
                    <span style="--width:88%"></span>
محصولات تبلیغاتی
</strong>


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


</a>
            </div>




</div>
        </div>


</div>
    </div>


</section>
</section>




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


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


<div class="container">
    <div class="container">


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


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


درباره
            <h2>
<span>
                در چه زمینه‌هایی آموزش می‌دهم؟
چاپ و تبلیغات
            </h2>
</span>


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


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


ارائه خدمات تخصصی چاپ، طراحی و تبلیغات برای معرفی حرفه‌ای کسب‌وکارها.


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


</div>


            <article class="card">


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


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


<div class="about-image">
                <p>
                    شناخت ویژگی‌ها، افکار، احساسات،
                    ارزش‌ها و الگوهای رفتاری.
                </p>


<img
            </article>
src="https://dl.faraghaib.ir/m/260005-01/260005-01-41.jpg"
alt="مجموعه چاپ و تبلیغات و خدمات طراحی و چاپ">


</div>


            <article class="card">


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


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


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


</h2>
            </article>


<p>


ما با ارائه مجموعه‌ای کامل از خدمات چاپ،
            <article class="card">
طراحی و تبلیغات تلاش می‌کنیم مسیر معرفی
کسب‌وکار شما را ساده‌تر کنیم. از طراحی اولیه
تا چاپ نهایی، کیفیت و دقت سفارش اهمیت ویژه‌ای دارد.


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


                <h3>
                    مسیر زندگی
                </h3>


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


            </article>


<li>


<i class="fa-solid fa-circle-check"></i>
            <article class="card">


چاپ با کیفیت و وضوح بالا
                <div class="card-icon">
                    <i class="fa-solid fa-lightbulb"></i>
                </div>


</li>
                <h3>
                    آگاهی فردی
                </h3>


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


<li>
            </article>


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


استفاده از متریال مناسب برای هر نوع سفارش
            <article class="card">


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


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


<li>
                <p>
                    برگزاری دوره‌ها و کارگاه‌های آموزشی
                    در زمینه خودشناسی و توسعه فردی.
                </p>


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


مشاوره تخصصی پیش از چاپ


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


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


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


<i class="fa-solid fa-circle-check"></i>
                <p>
                    ایجاد رابطه‌ای آگاهانه‌تر با خود،
                    نیازها و خواسته‌های شخصی.
                </p>


اجرای سفارشات در تیراژهای مختلف
            </article>


</li>


        </div>


<li>
    </div>


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


طراحی اختصاصی متناسب با هویت برند


</li>
<!-- =====================================================
    COURSES
===================================================== -->


<section class="section"
        id="courses">


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


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


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


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


</section>
        </div>




        <div class="cards-grid">


<!-- =====================================================
    SPECIAL
===================================================== -->


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


<div class="container">
                <div class="card-image">


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


                </div>


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


<h2 class="section-title"
                    <span class="card-tag">
    style="color:#fff">
                        خودشناسی
                    </span>


مزایای همکاری با ما
                    <h3>
                        شروع مسیر خودشناسی
                    </h3>


</h2>
                    <p>
                        آشنایی با مفاهیم پایه خودشناسی
                        و شناخت بهتر خود.
                    </p>


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


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


</p>


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


                <div class="card-image">


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


                </div>


<div class="special-item">
                <div class="card-content">


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


<i class="fa-solid fa-medal"></i>
                    <h3>
                        مسیر رشد فردی
                    </h3>


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


<div>
                </div>


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


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


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


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


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


                </div>


<div class="special-item">
                <div class="card-content">


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


<i class="fa-solid fa-clock"></i>
                    <h3>
                        آگاهی و انتخاب
                    </h3>


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


<div>
                </div>


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


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


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


</div>
                <div class="card-image">
                    <img
                    src="https://dl.faraghaib.ir/m/260021-01/260021-01-07.jpg"
                    alt="دوره مهارت‌های فردی"
                    loading="lazy">
                </div>


                <div class="card-content">
                    <span class="card-tag">مهارت فردی</span>


                    <h3>تقویت مهارت‌های فردی</h3>


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


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


<i class="fa-solid fa-comments"></i>
            <article class="card course-card">


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


<div>
                <div class="card-content">
                    <span class="card-tag">آگاهی</span>


<h3>
                    <h3>افزایش آگاهی فردی</h3>
مشاوره قبل از چاپ
</h3>


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


</div>
            </article>


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


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


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


<div class="special-item">
                    <h3>کارگاه مسیر رشد</h3>


<div class="special-icon">
                    <p>
                        بررسی موانع رشد و ساختن مسیر
                        عملی برای پیشرفت شخصی.
                    </p>
                </div>


<i class="fa-solid fa-palette"></i>
            </article>


</div>


<div>
        </div>


<h3>
    </div>
طراحی خلاقانه
</h3>


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


</div>


</div>
<!-- =====================================================
    EXPERIENCE
===================================================== -->


<section class="section"
        id="experience">


    <div class="container">


<div class="special-item">
        <div class="section-title">


<div class="special-icon">
            <small>
                سوابق
            </small>


<i class="fa-solid fa-layer-group"></i>
            <h2>
                مسیر حرفه‌ای
            </h2>


</div>
        </div>


<div>


<h3>
        <div class="timeline">
تنوع خدمات
</h3>


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


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


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


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


                <p>
                    برگزاری دوره‌ها و کارگاه‌های آموزشی
                    در زمینه خودشناسی و رشد فردی.
                </p>


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


<div class="special-icon">


<i class="fa-solid fa-handshake"></i>
            <div class="timeline-item">


</div>
                <span class="timeline-year">
                    ۱۳۹۹ — ۱۴۰۲
                </span>


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


<h3>
                <p>
همراه کسب‌وکار شما
                    طراحی و اجرای برنامه‌های آموزشی
</h3>
                    با تمرکز بر آگاهی و مهارت‌های فردی.
                </p>


<p>
            </div>
هدف ما ایجاد یک همکاری مطمئن و بلندمدت با مشتریان است.
</p>


</div>


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


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


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


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


</div>
    </div>


</section>
</section>




<!-- =====================================================
<!-- =====================================================
     BLOG
     TESTIMONIALS
===================================================== -->
===================================================== -->


<section class="section"
<section class="section"
         id="blog">
         id="testimonials">


<div class="container">
    <div class="container">


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


<h2 class="section-title">
            <small>
                نظرات
            </small>


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


</h2>
        </div>


<p class="section-description">


مطالب آموزشی و کاربردی درباره چاپ،
        <div class="cards-grid">
طراحی و روش‌های تبلیغات مؤثر.


</p>


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


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


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


                <div class="testimonial-person">


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


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


<img
                        <strong>
src="https://dl.faraghaib.ir/m/260005-01/260005-01-45.jpg"
                            سارا احمدی
alt="راهنمای انتخاب چاپ تراکت">
                        </strong>


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


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


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


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


<p>
آشنایی با انواع کاغذ، ابعاد و نکات مهم برای چاپ تراکت تبلیغاتی.
</p>


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


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


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


                <div class="testimonial-person">


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


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


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


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


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


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


<h3>
            </article>
اصول طراحی یک پوستر تبلیغاتی جذاب
</h3>


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


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


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


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


                <div class="testimonial-person">


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


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


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


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


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


<span class="blog-category">
                </div>
برندینگ
</span>


<h3>
            </article>
چرا طراحی لوگو برای کسب‌وکار اهمیت دارد؟
</h3>


<p>
لوگو یکی از مهم‌ترین عناصر هویت بصری و معرفی برند است.
</p>


</div>
        </div>


</article>
    </div>


</section>


</div>


</div>
<!-- =====================================================
    BLOG
===================================================== -->


</section>
<section class="section"
        id="blog">


    <div class="container">


        <div class="section-title">


<!-- =====================================================
            <small>
    CTA
                مجله خودشناسی
===================================================== -->
            </small>


<section class="cta">
            <h2>
                مقالات و مطالب آموزشی
            </h2>


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


<div class="cta-box">


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


برای تبلیغات کسب‌وکارتان آماده‌اید؟


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


<p>
                <div class="card-image">


برای دریافت مشاوره، استعلام قیمت و ثبت سفارش
                    <img
چاپ و تبلیغات با ما تماس بگیرید.
                    src="https://dl.faraghaib.ir/m/260021-01/260021-01-02.jpg"
                    alt="خودشناسی چیست">


</p>
                </div>


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


<i class="fa-solid fa-phone"></i>
                    <span class="blog-date">
                        خودشناسی
                    </span>


تماس با ما
                    <h3>
                        خودشناسی چیست؟
                    </h3>


</a>
                    <p>
                        نگاهی ساده به مفهوم خودشناسی
                        و اهمیت آن در زندگی.
                    </p>


</div>
                </div>


</div>
            </article>


</section>


            <article class="card blog-card">


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


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


                </div>


<!-- =====================================================
                <div class="card-content">
    FOOTER
 
===================================================== -->
                    <span class="blog-date">
                        رشد فردی
                    </span>
 
                    <h3>
                        مسیر رشد فردی را چگونه پیدا کنیم؟
                    </h3>


<footer class="footer"
                    <p>
        id="contact">
                        چند نکته برای شناخت بهتر اهداف
                        و مسیر شخصی.
                    </p>


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


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




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


<h3>
                <div class="card-image">
چاپ و تبلیغات
</h3>


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


ارائه خدمات تخصصی چاپ و تبلیغات شامل
                </div>
چاپ تراکت، پوستر، کارت ویزیت، بنر،
هولوگرام، طراحی لوگو و محصولات تبلیغاتی.


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


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


<div class="social">
                    <h3>
                        انتخاب آگاهانه چگونه شکل می‌گیرد؟
                    </h3>


<a href="#"
                    <p>
  aria-label="اینستاگرام">
                        نقش آگاهی در تصمیم‌های مهم
                        و انتخاب‌های زندگی.
                    </p>


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


</a>
            </article>


<a href="#"
  aria-label="تلگرام">


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


</a>
    </div>


<a href="#"
</section>
  aria-label="واتساپ">


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


</a>
<!-- =====================================================
    CTA
===================================================== -->


</div>
<section class="section cta">


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


        <div class="cta-inner">


            <h2>
                مسیر شناخت خود را شروع کنید
            </h2>


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


<h3>
            <a href="#contact"
خدمات چاپ
              class="btn btn-gold">
</h3>


<ul class="footer-links">
                <i class="fa-solid fa-arrow-left"></i>


<li>
                ارتباط با من
<a href="#">چاپ تراکت</a>
</li>


<li>
            </a>
<a href="#">چاپ پوستر</a>
</li>


<li>
        </div>
<a href="#">چاپ کارت ویزیت</a>
</li>


<li>
    </div>
<a href="#">چاپ بنر</a>
</li>


<li>
</section>
<a href="#">چاپ هولوگرام</a>
</li>


</ul>


</div>
<!-- =====================================================
    CONTACT
===================================================== -->


<section class="section"
        id="contact">


    <div class="container">


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


<h3>
            <small>
خدمات طراحی
                ارتباط
</h3>
            </small>


<ul class="footer-links">
            <h2>
                با من در ارتباط باشید
            </h2>


<li>
        </div>
<a href="#">طراحی لوگو</a>
</li>


<li>
<a href="#">طراحی پوستر</a>
</li>


<li>
        <div class="contact-grid">
<a href="#">طراحی تراکت</a>
</li>


<li>
<a href="#">طراحی کاتالوگ</a>
</li>


<li>
            <div class="contact-list">
<a href="#">هویت بصری برند</a>
</li>


</ul>


</div>
                <div class="contact-item">


                    <div class="contact-icon">
                        <i class="fa-solid fa-phone"></i>
                    </div>


                    <div>


<div>
                        <small>
                            شماره تماس
                        </small>


<h3>
                        <strong>
تماس با ما
                            ۰۹۱۲۱۲۳۴۵۶۷۸
</h3>
                        </strong>


                    </div>


<div class="contact-item">
                </div>


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


<a href="tel:+989900000000">
                <div class="contact-item">
0990 000 0000
</a>


</div>
                    <div class="contact-icon">
                        <i class="fa-regular fa-envelope"></i>
                    </div>


                    <div>


<div class="contact-item">
                        <small>
                            ایمیل
                        </small>


<i class="fa-solid fa-envelope"></i>
                        <strong>
                            info@example.ir
                        </strong>


<span>
                    </div>
info@example.com
</span>


</div>
                </div>




<div class="contact-item">
                <div class="contact-item">


<i class="fa-solid fa-location-dot"></i>
                    <div class="contact-icon">
                        <i class="fa-brands fa-instagram"></i>
                    </div>


<span>
                    <div>
آدرس مجموعه چاپ و تبلیغات
</span>


</div>
                        <small>
                            اینستاگرام
                        </small>


                        <strong>
                            @yourusername
                        </strong>


<div class="contact-item">
                    </div>


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


<span>
شنبه تا پنجشنبه، 9 تا 20
</span>


</div>
            </div>




</div>
            <form class="contact-form">


                <div class="form-grid">


</div>


                    <div class="form-group">


<div class="footer-bottom">
                        <label>
                            نام و نام خانوادگی
                        </label>


© کلیه حقوق این وب‌سایت برای مجموعه چاپ و تبلیغات محفوظ است.
                        <input
                        type="text"
                        placeholder="نام شما">


</div>
                    </div>


</div>


</footer>
                    <div class="form-group">


                        <label>
                            شماره تماس
                        </label>


                        <input
                        type="tel"
                        placeholder="۰۹xxxxxxxxx">


<!-- =====================================================
                    </div>
    MOBILE NAV
===================================================== -->


<nav class="mobile-nav"
    aria-label="منوی موبایل">


                    <div class="form-group full">


<a href="#home"
                        <label>
  class="active">
                            موضوع
                        </label>


<i class="fa-solid fa-house"></i>
                        <input
                        type="text"
                        placeholder="موضوع پیام">


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


</a>


                    <div class="form-group full">


<a href="#services">
                        <label>
                            پیام
                        </label>


<i class="fa-solid fa-print"></i>
                        <textarea
                        placeholder="پیام خود را بنویسید..."></textarea>


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


</a>


                    <div class="form-group full">


<a
                        <button
href="tel:+989900000000"
                        type="submit"
class="call"
                        class="btn btn-gold">
aria-label="تماس">


<i class="fa-solid fa-phone"></i>
                            <i class="fa-regular fa-paper-plane"></i>


</a>
                            ارسال پیام


                        </button>


<a href="#about">
                    </div>


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


<span>
                </div>
درباره ما
</span>


</a>
            </form>




<a href="#contact">
        </div>


<i class="fa-solid fa-location-dot"></i>
    </div>


<span>
</section>
تماس
</span>


</a>


<!-- =====================================================
    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/تست»