Mind Trainer - Psychology and Counseling Center HTML5 Template Documentation

Mind Trainer - Psychology and Counseling Center HTML5 Template

Last Edited: 20/08/2025
Created: 28/03/2017
By: Mahbub Alam Khan
Email: hkhan.cse@gmail.com
Web Site: http://bluewindlab.net

Thank you for purchasing Mind Trainer - Psychology and Counseling Center HTML5 Template. If you like this scripts, feel free to rate it five stars at Themeforest downloads section. If you encounter any problems please do not give a low rating but contact me first. So I can help you.
Thank You!

Quick Introduction
Structure
Navigation
Image Settings
Customize Template
Change Log
Credits
Conclusion

👉 Overview - top

Mind Trainer is a modern looking HTML5 template designed & developed for Psychology and Counseling Center Websites in mind. It works smoothly on your Computer, or on your tablet and mobile devices. It’s comes with eye catching features, such as animates boxes, contact form section, event/campaign box, testimonial box, counter block and much more.

Features

Bootstrap 3 Framework.
2 Home Page Layouts.
Modern and Very Clean looking Design.
Unique & Creative design.
HTML5 & CSS3
Responsive Template
Font-awesome & Flaticon fonts.
Free Google Fonts.
Contact Form.
404 Page.
Multi-Pages Layouts.
SEO & Developer Friendly Code.
Well Documented.

12 HTML5 Files Included

Title	File Name	Demo Link
Home Page 1	index.html	Demo
Home Page 2	home-2.html	Demo
About Us	about-us.html	Demo
Service	service.html	Demo
Events	events.html	Demo
Events Single	events-single.html	Demo
Single	single.html	Demo
Blog	single.html	Demo
Contact	contact.html	Demo
Gallery 1	gallery-1.html	Demo
Gallery 2	gallery-2.html	Demo
404	404.html	Demo

👉 Template Structure - top

- HTML Structure:

<div class="container">
    <div class="row clearfix">
        <div class="col-md-6 col-sm-12">
            <span class="top-phone-no">
                <i class="fa fa-phone-square"></i>
                +093-120-525-9162
            </span>
            <span class="top-email-info">
                <i class="fa fa-envelope"></i>
                query@yourdomain.com
            </span>
        </div> <!-- end col-sm-6  -->
        <div class="col-md-6 col-sm-12 text-right">
            <span class="top-location-info">
                <i class="fa fa-map-marker"></i>   
                3100 C/A Mouchak, Sylhet, Bangladesh   
            </span>
        </div> <!-- end col-sm-6  -->
    </div> <!-- end .row  -->
</div> <!--  end .container -->

- CSS Structure:

<link href="libs/bootstrap/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="libs/font-awesome/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="libs/font-awesome/v4-shims.min.css" rel="stylesheet" type="text/css">
<link href="libs/owl-carousel/owl.carousel.css" rel="stylesheet" type="text/css">
<link href="libs/animate/animate.css" rel="stylesheet" type="text/css">
<link href="libs/venobox/venobox.css" rel="stylesheet" type="text/css">
<link href="libs/flaticon/flaticon.css" rel="stylesheet" type="text/css">
<link href="assets/styles.css" rel="stylesheet" type="text/css">

- JS Structure:

<script src="libs/jquery/jquery.min.js"></script>
<script src="libs/bootstrap/bootstrap.min.js"></script>
<script src="libs/wow/wow.min.js"></script>
<script src="libs/backtop/jquery.backTop.min.js "></script>
<script src="libs/waypoints/waypoints.min.js"></script>
<script src="libs/waypoints/waypoints-sticky.min.js"></script>
<script src="libs/owl-carousel/owl.carousel.min.js"></script>
<script src="libs/jquery-stellar/jquery.stellar.min.js"></script>
<script src="libs/counterup/jquery.counterup.min.js"></script>
<script src="libs/venobox/venobox.min.js"></script>
<script src="assets/scripts.js"></script>

<div class="main-menu-container">
    <nav class="clearfix" id="main-menu">
        <ul class="sf-menu main-menu">
            <li>
                <a href="#about_link" class="nav_menu">About</a>
            </li>
            <li>
                <a href="#letter_link" class="nav_menu">Letter</a>
            </li>
            <li>
                <a href="#sign_it_link" class="nav_menu">Sign it</a>
            </li>
            <li>
                <a href="#update_link" class="nav_menu">Latest</a>
            </li>
            <li>
                <a href="#share_link" class="nav_menu">Share</a>
            </li>
            <li>
                <a href="#" class="btn btn-lg top-donate-btn">Donate & Help</a>
            </li>
        </ul>
    </nav> <!--  end .main-menu -->
</div>

👉 Image Settings - top

It's very easy to change your image. Just take a look at the screenshot below. Change the image link to your own image.

👉 Customize Template - top

Copy the project anywhere of your computer.
Open the terminal. From command line, navigate to the folder.
```
cd mind_trainer
```
Install node modules.
```
npm install
```
Note: If you are using Windows, you may need to run the command prompt as administrator.
Now, run the project.
```
npm run dev
```
You can go to the src/styles/variables.scss file to change the styles.
For example, you can change the primary color of the template from $primary-color variable.
To build the styles and scripts.
```
npm run build
```

Required node modules

To run the project, you need to install the following node modules.

To install the node modules, you need to have Node.js installed on your computer. Download Node.js

"dependencies": {
"autoprefixer": "^10.4.16",
"concurrently": "^8.2.2",
"esbuild": "^0.19.8",
"live-server": "^1.2.2",
"postcss": "^8.4.32",
"sass": "^1.69.5"
}

👉 Sources and Credits - top

G. Change Log - top

2025, 20 August - v 1.0.2
- Added: SCSS support for the template.
- Fixed: Template minor bugs.

2023, 30 September - v 1.0.1
- Fixed: Template minor bugs.

2016, October, 31 - v 1.0.0
- Initial release

G. Conclusion: - top

Once again, thank you so much for purchasing Mind Trainer - Psychology and Counseling Center HTML5 Template.

xeniouoshk

Go To Table of Contents