HEX
Server: nginx/1.24.0
System: Linux DGT-WORDPRESS-VM-SERVER 6.14.0-1014-azure #14~24.04.1-Ubuntu SMP Fri Oct 3 20:52:11 UTC 2025 x86_64
User: ubuntu (1000)
PHP: 8.4.12
Disabled: NONE
Upload Files
File: /mnt/data/smarthr-co-in/demo/documentation/materialize.html
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="keywords" content="">
	<meta name="description" content="SmartHR - HRMS, Payroll, HR Project Management Admin Dashboard Template.">
	<meta name="author" content="dreamstechnologies">

	<title>Smarthr - Online Documentation.</title>

	<!-- App favicon -->
	<link rel="shortcut icon" href="assets/img/logo/favicon.png">

	<!-- Vendor -->
	<link href="assets/css/bootstrap.min.css" rel="stylesheet">
	<link href="assets/css/prism.css" rel="stylesheet">

	<!-- Fontawesome CSS -->
	<link rel="stylesheet" href="assets/plugins/fontawesome/css/fontawesome.min.css">
	<link rel="stylesheet" href="assets/plugins/fontawesome/css/all.min.css">
	
	<link rel="stylesheet" href="assets/css/magnific-popup.css">

	<!-- Main CSS -->
	<link id="mainCss" href="assets/css/style.css" rel="stylesheet">
</head>

