Webster - Responsive Multi-purpose HTML5 Template

1.Webster Introduction

This documentation will give you an understanding of how Webster template is structured and guide you in performing common functions.

Notes:

We will not respond to any support questions on Item comment section or through e-mail. If this document doesn’t answer your questions feel free to open up a private ticket in our support forum
For questions on basic HTML, Javascript or CSS editing – please give your question a quick Google or visit W3Schools as template issues get top priority.
You will need some basic knowledge of HTML/CSS to edit the template.
For customisation service contact us at our support forum

1.1.Installation

Follow the steps below to get started with your Site Template:

Open the ... /Template Folder to find all the Templates Files
You will need to Upload these files to your Web Server using FTP (We suggest Filezilla) in order to use it on your Website.
Make sure you upload the required files/folders listed below:
- Template/css – Stylesheets Folder
- Template/demo-categories – Category homepage files Folder. Includes category inner pages
- Template/demo-one-page – One-page homepage files folder
- Template/demo-specialty-pages – Specialty pages files folder
- Template/fonts – Fonts Folder
- Template/images – Images Folder
- Template/js – Java Scripts Folder
- Template/php – PHP Folder
- Template/revolution – Revolution slider all assets
- Template/video – Video Folder
- Template/index.html – Main home file
- Template/..... – All HTML files
The other files can be used according to your preferences.
You’re now good to go..! Start editing your site and show off your Brand New Website with proud.

Note: For correct operation of all functions of the template, including Popup video and Contact forms, you must upload the template to web-server.

1.2.Basic template Structure

The template has a responsive layout and is based on the Bootstrap 5 Framework. Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. Click Here to know more about Bootstrap.

HTML Structure

Here is the general HTML structure of the template:

<!DOCTYPE html>
<html lang="en">
<head>
  [Page meta, page css, page title etc...]
</head>
<body>
  <div class="wrapper">
  <!-- preloader -->
  <div id="loading"> [LOADER CONTENT] </div>
  <!--preloader -->
  <!--header -->
  <header id="header" class="default">
    <div class="topbar">
      [TOP BAR CONTENT]
    </div>
    <div class="menu">
      <nav id="menu" class="mega-menu">
        [MENU CONTENT]
      </nav>
    </div>
  </header>
  <!--header -->
  <!-- rev slider -->
  <section class="rev-slider">
  </section>
  <!-- rev slider -->
  <!--Section 1 -->
  <section>
    [SECTION 1 CONTENT]
  </section>
  <!--Section 1 -->
  <!--Section 2 -->
  <section>
    [SECTION 2 CONTENT]
  </section>
  <!--Section 2 -->
  <!--footer -->
  <footer class="footer">
    [FOOTER_CONTENT]
  </footer>
  </div>
  <!--footer -->
  [PAGE JAVASCRIPTS HERE]
</body>
</html>

CSS Structure

Here is the general CSS structure of the template:

<!-- Plugins -->
<link rel="stylesheet" type="text/css" href="css/plugins-css.css" />
<!-- revoluation -->
<link rel="stylesheet" type="text/css" href="revolution/css/settings.css" media="screen" />
<!-- Typography -->
<link rel="stylesheet" type="text/css" href="css/typography.css" />
<!-- Shortcodes -->
<link rel="stylesheet" type="text/css" href="css/shortcodes.css" />
<!-- Style -->
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!-- Category CSS --> <<== This file will only include in category home pages.
<link rel="stylesheet" type="text/css" href="css/category-name.css" />
<!-- Responsive -->
<link rel="stylesheet" type="text/css" href="css/responsive.css" />

plugins-css.css: This file includes all plugins. If you don’t want to use any plugins from this file. You can simply remove that line from this file.
settings.css: This file includes revolution stylesheets
typography.css: This file includes all typography stylesheets. If you want to change anything related typography. you can change it in this file.
shortcodes.css: This file includes all shortcodes. If you don’t want to use any plugins from this file. You can simply remove that line from this file.
style.css: This is a main stylesheet of the template, This file contains the styling for the actual Template.
category-name.css: This is stylesheet include category wise CSS, If you are using any category home (Like cafe, band) then you will need this file.
responsive.css: This is a responsive stylesheet of the template, This file contains all Media Queries.

Javascript Structure

Here is the general Javascript structure of the template:

<!-- jquery -->
<script src="js/jquery-3.6.0.min.js"></script>
<!-- plugins-jquery -->
<script src="js/plugins-jquery.js"></script>
<!-- plugin_path -->
<script var plugin_path = 'js/';</script>
<!-- custom -->
<script src="js/custom.js"></script>

jquery.js: This is JavaScript Library file. You must need this file to run any javascript. Do not change or edit this file.
plugins-jquery.js: This file includes all plugins. If you don’t want to use any plugins from this file. You can simply remove it from this file.
var plugin_path = ‘js/’: This is path of all plugin folder to load all plugins dynamically when needed on the specific page. You don’t need to add plugins manually. If no plugin is needed, then no plugin will loaded.
custom.js: This File includes all small scripts from the template. All script has commented code so you can easily remove unnecessary code from this file. Make sure you remove/add proper file before you remove or add anything in this file.

Note For homepage with revolution slider, There will some more JS needed. Which is already included on home pages with revolution slider.

1.3.Layout Style

The template supports 3 different layout modes frame layout, boxed layout and wide layout. The wide Layout is the default option if you want to use the Boxed or frame Layout mode, add the following class to the "body" and layout style will be changed to boxed or frame version.

<body class="frame-layout">

<body class="boxed-layout">

1.4.Favicon icon

Favicon is an icon associated with the URL that is displayed at various places, such as in a browser’s address bar or next to the site name in a bookmark list. There are many online favicon icon generator to generate .ico file. You can also use .png file

You can add a Favicon to your Website using the following code:

<link rel="shortcut icon" href="images/favicon.ico" />

1.5.Page Loading Transition

Page Loading Transition is enabled by default. If you wish to disable the page loading transition you can simply delete the below section from all HTML pages.

<div id="pre-loader">
  <img src="images/pre-loader/loader-01.svg" alt="">
</div>

You can change your desire loading animation by replacing loader-01.svg with one of our 24 SVG and GIF loader or your own loader file.

Loader supported files: .SVG, .GIF, .PNG, .JPG

1.6.Logo Settings

The Logo can be found in the Header – #header. Replace "logo.png" with your own logo image.

<ul class="menu-logo">
  <li>
    <a href="index-01.html"><img id="logo_img" src="images/logo.png" alt="logo"> </a>
  </li>
</ul>

How to change logo height?

You can set height according to your logo type and your requirement. To set logo height open style.css file and change height value in .mega-menu .menu-logo img class, default value of logo height is 40px.
For responsive logo height open responsive.css file and change height value in .mega-menu .menu-logo img class in 991 media query, default value of logo height in responsive is 30px.

If you change logo height then header height will automatically increase and menu will set vertically center.

1.7.Color Schemes

You can change your Website’s Color Scheme in an instant. There are 2 super easy options to change your website color.

Option 1: You simply need to include an existing color scheme from (css/skins/skin-yourcolor.css) and include inside head See example below:

<link rel="stylesheet" type="text/css" href="css/skins/skin-green.css" />

NoteTo perfect color skin result kindly Insert your color skin css in bottom(Before head tag) of the head tag.

Option 2:(recommended) This is best and option to change color. Open all css file in text editor and find default color code #84ba3f and replace with your color code. You only need to change raindrops color code from custom.js file.

How to change raindrops color?

Open a custom.js file and update color code in raindrops script. See example below:

POTENZA.raindrops = function () {
  if ($('.raindrops').exists()) {
     loadScript(plugin_path + 'raindrops/raindrops.js', function() {
         $('#raindrops').raindrops({color:'#84ba3f',
         canvasHeight:50});
     });
    }
};

1.8.Changing Fonts style

You can add/change the site font, from all fonts used from Google Web Font Services, with the one that suits you the best. You can find the font code in the head tag of all HTML files:

<!-- font -->
<link  rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,500,500i,600,700,800,900|Poppins:200,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Dosis:300,400,500,600,700,800">

To include new font you can simply add another line like this:

<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700,700i" rel="stylesheet">

Or add an | separator and paste Roboto:400,300,800,700,600 after default website fonts link.

Now open typography.css and change your font family with the current.

In order to change the fonts, you will need to edit the above links with your custom font, if you plan to use a Google Font or remove it completely. If you plan to use a self-hosted font, here is an Example of using Self Hosted Fonts

1.9.Compiling Sass

Overview testing

Sass is perhaps the most popular of the CSS pre-processors; for years it’s helped us write clean, reusable and modular CSS. In this quick tutorial, I’ll cut straight to the stuff that matters and explain how to compile Sass into CSS using the command line.

Install Node.js

To compile Sass via the command line, first we need to install node.js. Download it from the official website nodejs.org, open the package and follow the wizard.

Initialize NPM

NPM is the Node Package Manager for JavaScript. NPM makes it easy to install and uninstall third-party packages. To initialize a Sass project with NPM, open your terminal and CD (change directory) to your project folder.

Once in the correct folder, run the command npm init. You will be prompted to answer several questions about the project, after which NPM will generate a package.json file in your folder.

Install Node-Sass

Node-sass is an NPM package that compiles Sass to CSS (which it does very quickly too). To install node-sass run the following command in your terminal: npm install node-sass

Everything is ready to write a small script in order to compile Sass. Open the package.json file in a code editor. You will see something like this:

{
  "name": "sass-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

In the scripts section add an scss command, under the test command, as it’s shown below:

"scripts": {
  "test": "echo "Error: no test specified" && exit 1",
  "scss": "node-sass --watch scss -o css"
}

Let’s go through this line word by word.

node-sass: Refers to the node-sass package.
--watch: An optional flag which means “watch all .scss files in the scss/ folder and recompile them every time there’s a change.”
scss: The folder name where we put all our .scss files.
-o css: The output folder for our compiled CSS.

Run the Script

To execute our one-line script, we need to run the following command in the terminal: npm run scss

Hurray! We are watching and compiling SASS.

1.10.Setting up RTL

To make your website RTL, Simply follow the steps below:

Add the dir="rtl" to the <html> Tag. Example:
```
<html dir="rtl">
```

Add the RTL related CSS in the Document head tag
There are 2 CSS file you need to include.
1. style-rtl.css and
2. responsive-rtl.css
See example below:

<!-- Plugins -->
<link rel="stylesheet" type="text/css" href="css/plugins-css.css" />

<!-- Typography -->
<link rel="stylesheet" type="text/css" href="css/typography.css" />

<!-- Shortcodes -->
<link rel="stylesheet" type="text/css" href="css/shortcodes/shortcodes.css" />

<!-- Style -->
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/style-rtl.css" />

<!-- Responsive -->
<link rel="stylesheet" type="text/css" href="css/responsive.css" />
<link rel="stylesheet" type="text/css" href="css/responsive-rtl.css" />

Open plugin-css.css and import bootstrap-rtl.min.cssExample:

/*plugins*/
@import url("plugins/bootstrap.min.css");
@import url("plugins/bootstrap-rtl.min.css");
@import url("plugins/mega_menu.css");
.........
.........

Add the .rtl Class to the <body> Tag. Example:
```
<body class="rtl">
```

2.1.Changing Header and drop down style

We have provided 15+ header styles. With 5 different structures. Most common header is default header style. Use below class to change header style. See example below.

<header id="header" class="header default">
  [Header content]
</header>

Here are some predefined classes you can use:

Class	Description
`header default`	Default header style with white text and transparent bg
`header dark`	Dark background and light text
`header light`	Light background and dark text
`header fullWidth`	Display header in full widht. Change `container` to `container-fluid` for full Width header.
`header transparent`	Display header with black transparent bg
`header text-dark`	Display all header text in dark
`header dark-dropdown`	Display all drop down menu background in dark and all drop down menu text in light

Note You can use fullWidth class in any header to make it full width. Change container to container-fluid for full Width header.

Note You can use left-menu class in any header to make menu left align(only menu not full header).

New You can use logo-center menu-center both class to make menu center header.

2.2.Sticky style

When you scroll down, the Sticky Header “sticks” to the top of the window and is an exact replica of the main header and menu.
To enable/Disable sticky header follow this simple method:

Just simply by true and false values you can enable or disable Header style in mega menu block script in custom.js.

To enable Header style use true value. See example below:

sticky_header: true,       // menu fixed on top when scroll down. options (true) or (false)

To disable Header style use false value. See example below:

sticky_header: false,       // menu fixed on top when scroll down. options (true) or (false)

2.3.Mega menu

Here is the super easy setting you can customize in custom.js:

POTENZA.megaMenu = function () {
  loadScript(plugin_path + 'mega-menu/mega_menu.js', function() {
    var nav =  $('#menu');
    var l = nav.attr('data-pos');
    var pos = 'horizontal';
    if(l) pos = l;
    nav.megaMenu({
        // DESKTOP MODE SETTINGS
        logo_align          : 'left',         // align the logo left or right. options (left) or (right)
        links_align         : 'left',         // align the links left or right. options (left) or (right)
        socialBar_align     : 'left',         // align the socialBar left or right. options (left) or (right)
        searchBar_align     : 'right',        // align the search bar left or right. options (left) or (right)
        trigger             : 'hover',        // show drop down using click or hover. options (hover) or (click)
        effect              : 'expand-top',   // drop down effects. options (fade), (scale), (expand-top), (expand-bottom), (expand-left), (expand-right)
        effect_speed        : 400,            // drop down show speed in milliseconds
        sibling             : true,           // hide the others showing drop downs if this option true. this option works on if the trigger option is "click". options (true) or (false)
        outside_click_close : true,           // hide the showing drop downs when user click outside the menu. this option works if the trigger option is "click". options (true) or (false)
        top_fixed           : false,          // fixed the menu top of the screen. options (true) or (false)
        sticky_header       : true,           // menu fixed on top when scroll down. options (true) or (false)
        sticky_header_height: 250,            // sticky header height top of the screen. activate sticky header when meet the height. option change the height in px value.
        menu_position       : pos,            // change the menu position. options (horizontal), (vertical-left) or (vertical-right)
        full_width          : false,          // make menu full width. options (true) or (false)
        // MOBILE MODE SETTINGS
        mobile_settings     : {
          collapse            : true,         // collapse the menu on click. options (true) or (false)
          sibling             : true,         // hide the others showing drop downs when click on current drop down. options (true) or (false)
          scrollBar           : true,         // enable the scroll bar. options (true) or (false)
          scrollBar_height    : 400,          // scroll bar height in px value. this option works if the scrollBar option true.
          top_fixed           : false,        // fixed menu top of the screen. options (true) or (false)
          sticky_header       : false,        // menu fixed on top when scroll down. options (true) or (false)
          sticky_header_height: 200           // sticky header height top of the screen. activate sticky header when meet the height. option change the height in px value.
        }
    });
  });
}

2.4.One-page Menu

You can use any webster menu as a one-page menu. just need to add onepagenav ID right after the header. See below example code of menu with one-page setup

<header id="header" class="header text-dark">
<div class="menu onepage-hover-01" id="onepagenav">
  <!-- menu start -->
   <nav id="menu" class="mega-menu">
    <!-- menu list items container -->
    <section class="menu-list-items">
     <div class="container">
      <div class="row">
       <div class="col-lg-12 col-md-12">
        <!-- menu logo -->
        <ul class="menu-logo">
            <li>
                <a href="index-01.html"><img id="logo_img" src="demo-one-page/agency/images/logo.png" alt="logo"> </a>
            </li>
        </ul>
        <!-- menu links -->
        <div class="menu-bar">
         <ul class="menu-links">
            <li class="active"><a href="#homesection">Home</a></li>
            <li><a href="#about-us">About us</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#portfolio">Work</a></li>
            <li><a href="#testimonial">Testimonial</a></li>
            <li><a href="#pricing">Pricing</a></li>
            <li><a href="#contact-us">Contact us</a></li>
          </ul>
        </div>
       </div>
      </div>
     </div>
    </section>
   </nav>
  <!-- menu end -->
 </div>
</header>

NoteUse unique id to redirect to the particular section. For example when user clicks on one-page menu about us text and you want to redirect user on about us section, then you have to set same id(#about-us) on that section which you used on menu anchor tag href value.

2.4.Mobile OffCanvas Menu

Here is the super easy setting you can customize OffCanvas Menu in Mobile. You can add mobile-offcanvas-menu class with mega-menu

<nav id="menu" class="mega-menu mobile-offcanvas-menu">
  [YOUR CONTENT]
</nav>

Add Mobile Tigger button after Logo A tag. <button>...</button>

<!-- menu logo -->
<ul class="menu-logo">
  <li>
    <a href="index-01.html"><img id="logo_img" src="images/logo.png" alt="logo"></a>
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#mobileOffcanvas" aria-controls="mobileOffcanvas"><span></span><span></span><span></span></button>
  </li>
</ul>

Add Below Mobile Offcanvas Menu DIV Structure.

<div id="mobileOffcanvas" class="offcanvas menu-offcanvas offcanvas-start" tabindex="-1" aria-labelledby="mobilemenuLabel" aria-modal="true" role="dialog">
		<div class="offcanvas-header">
		  <h5 class="offcanvas-title" id="mobilemenuLabel">Menu</h5>
		  <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
		</div>
		<div class="offcanvas-body">
			<ul class="menu-links">
				...
			</ul>
		</div>
	</div>

NoteUse unique id for Use OffCanvas Menu Multiple time.

3.Helper Classes

We have created some really useful helper classes for you. These classes help you to quickly position elements without writing new CSS rules. These classes are generic helper classes predefined in the CSS pages, here is quick view what they can do

3.1.Page section padding

You can add this helper class to set section padding top 80px and padding bottom 80px.
Add page-section-ptb class in section tag. See example below:

<section class="... page-section-ptb">
  [YOUR CONTENT]
</section>

Note Use this helper class to maintain all page section spacing. You can also use page-section-pt for only padding top and page-section-pb for only padding bottom.

3.2.Text color

You can use color in the Text. simply add theme-color class where you want to apply green(theme color) color. See example below:

<div class="theme-color">
  [YOUR TEXT CONTENT]
</div>

Note We have included 3 color helper class in our template theme-color, text-white and text-black . You can add unlimited color class according to your needs.

3.3.Background color

You can use color in the background. simply add theme-bg class where you want to apply green(theme background color) background color. See example below:

<div class="theme-bg">
  [YOUR CONTENT]
</div>

Note We have included 5 background colors helper class in our template theme-bg, white-bg, black-bg, dark-gray-bg and gray-bg You can add unlimited background color class according to your needs.

3.4.Background Images and pattern

Background

You can use an image in the background with parallax effect with simply add InlineStyle in any tag and by use of this you can create your own bg. See example below:

<div style="background-image:url(Path); ">
  [YOUR CONTENT]
</div>

If you want to use your background like cover or cointainer so, you just add styling property background-size and set the value cover or cointainer. see the example below:

<div style="background-image:url(Path); background-size:cover;">
  [YOUR CONTENT]
</div>

Pattern

If your background is small and you want to use repeted background then use styling property background-repeat and set the value repeat or no-repeat. See the example below:

<div style="background-image:url(Path); background-repeat:no-repeat;">
  [YOUR CONTENT]
</div>

3.5.Background parallax

You can use an image in the background with parallax effect with simply add Inline Data in div tag and by use of this you can create your own bg. See example below:

<section class="jarallax" data-speed="0.6" data-img-src="image path here">
  [YOUR CONTENT]
</section>

Video Parallax

<section class="jarallax" data-speed="0.6" data-video-src="video path here">
  [YOUR CONTENT]
</section>

Note You must need jarallax class to set background parallax. With data-speed="0.6" you can set parallax speed.

3.6.Background overlay

You can add bg-overlay-black-10 class to any element in your HTML code to apply overlay color on any image or any section. See example below:

<div class="bg-overlay-black-10">
  [YOUR CONTENT]
</div>

Here are some predefined overlay classes you can use:

Class	Description	Class	Description
`bg-overlay-black-10`	Apply black color overlay with 0.10 overlay	`bg-overlay-black-20`	Apply black color overlay with 0.20 overlay
`bg-overlay-black-30`	Apply black color overlay with 0.30 overlay	`bg-overlay-black-40`	Apply black color overlay with 0.40 overlay
`bg-overlay-black-50`	Apply black color overlay with 0.50 overlay	`bg-overlay-black-60`	Apply black color overlay with 0.60 overlay
`bg-overlay-black-70`	Apply black color overlay with 0.70 overlay	`bg-overlay-black-80`	Apply black color overlay with 0.80 overlay
`bg-overlay-black-90`	Apply black color overlay with 0.90 overlay
`bg-overlay-white-10`	Apply white color overlay with 0.10 overlay	`bg-overlay-white-20`	Apply white color overlay with 0.20 overlay
`bg-overlay-white-30`	Apply white color overlay with 0.30 overlay	`bg-overlay-white-40`	Apply white color overlay with 0.40 overlay
`bg-overlay-white-50`	Apply white color overlay with 0.50 overlay	`bg-overlay-white-60`	Apply white color overlay with 0.60 overlay
`bg-overlay-white-70`	Apply white color overlay with 0.70 overlay	`bg-overlay-white-80`	Apply white color overlay with 0.80 overlay
`bg-overlay-white-90`	Apply white color overlay with 0.90 overlay
`bg-overlay-theme-20`	Apply theme color overlay with 0.20 overlay	`bg-overlay-theme-50`	Apply theme color overlay with 0.50 overlay
`bg-overlay-theme-70`	Apply theme color overlay with 0.70 overlay	`bg-overlay-theme-90`	Apply theme color overlay with 0.90 overlay

Note You can create your own helper classes by creating the class in the stylesheet as per your requirement. This helper class only support RGBA color values.

3.7.Text align

You can add this helper class to any element in your HTML code to set text-align

Class	Description
`text-start`	text-align: left;
`text-end`	text-align: right;
`text-center`	text-align: center;

3.8.Label

You can add this helper class to any element in your HTML code to make a badge(lable). Simply add badge and bg-danger (or any class given below) class where you want to add a badge. See example below:

<span class="badge bg-danger">badge name</span>

Here are some default badges you can use or you can make your own badge as per your requirement.

Class	Description
`badge bg-primary`	primary badge
`badge bg-secondary`	secondary badge
`badge bg-success`	Success badge
`badge bg-danger`	danger badge
`badge bg-warning`	Warning badge
`badge bg-info`	info badge
`badge bg-light`	light badge
`badge bg-dark`	dark badge

4.Sliders

We included 3 different sliders for you to be used on any Page with 100s of Options. List of the Sliders included are mentioned as follows:

Revolution
Owl carousel
Slick carousel

4.1.Revolution

Revolution Slider is a premium plugin, an awesomely animated slider that creates eye-catching sliders.

Please find the full online Revolution Slider documentation.

Note To load Revolution slider locally we put below js in all Revolution slider’s home pages. You can remove it when you upload the files to your web server. You don’t need these js files to load slider on live server. If you remove these js your slider will not work locally.

<!-- SLIDER REVOLUTION 5.0 EXTENSIONS
(Load Extensions only on Local File Systems !
The following part can be removed on Server for On Demand Loading) -->
<script type="text/javascript" src="revolution/js/extensions/revolution.extension.actions.min.js"></script>
<script type="text/javascript" src="revolution/js/extensions/revolution.extension.carousel.min.js"></script>
<script type="text/javascript" src="revolution/js/extensions/revolution.extension.kenburn.min.js"></script>
<script type="text/javascript" src="revolution/js/extensions/revolution.extension.layeranimation.min.js"></script>
<script type="text/javascript" src="revolution/js/extensions/revolution.extension.migration.min.js"></script>
<script type="text/javascript" src="revolution/js/extensions/revolution.extension.navigation.min.js"></script>
<script type="text/javascript" src="revolution/js/extensions/revolution.extension.parallax.min.js"></script>
<script type="text/javascript" src="revolution/js/extensions/revolution.extension.slideanims.min.js"></script>
<script type="text/javascript" src="revolution/js/extensions/revolution.extension.video.min.js"></script>

1. Revolution Slider Exported Files

We provided all revolution slider Exported Files with the template. You can download this files from download section of the document. We also provides Revolution Slider hero templates Exported Files you can also download these files.

This file will help you when you use revolution slider plugins and you want to change in slider. Simply import slider file and change as per your needs. Visit How to import revolution slider in WordPress Plugin and jQuery Plugin

2. Revolution Slider plugins

We provide 2 revolution slider plugins with webster.
Slider Revolution Responsive jQuery Plugin

You can download this files from download section of the document.

Note Premium plugins included in the templates are full featured and work properly right out of the box. New versions will be included in the upcoming updates after compatibility tests. For more information please read Envato Bundled Plugins policy

4.2.Owl carousel

This excellent carousel slider can be controlled using HTML5 data attributes.

Find the full online owl carousel Slider documentation.

We have created some data attributes for Owl carousel setting. See example below.

<div class="owl-carousel" data-nav-dots="true" data-nav-arrow="true" data-items="5" data-md-items="5" data-sm-items="4" data-xs-items="3" data-xx-items="1" data-space="20" data-loop="true" data-autoheight="true" > </div>

data-nav-dots=”true” : With use of true and false values you can enable or disable dots
data-nav-arrow=”true” : With use of true and false values you can enable or disable arrow
data-items=”5″ : Set how many items you want to display on desktop.
data-md-items=”5″ : Set how many items you want to display on laptop. Under 1200px
data-sm-items=”4″ : Set how many items you want to display on tablets. Under 992px
data-xs-items=”3″ : Set how many items you want to display on Mobile. Under 767px
data-xx-items=”1″ : Set how many items you want to display on Small mobile. Under 479px
data-space=”20″ : Spacing between 2 items
data-loop=”true” : Enable disable slider items loop
data-autoheight=”true” : Enable disable slider items auto height
data-autospeed=”5000″ : Control slider speed
data-smartspeed=”250″ : Control slider smart speed

4.3.Slick carousel

Slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more!

For more information about Slick carousel Click Here.

5.Shortcodes

Shortcodes are reusable elements. They can be used anywhere on any page by simply copy/paste. Setting up shortcodes is very easy & self-explanatory. Here is the list of Shortcodes included with Webster:

Accordion
Action Box
Alerts And Callouts
Animations
Blockquotes
Buttons
Carousel Slider
Clients
Columns
Content Box
Countdown Timer
Counter
Data Table
Datatables
Datepicker
Dropcap Highlight
Feature Box
Form
Gallery
Headings
Labels
Lightbox
Lists Panels
Lists Style
Maps
Modal Popovers
Navigation
Newsletter
Pagination
Pie Chart
Post Style
Pricing Tables
Process Steps
Responsive Utilities
Sections
Select
Separators
Skills
Social Icon
Tabs
Tabs
Testimonials
Typography
Video Audio

5.1.Accordion

Use the below code to display accordion:

<div class="accordion [Add style class from below]">
  <div class="acd-group">
    <a href="#" class="acd-heading">
        [ Accordation Name ]
    </a>
    <div class="acd-des">
        [ Description ]
    </div>
  </div>
</div>

We provide many accordion styles which can be change with just one class. You only need to add this classes with accordion class. Here is the all class of accordion gray , plus-icon , round , shadow , border , animated.

Check video tutorials to know more

5.2.Action box

Use the below code to display Action box:

<div class="col-lg-12 col-md-12">
 <div class="action-box-text">
   <h3>[ Title ]</h3>
   <p>[ Description ]</p>
 </div>
 <div class="action-box-button">
   <a class="button" href="#">
     <span>Purchase Now</span>
     <i class="fa fa-download"></i>
   </a>
 </div>
</div>

We provide many Action box styles which can be change with just one class. You only need to add this classes with action-box class. Here is the all class of Action box border , center , theme-bg , black-bg , gray-bg , full-width , parallax , pattern , small.

You can also use Fixed background image or simple image with Action box using styling property as per showing the set background image for more details about set background image click here .

5.3.Animation

Scroll to reveal Animations are latest in the Trends. You can easily add animations to any elements in your website. Animations can be shown on scroll appear. Here is the Sample Code:

<section class="wow slideInLeft" data-wow-duration="0.2s" data-wow-delay="0.5s">
  Content to Reveal Here
</section>
<section class="wow slideInRight" data-wow-offset="10"  data-wow-iteration="10">
  Content to Reveal Here
</section>

data-wow-duration: Change the animation duration
data-wow-delay: Delay before the animation starts
data-wow-offset: Define the distance between the bottom of browser viewport and the top of hidden box. When the user scrolls and reach this distance the hidden box is revealed.
data-wow-iteration: Number of times the animation is repeated

Here is the list of the Animation Types you can use:

bounce
flash
pulse
rubberBand
shake
swing
tada
wobble
bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig
flip
flipInX
flipInY
flipOutX
flipOutY
lightSpeedIn
lightSpeedOut
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
hinge
rollIn
rollOut
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp

5.4.Blockquote

Use the below code to display blockquote:

<blockquote>
  [ Description ]
</blockquote>

There Are Many types of blockquote styles like blockquote-right , quote , theme-bg , black-bg. Use this type of styles as per your need.

5.5.Buttons

Use the below code to display Button:

<a class="button" href="#"><span>Default Button</span></a>

Note If you want to change the button style then it is necessary to write button class.

Use the below to display Default Buttons:

Class	Code	Description
`button`	<a class="button" href="#"> button</a>	Button Default
`button black`	<a class="button black" href="#"> button</a>	Button Black
`button gray`	<a class="button gray" href="#"> button</a>	Button gray
`button border`	<a class="button border" href="#"> button</a>	Button border
`button border gray`	<a class="button border gray" href="#"> button</a>	Button border gray
`button border black`	<a class="button border black" href="#"> button</a>	Button border black
`button border white`	<a class="button border white" href="#"> button</a>	Button border white
`button border gray icon`	<a class="button border gray icon" href="#"> button</a>	Button border gray icon
`button border black icon`	<a class="button border black icon" href="#"> button</a>	Button border black icon
`button border icon`	<a class="button border icon" href="#"> button</a>	Button border icon
`button icon`	<a class="button icon" href="#"> button</a>	Button icon
`button black icon`	<a class="button black icon" href="#"> button</a>	Button black icon
`button gray icon`	<a class="button gray icon" href="#"> button</a>	Button gray icon
`button big-button`	<a class="button big-button" href="#"> button</a>	button big-button
`button gray big-button`	<a class="button gray big-button" href="#"> button</a>	button gray big-button
`button black big-button`	<a class="button black big-button" href="#"> button</a>	button black big-button
`button d-grid`	<a class="button d-grid" href="#"> button</a>	button d-grid
`button black d-grid`	<a class="button black d-grid" href="#"> button</a>	button black d-grid
`button gray d-grid`	<a class="button gray d-grid" href="#"> button</a>	button gray d-grid
`button border d-grid`	<a class="button border d-grid" href="#"> button</a>	button border d-grid
`button border black d-grid`	<a class="button border black d-grid" href="#"> button</a>	button border black d-grid
`button border gray d-grid`	<a class="button border gray d-grid" href="#"> button</a>	button border gray d-grid
`button icon-color`	<a class="button icon-color" href="#"> button</a>	button icon-color
`btn`	<button class="btn" href="#"> button</button>	button icon-color
`btn btn-default`	<button class="btn btn-default" href="#"> button</button>	btn btn-default
`btn btn-primary`	<button class="btn btn-primary" href="#"> button</button>	btn btn-primary
`btn btn-success`	<button class="btn btn-success" href="#"> button</button>	btn btn-success
`btn btn-info`	<button class="btn btn-info" href="#"> button</button>	btn btn-info
`btn btn-warning`	<button class="btn btn-warning" href="#"> button</button>	btn btn-warning
`btn btn-danger`	<button class="btn btn-danger" href="#"> button</button>	btn btn-danger
`btn btn-link`	<button class="btn btn-link" href="#"> button</button	btn btn-link

You can also change button size using x-small , small , medium , large classes in button tag. See example below:

<button class="button black x-small" href="#"> button</button>

5.6.Clients Logo

Use the below code to display clients logo:

<div class="clients-list border column-5">
  <ul class="list-unstyled">
    <li>
      <img class="img-fluid mx-auto" src="img path" alt="">
    </li>
    <li>
      <img class="img-fluid mx-auto" src="img path" alt="">
    </li>
    <li>
      <img class="img-fluid mx-auto" src="img path" alt="">
    </li>
    <li>
      <img class="img-fluid mx-auto" src="img path" alt="">
    </li>
    <li>
      <img class="img-fluid mx-auto" src="img path" alt="">
    </li>
  </ul>
</div>

You can also set clients logo in column-5 column-4 column-3 column-2 using , column-5 , column-4 , column-3 , column-2 , class.

Also, add border class if you want border style and add grayscale if you want your client logo to be grayscale.

5.7.Sections

Setup your Sections outside the container element. We used page section padding in most of our sections to maintain all section spacing.

<section class="your-section-title">
  <div class="container">
    <div class="row">
      [ YOUR SECTION HERE ]
    </div>
  </div>
</section>

5.8.Counter

Use the below code to display Counter:

<section class="page-section-ptb">
  <div class="container">
    <div class="row">
      <div class="col-lg-3 col-md-3 col-sm-6">
        <div class="counter  [Add style class from below]">
          <span class="icon ti-face-smile theme-color" aria-hidden="true"></span>
          <span class="timer" data-to="25000" data-speed="10000"> [ Your Counter Number ] </span> //data-to means that uour counter moves upto your typing number
          <label>[ YOUR CONTENT ]</label>
        </div>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-6">
        <div class="counter [Add style class from below]">
          <span class="icon ti-face-smile theme-color" aria-hidden="true"></span>
          <span class="timer" data-to="25000" data-speed="10000"> [ Your Counter Number ] </span> //data-to means that uour counter moves upto your typing number
          <label>[ YOUR CONTENT ]</label>
        </div>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-6">
        <div class="counter  [Add style class from below] ">
          <span class="icon ti-face-smile theme-color" aria-hidden="true"></span>
          <span class="timer" data-to="25000" data-speed="10000"> [ Your Counter Number ] </span> //data-to means that uour counter moves upto your typing number
          <label>[ YOUR CONTENT ]</label>
        </div>
      </div>
    </div>
  </div>
</section>

You can change the counter styles with using following classes :

Class	Description
`text-center`	Display icon in text center style
`theme-color`	Display icon in theme color style
`right-icon`	Display icon in right icon style
`left-icon`	Display icon in Left Position
`big-counter`	Display icon with big counter

5.9.Countdown

You can add Countdown Timer to any Page. You can prefer to use Countdown Timer for “Coming Soon Page” or “Product Countdown Page”. Use below code to display countdown Timer:

<div class="countdown small">
  <span class="days">00</span>
  <p class="days_ref">days</p>
</div>
<div class="countdown [Add style class from below]">
  <span class="hours">00</span>
  <p class="hours_ref">hours</p>
</div>
<div class="countdown [Add style class from below]">
  <span class="minutes">00</span>
  <p class="minutes_ref">minutes</p>
</div>
<div class="countdown [Add style class from below]">
  <span class="seconds">00</span>
  <p class="seconds_ref">seconds</p>
</div>

You can also create countdown using small medium large gray-bg border and round using small , medium , large , countdown-border , gray-bg , round class.

Also, update date in custom.js file as per your requirement:

POTENZA.countdownTimer = function () {
  if ($countdownTimer.exists()) {
    loadScript(plugin_path + 'countdown/jquery.downCount.js', function() {
      $countdownTimer.downCount({
        date: '12/25/2021 12:00:00',
        offset: 400
      });
    });
  }
}

Note date: '12/25/2021 12:00:00' is default date and time, you can change it as per your requirement

5.10.Feature box

Use the below code to display Feature box:

<div class="feature-text [Add style classes from below]">
  <div class="feature-icon">
    <span class="ti-layers-alt"></span>
  </div>
  <div class="feature-info">
    <h5 class="text-back">Many Style Available</h5>
    <p>Dolor sit consectetur conseqt quibusdam, enim expedita sed quia nesciunt</p>
  </div>
</div>

You can change the feature box styles with using following classes :

Class	Description
`feature-text`	Default
`feature-text round feature-border`	Rounded border icons
`feature-text round gray-icon`	Icons Rounded background gray
`feature-text round theme-icon`	Icons Rounded background theme color
`feature-text round shadow`	Icons Rounded with shadow
`feature-text left-icon`	Left side icon
`feature-text left-icon round feature-border`	Rounded border icons left side
`feature-text left-icon round gray-icon`	Icons background gray color left side
`feature-text left-icon round theme-icon`	Icons background theme color left side
`feature-text left-icon round shadow`	Icons background rounded shadow left side
`feature-text right-icon`	right side icon
`feature-text right-icon round feature-border`	Rounded border icons right side
`feature-text right-icon round gray-icon`	Icons background gray color right side
`feature-text right-icon round theme-icon`	Icons background theme color right side
`feature-text right-icon round shadow`	Icons background rounded shadow right side
`feature-text square feature-border`	square border icons
`feature-text square gray-icon`	Icons background gray
`feature-text square theme-icon`	Icons background theme color
`feature-text square shadow`	Icons with shadow
`feature-text box-shadow`	Whole feature box shadow
`feature-text feature-border-box`	Whole feature box border

5.11.Contact form

Regarding contact form as main part of Contact section, the only thing you need to do is to setup your email address.

To configure your email just go to PHP folder and open contact-form.php, then replace demo@domain.com with your email address.

$to = 'demo@domain.com';            // Recipient's email address

How to Setup Multiple Email Address?

For each New Email Address to which you want the Form Response to be delivered simply add comma ( , ) right after 1st email and add your 2nd email address. See example below:

$to = 'demo@domain.com, demo2@domain.com';            // Recipient's email address

Use the below code to display contact-form:

<div id="formmessage">Success/Error Message Goes Here</div>
  <form class="form-horizontal" id="contactform" role="form" method="post" action="php/contact-form.php">
    <div class="contact-form clearfix">
      <div class="section-field">
        <input id="name" type="text" placeholder="Name*" class="form-control"  name="name">
      </div>
      <div class="section-field">
        <input type="email" placeholder="Email*" class="form-control" name="email">
      </div>
      <div class="section-field">
        <input type="text" placeholder="Phone*" class="form-control" name="phone">
      </div>
      <div class="section-field textarea">
        <textarea class="form-control input-message" placeholder="Comment*" rows="7" name="message"></textarea>
      </div>
      <div class="g-recaptcha section-field clearfix" data-sitekey="[Add your site key]"></div>
      <div class="section-field submit-button">
        <input type="hidden" name="action" value="sendEmail"/>
        <button id="submit" name="submit" type="submit" value="Send" class="button"> Send your message </button>
      </div>
    </div>
  </form>
<div id="ajaxloader" style="display:none"><img class="center-block mt-30 mb-30" src="images/pre-loader/loader-02.svg" alt=""></div>

Note: Add your site key in form. or Remove below code from form if you don’t want google recaptcha:

<div class="g-recaptcha section-field clearfix" data-sitekey="[Add your site key]"></div>

You can change the contact form styles with using following classes :

Class	Description
`contact-form`	Default contact form.
`contact-form border-form`	Contact form with border.
`contact-form dark-form`	Contact form with dark RGB color.
`contact-form transparent-form`	Contact form with transparent bg.

reCaptcha Settings

To setup reCaptcha Form Protection, you will need to obtain a Set of Site and Secret Key from the Google reCaptcha Website. Then follow the below steps to Setup the Key for your Form:

Step 1: Add the following code to end of your HTML (Before custom.js file) :

<script src='https://www.google.com/recaptcha/api.js'></script>

Step 2: Paste below code at the end of form where you want the reCaptcha widget to appear

<div class="g-recaptcha section-field clearfix" data-sitekey="[Add your site key]"></div>

Step 3: Add your secret key here in contact-form.php file :

/* Replace google captcha secret key*/
$captch_secret_key = 'Add your secret key here

For more visit recaptcha documentation

5.12.Custom Search Setup

To setup google custom search, you only need to add your CX key from google cse. Login to google custom search and create a new search engine. After getting CX key open search.html page and at the end of the page script add your cx key. See example below.

 var cx = '009980498122785757976:dy8dr3djnym';

5.13.Google map

Default Google map

You can add Embedded Google Maps to any Page using the following setup:

1: Go to Google map and Find your location.
2: Go to Menu from left-bar and click on Share or embed map.
3: Select Embed map & then copy iframe.
4: Paste iframe into your HTML code.

Sample example of google map iframe:

<!-- Google Maps -->
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3151.8351288872545!2d144.9556518!3d-37.8173306!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad65d4c2b349649%3A0xb6899234e561db11!2sEnvato!5e0!3m2!1sen!2sin!4v1443621171568" style="border:0; width: 100%; height: 300px;"></iframe>

Note Remove width, height and style from the iframe. If you want to change it you can change it in CSS from style.css as per your requirement. For more information please visit Google map documentation.

Snazzy Map

Snazzy Maps is a repository of different styles for Google Maps aimed towards web designers and developers. We have 6 ready to use map style, use one of below DIV and use wherever you want to use.

<div style="width: 100%; height: 300px;" id="map" class="g-map" data-type='black'></div>

<div style="width: 100%; height: 300px;" id="map-02" class="g-map" data-type='green'></div>

<div style="width: 100%; height: 300px;" id="map-03" class="g-map" data-type='midnight'></div>

<div style="width: 100%; height: 300px;" id="map-04" class="g-map" data-type='light'></div>

<div style="width: 100%; height: 300px;" id="map-05" class="g-map" data-type='grey'></div>

<div style="width: 100%; height: 300px;" id="map-06" class="g-map" data-type='blackandwhite'></div>

How to change map location in Snazzy Map?

Open custom.js file and change latitude and longitude. See example below:

function init(id,clr) {
  var mapOptions = {
    zoom: 11,
    center: new google.maps.LatLng(-37.817078, 144.955936), //Update Latitude and Longitude here
    styles:clr
  };
  var mapElement = document.getElementById(id);
  var map = new google.maps.Map(mapElement, mapOptions);
    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(40.6700, -73.9400),
      map: map,
      title: 'Snazzy!'
    });
  }
});

