آموزش جامع ساخت وب‌سایت نمونه کار واکنش‌گرا (Portfolio) با HTML, CSS و JavaScript

0 دیدگاه 30 آموزش css, آموزش html, آموزش تکنیک های css

آموزش جامع ساخت وب‌سایت نمونه کار واکنش‌گرا (Portfolio) با HTML, CSS و JavaScript

فهرست موضوعات در این آموزش

در این آموزش گام به گام، نحوه ساخت یک وب‌سایت نمونه کار واکنش‌گرا با HTML، CSS و JavaScript را یاد می‌گیرید. از ساختار اولیه تا افزودن افکت‌های مدرن مانند ScrollReveal و اسلایدر نظرات، همه را به همراه نکات سئو و لینک‌های داخلی در این مقاله جامع خواهید آموخت

مقدمه
در این آموزش قصد داریم گام‌به‌گام نحوه ساخت یک قالب وب‌سایت نمونه‌کار (Portfolio) را به شما نشان دهیم. این قالب کاملاً واکنش‌گرا بوده و از تکنیک‌های مدرن HTML، CSS و JavaScript استفاده می‌کند. در اولین مرحله، باید ساختار اصلی سند HTML را آماده کنیم و سپس لینک‌های مربوط به فایل‌های CSS و کتابخانه‌های موردنیاز (CDN) را در تگ <head> قرار دهیم. این بخش، پایه و اساس پروژه ما را شکل می‌دهد و به مرور، بخش‌های دیگر را هم اضافه خواهیم کرد.

نکته مهم: اگر علاقه‌مند هستید آموزش ویدیویی این پروژه را ببینید، می‌توانید به کانال یوتیوب پاسخ وردپرس مراجعه کنید. همچنین، اگر مایلید درباره ترفندهای کاربردی CSS اطلاعات بیشتری کسب کنید، توصیه می‌کنم سری به لینک‌های زیر بزنید:

ترفندهای ضروری CSS

تگ‌های مهم HTML

سایر آموزش‌های جذاب وب

بخش اول: تگ Head و لینک کردن CSS و CDN

در این مرحله، ما نیاز داریم که ساختار اصلی HTML را ایجاد کرده و فایل‌های CSS سفارشی و کتابخانه‌های مورد نیاز (CDN) را به پروژه اضافه کنیم. این کار کمک می‌کند تا در ادامه، بتوانیم از آیکون‌ها، فونت‌ها و قابلیت‌های اضافی مثل اسلایدر (Swiper) به‌راحتی استفاده کنیم.

۱. ساختار پایه سند HTML

در ابتدا یک سند HTML ایجاد کرده و تگ <head> را به صورت زیر تنظیم می‌کنیم:

<!DOCTYPE html>
<html lang="fa">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>طراحی وب‌سایت نمونه کار واکنشگرا جذاب</title>

  <!-- استایل Swiper -->
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"
  />

  <!-- آیکون‌های باکس (Boxicons) -->
  <link
    href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css"
    rel="stylesheet"
  />

  <!-- استایل سفارشی -->
  <link rel="stylesheet" href="css/style.css" />
</head>
<body>
  <!-- سایر بخش‌های صفحه در اینجا قرار خواهند گرفت -->
</body>
</html>

<!DOCTYPE html>

<head>

<title>طراحی وب‌سایت نمونه کار واکنشگرا جذاب</title>

<link

rel="stylesheet"

href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"

<link

href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css"

rel="stylesheet"

</head>

<body>

</body>

</html>

توضیح تگ‌ها و لینک‌ها:

<meta charset="UTF-8" />: تعیین استاندارد UTF-8 برای نمایش صحیح حروف فارسی.
<meta http-equiv="X-UA-Compatible" content="IE=edge" />: اطمینان از سازگاری مرورگرهای قدیمی با استانداردهای جدید.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />: جهت واکنش‌گرایی (Responsive) صحیح در موبایل‌ها و تبلت‌ها.
<title>...: عنوان صفحه که در تب مرورگر نمایش داده می‌شود.
لینک کتابخانه‌ی Swiper: از CDN مربوط به Swiper استفاده می‌کنیم تا در مراحل بعد، اسلایدر زیبایی برای بخش نظرات یا نمونه‌کارها داشته باشیم.
لینک آیکون‌های Boxicons: برای اضافه کردن آیکون‌های جذاب در منو، دکمه‌ها و سایر بخش‌ها استفاده می‌شود.
فایل CSS سفارشی: فایل style.css که در پوشه‌ی css قرار دارد و استایل‌های اصلی پروژه در آن نوشته می‌شود.

بخش کد ریست (CSS Reset)

در هر پروژه وب، استفاده از کد ریست CSS بسیار مهم است. کد ریست باعث می‌شود تا استایل‌های پیش‌فرض مرورگرها پاک شوند و شما با یک بوم سفید و بدون استایل‌های ناخواسته کار کنید. این کار باعث می‌شود که طراحی شما در تمامی مرورگرها یکسان و قابل پیش‌بینی باشد.

کد ریست CSS

در اینجا یک نمونه کد ریست ساده آورده شده است که شامل تنظیمات پایه‌ای برای تمام المان‌ها می‌شود:

/* CSS Reset Code */
/* پاکسازی استایل‌های پیش‌فرض تمام المان‌ها */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* انتخاب pseudo-elements نیز */
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

/* تنظیمات پایه برای تگ html */
html {
  font-size: 62.5%; /* به منظور ساده‌سازی محاسبات rem */
  scroll-behavior: smooth;
  overflow-x: hidden;
}

/* تنظیمات پایه برای بدنه صفحه */
body {
  background: var(--bg-color);
  color: var(--text-color);
  font-family: Vazirmatn, sans-serif;
}

/* CSS Reset Code */

/* پاکسازی استایل‌های پیش‌فرض تمام المان‌ها */

* {

margin: ;

padding: ;

box-sizing: border-box;

}

/* انتخاب pseudo-elements نیز */

*::before,

*::after {

margin: ;

padding: ;

box-sizing: inherit;

}

/* تنظیمات پایه برای تگ html */

html {

font-size: 62.5%; /* به منظور ساده‌سازی محاسبات rem */

scroll-behavior: smooth;

overflow-x: hidden;

}

/* تنظیمات پایه برای بدنه صفحه */

body {

background: var(--bg-color);

color: var(--text-color);

font-family: Vazirmatn, sans-serif;

}

توضیحات:

* { margin: 0; padding: 0; box-sizing: border-box; }
این خط باعث می‌شود که تمامی المان‌های صفحه از حاشیه (margin) و فاصله داخلی (padding) خالی شوند. همچنین با استفاده از box-sizing: border-box، اندازه‌بندی المان‌ها شامل padding و border نیز می‌شود.
*::before, *::after
اطمینان حاصل می‌کند که المان‌های مجازی قبل و بعد از المان‌ها نیز از تنظیمات ریست استفاده کنند.
html { font-size: 62.5%; }
با تنظیم اندازه فونت تگ html به ۶۲.۵%، محاسبات rem آسان‌تر می‌شود. به طور معمول، ۱rem برابر با ۱۰px می‌شود (در صورتی که مرورگر به صورت پیش‌فرض ۱۶px داشته باشد).
scroll-behavior: smooth;
اسکرول صفحه را نرم می‌کند.
overflow-x: hidden;
جلوگیری از ایجاد اسکرول افقی در صورت وجود المان‌های بزرگ.

جمع‌بندی بخش کد ریست

هدف اصلی:
پاکسازی استایل‌های پیش‌فرض مرورگرها و ایجاد یک بوم سفید برای طراحی سفارشی شما.
مزایا:
- یکپارچگی طراحی در تمامی مرورگرها
- کنترل بهتر بر روی اندازه و فاصله‌بندی المان‌ها
- بهبود تجربه کاربری و سئو

برای مشاهده آموزش‌های تکمیلی در زمینه ترفندهای CSS، به ترفندهای ضروری CSS مراجعه کنید.
همچنین، اگر مایل هستید این آموزش را به صورت ویدیویی ببینید، کانال یوتیوب پاسخ وردپرس را از دست ندهید.

این بخش پایه‌ای از استایل‌های شما را تشکیل می‌دهد که در ادامه پروژه از آن استفاده خواهیم کرد.
اگر سوال یا نکته‌ای در این زمینه دارید، حتماً مطرح کنید!

مرحله بعدی: ساخت هدر (Header) و منوی ناوبری (Navbar)

۱. کد HTML (ساختار هدر و منوی ناوبری)

در این قسمت، ساختار HTML شامل یک تگ <header>، یک لینک لوگو، منوی ناوبری (با چند لینک داخلی) و دو آیکون برای تغییر حالت تاریک و منوی موبایل قرار داده می‌شود.

<header class="header">
  <a href="#" class="logo">نمونه کار.</a>

  <nav class="navbar">
    <a href="#home" class="active">خانه</a>
    <a href="#about">درباره</a>
    <a href="#services">خدمات</a>
    <a href="#portfolio">نمونه کار</a>
    <a href="#contact">تماس</a>
  </nav>

  <!-- آیکون حالت تاریک -->
  <div class="bx bx-moon" id="darkMode-icon"></div>
  <!-- آیکون منوی موبایل -->
  <div class="bx bx-menu" id="menu-icon"></div>
</header>

<a href="#" class="logo">نمونه کار.</a>

<a href="#about">درباره</a>

<a href="#services">خدمات</a>

<a href="#portfolio">نمونه کار</a>

</nav>

</header>

۲. کد CSS (استایل هدر و منوی ناوبری)

در این بخش از CSS، هدر به صورت ثابت (fixed) در بالای صفحه قرار می‌گیرد. تغییرات واکنش‌گرا نیز در media query‌ها لحاظ شده تا در دستگاه‌های موبایل منو به صورت عمودی نمایش داده شود.

/* هدر اصلی */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 2rem 7%;
  background: transparent;
  display: flex;
  align-items: center;
  z-index: 100;
  transition: 0.5s;
}

/* هدر پس از اسکرول */
.header.sticky {
  background: var(--bg-color);
  box-shadow: 0 0.1rem 1rem var(--shadow-color);
}

/* استایل لوگو */
.logo {
  font-size: 2.5rem;
  color: var(--main-color);
  font-weight: 600;
  margin-right: auto;
}

/* استایل لینک‌های منوی ناوبری */
.navbar a {
  position: relative;
  font-size: 1.7rem;
  color: var(--white-color);
  font-weight: 500;
  margin-right: 3.5rem;
}

/* تغییر رنگ لینک‌ها در هدر sticky */
.header.sticky .navbar a {
  color: var(--text-color);
}

.header.sticky .navbar a.active {
  color: var(--main-color);
}

/* زیرخط فعال لینک */
.navbar a.active::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 0.2rem;
  background: var(--white-color);
}

/* تغییر پس‌زمینه زیرخط در هدر sticky */
.header.sticky .navbar a::before {
  background: var(--main-color);
  opacity: 0.7;
}

/* آیکون حالت تاریک */
#darkMode-icon {
  font-size: 2.4rem;
  color: var(--white-color);
  cursor: pointer;
}

.header.sticky #darkMode-icon {
  color: var(--text-color);
  opacity: 0.9;
}

/* آیکون منوی موبایل */
#menu-icon {
  font-size: 3.6rem;
  color: var(--text-color);
  display: none;
}

/* واکنش‌گر برای نمایش منوی موبایل */
@media (max-width: 768px) {
  #menu-icon {
    display: block;
  }

  #darkMode-icon {
    position: absolute;
    right: 7rem;
    font-size: 2.6rem;
    color: var(--text-color);
    margin-bottom: 0.1rem;
  }

  /* منوی ناوبری در موبایل */
  .navbar {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    padding: 1rem 3%;
    background: var(--bg-color);
    border-top: 0.1rem solid rgba(0, 0, 0, 0.2);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    display: none;
  }

  .navbar.active {
    display: block;
    text-align: center;
  }

  .navbar a {
    display: block;
    font-size: 2rem;
    margin: 3rem 0;
    color: var(--text-color);
  }

  .navbar a.active {
    color: var(--main-color);
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

/* هدر اصلی */

.header {

position: fixed;

top: ;

left: ;

width: 100%;

padding: 2rem 7%;

background: transparent;

display: flex;

align-items: center;

z-index: 100;

transition: 0.5s;

}

/* هدر پس از اسکرول */

.header.sticky {

background: var(--bg-color);

box-shadow: 0.1rem 1rem var(--shadow-color);

}

/* استایل لوگو */

.logo {

font-size: 2.5rem;

color: var(--main-color);

font-weight: 600;

margin-right: auto;

}

/* استایل لینک‌های منوی ناوبری */

.navbar a {

position: relative;

font-size: 1.7rem;

color: var(--white-color);

font-weight: 500;

margin-right: 3.5rem;

}

/* تغییر رنگ لینک‌ها در هدر sticky */

.header.sticky .navbar a {

color: var(--text-color);

}

.header.sticky .navbar a.active {

color: var(--main-color);

}

/* زیرخط فعال لینک */

.navbar a.active::before {

content: "";

position: absolute;

left: ;

bottom: -6px;

width: 100%;

height: 0.2rem;

background: var(--white-color);

}

/* تغییر پس‌زمینه زیرخط در هدر sticky */

.header.sticky .navbar a::before {

background: var(--main-color);

opacity: 0.7;

}

/* آیکون حالت تاریک */

#darkMode-icon {

font-size: 2.4rem;

color: var(--white-color);

cursor: pointer;

}

