#### LearnUp Online Learning HTML Template Documentation

### 1. Introduction

LearnUp is clean, modern and unique HTML template that has beautiful design and unique features. This will be the best suited for your educational purpose website and portal like university, college, school, kindergarten, online courses, blog, academy, courses, education, education center, education HTML, tuition, tutoring, business, events, institute, learning, teacher and much more.

We put a lot of love and effort to make LearnUp a useful template for everyone and now It comes with 8+ unique home page & colors. We are keen to release continuous long term updates and lots of new features will be coming soon in the future releases. Once you purchased LearnUp Template, you will be entitled to free download of all future updates for the same license.

Author: Themezhub
Contact: Themezhub@gmail.com
website: https://Themezhub.com

NOTE: A single license can be used only for one domain or client. Each use of the template requires a separate license. We hope you will follow the rules as it will help us to continue supporting our template and providing a free future updates.

### 1.2 Installation Guide

This is the simple static HTML template so no need any headech to install it.
Follow it very simple steps:
Main(demo folder) + assets (folder) = Enjoy your demo.

### 3. Beginning of Page

Below code is used at the beginning of all HTML pages to detect Internet Explorer browser version and set a spesific class applied to Internet Explorer versions.

    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8" />
    		<meta name="author" content="www.frebsite.nl" />
    		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    		<title>LearnUp - Online Course & Education HTML Template</title>

    		<!-- Custom CSS -->
    		<link href="assets/css/styles.css" rel="stylesheet">

    		<!-- Custom Color Option -->
    		<link href="assets/css/colors.css" rel="stylesheet">

    	</head>

### Logo

    <a class="nav-brand" href="#">
    	<img src="assets/img/logo.png" class="logo" alt="" />
    </a>

### Color option

    To Change Main color, Open styles.css inside assets/css/styles.css and change maincolor code.
    	--maincolor:#0987f5;
    	--graycolor:#edf1fb;
    	--navcolor:#00305c;
    	--darkcolor: #13293D;
    	--headingcolor: #192839;
    	--bodycolor: #40566d;
    	--mutedcolor:#768ea7;
    	--greencolor:#4caf84;
    	--redcolor:#e44614;
    	--forsale:#e23c1f;
    	--forrent:#009868;
    	--featuredtag:#e23c1f;
    	--verified:#009868;
    	--superagent:#0065ff;
    	--new:#e23c1f;
    	--propertytype:#0987f5;
    	--primaryfont:'Jost', sans-serif;
    	--formborder:#e0ecf5;
    	--formbg:#edf1fb;
    	--form-color:#3b515a;
    	--inversecolor:#00305c;
    	--footerbg:#13293D;

### Page Title

    <!-- ============================ Page Title Start================================== -->
    <section class="page-title">
    	<div class="container">
    		<div class="row">
    			<div class="col-lg-12 col-md-12">

    				<div class="breadcrumbs-wrap">
    					<h1 class="breadcrumb-title">Who We are?</h1>
    					<nav aria-label="breadcrumb">
    						<ol class="breadcrumb">
    							<li class="breadcrumb-item"><a href="#">Home</a></li>
    							<li class="breadcrumb-item active" aria-current="page">About Us</li>
    						</ol>
    					</nav>
    				</div>

    			</div>
    		</div>
    	</div>
    </section>
    <!-- ============================ Page Title End ================================== -->

### Education Style 1

    <div class="education_block_grid">

    	<div class="education_block_thumb">
    		<a href="course-detail.html"><img src="assets/img/course-1.jpg" class="img-fluid" alt=""></a>
    		<div class="cources_price">$510</div>
    		<div class="education_ratting"><i class="fa fa-star"></i>4.8 (62)</div>
    	</div>

    	<div class="education_block_body">
    		<h4 class="bl-title"><a href="course-detail.html">Tableau for Beginners: Get CA Certified, Grow Your Career</a></h4>
    		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore. </p>
    	</div>

    	<div class="education_block_footer">
    		<div class="education_block_author">
    			<div class="path-img"><a href="instructor-detail.html"><img src="assets/img/user-1.jpg" class="img-fluid" alt=""></a></div>
    			<h5><a href="instructor-detail.html">Daksh Preet</a></h5>
    		</div>
    		<span class="education_block_time"><i class="ti-time mr-1"></i>4h 30min</span>
    	</div>

    </div>

