Introduction

Hey, welcome to the SHINING theme official documentation. This documentation is to help you with template’s customization. Basic HTML and CSS knowledge is required to customize this template., but should you have any questions, you can open a support ticket through a dedicated support forum or via TemplateMonster author profile.

Directory structure

Extract the zip file you received after purchase, and you would find the exact below files and folders:

  • docs
    Documentation for setting up and using the theme.
    • index.html
      Main documentation file.
  • template
    All assets and template files, used in theme
      assets
      All assets files, like CSS, Images, JS and plugins used in theme
        css
        All .css files, used in theme
      • images
        All images, used in .html files.
      • PHP
        Contains PHP files for contact form mailing functionality.
      • js
        Includes plugin's initialization file
      • vendor
        All plugins files.
    • index.html
      All .html files used in theme

Customization

Shining is a multi-page HTML template and many features that are specific to many businesses and individuals. All pages are placed in their own .html file and located in the template's root directory. All pages have access to the sample CSS and Javascript files, which are located in the CSS and JS directories. You can use Shining to set up your own way but do not change the general structure to be ready for the next update.

CSS Method - custom.css

For this use, there is a blank custom.css file in the CSS folder.

You just need to link custom.css at the end of <head> tag of each page and start adding CSS you want to add or edit. See example below:

<link rel="stylesheet" type="text/css" href="assets/css/custom.css" />

Theme Color Scheme

We put color options in the color.css file to help you easily customize colors according to your needs. You just need to link color.css at the bottom of the head tag of each page. See the example below:


<!-- Theme CSS -->
<link rel="stylesheet" type="text/css" href="assets/css/style.css" />

<!-- Theme Color CSS -->
<link rel="stylesheet" type="text/css" href="assets/css/color.css" />

You can change theme color by replacing your new HEX color code in style.css located in template/assets/css directory. Please note this is not recommended option.

Logo settings

