This guide will help you to set up and work with this template.
The docs include information to understand how the template is organized, how to customize the template source code, and how to compile and extend it to fit your needs.
Template name: Stokes - Multi-purpose HTML5 Template
Template version: 1.0
Template author: Infinity Softway
Support & pre-sale questions: infinitysoftway@gmail.com
Unzip the downloaded file. Within your Template, you’ll find the following directories and files, common grouping resources and providing compiled, transpired and minified distribution files, as well as raw source files.
| Path | Description |
|---|---|
| ├── Documentation | Documentation you are reading now |
| ├── Template | Main template folder |
| ── css | Includes all .css files, used in template |
| ── fonts | themify, Simple-Line-Icons, Pe-icon-7-stroke, feather, fontawesome icon fonts |
| ── Images | Images for demo purposes. |
| ── Js | Javascript source |
| ── php | Php file for working contact form for sending mail to admin. |
| ── scss | Scss source |
| ── video | Local HTML5 video source |
| ── gulpfile | Configuration file for Gulp library. official Gulp documentation. |
| ── package.json | List of dependencies and npm information |
You're now good to go..! If you want to build/customize with using simple CSS, Simply start adding your content/images and create your awesome website for your awesome users to use this theme's development tools.
And if you want to build/customize with using SASS you have to install Node.js and Gulp.js in your system to use this theme's development tools using below step.
If you don't have Node.js already installed in your system, go to Node.js site and installed the appropriate installation for your system.
This command will install the latest version of Gulp CLI. If you already have Gulp CLI, you can skip this step.
npm install gulp-cli -g This command will install the theme's dependencies, package.json file.
npm install Now run this last command for a default task from theme's Gulpfile. you are all set.
gulp Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behavior. Put it all tags together and your pages should look like this:
<!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 top section ==========-->
<div class="go-top on-dark">
<p class="go-top-text">Scroll to top <i class="fas fa-long-arrow-alt-right ps-2"></i></p>
</div>
<!--==========
End of back to top 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>The Logo Container can be found in the header container. To use your own logo, Put your logo in images folder and save it as logo.png
<!--===== Start of logo =====-->
<a class="navbar-brand" href="index.html"> <img src="images/logo.png" alt=""> </a>
<!--===== End of logo =====-->To set your own favicon, put your favicon.ico file in images folder.
<!-- FAVICON -->
<link rel="shortcut icon" href="images/favicon.ico" />Poppins and Jost Google fonts used from Google font library, in Stokes. For use different Google fonts you can get link from Google font library and add HTML5 head tag.
<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">To include a new font you can simply add another line like this:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,300i,400,400i,500,500i,700,900">Simply replace the font family font-family from
in style.css tag with yours.body {
font-family: "Poppins", sans-serif;
}You have seven different types of header styles in this website building template for creating your pages. The list of examples of various headers and their brief descriptions for reference is below.
Default header with white background & dark navigation text. Follow Default Header link for a reference demo for the default header. Refer below code.
<!--==========
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 ==========-->
<!--==========
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 ==========-->
<!--==========
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 ==========-->
<!--==========
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 ==========-->
<!--==========
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 ==========-->
<!--==========
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 ==========-->
<!--==========
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 ==========-->
<!--==========
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 ==========-->
For Sticky header add .fixed-navbar class in nav tag. Refer below snippet code for sticky header.
<!--==========
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 ==========-->
The following list is various types of helper classes for your Html template for different types of fonts colors, sizes, background, layout, and many more styles.
| Class name | Description |
|---|---|
.text-primary |
Main color |
.text-secondary |
Secondary color |
.text-success |
Success color |
.text-danger |
Danger color |
.text-warning |
Warning color |
.text-info |
Info color |
.text-dark |
Dark color |
.text-light |
light color |
.text-black |
Black color |
.text-green |
Green color |
.text-red-light |
Red light color |
.text-cyan |
Cyan color |
.text-blue |
Blue color |
.text-orange |
Orange color |
.text-red |
Red color |
.text-pink |
Pink color |
.text-primary-gradient |
Primary gradient color |
.text-pink-gradient |
Pink gradient color |
.text-white-soft-01 |
White color opacity 0.1 |
.text-white-soft-02 |
White color opacity 0.2 |
.text-white-soft-03 |
White color opacity 0.3 |
.text-white-soft-04 |
White color opacity 0.4 |
.text-white-soft-05 |
White color opacity 0.5 |
.text-white-soft-06 |
White color opacity 0.6 |
.text-white-soft-07 |
White color opacity 0.7 |
.text-white-soft-08 |
White color opacity 0.8 |
.text-white-soft-09 |
White color opacity 0.9 |
.text-black-soft-01 |
Black color opacity 0.1 |
.text-black-soft-02 |
Black color opacity 0.2 |
.text-black-soft-03 |
Black color opacity 0.3 |
.text-black-soft-04 |
Black color opacity 0.4 |
.text-black-soft-05 |
Black color opacity 0.5 |
.text-black-soft-06 |
Black color opacity 0.6 |
.text-black-soft-07 |
Black color opacity 0.7 |
.text-black-soft-08 |
Black color opacity 0.8 |
.text-black-soft-09 |
Black color opacity 0.9 |
.text-orange-soft-01 |
Orange color opacity 0.1 |
.text-orange-soft-02 |
Orange color opacity 0.2 |
.text-orange-soft-03 |
Orange color opacity 0.3 |
.text-orange-soft-04 |
Orange color opacity 0.4 |
.text-orange-soft-05 |
Orange color opacity 0.5 |
.text-orange-soft-06 |
Orange color opacity 0.6 |
.text-orange-soft-07 |
Orange color opacity 0.7 |
.text-orange-soft-08 |
Orange color opacity 0.8 |
.text-orange-soft-09 |
Orange color opacity 0.9 |
.text-cyan-soft-01 |
Cyan color opacity 0.1 |
.text-cyan-soft-02 |
Cyan color opacity 0.2 |
.text-cyan-soft-03 |
Cyan color opacity 0.3 |
.text-cyan-soft-04 |
Cyan color opacity 0.4 |
.text-cyan-soft-05 |
Cyan color opacity 0.5 |
.text-cyan-soft-06 |
Cyan color opacity 0.6 |
.text-cyan-soft-07 |
Cyan color opacity 0.7 |
.text-cyan-soft-08 |
Cyan color opacity 0.8 |
.text-cyan-soft-09 |
Cyan color opacity 0.9 |
| Class name | Description |
|---|---|
.bg-primary |
Background color main |
.bg-secondary |
Background color secondary |
.bg-success |
Background color success |
.bg-danger |
Background color danger |
.bg-warning |
Background color warning |
.bg-info |
Background color info |
.bg-light |
Background color light |
.bg-dark |
Background color dark |
.bg-black |
Background color black |
.bg-green |
Background color green |
.bg-red-light |
Background color red light |
.bg-cyan |
Background color cyan |
.bg-blue |
Background color blue |
.bg-orange |
Background color orange |
.bg-red |
Background color red |
.bg-cyan |
Background color cyan |
.bg-primary-gradient |
Background color primary gradient |
.bg-cyan-gradient |
Background color cyan gradient |
.bg-pink-gradient |
Background color pink gradient |
.bg-purple-gradient |
Background color purple gradient |
.bg-primary-gradient-top |
Background color primary gradient top |
.bg-pink-gradient-top |
Background color pink gradient top |
.bg-primary-soft-01 |
Background color primary opacity 0.1 |
.bg-primary-soft-02 |
Background color primary opacity 0.2 |
.bg-primary-soft-03 |
Background color primary opacity 0.3 |
.bg-primary-soft-04 |
Background color primary opacity 0.4 |
.bg-primary-soft-05 |
Background color primary opacity 0.5 |
.bg-primary-soft-06 |
Background color primary opacity 0.6 |
.bg-primary-soft-07 |
Background color primary opacity 0.7 |
.bg-primary-soft-08 |
Background color primary opacity 0.8 |
.bg-primary-soft-09 |
Background color primary opacity 0.9 |
.bg-white-soft-01 |
Background color white opacity 0.1 |
.bg-white-soft-02 |
Background color white opacity 0.2 |
.bg-white-soft-03 |
Background color white opacity 0.3 |
.bg-white-soft-04 |
Background color white opacity 0.4 |
.bg-white-soft-05 |
Background color white opacity 0.5 |
.bg-white-soft-06 |
Background color white opacity 0.6 |
.bg-white-soft-07 |
Background color white opacity 0.7 |
.bg-white-soft-08 |
Background color white opacity 0.8 |
.bg-white-soft-09 |
Background color white opacity 0.9 |
.bg-black-soft-01 |
Background color black opacity 0.1 |
.bg-black-soft-02 |
Background color black opacity 0.2 |
.bg-black-soft-03 |
Background color black opacity 0.3 |
.bg-black-soft-04 |
Background color black opacity 0.4 |
.bg-black-soft-05 |
Background color black opacity 0.5 |
.bg-black-soft-06 |
Background color black opacity 0.6 |
.bg-black-soft-07 |
Background color black opacity 0.7 |
.bg-black-soft-08 |
Background color black opacity 0.8 |
.bg-black-soft-09 |
Background color black opacity 0.9 |
.bg-orange-soft-01 |
Background color orage opacity 0.1 |
.bg-orange-soft-02 |
Background color orage opacity 0.2 |
.bg-orange-soft-03 |
Background color orage opacity 0.3 |
.bg-orange-soft-04 |
Background color orage opacity 0.4 |
.bg-orange-soft-05 |
Background color orage opacity 0.5 |
.bg-orange-soft-06 |
Background color orage opacity 0.6 |
.bg-orange-soft-07 |
Background color orage opacity 0.7 |
.bg-orange-soft-08 |
Background color orage opacity 0.8 |
.bg-orange-soft-09 |
Background color orage opacity 0.9 |
.bg-green-soft-01 |
Background color green opacity 0.1 |
.bg-green-soft-02 |
Background color green opacity 0.2 |
.bg-green-soft-03 |
Background color green opacity 0.3 |
.bg-green-soft-04 |
Background color green opacity 0.4 |
.bg-green-soft-05 |
Background color green opacity 0.5 |
.bg-green-soft-06 |
Background color green opacity 0.6 |
.bg-green-soft-07 |
Background color green opacity 0.7 |
.bg-green-soft-08 |
Background color green opacity 0.8 |
.bg-green-soft-09 |
Background color green opacity 0.9 |
.bg-warning-soft-01 |
Background color warning opacity 0.1 |
.bg-warning-soft-02 |
Background color warning opacity 0.2 |
.bg-warning-soft-03 |
Background color warning opacity 0.3 |
.bg-warning-soft-04 |
Background color warning opacity 0.4 |
.bg-warning-soft-05 |
Background color warning opacity 0.5 |
.bg-warning-soft-06 |
Background color warning opacity 0.6 |
.bg-warning-soft-07 |
Background color warning opacity 0.7 |
.bg-warning-soft-08 |
Background color warning opacity 0.8 |
.bg-warning-soft-09 |
Background color warning opacity 0.9 |
.bg-red-light-soft-01 |
Background color red light opacity 0.1 |
.bg-red-light-soft-02 |
Background color red light opacity 0.2 |
.bg-red-light-soft-03 |
Background color red light opacity 0.3 |
.bg-red-light-soft-04 |
Background color red light opacity 0.4 |
.bg-red-light-soft-05 |
Background color red light opacity 0.5 |
.bg-red-light-soft-06 |
Background color red light opacity 0.6 |
.bg-red-light-soft-07 |
Background color red light opacity 0.7 |
.bg-red-light-soft-08 |
Background color red light opacity 0.8 |
.bg-red-light-soft-09 |
Background color red light opacity 0.9 |
.bg-cyan-soft-01 |
Background color cyan opacity 0.1 |
.bg-cyan-soft-02 |
Background color cyan opacity 0.2 |
.bg-cyan-soft-03 |
Background color cyan opacity 0.3 |
.bg-cyan-soft-04 |
Background color cyan opacity 0.4 |
.bg-cyan-soft-05 |
Background color cyan opacity 0.5 |
.bg-cyan-soft-06 |
Background color cyan opacity 0.6 |
.bg-cyan-soft-07 |
Background color cyan opacity 0.7 |
.bg-cyan-soft-08 |
Background color cyan opacity 0.8 |
.bg-cyan-soft-09 |
Background color cyan opacity 0.9 |
.bg-red-soft-01 |
Background color red opacity 0.9 |
.bg-red-soft-02 |
Background color red opacity 0.9 |
.bg-red-soft-03 |
Background color red opacity 0.9 |
.bg-red-soft-04 |
Background color red opacity 0.9 |
.bg-red-soft-05 |
Background color red opacity 0.9 |
.bg-red-soft-06 |
Background color red opacity 0.9 |
.bg-red-soft-07 |
Background color red opacity 0.9 |
.bg-red-soft-08 |
Background color red opacity 0.9 |
.bg-red-soft-09 |
Background color red opacity 0.9 |
.bg-pink-soft-01 |
Background color pink opacity 0.1 |
.bg-pink-soft-02 |
Background color pink opacity 0.2 |
.bg-pink-soft-03 |
Background color pink opacity 0.3 |
.bg-pink-soft-04 |
Background color pink opacity 0.4 |
.bg-pink-soft-05 |
Background color pink opacity 0.5 |
.bg-pink-soft-06 |
Background color pink opacity 0.6 |
.bg-pink-soft-07 |
Background color pink opacity 0.7 |
.bg-pink-soft-08 |
Background color pink opacity 0.8 |
.bg-pink-soft-09 |
Background color pink opacity 0.9 |
| Class name | Description |
|---|---|
.l-height-10 |
line height 10px |
.l-height-15 |
line height 15px |
.l-height-20 |
line height 20px |
.l-height-25 |
line height 25px |
.l-height-30 |
line height 30px |
.l-height-35 |
line height 35px |
.l-height-40 |
line height 40px |
| Class name | Description |
|---|---|
.h-100vh |
Height 100vh |
.h-90vh |
Height 90vh |
.h-80vh |
Height 80vh |
.h-70vh |
Height 70vh |
.h-60vh |
Height 60vh |
.h-50vh |
Height 50vh |
| Class name | Description |
|---|---|
.h-500 |
Height 500px |
.h-400 |
Height 400px |
.h-300 |
Height 300px |
.h-200 |
Height 200px |
.h-100 |
Height 100px |
| Class name | Description |
|---|---|
.w-500 |
Width 500px |
.w-400 |
Width 400px |
.w-300 |
Width 300px |
.w-200 |
Width 200px |
.w-100 |
Width 100px |
.w-60 |
Width 60px |
| Class name | Description |
|---|---|
.top-0 |
Top 0 |
.top-10 |
Top 10px |
.top-20 |
Top 20px |
.top-30 |
Top 30px |
.right-0 |
Right 0 |
.right-10 |
Right 10px |
.right-20 |
Right 20px |
.right-30 |
Right 30px |
.bottom-0 |
Bottom 0 |
.bottom-10 |
Bottom 10px |
.bottom-20 |
Bottom 20px |
.bottom-30 |
Bottom 30px |
.left-0 |
Left 0 |
.left-10 |
Left 10px |
.left-20 |
Left 20px |
.left-30 |
Left 30px |
| Class name | Description |
|---|---|
.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 |
| Class name | Description |
|---|---|
.fw-100 |
Font weight 100 |
.fw-200 |
Font weight 200 |
.fw-300 |
Font weight 300 |
.fw-400 |
Font weight 400 |
.fw-500 |
Font weight 500 |
.fw-600 |
Font weight 600 |
.fw-700 |
Font weight 700 |
.fw-800 |
Font weight 800 |
.fw-900 |
Font weight 900 |
| Class name | Description |
|---|---|
.ls-1 |
Letter spacing 1px |
.ls-2 |
Letter spacing 2px |
.ls-3 |
Letter spacing 3px |
.ls-4 |
Letter spacing 4px |
.ls-5 |
Letter spacing 5px |
.ls-6 |
Letter spacing 6px |
.ls-7 |
Letter spacing 7px |
.ls-8 |
Letter spacing 8px |
.ls-9 |
Letter spacing 9px |
| Class name | Description |
|---|---|
.overlay-black-10 |
Background overlay black 0.1 |
.overlay-black-20 |
Background overlay black 0.2 |
.overlay-black-30 |
Background overlay black 0.3 |
.overlay-black-40 |
Background overlay black 0.4 |
.overlay-black-50 |
Background overlay black 0.5 |
.overlay-black-60 |
Background overlay black 0.6 |
.overlay-black-70 |
Background overlay black 0.7 |
.overlay-black-80 |
Background overlay black 0.8 |
.overlay-black-90 |
Background overlay black 0.9 |
.overlay-dark-10 |
Background overlay dark 0.1 |
.overlay-dark-20 |
Background overlay dark 0.2 |
.overlay-dark-30 |
Background overlay dark 0.3 |
.overlay-dark-40 |
Background overlay dark 0.4 |
.overlay-dark-50 |
Background overlay dark 0.5 |
.overlay-dark-60 |
Background overlay dark 0.6 |
.overlay-dark-70 |
Background overlay dark 0.7 |
.overlay-dark-80 |
Background overlay dark 0.8 |
.overlay-dark-90 |
Background overlay dark 0.9 |
.overlay-white-10 |
Background overlay white 0.1 |
.overlay-white-20 |
Background overlay white 0.2 |
.overlay-white-30 |
Background overlay white 0.3 |
.overlay-white-40 |
Background overlay white 0.4 |
.overlay-white-50 |
Background overlay white 0.5 |
.overlay-white-60 |
Background overlay white 0.6 |
.overlay-white-70 |
Background overlay white 0.7 |
.overlay-white-80 |
Background overlay white 0.8 |
.overlay-white-90 |
Background overlay white 0.9 |
.overlay-gradient-10 |
Background overlay gradient 0.1 |
.overlay-gradient-20 |
Background overlay gradient 0.2 |
.overlay-gradient-30 |
Background overlay gradient 0.3 |
.overlay-gradient-40 |
Background overlay gradient 0.4 |
.overlay-gradient-50 |
Background overlay gradient 0.5 |
.overlay-gradient-60 |
Background overlay gradient 0.6 |
.overlay-gradient-70 |
Background overlay gradient 0.7 |
.overlay-gradient-80 |
Background overlay gradient 0.8 |
.overlay-gradient-90 |
Background overlay gradient 0.9 |
.overlay-pink-gradient-10 |
Background overlay pink gradient 0.1 |
.overlay-pink-gradient-20 |
Background overlay pink gradient 0.2 |
.overlay-pink-gradient-30 |
Background overlay pink gradient 0.3 |
.overlay-pink-gradient-40 |
Background overlay pink gradient 0.4 |
.overlay-pink-gradient-50 |
Background overlay pink gradient 0.5 |
.overlay-pink-gradient-60 |
Background overlay pink gradient 0.6 |
.overlay-pink-gradient-70 |
Background overlay pink gradient 0.7 |
.overlay-pink-gradient-80 |
Background overlay pink gradient 0.8 |
.overlay-pink-gradient-90 |
Background overlay pink gradient 0.9 |
.overlay-purple-gradient-10 |
Background overlay purple gradient 0.1 |
.overlay-purple-gradient-20 |
Background overlay purple gradient 0.2 |
.overlay-purple-gradient-30 |
Background overlay purple gradient 0.3 |
.overlay-purple-gradient-40 |
Background overlay purple gradient 0.4 |
.overlay-purple-gradient-50 |
Background overlay purple gradient 0.5 |
.overlay-purple-gradient-60 |
Background overlay purple gradient 0.6 |
.overlay-purple-gradient-70 |
Background overlay purple gradient 0.7 |
.overlay-purple-gradient-80 |
Background overlay purple gradient 0.8 |
.overlay-purple-gradient-90 |
Background overlay purple gradient 0.9 |
| Class name | Description |
|---|---|
.slice-ptb |
Section padding top and bottom |
.slice-pt |
Section padding top |
.slice-pb |
Section padding bottom |
.slice-mtb |
Section margin top and bottom |
.slice-mt |
Section margin top |
.slice-mb |
Section margin bottom |
| Class name | Description |
|---|---|
.avatar-10 |
Avatar height and width 10px |
.avatar-20 |
Avatar height and width 20px |
.avatar-30 |
Avatar height and width 30px |
.avatar-40 |
Avatar height and width 40px |
.avatar-50 |
Avatar height and width 50px |
.avatar-60 |
Avatar height and width 70px |
.avatar-70 |
Avatar height and width 80px |
.avatar-80 |
Avatar height and width 90px |
.avatar-90 |
Avatar height and width 100px |
| Class name | Description |
|---|---|
.flex-10 |
Flex 10px |
.flex-20 |
Flex 20px |
.flex-30 |
Flex 30px |
.flex-40 |
Flex 40px |
.flex-50 |
Flex 50px |
.flex-60 |
Flex 60px |
.flex-70 |
Flex 70px |
.flex-80 |
Flex 80px |
.flex-90 |
Flex 90px |
| Class name | Description |
|---|---|
.mt-0 |
Margin top 0 |
.mt-1 |
Margin top 0.25rem |
.mt-2 |
Margin top 0.4rem |
.mt-3 |
Margin top 1rem |
.mt-4 |
Margin top 1.5rem |
.mt-5 |
Margin top 3rem |
.mt-6 |
Margin top 4rem |
.mt-7 |
Margin top 5.5rem |
.mt-8 |
Margin top 7rem |
.mt-9 |
Margin top 8.5rem |
.mt-n1 |
Margin top nagative 0.25rem |
.mt-n2 |
Margin top nagative 0.4rem |
.mt-n3 |
Margin top nagative 1rem |
.mt-n4 |
Margin top nagative 1.5rem |
.mt-n5 |
Margin top nagative 3rem |
.mt-n6 |
Margin top nagative 4rem |
.mt-n7 |
Margin top nagative 5.5rem |
.mt-n8 |
Margin top nagative 7rem |
.mt-n9 |
Margin top nagative 8.5rem |
| Class name | Description |
|---|---|
.me-0 |
Margin right 0 |
.me-1 |
Margin right 0.25rem |
.me-2 |
Margin right 0.4rem |
.me-3 |
Margin right 1rem |
.me-4 |
Margin right 1.5rem |
.me-5 |
Margin right 3rem |
.me-6 |
Margin right 4rem |
.me-7 |
Margin right 5.5rem |
.me-8 |
Margin right 7rem |
.me-9 |
Margin right 8.5rem |
.me-n1 |
Margin right nagative 0.25rem |
.me-n2 |
Margin right nagative 0.4rem |
.me-n3 |
Margin right nagative 1rem |
.me-n4 |
Margin right nagative 1.5rem |
.me-n5 |
Margin right nagative 3rem |
.me-n6 |
Margin right nagative 4rem |
.me-n7 |
Margin right nagative 5.5rem |
.me-n8 |
Margin right nagative 7rem |
.me-n9 |
Margin right nagative 8.5rem |
| Class name | Description |
|---|---|
.mb-0 |
Margin bottom 0 |
.mb-1 |
Margin bottom 0.25rem |
.mb-2 |
Margin bottom 0.4rem |
.mb-3 |
Margin bottom 1rem |
.mb-4 |
Margin bottom 1.5rem |
.mb-5 |
Margin bottom 3rem |
.mb-6 |
Margin bottom 4rem |
.mb-7 |
Margin bottom 5.5rem |
.mb-8 |
Margin bottom 7rem |
.mb-9 |
Margin bottom 8.5rem |
.mb-n1 |
Margin bottom nagative 0.25rem |
.mb-n2 |
Margin bottom nagative 0.4rem |
.mb-n3 |
Margin bottom nagative 1rem |
.mb-n4 |
Margin bottom nagative 1.5rem |
.mb-n5 |
Margin bottom nagative 3rem |
.mb-n6 |
Margin bottom nagative 4rem |
.mb-n7 |
Margin bottom nagative 5.5rem |
.mb-n8 |
Margin bottom nagative 7rem |
.mb-n9 |
Margin bottom nagative 8.5rem |
| Class name | Description |
|---|---|
.ms-0 |
Margin left 0 |
.ms-1 |
Margin left 0.25rem |
.ms-2 |
Margin left 0.4rem |
.ms-3 |
Margin left 1rem |
.ms-4 |
Margin left 1.5rem |
.ms-5 |
Margin left 3rem |
.ms-6 |
Margin left 4rem |
.ms-7 |
Margin left 5.5rem |
.ms-8 |
Margin left 7rem |
.ms-9 |
Margin left 8.5rem |
.ms-n1 |
Margin left nagative 0.25rem |
.ms-n2 |
Margin left nagative 0.4rem |
.ms-n3 |
Margin left nagative 1rem |
.ms-n4 |
Margin left nagative 1.5rem |
.ms-n5 |
Margin left nagative 3rem |
.ms-n6 |
Margin left nagative 4rem |
.ms-n7 |
Margin left nagative 5.5rem |
.ms-n8 |
Margin left nagative 7rem |
.ms-n9 |
Margin left nagative 8.5rem |
| Class name | Description |
|---|---|
.my-0 |
Margin top bottom 0 |
.my-1 |
Margin top bottom 0.25rem |
.my-2 |
Margin top bottom 0.4rem |
.my-3 |
Margin top bottom 1rem |
.my-4 |
Margin top bottom 1.5rem |
.my-5 |
Margin top bottom 3rem |
.my-6 |
Margin top bottom 4rem |
.my-7 |
Margin top bottom 5.5rem |
.my-8 |
Margin top bottom 7rem |
.my-9 |
Margin top bottom 8.5rem |
| Class name | Description |
|---|---|
.mx-0 |
Margin left right 0 |
.mx-1 |
Margin left right 0.25rem |
.mx-2 |
Margin left right 0.4rem |
.mx-3 |
Margin left right 1rem |
.mx-4 |
Margin left right 1.5rem |
.mx-5 |
Margin left right 3rem |
.mx-6 |
Margin left right 4rem |
.mx-7 |
Margin left right 5.5rem |
.mx-8 |
Margin left right 7rem |
.mx-9 |
Margin left right 8.5rem |
| Class name | Description |
|---|---|
.m-0 |
Margin top right bottom left 0 |
.m-1 |
Margin top right bottom left 0.25rem |
.m-2 |
Margin top right bottom left 0.4rem |
.m-3 |
Margin top right bottom left 1rem |
.m-4 |
Margin top right bottom left 1.5rem |
.m-5 |
Margin top right bottom left 3rem |
.m-6 |
Margin top right bottom left 4rem |
.m-7 |
Margin top right bottom left 5.5rem |
.m-8 |
Margin top right bottom left 7rem |
.m-9 |
Margin top right bottom left 8.5rem |
| Class name | Description |
|---|---|
.pt-0 |
Padding top 0 |
.pt-1 |
Padding top 0.25rem |
.pt-2 |
Padding top 0.4rem |
.pt-3 |
Padding top 1rem |
.pt-4 |
Padding top 1.5rem |
.pt-5 |
Padding top 3rem |
.pt-6 |
Padding top 4rem |
.pt-7 |
Padding top 5.5rem |
.pt-8 |
Padding top 7rem |
.pt-9 |
Padding top 8.5rem |
| Class name | Description |
|---|---|
.pe-0 |
Padding right 0 |
.pe-1 |
Padding right 0.25rem |
.pe-2 |
Padding right 0.4rem |
.pe-3 |
Padding right 1rem |
.pe-4 |
Padding right 1.5rem |
.pe-5 |
Padding right 3rem |
.pe-6 |
Padding right 4rem |
.pe-7 |
Padding right 5.5rem |
.pe-8 |
Padding right 7rem |
.pe-9 |
Padding right 8.5rem |
| Class name | Description |
|---|---|
.pb-0 |
Padding bottom 0 |
.pb-1 |
Padding bottom 0.25rem |
.pb-2 |
Padding bottom 0.4rem |
.pb-3 |
Padding bottom 1rem |
.pb-4 |
Padding bottom 1.5rem |
.pb-5 |
Padding bottom 3rem |
.pb-6 |
Padding bottom 4rem |
.pb-7 |
Padding bottom 5.5rem |
.pb-8 |
Padding bottom 7rem |
.pb-9 |
Padding bottom 8.5rem |
| Class name | Description |
|---|---|
.ps-0 |
Padding left 0 |
.ps-1 |
Padding left 0.25rem |
.ps-2 |
Padding left 0.4rem |
.ps-3 |
Padding left 1rem |
.ps-4 |
Padding left 1.5rem |
.ps-5 |
Padding left 3rem |
.ps-6 |
Padding left 4rem |
.ps-7 |
Padding left 5.5rem |
.ps-8 |
Padding left 7rem |
.ps-9 |
Padding left 8.5rem |
| Class name | Description |
|---|---|
.py-0 |
Padding top bottom 0 |
.py-1 |
Padding top bottom 0.25rem |
.py-2 |
Padding top bottom 0.4rem |
.py-3 |
Padding top bottom 1rem |
.py-4 |
Padding top bottom 1.5rem |
.py-5 |
Padding top bottom 3rem |
.py-6 |
Padding top bottom 4rem |
.py-7 |
Padding top bottom 5.5rem |
.py-8 |
Padding top bottom 7rem |
.py-9 |
Padding top bottom 8.5rem |
| Class name | Description |
|---|---|
.px-0 |
Padding left right 0 |
.px-1 |
Padding left right 0.25rem |
.px-2 |
Padding left right 0.4rem |
.px-3 |
Padding left right 1rem |
.px-4 |
Padding left right 1.5rem |
.px-5 |
Padding left right 3rem |
.px-6 |
Padding left right 4rem |
.px-7 |
Padding left right 5.5rem |
.px-8 |
Padding left right 7rem |
.px-9 |
Padding left right 8.5rem |
| Class name | Description |
|---|---|
.p-0 |
Padding top right bottom left 0 |
.p-1 |
Padding top right bottom left 0.25rem |
.p-2 |
Padding top right bottom left 0.4rem |
.p-3 |
Padding top right bottom left 1rem |
.p-4 |
Padding top right bottom left 1.5rem |
.p-5 |
Padding top right bottom left 3rem |
.p-6 |
Padding top right bottom left 4rem |
.p-7 |
Padding top right bottom left 5.5rem |
.p-8 |
Padding top right bottom left 7rem |
.p-9 |
Padding top right bottom left 8.5rem |
| Class name | Description |
|---|---|
.fs-1 |
Font size 2.5rem |
.fs-2 |
Font size 2rem |
.fs-3 |
Font size 1.75rem |
.fs-4 |
Font size 1.5rem |
.fs-5 |
Font size 1.25rem |
| Class name | Description |
|---|---|
.display-1 |
Font size 6.3rem |
.display-2 |
Font size 4.5rem |
.display-3 |
Font size 4rem |
.display-4 |
Font size 3.5rem |
.display-5 |
Font size 3rem |
.display-6 |
Font size 2.5rem |
| Class name | Description |
|---|---|
.text-start |
Text align left |
.text-center |
Text align center |
.text-end |
Text align right |
Along with all Bootstrap 5 components, stokes provides more than 50+ user-friendly components with theme so by copy-pasting these components you can create new pages by yourself within minutes.
Follow the below links for Stokes Components and Bootstrap Components.
Stokes Components/Elements.Stokes provides you Swiperjs modern touch slider with some custom changes to bring the best experience and simplicity to your website.
Follow this link for different demo of Swiper Slider. Refer below snippet for swiper slider.
<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>Use the following data attributes for custom swiper slider settings.
| Attributes | Description |
|---|---|
data-slidesPerView="1" |
Slide Per View |
data-laptop-slidesPerView="1" |
Slide Per View laptop |
data-tablet-slidesPerView="1" |
Slide Per View tablet |
data-mobile-slidesPerView="1" |
Slide Per View mobile |
data-spaceBetween="20" |
Slide Space Between |
data-loop="true" |
Slide loop |
data-autoplay="true" |
Slide autoplay |
data-auto-speed="2000" |
Slide auto speed |
data-disable-on-touch="true" |
Slide disable on touch |
data-dots="true" |
Slide Dots |
data-auto-height="false" |
Slide auto height |
data-pagination="true" |
Slide pagination |
data-navigation="true" |
Slide navigation |
You can also use delays, duration and offset for your animations: data-swiper-animation="fadeInUp" data-delay="1s" data-duration="1s". Follow Animate Slider link for more slider animate styles.
| Attributes | Description |
|---|---|
bounce |
Animate bounce |
flash |
Animate flash |
pulse |
Animate pulse |
rubberBand |
Animate rubberBand |
shakeX |
Animate shakeX |
shakeY |
Animate shakeY |
headShake |
Animate headShake |
swing |
Animate swing |
tada |
Animate tada |
wobble |
Animate wobble |
jello |
Animate jello |
heartBeat |
Animate heartBeat |
backInDown |
Animate backInDown |
backInLeft |
Animate backInLeft |
backInRight |
Animate backInRight |
backInUp |
Animate backInUp |
backOutDown |
Animate backOutDown |
backOutLeft |
Animate backOutLeft |
backOutRight |
Animate backOutRight |
backOutUp |
Animate backOutUp |
bounceIn |
Animate bounceIn |
bounceInDown |
Animate bounceInDown |
bounceInLeft |
Animate bounceInLeft |
bounceInRight |
Animate bounceInRight |
bounceInUp |
Animate bounceInUp |
bounceOut |
Animate bounceOut |
bounceOutDown |
Animate bounceOutDown |
bounceOutLeft |
Animate bounceOutLeft |
bounceOutRight |
Animate bounceOutRight |
bounceOutUp |
Animate bounceOutUp |
fadeIn |
Animate fadeIn |
fadeInDown |
Animate fadeInDown |
fadeInDownBig |
Animate fadeInDownBig |
fadeInLeft |
Animate fadeInLeft |
fadeInLeft |
Animate fadeInLeft |
fadeInLeftBig |
Animate fadeInLeftBig |
fadeInRight |
Animate fadeInRight |
fadeInRightBig |
Animate fadeInRightBig |
fadeInUp |
Animate fadeInUp |
fadeInUpBig |
Animate fadeInUpBig |
fadeInTopLeft |
Animate fadeInTopLeft |
fadeInTopRight |
Animate fadeInTopRight |
fadeInBottomLeft |
Animate fadeInBottomLeft |
fadeInBottomRight |
Animate fadeInBottomRight |
fadeOut |
Animate fadeOut |
fadeOutDown |
Animate fadeOutDown |
fadeOutDownBig |
Animate fadeOutDownBig |
fadeOutLeft |
Animate fadeOutLeft |
fadeOutLeftBig |
Animate fadeOutLeftBig |
fadeOutRight |
Animate fadeOutRight |
fadeOutRightBig |
Animate fadeOutRightBig |
fadeOutUp |
Animate fadeOutUp |
fadeOutUpBig |
Animate fadeOutUpBig |
fadeOutTopLeft |
Animate fadeOutTopLeft |
fadeOutTopRight |
Animate fadeOutTopRight |
fadeOutBottomRight |
Animate fadeOutBottomRight |
fadeOutBottomLeft |
Animate fadeOutBottomLeft |
flip |
Animate flip |
flipInX |
Animate flipInX |
flipInY |
Animate flipInY |
flipOutX |
Animate flipOutX |
flipOutY |
Animate flipOutY |
lightSpeedInRight |
Animate lightSpeedInRight |
lightSpeedInLeft |
Animate lightSpeedInLeft |
lightSpeedOutRight |
Animate lightSpeedOutRight |
lightSpeedOutLeft |
Animate lightSpeedOutLeft |
rotateIn |
Animate rotateIn |
rotateInDownLeft |
Animate rotateInDownLeft |
rotateInDownRight |
Animate rotateInDownRight |
rotateInUpLeft |
Animate rotateInUpLeft |
rotateInUpLeft |
Animate rotateInUpLeft |
rotateOut |
Animate rotateOut |
rotateOutDownLeft |
Animate rotateOutDownLeft |
rotateOutDownRight |
Animate rotateOutDownRight |
rotateOutUpLeft |
Animate rotateOutUpLeft |
rotateOutUpRight |
Animate rotateOutUpRight |
hinge |
Animate hinge |
jackInTheBox |
Animate jackInTheBox |
rollIn |
Animate rollIn |
rollOut |
Animate rollOut |
zoomIn |
Animate zoomIn |
zoomInDown |
Animate zoomInDown |
zoomInLeft |
Animate zoomInLeft |
zoomInRight |
Animate zoomInRight |
zoomInUp |
Animate zoomInUp |
zoomOut |
Animate zoomOut |
zoomOutDown |
Animate zoomOutDown |
zoomOutLeft |
Animate zoomOutLeft |
zoomOutRight |
Animate zoomOutRight |
zoomOutUp |
Animate zoomOutUp |
slideInDown |
Animate slideInDown |
slideInLeft |
Animate slideInLeft |
slideInRight |
Animate slideInRight |
slideInUp |
Animate slideInUp |
slideOutDown |
Animate slideOutDown |
slideOutLeft |
Animate slideOutLeft |
slideOutRight |
Animate slideOutRight |
slideOutUp |
Animate slideOutUp |
The below snippet is an example of a filter of the Portfolio page.
<!--===== 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 =====-->Below snippet is the structure of the Portfolio page content with a different setting.
<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>To change your portfolio column layout and its spacing use the following classes in your template.
| Class name | Description |
|---|---|
.portfolio-column-1 |
Portfolio item 1 column |
.portfolio-column-2 |
Portfolio item 2 column |
.portfolio-column-3 |
Portfolio item 3 column |
.portfolio-column-4 |
Portfolio item 4 column |
.portfolio-column-5 |
Portfolio item 5 column |
.grid-spacing-0 |
Portfolio spacing spacing 0 |
.grid-spacing-05 |
Portfolio spacing spacing 05 |
.grid-spacing-10 |
Portfolio spacing spacing 10 |
.grid-spacing-15 |
Portfolio spacing spacing 15 |
.grid-spacing-20 |
Portfolio spacing spacing 20 |
.grid-spacing-25 |
Portfolio spacing spacing 25 |
.grid-spacing-30 |
Portfolio spacing spacing 30 |
/* ------------------------------------------------------------------------
* countdown
* ------------------------------------------------------------------------ */
var _countdown_item = $('.countdown-item');
if ( _countdown_item.length > 0 ) {
_countdown_item.countdown({
date: '12/24/2022 23:59:59'
});
}For change date in Countdown, go to countdown script in custom.js and change this date date: '12/24/2022 23:59:59'. date format 'dd/mm/YYYY H:i:s'
To display your Instagram profile posts refer following snippet code.
<!--========== 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 Variable | Description |
|---|---|
var _token = "ADD YOUR TOKEN"; |
Add your instagram access token in .js Generate instagram access token |
| HTML data attribute | Description |
|---|---|
data-total-post="6" |
Total number of instagram post display |
| Class name | Description |
|---|---|
.instafeed-col-6 |
Instagram 6 post per row |
.instafeed-cos-5 |
Instagram 5 post per row |
.instafeed-col-4 |
Instagram 4 post per row |
.instafeed-col-3 |
Instagram 3 post per row |
.instafeed-col-2 |
Instagram 2 post per row |
.instafeed-col-2 |
Instagram 2 post per row |
Stokes provides you Magnific Popup for responsive lightbox & dialog script for your gallery with a focus on performance and providing the best experience for users with any device. Follow magnific-popup link for more demo and documentation.
Refer following snippet for diffent use of Magnific Popup with settings.
<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>Stokes provides you Jarallax for the best background scrolling experience for users with any device. Refer the following snippet for applying Jarallax scrolling.
Background image jarallax
<section class="bg-fit" data-jarallax='{"speed": 0.4}' style="background-image: url(images/background/16.jpg);">
</section>Background youtube video jarallax
<section class="bg-fit" data-jarallax='{"speed": 0.4}' data-jarallax-video="www.youtube.com/watch?v=mcvqOUtcAJg">
</section>Background vimeo video jarallax
<section class="bg-fit" data-jarallax='{"speed": 0.4}' data-jarallax-video="https://player.vimeo.com/video/517962521">
</section>Background local video 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>Follow Jarallax Documents link for more details of Jarallax
Lazyload load more button content variable
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 );
In this snipet _total_page is number of pages want to load will be dynamic according to content.
And content is content you want to load in next page while click '#addContent' ADD CONTENT.
To receive mail on your own email address you need to setup your email address. To configure please open mail-config.php file from template/php/sendmail.php directory and change an e-mail address to your own - like this.
$to = 'your@email.com';Note : After submitting contact form, if you unable to find mail in inbox then check spam folder too. Sometimes, the email goes to your spam folder, so we recommend you check your spam.
While making this template we used 3rd party plugins, images, icons, fonts, etc... We really appreciate their hard work and want to thank their creators.
| Name | Link |
|---|---|
| Unsplash | https://unsplash.com/ |
| Pixel | https://www.pexels.com/ |
| Freepik | https://www.freepik.com/ |
| Nothingtochance | https://nothingtochance.co/ |
| Pixabay | https://pixabay.com/ |
| Name | Link |
|---|---|
| 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 |
Template updates will be published to add new features to templates, necessary fixes to maintain compatibility and flexibility. For this, you need to stay up to date and you have to change your files according to update log.
The changelog is be published and update with each release and lists of the updated files.