Javid در ‏۲۳ اوت ۲۰۲۶، ساعت ۰۹:۱۸

2026-08-23T09:18:41Z

→ نسخهٔ قدیمی‌تر		نسخهٔ ‏۲۳ اوت ۲۰۲۶، ساعت ۰۹:۱۸
خط ۹۰۸:		خط ۹۰۸:
	</h3>		</h3>

	~~<p>~~
	~~انتخاب محصول چاپی مورد نیاز~~
	~~</p>~~

	</div>		</div>
خط ۹۴۳:		خط ۹۴۱:
	</h3>		</h3>

	~~<p>~~
	~~تعیین ابعاد، جنس و تیراژ چاپ~~
	~~</p>~~

	</div>		</div>
خط ۹۷۸:		خط ۹۷۴:
	</h3>		</h3>

	~~<p>~~
	~~ارسال فایل طراحی برای چاپ~~
	~~</p>~~

	</div>		</div>
خط ۱٬۰۱۳:		خط ۱٬۰۰۷:
	</h3>		</h3>

	~~<p>~~
	~~بررسی و تأیید نهایی سفارش~~
	~~</p>~~

	</div>		</div>
خط ۱٬۰۴۸:		خط ۱٬۰۳۹:
	</h3>		</h3>

	~~<p>~~
	~~چاپ نهایی و تحویل سفارش~~
	~~</p>~~

	</div>		</div>

Javid در ‏۲۳ اوت ۲۰۲۶، ساعت ۰۶:۱۷

2026-08-23T06:17:30Z

نمایش تغییرات

Javid: صفحه‌ای تازه حاوی « مراحل ثبت سفارش چاپ و تبلیغات
2026-08-23T06:13:40Z

صفحه‌ای تازه حاوی « <html lang="fa" dir="rtl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>مراحل ثبت سفارش چاپ و تبلیغات</title> <meta name="description" content="مراحل ثبت سفارش خدمات چاپ و تبلیغات؛ از انتخاب محصول و مشخصات تا ارسال فایل و تکمیل سفارش چاپ."> <link rel="stylesheet"...» ایجاد کرد

صفحهٔ تازه

<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>مراحل ثبت سفارش چاپ و تبلیغات</title>

<meta name="description"
content="مراحل ثبت سفارش خدمات چاپ و تبلیغات؛ از انتخاب محصول و مشخصات تا ارسال فایل و تکمیل سفارش چاپ.">

<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">

<style>