Put the code in header as below

      <!-- Logo START -->
                <a class="navbar-brand" href="index-2.html">
                    <!-- Logo SVG Code -->
                    <svg class="navbar-brand-item" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 300 50" enable-background="new 0 0 300 50" xml:space="preserve">
                        <g class="fill-dark">
                            <path d="M26.078,44.316v-9.344c1.691,1.421,3.531,2.486,5.519,3.197c1.986,0.709,3.99,1.064,6.016,1.064
                                c1.188,0,2.224-0.105,3.11-0.321c0.885-0.214,1.624-0.512,2.22-0.89c0.594-0.38,1.036-0.827,1.328-1.344
                                c0.291-0.517,0.438-1.076,0.438-1.68c0-0.816-0.234-1.548-0.7-2.188c-0.467-0.644-1.105-1.238-1.913-1.782
                                c-0.809-0.544-1.766-1.068-2.876-1.576c-1.109-0.507-2.308-1.021-3.593-1.549c-3.271-1.361-5.708-3.025-7.313-4.993
                                c-1.606-1.966-2.41-4.341-2.41-7.125c0-2.18,0.438-4.053,1.315-5.621c0.876-1.566,2.068-2.855,3.577-3.869
                                c1.508-1.012,3.256-1.756,5.241-2.232c1.984-0.478,4.088-0.716,6.307-0.716c2.18,0,4.112,0.131,5.797,0.395
                                s3.236,0.667,4.656,1.212v8.731c-0.7-0.487-1.465-0.914-2.292-1.285c-0.827-0.37-1.679-0.677-2.555-0.92
                                c-0.877-0.242-1.748-0.424-2.614-0.54c-0.867-0.118-1.689-0.176-2.468-0.176c-1.07,0-2.045,0.102-2.921,0.307
                                c-0.877,0.205-1.615,0.491-2.219,0.86c-0.604,0.371-1.07,0.813-1.4,1.328c-0.332,0.519-0.497,1.097-0.497,1.74
                                c0,0.699,0.184,1.327,0.555,1.883c0.369,0.555,0.896,1.08,1.578,1.576c0.681,0.498,1.508,0.984,2.48,1.461
                                c0.974,0.478,2.072,0.967,3.301,1.474c1.674,0.7,3.177,1.444,4.512,2.233c1.334,0.789,2.477,1.68,3.431,2.672
                                c0.953,0.992,1.685,2.125,2.189,3.401c0.506,1.272,0.759,2.761,0.759,4.452c0,2.336-0.442,4.298-1.328,5.886
                                c-0.886,1.585-2.088,2.87-3.605,3.854c-1.519,0.984-3.286,1.688-5.3,2.115c-2.016,0.43-4.143,0.645-6.381,0.645
                                c-2.298,0-4.482-0.195-6.556-0.584C29.395,45.678,27.597,45.094,26.078,44.316z" />
                            <path d="M97.763,45.924h-9.461V28.87H70.957v17.054h-9.433V4.051h9.433v16.701h17.345V4.05h9.461V45.924L97.763,45.924z" />
                            <path d="M116.771,45.924h-9.433V4.051h9.433V45.924z" />
                            <path d="M163.958,45.924h-9.521l-17.256-26.31c-1.014-1.538-1.714-2.696-2.104-3.476h-0.116c0.154,1.479,0.233,3.736,0.233,6.774
                                v23.009h-8.906V4.051h10.162l16.613,25.49c0.762,1.148,1.461,2.288,2.104,3.418h0.117c-0.156-0.973-0.233-2.892-0.233-5.752V4.051
                                h8.905L163.958,45.924L163.958,45.924z" />
                            <path d="M182.966,45.924h-9.431V4.051h9.431V45.924z" />
                            <path d="M230.152,45.924h-9.521l-17.257-26.31c-1.012-1.538-1.714-2.696-2.104-3.476h-0.117c0.156,1.479,0.236,3.736,0.236,6.774
                                v23.009h-8.906V4.051h10.162l16.613,25.49c0.76,1.148,1.461,2.288,2.104,3.418h0.116c-0.155-0.973-0.233-2.892-0.233-5.752V4.051
                                h8.905V45.924L230.152,45.924z" />
                            <path d="M274.098,43.12c-4.087,2.355-9.168,3.532-15.242,3.532c-6.735,0-12.045-1.864-15.928-5.592
                                c-3.883-3.729-5.826-8.862-5.826-15.402c0-6.581,2.121-11.943,6.365-16.089c4.243-4.146,9.889-6.221,16.936-6.221
                                c4.438,0,8.351,0.613,11.738,1.84v8.848c-3.23-1.868-7.184-2.804-11.854-2.804c-3.913,0-7.103,1.271-9.563,3.811
                                c-2.463,2.541-3.692,5.934-3.692,10.176c0,4.303,1.104,7.633,3.313,9.985c2.211,2.355,5.191,3.533,8.95,3.533
                                c2.259,0,4.05-0.319,5.372-0.964v-8.176h-8.38v-7.533h17.812V43.12L274.098,43.12z" />
                        </g>
                        <path class="fill-primary" d="M20.807,44.318v-9.344c1.692,1.42,3.533,2.486,5.521,3.195c1.985,0.712,3.99,1.066,6.015,1.066
                            c1.188,0,2.225-0.106,3.111-0.32c0.884-0.214,1.624-0.514,2.219-0.893c0.593-0.377,1.036-0.824,1.328-1.342
                            c0.291-0.518,0.438-1.076,0.438-1.68c0-0.818-0.234-1.548-0.7-2.191c-0.467-0.643-1.104-1.234-1.913-1.779
                            c-0.81-0.545-1.768-1.069-2.876-1.577c-1.11-0.507-2.309-1.021-3.592-1.548c-3.271-1.362-5.709-3.025-7.314-4.993
                            c-1.605-1.966-2.408-4.341-2.408-7.124c0-2.18,0.438-4.054,1.313-5.622c0.876-1.565,2.067-2.855,3.577-3.87
                            c1.509-1.012,3.257-1.755,5.241-2.233c1.985-0.478,4.089-0.714,6.307-0.714c2.181,0,4.112,0.131,5.798,0.395
                            c1.684,0.263,3.236,0.666,4.656,1.212v8.731c-0.701-0.487-1.465-0.915-2.292-1.285s-1.68-0.676-2.557-0.919
                            s-1.747-0.424-2.613-0.542c-0.865-0.117-1.688-0.175-2.467-0.175c-1.07,0-2.044,0.101-2.921,0.306s-1.615,0.491-2.22,0.86
                            c-0.603,0.37-1.07,0.813-1.401,1.327c-0.329,0.519-0.495,1.096-0.495,1.738c0,0.702,0.185,1.328,0.556,1.884
                            c0.369,0.556,0.894,1.08,1.577,1.578c0.681,0.497,1.508,0.983,2.48,1.459c0.975,0.478,2.072,0.969,3.299,1.476
                            c1.677,0.7,3.18,1.444,4.514,2.233c1.333,0.788,2.478,1.681,3.431,2.67c0.953,0.993,1.685,2.128,2.19,3.401
                            c0.506,1.275,0.759,2.759,0.759,4.453c0,2.336-0.442,4.297-1.328,5.884c-0.886,1.588-2.088,2.872-3.606,3.854
                            s-3.284,1.689-5.299,2.115c-2.014,0.432-4.142,0.645-6.379,0.645c-2.298,0-4.482-0.194-6.556-0.584
                            C24.123,45.682,22.325,45.097,20.807,44.318z" />
                    </svg>
                </a>
                <!-- Logo END -->

