قالب Stokes - قالب Html چندمنظوره استوکس

ساختار فایل ها

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

مسیر	شرح
├── Documentation	اسنادی که اکنون در حال خواندن آن هستید
├── Template	پوشه اصلی قالب
── css	شامل تمام فایل‌های css که در قالب استفاده می‌شوند
── fonts	themify, Simple-Line-Icons, Pe-icon-7-stroke, feather, fontawesome فونت آِکون های
── Images	تصاویر قالب
── Js	فایل های js
── php	فایل php برای فرم تماس با ما برای ارسال نامه به مدیر
── scss	Scss فایل های
── video	ویدیو های قالب
── gulpfile	فایل پیکربندی برای کتابخانه Gulp داکویمنت Gulp
── package.json	لیست وابستگی ها و اطلاعات npm

قالب خود را راه اندازی کنید

الان خوبه که شروع کنید...!

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

و اگر می خواهید با استفاده از SASS سفارشی سازی کنید یا بسازید، باید Node.js و Gulp.js را در سیستم خود نصب کنید تا از این ابزار توسعه با استفاده از مرحله زیر استفاده کنید.

Gulp

1. نصب Node.js

اگر Node.js را قبلاً در سیستم خود نصب نکرده اید، به سایت Node.js بروید و نصب مناسب را برای سیستم خود نصب کنید.

2. نصب سراسری Gulp.js

این دستور آخرین نسخه Gulp CLI را نصب می کند. اگر قبلا Gulp CLI دارید، می توانید از این مرحله صرف نظر کنید.

npm install gulp-cli -g

3. نصب وابستگی های پروژه

این دستور وابستگی های قالب، فایل package.json را نصب می کند.

npm install

4. اجرای gulp

اکنون این آخرین دستور را برای یک کار پیش فرض از Gulpfile قالب اجرا کنید. شما آماده اید

gulp

ساختار HTMl

مطمئن شوید که صفحات خود را با آخرین استانداردهای طراحی و توسعه تنظیم کرده اید. این به معنای استفاده از یک doctype HTML5 و شامل متا تگ viewport برای رفتار پاسخگوی مناسب است. همه تگ ها را کنار هم قرار دهید و صفحات شما باید به این شکل باشد:

<!DOCTYPE html>
<html lang="en">
<head>
	<!--===== Required meta tags =====-->
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="author" content="Infinitysoftway" />
	<meta name="description" content="statistic charts">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

	<!--===== Title =====-->
	<title>Stokes - The Responsive Multi-purpose HTML5 Template</title>

	<!--===== Favicon =====-->
	<link rel="shortcut icon" href="images/favicon.ico" />

	<!--===== Global styles including: Font Icons, Plugins, etc =====-->

	<!--===== Main theme css =====-->
	<link rel="stylesheet" href="css/style.css">


	<body class="stokes-wrapper">


	<!--==========
	Start of header ==========-->

	<header class="header">

		<!--===== Start of navbar =====-->
		<nav class="navbar navbar-light navbar-expand-lg navbar-default">
			<div class="container-fluid">

				<!-- Start logo menu -->
				<!-- End logo menu -->

			</div>
		</nav>
		<!--===== End of navbar =====-->

		</header>

		<!--==========
		End of header ==========-->


		<!--==========
			Start of banner section ==========-->

		<section class="default-banner overlay-gradient-80 bg-fit" data-jarallax='{"speed": 0.4}' style="background: url(images/background/01.jpg);">

			<!-- Add banner content here -->

		</section>

		<!--==========
			End of banner section ==========-->


		<!--==========
			Start of services section ==========-->


		<section class="slice-pt">

			<!-- Add service content here -->

		</section>

		<!--==========
			End of services section ==========-->

		<!--==========
			Start of about section ==========-->

		<section class="slice-ptb">

			<!-- Add many more content here -->

		</section>

		<!--==========
			End of about section ==========-->


		<!--==========
			Start of footer section ==========-->

		<footer class="footer bg-dark slice-pt">

			<!-- Add Footer content here -->

		</footer>

		<!--==========
			End of footer section ==========-->


		<!--==========
			Start of back to بالا section ==========-->

		<div class="go-top on-dark">
			<p class="go-top-text">Scroll to بالا <i class="fas fa-long-arrow-alt-right ps-2"></i></p>
		</div>

		<!--==========
			End of back to بالا section ==========-->


	<!--==========
		Start of Javascript ==========-->

	<!--===== Global required js =====-->
	<script src="js/jquery-3.6.0.min.js"></script>
	<script src="js/popper.min.js"></script>
	<script src="js/bootstrap/bootstrap.min.js"></script>


	<!--===== Global script: js libraries and plugins =====-->


	<!--===== Main theme script =====-->
  <script src="js/functions.js"></script>

  <!--==========
	End of Javascript ==========-->

</body>
</html>

تنظیمات لوگو

بخش لوگو را می توان در کانتینر هدر پیدا کرد. برای استفاده از لوگوی خود، لوگوی خود را در پوشه images قرار دهید و آن را به عنوان logo.png ذخیره کنید

<!--===== Start of logo =====-->
<a class="navbar-brand" href="index.html"> <img src="images/logo.png" alt=""> </a>
<!--===== End of logo =====-->

فاوآیکون

برای تنظیم فاوآیکون خود، فایل favicon.ico خود را در پوشه images قرار دهید.

<!-- FAVICON -->
<link rel="shortcut icon" href="images/favicon.ico" />

تغییر فونت ها

فونت‌های Poppins و Jost Google از کتابخانه فونت Google، در Stokes استفاده می‌شوند. برای استفاده از فونت‌های مختلف Google، می‌توانید پیوند را از کتابخانه فونت Google دریافت کنید و تگ head در HTML را اضافه کنید.

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&family=Jost:wght@300;400;500;600;700;800;900&display=swap">

برای اضافه کردن یک فونت جدید می توانید به سادگی یک خط دیگر مانند این اضافه کنید:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,300i,400,400i,500,500i,700,900">

به سادگی فونت جدید را در فایل style.css و تگ body در بخش font-family جایگزین کنید.

body {
  font-family: "Poppins", sans-serif;
}

تنظیمات هدر

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

1) هدر پیشفرض

هدر پیش‌فرض با پس‌زمینه سفید و متن ناوبری تیره. پیوند هدر پیش‌فرض را در صفحه اصلی دنبال کنید. به کد زیر مراجعه کنید

<!--==========
  Start of Header Section ==========-->

<header class="header">

  <!--===== Start of navbar =====-->
  <nav class="navbar navbar-light navbar-expand-lg navbar-default">
    <div class="container-fluid">

    </div>
  </nav>
   <!--===== End of navbar =====-->

</header>

<!--==========
  End of Header Section ==========-->

2) هدر محو

<!--==========
  Start of Header Section ==========-->

<header class="header">

  <!--===== Start of navbar =====-->
  <nav class="navbar navbar-light navbar-expand-lg navbar-transparent navbar-blur navbar-text-dark">
    <div class="container-fluid">

    </div>
  </nav>
   <!--===== End of navbar =====-->

</header>

<!--==========
  End of Header Section ==========-->

3) هدر تیره

<!--==========
  Start of Header Section ==========-->

<header class="header">

  <!--===== Start of navbar =====-->
  <nav class="navbar navbar-light navbar-expand-lg navbar-default navbar-dark">
    <div class="container-fluid">

    </div>
  </nav>
   <!--===== End of navbar =====-->

</header>

<!--==========
  End of Header Section ==========-->

4) هدر تیره با نوار بالا

<!--==========
  Start of Header Section ==========-->

<header class="header">

  <div class="topbar bg-dark">

  </div>

  <!--===== Start of navbar =====-->
  <nav class="navbar navbar-light navbar-expand-lg navbar-default navbar-transparent">
    <div class="container-fluid">

    </div>
  </nav>
   <!--===== End of navbar =====-->

</header>

<!--==========
  End of Header Section ==========-->

5) هدر روشن

<!--==========
  Start of Header Section ==========-->

<header class="header">

  <!--===== Start of navbar =====-->
  <nav class="navbar navbar-light navbar-expand-lg navbar-default">
    <div class="container-fluid">

    </div>
  </nav>
   <!--===== End of navbar =====-->

</header>

<!--==========
  End of Header Section ==========-->

6) هدر روشن با نوار بالا

<!--==========
  Start of Header Section ==========-->

<header class="header">

  <div class="topbar">

  </div>

  <!--===== Start of navbar =====-->
  <nav class="navbar navbar-light navbar-expand-lg navbar-default">
    <div class="container-fluid">

    </div>
  </nav>
   <!--===== End of navbar =====-->

</header>

<!--==========
  End of Header Section ==========-->