.header.sticky #darkMode-icon {

color: var(--text-color);

opacity: 0.9;

}

/* آیکون منوی موبایل */

#menu-icon {

font-size: 3.6rem;

color: var(--text-color);

display: none;

}

/* واکنش‌گر برای نمایش منوی موبایل */

@media (max-width: 768px) {

#menu-icon {

display: block;

}

#darkMode-icon {

position: absolute;

right: 7rem;

font-size: 2.6rem;

color: var(--text-color);

margin-bottom: 0.1rem;

}

/* منوی ناوبری در موبایل */

.navbar {

position: absolute;

top: 100%;

left: ;

width: 100%;

padding: 1rem 3%;

background: var(--bg-color);

border-top: 0.1rem solid rgba(, , , 0.2);

box-shadow: 0.5rem 1rem rgba(, , , 0.1);

display: none;

}

.navbar.active {

display: block;

text-align: center;

}

.navbar a {

display: block;

font-size: 2rem;

margin: 3rem ;

color: var(--text-color);

}

.navbar a.active {

color: var(--main-color);

}

۳. کد JS (عملکرد منوی ناوبری و تغییر حالت تاریک)

این بخش از کد JS دو عملکرد اصلی دارد:

باز/بسته کردن منوی موبایل با کلیک روی آیکون منو.
تغییر حالت تاریک/روشن با کلیک روی آیکون حالت تاریک.

/**************************************************
 * Menu Icon & Navbar Toggle
 * -----------------------------------------------
 * - با کلیک روی آیکون منو (#menu-icon)، کلاس "bx-x" به آیکون اضافه یا حذف می‌شود.
 * - در همان زمان، کلاس "active" به منوی ناوبری (.navbar) اضافه یا حذف می‌شود تا منو
 *   در حالت موبایل باز یا بسته شود.
 **************************************************/
let menuIcon = document.querySelector("#menu-icon");
let navbar = document.querySelector(".navbar");

menuIcon.onclick = () => {
  menuIcon.classList.toggle("bx-x");
  navbar.classList.toggle("active");
};

/**************************************************
 * Dark Mode Toggle
 * -----------------------------------------------
 * - با کلیک روی آیکون حالت تاریک (#darkMode-icon)، کلاس "bx-sun" به آیکون اضافه یا حذف می‌شود.
 * - همچنین، کلاس "dark-mode" به بدنه صفحه اضافه یا حذف می‌شود تا تم رنگی صفحه تغییر کند.
 **************************************************/
let darkModeIcon = document.querySelector("#darkMode-icon");

darkModeIcon.onclick = () => {
  darkModeIcon.classList.toggle("bx-sun");
  document.body.classList.toggle("dark-mode");
};

/**************************************************

* Menu Icon & Navbar Toggle

* -----------------------------------------------

* - با کلیک روی آیکون منو (#menu-icon)، کلاس "bx-x" به آیکون اضافه یا حذف می‌شود.

* - در همان زمان، کلاس "active" به منوی ناوبری (.navbar) اضافه یا حذف می‌شود تا منو

* در حالت موبایل باز یا بسته شود.

**************************************************/

let menuIcon = document.querySelector("#menu-icon");

let navbar = document.querySelector(".navbar");

menuIcon.onclick = () => {

menuIcon.classList.toggle("bx-x");

navbar.classList.toggle("active");

};

/**************************************************

* Dark Mode Toggle

* -----------------------------------------------

* - با کلیک روی آیکون حالت تاریک (#darkMode-icon)، کلاس "bx-sun" به آیکون اضافه یا حذف می‌شود.

* - همچنین، کلاس "dark-mode" به بدنه صفحه اضافه یا حذف می‌شود تا تم رنگی صفحه تغییر کند.

**************************************************/

let darkModeIcon = document.querySelector("#darkMode-icon");

darkModeIcon.onclick = () => {

darkModeIcon.classList.toggle("bx-sun");

document.body.classList.toggle("dark-mode");

};

جمع‌بندی مرحله هدر و منوی ناوبری

در این مرحله، ما هدر سایت را به همراه منوی ناوبری واکنش‌گرا ایجاد کردیم. با استفاده از HTML، CSS و JS:

HTML: ساختار هدر شامل لوگو، منو و آیکون‌های تعاملی.
CSS: استایل‌دهی به هدر با تغییر رنگ، افکت‌های زیبا و واکنش‌گرایی برای دستگاه‌های مختلف.
JS: افزودن عملکردهای باز/بسته کردن منوی موبایل و تغییر حالت تاریک/روشن.

برای اطلاعات بیشتر در زمینه‌ی ترفندهای CSS می‌توانید به ترفندهای ضروری CSS مراجعه کنید و اگر به آموزش ویدیویی این بخش علاقه‌مندید، حتماً کانال یوتیوب پاسخ وردپرس را ببینید.

مرحله بعد: ساخت بخش خانه (Home)

در این مرحله به سراغ ساخت بخش خانه (Home) می‌رویم که اولین بخشی است که کاربران هنگام ورود به سایت مشاهده می‌کنند. این بخش شامل معرفی کوتاه، یک متن خوش‌آمدگویی و بخش‌هایی از حرفه‌های شما می‌شود. در ادامه به صورت مرحله به مرحله کد HTML، CSS و (در صورت نیاز) JS مربوط به این بخش را بررسی می‌کنیم.

۱. کد HTML بخش خانه

در این قسمت، ساختار HTML بخش خانه شامل محتوای متنی، معرفی حرفه‌ها و تصویر مرتبط قرار می‌گیرد:

<section class="home" id="home">
  <div class="home-content">
    <h3>سلام، من هستم</h3>
    <h1>زمان الله ابراهیمی</h1>
    <p>
      من یک توسعه‌دهنده وب هستم که عاشق ساخت وب‌سایت‌های زیبا و کاربردی برای
      افرادی هستم که می‌خواهند تغییر ایجاد کنند.
    </p>
    <p>
      در حال حاضر دانشجوی مدرسه دیجیتال جمپ هستم؛ جایی که یاد می‌گیرم چگونه
      وب‌سایت‌های زیبا و کاربردی با استفاده از HTML، CSS، JavaScript و WordPress بسازم.
    </p>

    <div class="social-media">
      <a href="#"><i class="bx bxl-facebook"></i></a>
      <a href="#"><i class="bx bxl-twitter"></i></a>
      <a href="#"><i class="bx bxl-instagram-alt"></i></a>
      <a href="#"><i class="bx bxl-linkedin"></i></a>
    </div>

    <a href="#" class="btn">دانلود رزومه</a>
  </div>

  <div class="profession-container">
    <div class="profession-box">
      <div class="profession" style="--i: 0">
        <i class="bx bx-code-alt"></i>
        <h3>توسعه‌دهنده وب</h3>
      </div>
      <div class="profession" style="--i: 1">
        <i class="bx bx-camera"></i>
        <h3>عکاس</h3>
      </div>
      <div class="profession" style="--i: 2">
        <i class="bx bx-palette"></i>
        <h3>طراح وب</h3>
      </div>
      <div class="profession" style="--i: 3">
        <i class="bx bx-video-recording"></i>
        <h3>فیلم‌ساز</h3>
      </div>
      <div class="circle"></div>
    </div>

    <div class="overlay"></div>
  </div>

  <div class="home-img">
    <img src="images/home.png" alt="تصویر بخش خانه" />
  </div>
</section>

<h1>زمان الله ابراهیمی</h1>

<p>

من یک توسعه‌دهنده وب هستم که عاشق ساخت وب‌سایت‌های زیبا و کاربردی برای

افرادی هستم که می‌خواهند تغییر ایجاد کنند.

</p>

<p>

در حال حاضر دانشجوی مدرسه دیجیتال جمپ هستم؛ جایی که یاد می‌گیرم چگونه

وب‌سایت‌های زیبا و کاربردی با استفاده از HTML، CSS، JavaScript و WordPress بسازم.

</p>

</div>

<a href="#" class="btn">دانلود رزومه</a>

</div>

<h3>توسعه‌دهنده وب</h3>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</section>

توضیحات:

بخش متنی: شامل عناوین (h3، h1) و دو پاراگراف توضیحی است که معرفی شما را به کاربر ارائه می‌دهد.
بخش شبکه‌های اجتماعی: لینک‌هایی به شبکه‌های اجتماعی جهت ارتباط بیشتر با شما قرار داده شده‌اند.
بخش حرفه‌ها: با استفاده از یک انیمیشن چرخان، حرفه‌های شما (توسعه‌دهنده وب، عکاس، طراح وب و فیلم‌ساز) به صورت دایره‌ای نمایش داده می‌شود.
بخش تصویر: در انتهای این بخش تصویری قرار دارد که به صورت دکوراتیو نمایش داده می‌شود.

۲. کد CSS بخش خانه

در این قسمت، استایل‌های مربوط به چیدمان و ظاهر بخش خانه را اضافه می‌کنیم:

/* تنظیمات اصلی بخش خانه */
.home {
  display: flex;
  align-items: center;
  position: relative;
}

.home .home-content {
  max-width: 44rem;
  text-align: right;
}

.home-content h3 {
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 0.3;
}

.home-content h1 {
  font-size: 5.6rem;
  font-weight: 700;
  margin: 2rem 0;
}

.home-content p {
  font-size: 1.6rem;
  line-height: 2;
}

/* استایل دکمه‌ها */
.home-content .btn {
  display: inline-block;
  padding: 1.2rem 2.8rem;
  background: var(--main-color);
  border-radius: 0.6rem;
  box-shadow: 0 0.2rem 0.5rem var(--shadow-color);
  font-size: 1.6rem;
  color: var(--white-color);
  letter-spacing: 0.1rem;
  font-weight: 600;
  border: 0.2rem solid transparent;
  transition: 0.5s ease;
}
<div style="clear:both; margin-top:1.5em; margin-bottom:1.5em;"><a href="https://replywp.com/learning-google-font/" target="_blank" rel="nofollow" class="IRPP_button"><!-- INLINE RELATED POSTS 1/3 //--><style> .IRPP_button , .IRPP_button .postImageUrl , .IRPP_button .centered-text-area { min-height: 86px; position: relative; } .IRPP_button , .IRPP_button:hover , .IRPP_button:visited , .IRPP_button:active { border:0!important; } .IRPP_button { display: block; transition: background-color 250ms; webkit-transition: background-color 250ms; width: 100%; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #3498DB; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); } .IRPP_button:active , .IRPP_button:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; } .IRPP_button .postImageUrl { background-position: center; background-size: cover; float: right; margin: 0; padding: 0; width: 30%; } .IRPP_button .centered-text-area { float: left; width: 70%; padding:0; margin:0; } .IRPP_button .ctaText { border-bottom: 0 solid #fff; color: #FFFFFF; font-size: 13px; font-weight: bold; margin: 0; padding: 0; } .IRPP_button .postTitle { color: #ECF0F1; font-size: 16px; font-weight: 600; margin: 0; padding: 0; width: 80%;display: inline-block;float: right; } .IRPP_button .ctaButton { background: #2980B9; color: #FFFFFF; border: none; border-radius: 3px; box-shadow: none; font-size: 14px; font-weight: bold; line-height: 26px; margin: 18px 14px 18px 14px; moz-border-radius: 3px; padding: 12px 0; text-align: center; text-decoration: none; text-shadow: none; webkit-border-radius: 3px; position: absolute;float: left;padding: 5px 3%;width: auto;left: 0;top: 8px; } .IRPP_button:hover .ctaButton { background: #3498DB; } .IRPP_button .centered-text { display: table; height: 86px; padding:0; margin:0; padding-left: 0px!important; top: 0;width: 100%; } .IRPP_button .IRPP_button-content { display: table-cell; margin: 0; padding: 0; padding-right: 10px; position: relative; vertical-align: middle; width: 100%; } .IRPP_button:after { content: ""; display: block; clear: both; } </style><div class="centered-text-area"><div class="centered-text"><div class="IRPP_button-content"><div class="postTitle">آموزش css آموزش استفاده از فونت گوگل</div><div class="ctaButton">یک آموزش جذاب دیگه!</div></div></div></div><div data-bg="https://replywp.com/wp-content/uploads/2023/07/آموزش-css-آموزش-استفاده-از-فونت-گوگل-300x300.jpg" class="postImageUrl rocket-lazyload" style=""></div></a></div>
.home-content .btn:hover {
  background: transparent;
  color: var(--main-color);
  border-color: var(--main-color);
}