Or image file. Like this:

<!-- Logo START -->
<a class="navbar-brand" href="index.html">
    <!-- Logo item -->
    <img class="navbar-brand-item" src="assets/images/logo-white.png" alt="Logo">
</a>
<!-- Logo END -->

Fonts

Shining is using Google fonts, if you want to change Google fonts, go to Google fonts, select the fonts you want and use the generated code. Then look at the top of the page and you will change this tag:

<!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Dawning+of+a+New+Day&family=Lato:wght@400;500;700&family=Poppins:wght@400;700;900&display=swap" rel="stylesheet">

Changelog

Version 1.0.0 — 09 December, 2021

  • — Initial release

Preloader

You integrate the code according to the example below to display the Preloader

<!-- Pre loader -->
<div class="preloader">
    <div class="preloader-item">
        <div class="spinner-grow text-primary"></div>
    </div>
</div>

Or include text in preloader. Like this:

<!-- Pre loader -->
<div class="preloader">
    <div class="preloader-item">
        <div class="spinner-grow text-primary"></div>
        <p class="mt-3">Create projects quickly with Shining!</p>
    </div>
</div>

Note: Pre-loader are enabled by default. You can disable the preloader by removing the above code from all HTML files.

Contact Form

Change these details in the contact form to work, simply go to assets/php/mail.php file. Look out for Username = "youremail@gmail.com"; and replace your email there,Look out for Password = "your email password"; and replace your email there.

Google map

Shining uses types of Google maps that you can easily set up. Simple Google map with iFrame and you can custom Google map by remove width and add .w-100 class to iFrame, to make map responsive across all devices. For grayscale map add .grayscale class to iFrame.

Follow below steps to create Google map iFrame.

  • Go to Google Maps
  • Type in your address in search bar and select your location from searched results or click on your location pin on the map
  • If you need to choose a satellite view, then select a satellite view box before going to the next step. And for street view, drag a little yellow human icon onto map.
  • Click on the Hamburger menu icon and click on Share or embed map
  • In popup, select Embed a map and copy HTML iFrame code
  • Past it in your HTML

See example of iFrame code below:

<iframe class="w-100" height="400" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3152.5808674826326!2d-122.41982528483983!3d37.79986121848912!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808580ef39c7f0b1%3A0xa5a806cf2351a7ed!2s5%20Leavenworth%20St%2C%20San%20Francisco%2C%20CA%2094133%2C%20Hoa%20K%E1%BB%B3!5e0!3m2!1svi!2s!4v1633145716968!5m2!1svi!2s"  style="border:0;" aria-hidden="false" tabindex="0"></iframe>

Headings

Shining provide title options that help you apply content appropriately. List of title classes and descriptions you see below:

Heading styles

Heading with alt font

Heading

Heading

Heading

Heading Style

<span class="font-alt display-8 fw-normal">Heading with alt font</span>
<h2 class="display-6 text-primary">Heading</h2>
<h2 class="display-6 text-dark">Heading</h2>
<div class="bg-dark p-4 mb-3">
    <h2 class="display-6 text-light">Heading</h2>