7) هدر شفاف

<!--==========
  Start of Header Section ==========-->

<header class="header">

  <!--===== Start of navbar =====-->
  <nav class="navbar navbar-light navbar-expand-lg navbar-default navbar-transparent">
    <div class="container-fluid">

    </div>
  </nav>
   <!--===== End of navbar =====-->

</header>

<!--==========
  End of Header Section ==========-->

7) هدر تک صفحه ای

<!--==========
  Start of Header Section ==========-->

<header class="header">

  <!--===== Start of navbar =====-->
  <nav class="navbar navbar-light navbar-expand-lg navbar-default navbar-transparent">
    <div class="container-fluid">

    <div class="collapse navbar-collapse one-page-classic" id="navbarCollapse">
    </div>

    </div>
  </nav>
   <!--===== End of navbar =====-->

</header>

<!--==========
  End of Header Section ==========-->

هدر چسبان

برای هدر چسبنده، کلاس .fixed-navbar را در تگ nav اضافه کنید. برای هدر چسبان به قطعه کد زیر مراجعه کنید.

<!--==========
  Start of Header Section ==========-->

<header class="header">

  <!--===== Start of navbar =====-->
  <nav class="navbar navbar-light navbar-expand-lg navbar-default fixed-navbar">
    <div class="container-fluid">

    </div>
  </nav>
   <!--===== End of navbar =====-->

</header>

<!--==========
  End of Header Section ==========-->

لودر قالب

برای فعال کردن لودر قالب باید قطعه کد زیر در زیر تگ body را اضافه کنید. اسکریپت Js و CSS برای این لودر قبلاً ایجاد شده است.

		
<!--==========
	Start of loader ==========-->

<div class="template-loader">
	<img src="images/loader/semicircle.gif" alt="Stokes">
</div>

<!--==========
	End of loader ==========-->

استوکس چهار نوع لودر مختلف را در قالب در اختیار شما قرار می دهد. در زیر لیستی از تصاویر لودر وجود دارد، نام تصویر لودر را در کد HTML لودر بالا برای اعمال آن در قالب تغییر دهید.

>

Loader

تصویر لودر	نام لودر (افزودن در HTML لودر)
	black-hole.gif
	semicircle.gif
	spinner.gif
	spinning-arrow.gif

کلاس های کمکی

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

رنگ متن

نام کلاس	شرح
`.text-primary`	رنگ اصلی
`.text-secondary`	رنگ ثانویه
`.text-success`	رنگ Success
`.text-danger`	رنگ Danger
`.text-warning`	رنگ Warning
`.text-info`	رنگ Info
`.text-dark`	رنگ Dark
`.text-light`	رنگ light
`.text-black`	رنگ مشکی
`.text-green`	رنگ سبز
`.text-red-light`	رنگ قرمز کم رنگ
`.text-cyan`	رنگ فیروزه ای
`.text-blue`	رنگ آبی
`.text-orange`	رنگ نارنجی
`.text-red`	رنگ قرمز
`.text-pink`	رنگ صورتی
`.text-primary-gradient`	رنگ گرادیانت اولیه
`.text-pink-gradient`	رنگ شیب صورتی
`.text-white-soft-01`	رنگ سفید - شفافیت 0.1
`.text-white-soft-02`	رنگ سفید - شفافیت 0.2
`.text-white-soft-03`	رنگ سفید - شفافیت 0.3
`.text-white-soft-04`	رنگ سفید - شفافیت 0.4
`.text-white-soft-05`	رنگ سفید - شفافیت 0.5
`.text-white-soft-06`	رنگ سفید - شفافیت 0.6
`.text-white-soft-07`	رنگ سفید - شفافیت 0.7
`.text-white-soft-08`	رنگ سفید - شفافیت 0.8
`.text-white-soft-09`	رنگ سفید - شفافیت 0.9
`.text-black-soft-01`	رنگ مشکی - شفافیت 0.1
`.text-black-soft-02`	رنگ مشکی - شفافیت 0.2
`.text-black-soft-03`	رنگ مشکی - شفافیت 0.3
`.text-black-soft-04`	رنگ مشکی - شفافیت 0.4
`.text-black-soft-05`	رنگ مشکی - شفافیت 0.5
`.text-black-soft-06`	رنگ مشکی - شفافیت 0.6
`.text-black-soft-07`	رنگ مشکی - شفافیت 0.7
`.text-black-soft-08`	رنگ مشکی - شفافیت 0.8
`.text-black-soft-09`	رنگ مشکی - شفافیت 0.9
`.text-orange-soft-01`	رنگ نارنجی - شفافیت 0.1
`.text-orange-soft-02`	رنگ نارنجی - شفافیت 0.2
`.text-orange-soft-03`	رنگ نارنجی - شفافیت 0.3
`.text-orange-soft-04`	رنگ نارنجی - شفافیت 0.4
`.text-orange-soft-05`	رنگ نارنجی - شفافیت 0.5
`.text-orange-soft-06`	رنگ نارنجی - شفافیت 0.6
`.text-orange-soft-07`	رنگ نارنجی - شفافیت 0.7
`.text-orange-soft-08`	رنگ نارنجی - شفافیت 0.8
`.text-orange-soft-09`	رنگ نارنجی - شفافیت 0.9
`.text-cyan-soft-01`	رنگ فیروزه ای - شفافیت 0.1
`.text-cyan-soft-02`	رنگ فیروزه ای - شفافیت 0.2
`.text-cyan-soft-03`	رنگ فیروزه ای - شفافیت 0.3
`.text-cyan-soft-04`	رنگ فیروزه ای - شفافیت 0.4
`.text-cyan-soft-05`	رنگ فیروزه ای - شفافیت 0.5
`.text-cyan-soft-06`	رنگ فیروزه ای - شفافیت 0.6
`.text-cyan-soft-07`	رنگ فیروزه ای - شفافیت 0.7
`.text-cyan-soft-08`	رنگ فیروزه ای - شفافیت 0.8
`.text-cyan-soft-09`	رنگ فیروزه ای - شفافیت 0.9

رنگ پس زمینه