/* استایل شبکه‌های اجتماعی */
.home-content .social-media a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 4rem;
  height: 4rem;
  background: transparent;
  border: 0.2rem solid var(--main-color);
  border-radius: 50%;
  box-shadow: 0 0.2rem 0.5rem var(--shadow-color);
  font-size: 2rem;
  color: var(--main-color);
  margin: 2.5rem 1.5rem 3rem 0;
  transition: 0.5s ease;
}

.home-content .social-media a:hover {
  background: var(--main-color);
  color: var(--white-color);
}

/* تنظیمات بخش حرفه‌های چرخان */
.home .profession-container {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
}

.home .profession-container .profession-box {
  position: absolute;
  top: 0;
  right: 0;
  width: 768px;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: professionRotate 20s ease-out infinite;
}

@keyframes professionRotate {
  0%, 20% { transform: rotate(0deg); }
  25%, 45% { transform: rotate(-90deg); }
  50%, 70% { transform: rotate(-180deg); }
  75%, 95% { transform: rotate(-270deg); }
  100% { transform: rotate(-360deg); }
}

.home .profession-box .profession {
  position: absolute;
  left: 0;
  display: flex;
  align-items: center;
  flex-direction: column;
  color: var(--main-color);
  transform: rotate(calc(360deg / 4 * var(--i)));
  transform-origin: 384px;
  background: var(--bg-color);
  padding: 13px 0;
}

.home .profession-box .profession i {
  font-size: 3.8rem;
}

.home .profession h3 {
  font-size: 3.2rem;
  line-height: 1;
  font-weight: 600;
}

/* المان دایره‌ای تزئینی */
.home .profession-box .circle {
  width: 560px;
  height: 560px;
  border: 3px solid var(--main-color);
  border-radius: 50%;
  z-index: -1;
}

/* استایل تصویر بخش خانه */
.home-img img {
  position: absolute;
  bottom: 0;
  right: 40px;
  pointer-events: none;
  max-width: 480px;
  max-height: 100vh;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

/* تنظیمات اصلی بخش خانه */

.home {

display: flex;

align-items: center;

position: relative;

}

.home .home-content {

max-width: 44rem;

text-align: right;

}

.home-content h3 {

font-size: 3.2rem;

font-weight: 700;

line-height: 0.3;

}

.home-content h1 {

font-size: 5.6rem;

font-weight: 700;

margin: 2rem ;

}

.home-content p {

font-size: 1.6rem;

line-height: 2;

}

/* استایل دکمه‌ها */

.home-content .btn {

display: inline-block;

padding: 1.2rem 2.8rem;

background: var(--main-color);

border-radius: 0.6rem;

box-shadow: 0.2rem 0.5rem var(--shadow-color);

font-size: 1.6rem;

color: var(--white-color);

letter-spacing: 0.1rem;

font-weight: 600;

border: 0.2rem solid transparent;

transition: 0.5s ease;

}

.home-content .btn:hover {

background: transparent;

color: var(--main-color);

border-color: var(--main-color);

}

/* استایل شبکه‌های اجتماعی */

.home-content .social-media a {

display: inline-flex;

justify-content: center;

align-items: center;

width: 4rem;

height: 4rem;

background: transparent;

border: 0.2rem solid var(--main-color);

border-radius: 50%;

box-shadow: 0.2rem 0.5rem var(--shadow-color);

font-size: 2rem;

color: var(--main-color);

margin: 2.5rem 1.5rem 3rem ;

transition: 0.5s ease;

}

.home-content .social-media a:hover {

background: var(--main-color);

color: var(--white-color);

}

/* تنظیمات بخش حرفه‌های چرخان */

.home .profession-container {

position: absolute;

top: 50%;

right: ;

transform: translateY(-50%);

width: 100vw;

height: 100vh;

overflow: hidden;

pointer-events: none;

}

.home .profession-container .profession-box {

position: absolute;

top: ;

right: ;

width: 768px;

height: 100vh;

display: flex;

justify-content: center;

align-items: center;

animation: professionRotate 20s ease-out infinite;

}

@keyframes professionRotate {

%, 20% { transform: rotate(0deg); }

25%, 45% { transform: rotate(-90deg); }

50%, 70% { transform: rotate(-180deg); }

75%, 95% { transform: rotate(-270deg); }

100% { transform: rotate(-360deg); }

}

.home .profession-box .profession {

position: absolute;

left: ;

display: flex;

align-items: center;

flex-direction: column;

color: var(--main-color);

transform: rotate(calc(360deg / 4 * var(--i)));

transform-origin: 384px;

background: var(--bg-color);

padding: 13px ;

}

.home .profession-box .profession i {

font-size: 3.8rem;

}

.home .profession h3 {

font-size: 3.2rem;

line-height: 1;

font-weight: 600;

}

/* المان دایره‌ای تزئینی */

.home .profession-box .circle {

width: 560px;

height: 560px;

border: 3px solid var(--main-color);

border-radius: 50%;

z-index: -1;

}

/* استایل تصویر بخش خانه */

.home-img img {

position: absolute;

bottom: ;

right: 40px;

pointer-events: none;

max-width: 480px;

max-height: 100vh;

}

نکات مهم:

چیدمان حرفه‌ها:
از انیمیشن CSS (keyframes) برای ایجاد چرخش پیوسته استفاده شده است.
سازگاری رنگ:
برای بهینه شدن طرح، از متغیرهای CSS مثل --main-color، --bg-color و --shadow-color بهره برده‌ایم.

۳. کد JS (در صورت نیاز به انیمیشن یا تعامل)

در این بخش، کد JS اصلی مربوط به بخش خانه از طریق کتابخانه ScrollReveal تنظیم شده است تا افکت‌های ورودی زیبایی به المان‌ها بدهد. اگر این بخش نیاز به تنظیم ویژه‌ای داشته باشد، می‌توانید آن را به صورت زیر اضافه کنید:

// استفاده از ScrollReveal برای ایجاد افکت ورودی برای بخش خانه
ScrollReveal().reveal(".home-content", { origin: "top", distance: "80px", duration: 2000, delay: 200 });
ScrollReveal().reveal(".home-img img", { origin: "bottom", distance: "80px", duration: 2000, delay: 200 });

// استفاده از ScrollReveal برای ایجاد افکت ورودی برای بخش خانه

ScrollReveal().reveal(".home-content", { origin: "top", distance: "80px", duration: 2000, delay: 200 });

ScrollReveal().reveal(".home-img img", { origin: "bottom", distance: "80px", duration: 2000, delay: 200 });

نکته:
کد JS اصلی پروژه شامل سایر قسمت‌ها (مانند منوی ناوبری و حالت تاریک) نیز می‌باشد. این بخش به صورت اختصاصی افکت ورود برای المان‌های بخش خانه را تعریف می‌کند.

جمع‌بندی بخش خانه

در این مرحله:

HTML: ساختار اصلی بخش خانه شامل محتوای متنی، شبکه‌های اجتماعی، بخش حرفه‌ها و تصویر دکوری تنظیم شده است.
CSS: با استفاده از Flexbox، انیمیشن‌های CSS و متغیرهای رنگی، ظاهر بهینه و هماهنگی ایجاد شده است.
JS: با ScrollReveal افکت‌های جذاب ورودی به بخش اضافه شده‌اند.

این بخش به عنوان اولین تماس کاربر با سایت، تجربه بصری جذابی ایجاد می‌کند.
برای مشاهده آموزش ویدیویی این بخش، به کانال یوتیوب پاسخ وردپرس مراجعه کنید.

مرحله بعدی: ساخت بخش “درباره من” (About)

در این بخش، ما به سراغ ساخت بخش معرفی یا “درباره من” می‌رویم. این قسمت به کاربران کمک می‌کند تا با شما به عنوان توسعه‌دهنده وب آشنا شوند و اطلاعاتی در مورد تجربه و دیدگاه شما در زمینه فناوری کسب کنند. در ادامه به صورت مرحله به مرحله کد HTML و CSS این بخش را بررسی می‌کنیم.

۱. کد HTML بخش “درباره من”

در این مرحله، ساختار HTML شامل دو بخش اصلی است:

بخش تصویر: که تصویری از شما یا المان گرافیکی مربوط به معرفی در آن قرار می‌گیرد.
بخش محتوای متنی: شامل عنوان، توضیحات و دکمه‌ای برای اطلاعات بیشتر.

<section class="about" id="about">
  <div class="about-img">
    <img src="images/about.png" alt="تصویر درباره من" />
  </div>

  <div class="about-content">
    <h2 class="heading">درباره <span>من</span></h2>
    <h3>
      سلام، به وب‌سایت من خوش آمدید! من Cristian هستم، یک توسعه‌دهنده وب
      پرشور که از یادگیری تکنولوژی‌های جدید و حل مسائل با کد لذت می‌برم!
    </h3>
    <p>
      این وب‌سایت وبلاگ شخصی من است که در آن درباره موضوعات توسعه وب که
      برایم جالب و الهام‌بخش است می‌نویسم.
    </p>
    <p>
      از اینکه به وب‌سایت من سر زدید و با من آشنا شدید سپاسگزارم. امیدوارم
      از خواندن پست‌های وبلاگ من لذت برده باشید و آن‌ها را مفید و آموزنده
      یافته باشید. اگر می‌خواهید پست‌های بیشتری بخوانید، در خبرنامه من
      اشتراک کنید تا به‌روزرسانی‌های هفتگی درباره روندها و نکات توسعه وب را
      دریافت کنید.
    </p>
    <a href="#" class="btn">بیشتر بخوانید</a>
  </div>
</section>

</div>

<h2 class="heading">درباره <span>من</span></h2>

<h3>

سلام، به وب‌سایت من خوش آمدید! من Cristian هستم، یک توسعه‌دهنده وب

پرشور که از یادگیری تکنولوژی‌های جدید و حل مسائل با کد لذت می‌برم!

</h3>

<p>

این وب‌سایت وبلاگ شخصی من است که در آن درباره موضوعات توسعه وب که

برایم جالب و الهام‌بخش است می‌نویسم.

</p>

<p>

از اینکه به وب‌سایت من سر زدید و با من آشنا شدید سپاسگزارم. امیدوارم

از خواندن پست‌های وبلاگ من لذت برده باشید و آن‌ها را مفید و آموزنده

یافته باشید. اگر می‌خواهید پست‌های بیشتری بخوانید، در خبرنامه من

اشتراک کنید تا به‌روزرسانی‌های هفتگی درباره روندها و نکات توسعه وب را

دریافت کنید.

</p>

<a href="#" class="btn">بیشتر بخوانید</a>

</div>

</section>

توضیح کد HTML:

تگ <section class="about" id="about">: بخش “درباره من” که با آی‌دی about قابل لینک‌دهی از منوی ناوبری است.
بخش <div class="about-img">: شامل یک تصویر نمایشی (تصویر معرفی شما) که می‌تواند حس بصری جذابی ایجاد کند.
بخش <div class="about-content">: شامل عنوان (با استفاده از تگ‌های <h2> و <h3>) و توضیحات متنی درباره شما. همچنین دکمه‌ای با کلاس btn برای دعوت به اقدام (Call to Action) قرار داده شده است.

۲. کد CSS بخش “درباره من”

در این مرحله، استایل‌های مربوط به چیدمان و ظاهر بخش “درباره من” را اضافه می‌کنیم تا در دسکتاپ و دستگاه‌های موبایل به صورت واکنش‌گرا نمایش داده شوند.

/* استایل‌های اصلی بخش درباره من */
.about {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4rem;
  text-align: right;
  padding: 10rem 7% 2rem;
}

/* تنظیمات تصویر معرفی */
.about-img img {
  width: 40vw;
  border-radius: 20px;
}

/* استایل عنوان بخش */
.heading {
  font-size: 4.5rem;
  text-align: center;
  margin-bottom: 2rem;
}

.about-content h2 {
  text-align: right;
}

.about-content h3 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
}

/* استایل پاراگراف‌های توضیحی */
.about-content p {
  font-size: 1.6rem;
  margin: 2rem 0 3rem;
  line-height: 1.6;
}

/* استایل دکمه "بیشتر بخوانید" */
.about-content .btn {
  display: inline-block;
  padding: 1.2rem 2.8rem;
  background: var(--main-color);
  color: var(--white-color);
  border-radius: 0.6rem;
  font-size: 1.6rem;
  text-decoration: none;
  transition: 0.5s ease;
}

.about-content .btn:hover {
  background: transparent;
  color: var(--main-color);
  border: 0.2rem solid var(--main-color);
}