</div>
<h2 class="display-6 text-dark">Heading <span class="bg-primary text-white py-1">Style</span></h2>

Heading strokes styles

Heading

Heading

Heading

Heading

Heading hover fill

Heading with anchor

Stroke

Stroke md

Stroke lg

<h2 class="display-6 text-primary-stroke">Heading</h2>
<h2 class="display-6 text-dark-stroke">Heading</h2>
<h2 class="display-6 text-light-stroke">Heading</h2>
<div class="bg-dark p-4 mb-3">
    <h2 class="display-6 text-white-stroke">Heading</h2>
</div>
<h2 class="display-6 text-dark-stroke text-hover-fill">Heading hover fill</h2>
<a href="#" class="h2 display-6 text-dark-stroke">Heading with anchor</a>
<h2 class="display-6 text-dark-stroke">Stroke</h2>
<h2 class="display-6 text-dark-stroke text-stroke-md">Stroke md</h2>
<h2 class="display-6 text-dark-stroke text-stroke-lg">Stroke lg</h2>

Heading with shadow and strokes styles

Heading

Heading

Heading

Heading

Heading

Heading

Heading

<h2 class="display-5 text-primary-stroke text-light-shadow">Heading</h2>
<h2 class="display-5 text-primary-stroke text-dark-shadow">Heading</h2>
<h2 class="display-5 text-dark-stroke text-dark-shadow">Heading</h2>
<h2 class="display-5 text-dark-stroke text-primary-shadow">Heading</h2>
<h2 class="display-5 text-white-stroke text-primary-shadow">Heading</h2>
<h2 class="display-5 text-dark-stroke text-light-shadow">Heading</h2>
<div class="bg-dark p-4">
    <h2 class="display-5 text-primary-stroke text-white-shadow">Heading</h2>
</div>

Sticky element

You can add .sticky-element to additional classes of sticky features:

You will easily add sticky any element into of your website , add data-sticky-container attribute to the parent.Then add the data-sticky attribute to your element class according to the code example below: 


<section>
    <div class="container" data-sticky-container>
        <div class="row">
            <!-- Sidebar START -->
            <div class="col-md-4">
                <div data-sticky data-margin-top="80" data-sticky-for="768">
                    Sidebar Content here
                </div>
            </div>
            <!-- Sidebar END -->

            <div class="col-md-8">
                ...
            </div>

        </div>
    </div>
</section>

Available options:

Option Type Default Description
data-sticky-wrap boolean false When it's true sticky element is wrapped in <span></span> which has sticky element dimensions. Prevents content from "jumping".
data-margin-top number 0 Margin between page and sticky element when scrolled
data-sticky-for number 0 Breakpoint which when is bigger than viewport width, sticky is activated and when is smaller, then sticky is destroyed
data-sticky-class string null Class added to sticky element when it is stuck

Required plugin

Copy-paste the following script at the end of your page after bootstrap.bundle.min.js to enable it.


<script src="assets/vendor/sticky-js/sticky.min.js"></script>

Sticky Footer

Using Sticky Footer, put the .footer-sticky class in Footer as below. 


<!-- =======================
Footer START -->
<footer class="bg-dark footer-sticky pt-6">
    <div class="container">
        <div class="row">
            ....
        </div>
    </div>
</footer>
<!-- =======================
Footer END -->

Utility classes

We have created some really useful support classes for you, you can view and use on demand:

Utility class name Description Available options
.text-primary-hover Text primary color on hover -
.font-base Font family base -
.font-heading Font family heading -
.font-alt Font family alt -
.h-### Utilities different height in Screen sizes .h-400
.h-500
.h-600
.h-700
.h-800
.h-900
.z-index-# Set z-index .z-index-9
.z-index-99
.z-index-n9 Set z-index in negative -
.transpire-layer Animation layer on image or any section on hover .transpire-bottom-end
.transpire-rotate-in
.transpire-top-end
.transpire-top-start
.transpire-bottom-start
.transpire-bottom
.transpire-top
.transpire-end
.transpire-start
.blocks-main..,.blocks-add-.. Animation block on image or any section on hover. You can refer to the :here .blocks-main-magnifier-bottom-left
.blocks-add-magnifier-description-bottom-left
...
.zoom-# Zoom elements by using this class .zoom-1
.zoom-2
.zoom-3
.zoom-4
.zoom-n# Zoom negative elements .zoom-n1
.zoom-n2
.zoom-n3
.zoom-n4
.zoom-hover Scale zoom on hover -
.up-hover Scale up on hover -
.grayscale Grayscale filter on image or any section on hover -
.opacity-# Set opacity to elements .opacity-1
.opacity-2
.opacity-3
.opacity-4
.opacity-5
.opacity-6
.opacity-7
.opacity-8
.opacity-9
.blur-# Blur elements .blur-1
.blur-2
.blur-3
.rotate-# Rotate elements .rotate-10
.rotate-90
.rotate-270
.blink-animation Set blink animation to any element -
.info-style# Animation block on text or any section on hover .info-style1
.info-style2