نام کلاس	شرح
`.bg-primary`	رنگ پس زمینه اصلی
`.bg-secondary`	رنگ پس زمینه ثانویه
`.bg-success`	رنگ پس زمینه Success
`.bg-danger`	رنگ پس زمینه Danger
`.bg-warning`	رنگ پس زمینه Warning
`.bg-info`	رنگ پس زمینه Info
`.bg-light`	رنگ پس زمینه Dark
`.bg-dark`	رنگ پس زمینه light
`.bg-black`	رنگ پس زمینه مشکی
`.bg-green`	رنگ پس زمینه سبز
`.bg-red-light`	رنگ پس زمینه قرمز کم رنگ
`.bg-cyan`	رنگ پس زمینه فیروزه ای
`.bg-blue`	رنگ پس زمینه آبی
`.bg-orange`	رنگ پس زمینه نارنجی
`.bg-red`	رنگ پس زمینه قرمز
`.bg-cyan`	رنگ پس زمینه فیروزه ای
`.bg-primary-gradient`	رنگ پس زمینه گرادیانت اولیه
`.bg-cyan-gradient`	رنگ پس زمینه گرادیانت فیروزه ای
`.bg-pink-gradient`	رنگ پس زمینه شیب صورتی
`.bg-purple-gradient`	رنگ پس زمینه گرادیانت بنفش
`.bg-primary-gradient-top`	رنگ پس زمینه بالای شیب اولیه
`.bg-pink-gradient-top`	رنگ پس زمینه بالای شیب صورتی
`.bg-primary-soft-01`	رنگ پس زمینه اولیه - شفافیت 0.1
`.bg-primary-soft-02`	رنگ پس زمینه اولیه - شفافیت 0.2
`.bg-primary-soft-03`	رنگ پس زمینه اولیه - شفافیت 0.3
`.bg-primary-soft-04`	رنگ پس زمینه اولیه - شفافیت 0.4
`.bg-primary-soft-05`	رنگ پس زمینه اولیه - شفافیت 0.5
`.bg-primary-soft-06`	رنگ پس زمینه اولیه - شفافیت 0.6
`.bg-primary-soft-07`	رنگ پس زمینه اولیه - شفافیت 0.7
`.bg-primary-soft-08`	رنگ پس زمینه اولیه - شفافیت 0.8
`.bg-primary-soft-09`	رنگ پس زمینه اولیه - شفافیت 0.9
`.bg-white-soft-01`	رنگ پس زمینه سفید - شفافیت 0.1
`.bg-white-soft-02`	رنگ پس زمینه سفید - شفافیت 0.2
`.bg-white-soft-03`	رنگ پس زمینه سفید - شفافیت 0.3
`.bg-white-soft-04`	رنگ پس زمینه سفید - شفافیت 0.4
`.bg-white-soft-05`	رنگ پس زمینه سفید - شفافیت 0.5
`.bg-white-soft-06`	رنگ پس زمینه سفید - شفافیت 0.6
`.bg-white-soft-07`	رنگ پس زمینه سفید - شفافیت 0.7
`.bg-white-soft-08`	رنگ پس زمینه سفید - شفافیت 0.8
`.bg-white-soft-09`	رنگ پس زمینه سفید - شفافیت 0.9
`.bg-black-soft-01`	رنگ پس زمینه مشکی - شفافیت 0.1
`.bg-black-soft-02`	رنگ پس زمینه مشکی - شفافیت 0.2
`.bg-black-soft-03`	رنگ پس زمینه مشکی - شفافیت 0.3
`.bg-black-soft-04`	رنگ پس زمینه مشکی - شفافیت 0.4
`.bg-black-soft-05`	رنگ پس زمینه مشکی - شفافیت 0.5
`.bg-black-soft-06`	رنگ پس زمینه مشکی - شفافیت 0.6
`.bg-black-soft-07`	رنگ پس زمینه مشکی - شفافیت 0.7
`.bg-black-soft-08`	رنگ پس زمینه مشکی - شفافیت 0.8
`.bg-black-soft-09`	رنگ پس زمینه مشکی - شفافیت 0.9
`.bg-orange-soft-01`	رنگ پس زمینه نارنجی - شفافیت 0.1
`.bg-orange-soft-02`	رنگ پس زمینه نارنجی - شفافیت 0.2
`.bg-orange-soft-03`	رنگ پس زمینه نارنجی - شفافیت 0.3
`.bg-orange-soft-04`	رنگ پس زمینه نارنجی - شفافیت 0.4
`.bg-orange-soft-05`	رنگ پس زمینه نارنجی - شفافیت 0.5
`.bg-orange-soft-06`	رنگ پس زمینه نارنجی - شفافیت 0.6
`.bg-orange-soft-07`	رنگ پس زمینه نارنجی - شفافیت 0.7
`.bg-orange-soft-08`	رنگ پس زمینه نارنجی - شفافیت 0.8
`.bg-orange-soft-09`	رنگ پس زمینه نارنجی - شفافیت 0.9
`.bg-green-soft-01`	رنگ پس زمینه سبز - شفافیت 0.1
`.bg-green-soft-02`	رنگ پس زمینه سبز - شفافیت 0.2
`.bg-green-soft-03`	رنگ پس زمینه سبز - شفافیت 0.3
`.bg-green-soft-04`	رنگ پس زمینه سبز - شفافیت 0.4
`.bg-green-soft-05`	رنگ پس زمینه سبز - شفافیت 0.5
`.bg-green-soft-06`	رنگ پس زمینه سبز - شفافیت 0.6
`.bg-green-soft-07`	رنگ پس زمینه سبز - شفافیت 0.7
`.bg-green-soft-08`	رنگ پس زمینه سبز - شفافیت 0.8
`.bg-green-soft-09`	رنگ پس زمینه سبز - شفافیت 0.9
`.bg-warning-soft-01`	رنگ پس زمینه Warning - شفافیت 0.1
`.bg-warning-soft-02`	رنگ پس زمینه Warning - شفافیت 0.2
`.bg-warning-soft-03`	رنگ پس زمینه Warning - شفافیت 0.3
`.bg-warning-soft-04`	رنگ پس زمینه Warning - شفافیت 0.4
`.bg-warning-soft-05`	رنگ پس زمینه Warning - شفافیت 0.5
`.bg-warning-soft-06`	رنگ پس زمینه Warning - شفافیت 0.6
`.bg-warning-soft-07`	رنگ پس زمینه Warning - شفافیت 0.7
`.bg-warning-soft-08`	رنگ پس زمینه Warning - شفافیت 0.8
`.bg-warning-soft-09`	رنگ پس زمینه Warning - شفافیت 0.9
`.bg-red-light-soft-01`	رنگ پس زمینه قرمز کم رنگ - شفافیت 0.1
`.bg-red-light-soft-02`	رنگ پس زمینه قرمز کم رنگ - شفافیت 0.2
`.bg-red-light-soft-03`	رنگ پس زمینه قرمز کم رنگ - شفافیت 0.3
`.bg-red-light-soft-04`	رنگ پس زمینه قرمز کم رنگ - شفافیت 0.4
`.bg-red-light-soft-05`	رنگ پس زمینه قرمز کم رنگ - شفافیت 0.5
`.bg-red-light-soft-06`	رنگ پس زمینه قرمز کم رنگ - شفافیت 0.6
`.bg-red-light-soft-07`	رنگ پس زمینه قرمز کم رنگ - شفافیت 0.7
`.bg-red-light-soft-08`	رنگ پس زمینه قرمز کم رنگ - شفافیت 0.8
`.bg-red-light-soft-09`	رنگ پس زمینه قرمز کم رنگ - شفافیت 0.9
`.bg-cyan-soft-01`	رنگپس زمینه فیروزه ای - شفافیت 0.1
`.bg-cyan-soft-02`	رنگپس زمینه فیروزه ای - شفافیت 0.2
`.bg-cyan-soft-03`	رنگپس زمینه فیروزه ای - شفافیت 0.3
`.bg-cyan-soft-04`	رنگپس زمینه فیروزه ای - شفافیت 0.4
`.bg-cyan-soft-05`	رنگپس زمینه فیروزه ای - شفافیت 0.5
`.bg-cyan-soft-06`	رنگپس زمینه فیروزه ای - شفافیت 0.6
`.bg-cyan-soft-07`	رنگپس زمینه فیروزه ای - شفافیت 0.7
`.bg-cyan-soft-08`	رنگپس زمینه فیروزه ای - شفافیت 0.8
`.bg-cyan-soft-09`	رنگپس زمینه فیروزه ای - شفافیت 0.9
`.bg-red-soft-01`	رنگ پس زمینه قرمز - شفافیت 0.9
`.bg-red-soft-02`	رنگ پس زمینه قرمز - شفافیت 0.9
`.bg-red-soft-03`	رنگ پس زمینه قرمز - شفافیت 0.9
`.bg-red-soft-04`	رنگ پس زمینه قرمز - شفافیت 0.9
`.bg-red-soft-05`	رنگ پس زمینه قرمز - شفافیت 0.9
`.bg-red-soft-06`	رنگ پس زمینه قرمز - شفافیت 0.9
`.bg-red-soft-07`	رنگ پس زمینه قرمز - شفافیت 0.9
`.bg-red-soft-08`	رنگ پس زمینه قرمز - شفافیت 0.9
`.bg-red-soft-09`	رنگ پس زمینه قرمز - شفافیت 0.9
`.bg-pink-soft-01`	رنگ پس زمینه صورتی - شفافیت 0.1
`.bg-pink-soft-02`	رنگ پس زمینه صورتی - شفافیت 0.2
`.bg-pink-soft-03`	رنگ پس زمینه صورتی - شفافیت 0.3
`.bg-pink-soft-04`	رنگ پس زمینه صورتی - شفافیت 0.4
`.bg-pink-soft-05`	رنگ پس زمینه صورتی - شفافیت 0.5
`.bg-pink-soft-06`	رنگ پس زمینه صورتی - شفافیت 0.6
`.bg-pink-soft-07`	رنگ پس زمینه صورتی - شفافیت 0.7
`.bg-pink-soft-08`	رنگ پس زمینه صورتی - شفافیت 0.8
`.bg-pink-soft-09`	رنگ پس زمینه صورتی - شفافیت 0.9

کلاس های ارتفاع خط

نام کلاس	شرح
`.l-height-10`	ارتفاع خط 10px
`.l-height-15`	ارتفاع خط 15px
`.l-height-20`	ارتفاع خط 20px
`.l-height-25`	ارتفاع خط 25px
`.l-height-30`	ارتفاع خط 30px
`.l-height-35`	ارتفاع خط 35px
`.l-height-40`	ارتفاع خط 40px

ارتفاع بر حسب vh

نام کلاس	شرح
`.h-100vh`	ارتفاع 100vh
`.h-90vh`	ارتفاع 90vh
`.h-80vh`	ارتفاع 80vh
`.h-70vh`	ارتفاع 70vh
`.h-60vh`	ارتفاع 60vh
`.h-50vh`	ارتفاع 50vh

ارتفاع بر حسب px

نام کلاس	شرح
`.h-500`	ارتفاع 500px
`.h-400`	ارتفاع 400px
`.h-300`	ارتفاع 300px
`.h-200`	ارتفاع 200px
`.h-100`	ارتفاع 100px

