FAQ

Free HTML5 Templates Online FAQ

1. How to install?

  1. Download a zip file.
  2. Unzip and Make a backup copy.
    • templatename folder
  3. Upload the contents of the templatename folder while maintaining the existing folder hierarchy.

2. General Structure

HTML Structure
  • HTML Structure is a responsive layout based on Bootstrap v4 Flexbox Grid System.
  • The Menu Structure is Bootstrap Menu System.
  • Basically, HTML5 Code is W3C Valid Code.
CSS Structure
  • The main css file is "css/style.css".
  • Basically, CSS3 Code is W3C Valid Code.
JavaScript Structure
  • If you change JS settings, please change "js/custom.js".
Optimizing Images
  • Optimizing your images will reduce page loading times.
  • Photoshop: File > Save for Web & Devices > JPEG Medium
  • Free website: https://tinypng.com/

3. Bootstrap v4 Flexbox Grid System

General Structure
col-lg-12
col-lg-8
col-lg-4
col-lg-6
col-lg-6
col-lg-4
col-lg-4
col-lg-4
col-lg-3
col-lg-3
col-lg-3
col-lg-3
col-lg-1
col-lg-1
col-lg-1
col-lg-1
col-lg-1
col-lg-1
col-lg-1
col-lg-1
col-lg-1
col-lg-1
col-lg-1
col-lg-1
How to use
<div class="container">
  <div class="row">
    <div class="col-lg-6"></div><!-- end .col-lg-6 -->
    <div class="col-lg-6"></div><!-- end .col-lg-6 -->
  </div><!-- .row -->
</div><!-- .container -->
Breakpoint
   col-xl- :  1200px~ Extra large devices (large desktops, 1200px and up)
   col-lg- :  992px~  Large devices (desktops, 992px and up)
   col-md- :  768px~  Medium devices (tablets, 768px and up)
   col-sm- :  576px~  Small devices (landscape phones, 576px and up)
   col-xs- :          Extra small devices (portrait phones, less than 576px)
Example: You can set a single or multiple breakpoints
<div class="col-lg-4"></div>
// 1200px 4columns, 992px 4columns, 768px 12columns, 576px 12columns

<div class="col-md-4"></div>
// 1200px 4columns, 992px 4columns, 768px 4columns, 576px 12columns

<div class="col-lg-4 col-md-6"></div>
// 1200px 4columns, 992px 4columns, 768px 6columns, 576px 12columns

<div class="col-xl-3 col-lg-4 col-md-6 col-sm-6"></div>
// 1200px 3columns, 992px 4columns, 768px 6columns, 576px 6columns

4. How to change Typing animation Text?

  1. Open "js/custom.js".
  2. Change to your favorite words.
  3. You can check the all words in typography.html.
    /* ----------------------------------------------------------------------
        Typing Animation Text
    ---------------------------------------------------------------------- */

    $('.typing').typed({
        strings: ['Responsive', 'Multipurpose', 'Clean', 'Modern'],
        typeSpeed: 100,
        backDelay: 500,
        loop: true
    });

5. How to change Dropdown Menu Animation?

  1. Open "css/style.css".
  2. Change the following code.
FadeIn
.nav-item > .dropdown-menu {
	-webkit-transform: translate3d(0, 0px, 0);
	transform: translate3d(0, 0px, 0);
}

FadeInUp
.nav-item > .dropdown-menu {
	-webkit-transform: translate3d(0, 50px, 0);
	transform: translate3d(0, 50px, 0);
}
  

6. How to customize Hero Slider(Static) Caption? Hero Slider & Hero Static

  1. Open "index.html".
  2. Change the Caption and Options.
Example: Hero Static - Fullwidth
  <!-- Hero Static
================================================== -->
  <div class="dsct-hero-static">
    <div class="cell">
      <div class="jarallax jarallax600 overlay-black">
        <img class="jarallax-img" src="images/slider/static600.jpg" alt="">
        <div class="dsct-container">
          <div class="dsct-position" data-top="240" data-left="0" data-right="0" data-zindex="10">
            <div class="caption-wrap">
              <div class="large-white dsct-fadeIn delay10">CAPTION</div>
            <!-- end .caption-wrap -->
          </div>
          <!-- end .dsct-position -->
        </div>
        <!-- end .dsct-container -->
      </div>
      <!-- end .jarallax -->
    </div>
    <!-- end .cell -->
  </div>
  <!-- end .dsct-hero-static -->
