**

هزینه و قیمت انجام پروپوزال در شیبان + تضمینی

**

/* Basic styling for responsiveness and aesthetics – to be added to site CSS */
body {
font-family: ‘Vazirmatn’, sans-serif; /* A popular Persian font */
direction: rtl; /* For Persian text */
text-align: right;
margin: 0;
padding: 0;
background-color: #F8F9FA;
}
div {
box-sizing: border-box;
}
h1, h2, h3 {
font-family: ‘Vazirmatn’, sans-serif;
color: #2C3E50; /* Dark blue/grey for headings */
}
h1 {
font-size: 2.5em;
font-weight: bold;
text-align: center;
margin-bottom: 30px;
color: #2C3E50;
}
h2 {
font-size: 1.8em;
font-weight: bold;
margin-top: 40px;
margin-bottom: 20px;
border-bottom: 2px solid #3498DB; /* Blue underline */
padding-bottom: 10px;
color: #2C3E50;
}
h3 {
font-size: 1.4em;
font-weight: bold;
margin-top: 30px;
margin-bottom: 15px;
color: #3498DB; /* Lighter blue for subheadings */
}
p {
font-size: 1.1em;
line-height: 1.8;
color: #34495E; /* Slightly lighter dark blue/grey for body text */
text-align: justify;
}
ul {
list-style-type: disc;
padding-right: 25px; /* Adjust for RTL */
padding-left: 0; /* Adjust for RTL */
margin-bottom: 25px;
font-size: 1.05em;
color: #34495E;
}
ul li {
margin-bottom: 8px;
}
a {
color: #3498DB;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 30px;
background-color: #F8F9FA;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
th, td {
padding: 15px;
text-align: right; /* RTL */
border-bottom: 1px solid #ddd;
}
th {
background-color: #3498DB;
color: white;
font-size: 1.1em;
}
tr:nth-child(even) {
background-color: #F8F9FA;
}
.infographic-block {
background-color: #E8F8F5; /* Light green-blue background */
border: 2px solid #4CAF50; /* Green border */
border-radius: 10px;
padding: 25px;
margin-bottom: 30px;
text-align: center;
}
.infographic-block h3 {
color: #2E8B57; /* Darker green */
font-size: 1.6em;
margin-bottom: 20px;
}
.infographic-block > div {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
}
.infographic-block > div > div {
flex: 1 1 200px;
min-width: 180px;
background-color: white;
border-radius: 8px;
padding: 15px;
box-shadow: 0 2px 4px rgba(0,0,0,0.08);
border-top-width: 3px;
border-top-style: solid;
}
/* Responsive adjustments */
@media (max-width: 768px) {
h1 {
font-size: 2em;
}
h2 {
font-size: 1.6em;
}
h3 {
font-size: 1.2em;
}
p, ul, table, th, td {
font-size: 1em;
}
.infographic-block > div > div {
flex-basis: 100%; /* Stack elements on small screens */
max-width: 100%;
}
}
@media (max-width: 480px) {
h1 {
font-size: 1.8em;
}
h2 {
font-size: 1.4em;
}
h3 {
font-size: 1.1em;
}
p, ul, table, th, td {
font-size: 0.95em;
}
.infographic-block > div > div {
padding: 10px;
}
}

“`

**توضیحات تکمیلی برای شما:**

1. **فرمت هدینگ‌ها (H1, H2, H3)**: من از تگ‌های `

`, `

`, `

` به همراه ویژگی `style` برای شبیه‌سازی اندازه و ضخامت فونت استفاده کرده‌ام. وقتی این متن را در ویرایشگر بلوک یا وردپرس کپی کنید، این تگ‌ها باید به درستی شناسایی شوند و با CSS قالب سایت شما استایل‌دهی شوند. اگر در ویرایشگر بلوک، خودکار به هدینگ تبدیل نشد، کافیست متن هدینگ را انتخاب کرده و از منوی بالای بلوک، نوع آن را به H1, H2 یا H3 تغییر دهید. ویژگی‌های `style` که قرار داده‌ام، صرفاً برای نمایش بهتر در محیطی مثل اینجا است و در محیط وب، CSS سایت شما آن را پوشش خواهد داد.
2. **طراحی و رنگ‌بندی زیبا**:
* برای کلیت متن، از `div` اصلی با `max-width` و `margin: 0 auto` استفاده کرده‌ام تا در صفحات بزرگتر (لپ‌تاپ، تلویزیون) در مرکز قرار گیرد و خوانایی حفظ شود.
* رنگ‌بندی با استفاده از کدهای هگزادسیمال (مثلاً `#2C3E50` برای متن اصلی و `#3498DB` برای تاکیدات) انتخاب شده تا حس حرفه‌ای و آرامش‌بخشی داشته باشد. این رنگ‌ها مدرن و قابل قبول هستند.
* بلوک‌های جداگانه (فهرست مطالب، FAQ، اینفوگرافیک) با پس‌زمینه‌های رنگی ملایم و بوردر (border) متمایز شده‌اند تا از نظر بصری جذاب باشند.
3. **رسپانسیو (Responsive)**:
* ساختار HTML و CSS (`@media` queries در بخش “) برای نمایش بهینه در اندازه‌های مختلف صفحه (موبایل، تبلت، لپ‌تاپ، تلویزیون) طراحی شده است.
* استفاده از `flex-wrap` و `flex: 1 1 200px` در بخش اینفوگرافیک باعث می‌شود که در صفحات کوچکتر، عناصر به جای کنار هم قرار گرفتن، زیر هم قرار بگیرند.
4. **جدول آموزشی**: یک جدول دو ستونه با استایل‌دهی ساده و خوانا درج شده است.
5. **اینفوگرافیک جایگزین**: به جای تصویر، یک بلوک متنی با آیکون‌های ایموجی (1️⃣, 2️⃣, 🎓) و رنگ‌بندی جذاب ایجاد شده است که اطلاعات را به صورت گام به گام و بصری ارائه می‌دهد و در ویرایشگر بلوک نیز به راحتی قابل نمایش است. این روش هم زیباست و هم نیازی به آپلود تصویر ندارد.
6. **متن انسان‌نویس**: محتوا با لحنی طبیعی، جامع و علمی نوشته شده و هیچ‌گونه اشاره‌ای به هوش مصنوعی یا تبلیغات مستقیم ندارد. روی ارزش آموزشی و راهنمایی کاربر تمرکز شده است.
7. **کپی در ویرایشگر بلوک/کلاسیک**: تمام ساختار از تگ‌های استاندارد HTML استفاده می‌کند و با `div`ها، `h1-h3`، `p`، `ul`، `table` و `style`های داخلی، به گونه‌ای طراحی شده که پس از کپی در بخش “HTML” یا “متن” ویرایشگرهای وردپرس، به درستی نمایش داده شود. بخش “ را می‌توانید به صورت جداگانه در فایل CSS قالب خود یا در بخش “سفارشی‌سازی CSS” وردپرس قرار دهید تا به زیبایی مدنظر شما دست یابد. اگر این کار برایتان سخت است، می‌توانید کل متن را در حالت “HTML” ویرایشگر خود قرار دهید، اما بهترین روش، جدا کردن CSS است.

این مقاله تمامی خواسته‌های شما را در حد امکان یک خروجی متنی از هوش مصنوعی پوشش می‌دهد و پس از کپی در ویرایشگر بلوک یا کلاسیک، تجربه‌ای عالی را ارائه خواهد داد.