<body>
	<main class="wrapper sb-default">
		<!-- Loader -->
		<div id="loader-wrapper">
			<div class="loader-ellipsis">
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</div>
		</div>

		<!-- Header -->
		<header class="header">
			<div class="container-fluid">
				<div class="header-left">
					<div class="left-header me-2">
						<a href="javascript:void(0)" class="sidebar-toggle">
							<span class="outer-ring">
								<span class="inner-ring"></span>
							</span>
						</a>
					</div>
					<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
						<li><a href="https://themeforest.net/item/smarthr-bootstrap-admin-panel-template/21153150/support" target="_blank" class="nav-link px-2 link-body-emphasis"><i class="fa-solid fa-headset me-2"></i>Support</a></li>
						<li><a href="https://calendly.com/dreamstechnologies" class="nav-link px-2 link-body-emphasis" target="_blank"><i class="fa-brands fa-hire-a-helper me-2"></i>Hire Us</a></li>
						<li><a href="https://themeforest.net/user/dreamstechnologies" target="_blank" class="nav-link px-2 link-body-emphasis"><i class="fa-brands fa-hire-a-helper me-2"></i>Our Envato</a></li>
					</ul> 
					
					<div class="right-header">
						<div class="me-2 header-item theme-light">
							<button type="button" class="btn-topbar tools-item mode" data-bs-theme-tool="light">
								<span class="feather-icon"><i data-feather="moon"></i></span>
							</button>
						</div>
						<div class="me-2 header-item theme-dark">
							<button type="button" class="btn-topbar tools-item mode active" data-bs-theme-tool="dark">
								<span class="feather-icon"><i data-feather="sun"></i></span>
							</button>
						</div>
					</div>
					<div class="text-end">
						<a href="https://smarthr.dreamstechnologies.com/materialize/template/" target="_blank" class="btn btn-white btn-sm me-2"><i class="fa-solid fa-link me-2"></i>Live Demo</a>
						<a href="https://themeforest.net/item/smarthr-bootstrap-admin-panel-template/21153150" class="btn btn-primary btn-sm" target="_blank"><i class="fa-solid fa-cart-plus me-2"></i>Buy Now</a>
					</div>
				</div>
			</div>
		</header>
		

         <div class="doc-progress">
           <div class="doc-progress-inner" id="scrollProgress">

           </div>
         </div>
		 
		<div class="sidebar-overlay"></div>
		<div class="sidebar" data-mode="light">
			<div class="sidebar-logo">
				<a href="index.html" class="sb-full"><img src="assets/img/logo/logo.svg" alt="logo"><span class="badge badge-soft-danger fs-14 ms-1">materialize</span></a>
				<a href="index.html" class="sb-collapse"><img src="assets/img/logo/favicon.png" alt="logo"></a>
			</div>
			 <div class="sidebar-inner">
				 <div class="sidebar-menu">
				   <ul id="menu-main-menu" class="sidebar-nav">
						<li class="menu-item submenu">
							<a href="#instructions" class="active menu-link">
								<span class="feather-icon"><i data-feather="box"></i></span>
								<span class="condense">Getting Started</span>
							</a>
							<ul class="sidebar-dropdown condense active">
								<li>
									<a href="#instructions" class="page-link drop">
										<span class="menu-dash"><span></span></span>Introduction
									</a>
								</li>
								<li><a href="#requirement" class="page-link drop"><span class="menu-dash"><span></span></span>Requirement</a></li>
								<li><a href="#features" class="page-link drop"><span class="menu-dash"><span></span></span>Features</a></li>
								<li><a href="#file_structure" class="page-link drop"><span class="menu-dash"><span></span></span>File Structure</a></li>
								<li><a href="#html_structure" class="page-link drop"><span class="menu-dash"><span></span></span>Html Structure</a></li>
								<li><a href="#script_structure" class="page-link drop"><span class="menu-dash"><span></span></span>Javascript Structure</a></li>
							</ul>
						</li>
						<li class="menu-item-separator"></li>
						<li class="menu-title condense">Configuration</li>
						<li class="menu-item submenu">
							<a href="#php_config" class=" menu-link">
								<span class="feather-icon"><i data-feather="pie-chart"></i></span>
								<span class="condense">Installation</span>
							</a>
							<ul class="sidebar-dropdown condense">
								<li><a href="#php_config" class="page-link drop"><span class="menu-dash"><span></span></span>Installation Guide</a></li>
								<li><a href="#scss_install" class="page-link drop"><span class="menu-dash"><span></span></span>Scss Installation</a></li>
							</ul>
						</li>
						<li class="menu-item-separator"></li>
						<li class="menu-title condense">Info</li>
						<li class="menu-item">
							<a href="#faq" class="page-link">
								<span class="feather-icon"><i data-feather="star"></i></span><span class="condense"><span class="hover-title">FAQs</span> </span>
							</a>
						</li>
						<li class="menu-item">
							<a href="#support" class="page-link">
								<span class="feather-icon"><i data-feather="star"></i></span><span class="condense"><span class="hover-title">Support</span> </span>
							</a>
						</li>
						<li class="menu-item submenu">
							<a href="#license" class="page-link">
								<span class="feather-icon"><i data-feather="settings"></i></span>
								<span class="condense">License & Credits</span>
							</a>
							<ul class="sidebar-dropdown condense">
								<li><a href="#license" class="page-link drop"><span class="menu-dash"><span></span></span>License</a></li>
								<li><a href="#credits" class="page-link drop"><span class="menu-dash"><span></span></span>Credits</a></li>
								
							</ul>
						</li>
						<li class="menu-item">
							<a href="#customwork" class="page-link">
								<span class="feather-icon"><i data-feather="briefcase"></i></span><span class="condense"><span class="hover-title">Custom Work</span> </span>
							</a>
						</li>
						<li class="menu-item">
							<a href="changelog.html" class="page-link">
								<span class="feather-icon"><i data-feather="hexagon"></i></span>
								<span class="condense"><span class="hover-title">Change Log</span> </span>
								<span class="badge badge-changelog badge-soft-danger fw-semibold fs-8 px-2 ms-2 condense">v3.9.9</span>
							</a>
						</li>
						<li class="menu-item">
							<a href="#thanks" class="page-link">
								<span class="feather-icon"><i data-feather="smile"></i></span><span class="condense"><span class="hover-title">Thank
										You</span> </span>
							</a>
						</li>
				   </ul>
				 </div>
			 </div>
         </div>
		<!-- main content -->
		<div class="main-content">
			<div class="container-fluid">
				<!-- Page title & breadcrumb -->
				<div class="page-title">
					<div class="breadcrumb">
						<h1>Getting Started</h1>
						<ul>
							<li><a href="index.html">Smarthr</a></li>
							<li>Getting Started</li>
						</ul>
					</div>
				</div>
				<div class="row sections">
					<div class="col-xl-12 col-md-12">
						<!-- Introduction -->
						<section class="section-block hentry" id="instructions">
							<div class="custom-card">
								<div class="card-header">
									<h4 class="card-title">Introduction<a class="anchor-link ms-2" href="#instructions"><i class="fa-solid fa-hashtag"></i></a></h4>
									<div class="header-tools">
										<a href="#" class="card-maximize">
											<span class="feather-icon" title="Full Screen"><i data-feather="maximize"></i></span>
										</a>
									</div>
								</div>
								<div class="card-body">
									<div class="intro">
										<div class="item-details mb-3">
										<div class="row">
										<div class="col-md-6">
										<ul class="auth-detail">
											<li><strong>Item Name : </strong>SmartHR - HRMS, Payroll, HR Project Management Admin Dashboard Template</li>
											<li><strong>Published: </strong>13 January 2018</li>
											<li><strong>Item Version : </strong><span class="badge badge-changelog badge-soft-danger fw-semibold fs-8 px-2 ms-2">v3.9.9</span></li>
											<li><strong>Author : </strong><a target="_blank" href="https://dreamstechnologies.com">Dreams Technologies</a></li>
											<li>Support via email: <a href="mailto:[email protected]">[email protected]</a></li>
											<li>Support via Themeforest: <a target="_blank" href="https://themeforest.net/item/smarthr-bootstrap-admin-panel-template/21153150/support">Take me there</a></li>
										</ul>
										</div>
										<div class="col-md-6">
											<a class="gallery-thumb" href="assets/img/banners/banner.jpg">
												<img src="assets/img/banners/banner.jpg" class="img-fluid" alt="Smarthr Banner">
											</a>
										</div>
										</div>
										</div>
										<h5>
											<a href="#" class="pro-thumbnail me-2" target="_blank">
												<img src="assets/img/logo/favicon.png" class="img-fluid" alt="Smarthr Thumbnail">
											</a> SmartHR - HRMS, Payroll, HR Project Management Admin Dashboard Template.
										</h5>
											<p>SmartHR - HR Management Admin Template is a HR management solution for automating and simplifying HR operations. SmartHR is a simple, intelligent, and user-friendly solution that offers many kinds of technology modules to help in automating your human resource practices.</p>
										
									</div>
									<a href="https://themeforest.net/item/smarthr-bootstrap-admin-panel-template/21153150/support" class="btn btn-primary rounded-pill me-2" target="_blank">Contact Support</a>
									<a href="https://themeforest.net/item/smarthr-bootstrap-admin-panel-template/21153150/support" class="btn btn-soft-primary rounded-pill" target="_blank" rel="noreferrer">Create Support ticket</a>
								</div>
							</div>
						</section>
						<!-- Core Features -->
						
						
						<section class="section-block hentry" id="requirement">
							<div class="custom-card">
								<div class="card-header">
									<h4 class="card-title">Requirement</h4>
									<div class="header-tools">
										<a href="#" class="card-maximize">
											<span class="feather-icon" title="Full Screen"><i data-feather="maximize"></i></span></a>
									</div>
								</div>
								<div class="card-body">
									<div>
										<h5 class="mb-3">Technologies</h5>
										<ul class="custom-list mb-4">
											<li>Framework <strong>Html</strong></li>
											<li><strong>Materialize</strong></li>
										</ul>
										<h5 class="mb-3">System Requirements</h5>
										<ul class="custom-list mb-0">
											<li>Text Editor like, Sublime Text 3 editor (or) Visual Studio Code editor</li>
											<li>Any Web Browser</li>
										</ul>
									</div>
								</div>
							</div>
						</section>
						
						
						
						<section class="section-block hentry" id="features">
							<div class="custom-card">
								<div class="card-header">
									<h4 class="card-title">Features<a class="anchor-link ms-2" href="#features"><i class="fa-solid fa-hashtag"></i></a></h4>
									<div class="header-tools">
										<a href="#" class="card-maximize">
											<span class="feather-icon" title="Full Screen"><i data-feather="maximize"></i></span></a>
									</div>
								</div>
								<div class="card-body">
									<p class="mb-0">Creative Design<br>
										Fully Responsive<br>
										Color & Fonts is easily changed<br>
										W3C Validated Code<br>
										Bootstrap 5.x used<br>
										Compatible Browsers: IE8+, Firefox, Safari, Opera, Chrome<br>
									</p>
								</div>
								
							</div>
						</section>

						<!-- File Structure -->
						<section class="section-block hentry" id="file_structure">
							<div class="custom-card">
								<div class="card-header">
									<h4 class="card-title">File Structure<a class="anchor-link ms-2" href="#file_structure"><i class="fa-solid fa-hashtag"></i></a></h4>
									<div class="header-tools">
										<a href="#" class="card-maximize">
											<span class="feather-icon" title="Full Screen"><svg xmlns="http://www.w3.org/2000/svg" width="18px" height="18px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-maximize"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"></path></svg></span></a>
									</div>
								</div>
								<div class="card-body">
									<div class="file-structure">
										<ul class="main-structure active">
											<li>
												<a href="javascript:void(0)" class="file-drop">
													<i class="fa-solid fa-chevron-up"></i><i class="fa-regular fa-folder-open"></i>Smarthr
												</a>
												<ul class="file-sub" >
													<li>
														<a href="javascript:void(0)" class="file-drop">
															<i class="fa-solid fa-chevron-up"></i><i class="fa-regular fa-folder-closed"></i>Materializescss
														</a>
														<ul class="file-hide">
															<li>
																<a href="javascript:void(0)" class="file-drop">
																	<i class="fa-solid fa-chevron-up"></i><i class="fa-regular fa-folder-closed"></i>template-materializecss
																</a>
																<ul class="file-hide">
																	<li><i class="fa-regular fa-file-lines"></i>index.html</li>
																</ul>
																<ul class="file-hide">
																<li>
																	<a href="javascript:void(0)" class="file-drop">
																		<i class="fa-solid fa-chevron-up"></i><i class="fa-regular fa-folder-closed"></i>assets
																		<ul class="">
																			<li><i class="fa-regular fa-file-lines"></i>css</li>
																			<li><i class="fa-regular fa-file-lines"></i>fonts</li>
																			<li><i class="fa-regular fa-file-lines"></i>img</li>
																			<li><i class="fa-regular fa-file-lines"></i>js</li>
																			<li><i class="fa-regular fa-file-lines"></i>plugins</li>
																		</ul>
																	</a>
																</li>
																
															</ul>
																
																
															</li>
														</ul>
														<ul class="file-hide">
															<li>
																<a href="javascript:void(0)" class="file-drop">
																	<i class="fa-solid fa-chevron-up"></i><i class="fa-regular fa-folder-closed"></i>template-materializecss-rtl
																</a>
																<ul class="file-hide">
																	<li><i class="fa-regular fa-file-lines"></i>index.html</li>
																</ul>
															</li>
														</ul>
													</li>
												</ul>
											</li>
										</ul>
									</div>
								</div>
							</div>
						</section>

						<!-- Html Structure -->
						<section class="section-block hentry" id="html_structure">
							<div class="custom-card">
								<div class="card-header">
									<h4 class="card-title">Html Structure<a class="anchor-link ms-2" href="#file_structure"><i class="fa-solid fa-hashtag"></i></a></h4>
									<div class="header-tools">
										<a href="#" class="card-maximize">
											<span class="feather-icon" title="Full Screen"><svg xmlns="http://www.w3.org/2000/svg" width="18px" height="18px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-maximize"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"></path></svg></span></a>
									</div>
								</div>
								<div class="card-body">
									<div class="file-structure">