You can find your locations Latitude and Longitude on www.latlong.net

5.14.Font icon

We have included Font awesome and themify icons in our template.

1: Font awesome:

You can place Font Awesome icons just about anywhere using the CSS Prefix fa and the icon’s name. Font Awesome is designed to be used with inline elements (we like the < i > tag for brevity, but using a < span > is more semantically correct). See example below:

<i class="fa fa-camera-retro"></i>

For more information visit Get Started. For all Fontawesome icon list Click here

2: Themify Icons:

You can place Themify Icons just about anywhere using the icon’s class name. Themify Icons is designed to be used with inline elements we like the < span > tag for brevity. See example below:

<span class="icon-heart"></span>

For more information and list of all icons click here

5.15.Drop Cap Highlight

A drop cap (dropped capital) is a large capital letter used as a decorative element at the beginning of a paragraph or section. You can add dropcap-highlight to any paragraph by using one of below code

<span class="dropcap">W</span>
<span class="dropcap dropcap-border">W</span>
<span class="dropcap gray">W</span>
<span class="dropcap large">W</span>
<span class="dropcap square">W</span>
<mark> ipsum dolor sit amet</mark>
<del> Ex itaque voluptatum maiores</del>

5.16.Data table

We provide 5 types of table style. Use the below code to display Data table:

<table class="table [Add style class from below]">
  <thead>
    <tr>
      <th>Title 1 </th>
      <th>Title 2</th>
      <th>Title 3</th>
      <th>Title 4</th>
      <th>Title 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
  </tbody>
</table>

Just add table-bordered , table-striped , table-hover , table-dark , table-sm classes in table to change table style.

5.17.Lists style

List icon with class

Use the below code to display Lists style with class:

<ul class="list [Add style class from below]">
  <li> [ Your Content ] </li>
  <li> [ Your Content ] </li>
  <li> [ Your Content ] </li>
  <li> [ Your Content ] </li>
  <li> [ Your Content ] </li>
</ul>

You can change the List styles with using following classes :

Class	Description
`list-mark`	Display list with true mark icon.
`list-arrow`	Display list with arrow icon.
`list-hand`	Display list with hand icon.
`list-edit`	Display list with edit icon.

List icon with Font awesome icon

Use the below code to display Lists style with Font awesome icon :

5.18.Skills

Use the below code to display Skills:

<div class="skill [Add style class from below]">
  <div class="skill-bar" data-percent="96" data-delay="0" data-type="%">
    <div class="skill-title">General Consulting</div>
  </div>
</div>

Note You can set data-percent, data-delay and data-type acording to your requirement

You can change the skill styles with using following classes :