عرض بر حسب px

نام کلاس	شرح
`.w-500`	عرض 500px
`.w-400`	عرض 400px
`.w-300`	عرض 300px
`.w-200`	عرض 200px
`.w-100`	عرض 100px
`.w-60`	عرض 60px

کلاس های موقعیت بالا راست پایین چپ

نام کلاس	شرح
`.top-0`	بالا 0
`.top-10`	بالا 10px
`.top-20`	بالا 20px
`.top-30`	بالا 30px
`.right-0`	راست 0
`.right-10`	راست 10px
`.right-20`	راست 20px
`.right-30`	راست 30px
`.bottom-0`	پایین 0
`.bottom-10`	پایین 10px
`.bottom-20`	پایین 20px
`.bottom-30`	پایین 30px
`.left-0`	چپ 0
`.left-10`	چپ 10px
`.left-20`	چپ 20px
`.left-30`	چپ 30px

کلاس های z-index

نام کلاس	شرح
`.z-index-n2`	Z index -2
`.z-index-n1`	Z index -1
`.z-index-0`	Z index 0
`.z-index-1`	Z index 1
`.z-index-2`	Z index 2
`.z-index-5`	Z index 5
`.z-index-9`	Z index 9
`.z-index-99`	Z index 99
`.z-index-999`	Z index 999
`.z-index-9999`	Z index 9999

وزن فونت

نام کلاس	شرح
`.fw-100`	وزن فونت 100
`.fw-200`	وزن فونت 200
`.fw-300`	وزن فونت 300
`.fw-400`	وزن فونت 400
`.fw-500`	وزن فونت 500
`.fw-600`	وزن فونت 600
`.fw-700`	وزن فونت 700
`.fw-800`	وزن فونت 800
`.fw-900`	وزن فونت 900

فاصله بین حروف

نام کلاس	شرح
`.ls-1`	فاصله بین حروف 1px
`.ls-2`	فاصله بین حروف 2px
`.ls-3`	فاصله بین حروف 3px
`.ls-4`	فاصله بین حروف 4px
`.ls-5`	فاصله بین حروف 5px
`.ls-6`	فاصله بین حروف 6px
`.ls-7`	فاصله بین حروف 7px
`.ls-8`	فاصله بین حروف 8px
`.ls-9`	فاصله بین حروف 9px

Overlay کلاس های

نام کلاس	شرح
`.overlay-black-10`	پس زمینه overlay مشکی 0.1
`.overlay-black-20`	پس زمینه overlay مشکی 0.2
`.overlay-black-30`	پس زمینه overlay مشکی 0.3
`.overlay-black-40`	پس زمینه overlay مشکی 0.4
`.overlay-black-50`	پس زمینه overlay مشکی 0.5
`.overlay-black-60`	پس زمینه overlay مشکی 0.6
`.overlay-black-70`	پس زمینه overlay مشکی 0.7
`.overlay-black-80`	پس زمینه overlay مشکی 0.8
`.overlay-black-90`	پس زمینه overlay مشکی 0.9
`.overlay-dark-10`	پس زمینه overlay تیره 0.1
`.overlay-dark-20`	پس زمینه overlay تیره 0.2
`.overlay-dark-30`	پس زمینه overlay تیره 0.3
`.overlay-dark-40`	پس زمینه overlay تیره 0.4
`.overlay-dark-50`	پس زمینه overlay تیره 0.5
`.overlay-dark-60`	پس زمینه overlay تیره 0.6
`.overlay-dark-70`	پس زمینه overlay تیره 0.7
`.overlay-dark-80`	پس زمینه overlay تیره 0.8
`.overlay-dark-90`	پس زمینه overlay تیره 0.9
`.overlay-white-10`	پس زمینه overlay سفید 0.1
`.overlay-white-20`	پس زمینه overlay سفید 0.2
`.overlay-white-30`	پس زمینه overlay سفید 0.3
`.overlay-white-40`	پس زمینه overlay سفید 0.4
`.overlay-white-50`	پس زمینه overlay سفید 0.5
`.overlay-white-60`	پس زمینه overlay سفید 0.6
`.overlay-white-70`	پس زمینه overlay سفید 0.7
`.overlay-white-80`	پس زمینه overlay سفید 0.8
`.overlay-white-90`	پس زمینه overlay سفید 0.9
`.overlay-gradient-10`	پس زمینه overlay گرادیانت 0.1
`.overlay-gradient-20`	پس زمینه overlay گرادیانت 0.2
`.overlay-gradient-30`	پس زمینه overlay گرادیانت 0.3
`.overlay-gradient-40`	پس زمینه overlay گرادیانت 0.4
`.overlay-gradient-50`	پس زمینه overlay گرادیانت 0.5
`.overlay-gradient-60`	پس زمینه overlay گرادیانت 0.6
`.overlay-gradient-70`	پس زمینه overlay گرادیانت 0.7
`.overlay-gradient-80`	پس زمینه overlay گرادیانت 0.8
`.overlay-gradient-90`	پس زمینه overlay گرادیانت 0.9
`.overlay-pink-gradient-10`	پس زمینه overlay گرادیانت صورتی 0.1
`.overlay-pink-gradient-20`	پس زمینه overlay گرادیانت صورتی 0.2
`.overlay-pink-gradient-30`	پس زمینه overlay گرادیانت صورتی 0.3
`.overlay-pink-gradient-40`	پس زمینه overlay گرادیانت صورتی 0.4
`.overlay-pink-gradient-50`	پس زمینه overlay گرادیانت صورتی 0.5
`.overlay-pink-gradient-60`	پس زمینه overlay گرادیانت صورتی 0.6
`.overlay-pink-gradient-70`	پس زمینه overlay گرادیانت صورتی 0.7
`.overlay-pink-gradient-80`	پس زمینه overlay گرادیانت صورتی 0.8
`.overlay-pink-gradient-90`	پس زمینه overlay گرادیانت صورتی 0.9
`.overlay-purple-gradient-10`	پس زمینه overlay گرادیانت بنفش 0.1
`.overlay-purple-gradient-20`	پس زمینه overlay گرادیانت بنفش 0.2
`.overlay-purple-gradient-30`	پس زمینه overlay گرادیانت بنفش 0.3
`.overlay-purple-gradient-40`	پس زمینه overlay گرادیانت بنفش 0.4
`.overlay-purple-gradient-50`	پس زمینه overlay گرادیانت بنفش 0.5
`.overlay-purple-gradient-60`	پس زمینه overlay گرادیانت بنفش 0.6
`.overlay-purple-gradient-70`	پس زمینه overlay گرادیانت بنفش 0.7
`.overlay-purple-gradient-80`	پس زمینه overlay گرادیانت بنفش 0.8
`.overlay-purple-gradient-90`	پس زمینه overlay گرادیانت بنفش 0.9

بخش کلاس های padding و margin

نام کلاس	شرح
`.slice-ptb`	بخش padding بالا و پایین
`.slice-pt`	بخش padding بالا
`.slice-pb`	بخش padding پایین
`.slice-mtb`	بخش margin بالا و پایین
`.slice-mt`	بخش margin بالا
`.slice-mb`	بخش margin پایین

کلاس های آواتار

نام کلاس	شرح
`.avatar-10`	ارتفاع و عرض آواتار 10px
`.avatar-20`	ارتفاع و عرض آواتار 20px
`.avatar-30`	ارتفاع و عرض آواتار 30px
`.avatar-40`	ارتفاع و عرض آواتار 40px
`.avatar-50`	ارتفاع و عرض آواتار 50px
`.avatar-60`	ارتفاع و عرض آواتار 70px
`.avatar-70`	ارتفاع و عرض آواتار 80px
`.avatar-80`	ارتفاع و عرض آواتار 90px
`.avatar-90`	ارتفاع و عرض آواتار 100px

فلکس classes

نام کلاس	شرح
`.flex-10`	فلکس 10px
`.flex-20`	فلکس 20px
`.flex-30`	فلکس 30px
`.flex-40`	فلکس 40px
`.flex-50`	فلکس 50px
`.flex-60`	فلکس 60px
`.flex-70`	فلکس 70px
`.flex-80`	فلکس 80px
`.flex-90`	فلکس 90px

margin بالا