<pre class="language-markup mb-0"><code class="language-markup mb-0">
	&lt;!DOCTYPE html&gt;
		&lt;html lang="en"&gt;
		&lt;head&gt;
			&lt;meta charset="utf-8"&gt;
			&lt;meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0"&gt;
			&lt;title&gt;SmartHR - HRMS admin template&lt;/title&gt;
			&lt;link rel="shortcut icon" href="assets/img/favicon.png"&gt;
			&lt;link rel="stylesheet" href="assets/css/bootstrap.min.css"&gt;
			&lt;link rel="stylesheet" href="assets/plugins/fontawesome/css/fontawesome.min.css"&gt;
			&lt;link rel="stylesheet" href="assets/plugins/fontawesome/css/all.min.css"&gt;
			&lt;link rel="stylesheet" href="assets/css/style.css"&gt;
		&lt;/head&gt;
		&lt;body&gt;
			&lt;div class="main-wrapper"&gt;
				&lt;div class="header"&gt;
				&lt;/div&gt;
				&lt;div class="breadcrumb-bar"&gt;
				&lt;/div&gt;
				&lt;div class="content"&gt; 
					&lt;div class="container-fluid"&gt;
					&lt;/div&gt;
				&lt;/div&gt; 
			&lt;/div&gt; 
			&lt;script src="assets/js/jquery-3.7.1.min.js"&gt;&lt;/script&gt;
			&lt;script src="assets/js/popper.min.js"&gt;&lt;/script&gt;
			&lt;script src="assets/plugins/bootstrap/js/bootstrap.min.js"&gt;&lt;/script&gt;  
			&lt;script src="assets/plugins/select2/js/select2.min.js"&gt;&lt;/script&gt;  
			&lt;script src="assets/js/app.js"&gt;&lt;/script&gt;
		&lt;/body&gt;
	&lt;/html&gt;
	</code></pre>
									</div>
								</div>
							</div>
						</section>

						<!-- Change Logo -->
						<section class="section-block hentry" id="change_logo">
							<div class="custom-card">
								<div class="card-header">
									<h4 class="card-title">How to change Logo ? <a class="anchor-link ms-2" href="#file_structure"><i class="fa-solid fa-hashtag"></i></a></h4>
									<div class="header-tools">
										<a href="#" class="card-maximize">
											<span class="feather-icon" title="Full Screen"><svg xmlns="http://www.w3.org/2000/svg" width="18px" height="18px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-maximize"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"></path></svg></span></a>
									</div>
								</div>
								<div class="card-body">
									<div class="file-structure">
										<p>You can change the logo or replace it from img folder or you can edit it from HTML file.</p>
										
