Getting Started

Before you get started, please be sure to always check out these documentation files. We outline all kinds of good information, and provide you with all the details you need know to use Metatech HTML Template.

If you are unable to find your answer here in the documentation, please contact us on our Support Forum or directly from our themeforest account

Please don't forget to rate Metatech with 5 stars and leave a nice review, it means a lot to us.

Introduction

Follow the steps below to setup your site template:

Unzip the downloaded package and open the /HTML folder to find all the template files. You will need to upload these files to your hosting web server using FTP in order to use it on your website

Below is the folder structure and needs to be uploaded to your website root directory

HTML/css - Stylesheet files
HTML/fonts – Icon font files
HTML/images - Image files
HTML/js - Javacript files
HTML/scss - Scss files

You should upload all or specific HTML files as per your need

You're now good to go..! Start adding your content/images and generate your beautiful brand new website for your awesome users

HTML Structure

Metatech follows a simple and easy to customize coding structure. Here is the sample for your reference

<!doctype html>
<html class="no-js" lang="en">
<head>
	
	<meta charset="utf-8">
	<!-- description -->
	<meta name="description" content="">
	<!-- keywords -->
	<meta name="keywords" content="">
	<!-- favicon -->

	<!-- style -->

</head>
<body class="light-mode" id="theme" data-color="color-theme-yellow">

	<div class="preloader"></div>

	
	<!-- main wrap start-->
	<div class="main-wrapper">

		<!-- header wrapper -->
		<div class="header-wrapper w-100"">
		...
		</div>
		<!-- header wrapper -->

		
		.
		.
		.

		
	<!-- main wrap end -->	
	</div>

	<!-- javascript libraries -->
	</body>
</html>

<!-- Favicon -->
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.png">

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

Bootstrap Color

For change the Bootstrap Color you need to change variable.scss

primary

secondary

success

info

warning

danger

light

dark

Color Pattern

To change the color pattern using class name as mention in body tag.

color-theme-red

color-theme-green

color-theme-blue

color-theme-pink

color-theme-yellow

color-theme-orange

color-theme-gray

color-theme-brown

color-theme-darkgreen

color-theme-deeppink

color-theme-cadetblue

color-theme-darkorchid

Typography

To change the text color using class name in h1,h2.h3,h4,h5,h6,p Tag

text-gray-100

text-gray-200

text-gray-300

text-gray-400

text-gray-500

text-gray-600

text-gray-700

text-gray-800

text-gray-900

Display .display1-size

Display .display2-size

Display .display3-size

Display .display4-size

Headline .font-xsssss

Headline .font-xssss

Headline .font-xsss

Headline .font-xss

Headline .font-xs

Headline .font-sm

Headline .font-md

Headline .font-lg

Headline .font-xl

Headline .font-xxl

Font Weight .fw-100

Font Weight .fw-200

Font Weight .fw-300

Font Weight .fw-400

Font Weight .fw-500

Font Weight .fw-600

Font Weight .fw-700

Font Weight .fw-800

Font Weight .fw-900

RTL Stucture

To change the favicon image of your site, you need to load a new ICO image in a site root or to point out a new address of the image.

<!doctype html>
<html lang="en" dir="rtl">
<head>
    
    <meta charset="utf-8">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Metatech - Online Course and LMS HTML Template</title>

    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/style-rtl.css">

</head>
<body class="light-mode" id="theme" data-color="color-theme-yellow">

    <div class="preloader"></div>

    
    <!-- main wrap start-->
    <div class="main-wrapper">

        <!-- header wrapper -->
        <div class="header-wrapper"">
        ...
        </div>
        <!-- header wrapper -->

        
        .
        .
        .

        
    <!-- main wrap end -->   
    </div>

    <!-- javascript libraries -->
    

    <script src="../js/plugin.js"></script>
    <script src="../js/custom.js"></script>
    <script src="../js/main.js"></script>
    </body>
</html>

Change Log

To change the favicon image of your site, you need to load a new ICO image in a site root or to point out a new address of the image.

Credits

Credits to other libraries and frameworks we have used in this template.

jQuery (https://jquery.com/)

Bootstrap (https://getbootstrap.com/)

Animate On Scroll Library (https://michalsnik.github.io/aos/)

Feather Icon (https://feather.com/)

Themify Icon (https://themify.me/themify-icons/)

Apex Chart (https://apexcharts.com/)

Owl Carousel (https://owlcarousel2.github.io/OwlCarousel2/)

Support

Thanks for choosing This Template Metatech

To get support for our theme, please write us your problem using our support form or email to: http://uitheme.net/

We aim to give you our support within 24 hours and be as customer-friendly as possible, so please be patient and hang on tight till we get back to you. Please note that we are not available at weekends.

Chart js

While Chart brings you the goodness of open-source charts, FusionCharts offers additional visualizations for your dashboards.

1. Include the library in your page

<!-- SCRIPT -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js"></script>

2. After loading all the files, you are ready to build your first chart. To create a chart with minimal configuration, write as follows

<!-- SCRIPT -->
const ctx = document.getElementById('lineChart');

new Chart(ctx, {
type: 'line',
data: {
  labels: ['Sep', ' ', ' ', 'Dec', ' ', ' ', 'Mar', ' ', ' ', 'Jun',' ', ' ', 'Dec', ' ', ' ', 'Mar', ' ', ' ', 'Jun'],
  datasets: [{
    label: '# of Votes',
    data: [0, 10000, 13000, 8000, 25000, 20000 , 30000, 35000, 23000, 16000, 20000, 21000, 20000,25000, 20000,10000, 13000, 8000, 25000, 20000 , 30000, 35000, 23000, 16000, 20000, 21000, 20000,25000, 20000 ],
    borderWidth: 3,
    borderColor:'#1E74FD',
    tension: 0.4
  }]
},
options: {
    responsive: true,
    // maintainAspectRatio: false,
    plugins: {
        legend: {
            display: false,
        },
    },
    scales: {
      x: {
        stacked: true,
        ticks: { 
            color: '#555',
            font: {
                weight:'600',
                size:'14px',
            }
        },
        grid: {
            display:false
        },
      },
      y: {
        display:true,
        stacked: true,
        ticks: { 
            color: '#555',
            font: {
                weight:'600',
                size:'14px',
            }
        },
      }
    },
    title: {
        display: false
    }
}
});

3. HTML file add div

<!-- SCRIPT -->
<div id="lineChart"></div>

Owl Carousel

1. Include css library in your main.scss page

<!-- CSS -->
@import "./../vendor/owl-carousel/css/owl.carousel.min.css";
@import "./../vendor/owl-carousel/css/owl.theme.default.css";

2. Include js library in your page at the bottom

<!-- SCRIPT -->
<script type="text/javascript" src="js/plugin.js"></script>

<!-- HTML -->
<div class="owl-carousel category-card owl-theme">
    <div class="item"></div>
    .
    .
</div>

Feather Icon

Simply beautiful open source icons

1. Include css library in your page

<!-- CSS -->
@import "./../vendor/icon/feather.css";

<!-- HTML -->
<i class="feather-layer"></i>

Bootstrap Icon

Themify Icons is a complete set of icons for use in web design and apps, consisting of 320+ pixel-perfect, hand-crafted icons that draw inspiration from Apple iOS 7 - available to the public, 100% FREE! You may use or distribute it for any purpose, whether personal or commercial. This icon set is a must have tool for web designers and developers.

1. Include css library in your page

<!-- CSS -->
@import "./../vendor/icon/bootstrap-icons.css";

<!-- HTML -->
<i class="bi bi-layer"></i>