نام کلاس	شرح
`.mt-0`	Margin بالا 0
`.mt-1`	Margin بالا 0.25rem
`.mt-2`	Margin بالا 0.4rem
`.mt-3`	Margin بالا 1rem
`.mt-4`	Margin بالا 1.5rem
`.mt-5`	Margin بالا 3rem
`.mt-6`	Margin بالا 4rem
`.mt-7`	Margin بالا 5.5rem
`.mt-8`	Margin بالا 7rem
`.mt-9`	Margin بالا 8.5rem
`.mt-n1`	Margin بالا منفی 0.25rem
`.mt-n2`	Margin بالا منفی 0.4rem
`.mt-n3`	Margin بالا منفی 1rem
`.mt-n4`	Margin بالا منفی 1.5rem
`.mt-n5`	Margin بالا منفی 3rem
`.mt-n6`	Margin بالا منفی 4rem
`.mt-n7`	Margin بالا منفی 5.5rem
`.mt-n8`	Margin بالا منفی 7rem
`.mt-n9`	Margin بالا منفی 8.5rem

Margin راست

نام کلاس	شرح
`.me-0`	Margin راست 0
`.me-1`	Margin راست 0.25rem
`.me-2`	Margin راست 0.4rem
`.me-3`	Margin راست 1rem
`.me-4`	Margin راست 1.5rem
`.me-5`	Margin راست 3rem
`.me-6`	Margin راست 4rem
`.me-7`	Margin راست 5.5rem
`.me-8`	Margin راست 7rem
`.me-9`	Margin راست 8.5rem
`.me-n1`	Margin راست منفی 0.25rem
`.me-n2`	Margin راست منفی 0.4rem
`.me-n3`	Margin راست منفی 1rem
`.me-n4`	Margin راست منفی 1.5rem
`.me-n5`	Margin راست منفی 3rem
`.me-n6`	Margin راست منفی 4rem
`.me-n7`	Margin راست منفی 5.5rem
`.me-n8`	Margin راست منفی 7rem
`.me-n9`	Margin راست منفی 8.5rem

Margin پایین

نام کلاس	شرح
`.mb-0`	Margin پایین 0
`.mb-1`	Margin پایین 0.25rem
`.mb-2`	Margin پایین 0.4rem
`.mb-3`	Margin پایین 1rem
`.mb-4`	Margin پایین 1.5rem
`.mb-5`	Margin پایین 3rem
`.mb-6`	Margin پایین 4rem
`.mb-7`	Margin پایین 5.5rem
`.mb-8`	Margin پایین 7rem
`.mb-9`	Margin پایین 8.5rem
`.mb-n1`	Margin پایین منفی 0.25rem
`.mb-n2`	Margin پایین منفی 0.4rem
`.mb-n3`	Margin پایین منفی 1rem
`.mb-n4`	Margin پایین منفی 1.5rem
`.mb-n5`	Margin پایین منفی 3rem
`.mb-n6`	Margin پایین منفی 4rem
`.mb-n7`	Margin پایین منفی 5.5rem
`.mb-n8`	Margin پایین منفی 7rem
`.mb-n9`	Margin پایین منفی 8.5rem

Margin چپ

نام کلاس	شرح
`.ms-0`	Margin چپ 0
`.ms-1`	Margin چپ 0.25rem
`.ms-2`	Margin چپ 0.4rem
`.ms-3`	Margin چپ 1rem
`.ms-4`	Margin چپ 1.5rem
`.ms-5`	Margin چپ 3rem
`.ms-6`	Margin چپ 4rem
`.ms-7`	Margin چپ 5.5rem
`.ms-8`	Margin چپ 7rem
`.ms-9`	Margin چپ 8.5rem
`.ms-n1`	Margin چپ منفی 0.25rem
`.ms-n2`	Margin چپ منفی 0.4rem
`.ms-n3`	Margin چپ منفی 1rem
`.ms-n4`	Margin چپ منفی 1.5rem
`.ms-n5`	Margin چپ منفی 3rem
`.ms-n6`	Margin چپ منفی 4rem
`.ms-n7`	Margin چپ منفی 5.5rem
`.ms-n8`	Margin چپ منفی 7rem
`.ms-n9`	Margin چپ منفی 8.5rem

Margin بالا پایین

نام کلاس	شرح
`.my-0`	Margin بالا پایین 0
`.my-1`	Margin بالا پایین 0.25rem
`.my-2`	Margin بالا پایین 0.4rem
`.my-3`	Margin بالا پایین 1rem
`.my-4`	Margin بالا پایین 1.5rem
`.my-5`	Margin بالا پایین 3rem
`.my-6`	Margin بالا پایین 4rem
`.my-7`	Margin بالا پایین 5.5rem
`.my-8`	Margin بالا پایین 7rem
`.my-9`	Margin بالا پایین 8.5rem

Margin چپ راست

نام کلاس	شرح
`.mx-0`	Margin چپ راست 0
`.mx-1`	Margin چپ راست 0.25rem
`.mx-2`	Margin چپ راست 0.4rem
`.mx-3`	Margin چپ راست 1rem
`.mx-4`	Margin چپ راست 1.5rem
`.mx-5`	Margin چپ راست 3rem
`.mx-6`	Margin چپ راست 4rem
`.mx-7`	Margin چپ راست 5.5rem
`.mx-8`	Margin چپ راست 7rem
`.mx-9`	Margin چپ راست 8.5rem

Margin بالا راست پایین چپ

نام کلاس	شرح
`.m-0`	Margin بالا راست پایین چپ 0
`.m-1`	Margin بالا راست پایین چپ 0.25rem
`.m-2`	Margin بالا راست پایین چپ 0.4rem
`.m-3`	Margin بالا راست پایین چپ 1rem
`.m-4`	Margin بالا راست پایین چپ 1.5rem
`.m-5`	Margin بالا راست پایین چپ 3rem
`.m-6`	Margin بالا راست پایین چپ 4rem
`.m-7`	Margin بالا راست پایین چپ 5.5rem
`.m-8`	Margin بالا راست پایین چپ 7rem
`.m-9`	Margin بالا راست پایین چپ 8.5rem

Padding بالا

نام کلاس	شرح
`.pt-0`	Padding بالا 0
`.pt-1`	Padding بالا 0.25rem
`.pt-2`	Padding بالا 0.4rem
`.pt-3`	Padding بالا 1rem
`.pt-4`	Padding بالا 1.5rem
`.pt-5`	Padding بالا 3rem
`.pt-6`	Padding بالا 4rem
`.pt-7`	Padding بالا 5.5rem
`.pt-8`	Padding بالا 7rem
`.pt-9`	Padding بالا 8.5rem

Padding راست

نام کلاس	شرح
`.pe-0`	Padding راست 0
`.pe-1`	Padding راست 0.25rem
`.pe-2`	Padding راست 0.4rem
`.pe-3`	Padding راست 1rem
`.pe-4`	Padding راست 1.5rem
`.pe-5`	Padding راست 3rem
`.pe-6`	Padding راست 4rem
`.pe-7`	Padding راست 5.5rem
`.pe-8`	Padding راست 7rem
`.pe-9`	Padding راست 8.5rem

Padding پایین

نام کلاس	شرح
`.pb-0`	Padding پایین 0
`.pb-1`	Padding پایین 0.25rem
`.pb-2`	Padding پایین 0.4rem
`.pb-3`	Padding پایین 1rem
`.pb-4`	Padding پایین 1.5rem
`.pb-5`	Padding پایین 3rem
`.pb-6`	Padding پایین 4rem
`.pb-7`	Padding پایین 5.5rem
`.pb-8`	Padding پایین 7rem
`.pb-9`	Padding پایین 8.5rem

Padding چپ

نام کلاس	شرح
`.ps-0`	Padding چپ 0
`.ps-1`	Padding چپ 0.25rem
`.ps-2`	Padding چپ 0.4rem
`.ps-3`	Padding چپ 1rem
`.ps-4`	Padding چپ 1.5rem
`.ps-5`	Padding چپ 3rem
`.ps-6`	Padding چپ 4rem
`.ps-7`	Padding چپ 5.5rem
`.ps-8`	Padding چپ 7rem
`.ps-9`	Padding چپ 8.5rem

Padding بالا پایین

نام کلاس	شرح
`.py-0`	Padding بالا پایین 0
`.py-1`	Padding بالا پایین 0.25rem
`.py-2`	Padding بالا پایین 0.4rem
`.py-3`	Padding بالا پایین 1rem
`.py-4`	Padding بالا پایین 1.5rem
`.py-5`	Padding بالا پایین 3rem
`.py-6`	Padding بالا پایین 4rem
`.py-7`	Padding بالا پایین 5.5rem
`.py-8`	Padding بالا پایین 7rem
`.py-9`	Padding بالا پایین 8.5rem

Padding چپ راست

نام کلاس	شرح
`.px-0`	Padding چپ راست 0
`.px-1`	Padding چپ راست 0.25rem
`.px-2`	Padding چپ راست 0.4rem
`.px-3`	Padding چپ راست 1rem
`.px-4`	Padding چپ راست 1.5rem
`.px-5`	Padding چپ راست 3rem
`.px-6`	Padding چپ راست 4rem
`.px-7`	Padding چپ راست 5.5rem
`.px-8`	Padding چپ راست 7rem
`.px-9`	Padding چپ راست 8.5rem