Or You can also use Bootstrap includes dozens of utility classes for showing, hiding, aligning, and spacing content.

Bootstrap utilities

Animations AOS - Animate on scroll library

You will easily add animations to any element of your website. See the code examples below


<div class="aos" 
data-aos="fade-up" 
data-aos-delay="300" 
data-aos-duration="1000" 
data-aos-easing="ease-in-out"
data-aos-offset="200"
data-aos-once="false">
...
</div>

The animation can be set to:

Fade animations Flip animations Slide animations Zoom animations
fade flip-up slide-up zoom-in
fade-up flip-down slide-down zoom-in-up
fade-down flip-left slide-left zoom-in-down
fade-left flip-right slide-right zoom-in-left
fade-right zoom-in-right
fade-up-right zoom-out
fade-up-left zoom-out-up
fade-down-right zoom-out-down
fade-down-left zoom-out-left
fade-down-left zoom-out-right

You can choose one of these timing function to animate elements nicely:

linear ease ease-in ease-out ease-in-out
ease-in-back ease-out-back ease-in-out-back ease-in-sine ease-out-sine
ease-in-out-sine ease-in-quad ease-out-quad ease-in-out-quad ease-in-cubic
ease-out-cubic ease-in-out-cubic ease-in-quart ease-out-quart ease-in-out-quart

Required plugin

Copy-paste the following stylesheet <link> into your <head> before style.css file to load the CSS.


<link rel="stylesheet" type="text/css" href="assets/vendor/aos/aos.css">

You just need to link aos.js at the bottom of the tag page bootstrap.bundle.min.js.


<script src="assets/vendor/aos/aos.js"></script>

Tiny slider

Shining uses the plugin Tiny slider to handle all slider content including image sliders and text sliders depending on content position. The appearance of the slider will depend on the class you used to initialize it. The sliding elements are always structured like this:


<div class="tiny-slider">
  <div class="tiny-slider-inner">
    <!-- Slider items -->
    <div class="item"> <img src="assets/images/about/01.jpg" alt=""> </div>
    <div class="item"> <img src="assets/images/about/02.jpg" alt=""> </div>
    <div class="item"> <img src="assets/images/about/03.jpg" alt=""> </div>
  </div>
</div>

The animation can be set to:

Data Attributes name Description Available options
data-items="1" Slider items in all device. Numbers (1 2 3 4 5 6 ....)
data-items-xs="2" Slider items in extra small device. start to 575px Numbers (1 2 3 4 5 6 ....)
data-items-sm="3" Slider items in small device. 576px to 767px Numbers (1 2 3 4 5 6 ....)
data-items-md="4" Slider items in medium device. 768px to 991px Numbers (1 2 3 4 5 6 ....)
data-items-lg="5" Slider items in large device. 992px to 1199px Numbers (1 2 3 4 5 6 ....)
data-items-xl="6" Slider items in extra large device. 1200 to end Numbers (1 2 3 4 5 6 ....)
data-dots="false" Enable or disable dots Boolean (true or false)
data-arrow="true" Enable or disable arrow Boolean (true or false)
data-mode="false" With carousel everything slides to the side, while gallery uses fade animations and changes all slides at once. "carousel" | "gallery"/td>
data-axis="false" The axis of the slider. "horizontal" | "vertical"
data-autoplay="true" Slider auto play enable or disable Boolean (true or false)
data-autoplaytime="2000" Slider next slide time in MS Number MS
data-speed="1000" Slider next slide speed (AKA: smartSpeed) in MS Number MS
data-gutter="30" Margin between 2 slider items in pixel Number in px
data-edge="30" Space on the outside (in "px"). Number in px
data-loop="true" Slider loop enable or disable Boolean (true or false)
data-autowidth="true" If true, the width of each slide will be its natural width as a inline-block box. Boolean (true or false)
data-autoheight="true" Height of slider container changes according to each slide's height. Boolean (true or false)
data-hoverpause="true" Slider pause on mouse hover. Boolean (true or false)
data-drag="true" Changing slides by dragging them. Boolean (true or false)
data-touch="true" Activates input detection for touch devices. Boolean (true or false)
data-rewind="true" Moves to the opposite edge when reaching the first or last slide. Boolean (true or false)