Example: Hero Static - Fullscreen
  <!-- Hero Static
================================================== -->
  <div class="dsct-hero-static dsct1080">
    <div class="cell">
      <div class="jarallax jarallax1080 overlay-black">
        <img class="jarallax-img" src="images/slider/static1080.jpg" alt="">
        <div class="dsct-container">
          <div class="dsct-position" data-top="240" data-left="0" data-right="0" data-zindex="10">
            <div class="caption-wrap">
              <div class="large-white dsct-fadeIn delay10">CAPTION</div>
            <!-- end .caption-wrap -->
          </div>
          <!-- end .dsct-position -->
        </div>
        <!-- end .dsct-container -->
      </div>
      <!-- end .jarallax -->
    </div>
    <!-- end .cell -->
  </div>
  <!-- end .dsct-hero-static -->
Options ALL ITEMS


Background Image Overlay:
  overlay-black
  overlay-white
  overlay-theme

Caption Position:
  data-top="100"                 // This means "top: 100". You can also use "10%" etc.
  data-bottom="100"              // This means "bottom: 100". You can also use "10%" etc.
  data-left="100"                // This means "left: 100". You can also use "10%" etc.
  data-right="100"               // This means "right: 100". You can also use "10%" etc.
  data-left="0" data-right="0"   // This means Center Position.
  data-zindex="10"               // This means "z-index: 10".
  mobile-hidden                  // Image is hidden in mobile to add this class.

Caption
  large-white
  medium-white
  small-white
  large-black
  medium-black
  small-black
  large-theme
  medium-theme
  small-theme

Caption Animation
  dsct-fadeIn
  dsct-fadeInUp
  dsct-fadeInDown
  dsct-fadeInLeft
  dsct-fadeInRight
  dsct-fadeInUpSmall
  dsct-fadeInDownSmall
  dsct-fadeInLeftSmall
  dsct-fadeInRightSmall
  dsct-bounce
  dsct-bounceIn
  dsct-bounceInUp
  dsct-bounceInDown
  dsct-bounceInLeft
  dsct-bounceInRight

Caption Animation Delay:
  delay1     // 0.1s
   --
  delay30   // 30.0s

7. How to change Volume of Hero Static Video? Hero Static

  1. Open "js/custom.js".
  2. Change the following code.
    // Jarallax
    $('.jarallax').jarallax({
        speed: 0.8,
        videoStartTime: 0,
        videoVolume: 0  // from 0 to 100
    });

    $('.jarallax-html5video').jarallax({
        speed: 0.8,
        videoStartTime: 0,
        videoPlayOnlyVisible: false,
        videoVolume: 0  // from 0 to 100
    });

1. How to change Google Maps Location? New

Google Maps Platform

Beginning June 11 2018, you'll need a valid API key and a Google Cloud Platform billing account.
https://mapsplatform.googleblog.com/2018/05/introducing-google-maps-platform.html

This Template uses an Embled code.
It's not high functionality, but you don't need a valid API key and a Google Cloud Platform billing account.

Step
  1. Go to the Google Maps and Get the Embed code.
  2. Open "contact.html" and Copy & Paste the Embed code.
Google Maps
contact.html

2. How to change Google Maps height? New

  1. Open "contact.html".
  2. Change the following code.
contact.html
<div class="map">         // Height 600px
<div class="map map100">  // Height 100px
<div class="map map200">  // Height 200px
<div class="map map300">  // Height 300px
<div class="map map400">  // Height 400px
<div class="map map500">  // Height 500px
<div class="map map600">  // Height 600px
<div class="map map700">  // Height 700px
<div class="map map800">  // Height 800px
<div class="map map900">  // Height 900px
<div class="map map1000">  // Height 1000px
<div class="map map1080">  // Height 1080px
  

3. How to change Google Fonts?

  1. Go to the Google Fonts .
  2. Follow the steps on the linked pages to get the codes.
Example
All html files
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800" rel="stylesheet">

css/style.css
body { font-family: 'Open Sans', sans-serif; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: 'Open Sans', sans-serif; }
  

1. About Support

About Support
  • Basically, The free HTML5 Tepmplate is not supported.
Support includes
  • Fixing a bug, if any.
Support does not include
  • Adding new feature and plugin.
  • Helping with personal customizing.

2. Other FAQ