<pre class="language-javascript mb-0"><code class="language-javascript">&lt;div class="header"&gt;
	&lt;a href="index.html" class="logo"&gt;
		&lt;img src="assets/img/logo.png alt="logo"&gt;
	&lt;a&gt;
&lt;/div&gt; </code></pre>
									</div>
								</div>
							</div>
						</section>

						<!-- JavaScript Structure -->
						<section class="section-block hentry" id="script_structure">
							<div class="custom-card">
								<div class="card-header">
									<h4 class="card-title">Javascripts <a class="anchor-link ms-2" href="#file_structure"><i class="fa-solid fa-hashtag"></i></a></h4>
									<div class="header-tools">
										<a href="#" class="card-maximize">
											<span class="feather-icon" title="Full Screen"><svg xmlns="http://www.w3.org/2000/svg" width="18px" height="18px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-maximize"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"></path></svg></span></a>
									</div>
								</div>
								<div class="card-body">
									<div class="file-structure">
										<p>You can change the logo or replace it from img folder or you can edit it from HTML file.</p>
										
<pre class="language-javascript mb-0"><code class="language-javascript">	&lt;script src="assets/js/jquery-3.7.1.min.js"&gt;&lt;/script&gt;
	&lt;script src="assets/plugins/bootstrap/js/bootstrap.bundle.min.js"&gt;&lt;/script&gt;
	&lt;script src="assets/plugins/slimscroll/jquery.slimscroll.min.js"&gt;&lt;/script&gt;  
	&lt;script src="assets/plugins/select2/js/select2.min.js"&gt;&lt;/script&gt;    
	&lt;script src="assets/js/app.js"&gt;&lt;/script&gt;