### Education Style 2

    <div class="education_block_grid style_2">

    	<div class="education_block_thumb n-shadow">
    		<a href="course-detail.html"><img src="assets/img/co-1.jpg" class="img-fluid" alt=""></a>
    	</div>

    	<div class="education_block_body">
    		<h4 class="bl-title"><a href="course-detail.html">Tableau For Beginners: Get CA Certified, Grow Your Career</a></h4>
    	</div>

    	<div class="cources_facts">
    		<ul class="cources_facts_list">
    			<li class="facts-1">Expert</li>
    			<li class="facts-2">Professional</li>
    			<li class="facts-5">Design</li>
    		</ul>
    	</div>

    	<div class="cources_info">
    		<div class="cources_info_first">
    			<ul>
    				<li><strong>1,84684 Views</strong></li>
    				<li class="theme-cl">3h 30min</li>
    			</ul>
    		</div>
    		<div class="cources_info_last">
    			<h3>$69.77</h3>
    		</div>
    	</div>

    	<div class="education_block_footer">
    		<div class="education_block_author">
    			<div class="path-img"><a href="instructor-detail.html"><img src="assets/img/user-1.jpg" class="img-fluid" alt=""></a></div>
    			<h5><a href="instructor-detail.html">Shaurya Preet</a></h5>
    		</div>
    		<span class="education_block_time"><i class="ti-calendar mr-1"></i>1 hour ago</span>
    	</div>

    </div>

### Education Style 3

    <div class="education_block_grid style_2">

    	<div class="education_block_thumb">
    		<a href="course-detail.html"><img src="assets/img/course-1.jpg" class="img-fluid" alt=""></a>
    		<div class="education_ratting"><i class="fa fa-star"></i>4.8 (70)</div>
    	</div>

    	<div class="education_block_body">
    		<h4 class="bl-title"><a href="course-detail.html">Tableau For Beginners: Get CA Certified, Grow Your Career</a></h4>
    	</div>

    	<div class="cources_info_style3">
    		<ul>
    			<li><i class="ti-eye mr-2"></i>7482 Views</li>
    			<li><i class="ti-control-skip-forward mr-2"></i>63 Lectures</li>
    			<li><i class="ti-time mr-2"></i>6h 30min</li>
    		</ul>
    	</div>

    	<div class="education_block_footer">
    		<div class="education_block_author">
    			<div class="path-img"><a href="instructor-detail.html"><img src="assets/img/user-1.jpg" class="img-fluid" alt=""></a></div>
    			<h5><a href="instructor-detail.html">Dhananjay Preet</a></h5>
    		</div>
    		<div class="cources_price_foot"><span class="price_off">$79.0</span>49.99</div>
    	</div>

    </div>

### Education Style 4

    <div class="education_block_grid style_2">

    	<div class="education_block_thumb n-shadow">
    		<a href="course-detail.html"><img src="assets/img/co-1.jpg" class="img-fluid" alt=""></a>
    		<div class="cources_price">$520</div>
    	</div>

    	<div class="education_block_body">
    		<h4 class="bl-title"><a href="course-detail.html">Tableau For Beginners: Get CA Certified, Grow Your Career</a></h4>
    	</div>

    	<div class="cources_info_style3">
    		<ul>
    			<li><i class="ti-eye mr-2"></i>8682 Views</li>
    			<li><i class="ti-time mr-2"></i>6h 40min</li>
    			<li><i class="ti-star text-warning mr-2"></i>4.7 Reviews</li>
    		</ul>
    	</div>

    	<div class="education_block_footer">
    		<div class="education_block_author">
    			<div class="path-img"><a href="instructor-detail.html"><img src="assets/img/user-1.jpg" class="img-fluid" alt=""></a></div>
    			<h5><a href="instructor-detail.html">Robert Wilson</a></h5>
    		</div>
    		<div class="foot_lecture"><i class="ti-control-skip-forward mr-2"></i>54 lectures</div>
    	</div>

    </div>