Not work FAQ
  • This is a HTML5 Template. This does not work with WordPress.
  • Some Plugins (Jarallax, Ripples, CSS Hover Effect) don't work under IE10.
  • If you use Dreamweaver, please remove CSS links temporarily. It will reduce the DW loading time. The cause is hyphens of class names.

3. Credits

Free HTML5 Templates Features

jQuery v3 & Bootstrap v4

Template is built with jQuery v3 and Bootstrap v4 that are the latest version, mobile-first, and compatible with the latest Major browser.
It is well-structured and customizable by combining Bootstrap grid system with original design Components.

Valid Code

The html files are W3C Valid.
The css files are W3C Valid.
The custom.js is Valid Javascript.
jQuery Migrate issues are also fixed that can be checked by Browser developer tool of F12.

Well Documented

You can check online FAQ.
It is organized by three categories of General, Google Services, and Support.

Premium HTML5 Templates Online FAQ

1. How to install?

  1. Download a zip file.
  2. Unzip and Make a backup copy.
    • templatename folder
    • documentation folder
  3. Upload the contents of the templatename folder while maintaining the existing folder hierarchy.

2. General Structure

HTML Structure
  • HTML Structure is a responsive layout based on Bootstrap v4 Flexbox Grid System.
  • The Menu Structure is Bootstrap Menu System.
  • Basically, HTML5 Code is W3C Valid Code.
CSS Structure
  • The main css file is "css/style.css".
  • Basically, CSS3 Code is W3C Valid Code.
JavaScript Structure
  • If you change JS settings, please change "js/custom.js".
Optimizing Images
  • Optimizing your images will reduce page loading times.
  • Photoshop: File > Save for Web & Devices > JPEG Medium
  • Free website: https://tinypng.com/

3. Bootstrap v4 Flexbox Grid System

General Structure
col-lg-12
col-lg-8
col-lg-4
col-lg-6
col-lg-6
col-lg-4
col-lg-4
col-lg-4
col-lg-3
col-lg-3
col-lg-3
col-lg-3
col-lg-1
col-lg-1
col-lg-1
col-lg-1
col-lg-1
col-lg-1
col-lg-1
col-lg-1
col-lg-1
col-lg-1
col-lg-1
col-lg-1
How to use
<div class="container">
  <div class="row">
    <div class="col-lg-6"></div><!-- end .col-lg-6 -->
    <div class="col-lg-6"></div><!-- end .col-lg-6 -->
  </div><!-- .row -->
</div><!-- .container -->
Breakpoint
   col-xl- :  1200px~ Extra large devices (large desktops, 1200px and up)
   col-lg- :  992px~  Large devices (desktops, 992px and up)
   col-md- :  768px~  Medium devices (tablets, 768px and up)
   col-sm- :  576px~  Small devices (landscape phones, 576px and up)
   col-xs- :          Extra small devices (portrait phones, less than 576px)
Example: You can set a single or multiple breakpoints
<div class="col-lg-4"></div>
// 1200px 4columns, 992px 4columns, 768px 12columns, 576px 12columns

<div class="col-md-4"></div>
// 1200px 4columns, 992px 4columns, 768px 4columns, 576px 12columns

<div class="col-lg-4 col-md-6"></div>
// 1200px 4columns, 992px 4columns, 768px 6columns, 576px 12columns

<div class="col-xl-3 col-lg-4 col-md-6 col-sm-6"></div>
// 1200px 3columns, 992px 4columns, 768px 6columns, 576px 6columns

4. How to change Typing animation Text?

  1. Open "js/custom.js".
  2. Change to your favorite words.
  3. You can check the all words in typography.html.
    /* ----------------------------------------------------------------------
        Typing Animation Text
    ---------------------------------------------------------------------- */

    $('.typing').typed({
        strings: ['Responsive', 'Multipurpose', 'Clean', 'Modern'],
        typeSpeed: 100,
        backDelay: 500,
        loop: true
    });

5. How to change Dropdown Menu Animation?

  1. Open "css/style.css".
  2. Change the following code.
FadeIn
.nav-item > .dropdown-menu {
	-webkit-transform: translate3d(0, 0px, 0);
	transform: translate3d(0, 0px, 0);
}

FadeInUp
.nav-item > .dropdown-menu {
	-webkit-transform: translate3d(0, 50px, 0);
	transform: translate3d(0, 50px, 0);
}
  

1. How to change Filtering Settings of Isotope? Isotope