/* واکنش‌گر برای دستگاه‌های موبایل */
@media (max-width: 768px) {
  .about {
    flex-direction: column;
    text-align: center;
    padding: 5rem 3% 2rem;
  }
  
  .about-img img {
    width: 70vw;
    margin: 0 auto;
  }
  
  .about-content {
    text-align: center;
  }
  
  .about-content h2,
  .about-content h3 {
    text-align: center;
  }
}

/* استایل‌های اصلی بخش درباره من */

.about {

display: flex;

justify-content: center;

align-items: center;

gap: 4rem;

text-align: right;

padding: 10rem 7% 2rem;

}

/* تنظیمات تصویر معرفی */

.about-img img {

width: 40vw;

border-radius: 20px;

}

/* استایل عنوان بخش */

.heading {

font-size: 4.5rem;

text-align: center;

margin-bottom: 2rem;

}

.about-content h2 {

text-align: right;

}

.about-content h3 {

font-size: 2rem;

margin-bottom: 1.5rem;

}

/* استایل پاراگراف‌های توضیحی */

.about-content p {

font-size: 1.6rem;

margin: 2rem 3rem;

line-height: 1.6;

}

/* استایل دکمه "بیشتر بخوانید" */

.about-content .btn {

display: inline-block;

padding: 1.2rem 2.8rem;

background: var(--main-color);

color: var(--white-color);

border-radius: 0.6rem;

font-size: 1.6rem;

text-decoration: none;

transition: 0.5s ease;

}

.about-content .btn:hover {

background: transparent;

color: var(--main-color);

border: 0.2rem solid var(--main-color);

}

/* واکنش‌گر برای دستگاه‌های موبایل */

@media (max-width: 768px) {

.about {

flex-direction: column;

text-align: center;

padding: 5rem 3% 2rem;

}

.about-img img {

width: 70vw;

margin: auto;

}

.about-content {

text-align: center;

}

.about-content h2,

.about-content h3 {

text-align: center;

}

توضیح کد CSS:

چیدمان اصلی:
استفاده از display: flex باعث شده تا بخش تصویر و محتوای متنی کنار هم (در دسکتاپ) قرار گیرند. فاصله بین این دو بخش با gap: 4rem تنظیم شده است.
تنظیم اندازه تصویر:
عرض تصویر با استفاده از واحد vw تنظیم شده تا در صفحه‌های بزرگ به صورت نسبی نمایش داده شود و حاشیه‌های گرد به آن اضافه شده تا ظاهر نرم‌تری ایجاد کند.
تنظیمات متن و دکمه:
اندازه فونت، فاصله‌های متنی و استایل دکمه به گونه‌ای تنظیم شده‌اند که خوانایی بالا و تجربه کاربری خوبی ارائه دهند.
واکنش‌گرایی:
با استفاده از media query، در دستگاه‌های با عرض کمتر از ۷۶۸px، چیدمان به صورت ستونی (column) تغییر کرده و متن و تصویر به صورت مرکزی نمایش داده می‌شوند.

جمع‌بندی بخش “درباره من”

در این مرحله:

HTML: ساختار بخش “درباره من” شامل تصویر و محتوای متنی تنظیم شده است.
CSS: با استفاده از Flexbox و media queryها، این بخش به صورت واکنش‌گرا طراحی شده تا در دسکتاپ و موبایل به خوبی نمایش داده شود.

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

مرحله بعدی: ساخت بخش “خدمات من” (Services)

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

۱. کد HTML بخش خدمات

در این قسمت، ما یک بخش با عنوان “خدمات من” ایجاد می‌کنیم که شامل یک عنوان کلی و سه جعبه خدمات (با آیکون، عنوان، توضیح و دکمه “بیشتر بخوانید”) می‌باشد.

<section class="services" id="services">
  <h2 class="heading">خدمات <span>من</span></h2>

  <div class="services-container">
    <!-- جعبه خدمات اول: توسعه وب -->
    <div class="services-box">
      <i class="bx bx-code-alt"></i>
      <h3>توسعه وب</h3>
      <p>
        لورم ایپسوم یک متن ساختگی است که با هدف ایجاد سادگی در طراحی استفاده می‌شود. 
        استثنائاتی دارد و مشابه است، معمارانه ساخته شده و می‌تواند انتخاب شود.
      </p>
      <a href="#" class="btn">بیشتر بخوانید</a>
    </div>

    <!-- جعبه خدمات دوم: طراحی گرافیک -->
    <div class="services-box">
      <i class="bx bxs-paint"></i>
      <h3>طراحی گرافیک</h3>
      <p>
        لورم ایپسوم یک متن ساختگی است که با هدف ایجاد سادگی در طراحی استفاده می‌شود. 
        استثنائاتی دارد و مشابه است، معمارانه ساخته شده و می‌تواند انتخاب شود.
      </p>
      <a href="#" class="btn">بیشتر بخوانید</a>
    </div>

    <!-- جعبه خدمات سوم: بازاریابی دیجیتال -->
    <div class="services-box">
      <i class="bx bx-bar-chart-alt"></i>
      <h3>بازاریابی دیجیتال</h3>
      <p>
        لورم ایپسوم یک متن ساختگی است که با هدف ایجاد سادگی در طراحی استفاده می‌شود. 
        استثنائاتی دارد و مشابه است، معمارانه ساخته شده و می‌تواند انتخاب شود.
      </p>
      <a href="#" class="btn">بیشتر بخوانید</a>
    </div>
  </div>
</section>

<h2 class="heading">خدمات <span>من</span></h2>

<h3>توسعه وب</h3>

<p>

لورم ایپسوم یک متن ساختگی است که با هدف ایجاد سادگی در طراحی استفاده می‌شود.

استثنائاتی دارد و مشابه است، معمارانه ساخته شده و می‌تواند انتخاب شود.

</p>

<a href="#" class="btn">بیشتر بخوانید</a>

</div>

<h3>طراحی گرافیک</h3>

<p>

لورم ایپسوم یک متن ساختگی است که با هدف ایجاد سادگی در طراحی استفاده می‌شود.

استثنائاتی دارد و مشابه است، معمارانه ساخته شده و می‌تواند انتخاب شود.

</p>

<a href="#" class="btn">بیشتر بخوانید</a>

</div>

<h3>بازاریابی دیجیتال</h3>

<p>

لورم ایپسوم یک متن ساختگی است که با هدف ایجاد سادگی در طراحی استفاده می‌شود.

استثنائاتی دارد و مشابه است، معمارانه ساخته شده و می‌تواند انتخاب شود.

</p>

<a href="#" class="btn">بیشتر بخوانید</a>

</div>

</section>

توضیحات HTML:

تگ <section>: با آی‌دی services تا کاربران بتوانند از طریق منوی ناوبری مستقیماً به این بخش دسترسی پیدا کنند.
عنوان بخش: با تگ <h2> و کلاس heading، عنوان “خدمات من” نمایش داده می‌شود.
جعبه‌های خدمات: هر جعبه شامل یک آیکون (از Boxicons)، یک عنوان (مثلاً “توسعه وب”)، یک توضیح مختصر و یک دکمه “بیشتر بخوانید” است.

۲. کد CSS بخش خدمات

در این قسمت استایل‌های مربوط به بخش خدمات را اضافه می‌کنیم تا جعبه‌های خدمات به صورت واکنش‌گرا و زیبا نمایش داده شوند.

/* -------------------- بخش خدمات -------------------- */
.services {
  min-height: auto;
  padding-bottom: 10rem;
}

.services h2 {
  margin-bottom: 5rem;
  text-align: center;
}

/* تنظیمات کانتینر خدمات */
.services .services-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem;
}

/* استایل هر جعبه خدمات */
.services-container .services-box {
  flex: 1 1 30rem;
  background: var(--bg-color);
  padding: 3rem 2rem 4rem;
  border-radius: 2rem;
  box-shadow: 0 0.1rem 0.5rem var(--shadow-color);
  text-align: center;
  border-top: 0.6rem solid var(--main-color);
  border-bottom: 0.6rem solid var(--main-color);
  transition: 0.5s ease;
}

/* افکت هاور برای هر جعبه خدمات */
.services-container .services-box:hover {
  box-shadow: 0 0.1rem 2rem var(--shadow-color);
  transform: scale(1.02);
}

/* استایل آیکون خدمات */
.services-box i {
  font-size: 7rem;
  color: var(--main-color);
}

/* استایل عنوان خدمات */
.services-box h3 {
  font-size: 2.6rem;
  margin-top: 1rem;
  transition: 0.5s ease;
}

/* تغییر رنگ عنوان هنگام هاور */
.services-box:hover h3 {
  color: var(--main-color);
}

/* استایل پاراگراف توضیحات خدمات */
.services-box p {
  font-size: 1.6rem;
  margin: 1rem 0 3rem;
}

/* -------------------- بخش خدمات -------------------- */

.services {

min-height: auto;

padding-bottom: 10rem;

}

.services h2 {

margin-bottom: 5rem;

text-align: center;

}

/* تنظیمات کانتینر خدمات */

.services .services-container {

display: flex;

justify-content: center;

align-items: center;

flex-wrap: wrap;

gap: 2rem;

}

/* استایل هر جعبه خدمات */

.services-container .services-box {

flex: 1 1 30rem;

background: var(--bg-color);

padding: 3rem 2rem 4rem;

border-radius: 2rem;

box-shadow: 0.1rem 0.5rem var(--shadow-color);

text-align: center;

border-top: 0.6rem solid var(--main-color);

border-bottom: 0.6rem solid var(--main-color);

transition: 0.5s ease;

}

/* افکت هاور برای هر جعبه خدمات */

.services-container .services-box:hover {

box-shadow: 0.1rem 2rem var(--shadow-color);

transform: scale(1.02);

}

/* استایل آیکون خدمات */

.services-box i {

font-size: 7rem;

color: var(--main-color);

}

/* استایل عنوان خدمات */

.services-box h3 {

font-size: 2.6rem;

margin-top: 1rem;

transition: 0.5s ease;

}

/* تغییر رنگ عنوان هنگام هاور */

.services-box:hover h3 {

color: var(--main-color);

}

/* استایل پاراگراف توضیحات خدمات */

.services-box p {

font-size: 1.6rem;

margin: 1rem 3rem;

}

توضیحات CSS:

چیدمان جعبه‌ها:
از Flexbox برای چینش جعبه‌های خدمات به صورت ریسپانسیو استفاده شده است.
استایل هر جعبه:
با استفاده از padding، border و box-shadow ظاهر جذابی ایجاد شده است.
افکت هاور:
با حرکت ماوس روی هر جعبه، افکت‌های هاور (بزرگ‌شدن کمی و تغییر سایه) ایجاد می‌شود تا تعامل کاربر بهبود یابد.
واکنش‌گرایی:
استفاده از flex-wrap: wrap باعث می‌شود که جعبه‌ها در صفحات کوچکتر به صورت ستونی چیده شوند.

۳. کد JS (اختیاری)

برای بخش خدمات نیازی به کد JS اختصاصی ندارید، اما اگر می‌خواهید افکت‌های ورود (با ScrollReveal) را به این بخش اضافه کنید، می‌توانید از کد زیر استفاده کنید:

// افکت اسکرول برای نمایش المان‌های بخش خدمات
ScrollReveal().reveal(".services-container", { 
  origin: "bottom", 
  distance: "80px", 
  duration: 2000, 
  delay: 200 
});

// افکت اسکرول برای نمایش المان‌های بخش خدمات

ScrollReveal().reveal(".services-container", {

origin: "bottom",

distance: "80px",

duration: 2000,

delay: 200

});

توجه:
این کد به صورت اختیاری است و تنها به ایجاد افکت ورودی برای بخش خدمات کمک می‌کند.

جمع‌بندی بخش خدمات

در این مرحله:

HTML: ساختار بخش خدمات با سه جعبه (توسعه وب، طراحی گرافیک، بازاریابی دیجیتال) تنظیم شد.
CSS: استایل‌دهی حرفه‌ای با استفاده از Flexbox، افکت‌های هاور و استفاده از متغیرهای رنگی برای بهینه‌سازی ظاهر.
JS (اختیاری): اضافه کردن افکت ورود با ScrollReveal (در صورت نیاز).

آموزش ساخت فرم ورود/ثبت نام سه بعدی با HTML و CSS پروژه محور رایگان

یک آموزش جذاب دیگه!

این بخش خدمات به کاربران کمک می‌کند تا با خدمات ارائه شده توسط شما به صورت سریع آشنا شوند و در صورت نیاز، روی دکمه “بیشتر بخوانید” کلیک کنند تا اطلاعات جامع‌تری دریافت نمایند.

برای اطلاعات بیشتر:
می‌توانید به ترفندهای ضروری CSS و تگ‌های HTML مراجعه کنید. همچنین، آموزش ویدیویی این بخش در کانال یوتیوب پاسخ وردپرس ضبط شده است.

مرحله بعدی: ساخت بخش “نمونه کار” (Portfolio)