Class	Description
`skill-medium`	Display the skill-medium horizontal bars of skill
`skill-big`	Display the skill-big horizontal bars of skill
`skill-dark`	Display the skill-dark horizontal bars of skill
`text-white`	Display text-white horizontal bars of skill

See example below:

<div class="skill skill-medium">
  <div class="skill-bar" data-percent="96" data-delay="0" data-type="%">
    <div class="skill-title">General Consulting</div>
  </div>
</div>

Note If you want to use skill with dark background then you have to add text-white class with skill-bar class.

5.19.Social icon

Use the below code to display Social icon:

<div class="social-icons [Add style class from below]">
  <ul>
    <li class="social-rss"><a href="#"><i class="fa fa-rss"></i></a></li>
    <li class="social-facebook"><a href="#"><i class="fa fa-facebook"></i></a></li>
    <li class="social-twitter"><a href="#"><i class="fa fa-twitter"></i></a></li>
    <li class="social-vimeo"><a href="#"><i class="fa fa-vimeo"></i></a></li>
    <li class="social-youtube"><a href="#"><i class="fa fa-youtube"></i></a></li>
    <li class="social-instagram"><a href="#"><i class="fa fa-instagram"></i></a></li>
    <li class="social-stumbleupon"><a href="#"><i class="fa fa-stumbleupon"></i></a></li>
    <li class="social-lastfm"><a href="#"><i class="fa fa-lastfm"></i></a></li>
    <li class="social-pinterest"><a href="#"><i class="fa fa-pinterest"></i></a></li>
    <li class="social-gplus"><a href="#"><i class="fa fa-google-plus"></i></a></li>
    <li class="social-dribbble"><a href="#"><i class="fa fa-dribbble"></i></a></li>
    <li class="social-skype"><a href="#"><i class="fa fa-skype"></i></a></li>
    <li class="social-linkedin"><a href="#"><i class="fa fa-linkedin"></i></a></li>
    <li class="social-wordpress"><a href="#"><i class="fa fa-wordpress"></i></a></li>
    <li class="social-delicious"><a href="#"><i class="fa fa-delicious"></i></a></li>
    <li class="social-behance"><a href="#"><i class="fa fa-behance"></i></a></li>
    <li class="social-dropbox"><a href="#"><i class="fa fa-dropbox"></i></a></li>
    <li class="social-soundcloud"><a href="#"><i class="fa fa-soundcloud"></i></a></li>
    <li class="social-deviantart"><a href="#"><i class="fa fa-deviantart"></i></a></li>
    <li class="social-yahoo"><a href="#"><i class="fa fa-yahoo"></i></a></li>
    <li class="social-flickr"><a href="#"><i class="fa fa-flickr"></i></a></li>
    <li class="social-digg"><a href="#"><i class="fa fa-digg"></i></a></li>
    <li class="social-tumblr"><a href="#"><i class="fa fa-tumblr"></i></a></li>
    <li class="social-github"><a href="#"><i class="fa fa-github"></i></a></li>
    <li class="social-amazon"><a href="#"><i class="fa fa-amazon"></i></a></li>
    <li class="social-xing"><a href="#"><i class="fa fa-xing"></i></a></li>
    <li class="social-wikipedia"><a href="#"><i class="fa fa-wikipedia-w"></i></a></li>
    <li class="social-android"><a href="#"><i class="fa fa-android"></i></a></li>
    <li class="social-apple"><a href="#"><i class="fa fa-apple"></i></a></li>
  </ul>