1. How to set a multiple filtering class
  1. Open Portfolio html files.
  2. You can set a single or multiple "Filtering Class".
Example

<div class="grid-3 element-item filtering1 filtering2">
  
2. How to set a Group of popup image
  1. Open Portfolio html files.
  2. Change the following code.
Example

<a class="nivo-lightbox" href="images/portfolio/1.jpg" data-lightbox-gallery="gallery1">
  

2. How to add new Infinite Scroll page? Infinite Scroll

You can add new Infinite Scroll page
  1. Copy Infinite html Page and Rename as follows.
  2. Change the Load More URL in html files.
Example

portfolio4-infinite.html
portfolio4-infinite-page2.html
portfolio4-infinite-page3.html
portfolio4-infinite-page4.html
portfolio4-infinite-page5.html
portfolio4-infinite-page6.html
portfolio4-infinite-page7.html
portfolio4-infinite-page8.html
portfolio4-infinite-page9.html
portfolio4-infinite-page10.html
  

<div class="pagination-center">
  <a class="btn btn-theme view-more-button pagination-next" href="portfolio4-infinite-page5.html">Load More<span><i class="fa fa-refresh"></i></span></a>
</div>
<!-- end .pagination-center -->
  

3. How to change "Load More button" to "Auto loading" of Infinite Scroll? Infinite Scroll

How to change the "Load More Button" to "Automatic Loading"
  1. Open Infinite html files.
  2. Replace the following A code with B code.
  3. Open "js/custom.js".
  4. Replace the following C code with D code.
A) html - Load More Button

<div class="pagination-center">
  <a class="btn btn-theme view-more-button pagination-next" href="page-infinite-page2.html">Load More<span><i class="fa fa-refresh"></i></span></a>
</div>
<!-- end .pagination-center -->

B) html - Automatic Loading

<div class="pagination-hide">
  <a class="btn btn-theme view-more-button pagination-next" href="page-infinite-page2.html">Load More<span><i class="fa fa-refresh"></i></span></a>
</div>
<!-- end .pagination-hide -->

C) js/custom.js - Load More Button

button: ".view-more-button",  // button
scrollThreshold: false,       // button

D) js/custom.js - Automatic Loading

hideNav: ".pagination-hide",   // auto
scrollThreshold: 400,          // auto

4. How to customize Hero Slider(Static) Caption? Hero Slider & Hero Static

  1. Open "index.html".
  2. Change the Caption and Options.
Example: Hero Static - Fullwidth Outdoor
  <!-- Hero Static
================================================== -->
  <div class="flkty-hero-static">
    <div class="cell">
      <div class="jarallax jarallax600 overlay-black">
        <img class="jarallax-img" src="images/slider/static600.jpg" alt="">
        <div class="flkty-container">
          <div class="flkty-position" data-top="240" data-left="0" data-right="0" data-zindex="10">
            <div class="caption-wrap">
              <div class="large-white flkty-fadeIn delay10">CAPTION</div>
            <!-- end .caption-wrap -->
          </div>
          <!-- end .flkty-position -->
        </div>
        <!-- end .flkty-container -->
      </div>
      <!-- end .jarallax -->
    </div>
    <!-- end .cell -->
  </div>
  <!-- end .flkty-hero-static -->
Example: Hero Static - Fullscreen Bloom
  <!-- Hero Static
================================================== -->
  <div class="flkty-hero-static flkty1080">
    <div class="cell">
      <div class="jarallax jarallax1080 overlay-black">
        <img class="jarallax-img" src="images/slider/static1080.jpg" alt="">
        <div class="flkty-container">
          <div class="flkty-position" data-top="240" data-left="0" data-right="0" data-zindex="10">
            <div class="caption-wrap">
              <div class="large-white flkty-fadeIn delay10">CAPTION</div>
            <!-- end .caption-wrap -->
          </div>
          <!-- end .flkty-position -->
        </div>
        <!-- end .flkty-container -->
      </div>
      <!-- end .jarallax -->
    </div>
    <!-- end .cell -->
  </div>
  <!-- end .flkty-hero-static -->
Example: Hero Slider - Fullwidth Shell, Resort, Garden, Cafe, Classic
  <!-- Hero Slider