### Instructor

    <!-- Single Instructor -->
    <div class="single_instructor border">
    	<div class="single_instructor_thumb">
    		<a href="#"><img src="assets/img/user-1.jpg" class="img-fluid" alt=""></a>
    	</div>
    	<div class="single_instructor_caption">
    		<h4><a href="#">Jonathan Campbell</a></h4>
    		<ul class="instructor_info">
    			<li><i class="ti-tag"></i>Graphic Design</li>
    			<li><i class="ti-video-camera"></i>25 Classes</li>
    			<li><i class="ti-user"></i>Exp. 3.5 Year</li>
    		</ul>
    		<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias.</p>
    		<ul class="social_info">
    			<li><a href="#"><i class="ti-facebook"></i></a></li>
    			<li><a href="#"><i class="ti-twitter"></i></a></li>
    			<li><a href="#"><i class="ti-linkedin"></i></a></li>
    			<li><a href="#"><i class="ti-instagram"></i></a></li>
    		</ul>
    	</div>
    </div>

### Banner Search Form

    <div class="banner-search shadow_high">
    	<div class="search_hero_wrapping">
    		<div class="row">

    			<div class="col-lg-5 col-md-5 col-sm-12 br-right">
    				<div class="form-group">
    					<div class="input-with-icon">
    						<input type="text" class="form-control" placeholder="Keyword" />
    						<img src="assets/img/search.svg" class="search-icon" alt="" />
    					</div>
    				</div>
    			</div>

    			<div class="col-lg-5 col-md-4 col-sm-12 small-pad">
    				<div class="form-group">
    					<div class="input-with-icon">
    						<select id="c-category" class="form-control">
    							<option value=""> </option>
    							<option value="1">Web Designing</option>
    							<option value="2">Business</option>
    							<option value="3">Accounting</option>
    							<option value="3">Development</option>
    							<option value="3">Art & Culture</option>
    						</select>
    						<img src="assets/img/pin.svg" class="search-icon" alt="" />
    					</div>
    				</div>
    			</div>

    			<div class="col-lg-2 col-md-3 col-sm-12 pl-0">
    				<div class="form-group none">
    					<a href="#" class="btn search-btn full-width">Search</a>
    				</div>
    			</div>

    		</div>

    	</div>
    </div>

### Custom Js Settings

Below js code is used for theme setting , Change hover to click Menu(assets/js/custom.js)

    var o = {
    	responsive: !0,
    	mobileBreakpoint:992,
    	showDuration: 300,
    	hideDuration: 300,
    	showDelayDuration: 0,
    	hideDelayDuration: 0,
    	submenuTrigger: "hover",
    	effect: "fade",
    	submenuIndicator: !0,
    	hideSubWhenGoOut: !0,
    	visibleSubmenusOnMobile: !1,
    	fixed: !1,
    	overlay: !0,
    	overlayColor: "rgba(0, 0, 0, 0.5)",
    	hidden: !1,
    	offCanvasSide: "left",
    	onInit: function() {},
    	onShowOffCanvas: function() {},
    	onHideOffCanvas: function() {}
    },

Please open and edit map.js inside assets/js/map.js for map integration.

    var locations = [
    	[locationData('https://via.placeholder.com/128x128', '#', 'Save', 'job-detail.html', 'Junior Web Developer In Google Crunchapps New York, NY', 'Google', "2 "), 40.72956781, -73.99726866, 0, markerIcon],
    	[locationData('https://via.placeholder.com/128x128', '#', 'Save', 'job-detail.html', 'Junior Web Developer In Google Crunchapps New York, NY', 'Google', "2 "), 40.76221766, -73.96511769, 1, markerIcon],
    	[locationData('https://via.placeholder.com/128x128', '#', 'Save', 'job-detail.html', 'Junior Web Developer In Google Crunchapps New York, NY', 'Google', "2 "), 40.88496706, -73.88191222, 2, markerIcon],
    	[locationData('https://via.placeholder.com/128x128', '#', 'Save', 'job-detail.html', 'Junior Web Developer In Google Crunchapps New York, NY', 'Google', "2 "), 40.72228267, -73.99246214, 3, markerIcon],
    	[locationData('https://via.placeholder.com/128x128', '#', 'Save', 'job-detail.html', 'Junior Web Developer In Google Crunchapps New York, NY', 'Google', "2 "), 40.94982541, -73.84357452, 4, markerIcon],
    	[locationData('https://via.placeholder.com/128x128', '#', 'Save', 'job-detail.html', 'Junior Web Developer In Google Crunchapps New York, NY', 'Google', "2 "), 40.90261483, -74.15737152, 5, markerIcon],
    	[locationData('https://via.placeholder.com/128x128', '#', 'Save', 'job-detail.html', 'Junior Web Developer In Google Crunchapps New York, NY', 'Google', "2 "), 40.79145927, -74.08252716, 6, markerIcon],
    	[locationData('https://via.placeholder.com/128x128', '#', 'Save', 'job-detail.html', 'Junior Web Developer In Google Crunchapps New York, NY', 'Google', "2 "), 40.58423508, -73.96099091, 7, markerIcon],
    	[locationData('https://via.placeholder.com/128x128', '#', 'Save', 'job-detail.html', 'Junior Web Developer In Google Crunchapps New York, NY', 'Google', "2 "), 40.58110616, -73.97678375, 8, markerIcon],
    	[locationData('https://via.placeholder.com/128x128', '#', 'Save', 'job-detail.html', 'Junior Web Developer In Google Crunchapps New York, NY', 'Google', "2 "), 40.73112881, -74.07897948, 9, markerIcon],
    	[locationData('https://via.placeholder.com/128x128', '#', 'Save', 'job-detail.html', 'Junior Web Developer In Google Crunchapps New York, NY', 'Google', "2 "), 40.67386831, -74.10438536, 10, markerIcon],
    ];