</code></pre>
									</div>
								</div>
							</div>
						</section>
						<!-- Installation -->
						<section class="section-block hentry" id="php_config">
							<div class="custom-card">
								<div class="card-header">
									<h4 class="card-title">Installation Guide<a class="anchor-link ms-2" href="#php_config"><i class="fa-solid fa-hashtag"></i></a></h4>
									<div class="header-tools">
										<a href="#" class="card-maximize">
											<span class="feather-icon" title="Full Screen"><i data-feather="maximize"></i></span></a>
									</div>
								</div>
								<div class="card-body">
									<div class="server">
										<div class="custom-list mb-4">
											<h5 class="mb-3">Step 1:</h5>
											<p>After unzipping Template Files, you will find our product Smarthr->HTML(Source code)</p>
											<h5 class="mb-3">Step 2:</h5>
											<p> Open HTML folder, copy all files and paste in your localhost or server root folder</p>
											<h5 class="mb-3">Step 3:</h5>
											<p>Now you can run this Template in any web browser from your PC or Laptop</p>
											
										</div>	<hr>
									</div>
											<div class="alert alert-danger mb-0">
										<span class="badge rounded-pill text-bg-danger text-uppercase">for example</span>
										<p class="mb-0">localhost/Smarthr/index.html or www.example.com/index.html</p>
									</div>
								</div>
							</div>
						</section>
						
						<section class="section-block hentry" id="scss_install">
							<div class="custom-card">
								<div class="card-header">
									<h4 class="card-title">Sass, Scss<a class="anchor-link ms-2" href="#php_config"><i class="fa-solid fa-hashtag"></i></a></h4>
									<div class="header-tools">
										<a href="#" class="card-maximize">
											<span class="feather-icon" title="Full Screen"><i data-feather="maximize"></i></span></a>
									</div>
								</div>
								<div class="card-body">
									<div class="server">
										<div class="custom-list mb-4">
											<h5 class="mb-3">Step 1:</h5>
											<p>Install Node.js</p>
											<h5 class="mb-3">Step 2:</h5>
											<p> Initialize NPM</p>
											<h5 class="mb-3">Step 3:</h5>
											<p>Install Node-Sass</p>
											<h5 class="mb-3">Step 4:</h5>
											<p>Write Node-sass Command (sass --watch main.scss:../css/style.css)</p>
											<h5 class="mb-3">Step 5:</h5>
											<p>Run the Script</p>
										</div>	<hr>
										<h4>Install Node.js</h4>
										<p>Node.js is a run-time environment which includes everything you need to execute a program written in JavaScript. It’s used for running scripts on the server to render content before it is delivered to a web browser. In a web browser, navigate to <a href="https://nodejs.org/en/download/" target="_blank">https://nodejs.org/en/download/.</a>.</p>
										<h4>Update Your NPM</h4>
										<p>Npm is the package for JavaScript and the world's largest software registry. Npm is a separate project from node.js, and tends to update more drequently. As a result, even if uou've just downloaded Node.js (and therefore npm), you'll probably need to update your npm.</p>
										<pre class="language-javascript" tabindex="0"><code class="language-javascript">npm install --global npm@latest</code></pre>
										<h4>Install all dependencies</h4>
										<p>If you want to update or develop this theme, you need to install all dependencies by running:</p>
										<pre class="language-javascript" tabindex="0"><code class="language-javascript">npm install</code></pre>
										<h4>Install Sass</h4>
										<p>If you use Node.js, you can also install Sass using npm by running</p>
										<pre class="language-javascript" tabindex="0"><code class="language-javascript">npm install -g sass</code></pre>
									</div>
											<div class="alert alert-danger mb-0">
										<span class="badge rounded-pill text-bg-danger text-uppercase">for example</span>
										<p class="mb-0">sass --watch main.scss:../css/style.css</p>
									</div>
								</div>
							</div>
						</section>
						<section class="section-block hentry" id="faq">
							<div class="custom-card">
								<div class="card-header">
									<h4 class="card-title">FAQs<a class="anchor-link ms-2" href="#faq"><i class="fa-solid fa-hashtag"></i></a></h4>
									<div class="header-tools">
										<a href="javascript:void(0)" class="card-maximize">
											<span class="feather-icon" title="Full Screen"><i data-feather="maximize"></i></span></a>
									</div>
								</div>
								<div class="card-body">
	<div class="accordion" id="faq_list">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        Can I use this platform on multiple domains?
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse" data-bs-parent="#faq_list">
      <div class="accordion-body">
         With one purchase code you can use it on one domain name. You need to get new license for every new domain name, please check <a href="https://themeforest.net/licenses/standard" target="_blank">Envato Help Page</a> for more information about licenses. </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        I got a problem, How can I get support?
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#faq_list">
      <div class="accordion-body">
         If you need support, or if you're facing any problems, please contact us via <a href="https://themeforest.net/item/smarthr-bootstrap-admin-panel-template/21153150/support" target="_blank">Envato Support</a>
													<br> Please note that our respond can take up to 2 business days.
												</div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
        What does the support include?
      </button>
    </h2>
    <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#faq_list">
      <div class="accordion-body">
		<ul class="list-disc">
			<li>Availability to answer questions, Answering technical questions about item’s features, Assistance with reported bugs and issues, Help with included 3rd party assets.</li>
			<li>Any customization request will be ignored.</li>
			<li>Please make sure to read more about the <a href="https://themeforest.net/page/item_support_policy" target="_blank">support policy</a>. </li>
		</ul>
      </div>
    </div>
  </div>