================================================== -->
  <div class="flkty-hero-slider bg-fadein">
    <div class="cell">
      <div class="jarallax jarallax600 overlay-black">
        <img class="jarallax-img" src="images/slider/slider600-1.jpg" alt="">
        <div class="flkty-container">
          <div class="flkty-position" data-top="240" data-left="0" data-right="0" data-zindex="10">
            <div class="caption-wrap">
              <div class="large-white flkty-fadeIn delay10">CAPTION</div>
            <!-- end .caption-wrap -->
          </div>
          <!-- end .flkty-position -->
        </div>
        <!-- end .flkty-container -->
      </div>
      <!-- end .jarallax -->
    </div>
    <!-- end .cell -->
Example: Hero Slider - Fullscreen Decors
  <!-- Hero Slider
================================================== -->
  <div class="flkty-hero-slider flkty1080 bg-fadein">
    <div class="cell">
      <div class="jarallax jarallax1080 overlay-black">
        <img class="jarallax-img" src="images/slider/slider1080-1.jpg" alt="">
        <div class="flkty-container">
          <div class="flkty-position" data-top="240" data-left="0" data-right="0" data-zindex="10">
            <div class="caption-wrap">
              <div class="large-white flkty-fadeIn delay10">CAPTION</div>
            <!-- end .caption-wrap -->
          </div>
          <!-- end .flkty-position -->
        </div>
        <!-- end .flkty-container -->
      </div>
      <!-- end .jarallax -->
    </div>
    <!-- end .cell -->
Options ALL ITEMS
Background Image Effect:
  bg-fadein                     // Background Image slides with FadeIn effect to add this class.

Background Image Overlay:
  overlay-black
  overlay-white
  overlay-theme

Caption Position:
  data-top="100"                 // This means "top: 100". You can also use "10%" etc.
  data-bottom="100"              // This means "bottom: 100". You can also use "10%" etc.
  data-left="100"                // This means "left: 100". You can also use "10%" etc.
  data-right="100"               // This means "right: 100". You can also use "10%" etc.
  data-left="0" data-right="0"   // This means Center Position.
  data-zindex="10"               // This means "z-index: 10".
  mobile-hidden                  // Image is hidden in mobile to add this class.

Caption
  large-white
  medium-white
  small-white
  large-black
  medium-black
  small-black
  large-theme
  medium-theme
  small-theme
  caption-shadow                 // Font shadow

Caption Animation
  flkty-fadeIn
  flkty-fadeInUp
  flkty-fadeInDown
  flkty-fadeInLeft
  flkty-fadeInRight
  flkty-fadeInUpSmall
  flkty-fadeInDownSmall
  flkty-fadeInLeftSmall
  flkty-fadeInRightSmall
  flkty-bounce
  flkty-bounceIn
  flkty-bounceInUp
  flkty-bounceInDown
  flkty-bounceInLeft
  flkty-bounceInRight
  flkty-zoomIn
  flkty-zoomInUp
  flkty-zoomInDown
  flkty-rotateIn
  flkty-jackInTheBox

Caption Animation Delay:
  delay1     // 0.1s
   --
  delay100   // 10.0s

5. How to change Volume of Slider Video? Hero Slider & Hero Static

  1. Open "js/custom.js".
  2. Change the following code.
    // Jarallax
    $('.jarallax').jarallax({
        speed: 0.8,
        videoStartTime: 0,
        videoVolume: 0  // from 0 to 100
    });

    $('.jarallax-html5video').jarallax({
        speed: 0.8,
        videoStartTime: 0,
        videoPlayOnlyVisible: false,
        videoVolume: 0  // from 0 to 100
    });

6. How to change Auto Play of Flickity Carousel? Flickity Carousel

  1. Open "js/custom.js".
  2. Change the following code.
    // Flickity
    $('.flickity').flickity({
        cellAlign: 'left',
        autoPlay: false,                 // false, true
        prevNextButtons: true,
        pageDots: true,
        imagesLoaded: true,
        wrapAround: true
    });

1. How to change email address?

  1. Open "contact.php".
  2. Change to your own email address.
contact.php
Please Note
  • contact.php is for contact.html
  • contact2.php is for contact2.html

2. How to change a security answer?

  1. Open "contact.php".
  2. Change two places to your answer.
contact.php

3. How to change validation message to your language?

  1. Check "js/localization" folder.
  2. Open "contact.html".
  3. Add a single line as follows.
Example: French
<script src="js/localization/messages_fr.js"></script>
contact.html

1. How to change Google Maps Location? Google Maps New

Google Maps Platform