### Font Family

We have used google fonts for the template you can change whatever font you wish

    @import url('https://fonts.googleapis.com/css?family=Poppins');
    @import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700');

    font-family: 'Montserrat', sans-serif;
    font-family: 'Poppins', sans-serif;

### Helper Classes

### Float Classes

Class | Description
--- | ---
`.fl-left` | Element to the left (float:left).
`.fl-right` | Element to the right(float:right).
`.fl-none` | To Clear floats.(clreafix)

Class | Description
--- | ---
`.d-intable` | Element to the display inline table (display:inline-table).
`.d-table` | Element to the display inline (display:inline).
`.d-block` | Element to the display block (display:block).

### Text Color Classes

Class | Description
--- | ---
`.cl-info` | Nullam id dolor id nibh ultricies vehicula ut id elit.
`.cl-primary` | Nullam id dolor id nibh ultricies vehicula ut id elit.
`.cl-danger` | Nullam id dolor id nibh ultricies vehicula ut id elit.
`.cl-warning` | Nullam id dolor id nibh ultricies vehicula ut id elit.
`.cl-success` | Nullam id dolor id nibh ultricies vehicula ut id elit.
`.cl-purple` | Nullam id dolor id nibh ultricies vehicula ut id elit.
`.cl-default` | Nullam id dolor id nibh ultricies vehicula ut id elit.

### Padding Classes

Class | Description
--- | ---
`.padd-0` | Padding will be 0px from all side.
`.padd-5` | Padding will be 5px from all side.
`.padd-10` | Padding will be 10px from all side.
`.padd-15` | Padding will be 15px from all side.
`.....` | ......
`.padd-50` | Padding will be 50px from all side.

### Padding Left Classes

Class | Description
--- | ---
`.padd-l-0` | Padding left will be 0px.
`.padd-l-5` | Padding left will be 5px.
`.padd-l-10` | Padding left will be 10px.
`.padd-l-15` | Padding left will be 15px.
`.....` | ......
`.padd-l-50` | Padding left will be 50px.

### Padding Right Classes

Class | Description
--- | ---
`.padd-r-0` | Padding right will be 0px.
`.padd-r-5` | Padding right will be 0px.
`.padd-r-10` | Padding right will be 10px.
`.padd-r-15` | Padding right will be 15px.
`.....` | ......
`.padd-r-50` | Padding right will be 50px.

### Padding Top Classes

Class | Description
--- | ---
`.padd-top-0` | Padding top will be 0px.
`.padd-top-5` | Padding top will be 5px.
`.padd-top-10` | Padding top will be 10px.
`.padd-top-15` | Padding top will be 15px.
`.....` | ......
`.padd-top-50` | Padding top will be 50px.

### Padding Bottom Classes

Class | Description
--- | ---
`.padd-bot-0` | Padding bottom will be 0px.
`.padd-bot-5` | Padding bottom will be 5px.
`.padd-bot-10` | Padding bottom will be 10px.
`.padd-bot-15` | Padding bottom will be 15px.
`.....` | ......
`.padd-bot-50` | Padding bottom will be 50px.