Padding بالا راست پایین چپ

نام کلاس	شرح
`.p-0`	Padding بالا راست پایین چپ 0
`.p-1`	Padding بالا راست پایین چپ 0.25rem
`.p-2`	Padding بالا راست پایین چپ 0.4rem
`.p-3`	Padding بالا راست پایین چپ 1rem
`.p-4`	Padding بالا راست پایین چپ 1.5rem
`.p-5`	Padding بالا راست پایین چپ 3rem
`.p-6`	Padding بالا راست پایین چپ 4rem
`.p-7`	Padding بالا راست پایین چپ 5.5rem
`.p-8`	Padding بالا راست پایین چپ 7rem
`.p-9`	Padding بالا راست پایین چپ 8.5rem

اندازه فونت

نام کلاس	شرح
`.fs-1`	اندازه فونت 2.5rem
`.fs-2`	اندازه فونت 2rem
`.fs-3`	اندازه فونت 1.75rem
`.fs-4`	اندازه فونت 1.5rem
`.fs-5`	اندازه فونت 1.25rem

فونت اندازه بزرگ

نام کلاس	شرح
`.display-1`	اندازه فونت 6.3rem
`.display-2`	اندازه فونت 4.5rem
`.display-3`	اندازه فونت 4rem
`.display-4`	اندازه فونت 3.5rem
`.display-5`	اندازه فونت 3rem
`.display-6`	اندازه فونت 2.5rem

تراز کردن متن

نام کلاس	شرح
`.text-start`	تراز کردن متن چپ
`.text-center`	تراز کردن متن وسط
`.text-end`	تراز کردن متن راست

کامپوننت ها

همراه با تمام مؤلفه‌های Bootstrap 5، استوکس بیش از +50 مؤلفه کاربرپسند را با موضوع ارائه می‌کند، بنابراین با کپی پیست این مؤلفه‌ها می‌توانید در عرض چند دقیقه صفحات جدیدی را توسط خودتان ایجاد کنید.

پیوندهای زیر را برای عناصر طراحی Stokes و Bootstrap Components دنبال کنید.

عناصر طراحی استوکس

Bootstrap 5 مؤلفه ها و مستندات.

اسلایدر Swiper انیمیشنی

استوکس اسلایدر Swiperjs لمسی مدرن را با برخی تغییرات سفارشی در اختیار شما قرار می دهد تا بهترین تجربه و سادگی را به وب سایت شما بیاورد.

این پیوند را برای نسخه های نمایشی مختلف Swiper Slider دنبال کنید. به قطعه کد زیر برای اسلایدر swiper مراجعه کنید.

<div class="swiper-container-animation swiper-button-pink-gradient" data-slidesPerView="1"  data-laptop-slidesPerView="1" data-tablet-slidesPerView="1" data-mobile-slidesPerView="1" data-spaceBetween="20" data-loop="true" data-autoplay="true" data-auto-speed="2000" data-disable-on-touch="true" data-dots="true" data-auto-height="false" data-pagination="true" data-navigation="true">
	<div class="swiper-wrapper">
		<div class="swiper-slide" data-hash="slide1">

			<!--===== Start of row =====-->
			<div class="row">
				<div class="col-lg-8 col-xl-6">
					<span class="lead d-block fw-bold text-pink-gradient" data-swiper-animation="fadeInUp" data-delay="1s" data-duration="1s">Get In the play</span>
					<h1 class="text-white display-2 mt-4" data-swiper-animation="fadeInUp" data-delay="1s" data-duration="1s">Turn ideas into great products.</h1>
					<div class="d-flex flex-wrap align-items-center" data-swiper-animation="fadeInUp" data-delay="1s" data-duration="1s">
						<a class="btn btn-light mt-5 me-4 btn-rounded" href="#!"> Discover more </a>
						<a class="btn btn-play-right-icon text-white mt-5 popup-youtube" href="https://www.youtube.com/embed/G9TdA8d5aaU"> View play video <i class="icon fas fa-play"></i></a>
					</div>
				</div>
			</div>
			<!--===== End of row =====-->

		</div>
		<div class="swiper-slide" data-hash="slide2">

			<!--===== Start of row =====-->
			<div class="row">
				<div class="col-lg-8 col-xl-6">
					<span class="lead d-block fw-bold text-pink-gradient" data-swiper-animation="fadeInUp" data-delay="1s" data-duration="1s">We can develop it.</span>
					<h1 class="text-white display-2 mt-4" data-swiper-animation="fadeInUp" data-delay="1s" data-duration="1s">Creativity from the pen of inspiration.</h1>
					<div class="d-flex flex-wrap align-items-center" data-swiper-animation="fadeInUp" data-delay="1s" data-duration="1s">
						<a class="btn btn-light mt-5 me-4 btn-rounded" href="#!"> Learn more </a>
						<a class="btn btn-play-right-icon text-white mt-5 popup-youtube" href="https://www.youtube.com/embed/G9TdA8d5aaU"> View play video <i class="icon fas fa-play"></i></a>
					</div>
				</div>
			</div>
			<!--===== End of row =====-->

		</div>
	</div>

	<!-- Pagination -->
	<div class="swiper-pagination"></div>

	<!-- Next prev button -->
	<div class="swiper-button-prev"><i class="fas fa-arrow-left icon-btn"></i></div>
	<div class="swiper-button-next"><i class="fas fa-arrow-right icon-btn"></i></div>

</div>

تنظیم اسلایدر

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

ویژگی ها	شرح
`data-slidesPerView="1"`	سلاید در هر نمایش
`data-laptop-slidesPerView="1"`	سلاید در هر نمایش لپ تاپ
`data-tablet-slidesPerView="1"`	سلاید در هر نمایش تبلت
`data-mobile-slidesPerView="1"`	سلاید در هر نمایش موبایل
`data-spaceBetween="20"`	فضای بین اسلاید ها
`data-loop="true"`	حلقه اسلاید
`data-autoplay="true"`	پخش خودکار اسلاید
`data-auto-speed="2000"`	سرعت خودکار اسلاید
`data-disable-on-touch="true"`	غیرفعال کردن اسلاید در لمس
`data-dots="true"`	dots اسلاید
`data-auto-height="false"`	ارتفاع خودکار اسلاید
`data-pagination="true"`	صفحه بندی اسلاید
`data-navigation="true"`	navigation اسلاید

انیمیشن اسلایدر

همچنین می‌توانید از تأخیر، مدت زمان و افست برای انیمیشن‌های خود استفاده کنید: data-swiper-animation="fadeInUp" data-delay="1s" data-duration="1s". پیوند انیمیشن Slider را برای سبک‌های متحرک اسلایدر بیشتر دنبال کنید.