</div>

You can change the social-icon styles with using following classes :

Class	Description
`color-hover`	Display color hover on social-icon
`social-border color-hover`	Display color hover on social-icon with square social-border
`social-border rounded color-hover`	Display color hover on social-icon with rounded social-border
`color`	Display social icon with color
`medium`	Display medium social icon

5.20.Testimonials

Use the below code to display testimonials:

<div class="testimonial [Add style class from below]">
  <div class="testimonial-avatar">
    <img alt="" src="image path">
  </div>
  <div class="testimonial-info"> Our old site was very information-heavy; the Webster helped to capture..... </div>
  <div class="author-info">
    <strong>15Twelve - <span>ThemeForest user</span></strong>
  </div>
</div>

You can change the testimonial styles with using following classes :

Class	Description
`testimonial`	Display default theme color class Display light set testimonial avatar in bottom
`testimonial light`	Display testimonial with white bg
`testimonial bottom_pos`	Display testimonial avtar in bottom. you can also use `light` and `theme-color` to disply light and theme bg color testimonial
`testimonial left_pos`	Display testimonial avtar in left side. you can also use `light` and `theme-color` to disply light and theme bg color testimonial
`testimonial clean`	This class display transparent background testimonial. If you use black background you need to use `text-white` class with testimonial and clean class

5.21.Tabs

Use the below code to display Tabs :

<div class="tab [Add style class from below]">
 <div class="tab">
  <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
      <a class="nav-link active show" id="home-tab" data-bs-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="profile-tab" data-bs-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="portfolio-tab" data-bs-toggle="tab" href="#portfolio" role="tab" aria-controls="portfolio" aria-selected="false">Portfolio</a>
    </li>
  </ul>
  <div class="tab-content" id="myTabContent">
    <div class="tab-pane fade active show" id="home" role="tabpanel" aria-labelledby="home-tab">
      <p>Tab content</p>
    </div>
    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
      <p>Tab content</p>
    </div>
    <div class="tab-pane fade" id="portfolio" role="tabpanel" aria-labelledby="portfolio-tab">
      <p>Tab content</p>
    </div>
  </div>
</div>

Note Make sure you use unique IDs for each Tab Items and Tab Container.

You can change the tab styles with using following classes :

Class	Description
`tab`	Tab Default
`tab nav-border`	Tab nav with border
`tab tab-border`	Tab with full border
`tab tab-border icon`	Tab with icon. You need to add icon in code.
`tab tab-border icon nav-center`	Tab nav center with icon. You need to add icon in code.
`tab tab-border icon text-end`	Tab nav right with icon. You need to add icon in code.
`tab round`	Tab round.
`tab round shadow`	Tab round shadow.
`tab tab-dropdown`	Tab with dropdown options.
`tab tab-vertical`	tab vertical
`tab tab-vertical nav-border`	tab vertical with nav border
`tab tab-vertical tab-border`	tab vertical with full border
`tab tab-vertical tab-border vertical-right`	tab right vertical

5.22.Team

Use the below code to display Team:

<div class="team [Add style class from below]">
  <div class="team-photo">
    <img class="img-fluid mx-auto" src="images/team/01.jpg" alt="">
  </div>
  <div class="team-description">
    <div class="team-info">
      <h5>Martin Smith</h5>
      <span>CEO</span>
    </div>
    <div class="team-contact">
      <span class="call"> +(704) 279-1249</span>
      <span class="email"> <i class="fa fa-envelope-o"></i> letstalk@webster.com</span>
    </div>
    <div class="social-icons color clearfix">
      <ul>
        <li class="social-facebook"><a href="#"><i class="fa fa-facebook"></i></a></li>
        <li class="social-twitter"><a href="#"><i class="fa fa-twitter"></i></a></li>
        <li class="social-instagram"><a href="#"><i class="fa fa-instagram"></i></a></li>
        <li class="social-linkedin"><a href="#"><i class="fa fa-linkedin"></i></a></li>
      </ul>
    </div>
  </div>
</div>

You can change the team styles with using following classes :

Class	Description
`team`	Default team style.
`team team-hover`	Display the team members image with social hover.
`team team-border`	Display team member with border. You can also use `team-hover` class with team-border class
`team team-bg`	Display the team members with background color. You can also use `team-hover` class with team-bg class
`team team-shadow`	Display the team members with shadow style. You can also use `team-hover` class with team-shadow class
`team team-round`	Display the team members image in round shape. You can also use `team-hover` class with team-round class. But social icon will disply out side the round.
`team team-round full-border`	Display the team members image in round and full border in team box. You can also use `team-hover` class with team-round and full-border class.

Note If you want to change the team style then it is necessary to write team class.

5.23.Gallery

Use the below code to display gallery:

<div class="isotope popup-gallery [Add column and style class from below]">
  <div class="grid-item">
    <div class="portfolio-item">
      [ IMAGES and YOUR CONTENT ]
    </div>
  </div>
  <div class="grid-item">
    <div class="portfolio-item">
      [ IMAGES and YOUR CONTENT ]
    </div>
  </div>
  <div class="grid-item">
    <div class="portfolio-item">
      [ IMAGES and YOUR CONTENT ]
    </div>
  </div>
</div>

You can change the gallery columns with using following classes :

Class	Description
`columns-1`	Display gallary in 1 columns
`columns-2`	Display gallary in 2 columns
`columns-3`	Display gallary in 3 columns
`columns-4`	Display gallary in 4 columns
`columns-5`	Display gallary in 5 columns
`no-title`	Disable hover effect
`no-padding`	No padding between gallery

5.24.Modal Popovers

The Modal plugin is a dialog box/popup window that is displayed on top of the current page. Use the below code to display modal:

 <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal"> Launch demo modal </button>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <div class="modal-title" id="exampleModalLabel">
           <div class="section-title mb-10">
            <h6>EXPERTISE</h6>
            <h2>Modal title</h2>
            <p>Modal content.</p>
          </div>
        </div>
        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
       <span class="dropcap square">Y</span>modal body content
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Class	Description
`modal-dialog modal-sm`	Small Modal Popover
`modal-dialog modal-md`	Medium Modal Popover
`modal-dialog modal-lg`	Large Modal Popover

5.25.Newsletter

Use the below code to display newsletter:

<div class="newsletter text-center [Add style class from below]">
  <div id="mc_embed_signup_scroll">
    <form action="php/mailchimp-action.php" method="POST" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate">
      <div id="msg"> </div>
      <div id="mc_embed_signup_scroll_2">
        <input id="mce-EMAIL" class="form-control" type="text" placeholder="Email address" name="email1" value="">
      </div>
      <div id="mce-responses" class="clear">
        <div class="response" id="mce-error-response" style="display:none"></div>
        <div class="response" id="mce-success-response" style="display:none"></div>
      </div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
      <div style="position: absolute; left: -5000px;" aria-hidden="true">
        <input type="text" name="b_b7ef45306f8b17781aa5ae58a_6b09f39a55" tabindex="-1" value="">
      </div>
      <div class="clear">
        <button type="submit" name="submitbtn" id="mc-embedded-subscribe" class="button border mt-20 form-button">  Get notified </button>
      </div>
    </form>
  </div>
</div>

You can change the newsletter styles with using following classes :

Class	Description
`newsletter`	Newsletter default
`newsletter francy`	Display button inside inside
`newsletter newsletter-box`	Display newsletter in box style.
`newsletter newsletter-box newsletter-border`	Display newsletter in box style with border
`newsletter newsletter-box gray-bg`	Display newsletter in box style with gray bg
`newsletter newsletter-box theme-bg`	Display newsletter in box style with theme color bg

Note If you want to change newsletter style then it is necessary to write newsletter class.

5.26.MailChimp

MailChimp is the world’s leading email marketing platform. Visit MailChimp website to know more.

For the configuration with Mailchimp, you must need your API Key and the ID of your list. Be sure that the form created in your MailChimp dashboard is asking only the email address and not the name, surname or something else.

Get your API Key:

Go to your mailchimp account. click on your name and click on profile.
Click on the Extras drop-down menu and choose API keys.
Copy an existing API key or click the Create new one.

See the screenshot below:

Get your ID:

Go to your mailchimp dashboard and click on Lists on the top left.
Click on your list name
Click on setting tab and choose List name and defaults. find the unique List ID for the list

See the screenshot below:

Note Be careful that your list asks just the email address, Lists > Signup forms > General forms > Build it

Set your API and ID:

Go to your mailchimp-action.php. (Path: php/mailchimp-action.php)
Edit in text editor and fill up the API_KEY and LIST_ID fields.