### Margin Classes

Class | Description
--- | ---
`.mrg-0` | Margin will be 0px from all side.
`.mrg-5` | Margin will be 5px from all side.
`.mrg-10` | Margin will be 10px from all side.
`.mrg-15` | Margin will be 15px from all side.
`.....` | ......
`.mrg-50` | Margin will be 50px from all side.

### Margin Left Classes

Class | Description
--- | ---
`.mrg-l-0` | Padding left will be 0px.
`.mrg-l-5` | Padding left will be 5px.
`.mrg-l-10` | Padding left will be 10px.
`.mrg-l-15` | Padding left will be 15px.
`.....` | ......
`.mrg-l-50` | Padding left will be 50px.

### Margin Right Classes

Class | Description
--- | ---
`.mrg-r-0` | Margin Right will be 0px.
`.mrg-r-5` | Margin Right will be 5px.
`.mrg-r-10` | Margin Right will be 10px.
`.mrg-r-15` | Margin Right will be 15px.
`.....` | ......
`.mrg-r-50` | Margin Right will be 50px.

### Margin Top Classes

Class | Description
--- | ---
`.mrg-top-0` | Margin top will be 0px.
`.mrg-top-5` | Margin top will be 5px.
`.mrg-top-10` | Margin top will be 10px.
`.mrg-top-15` | Margin top will be 15px.
`.....` | ......
`.mrg-top-50` | Margin top will be 50px.

### Border Classes

Class | Description
--- | ---
`.br` | Border 1px all side
`.bl-1` | Border left 1px
`.bl-2` | Border left 2px
`.bl-3` | Border left 3px
`.bl-4` | Border left 4px

### Border Top Classes

Class | Description
--- | ---
`.bt-1` | Border top 1px
`.bt-2` | Border top 2px
`.bt-3` | Border top 3px
`.bt-4` | Border top 4px

### Border Bottom Classes

Class | Description
--- | ---
`.bb-1` | Border bottom 1px
`.bb-2` | Border bottom 2px
`.bb-3` | Border bottom 3px
`.bb-4` | Border bottom 4px

### Height Classes

Class | Description
--- | ---
`.height-10` | Height 10px
`.height-20` | Height 20px
`.height-30` | Height 30px
`.....` | ....
`.height-450` | Height 450px

### Light Height Classes

Class | Light Height
--- | ---
`.line-height-10` | line height 10px
`.line-height-12` | line height 12px
`.line-height-14` | line height 14px
`...` | ....
`.line-height-450` | line height 450px

### Width Classes

Class | Description
--- | ---
`.width-full` | Width Full
`.width-30` | Width 30px
`.width-40` | Width 40px
`.width-50` | Width 50px
`......` | .....
`.width-300` | Width 300px

### Font Size & Weight Classes

Class | Description
--- | ---
`.font-10` | Font Size 10px
`.font-12` | Font Size 12px
`.font-14` | Font Size 14px
`.....` | ....
`.font-100` | Font Size 100px
`.font-light` | Font Weight light
`.font-midium` | Font Weight medium
`.font-normal` | Font Weight normal
`.font-italic` | Font style italic

### Background Classes

Class | Light Height
--- | ---
`.bg-info` | background Info
`.bg-primary` | background Primary
`.bg-danger` | background Danger
`bg-warning` | background Warning
`.bg-success` | background Success
`.bg-default` | background Default
`.bg-secondary` | background Secondary
`.bg-light` | background Inverse

### Light Background Classes

Class | Description
--- | ---
`.bg-info-light` | background light info
`.bg-primary-light` | background light primary
`.bg-danger-light` | background light danger
`.bg-warning-light` | background light warning
`bg-success-light` | background light success
`.bg-purple-light` | background light purple

### Folder Structure

we follow simple structure for the template

    HTML
      ├──
      │   └── full-learnup-template/
      │     └── _documentation
      |
      |		└── _html
      |			└── All HTML Files
      |
      │	    	└── assets/
      │       		└── Css
      │            		└── Style.css
      │       		└── Js
      │            		└── custom.js
      |		  		└── img
      │            		└── All Images
      └──

### Content

#### Grid options

###### See how aspects of the Bootstrap grid system work across multiple devices with a handy table. check the official website grid page