ویژگی ها	شرح
`bounce`	انیمیشن bounce
`flash`	انیمیشن flash
`pulse`	انیمیشن pulse
`rubberBand`	انیمیشن rubberBand
`shakeX`	انیمیشن shakeX
`shakeY`	انیمیشن shakeY
`headShake`	انیمیشن headShake
`swing`	انیمیشن swing
`tada`	انیمیشن tada
`wobble`	انیمیشن wobble
`jello`	انیمیشن jello
`heartBeat`	انیمیشن heartBeat
`backInDown`	انیمیشن backInDown
`backInLeft`	انیمیشن backInLeft
`backInRight`	انیمیشن backInRight
`backInUp`	انیمیشن backInUp
`backOutDown`	انیمیشن backOutDown
`backOutLeft`	انیمیشن backOutLeft
`backOutRight`	انیمیشن backOutRight
`backOutUp`	انیمیشن backOutUp
`bounceIn`	انیمیشن bounceIn
`bounceInDown`	انیمیشن bounceInDown
`bounceInLeft`	انیمیشن bounceInLeft
`bounceInRight`	انیمیشن bounceInRight
`bounceInUp`	انیمیشن bounceInUp
`bounceOut`	انیمیشن bounceOut
`bounceOutDown`	انیمیشن bounceOutDown
`bounceOutLeft`	انیمیشن bounceOutLeft
`bounceOutRight`	انیمیشن bounceOutRight
`bounceOutUp`	انیمیشن bounceOutUp
`fadeIn`	انیمیشن fadeIn
`fadeInDown`	انیمیشن fadeInDown
`fadeInDownBig`	انیمیشن fadeInDownBig
`fadeInLeft`	انیمیشن fadeInLeft
`fadeInLeft`	انیمیشن fadeInLeft
`fadeInLeftBig`	انیمیشن fadeInLeftBig
`fadeInRight`	انیمیشن fadeInRight
`fadeInRightBig`	انیمیشن fadeInRightBig
`fadeInUp`	انیمیشن fadeInUp
`fadeInUpBig`	انیمیشن fadeInUpBig
`fadeInTopLeft`	انیمیشن fadeInTopLeft
`fadeInTopRight`	انیمیشن fadeInTopRight
`fadeInBottomLeft`	انیمیشن fadeInBottomLeft
`fadeInBottomRight`	انیمیشن fadeInBottomRight
`fadeOut`	انیمیشن fadeOut
`fadeOutDown`	انیمیشن fadeOutDown
`fadeOutDownBig`	انیمیشن fadeOutDownBig
`fadeOutLeft`	انیمیشن fadeOutLeft
`fadeOutLeftBig`	انیمیشن fadeOutLeftBig
`fadeOutRight`	انیمیشن fadeOutRight
`fadeOutRightBig`	انیمیشن fadeOutRightBig
`fadeOutUp`	انیمیشن fadeOutUp
`fadeOutUpBig`	انیمیشن fadeOutUpBig
`fadeOutTopLeft`	انیمیشن fadeOutTopLeft
`fadeOutTopRight`	انیمیشن fadeOutTopRight
`fadeOutBottomRight`	انیمیشن fadeOutBottomRight
`fadeOutBottomLeft`	انیمیشن fadeOutBottomLeft
`flip`	انیمیشن flip
`flipInX`	انیمیشن flipInX
`flipInY`	انیمیشن flipInY
`flipOutX`	انیمیشن flipOutX
`flipOutY`	انیمیشن flipOutY
`lightSpeedInRight`	انیمیشن lightSpeedInRight
`lightSpeedInLeft`	انیمیشن lightSpeedInLeft
`lightSpeedOutRight`	انیمیشن lightSpeedOutRight
`lightSpeedOutLeft`	انیمیشن lightSpeedOutLeft
`rotateIn`	انیمیشن rotateIn
`rotateInDownLeft`	انیمیشن rotateInDownLeft
`rotateInDownRight`	انیمیشن rotateInDownRight
`rotateInUpLeft`	انیمیشن rotateInUpLeft
`rotateInUpLeft`	انیمیشن rotateInUpLeft
`rotateOut`	انیمیشن rotateOut
`rotateOutDownLeft`	انیمیشن rotateOutDownLeft
`rotateOutDownRight`	انیمیشن rotateOutDownRight
`rotateOutUpLeft`	انیمیشن rotateOutUpLeft
`rotateOutUpRight`	انیمیشن rotateOutUpRight
`hinge`	انیمیشن hinge
`jackInTheBox`	انیمیشن jackInTheBox
`rollIn`	انیمیشن rollIn
`rollOut`	انیمیشن rollOut
`zoomIn`	انیمیشن zoomIn
`zoomInDown`	انیمیشن zoomInDown
`zoomInLeft`	انیمیشن zoomInLeft
`zoomInRight`	انیمیشن zoomInRight
`zoomInUp`	انیمیشن zoomInUp
`zoomOut`	انیمیشن zoomOut
`zoomOutDown`	انیمیشن zoomOutDown
`zoomOutLeft`	انیمیشن zoomOutLeft
`zoomOutRight`	انیمیشن zoomOutRight
`zoomOutUp`	انیمیشن zoomOutUp
`slideInDown`	انیمیشن slideInDown
`slideInLeft`	انیمیشن slideInLeft
`slideInRight`	انیمیشن slideInRight
`slideInUp`	انیمیشن slideInUp
`slideOutDown`	انیمیشن slideOutDown
`slideOutLeft`	انیمیشن slideOutLeft
`slideOutRight`	انیمیشن slideOutRight
`slideOutUp`	انیمیشن slideOutUp

فیلتر نمونه کارها

قطعه زیر نمونه ای از فیلتر صفحه نمونه کارها است.

<!--===== Start of filters =====-->
<div class="filters filter-button-group">
  <ul>
    <li class="active" data-filter="*">All</li>
    <li data-filter=".sass">sass</li>
    <li data-filter=".html">html</li>
    <li data-filter=".javascript">javascript</li>
    <li data-filter=".graphic">graphic</li>
  </ul>
</div>
<!--===== End of filters =====-->

ساختار ستون نمونه کارها

قطعه زیر ساختار محتوای صفحه نمونه کارها با تنظیمات متفاوت است.

<div class="grid portfolio-column-1 popup-container grid-spacing-20">

  <!--===== Start of portfolio =====-->
  <div class="grid-item html">
    [ Portfolio content ]
  </div>
  <!--===== End of portfolio =====-->
  <!--===== Start of portfolio =====-->
  <div class="grid-item graphic sass">
    [ Portfolio content ]
  </div>
  <!--===== End of portfolio =====-->
  <!--===== Start of portfolio =====-->
  <div class="grid-item html sass">
    [ Portfolio content ]
  </div>
  <!--===== End of portfolio =====-->
  <!--===== Start of portfolio =====-->
  <div class="grid-item javascript graphic">
    [ Portfolio content ]
  </div>
  <!--===== End of portfolio =====-->

</div>

ستون نمونه کارها

برای تغییر طرح ستون نمونه کارها و فاصله آن از کلاس های زیر در قالب خود استفاده کنید.

نام کلاس	شرح
`.portfolio-column-1`	نمونه کار 1 ستونه
`.portfolio-column-2`	نمونه کار 2 ستونه
`.portfolio-column-3`	نمونه کار 3 ستونه
`.portfolio-column-4`	نمونه کار 4 ستونه
`.portfolio-column-5`	نمونه کار 5 ستونه
`.grid-spacing-0`	نمونه کار شبکه ای با فاصله 0
`.grid-spacing-05`	نمونه کار شبکه ای با فاصله 05
`.grid-spacing-10`	نمونه کار شبکه ای با فاصله 10
`.grid-spacing-15`	نمونه کار شبکه ای با فاصله 15
`.grid-spacing-20`	نمونه کار شبکه ای با فاصله 20
`.grid-spacing-25`	نمونه کار شبکه ای با فاصله 25
`.grid-spacing-30`	نمونه کار شبکه ای با فاصله 30

شمارش معکوس

/* ------------------------------------------------------------------------
 * countdown
 * ------------------------------------------------------------------------ */
var _countdown_item = $('.countdown-item');
if ( _countdown_item.length > 0 ) {
  _countdown_item.countdown({
    date: '12/24/2022 23:59:59'
  });
}

برای تغییر تاریخ در شمارش معکوس، به اسکریپت شمارش معکوس در custom.js بروید و این تاریخ را تغییر دهید date: '12/24/2022 23:59:59 '. قالب تاریخ 'dd/mm/YYYY H:i:s'

اینستاگرام

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

		
<!--========== Start of instafeed section ==========-->
<div class="row justify-content-center">
	<div id="instafeed" class="instafeed-col-6" data-total-post="6">
		<div id="instafeed" data-total-post="6"></div>
	</div>
</div>