5.27.Pie Chart

Use the below code to display Pie Chart:

<div class="row">
  <div class="col-md-3 col-sm-6 text-center mb-50">
    <span class="round-chart" data-percent="95" data-width="20" data-color="#84ba3f"> <span class="percent"></span> </span>
    <h5>SKILLS</h5>
  </div>
  <div class="col-md-3 col-sm-6 text-center mb-50">
    <div class="round-chart" data-percent="89" data-width="20" data-color="#84ba3f">  <span class="percent"></span> </div>
    <h5>CONTENT</h5>
  </div>
  <div class="col-md-3 col-sm-6 text-center mb-50">
    <div class="round-chart" data-percent="95" data-width="20" data-color="#84ba3f">  <span class="percent"></span> </div>
    <h5>WEB SITES</h5>
  </div>
  <div class="col-md-3 col-sm-6 text-center mb-50">
    <div class="round-chart" data-percent="66" data-width="20" data-color="#84ba3f"> <span class="percent"></span> </div>
    <h5>EMPLOYEES</h5>
  </div>
</div>

Pie chart Advanced Options:

data-percent: Change the percent
data-color: Change the color
data-size: Change the size
data-trackcolor: Change the trackcolor
data-width: Change the width

5.28.Select

Use the below code to display Select box:

<div class="box">
  <select class="fancyselect [Add style class from below]">
    <option value="1">Some option</option>
    <option value="2">Another option</option>
    <option value="3" disabled>option disabled</option>
    <option value="4">Potato</option>
  </select>
</div>

You can change the Select styles with using following classes :

Class	Description
`fancyselect`	Default select box.
`fancyselect wide`	Display select box in full width.
`fancyselect right`	Display select box in right side.
`fancyselect small`	Display select box small.

Note Use disabled keyword in option to disable particular selection.

5.29.Section title

We provide many title style with the template. Below are example of code. Use one of below style to maintain title style.

Default Title with animation

<div class="section-title">
  <h6>Your Sub Title</h6>
  <h2 class="title-effect">Your Title</h2>
  <p>Titles Description </p>
</div>

Default Title without animation

<div class="section-title">
  <h6>Your Sub Title</h6>
  <h2>Your Title</h2>
  <p>Titles Description </p>
</div>

Simple Title with Description

<div class="section-title text-center">
  <h6 class="subtitle">Sub title </h6>
  <h2 class="title">Your title</h2>
  <p>Titles Description</p>
</div>

Title with Bottom line

<div class="section-title line center text-center">
  <h6 class="subtitle">Sub title </h6>
  <h2 class="title">Your title</h2>
</div>

Title with Bottom line Left

<div class="section-title line left">
  <h6 class="subtitle">Sub title </h6>
  <h2 class="title">Your title</h2>
</div>

Title with Bottom line Right

<div class="section-title line right text-end">
  <h6 class="subtitle">Sub title </h6>
  <h2 class="title">Your title</h2>
</div>

Title with two color sub heading

<div class="section-title text-center">
  <h6 class="subtitle">Why you'll <span class="theme-color"> love our Template? </span> </h6>
  <h2 class="title">Your title </h2>
</div>

Title with two color

<div class="section-title text-center">
  <h6 class="subtitle">Sub title </h6>
  <h2 class="title">See our awesome <span class="theme-color"> Core Features </span> </h2>
</div>

Title with background color

<div class="section-title  text-center">
  <h6 class="subtitle">Sub title </h6>
  <h2 class="title">See our awesome <span class="theme-bg"> Core Features </span> </h2>
</div>

Title with 2 color border botttom

<div class="section-title line-dabble">

  <h4 class="title">See our awesomeCore Features</h4>

</div>

5.30.Separator

You can add this helper class to any element in your HTML code to add Separator line. Simply add one of below code where you want to add the line. See example below:

<div class="divider"></div>

<div class="divider dotted"></div>

<div class="divider dashed"></div>

<div class="divider double"></div>

<div class="divider outset"></div>

<div class="divider icon"> <span> Divider </span> </div>

<div class="divider icon"> <i class="fa fa-bell-o"></i> </div>

<div class="divider icon left"> <i class="fa fa-bell-o"></i> </div>

<div class="divider icon right"> <i class="fa fa-bell-o"></i> </div>

<div class="divider medium"></div>

<div class="divider small"></div>

You can also use hr tag for default Separator line.

5.31.Video Audio

Use one of the below code to display Video and Audio:

<!-- Youtube  -->
<div class="js-video [youtube, widescreen]">
  <iframe src="https://www.youtube.com/embed/nrJtHemSPW4?rel=0" allowfullscreen> </iframe>
</div>

<!-- Video -->
<div class="js-video [vimeo, widescreen]">
  <iframe src="https://player.vimeo.com/video/176916362"></iframe>
</div>

<!-- HTML5 -->
<video style="width:100%;height:100%;" id="player1" poster="video/video.jpg" controls preload="none">
  <source type="video/mp4" src="video/video.mp4" />
  <source type="video/webm" src="video/video.webm" />
  <source type="video/ogg" src="video/video.ogv" />
</video>

<!-- Audio -->
<div class="audio-video">
  <audio id="player2" src="video/audio.mp3"> </audio>
</div>

<!-- Audio Soundcloud -->
<iframe style="height: 300px; width: 100%;" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/118951274&amp;auto_play=false&amp;hide_related=false&amp;w_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true"></iframe>

<!-- Bootstrap embed Youtube size 21by9 -->
<div class="embed-responsive embed-responsive-21by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/nrJtHemSPW4?rel=0" allowfullscreen></iframe>
</div>

<!-- Bootstrap embed Youtube size 1by1 -->
<div class="embed-responsive embed-responsive-1by1">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/nrJtHemSPW4?rel=0" allowfullscreen></iframe>
</div>

6.1.Browser Support

Webster supports all major Browsers like Google Chrome, Mozilla Firefox, Safari, Opera, Microsoft Edge, Internet Explorer 10 and above.

6.2.How to rate this item

If you like our theme and support, Please do not forget to rate it with 5 stars in your Downloads section and write a review in Comments as it will add more value to our services!

Kindly visit here: http://themeforest.net/downloads and find “Rate this item” below the download button and rate out the theme.

Advance Thanks in Anticipation!

6.3.Change Log

Version 5.0.4 [09 Apr 2022]

Added: Menu Center New Header Option Add
Fixed: Testimonial Section Jarallax Background Image Hide Issue Fix when RTL is enabled In Gym Demo.
Fixed: Testimonial Section Jarallax Background Image Hide Issue Fix In Tattoo Demo.

Version 5.0.3 [14 Feb 2022]

Updated: Owl Carousel updated to v2.3.4
Fixed: Fixed an issue with hiding images in Owl Carousel when RTL is enabled.

Version 5.0.2 [09 Feb 2022]

Updated: Documentation
Fixed: Fixed Jarallax deprecated data-jarallax JSON options.
Various Minor code/formatting improvements and fixes.

Version 5.0.1 [09 Feb 2022]

Fixed: Fixed shortcode.css import loop error.
Fixed: Fixed Jarallax deprecated data-jarallax JSON options.
Fixed: Fixed source-map notice.
Updated: Jarallax updated to v1.12.8.
Removed: Removed Slider Revolution jQuery Visual Editor Addon.
Various Minor code/formatting improvements and fixes.

Version 5.0.0 [14 Aug 2021]

Webster 5.0.0 update is focused on plugins update and minor bug fixes.

Updated: Bootstrap to 5.0.2 Version
Updated: Popper js to 2.9.3 Version
Updated: Jquery to 3.6.0 Version
Updated: Documentation
Fixed: All HTML files were updated
Fixed: CSS files were updated
Fixed: Multiple minor responsive spacing bug fixes.
Fixed: SASS Files were updated.
Fixed: RTL files were updated.
Removed: Instagram feed

Version 4.0.2 [21 Feb 2020]

Fixed: Mobile sticky menu flicking issue.

Version 4.0.1 [17 July 19]

Webster 4.0.1 update is focused on plugins update and minor bug fixes.

Fixed: Multiple minor responsive spacing bug fixes.
Fixed: index-gym.html tab issue
Updated: Home page 1 footer removed snazzy map and added google iframe map
Updated: jQuery to the 3.4.1 Version
Updated: bootstrap to 4.3.1 Version
Removed: Smooth scroll JS removed from plugins-jquery.js

Version 4.0 [21 November 18]

Added: SASS Files
Added: RTL files

Version 3.9 [30 April 18]

Added: Homepage Business Corporate
Added: Homepage Web agency
Added: Homepage Corporate 02
Added: Homepage Creative Agency 02
Added: Homepage Digital marketplace
Added: Homepage Web agency
Added: Homepage Portfolio creative
Added: widget page template
Added: Instagram feed
Added: Flickr feed

Version 3.7 [21 April 18]

Added: Marketing category homepage with 10 detaied inner page templates
Added: Bitcoin: 5 inner page templates
Added: Barber: 6 inner page templates
Added: Cafe: 4 inner page templates
Added: Conference: 5 inner page templates
Added: Interior-design: 5 inner page templates
Added: Skateboard: 6 inner page templates
Added: Spa: 5 inner page templates
Added: Tattoo: 4 inner page templates
Added: Top bar dark page
Added: Sticky sidebar page
Added: event-calendar.html template

Version 3.5.1 [16 April 18]

Fixed: Mega menu 2 column responsive offset issue.

Version 3.5 [14 April 18]