| Extra small <576px | Small ≥576px | Medium ≥768px | Large ≥992px | Extra large ≥1200px
--- | --- | --- | --- | --- | ---
Grid behavior | Horizontal at all times | Collapsed to start, horizontal above breakpoints
Max container width | None (auto) | 540px | 720px | 960px | 1140px
Class prefix | `.col-` | `.col-sm-` | `.col-md-` | `.col-lg-` | `.col-xl-`
# of columns | 12
Gutter width | 30px (15px on each side of a column)
Nestable | Yes
Offsets | Yes
Column ordering | Yes

Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any `.col-md-` class to an element will not only affect its styling on medium devices but also on large devices if a `.col-lg-` class is not present.

#### Example: Stacked-to-horizontal

###### Using a single set of `.col-md-*` grid classes, you can create a default grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any `.row`.

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6

#### Example: Mobile and desktop

###### Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding `.col-xs-*` `.col-md-*` to your columns. See the example below for a better idea of how it all works.

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6

#### Example: Mobile, tablet, desktops

###### Build on the previous example by creating even more dynamic and powerful layouts with tablet `.col-sm-*` classes.

.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4

#### Responsive column resets

###### With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a `.clearfix` and our responsive utility classes.

.col-xs-6 .col-sm-3
Resize your viewport or check it out on your phone for an example.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

#### Offsetting columns

###### Move columns to the right using `.offset-md--*` classes. These classes increase the left margin of a column by `*` columns. For example, `.offset-md-4` moves `.col-md-4` over four columns.

.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3

### Icons

Below is the table of icon fonts used in this template.

Icon Name | Example
--- | ---
Font-awesome | `<i class="fa fa-icon-name"></i>`
Simple Line Icons | `<i class="icon-name_of_icon"></i>`
Themify Icons | `<i class="ti-icon-name"></i>`

### Table

    <table class="table table-bordered">
    	<thead>
    		<tr>
    			<th>Row</th>
    			<th>First Name</th>
    			<th>Last Name</th>
    			<th>Email</th>
    			<th>Contact</th>
    			<th>Registerd</th>
    		</tr>
    	</thead>
    	<tbody>
    		<tr>
    			<td>1</td>
    			<td>John</td>
    			<td>Carter</td>
    			<td>johncarter@mail.com</td>
    			<td>+91 235 658 7458</td>
    			<td>Aug 10 2017</td>
    		</tr>
    		<tr>
    			<td>2</td>
    			<td>Peter</td>
    			<td>Parker</td>
    			<td>peterparker@mail.com</td>
    			<td>+91 235 658 7458</td>
    			<td>Aug 10 2017</td>
    		</tr>
    		<tr>
    			<td>3</td>
    			<td>John</td>
    			<td>Rambo</td>
    			<td>johnrambo@mail.com</td>
    			<td>+91 235 658 7458</td>
    			<td>Aug 10 2017</td>
    		</tr>
    		<tr>
    			<td>3</td>
    			<td>John</td>
    			<td>Rambo</td>
    			<td>johnrambo@mail.com</td>
    			<td>+91 235 658 7458</td>
    			<td>Aug 10 2017</td>
    		</tr>
    		<tr>
    			<td>3</td>
    			<td>John</td>
    			<td>Rambo</td>
    			<td>johnrambo@mail.com</td>
    			<td>+91 235 658 7458</td>
    			<td>Aug 10 2017</td>
    		</tr>
    		<tr>
    			<td>3</td>
    			<td>John</td>
    			<td>Rambo</td>
    			<td>johnrambo@mail.com</td>
    			<td>+91 235 658 7458</td>
    			<td>Aug 10 2017</td>
    		</tr>
    		<tr>
    			<td>3</td>
    			<td>John</td>
    			<td>Rambo</td>
    			<td>johnrambo@mail.com</td>
    			<td>+91 235 658 7458</td>
    			<td>Aug 10 2017</td>
    		</tr>
    	</tbody>
    </table>

### Credits to the third party plugins

Item Name | Source Link
--- | ---
Bootstrap 5.3 | View website
Jquery | View website
Font-Awesome | View website
Slick Slider | View website
Themify-icons | View website
Jquery Count Down | View website
Animate | View website
Freepic | View website
Flaticon | View website
Prism | View website

### 27. Free support

If you have any type of query or support needed, feel free to contact us by mail or message to themezhub@gmail.com

Thank you