/* ------------------------------------------------------------------------
 * instafeed
 * ------------------------------------------------------------------------ */
 var _instafeed = $( '#instafeed' );
    if ( _instafeed.length > 0 ) {
      var _token = 'ADD YOUR TOKEN';
      var _no_of_post = _instafeed.data( 'total-post' );

      var _insta_url = 'https://graph.instagram.com/me/media';
      var _response_fields = '?fields=id,caption,media_type,media_url,permalink,thumbnail_url,timestamp,like_count,comments_count&access_token=';

توکن اینستاگرام

متغیر های js	شرح
`var _token = "ADD YOUR TOKEN";`	توکن دسترسی اینستاگرام خود را در ایجاد توکن دسترسی اینستاگرام js اضافه کنید

شماره پست اینستاگرام

ویژگی های HTML	شرح
`data-total-post="6"`	تعداد کل نمایش پست های اینستاگرام

ستون پست اینستاگرام

نام کلاس	شرح
`.instafeed-col-6`	اینستاگرام 6 پست در هر ردیف
`.instafeed-cos-5`	اینستاگرام 5 پست در هر ردیف
`.instafeed-col-4`	اینستاگرام 4 پست در هر ردیف
`.instafeed-col-3`	اینستاگرام 3 پست در هر ردیف
`.instafeed-col-2`	اینستاگرام 2 پست در هر ردیف
`.instafeed-col-1`	اینستاگرام 1 پست در هر ردیف

Magnific Popup

استوکس Magnific Popup را برای لایت باکس پاسخگو و اسکریپت گفتگو برای گالری شما با تمرکز بر عملکرد و ارائه بهترین تجربه برای کاربران با هر دستگاهی در اختیار شما قرار می دهد. پیوند magnific-popup را برای نمایش و مستندات بیشتر دنبال کنید.

برای استفاده متفاوت از Magnific Popup با تنظیمات به قطعه زیر مراجعه کنید.

<div class="popup-container">

 <!--===== Start of portfolio =====-->

  <div class="grid-item">
		<a class="portfolio-popup" href="images/portfolio/small/01.jpg"><i class="fas fa-plus"></i></a>
	</div>

	<!--===== End of portfolio =====-->

	 <!--===== Start of portfolio =====-->

  <div class="grid-item">
		<a class="portfolio-popup" href="images/portfolio/small/01.jpg"><i class="fas fa-plus"></i></a>
	</div>

	<!--===== End of portfolio =====-->

	 <!--===== Start of portfolio =====-->

  <div class="grid-item">
		<a class="portfolio-popup" href="images/portfolio/small/01.jpg"><i class="fas fa-plus"></i></a>
	</div>

	<!--===== End of portfolio =====-->

</div>

یوتیوب پاپ آپ

<a class="popup-youtube" href="https://www.youtube.com/embed/G9TdA8d5aaU"><i class="feather icon-play-circle fa-5x"></i></a>

پاپ آپ ویمو

<a class="popup-vimeo" href="https://player.vimeo.com/video/517962521"><i class="feather icon-play-circle fa-5x"></i></a>

پاپ آپ نقشه های گوگل

<a class="popup-gmaps" href="https://www.youtube.com/embed/G9TdA8d5aaU"><i class="feather icon-play-circle fa-5x"></i></a>

Jarallax

استوکس Jarallax را برای بهترین تجربه اسکرول پس زمینه برای کاربران با هر دستگاهی در اختیار شما قرار می دهد. برای استفاده از Jarallax scrolling به قطعه زیر مراجعه کنید.

تصویر پس زمینه jarallax

<section class="bg-fit" data-jarallax='{"speed": 0.4}' style="background-image: url(images/background/16.jpg);">

</section>

پس زمینه یوتیوب ویدئو jarallax

<section class="bg-fit" data-jarallax='{"speed": 0.4}' data-jarallax-video="www.youtube.com/watch?v=mcvqOUtcAJg">

</section>

پس زمینه ویمو ویدئو jarallax

<section class="bg-fit" data-jarallax='{"speed": 0.4}' data-jarallax-video="https://player.vimeo.com/video/517962521">

</section>

پس زمینه محلی ویدیو jarallax

<section class="bg-fit" data-jarallax='{"speed": 0.4}' data-jarallax-video="mp4:./video/video.mp4,webm:./video/video.webm,ogv:./video/video.ogv">

</section>

برای جزئیات بیشتر Jarallax پیوند Jarallax مستندات را دنبال کنید

بارگذاری تنبل

بارگذاری تنبل برای محتویات با دکمه بارگذاری بیشتر

		
var _total_page = 3;
addContentButton.on('click', function(e) {
 if ( count === _total_page ) {
  $(this).css( 'display', 'none' );
  $('.infinite-end-btn').css( 'display', 'block' );
  return;
 }
_target.append( content );

در این قطعه total_pages تعداد صفحاتی که می خواهید بارگیری شوند، بر اساس محتوا پویا خواهد بود.

و content محتوایی است که می‌خواهید در صفحه بعد بارگیری کنید و روی «#addContent» روی «افزودن محتوا» کلیک کنید.

فرم تماس

برای دریافت نامه در آدرس ایمیل خود باید آدرس ایمیل خود را تنظیم کنید. برای پیکربندی لطفاً فایل mail-config.php را از پوشه templatephpsendmail.php باز کنید و یک آدرس ایمیل را به آدرس خود تغییر دهید - مانند این.

$to = 'your@email.com';

توجه: پس از ارسال فرم تماس، اگر نتوانستید نامه را در صندوق ورودی پیدا کنید، پوشه هرزنامه را نیز بررسی کنید. گاهی اوقات، ایمیل به پوشه اسپم شما می رود، بنابراین توصیه می کنیم هرزنامه خود را بررسی کنید.

منابع و اعتبارات

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

تصاویر

نام	لینک
Unsplash	https://unsplash.com/
Pixel	https://www.pexels.com/
Freepik	https://www.freepik.com/
Nothingtochance	https://nothingtochance.co/
Pixabay	https://pixabay.com/

فونت آیکون

نام	لینک
Flaticon	https://www.flaticon.com/
Feather	https://feathericons.com/
Font awesome	https://fontawesome.com/
Pe icon stroke	https://themes-pixeden.com/font-demos/7-stroke/
Simple line icons	https://simplelineicons.github.io/
Themify icons	https://themify.me/themify-icons

پلاگین js و css

نام	لینک
Animate	http://daneden.me/animate
Jquery	https://jquery.com/
Bootstrap	https://getbootstrap.com
Aos animaiton	https://michalsnik.github.io/aos/
Popper	https://github.com/popperjs/popper-core
Rangelider	http://ionden.com/a/plugins/ion.rangeSlider/start.html
Rating	http://github.com/antennaio/jquery-bar-rating
Select2	https://select2.github.io
Jquery appear	https://github.com/bas2k/jquery.appear/
Countdown	https://github.com/epiksel/countdown
Timepicker	https://github.com/jdewit/bootstrap-timepicker
Daterangepicker	http://www.daterangepicker.com/
Moment	https://github.com/moment/moment
Fullpage	https://github.com/alvarotrigo/fullPage.js
Greensock	https://greensock.com
Isotope	https://isotope.metafizzy.co
Masonry	https://masonry.desandro.com
jarallax	https://github.com/nk-o/jarallax
Vanilla Lazyload	https://github.com/verlok/vanilla-lazyload
Magnific popup	https://dimsemenov.com/plugins/magnific-popup/
Marquee scroller slider	https://github.com/scottalguire/grouploop
mCustomScrollbar	http://manos.malihu.gr/jquery-custom-content-scroller/
Mediaelementjs	http://www.mediaelementjs.com/
Owl carousel	https://github.com/OwlCarousel2/OwlCarousel2
Particles	github.com/VincentGarreau/particles.js
Ion rangeslider	http://ionden.com/a/plugins/ion.rangeslider/start.html
Rating bar	http://github.com/antennaio/jquery-bar-rating
Select2	https://github.com/select2/select2
Swiperjs	http://swiperjs.com
Typerjs	https://steven.codes/typerjs
Slick slider	https://kenwheeler.github.io/slick/

به روز رسانی به نسخه جدید

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

گزارش تغییرات منتشر می شود و با هر نسخه و لیست فایل های به روز شده به روز می شود.

شروع کنید

کلاس های کمکی

کامپوننت ها

پلاگین ها

منابع و اعتبارات

به روز رسانی ها

تغییرات

به استوکس خوش آمدید. صفحه مستندات!

اطلاعات قالب

ساختار فایل ها

قالب خود را راه اندازی کنید

Gulp

1. نصب Node.js

2. نصب سراسری Gulp.js

3. نصب وابستگی های پروژه

4. اجرای gulp

ساختار HTMl

تنظیمات لوگو

فاوآیکون

تغییر فونت ها

تنظیمات هدر

1) هدر پیشفرض

2) هدر محو

3) هدر تیره

4) هدر تیره با نوار بالا

5) هدر روشن

6) هدر روشن با نوار بالا

7) هدر شفاف

7) هدر تک صفحه ای

هدر چسبان

لودر قالب

Loader

کلاس های کمکی

رنگ متن

رنگ پس زمینه

کلاس های ارتفاع خط

ارتفاع بر حسب vh

ارتفاع بر حسب px

عرض بر حسب px

کلاس های موقعیت بالا راست پایین چپ

کلاس های z-index

وزن فونت

فاصله بین حروف

Overlay کلاس های

بخش کلاس های padding و margin

کلاس های آواتار

فلکس classes

margin بالا

Margin راست

Margin پایین

Margin چپ

Margin بالا پایین

Margin چپ راست

Margin بالا راست پایین چپ

Padding بالا

Padding راست

Padding پایین

Padding چپ

Padding بالا پایین

Padding چپ راست

Padding بالا راست پایین چپ

اندازه فونت

فونت اندازه بزرگ

تراز کردن متن

کامپوننت ها

اسلایدر Swiper انیمیشنی

تنظیم اسلایدر

انیمیشن اسلایدر

فیلتر نمونه کارها

ساختار ستون نمونه کارها

ستون نمونه کارها

شمارش معکوس

اینستاگرام

توکن اینستاگرام

شماره پست اینستاگرام

ستون پست اینستاگرام

Magnific Popup

یوتیوب پاپ آپ

پاپ آپ ویمو

پاپ آپ نقشه های گوگل