Beginning June 11 2018, you'll need a valid API key and a Google Cloud Platform billing account.
https://mapsplatform.googleblog.com/2018/05/introducing-google-maps-platform.html

This Template uses an Embled code.
It's not high functionality, but you don't need a valid API key and a Google Cloud Platform billing account.

Step
  1. Go to the Google Maps and Get the Embed code.
  2. Open "contact.html" and Copy & Paste the Embed code.
Google Maps
contact.html

2. How to change Google Maps height? Google Maps New

  1. Open "contact.html".
  2. Change the following code.
contact.html
<div class="map">         // Height 600px
<div class="map map100">  // Height 100px
<div class="map map200">  // Height 200px
<div class="map map300">  // Height 300px
<div class="map map400">  // Height 400px
<div class="map map500">  // Height 500px
<div class="map map600">  // Height 600px
<div class="map map700">  // Height 700px
<div class="map map800">  // Height 800px
<div class="map map900">  // Height 900px
<div class="map map1000">  // Height 1000px
<div class="map map1080">  // Height 1080px
  

3. How to change Google Fonts? Google Fonts

  1. Go to the Google Fonts .
  2. Follow the steps on the linked pages to get the codes.
Example
All html files
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800" rel="stylesheet">

css/style.css
body { font-family: 'Open Sans', sans-serif; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: 'Open Sans', sans-serif; }
  

4. How to use Google Custom Search? Google Custom Search

1. Log in to Google Custom Search Engine .
2. Follow the steps on the linked pages to get an search box code.
3. Select "Two page" layout.
4. Specify the complete URL of your site where you want the search results to appear.
5. Copy and paste the code for search box into the HTML files, where you want search box to render.
HTML files
6. Copy and paste the code into "search-results.html".
search-results.html

1. About Support

About Support
  • If you have any questions beyond the scope of this documentation, please feel free to contact us via Market contact form.
  • We usually reply within two business days.
Support includes
  • Fixing a bug, if any.
  • Answering a qestion beyond the scope of the documentation, and adding the new information into documentation.
Support does not include
  • Adding new feature and plugin.
  • Helping with personal customizing.

2. Other FAQ

Not work FAQ
  • This is a HTML5 Template. This does not work with WordPress.
  • Some Plugins (Infinite Scroll, Contact Form) don't work on local environment. Please try on a server that is online and has PHP installed.
  • Some Plugins (Jarallax, Ripples, CSS Hover Effect) don't work under IE10.
  • The reservation form (Resort) is just static html template.
  • If you use Dreamweaver, please remove CSS links temporarily. It will reduce the DW loading time. The cause is hyphens of class names.
Refund FAQ

Please check Live demo and product description carefully before you purchase.

NO refund
  • You (or your client) no longer need the purchased product.
  • You bought the item on accident.

Please refer to the link below for details.
https://support.creativemarket.com/hc/en-us/articles/236189908-Refund-FAQ-Common-Issues

OK refund
  • You've accidentally purchased the same product multiple times.

Please refer to the link below for details. You need to contact Creative Market Support Team.
https://support.creativemarket.com/hc/en-us/articles/203013384-How-do-I-get-a-refund-for-a-duplicate-purchase-

Re-Download FAQ
  • Please note that the Market Support Team or Author basically can finish selling the product at any time.
  • If you'd like to download it again, please check download page or contact us with your purchase code.

3. Credits

Premium HTML5 Templates Features

jQuery v3 & Bootstrap v4

Template is built with jQuery v3 and Bootstrap v4 that are the latest version, mobile-first, and compatible with the latest Major browser.
It is well-structured and customizable by combining Bootstrap grid system with original design Components.

Valid Code

The html files are W3C Valid.
The css files are W3C Valid.
The custom.js is Valid Javascript.
jQuery Migrate issues are also fixed that can be checked by Browser developer tool of F12.

Working php contact form

Working Ajax contact form with PHP is included in premium template. You can change security answer, and validation message to your language.

Premium Plugins

Isotope, Infinite Scroll, and Flickity are premium plugins.
You can save $25 each plugin for commercial website.
Please Note: Depending on the Template, some plugins are not included.

Lightweight Slider

Flickity is also used as a Hero Slider with parallax image and video.
The Hero Slider is not high functionality, but it is lightweight and uncomplicated.

Well Documented

You can check online FAQ.
It is organized by five categories of General, Premium Plugins, Contact Form, Google Services, and Support.

Back to Top