در این مرحله، به سراغ بخش نمونه کار می‌رویم تا آخرین پروژه‌ها و نمونه‌های کاری خود را به نمایش بگذارید. این بخش به کاربران کمک می‌کند تا با سبک و کیفیت کار شما آشنا شوند. ما از یک طراحی شبکه‌ای (Grid) استفاده می‌کنیم تا نمونه کارها به صورت منظم و واکنش‌گرا نمایش داده شوند.

۱. کد HTML بخش “نمونه کار”

در این قسمت، ساختار HTML بخش نمونه کار شامل یک عنوان و یک کانتینر شبکه‌ای است که هر نمونه کار در یک “باکس” قرار می‌گیرد. هر باکس شامل یک تصویر و یک لایه پوششی (Overlay) با عنوان، توضیح مختصر و یک لینک جهت مشاهده پروژه می‌باشد.

<section class="portfolio" id="portfolio">
  <h2 class="heading">آخرین <span>پروژه</span></h2>

  <div class="portfolio-container">
    <!-- نمونه کار 1 -->
    <div class="portfolio-box">
      <img src="images/portfolio1.jpg" alt="پروژه 1" />
      <div class="portfolio-layer">
        <h4>طراحی وب</h4>
        <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم است.</p>
        <a href="#"><i class="bx bx-link-external"></i></a>
      </div>
    </div>

    <!-- نمونه کار 2 -->
    <div class="portfolio-box">
      <img src="images/portfolio2.jpg" alt="پروژه 2" />
      <div class="portfolio-layer">
        <h4>طراحی وب</h4>
        <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم است.</p>
        <a href="#"><i class="bx bx-link-external"></i></a>
      </div>
    </div>

    <!-- نمونه کار 3 -->
    <div class="portfolio-box">
      <img src="images/portfolio3.jpg" alt="پروژه 3" />
      <div class="portfolio-layer">
        <h4>طراحی وب</h4>
        <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم است.</p>
        <a href="#"><i class="bx bx-link-external"></i></a>
      </div>
    </div>

    <!-- نمونه کار 4 -->
    <div class="portfolio-box">
      <img src="images/portfolio4.jpg" alt="پروژه 4" />
      <div class="portfolio-layer">
        <h4>طراحی وب</h4>
        <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم است.</p>
        <a href="#"><i class="bx bx-link-external"></i></a>
      </div>
    </div>

    <!-- نمونه کار 5 -->
    <div class="portfolio-box">
      <img src="images/portfolio5.jpg" alt="پروژه 5" />
      <div class="portfolio-layer">
        <h4>طراحی وب</h4>
        <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم است.</p>
        <a href="#"><i class="bx bx-link-external"></i></a>
      </div>
    </div>

    <!-- نمونه کار 6 -->
    <div class="portfolio-box">
      <img src="images/portfolio6.jpg" alt="پروژه 6" />
      <div class="portfolio-layer">
        <h4>طراحی وب</h4>
        <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم است.</p>
        <a href="#"><i class="bx bx-link-external"></i></a>
      </div>
    </div>
  </div>
</section>

<h2 class="heading">آخرین <span>پروژه</span></h2>

<h4>طراحی وب</h4>

<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم است.</p>

</div>

<h4>طراحی وب</h4>

<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم است.</p>

</div>

<h4>طراحی وب</h4>

<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم است.</p>

</div>

<h4>طراحی وب</h4>

<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم است.</p>

</div>

<h4>طراحی وب</h4>

<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم است.</p>

</div>

<h4>طراحی وب</h4>

<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم است.</p>

</div>

</section>

توضیحات HTML:

تگ <section>: این بخش با آی‌دی portfolio تعریف شده تا کاربران بتوانند به راحتی از منوی ناوبری به آن دسترسی داشته باشند.
عنوان بخش: با استفاده از تگ <h2> و کلاس heading، عنوان “آخرین پروژه” به همراه تاکید بر کلمه “پروژه” نمایش داده می‌شود.
کانتینر نمونه کار: درون <div class="portfolio-container"> نمونه کارها به صورت گرید نمایش داده می‌شوند.
باکس نمونه کار: هر نمونه کار شامل یک تصویر و یک لایه پوششی (portfolio-layer) است که هنگام هاور روی تصویر ظاهر شده و اطلاعات تکمیلی (عنوان، توضیح و لینک) را نمایش می‌دهد.

۲. کد CSS بخش “نمونه کار”

استایل‌های CSS زیر به شما کمک می‌کند تا نمونه کارها به صورت منظم، زیبا و واکنش‌گرا نمایش داده شوند.

/* -------------------- بخش نمونه کار -------------------- */
.portfolio {
  min-height: auto;
  padding-bottom: 10rem;
}

.portfolio h2 {
  margin-bottom: 4rem;
  text-align: center;
}

/* کانتینر گرید نمونه کار */
.portfolio .portfolio-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  gap: 2.5rem;
}

/* باکس هر نمونه کار */
.portfolio-container .portfolio-box {
  position: relative;
  display: flex;
  border-radius: 2rem;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

/* استایل تصاویر نمونه کار */
.portfolio-box img {
  width: 100%;
  transition: 0.5s ease;
}

/* افکت هاور روی تصاویر */
.portfolio-box:hover img {
  transform: scale(1.1);
}

/* لایه پوششی نمونه کار */
.portfolio-box .portfolio-layer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.1), var(--main-color));
  color: var(--white-color);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  padding: 0 4rem;
  opacity: 0;
  transition: 0.5s ease;
}

.portfolio-box:hover .portfolio-layer {
  opacity: 1;
}

.portfolio-layer h4 {
  font-size: 3rem;
}

.portfolio-layer p {
  font-size: 1.6rem;
  margin: 0.3rem 0 1rem;
}

/* استایل لینک موجود در لایه پوششی */
.portfolio-layer a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 5rem;
  height: 5rem;
  background: var(--white-color);
  border-radius: 50%;
}

.portfolio-layer a i {
  font-size: 2rem;
  color: #333;
}

/* واکنش‌گرایی - تغییر تعداد ستون‌ها در دستگاه‌های کوچکتر */
@media (max-width: 879px) {
  .portfolio .portfolio-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 580px) {
  .portfolio .portfolio-container {
    grid-template-columns: 1fr;
  }
}

/* -------------------- بخش نمونه کار -------------------- */

.portfolio {

min-height: auto;

padding-bottom: 10rem;

}

.portfolio h2 {

margin-bottom: 4rem;

text-align: center;

}

/* کانتینر گرید نمونه کار */

.portfolio .portfolio-container {

display: grid;

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

align-items: center;

gap: 2.5rem;

}

/* باکس هر نمونه کار */

.portfolio-container .portfolio-box {

position: relative;

display: flex;

border-radius: 2rem;

box-shadow: 1rem rgba(, , , 0.1);

overflow: hidden;

}

/* استایل تصاویر نمونه کار */

.portfolio-box img {

width: 100%;

transition: 0.5s ease;

}

/* افکت هاور روی تصاویر */

.portfolio-box:hover img {

transform: scale(1.1);

}

/* لایه پوششی نمونه کار */

.portfolio-box .portfolio-layer {

position: absolute;

bottom: ;

left: ;

width: 100%;

height: 100%;

background: linear-gradient(rgba(, , , 0.1), var(--main-color));

color: var(--white-color);

display: flex;

justify-content: center;

align-items: center;

flex-direction: column;

text-align: center;

padding: 4rem;

opacity: ;

transition: 0.5s ease;

}

.portfolio-box:hover .portfolio-layer {

opacity: 1;

}

.portfolio-layer h4 {

font-size: 3rem;

}

.portfolio-layer p {

font-size: 1.6rem;

margin: 0.3rem 1rem;

}

/* استایل لینک موجود در لایه پوششی */

.portfolio-layer a {

display: inline-flex;

justify-content: center;

align-items: center;

width: 5rem;

height: 5rem;

background: var(--white-color);

border-radius: 50%;

}

.portfolio-layer a i {

font-size: 2rem;

color: #333;

}

/* واکنش‌گرایی - تغییر تعداد ستون‌ها در دستگاه‌های کوچکتر */