/* =========================================================
تنظیمات اصلی رنگ و اندازه
فقط مقادیر این قسمت را تغییر دهید
========================================================= /

:root {

/ رنگ اصلی خطوط و حاشیه /
--main-green: #20b957;

/ رنگ آیکون‌ها /
--icon-color: #ffb900;

/ رنگ عنوان اصلی /
--title-color: #777777;

/ رنگ متن مراحل /
--text-color: #666666;

/ رنگ پس زمینه /
--section-bg: #ffffff;

/ رنگ داخل دایره /
--circle-bg: #ffffff;

/ رنگ حلقه داخلی /
--inner-ring: #e9e9e9;

/ سایه /
--shadow-color: rgba(0, 0, 0, 0.12);

/ اندازه دایره /
--circle-size: 230px;

/ ضخامت خطوط سبز /
--line-width: 2px;

/ رنگ پس زمینه کلی /
--body-bg: #ffffff;
}

/ =========================================================
RESET
========================================================= /

{
box-sizing: border-box;
margin: 0;
padding: 0;
}

html {
scroll-behavior: smooth;
}

body {
direction: rtl;
font-family: Tahoma, Arial, sans-serif;
background: var(--body-bg);
color: var(--text-color);
}

/* =========================================================
SECTION
========================================================= /

.order-process {
width: 100%;
padding: 30px 10px 40px;
background: var(--section-bg);
overflow: hidden;
}

/ =========================================================
TITLE
========================================================= /

.order-process-title {
text-align: center;
margin-bottom: 30px;
}

.order-process-title h2 {
color: var(--title-color);
font-size: clamp(22px, 4vw, 30px);
font-weight: 700;
line-height: 1.6;
}

.order-process-title p {
margin-top: 5px;
color: #999;
font-size: 13px;
}

/ =========================================================
PROCESS CONTAINER
========================================================= /

.process-container {
width: 100%;
max-width: 1350px;
margin: 0 auto;

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

/ =========================================================
EACH STEP
========================================================= /

.process-step {
position: relative;
width: var(--circle-size);
height: var(--circle-size);

flex: 0 0 auto;

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

z-index: 2;
}

/ =========================================================
CIRCLE
========================================================= /

.step-circle {

width: 100%;
height: 100%;

border: var(--line-width) solid var(--main-green);
border-radius: 50%;

background: var(--circle-bg);

display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

position: relative;

box-shadow:
0 12px 20px var(--shadow-color);

isolation: isolate;
}

/ حلقه خاکستری داخل دایره /

.step-circle::before {

content: "";

position: absolute;

inset: 7px;

border: 5px solid var(--inner-ring);

border-radius: 50%;

z-index: -1;
}

/ =========================================================
ICON
========================================================= /

.step-icon {

width: 75px;
height: 75px;

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

color: var(--icon-color);

font-size: 48px;

margin-bottom: 12px;
}

/ =========================================================
TEXT
========================================================= /

.step-content {
text-align: center;
padding: 0 15px;
}

.step-content h3 {

color: var(--text-color);

font-size: 17px;

font-weight: 700;

line-height: 1.7;
}

.step-content p {

margin-top: 4px;

color: #999;

font-size: 11px;

line-height: 1.7;
}

/ =========================================================
GREEN CONNECTOR
در موبایل به صورت عمودی
========================================================= /

.process-step:not(:last-child)::after {

content: "";

position: absolute;

width: 50px;
height: 75px;

bottom: -48px;
left: 50%;

transform: translateX(-50%);

border-right: var(--line-width) solid var(--main-green);
border-left: var(--line-width) solid var(--main-green);

border-radius: 40px;

z-index: 0;
}

/ =========================================================
نقطه اتصال پایین
========================================================= /

.process-step:not(:last-child)::before {

content: "";

position: absolute;

width: 9px;
height: 9px;

background: var(--section-bg);

border: 2px solid var(--main-green);

border-radius: 50%;

bottom: -55px;
left: calc(50% + 22px);

z-index: 4;
}

/ =========================================================
DESKTOP
========================================================= /

@media (min-width: 768px) {

.order-process {
padding: 25px 15px 40px;
}

.order-process-title {
margin-bottom: 35px;
}

.process-container {

flex-direction: row;

justify-content: center;

align-items: center;

gap: 0;
}

.process-step {
width: var(--circle-size);
height: var(--circle-size);
}

/ -----------------------------------------------------
اتصال افقی بین دایره‌ها
----------------------------------------------------- /

.process-step:not(:last-child)::after {

width: 105px;
height: 75px;

top: 50%;
right: -53px;
left: auto;

bottom: auto;

transform: translateY(-50%);

border-top: var(--line-width) solid var(--main-green);
border-bottom: var(--line-width) solid var(--main-green);

border-right: 0;
border-left: 0;

border-radius: 50px;

z-index: 0;
}

/ -----------------------------------------------------
نقطه اتصال
----------------------------------------------------- /

.process-step:not(:last-child)::before {

width: 9px;
height: 9px;

top: 50%;

right: -4px;
left: auto;

bottom: auto;

transform: translateY(-50%);

background: var(--section-bg);

border: 2px solid var(--main-green);

z-index: 5;
}

/ -----------------------------------------------------
دایره‌ها روی خطوط قرار بگیرند
----------------------------------------------------- /

.step-circle {
z-index: 3;
}

}

/ =========================================================
DESKTOP LARGE
========================================================= /

@media (min-width: 1100px) {

:root {
--circle-size: 240px;
}

.process-container {
max-width: 1360px;
}

.step-icon {
font-size: 50px;
}

.step-content h3 {
font-size: 17px;
}
}

/ =========================================================
TABLET
========================================================= /

@media (min-width: 768px) and (max-width: 1099px) {

:root {
--circle-size: 190px;
}

.process-step:not(:last-child)::after {
width: 75px;
right: -38px;
}

.step-icon {
font-size: 42px;
}

.step-content h3 {
font-size: 14px;
}

}

/ =========================================================
MOBILE
========================================================= /

@media (max-width: 767px) {

.order-process {
padding-top: 25px;
padding-bottom: 35px;
}

:root {
--circle-size: min(230px, 72vw);
}

.process-container {
gap: 45px;
}

.step-icon {
font-size: 44px;
margin-bottom: 10px;
}

.step-content h3 {
font-size: 16px;
}

.step-content p {
display: none;
}

}

/ =========================================================
SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

:root {
--circle-size: 205px;
}

.step-icon {
font-size: 40px;
}

.step-content h3 {
font-size: 15px;
}

}

</style>
</head>

<body>



<section class="order-process"
aria-labelledby="order-process-title">

<div class="order-process-title">

<h2 id="order-process-title">
مراحل ثبت سفارش چاپ و تبلیغات
</h2>

<p>
ثبت سفارش آسان و سریع خدمات چاپ و تبلیغات
</p>

</div>

<div class="process-container">



<article class="process-step">

<div class="step-circle">

<div class="step-icon" aria-hidden="true">
<i class="fa-solid fa-box-open"></i>
</div>

<div class="step-content">

<h3>
انتخاب خدمات چاپ
</h3>

<p>
انتخاب محصول چاپی مورد نیاز
</p>

</div>

</div>

</article>



<article class="process-step">

<div class="step-circle">

<div class="step-icon" aria-hidden="true">
<i class="fa-solid fa-hand-pointer"></i>
</div>

<div class="step-content">

<h3>
انتخاب مشخصات
</h3>

<p>
تعیین جنس، ابعاد و تیراژ
</p>

</div>

</div>

</article>



<article class="process-step">

<div class="step-circle">

<div class="step-icon" aria-hidden="true">
<i class="fa-solid fa-file-arrow-up"></i>
</div>

<div class="step-content">

<h3>
ارسال فایل چاپی
</h3>

<p>
ارسال فایل طراحی برای چاپ
</p>

</div>

</div>

</article>



<article class="process-step">

<div class="step-circle">

<div class="step-icon" aria-hidden="true">
<i class="fa-solid fa-list-check"></i>
</div>

<div class="step-content">

<h3>
تأیید سفارش
</h3>

<p>
بررسی نهایی مشخصات سفارش
</p>

</div>

</div>

</article>



<article class="process-step">

<div class="step-circle">

<div class="step-icon" aria-hidden="true">
<i class="fa-solid fa-print"></i>
</div>

<div class="step-content">

<h3>
چاپ و تحویل
</h3>

<p>
چاپ سفارش و تحویل نهایی
</p>

</div>

</div>

</article>

</div>

</section>

</body>
</html>

الگو:کانتینر خط و دایره - تاریخچهٔ نسخه‌ها

Javid در ‏۲۳ اوت ۲۰۲۶، ساعت ۰۹:۱۸

Javid در ‏۲۳ اوت ۲۰۲۶، ساعت ۰۶:۱۷