Added: Google custom search
Added: Sticky sidebar (check on page-left-sidebar.html)
Added: Construction all inner page added
- about.html
- blog.html
- contact.html
- projects.html
- service.html
- team.html
Added: Medical all inner page added
- about.html
- appointment.html
- blog.html
- contact.html
- doctors.html
- schedule.html
- service.html
Fixed: One-page left menu responsive issue.

Version 3.4 [27 MARCH 18]

Added: New Homepage job Board
Added: New Homepage listing Directory
Added: New Homepage wedding card
Added: Menu active color dynamically(Now don’t need to add ‘active’ class manually on all page)

Version 3.3.1 [08 March 18]

Fixed- Minor bugs

Version 3.3 [08 March 18]

Webster 3.3 update is focused on new Home page and inner page. We have added 3 new home pages and 3 new inner pages in this update.
Added: New Homepage Tattoo
Added: New Homepage Spa
Added: New Homepage barber
Added: process-02 Page Layout
Added: Portfolio-single Page Layout
Added: case-study Page Layout
Fixed: Mega menu item hover shake issue

Version 3.2 [24 February 18]

Webster 3.2 update is focused on new inner pages. We have added 14 new pages in this update.
Added: service-05 Page Layout
Added: service-06 Page Layout
Added: service-04 Page Layout
Added: service-07 Page Layout
Added: service-detail Page Layout
Added: service-detail-01 Page Layout
Added: contact-04 Page Layout
Added: contact-05 Page Layout
Added: testimonials Page Layout
Added: search-result Page Layout
Added: search-no-result Page Layout
Added: cookie Page Layout
Added: invoice Page Layout
Added: icons Page Layout
Added: counter small option

Version 3.0.1 [14 February 18]

Added: Dark overly page title
Added: Blank page
Updated: animate.css to Latest Version
Updated: Bootstrap-datatables plugin to Latest Version
Updated: Bootstrap-datetimepicker plugin to Latest Version
Updated: isotope plugin to Latest Version
Updated: masonry plugin to Latest Version
Updated: nicescroll plugin to Latest Version
Updated: slick plugin to Latest Version
Updated: Calander design update
Fixed: Color skins issue
Fixed: Minor Responsive issue
Fixed: Tab active color issue
Fixed: Action box vertical middle issue
Fixed: Fancy Newsletter button issue in safari
Fixed: revslider-portfolio-viewer.html page border issue

Version 3.0 [13 February 18]

We have upgraded webster to Bootstrap 5, and Bootstrap 5 is a major rewrite of the entire project. We recommended you to follow bootstrap Migration Guide if you are upgrading Webster 2.8 (or lower) to Webster 3.

Added: Bootstrap 5 Components
Added: 82 Revolution Slider Hero Templates
Added: Medical, juice and pizza Homepage slider added in webster revolution slider exported file
Added: 82 Revolution Slider Hero Templates added revolution hero slider exported file
Added: Popper.js
Updated: Bootstrap 3.3.7 to v5.0.0 Stable
Updated: jQuery 1.12.4 to v3.6.0
Updated: Revolution slider 5.4.5.2 to 5.4.6.3
Updated: “.progress-bar” code clases change to “.skill-bar” (As bootstrap 5 added .progress-bar class)
Updated: One page menu code. Now you can change mega menu and one page with only 1 class.
Updated: All shortcode with “.border” class name update with “.shortcode-name-border” (As bootstrap 5 added .border class)
Updated: Search code: added button tag
Updated: Action box code for responsive UI
Updated: Home 8 banner video set in loop
Updated: shop-shopping-cart page
Updated: Documentation
Updated: Code/formatting improvements and fixes in bootstrap 5 affected classed
Improved: Set equal height to most of the boxes for better responsive UI
Fixed: Revolution slider went black after few minutes
Fixed: Background image shakes on scroll (Mozilla Firefox) in one-page-portfolio-parallax
Fixed: GYM Revolution slider font issue
Fixed: Many CSS errors fixed based on W3c Validator
Removed: All border-radius 50% (change it to 3px border radius)

Version 2.8.1 [22 January 18]

Fixed: Input style in chart-financial template
Fixed: Template color issue
Improved: Registration form time and date selection

Version 2.8 [20 January 18]

Added: 50+ Chart pages Templates
Added: New Homepage Bitcoin
Added: New Homepage Skateboard
Added: New Homepage Burger
Added: New Homepage Juice
Added: data-autospeed to control carousel speed
Added: data-smartspeed to control carousel smart speed
Fixed: Owl carousel arrow vertical align
Update: Improved documentation for One-page menu, Logo height setting, change raindrops color and new carousel control data

Version 2.5 [13 January 18]

Added: New Homepage Hotel
Added: New Homepage Fish
Added: New Homepage Book landing
Added: New Homepage Pizza
Added: New Homepage Product
Added: New Homepage Plumber
Added: Tab nav border top, left and right option
Added: Team hover-2, Team Dark, Team Round shadow, Team Round small and Team Round small shadow
Fixed: Light header sticky blinking issue
Fixed: Tab nav border bottom spacing issue

Version 2.0 [06 January 18]

Added: New Homepage Shop Modern
Added: New Homepage Shop Creative
Added: New Homepage Shop Minimal
Added: New Homepage Shop Classic
Added: New Homepage Shop Simple
Added: New Homepage Blog
Added: New Homepage Blog 02
Added: New Homepage Blog Boxed
Added: New Homepage Blog Fashion
Added: New Homepage Blog Video
Added: New Homepage Magazine
Added: New Homepage Magazine 02
Added: New Homepage Magazine 03
Added: no-radius class for accordion
Added: New heading style
Update: Minor code/formatting improvements and fixes

Version 1.5 [30 December 17]

Added: 15 New Login Page Layouts
Added: 15 New Signup Page Layouts
Added: 2 New Login & Signup combo Layouts
Added: about 4 Page Layout
Added: about 5 Page Layout
Added: about 6 Page Layout
Added: about CEO Page Layout
Added: about me 2 Page Layout
Added: about team Page Layout
Added: about-our-mission Page Layout
Added: Shop single 02 Page Layout
Added: Shop checkout Page Layout
Added: shop wishlist Page Layout
Added: shop shopping cart Page Layout
Added: FAQ 2 Page Layout
Added: FAQ 3 Page Layout
Added: White overlay title Page Layout
Added: Team overly page Layout
Added: Accordion collapse on double click
Fixed: Issue with Page Title blink on scroll
Fixed: Issue with frame layout on One Page Agency 02 Layout
Update: nice-select.css for more than 6 item
Update: mega_menu.css drop-down font size
Update: Improved documentation
Update: Minor code/formatting improvements and fixes

Version 1.1 [20 December 17]

Added: Error-404-03
Added: Error-404-04
Added: Error-404-05
Added: Error-404-06
Added: Error-404-07
Added: Error-404-08
Added: Error-404-09

Version 1.0.9 [16 December 17]

Added: Coming soon 05
Added: Coming soon 06
Added: Coming soon 07
Added: Coming soon 08
Added: Coming soon 09
Added: Coming soon 10
Added: Coming soon 11
Added: Coming soon 12

Version 1.0.8 [13 December 17]

Added: New homepage – Agency 2
Added: New homepage – Portfolio parallax

Version 1.0.7 [12 December 17]

Added: New homepage – Law

Version 1.0.6 [08 December 17]

Added: New homepage – Movie
Added: New homepage – Agency

Version 1.0.5 [06 December 17]

Added: New homepage – Architecture

Version 1.0.4 [05 December 17]

Added: New homepage – Conference
Added: New homepage – Christmas Landing Page
Added: Christmas Coming soon page
Added: Implement google fonts in HTML
Remove: Remove font import from typography.css
Update: Folder structure for demo categories
Update: Improved documentation for Folder structure and font
Update: Minor code/formatting improvements and fixes

Version 1.0.3 [05 December 17]

Added: New Homepage – Marketing Agency
Added: New Homepage – Personal Dark
Update: Minor code/formatting improvements and fixes

Version 1.0.2 [27 November 17]

Added: Light Portfolio homepage
Added: Light Portfolio Single page
Added: Light Portfolio About page
Added: Dark Portfolio homepage
Added: Dark Portfolio Single page
Added: Dark Portfolio About page
Added: Smooth Scroll
Added: #footer-fixed id for fix footer (More info in documentation)
Fixed: Multiple Responsive and Browser related issue
Update: Improved documentation for google map and fix footer
Update: Minor code/formatting improvements and fixes

Version 1.0.1 [23 November 17]

Update: Minor code/formatting improvements and fixes.

Version 1.0.0 [19 November 17]

Initial Release

7.Source & Credits

All images and videos are for preview purposes only and are not included in the download files. Images are of copyrights under Creative Commons CC0.

Images

Shutterstock Shutterstock
Pexels Pexels
Unsplash Unsplash

JavaScripts

Slider Revolution Responsive jQuery Plugin Premium Plugin- Included with template, free license using inside Webster Template
Mega Menu Premium Plugin- Included with template, free license using inside Webster Template
Jquery
Owl Carousel 2
Magnific Popup
isotope
Jquery appear
Counter
Countdown
Easy-pie-chart
mediaelementjs
zenith-slider
nicescroll
raindrops
slick
typer
modernizr
WOW
jqueryui
jarallax
snazzy maps
three.js
chart.js
fullcalendar
Social Stream flicker
Spectragram for Instagram

CSS & Fonts

Bootstrap
Font Awesome
Animate CSS
themify icon
Google Fonts
— Montserrat
— Source Sans Pro
— Poppins
— Dosis
— Alegreya
— Roboto
— Playfair Display
— Noto Sans
and more…