@media (max-width: 879px) {

.portfolio .portfolio-container {

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

}

@media (max-width: 580px) {

.portfolio .portfolio-container {

grid-template-columns: 1fr;

}

توضیحات CSS:

چیدمان گرید:
با استفاده از ویژگی‌های grid-template-columns و gap، نمونه کارها در سه ستون منظم نمایش داده می‌شوند. در دستگاه‌های کوچکتر (با استفاده از media query)، تعداد ستون‌ها به دو یا یک کاهش می‌یابد.
افکت هاور:
زمانی که کاربر ماوس خود را بر روی باکس نمونه کار قرار دهد، تصویر کمی بزرگ شده و لایه پوششی با پس‌زمینه گرادیان به آرامی ظاهر می‌شود.
واکنش‌گرایی:
استفاده از media query باعث می‌شود تا در اندازه‌های مختلف صفحه، نمونه کارها به صورت بهینه نمایش داده شوند.

۳. کد JS (اختیاری – افکت ورود با ScrollReveal)

برای افزایش جذابیت بخش نمونه کار، می‌توانید افکت ورودی به وسیله‌ی ScrollReveal اضافه کنید. (این کد اختیاری است و در صورت تمایل می‌توانید آن را اضافه کنید.)

// افکت اسکرول برای نمایش نمونه کارها
ScrollReveal().reveal(".portfolio-box", { 
  origin: "bottom", 
  distance: "80px", 
  duration: 2000, 
  delay: 200 
});

// افکت اسکرول برای نمایش نمونه کارها

ScrollReveal().reveal(".portfolio-box", {

origin: "bottom",

distance: "80px",

duration: 2000,

delay: 200

});

جمع‌بندی بخش “نمونه کار”

در این مرحله:

HTML: ساختار بخش نمونه کار شامل یک عنوان و یک گرید نمونه کارها تنظیم شده است.
CSS: استایل‌دهی با استفاده از Grid Layout، افکت‌های هاور و تنظیمات واکنش‌گرا جهت نمایش مناسب در تمامی دستگاه‌ها انجام شده است.
JS (اختیاری): افکت ورود نمونه کارها با ScrollReveal به جذابیت بصری بخش افزوده شده است.

این بخش به کاربران کمک می‌کند تا نمونه‌های کاری شما را ببینند و در صورت علاقه، به مشاهده جزئیات پروژه‌ها بپردازند.
برای اطلاعات بیشتر در زمینه ترفندهای CSS، به ترفندهای ضروری CSS مراجعه کنید.

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

مرحله بعدی: ساخت بخش “نظرات ارزشمند” (Testimonials)

در این مرحله، قصد داریم بخشی را ایجاد کنیم که نظرات مشتریان یا کاربران راضی از خدمات و پروژه‌های شما را به نمایش بگذارد. این بخش نه تنها به اعتمادسازی کمک می‌کند، بلکه تجربه کاربری را بهبود می‌بخشد. در این آموزش، از ساختار HTML، استایل‌های CSS و کتابخانه Swiper.js برای ایجاد یک اسلایدر نظرات استفاده می‌کنیم.

۱. کد HTML بخش “نظرات ارزشمند”

در این قسمت ساختار HTML بخش نظرات به کمک ساختار اسلایدر Swiper تنظیم می‌شود. هر نظر در قالب یک اسلاید قرار می‌گیرد که شامل تصویر مشتری، نام و متن نظر است.

<div class="testimonial-container">
  <h2 class="heading">نظرات <span>ارزشمند</span></h2>

  <div class="testimonial-wrapper">
    <div class="testimonial-box mySwiper">
      <div class="testimonial-content swiper-wrapper">
        <!-- اسلاید اول -->
        <div class="testimonial-slide swiper-slide">
          <img src="images/testimonial1.jpg" alt="نظر مشتری">
          <h3>جکسون لوی</h3>
          <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم است.</p>
        </div>
        <!-- اسلاید دوم -->
        <div class="testimonial-slide swiper-slide">
          <img src="images/testimonial2.jpg" alt="نظر مشتری">
          <h3>فلورا اوشن</h3>
          <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم است.</p>
        </div>
        <!-- اسلاید سوم -->
        <div class="testimonial-slide swiper-slide">
          <img src="images/testimonial3.jpg" alt="نظر مشتری">
          <h3>جولیان گریسون</h3>
          <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم است.</p>
        </div>
      </div>

      <!-- دکمه‌های ناوبری و Pagination -->
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-pagination"></div>
    </div>
  </div>
</div>

<h2 class="heading">نظرات <span>ارزشمند</span></h2>

<h3>جکسون لوی</h3>

<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم است.</p>

</div>

<h3>فلورا اوشن</h3>

<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم است.</p>

</div>

<h3>جولیان گریسون</h3>

<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم است.</p>

</div>

</div>

توضیحات:

کانتینر اصلی:
<div class="testimonial-container"> شامل عنوان بخش و کل اسلایدر نظرات است.
ساختار Swiper:
- کلاس mySwiper برای راه‌اندازی اسلایدر استفاده می‌شود.
- swiper-wrapper و swiper-slide ساختار مورد نیاز Swiper.js برای ایجاد اسلایدها هستند.
عناصر هر اسلاید:
شامل یک تصویر (برای نمایش تصویر مشتری)، نام (تگ <h3>) و متن نظر (تگ <p>) می‌باشد.

۲. کد CSS بخش “نظرات ارزشمند”

در این بخش استایل‌های مربوط به بخش نظرات تنظیم می‌شود تا اسلایدر به صورت زیبا و واکنش‌گرا نمایش داده شود.

/* -------------------- بخش نظرات -------------------- */
.testimonial-container {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
  padding: 5rem 1rem;
}

.testimonial-container .testimonial-wrapper {
  position: relative;
  max-width: 90rem;
  width: 100%;
  padding: 5rem;
}

.testimonial-wrapper .testimonial-box {
  padding: 1rem;
  border-radius: 2rem;
  overflow: hidden;
}

.testimonial-content .testimonial-slide {
  display: flex;
  align-items: center;
  flex-direction: column;
  background: var(--bg-color);
  border-radius: 2rem;
  box-shadow: 0 0.1rem 0.5rem var(--shadow-color);
  padding: 3rem 5rem;
  border-top: 0.8rem solid var(--main-color);
  border-bottom: 0.8rem solid var(--main-color);
}

.testimonial-slide img {
  width: 14rem;
  height: 14rem;
  object-fit: cover;
  border-radius: 50%;
  border: 0.5rem solid var(--bg-color);
  outline: 0.5rem solid var(--main-color);
}

.testimonial-slide h3 {
  font-size: 2.5rem;
  margin: 2rem 0;
}

.testimonial-slide p {
  font-size: 1.4rem;
  text-align: center;
}

/* استایل دکمه‌های ناوبری و Pagination */
.testimonial-box .swiper-button-next,
.testimonial-box .swiper-button-prev {
  color: var(--main-color);
}

.testimonial-box .swiper-pagination-bullet {
  background: rgba(0, 0, 0, 0.8);
}

.testimonial-box .swiper-pagination-bullet-active {
  background: var(--main-color);
}

/* -------------------- بخش نظرات -------------------- */

.testimonial-container {

display: flex;

align-items: center;

flex-direction: column;

width: 100%;

padding: 5rem 1rem;

}

.testimonial-container .testimonial-wrapper {

position: relative;

max-width: 90rem;

width: 100%;

padding: 5rem;

}

.testimonial-wrapper .testimonial-box {

padding: 1rem;

border-radius: 2rem;

overflow: hidden;

}

.testimonial-content .testimonial-slide {

display: flex;

align-items: center;

flex-direction: column;

background: var(--bg-color);

border-radius: 2rem;

box-shadow: 0.1rem 0.5rem var(--shadow-color);

padding: 3rem 5rem;

border-top: 0.8rem solid var(--main-color);

border-bottom: 0.8rem solid var(--main-color);

}

.testimonial-slide img {

width: 14rem;

height: 14rem;

object-fit: cover;

border-radius: 50%;

border: 0.5rem solid var(--bg-color);

outline: 0.5rem solid var(--main-color);

}

.testimonial-slide h3 {

font-size: 2.5rem;

margin: 2rem ;

}

.testimonial-slide p {

font-size: 1.4rem;

text-align: center;

}

/* استایل دکمه‌های ناوبری و Pagination */

.testimonial-box .swiper-button-next,

.testimonial-box .swiper-button-prev {

color: var(--main-color);

}

.testimonial-box .swiper-pagination-bullet {

background: rgba(, , , 0.8);

}

.testimonial-box .swiper-pagination-bullet-active {

background: var(--main-color);

}

توضیحات:

چیدمان کانتینر:
استفاده از Flexbox باعث شده تا المان‌ها به صورت ستونی و مرکزی نمایش داده شوند.
استایل اسلایدها:
با استفاده از Box Shadow، Padding و Border، هر اسلاید دارای ظاهر تمیز و حرفه‌ای است.
تصاویر:
تصاویر مشتریان به صورت دایره‌ای نمایش داده می‌شوند که حس اعتمادسازی را افزایش می‌دهد.
دکمه‌ها و Pagination:
رنگ‌بندی دکمه‌های ناوبری و نقاط Pagination با استفاده از متغیرهای CSS تنظیم شده تا هماهنگ با رنگ‌بندی اصلی سایت باشند.

۳. کد JS (راه‌اندازی Swiper برای بخش نظرات)

برای فعال‌سازی اسلایدر نظرات، از کتابخانه Swiper.js استفاده می‌کنیم. کد زیر به صورت اختیاری و جهت افزایش جذابیت بصری بخش نظرات است:

/**************************************************
 * Swiper Slider Initialization for Testimonials
 * -----------------------------------------------
 * این بخش مربوط به راه‌اندازی اسلایدر نظرات (Testimonials) با استفاده از Swiper.js است.
 * - slidesPerView: تعداد اسلایدها در هر زمان نمایش داده می‌شوند (اینجا 1).
 * - spaceBetween: فاصله بین اسلایدها (50 پیکسل).
 * - loop: اسلایدر به صورت حلقه‌ای (loop) نمایش داده می‌شود.
 * - grabCursor: امکان گرفتن موس و کشیدن اسلایدها فعال است.
 * - pagination: تنظیم Pagination برای نشان دادن نقاط کنترلی.
 * - navigation: تنظیم دکمه‌های ناوبری (Next/Prev) برای تغییر اسلاید.
 **************************************************/
var swiper = new Swiper(".mySwiper", {
  slidesPerView: 1,
  spaceBetween: 50,
  loop: true,
  grabCursor: true,
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
});

/**************************************************

* Swiper Slider Initialization for Testimonials

* -----------------------------------------------

* این بخش مربوط به راه‌اندازی اسلایدر نظرات (Testimonials) با استفاده از Swiper.js است.

* - slidesPerView: تعداد اسلایدها در هر زمان نمایش داده می‌شوند (اینجا 1).

* - spaceBetween: فاصله بین اسلایدها (50 پیکسل).

* - loop: اسلایدر به صورت حلقه‌ای (loop) نمایش داده می‌شود.

* - grabCursor: امکان گرفتن موس و کشیدن اسلایدها فعال است.

* - pagination: تنظیم Pagination برای نشان دادن نقاط کنترلی.

* - navigation: تنظیم دکمه‌های ناوبری (Next/Prev) برای تغییر اسلاید.

**************************************************/

var swiper = new Swiper(".mySwiper", {

slidesPerView: 1,

spaceBetween: 50,

loop: true,

grabCursor: true,

pagination: {

el: ".swiper-pagination",

clickable: true,

navigation: {

nextEl: ".swiper-button-next",

prevEl: ".swiper-button-prev",

});

توضیحات:

راه‌اندازی اسلایدر:
کد بالا باعث می‌شود که اسلایدهای بخش نظرات به صورت پویا و تعاملی نمایش داده شوند.
تنظیمات مختلف:
تنظیمات مانند تعداد اسلایدها در هر زمان، فاصله بین آن‌ها، حالت حلقه‌ای و امکانات ناوبری، تجربه کاربری را بهبود می‌بخشد.

جمع‌بندی بخش “نظرات ارزشمند”

در این مرحله:

HTML: ساختار بخش نظرات شامل یک عنوان و اسلایدر نظرات با استفاده از Swiper.js تنظیم شده است.
CSS: استایل‌دهی حرفه‌ای برای نمایش نظرات به صورت واکنش‌گرا با افکت‌های زیبا انجام شده است.
JS: راه‌اندازی اسلایدر با Swiper.js به جذابیت بصری و تعاملی بخش افزوده شده است.

این بخش اعتمادسازی و تعامل کاربران را افزایش می‌دهد و نظرات مثبت مشتریان را به نمایش می‌گذارد.
برای اطلاعات بیشتر درباره ترفندهای CSS و تگ‌های HTML، می‌توانید به ترفندهای ضروری CSS و تگ‌های HTML مراجعه کنید.

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

مرحله بعدی: ساخت بخش “تماس با من” (Contact)

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

۱. کد HTML بخش “تماس با من”

در ادامه ساختار HTML فرم تماس آمده است. این فرم شامل دو ردیف ورودی (برای نام، ایمیل، شماره موبایل و موضوع) و یک فیلد textarea برای پیام می‌باشد.

<section class="contact" id="contact">
  <h2 class="heading">تماس <span>با من</span></h2>

  <form action="#">
    <div class="input-box">
      <input type="text" placeholder="نام و نام خانوادگی" />
      <input type="email" placeholder="آدرس ایمیل" />
    </div>
    <div class="input-box">
      <input type="number" placeholder="شماره موبایل" />
      <input type="text" placeholder="موضوع ایمیل" />
    </div>
    <textarea cols="30" rows="10" placeholder="پیام شما"></textarea>
    <input type="submit" value="ارسال پیام" class="btn" />
  </form>
</section>

</div>

</div>

</form>

</section>

توضیحات HTML:

تگ <section class="contact" id="contact">: بخش تماس به شما این امکان را می‌دهد تا کاربران با کلیک روی لینک مربوطه از منوی ناوبری مستقیماً به این بخش هدایت شوند.
فرم تماس:
- دو گروه (div با کلاس input-box) برای چیدمان فیلدهای ورودی به صورت دو ستونه طراحی شده است.
- یک فیلد <textarea> جهت وارد کردن پیام کاربر.
- دکمه ارسال فرم با کلاس btn جهت ایجاد یک Call to Action جذاب.

آموزش تگ nav در html

یک آموزش جذاب دیگه!

۲. کد CSS بخش “تماس با من”

استایل‌های زیر ظاهر فرم تماس را زیبا و واکنش‌گرا می‌کنند:

/* -------------------- بخش تماس -------------------- */
.contact {
  min-height: auto;
  padding-bottom: 7rem;
}

.contact h2 {
  margin-bottom: 3rem;
  text-align: center;
}

/* استایل فرم تماس */
.contact form {
  max-width: 70rem;
  margin: 1rem auto;
  text-align: center;
  margin-bottom: 3rem;
  direction: rtl;
}

/* تنظیمات ورودی‌ها در فرم تماس */
.contact form .input-box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

/* استایل ورودی‌ها و textarea */
.contact form .input-box input,
.contact form textarea {
  width: 100%;
  padding: 1.5rem;
  font-size: 1.6rem;
  color: var(--text-color);
  background: var(--bg-color);
  border-radius: 0.8rem;
  margin: 0.7rem 0;
  box-shadow: 0 0.1rem 0.5rem var(--shadow-color);
}

/* تنظیم عرض فیلدهای ورودی در ردیف */
.contact form .input-box input {
  width: 49%;
}

/* جلوگیری از تغییر اندازه textarea توسط کاربر */
.contact form textarea {
  resize: none;
}

/* استایل دکمه ارسال */
.contact form .btn {
  margin-top: 2rem;
  cursor: pointer;
}

/* -------------------- بخش تماس -------------------- */

.contact {

min-height: auto;

padding-bottom: 7rem;

}

.contact h2 {

margin-bottom: 3rem;

text-align: center;

}

/* استایل فرم تماس */

.contact form {

max-width: 70rem;

margin: 1rem auto;

text-align: center;

margin-bottom: 3rem;

direction: rtl;

}

/* تنظیمات ورودی‌ها در فرم تماس */

.contact form .input-box {

display: flex;

justify-content: space-between;

flex-wrap: wrap;

}

/* استایل ورودی‌ها و textarea */

.contact form .input-box input,

.contact form textarea {

width: 100%;

padding: 1.5rem;

font-size: 1.6rem;

color: var(--text-color);

background: var(--bg-color);

border-radius: 0.8rem;

margin: 0.7rem ;

box-shadow: 0.1rem 0.5rem var(--shadow-color);

}

/* تنظیم عرض فیلدهای ورودی در ردیف */

.contact form .input-box input {

width: 49%;

}

/* جلوگیری از تغییر اندازه textarea توسط کاربر */

.contact form textarea {

resize: none;

}

/* استایل دکمه ارسال */

.contact form .btn {

margin-top: 2rem;

cursor: pointer;

}

توضیحات CSS:

چیدمان فرم تماس:
با استفاده از max-width و margin: auto فرم به صورت مرکزی در صفحه قرار می‌گیرد.
ورودی‌ها و Textarea:
با استفاده از padding، box-shadow و border-radius ظاهر مدرن و کاربرپسندی ایجاد شده است.
چیدمان ورودی‌ها:
استفاده از Flexbox در کلاس input-box باعث می‌شود که فیلدها به صورت دو ستونه در دستگاه‌های دسکتاپ نمایش داده شوند و در صورت نیاز به صورت ستونی (در موبایل) از ویژگی flex-wrap استفاده شود.
جهت نوشتار:
با استفاده از direction: rtl کل فرم جهت نوشتار فارسی را تنظیم می‌کند.

جمع‌بندی بخش “تماس با من”

در این مرحله:

HTML: ساختار فرم تماس شامل دو ردیف ورودی، یک فیلد textarea و دکمه ارسال تنظیم شده است.
CSS: استایل‌دهی فرم تماس به گونه‌ای انجام شده که ظاهر آن مدرن، خوانا و واکنش‌گرا باشد.
افزودن ویژگی‌های واکنش‌گرا: با استفاده از Flexbox و تنظیمات width مناسب، فرم در تمامی دستگاه‌ها به خوبی نمایش داده می‌شود.

این بخش به کاربران این امکان را می‌دهد تا به سادگی با شما تماس بگیرند.
برای اطلاعات بیشتر درباره ترفندهای CSS و HTML به ترفندهای ضروری CSS و تگ‌های HTML مراجعه کنید.
همچنین، آموزش ویدیویی این بخش در کانال یوتیوب پاسخ وردپرس ضبط شده است؛ پس اگر دوست دارید، آن را از دست ندهید.

مرحله بعدی: ساخت بخش “فوتر” (Footer)

در این مرحله، به سراغ ایجاد بخش فوتر می‌رویم. فوتر سایت اطلاعات کپی‌رایت و دکمه‌ای جهت بازگشت به بالای صفحه (Back-to-Top) را نمایش می‌دهد. این بخش علاوه بر تکمیل ظاهر سایت، به بهبود تجربه کاربری و سئو کمک می‌کند.

۱. کد HTML بخش “فوتر”

در این قسمت، ساختار HTML فوتر به صورت زیر تنظیم می‌شود:

<footer class="footer">
  <div class="footer-text">
    <p>کپی‌رایت © 2023 | تمامی حقوق محفوظ است.</p>
  </div>
  <div class="footer-iconTop">
    <a href="#home"><i class="bx bx-up-arrow-alt"></i></a>
  </div>
</footer>

</div>

</div>

</footer>

توضیحات:

بخش متنی:
<div class="footer-text"> شامل پیغام کپی‌رایت و اعلام حقوق محفوظ است.
دکمه بازگشت به بالا:
<div class="footer-iconTop"> شامل یک لینک است که با کلیک، کاربر را به بالای صفحه (بخش home) هدایت می‌کند.
استفاده از آیکون از کتابخانه Boxicons، ظاهر مدرن و جذابی به دکمه بازگشت می‌دهد.

۲. کد CSS بخش “فوتر”

استایل‌های زیر ظاهر فوتر را زیبا، هماهنگ با بقیه قالب و واکنش‌گرا می‌کنند:

/* -------------------- فوتر -------------------- */
.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 2rem 7%;
  background: var(--main-color);
  direction: rtl;
}

.footer-text p {
  font-size: 1.6rem;
  color: var(--white-color);
}

.footer-iconTop a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0.8rem;
  background: var(--white-color);
  border-radius: 0.8rem;
  border: 0.2rem solid var(--main-color);
  outline: 0.2rem solid transparent;
  transition: 0.5s ease;
}

.footer-iconTop a:hover {
  outline-color: var(--white-color);
}

.footer-iconTop a i {
  font-size: 2.4rem;
  color: #333;
}

/* -------------------- فوتر -------------------- */

.footer {

display: flex;

justify-content: space-between;

align-items: center;

flex-wrap: wrap;

padding: 2rem 7%;

background: var(--main-color);

direction: rtl;

}

.footer-text p {

font-size: 1.6rem;

color: var(--white-color);

}

.footer-iconTop a {

display: inline-flex;

justify-content: center;

align-items: center;

padding: 0.8rem;

background: var(--white-color);

border-radius: 0.8rem;

border: 0.2rem solid var(--main-color);

outline: 0.2rem solid transparent;

transition: 0.5s ease;

}

.footer-iconTop a:hover {

outline-color: var(--white-color);

}

.footer-iconTop a i {

font-size: 2.4rem;

color: #333;

}

توضیحات:

چیدمان فوتر:
از Flexbox استفاده شده تا محتوا به صورت افقی و در صورت نیاز به صورت ستونی (با ویژگی flex-wrap) نمایش داده شود.
رنگ‌بندی و استایل‌ها:
از متغیرهای CSS مانند --main-color و --white-color استفاده شده تا ظاهر سایت یکپارچه و هماهنگ باشد.
افکت‌های تعاملی:
دکمه بازگشت به بالا دارای افکت hover است که با تغییر outline به کاربر نشان می‌دهد که دکمه قابل کلیک است.

جمع‌بندی بخش “فوتر”

در این مرحله:

HTML: ساختار فوتر شامل بخش متنی و دکمه بازگشت به بالا ایجاد شده است.
CSS: استایل‌دهی فوتر به گونه‌ای انجام شده که هم در دسکتاپ و هم در موبایل به خوبی نمایش داده شود.
تجربه کاربری: فوتر نه تنها اطلاعات کپی‌رایت را نمایش می‌دهد بلکه با دکمه بازگشت به بالا، دسترسی سریع به ابتدای صفحه را برای کاربران فراهم می‌کند.

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

بخش واکنش‌گرا (Responsive Section)

در طراحی وب‌سایت‌های مدرن، استفاده از استایل‌های واکنش‌گرا (Responsive CSS) بسیار مهم است. هدف از این بخش، اطمینان از نمایش بهینه قالب در تمامی اندازه‌های صفحه (دسکتاپ، تبلت و موبایل) می‌باشد. در ادامه به توضیح نحوه پیاده‌سازی استایل‌های واکنش‌گرا به همراه نمونه کد می‌پردازیم.

توضیح عملکرد

تغییر اندازه فونت پایه (html):
با استفاده از media query می‌توان اندازه فونت تگ <html> را کاهش داد تا محاسبات rem آسان‌تر شود و طراحی در صفحه‌های کوچک‌تر منطبق گردد.
تنظیم فاصله‌های داخلی (padding) و خارجی (margin):
در هر بخش (مانند بخش خانه، درباره من، خدمات، نمونه کارها و…) با کاهش padding و margin در اندازه‌های کوچکتر، فضای بهتری برای نمایش محتوا ایجاد می‌شود.
تغییر چیدمان المان‌ها:
از ویژگی‌های Flexbox و Grid استفاده می‌کنیم تا در دسکتاپ المان‌ها به صورت سطری نمایش داده شوند و در موبایل به صورت ستونی (با استفاده از flex-direction: column یا تغییر در grid-template-columns) به نمایش درآیند.
پنهان‌سازی یا تغییر اندازه برخی المان‌ها:
در دستگاه‌های کوچکتر ممکن است برخی المان‌ها مانند تصاویر بزرگ یا عناصر تزئینی پنهان شوند یا اندازه آن‌ها کاهش یابد تا از شلوغی صفحه جلوگیری شود.

نمونه کد CSS واکنش‌گرا

در اینجا یک نمونه کد شامل چند breakpoint مهم آورده شده است:

/* واکنش‌گر برای اندازه‌های صفحه مختلف */

/* --- تا عرض 1200px --- */
@media (max-width: 1200px) {
  html {
    font-size: 55%; /* کاهش اندازه فونت پایه برای صفحات کوچکتر */
  }
  /* تنظیم موقعیت برخی المان‌ها به تناسب */
  .home .profession-container .profession-box {
    right: -10%;
  }
  .home-img img {
    right: 0;
  }
}

/* --- تا عرض 1024px --- */
@media (max-width: 1024px) {
  section {
    padding: 10rem 3% 2rem; /* کاهش padding برای صفحات کوچکتر */
  }
  .home .profession-container .profession-box {
    right: -20%;
  }
  .home-img img {
    max-width: 400px;
  }
}

/* --- تا عرض 991px --- */
@media (max-width: 991px) {
  .home .home-content {
    max-width: 50rem;
  }
  .home .profession-container .profession-box {
    right: -35%;
  }
  .home-img img {
    display: none; /* پنهان‌سازی تصویر در صفحه‌های خیلی کوچک */
  }
}

/* --- تا عرض 768px (موبایل) --- */
@media (max-width: 768px) {
  /* تغییر چیدمان منو به صورت عمودی */
  #menu-icon {
    display: block;
  }
  .navbar {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    padding: 1rem 3%;
    background: var(--bg-color);
    border-top: 0.1rem solid rgba(0, 0, 0, 0.2);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    display: none;
  }
  .navbar.active {
    display: block;
    text-align: center;
  }
  /* تنظیم چیدمان بخش خانه به صورت مرکزی */
  .home {
    padding: 0 3% 23rem;
    justify-content: center;
    text-align: center;
  }
  /* تغییر اندازه و تراز تصویر بخش درباره من */
  .about-img img {
    width: 70vw;
    margin: 0 auto;
  }
  .about-content {
    text-align: center;
  }
}

/* --- تا عرض 580px --- */
@media (max-width: 580px) {
  /* نمونه کارها به صورت تک ستونه نمایش داده می‌شوند */
  .portfolio .portfolio-container {
    grid-template-columns: 1fr;
  }
}

/* --- تا عرض 450px --- */
@media (max-width: 450px) {
  html {
    font-size: 50%; /* کاهش بیشتر اندازه فونت برای دستگاه‌های خیلی کوچک */
  }
}

/* واکنش‌گر برای اندازه‌های صفحه مختلف */

/* --- تا عرض 1200px --- */

@media (max-width: 1200px) {

html {

font-size: 55%; /* کاهش اندازه فونت پایه برای صفحات کوچکتر */

}

/* تنظیم موقعیت برخی المان‌ها به تناسب */

.home .profession-container .profession-box {

right: -10%;

}

.home-img img {

right: ;

}

/* --- تا عرض 1024px --- */

@media (max-width: 1024px) {

section {

padding: 10rem 3% 2rem; /* کاهش padding برای صفحات کوچکتر */

}

.home .profession-container .profession-box {

right: -20%;

}

.home-img img {

max-width: 400px;

}

/* --- تا عرض 991px --- */

@media (max-width: 991px) {

.home .home-content {

max-width: 50rem;

}

.home .profession-container .profession-box {

right: -35%;

}

.home-img img {

display: none; /* پنهان‌سازی تصویر در صفحه‌های خیلی کوچک */

}

/* --- تا عرض 768px (موبایل) --- */

@media (max-width: 768px) {

/* تغییر چیدمان منو به صورت عمودی */

#menu-icon {

display: block;

}

.navbar {

position: absolute;

top: 100%;

left: ;

width: 100%;

padding: 1rem 3%;

background: var(--bg-color);

border-top: 0.1rem solid rgba(, , , 0.2);

box-shadow: 0.5rem 1rem rgba(, , , 0.1);

display: none;

}

.navbar.active {

display: block;

text-align: center;

}

/* تنظیم چیدمان بخش خانه به صورت مرکزی */

.home {

padding: 3% 23rem;

justify-content: center;

text-align: center;

}

/* تغییر اندازه و تراز تصویر بخش درباره من */

.about-img img {

width: 70vw;

margin: auto;

}

.about-content {

text-align: center;

}

/* --- تا عرض 580px --- */

@media (max-width: 580px) {

/* نمونه کارها به صورت تک ستونه نمایش داده می‌شوند */

.portfolio .portfolio-container {

grid-template-columns: 1fr;

}

/* --- تا عرض 450px --- */

@media (max-width: 450px) {

html {

font-size: 50%; /* کاهش بیشتر اندازه فونت برای دستگاه‌های خیلی کوچک */

}

توضیحات:

Breakpointهای مختلف:
با استفاده از @media (max-width: ...)، تنظیمات مختلف برای اندازه‌های صفحه تعیین شده است.
تغییر اندازه فونت:
اندازه فونت در تگ html به ترتیب برای صفحات کوچک‌تر کاهش می‌یابد (از ۶۲.۵% به ۵۵% یا ۵۰%).
تنظیم موقعیت و اندازه المان‌ها:
تنظیم موقعیت المان‌هایی مانند تصاویر یا جعبه‌های حرفه‌ها با مقادیر منفی right و تغییر اندازه با max-width انجام شده است.
چیدمان منوی موبایل:
در صفحه‌های کوچک، منوی ناوبری به صورت یک لیست عمودی نمایش داده می‌شود و آیکون منو فعال می‌شود.
تنظیم Grid در بخش نمونه کار:
تعداد ستون‌ها در بخش نمونه کار با کاهش عرض صفحه به دو یا یک ستون تغییر می‌کند.

جمع‌بندی

استفاده از استایل‌های واکنش‌گرا در پروژه‌های وب بسیار حیاتی است. این کدهای واکنش‌گرا باعث می‌شوند تا قالب شما در تمامی دستگاه‌ها به صورت یکپارچه، خوانا و جذاب نمایش داده شود. برای یادگیری نکات بیشتر در زمینه CSS و ترفندهای پیشرفته، به ترفندهای ضروری CSS و تگ‌های HTML مراجعه کنید.
همچنین، آموزش ویدیویی این پروژه در کانال یوتیوب پاسخ وردپرس ضبط شده است؛ پس اگر علاقه دارید، آن را مشاهده کنید.

این بخش به شما کمک می‌کند تا با استفاده از media queryها، طراحی خود را برای تمامی اندازه‌های صفحه بهینه کنید. اگر سوال یا نکته‌ای دارید، حتماً مطرح کنید!

بخش کد های js قالب

در ادامه کد JS کامل پروژه به همراه توضیحات کاملی که مربوط به هر بخش است ارائه شده است. لطفاً توجه داشته باشید که این کد شامل عملکردهای مربوط به منوی ناوبری، اسکرول صفحه، تغییر حالت تاریک/روشن، راه‌اندازی اسلایدر نظرات با Swiper و انیمیشن‌های ScrollReveal می‌باشد.

/**************************************************
 * Menu Icon & Navbar Toggle
 * -----------------------------------------------
 * - وقتی آیکون منو (#menu-icon) کلیک شود،
 *   کلاس "bx-x" به آن اضافه یا حذف می‌شود تا آیکون تغییر کند.
 * - همچنین کلاس "active" به منوی ناوبری (.navbar) اضافه یا حذف می‌شود تا
 *   منو در حالت موبایل باز یا بسته شود.
 **************************************************/
let menuIcon = document.querySelector("#menu-icon");
let navbar = document.querySelector(".navbar");

menuIcon.onclick = () => {
  menuIcon.classList.toggle("bx-x");
  navbar.classList.toggle("active");
};

/**************************************************
 * Scroll Sections Active Link & Sticky Navbar
 * -----------------------------------------------
 * - با اسکرول صفحه، موقعیت فعلی اسکرول (window.scrollY) محاسبه می‌شود.
 * - هر سکشن موجود در صفحه بررسی می‌شود تا مشخص شود کاربر در کدام بخش قرار دارد.
 * - لینک منو مرتبط با سکشن فعلی فعال (active) می‌شود.
 * - همچنین اگر صفحه بیش از 100 پیکسل اسکرول شده باشد، به هدر کلاس "sticky" اضافه می‌شود.
 * - در نهایت، منوی موبایل (در صورت باز بودن) بسته می‌شود.
 **************************************************/
let sections = document.querySelectorAll("section");
let navLinks = document.querySelectorAll("header nav a");

window.onscroll = () => {
  sections.forEach((sec) => {
    let top = window.scrollY;
    let offset = sec.offsetTop - 150;
    let height = sec.offsetHeight;
    let id = sec.getAttribute("id");

    if (top >= offset && top < offset + height) {
      navLinks.forEach((link) => {
        link.classList.remove("active");
        document
          .querySelector("header nav a[href*=" + id + "]")
          ?.classList.add("active");
      });
    }
  });

  // اضافه کردن کلاس sticky به هدر در صورت اسکرول بیش از 100 پیکسل
  let header = document.querySelector(".header");
  header.classList.toggle("sticky", window.scrollY > 100);

  // بستن منوی موبایل هنگام اسکرول
  menuIcon.classList.remove("bx-x");
  navbar.classList.remove("active");
};

/**************************************************
 * Dark Mode Toggle
 * -----------------------------------------------
 * - وقتی روی آیکون حالت تاریک (#darkMode-icon) کلیک شود،
 *   کلاس "bx-sun" به آن اضافه یا حذف می‌شود.
 * - همچنین کلاس "dark-mode" به بدنه صفحه اضافه یا حذف می‌شود تا تم رنگی تغییر کند.
 **************************************************/
let darkModeIcon = document.querySelector("#darkMode-icon");

darkModeIcon.onclick = () => {
  darkModeIcon.classList.toggle("bx-sun");
  document.body.classList.toggle("dark-mode");
};

/**************************************************
 * Swiper Slider Initialization for Testimonials
 * -----------------------------------------------
 * - راه‌اندازی اسلایدر نظرات (Testimonials) با استفاده از کتابخانه Swiper.js.
 * - slidesPerView: تعداد اسلایدها در هر زمان (اینجا 1)
 * - spaceBetween: فاصله بین اسلایدها (50 پیکسل)
 * - loop: نمایش اسلایدر به صورت حلقه‌ای (loop)
 * - grabCursor: امکان گرفتن موس و کشیدن اسلایدها فعال است.
 * - pagination: تنظیم Pagination (نقاط کنترلی) برای اسلایدر.
 * - navigation: تنظیم دکمه‌های ناوبری (next/prev) برای تغییر اسلاید.
 **************************************************/
var swiper = new Swiper(".mySwiper", {
  slidesPerView: 1,
  spaceBetween: 50,
  loop: true,
  grabCursor: true,
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
});

/**************************************************
 * ScrollReveal Animations
 * -----------------------------------------------
 * - استفاده از کتابخانه ScrollReveal برای ایجاد افکت‌های ورودی جذاب.
 * - تنظیمات کلی: 
 *      distance: "80px" – فاصله طی شده توسط المان قبل از ظاهر شدن.
 *      duration: 2000 میلی‌ثانیه – مدت زمان انیمیشن.
 *      delay: 200 میلی‌ثانیه – تاخیر قبل از شروع انیمیشن.
 * - سپس افکت‌های ورودی برای المان‌های مختلف صفحه تعریف می‌شود:
 *      المان‌هایی مانند ".home-content" و ".heading" از بالا ظاهر می‌شوند.
 *      المان‌هایی مانند ".home-img img", ".services-container", ".portfolio-box",
 *      ".testimonial-wrapper", ".contact form" از پایین ظاهر می‌شوند.
 *      المان‌هایی مانند ".home-content h1" و ".about-img img" از چپ ظاهر می‌شوند.
 *      المان‌هایی مانند ".home-content h3", ".home-content p", ".about-content" از راست ظاهر می‌شوند.
 **************************************************/
ScrollReveal({
  distance: "80px",
  duration: 2000,
  delay: 200,
});

ScrollReveal().reveal(".home-content, .heading", { origin: "top" });
ScrollReveal().reveal(
  ".home-img img, .services-container, .portfolio-box, .testimonial-wrapper, .contact form",
  { origin: "bottom" }
);
ScrollReveal().reveal(".home-content h1, .about-img img", { origin: "left" });
ScrollReveal().reveal(".home-content h3, .home-content p, .about-content", { origin: "right" });

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

/**************************************************

* Menu Icon & Navbar Toggle

* -----------------------------------------------

* - وقتی آیکون منو (#menu-icon) کلیک شود،

* کلاس "bx-x" به آن اضافه یا حذف می‌شود تا آیکون تغییر کند.

* - همچنین کلاس "active" به منوی ناوبری (.navbar) اضافه یا حذف می‌شود تا

* منو در حالت موبایل باز یا بسته شود.

**************************************************/

let menuIcon = document.querySelector("#menu-icon");

let navbar = document.querySelector(".navbar");

menuIcon.onclick = () => {

menuIcon.classList.toggle("bx-x");

navbar.classList.toggle("active");

};

/**************************************************

* Scroll Sections Active Link & Sticky Navbar

* -----------------------------------------------

* - با اسکرول صفحه، موقعیت فعلی اسکرول (window.scrollY) محاسبه می‌شود.

* - هر سکشن موجود در صفحه بررسی می‌شود تا مشخص شود کاربر در کدام بخش قرار دارد.

* - لینک منو مرتبط با سکشن فعلی فعال (active) می‌شود.

* - همچنین اگر صفحه بیش از 100 پیکسل اسکرول شده باشد، به هدر کلاس "sticky" اضافه می‌شود.

* - در نهایت، منوی موبایل (در صورت باز بودن) بسته می‌شود.

**************************************************/

let sections = document.querySelectorAll("section");

let navLinks = document.querySelectorAll("header nav a");

window.onscroll = () => {

sections.forEach((sec) => {

let top = window.scrollY;

let offset = sec.offsetTop - 150;

let height = sec.offsetHeight;

let id = sec.getAttribute("id");

if (top >= offset && top < offset + height) {

navLinks.forEach((link) => {

link.classList.remove("active");

document

.querySelector("header nav a[href*=" + id + "]")

?.classList.add("active");

});

}

});

// اضافه کردن کلاس sticky به هدر در صورت اسکرول بیش از 100 پیکسل

let header = document.querySelector(".header");

header.classList.toggle("sticky", window.scrollY > 100);

// بستن منوی موبایل هنگام اسکرول

menuIcon.classList.remove("bx-x");

navbar.classList.remove("active");

};

/**************************************************

* Dark Mode Toggle

* -----------------------------------------------

* - وقتی روی آیکون حالت تاریک (#darkMode-icon) کلیک شود،

* کلاس "bx-sun" به آن اضافه یا حذف می‌شود.

* - همچنین کلاس "dark-mode" به بدنه صفحه اضافه یا حذف می‌شود تا تم رنگی تغییر کند.

**************************************************/

let darkModeIcon = document.querySelector("#darkMode-icon");

darkModeIcon.onclick = () => {

darkModeIcon.classList.toggle("bx-sun");

document.body.classList.toggle("dark-mode");

};

/**************************************************

* Swiper Slider Initialization for Testimonials

* -----------------------------------------------

* - راه‌اندازی اسلایدر نظرات (Testimonials) با استفاده از کتابخانه Swiper.js.

* - slidesPerView: تعداد اسلایدها در هر زمان (اینجا 1)

* - spaceBetween: فاصله بین اسلایدها (50 پیکسل)

* - loop: نمایش اسلایدر به صورت حلقه‌ای (loop)

* - grabCursor: امکان گرفتن موس و کشیدن اسلایدها فعال است.

* - pagination: تنظیم Pagination (نقاط کنترلی) برای اسلایدر.

* - navigation: تنظیم دکمه‌های ناوبری (next/prev) برای تغییر اسلاید.

**************************************************/

var swiper = new Swiper(".mySwiper", {

slidesPerView: 1,

spaceBetween: 50,

loop: true,

grabCursor: true,

pagination: {

el: ".swiper-pagination",

clickable: true,

navigation: {

nextEl: ".swiper-button-next",

prevEl: ".swiper-button-prev",

});

/**************************************************

* ScrollReveal Animations

* -----------------------------------------------

* - استفاده از کتابخانه ScrollReveal برای ایجاد افکت‌های ورودی جذاب.

* - تنظیمات کلی:

* distance: "80px" – فاصله طی شده توسط المان قبل از ظاهر شدن.

* duration: 2000 میلی‌ثانیه – مدت زمان انیمیشن.

* delay: 200 میلی‌ثانیه – تاخیر قبل از شروع انیمیشن.

* - سپس افکت‌های ورودی برای المان‌های مختلف صفحه تعریف می‌شود:

* المان‌هایی مانند ".home-content" و ".heading" از بالا ظاهر می‌شوند.

* المان‌هایی مانند ".home-img img", ".services-container", ".portfolio-box",

* ".testimonial-wrapper", ".contact form" از پایین ظاهر می‌شوند.

* المان‌هایی مانند ".home-content h1" و ".about-img img" از چپ ظاهر می‌شوند.

* المان‌هایی مانند ".home-content h3", ".home-content p", ".about-content" از راست ظاهر می‌شوند.

**************************************************/

ScrollReveal({

distance: "80px",

duration: 2000,

delay: 200,

});

ScrollReveal().reveal(".home-content, .heading", { origin: "top" });

ScrollReveal().reveal(

".home-img img, .services-container, .portfolio-box, .testimonial-wrapper, .contact form",

{ origin: "bottom" }

);

ScrollReveal().reveal(".home-content h1, .about-img img", { origin: "left" });

ScrollReveal().reveal(".home-content h3, .home-content p, .about-content", { origin: "right" });

جمع‌بندی کد JS

این کد شامل موارد زیر است:

عملکرد منوی ناوبری:
- باز/بسته کردن منوی موبایل با کلیک روی آیکون منو.
- فعال‌سازی لینک‌های منو بر اساس اسکرول صفحه.
- اضافه کردن حالت sticky به هدر.
تغییر حالت تاریک/روشن:
- تغییر آیکون حالت تاریک و افزودن کلاس dark-mode به بدنه صفحه.
راه‌اندازی اسلایدر نظرات با Swiper:
- تنظیمات اسلایدر جهت نمایش نظرات مشتریان به صورت تعاملی.
انیمیشن‌های ScrollReveal:
- افزودن افکت‌های ورودی جذاب به بخش‌های مختلف صفحه.

این پایان پروژه ساخت قالب نمونه کار ماست. امیدواریم این آموزش گام به گام به زبان ساده و روان، به شما در یادگیری HTML، CSS و JavaScript کمک کرده باشد.
برای مشاهده سایر آموزش‌های مفید و نکات برتر طراحی وب، به ReplyWP مراجعه کنید.

میانگین رتبه 5/5 تعداد رای : 1