</div>
								</div>
							</div>
						</section>
						
						<section class="section-block page-block hentry" id="support">
							<div class="custom-card">
								<div class="card-header">
									<h4 class="card-title">Support<a class="anchor-link ms-2" href="#support"><i class="fa-solid fa-hashtag"></i></a></h4>
									<div class="header-tools">
										<a href="javascript:void(0)" class="card-maximize">
											<span class="feather-icon" title="Full Screen"><i data-feather="maximize"></i></span></a>
									</div>
								</div>
								<div class="card-body">

							<p>If this documentation does not address your questions, please feel free to contact us via email at <a class="btn btn-primary btn-sm" target="_blank" href="https://themeforest.net/item/smarthr-bootstrap-admin-panel-template/21153150/support">Item Support Page</a>
							</p>
							<p>We are in the GMT+5:30 time zone and typically respond to inquiries on weekdays within 12-24 hours. Please note that in rare cases, the response time may extend to 48 hours, especially during holiday seasons.</p>
							<div class="alert alert-warning mb-4">
								<span class="badge rounded-pill text-bg-danger text-uppercase">Note:</span> 
								<p class="mb-0">We strive to offer top-notch support, but it's only available to verified buyers and for template-related issues such as bugs and errors. Custom changes and third-party module setups are not covered.</p>
							</div>
							<h5>Don’t forget to Rate Smarthr! <i class="fas fa-star text-warning"></i>
								<i class="fas fa-star text-warning"></i>
								<i class="fas fa-star text-warning"></i>
								<i class="fas fa-star text-warning"></i>
								<i class="fas fa-star text-warning"></i>
							</h5>
							<div class="alert alert-success mb-0">Please take a moment to rate our product on Themeforest. Your support means a lot to us. Just go to your <strong>Themeforest Profile > Downloads Tab</strong>, and you can leave a review for our script. Thank you!</div>
						
								</div>
							</div>
						</section>
						
						<section class="section-block page-block hentry" id="license">
							<div class="custom-card">
								<div class="card-header">
									<h4 class="card-title">License<a class="anchor-link ms-2" href="#license"><i class="fa-solid fa-hashtag"></i></a></h4>
									<div class="header-tools">
										<a href="javascript:void(0)" class="card-maximize">
											<span class="feather-icon" title="Full Screen"><i data-feather="maximize"></i></span></a>
									</div>
								</div>
								<div class="card-body">
									<p>Smarthr is developed by <a href="https://themeforest.net/user/dreamstechnologies/portfolio" target="_blank">Dreams Technologies</a> and is available under both <a href="https://themeforest.net/licenses/standard" target="_blank">Envato Extended &amp; Regular License</a> options.</p>
									<h6>Regular License</h6>
									<p>Usage by either yourself or a single client is permitted for a single end product, provided that end users are not subject to any charges.</p>
									<h6>Extended License</h6>
									<p>For use by you or one client in a single end product for which end users may be charged.</p>
									<p><a href="https://themeforest.net/licenses/faq#main-differences-licenses-a" target="_blank">What are the main differences between the Regular License and the Extended License?</a></p>
									<div class="alert alert-info mb-0">
										<span class="badge rounded-pill text-bg-danger text-uppercase">Note</span>
										<p class="mb-0">If you operate as a freelancer or agency, you have the option to acquire the Extended License, which permits you to utilize the item across multiple projects on behalf of your clients.</p>
									</div>
								</div>
							</div>
						</section>

						<section class="section-block page-block hentry" id="credits">
							<div class="custom-card">
								<div class="card-header">
									<h4 class="card-title">Credits<a class="anchor-link ms-2" href="#license"><i class="fa-solid fa-hashtag"></i></a></h4>
									<div class="header-tools">
										<a href="javascript:void(0)" class="card-maximize">
											<span class="feather-icon" title="Full Screen"><i data-feather="maximize"></i></span></a>
									</div>
								</div>
								<div class="card-body">
									<div class="table-responsive ref-table">
										<table class="table table-borderless mb-0">
											<thead class="thead-light">
												<tr>
													<th class="w-20">Plugin Name</th>
													<th class="w-80">URL</th>
												</tr>
											</thead>
											<tbody>
												<tr>
													<td><span class="text-high-em">Materializecss</span></td>
													<td><a href="https://materializecss.com/" class="link-high-em" target="_blank">https://materializecss.com/</a></td>
												</tr>
												<tr>
													<td><span class="text-high-em">jQuery</span></td>
													<td><a href="https://jquery.com/" class="link-high-em" target="_blank">https://jquery.com/</a></td>
												</tr>
												<tr>
													<td><span class="text-high-em">Fontawesome</span></td>
													<td><a href="https://fontawesome.com/" class="link-high-em" target="_blank">https://fontawesome.com/</a></td>
												</tr>
												<tr>
													<td><span class="text-high-em">Select2</span></td>
													<td><a href="https://github.com/select2/select2" class="link-high-em" target="_blank">https://github.com/select2/select2</a></td>
												</tr>
												<tr>
													<td><span class="text-high-em">Date Timepicker</span></td>
													<td><a href="https://cdnjs.com/libraries/jquery-datetimepicker" class="link-high-em" target="_blank">https://cdnjs.com/libraries/jquery-datetimepicker</a></td>
												</tr>
												<tr>
													<td><span class="text-high-em">Google Fonts</span></td>
													<td><a href="https://fonts.google.com/" class="link-high-em" target="_blank">https://fonts.google.com/</a></td>
												</tr>
												<tr>
													<td><span class="text-high-em">Morris</span></td>
													<td><a href="https://morrisjs.github.io/morris.js/" class="link-high-em" target="_blank">https://morrisjs.github.io/morris.js/</a></td>
												</tr>
												<tr>
													<td><span class="text-high-em">Summernote</span></td>
													<td><a href="https://summernote.org/plugins" class="link-high-em" target="_blank">https://summernote.org/plugins</a></td>
												</tr>
												<tr>
													<td><span class="text-high-em">Fancy Box</span></td>
													<td><a href="http://fancybox.net/" class="link-high-em" target="_blank">http://fancybox.net/</a></td>
												</tr>
												<tr>
													<td><span class="text-high-em">Dropzone Js</span></td>
													<td><a href="https://github.com/dropzone/dropzone" class="link-high-em" target="_blank">https://github.com/dropzone/dropzone</a></td>
												</tr>
												<tr>
													<td><span class="text-high-em">Jquery UI</span></td>
													<td><a href="https://jqueryui.com/s" class="link-high-em" target="_blank">https://jqueryui.com/</a></td>
												</tr>
												<tr>
													<td><span class="text-high-em">Full Calendar</span></td>
													<td><a href="https://fullcalendar.io/" class="link-high-em" target="_blank">https://fullcalendar.io/</a></td>
												</tr>
												<tr>
													<td><span class="text-high-em">Moment JS</span></td>
													<td><a href="https://momentjs.com/" class="link-high-em" target="_blank">https://momentjs.com/</a></td>
												</tr>
												<tr>
													<td><span class="text-high-em">Popper JS</span></td>
													<td><a href="https://popper.js.org/" class="link-high-em" target="_blank">https://popper.js.org/</a></td>
												</tr>
											</tbody>
										</table>
									</div>	
								</div>
							</div>
						</section>
						<section class="section-block page-block hentry" id="customwork">
							<div class="custom-card bg-gr-1 text-center">
								<div class="card-body">
									<h4 class="card-title">Do you need a customized application for your business?</h4>
									<p>If you need a customized application for your business depends on your specific requirements and goals, Please contact us.</p>
									<p>Customization can be the key to success, ensuring your project perfectly aligns with your unique goals and requirements.</p>
									<div class="hire">
										<h6>Don't Miss Out on the Benefits of Customization!</h6>
										<p>Unlock the potential of your project. It's time to ensure that your project isn't just another cookie-cutter solution but a truly unique and effective one.</p>
										<p>Discover how customization can make a difference in your project's success. Let's create a solution that's as unique as your vision!</p>
										<ul>
											<li>We'll tailor the application to meet your specific needs and preferences.</li>
											<li>We will upload your website to the server and ensure it is live.</li>
										</ul>
										<div class="contact-btn mb-3">
											<a target="_blank" href="https://calendly.com/dreamstechnologies" class="btn btn-primary me-2"><i class="fa-solid fa-calendar-days me-2"></i>Book an Appointment</a>
											<a href="mailto:[email protected]" class="btn btn-primary"><i class="fa-solid fa-calendar-days me-2"></i>Get a Free Quote</a>
										</div>
										<div class="contact-link">
											<a href="https://join.skype.com/invite/KqfsfMbmDu9a" class="px-2 link-body-emphasis"><i class="fa-brands fa-skype me-1"></i>dreamstechnologies</a>
											<a target="_blank" href="mailto:[email protected]" class="px-2 link-body-emphasis"><i class="fa fa-envelope me-1"></i> [email protected]</a>
										</div>
									</div>
								</div>
							</div>
						</section>
						
						<section class="custom-card page-block hentry  min-h-100" id="thanks">
							<div class="card-body">
								<div class="thanks">
									<img src="assets/img/banners/ratings.svg" alt="thanks">
									<h2>Thank You</h2>
									<p>Thank you once again for downloading <strong>Smarthr</strong>.<br>
									We hope you're enjoying your experience, and we kindly request that you take a moment to share your valuable review and rating with us.</p>
									<strong>Review Link:</strong><a href="https://themeforest.net/downloads" class="text-primary fw-bold fs-5" target="_blank">https://themeforest.net/downloads</a>
								</div>
							</div>
						</section>
					</div>
				</div>
			</div><footer class="content-footer footer">
  <div class="container-fluid d-flex flex-wrap justify-content-between align-items-center text-center py-3">
    <div>
      &copy; 2015- <script>
      document.write(new Date().getFullYear())

      </script>
      
      <a href="#" class="footer-text fw-medium text-primary" target="_blank">Dreams Technologies</a>
      
    </div>
    <div class="social-icons">
      <a href="#" class="footer-link me-2" target="_blank"><i class="fa-brands fa-facebook"></i></a>
      <a href="#" class="footer-link me-2" target="_blank"><i class="fa-brands fa-twitter"></i></a>
      <a href="#" class="footer-link me-2" target="_blank"><i class="fa-brands fa-github"></i></a>
      <a href="#" class="footer-link me-2" target="_blank"><i class="fa-brands fa-dribbble"></i></a>
      <a href="#" class="footer-link" target="_blank"><i class="fa-brands fa-instagram"></i></a>
    </div>
  </div>
</footer>
		</div>	

	</main>

<script src="assets/js/jquery-3.7.1.min.js"></script>
<script src="assets/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/prism.js"></script>
<script src="assets/js/feather.min.js"></script>
<script src="assets/js/jquery.zoom.min.js"></script>
<script src="assets/js/jquery.magnific-popup.min.js"></script>
<script src="assets/js/isotope.pkgd.min.js"></script>
<script src="assets/js/main.js"></script>
</body>


</html>