See example of how to use Tiny Slider data attributes:


<div class="tiny-slider">
  <div class="tiny-slider-inner" data-arrow="true" data-dots="false" data-items-xl="6" data-items-lg="5" data-items-md="4" data-items-sm="3" data-items-xs="2" >
    <!-- Slider items -->
    <div class="item"> <img src="assets/images/about/01.jpg" alt=""> </div>
    <div class="item"> <img src="assets/images/about/02.jpg" alt=""> </div>
    <div class="item"> <img src="assets/images/about/03.jpg" alt=""> </div>
  </div>
</div>

Isotope

You integrate the code according to the example below to display the Isotope:


<section class="pt-0">
            <div class="container">
                <!-- Nav Filters -->
                <div class="row">
                    <div class="col-12">
                        <div class="grid-menu" data-target=".grid-container">
                            <ul class="nav nav-pills justify-content-start mb-5">
                                <li class="nav-item"> <a data-filter="*" class="nav-link active">All</a> </li>
                                <li class="nav-item"> <a data-filter=".technology" class="nav-link">Technology</a> </li>
                                <li class="nav-item"> <a data-filter=".art" class="nav-link">Art</a> </li>
                                <li class="nav-item"> <a data-filter=".design" class="nav-link">Design</a> </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="row grid-container" data-isotope='{"layoutMode": "fitRows"}'>
                    <!-- Card item START -->
                    <div class="col-sm-6 col-lg-4 grid-item technology art mb-30">
                        <a href="#" class="card blocks">
                            <!-- Card Image -->
                            <div class="card-image">
                                ...
                            </div>
                        </a>
                    </div>
                    <!-- Card item END -->
                    <!-- Card item START -->
                    <div class="col-sm-6 col-lg-4 grid-item art design mb-30">
                        <a href="#" class="card blocks">
                            <!-- Card Image -->
                            <div class="card-image">
                                ...
                            </div>
                        </a>
                    </div>
                    <!-- Card item END -->
                    <!-- Card item START -->
                    <div class="col-sm-6 col-lg-4 grid-item technology design mb-30">
                        <a href="#" class="card blocks">
                            <!-- Card Image -->
                            <div class="card-image">
                                ...
                            </div>
                        </a>
                    </div>
                    <!-- Card item END -->
                    ...
                </div><!-- row END -->
            </div>
        </section>

Required plugin

Copy-paste the following script at the end of your page after bootstrap.bundle.min.js to enable it.


    <script src="assets/vendor/isotope/isotope.pkgd.min.js"></script>
    <script src="assets/vendor/imagesLoaded/imagesloaded.js"></script>

Jarallax

You integrate the code according to the example below to display the Jarallax


<section class="bg-parallax bg-dark-0_5 pb-9" style="background:url(assets/images/bg/12.jpg) no-repeat center center; background-size:cover;">
            <div class="container">
                <div class="row position-relative">
                    <!-- Title -->
                    <div class="col-sm-8 mb-3 mx-auto text-center">
                        <h2 class="display-5 mb-5 text-light-stroke">Testimonials</h2>
                    </div>
                    <!-- Testimonials -->
                    <div class="col-md-10 mx-auto text-center">
                        ...
                    </div>
                </div><!-- row END -->
            </div>
        </section>

Required plugin

Copy-paste the following script at the end of your page after bootstrap.bundle.min.js to enable it.


<script src="assets/vendor/jarallax/jarallax.min.js"></script>