0% found this document useful (0 votes)
88 views23 pages

Index Ethic

The document describes the structure and contents of an HTML template package. It provides details on the homepage structures, page templates, features, CSS and JavaScript files, and how to change different parts like headers and footers.

Uploaded by

Angelo Lippolis
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
88 views23 pages

Index Ethic

The document describes the structure and contents of an HTML template package. It provides details on the homepage structures, page templates, features, CSS and JavaScript files, and how to change different parts like headers and footers.

Uploaded by

Angelo Lippolis
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 23

1.

Start
2. Getting Statred
3. Package Contents
4. Features
5. Template Structure
6. HTML file Structure
7. CSS Styling
8. JS Structure
9. Credits
Copyright Templaza 2013

Ethic
Documentation 1.0

Created: January 16, 2015

By: TemPlaza

Email: [email protected]
Thank you for purchasing our Template and supporting us. If you have any questions that
are beyond the scope of this help file, please feel free to post it on our forum here. Thanks
so much! This documentation was made only with the Documenter (except the images)

Getting Started

To install this HTML template, you will need to upload all files and folders using an FTP
client. We recommend you to use FileZillaFTP client. To upload your template, it is
necessary for you to have:

Domain

FTP Username

FTP Password
Once connected, make sure to upload All files and folders within the "ETHIC" folder of
your download package.

Package Contents

After downloading the Template package, you will find the following structures:

css
fonts
images
js

Video
And file html
style.css
style_ie8.css

Features

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

Unique Simple & Clean Design


7 Home Pages Style
5 Colors Skill
Mega Menu Support
Dynamic Google Web Font
4 Menu Navigation Styles and Offcanvas Menu + 7 Header Styles
User Experience, Usability & All Devices Support
Blog 1 and 2, 3, 4 Columns and Related Blog Pages
AboutUs Page and Contact Page support
Courses Pages support
JoomlaBase Pages support
Forum Pages support
RTL Pages support
Social Pages support
Event Pages support

Template Structure

HTML FILES
Below you will find the HTML files in groups:

Home Page

home-01.html

home-02.html

home-03.html

home-04.html

home-05.html

home-06.html

home-07.html
Blog Pages

Blog-01-Column.html

Blog-02-Column.html

Blog-03-Column.html

Blog-04-Column.html

Blog-LeftSideBar.html

Blog-RightSideBar.html

Blog-Single Post Page.html

Blog-TimeLine.html
Courses Pages

Courses-Grid.html

Courses-ListClass.html

Courses-ListInTable.html

Courses-Register.html

Courses-Single.html
Event Pages

Events-Grid.html

Events-List.html

Events-Single-Page.html
Features Pages

Feature-Color-01.html

Feature-Color-02.html

Feature-Color-03.html

Feature-Color-04.html

Feature-Color-05.html

Feature-Forum.html

Feature-RTLLayout.html

Feature-SortCodes.html

Feature-Typography.html
Header Pages

Header-01.html

Header-02.html

Header-03.html

Header-04.html

Header-05.html

Header-06.html

Header-07.html
JoomlaBage Pages

JoomlaBase-404Page.html

JoomlaBase-NewFeed.html

JoomlaBase-NewLink.html

JoomlaBase-Page-Login.html

JoomlaBase-Page-Profile-User.html

JoomlaBase-Page-Remind-UserName.html

JoomlaBase-Page-Reset-Pass.html

JoomlaBase-Page-Resgister.html
MegaMenu Pages

Mega-Menu-Style-01.html

Mega-Menu-Style-02.html

Mega-Menu-Style-03.html

Mega-Menu-Style-04.html

Social Pages

Social-Activity.html

Social-Groups.html

Social-Login.html

Social-Members.html

Social-SingleGroup.html

Social-SingleMember.html

Contact.html

CanvasMenu.html

About.html
Css Files

bootstrap.css ( boostrap library)

bootstrap.min.css ( boostrap library)

bootstrap-theme.css ( boostrap library)

bootstrap-theme.min.css ( boostrap library)

owl.carousel.css ( css for slider carousel)

owl.theme.css ( css for slider carousel)


Font Files
container font-awesome
Images Folder
contain logo images files
Js Files

bootstrap.min.js (boostrap library)

customer.js (js used for whole website)

custom-portfolio.js (js used for portfolio blocks in pages)

html5shiv.js (js used for HTML5 tag)

jquery.isotope.min.js ( isotope library used for portfolio blocks in pages)

jquery.min.js ( jquery library)

jquery.queryloader.js ( js for load preimages when load page)

off-canvas.js ( create responsive menu)

owl.carousel.min.js (used for slider carousel)

resize.js ( used for images in portfolio blocks in pages )

respond.min.js ( fix HTML5 Support on Browsers Less Than IE9. )


Video Folder
contain video files
Style.css

file css used for whole website


Style_ie8.css
file css used in ie8 for whole website

HTML file Structure

You can easily create HTML pages, or whatever just by using this easy and clean
Template. Code is clearly written and commented for each considerable part. When you
open any HTML file, you will see that they are all have the same headers and footers;
thus, they have the same HTML code and we'll explain both as follows:
<body>
<!-- Begin section search form -->
<div class="tz-content-search">
<form action="#" method="get">
<i class="fa fa-times tz-formclose"></i>
<input type="text" class="tzsearch-input" id="tz-search-input" name="search"
placeholder="Search...">
</form>
</div>
<!-- End form search -->
<!-- Logo, global navigation menu and
button search start -->
<header class="tz-header tz-header1">
<div class="container">
<div class="tz-header-content">
<h3 class="tz-logo pull-left">
<a href="#"><img
src="images/logo-header-1.png" alt="Images Logo"></a>
</h3>
<button data-target=".navcollapse" class="tz-button-toggle btn-navbar pull-right"
type="button">
<i class="fa fa-bars"></i>
</button>
<button class="tz-search pullright"><i class="fa fa-search"></i></button>
<nav class="nav-collapse pullright">
<ul>
<li>

# menu item repeating


here #
</li>
</ul>
</nav>
</div>
</div>
</header>
<!-- Logo, Global navigation menu and
search end -->
<!-- Content Start -->
# Put the internal page HTML code
here #
<!-- Content End -->
<!-- Begin Footer -->
<footer class="tz-footer">
<div class="tz-footer-content">
<div class="container">
# Put the content main footer
page HTML code here #
</div>
</div>
<div class="tz-footer-address-site">
<address>
# Put the address page HTML
code here #
</address>
</div>
</footer>
<!-- Footer end -->
</body>
HEAD TAG
The Head TAG ( All pages must have the following head tag ):
<head>
<meta charset="utf-8">
<!-- Mobile Meta -->
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<title>Ethic - Header 01</title>
<!-- CSS StyleSheets -->

<!--[if IE 8]>
<link href="style_ie8.css" rel="stylesheet"
type="text/css" />
<![endif]-->
<!-- HTML5 Shim and Respond.js IE8 support
of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if
you view the page via file:// -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<link href="css/bootstrap.min.css"
rel="stylesheet" />
<link href="fonts/awesome/css/fontawesome.min.css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/
css?family=Varela' rel='stylesheet' type='text/css'>
<link href="style.css" rel="stylesheet" />
</head>
Logo And Global Menu Navigation
<!-- Begin Header -->
<header class="tz-header tz-header-1">
<div class="container">
<div class="tz-header-content">
<h3 class="tz-logo pull-left">
<a href="#"><img
src="images/logo-header-1.png" alt="Images Logo"></a>
</h3>
<button data-target=".navcollapse" class="tz-button-toggle btn-navbar pull-right"
type="button">
<i class="fa fa-bars"></i>
</button>
<button class="tz-search pullright"><i class="fa fa-search"></i></button>
<nav class="nav-collapse pullright">
<ul class="tz-menu">
<li><a
href="index.html">HOME</a></li>
<li><a
href="index.html">EVENTS</a></li>
<li>
<a

href="index.html">COURSES</a>
</li>
<li>
<a
href="index.html">FEATURE</a>
</li>
<li>
<a
href="index.html">PAGES</a>
</li>
<li>
<a
href="index.html">BLOG</a>
</li>
<li><a
href="index.html">FORUM</a></li>
</ul>
</nav>
</div>
</div><!-- End Content Main Header -->
</header>
<!-- End Header -->
Change Header

To change the style of header, just go to header-01.html, header-02.html,


header-03.html, header-04.html, header-05.html, header-06.html, header-07.html
and find the <header> tag, it has another html structure.
Footer
<!-- Begin Footer -->
<footer class="tz-footer">
<div class="tz-footer-content">
<div class="container">
<img src="images/icon-footer.png"
alt="Icon-footer">
<ul class="tz-footer-part">
<li>
<div class="tz-footercontent-main">
<img src="images/
remove-header1.png" alt="Images remove footer">
<h4>ABOUT UNIVERSITY</
h4>
<ul>
<li><a

href="#">History & Mission</a></li>


<li><a
href="#">Administration</a></li>
<li><a
href="#">Community</a></li>
<li><a
href="#">Around the World</a></li>
<li><a
href="#">News Network</a></li>
<li><a
href="#">Visitor Information</a></li>
<li><a
href="#">Notable Facts & Statistics</a></li>
</ul>
</div>
</li>
<li>
<div class="tz-footercontent-main">
<img src="images/
remove-header1.png" alt="Images remove footer">
<h4>ADMISSIONS</h4>
<ul>
<li><a
href="#">Undergraduate</a></li>
<li><a href="#">By
School</a></li>
<li><a
href="#">Process</a></li>
<li><a
href="#">Visitor Information</a></li>
<li><a href="#">For
Prospective Parents</a></li>
</ul>
</div>
</li>
<li>
<div class="tz-footercontent-main">
<img src="images/
remove-header1.png" alt="Images remove footer">
<h4>ACADAMIES</h4>
<ul>
<li><a
href="#">Schools</a></li>
<li><a
href="#">Depts. and Disciplines</a></li>

<li><a
href="#">Undergraduate Studies</a></li>
<li><a
href="#">Graduate Studies</a></li>
<li><a
href="#">Part-Time and Non-Degree</a></li>
<li><a
href="#">Summer</a></li>
<li><a
href="#">Distance Education</a></li>
<li><a
href="#">Catalogs</a></li>
</ul>
</div>
</li>
<li>
<div class="tz-footercontent-main">
<img src="images/
remove-header1.png" alt="Images remove footer">
<h4>RESEARCH</h4>
<ul>
<li><a
href="#">Applied Physics Laboratory</a></li>
<li><a
href="#">Research Projects</a></li>
<li><a
href="#">Administration</a></li>
<li><a
href="#">Funding Opportunities</a></li>
<li><a
href="#">Undergraduate Research</a></li>
<li><a
href="#">Resources</a></li>
<li><a>Health &
Medicine</a></li>
</ul>
</div>
</li>
<li>
<div class="tz-footercontent-main">
<img src="images/
remove-header1.png" alt="Images remove footer">
<h4>EVENTS</h4>
<ul>
<li><a

href="#">Calendar of Events</a></li>
<li><a
href="#">Student Life</a></li>
<li><a
href="#">Campus Services</a></li>
<li><a
href="#">Athletic Facilities</a></li>
<li><a
href="#">Arts and Culture</a></li>
<li><a href="#">For
Students</a></li>
<li><a href="#">For
Parents</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<div class="tz-footer-address-site">
<address>University Address, GK-120 678
Warsaw, Poland | Phone: +48 0045356723</address>
</div>
</footer>
<!-- End Footer -->

CSS Styling

The style.css file is the responsible for the Template styling as below:
Table of Contents
/**
*
*
*
*
*
*
*
*
*
*
*
*

Table
1.0 2.0 3.0 4.0 4.1

of Contents:
Reset
Off canvas
Isotope
Content
- Header
4.1.b - SubMenu
4.2 - Slider
4.3 - Introduce
4.4 - Portfolio
4.5 - Courses
4.6 - Student Life

*
4.7 - Lastest Event
*
4.8 - Contact Form
*
4.9 - Our Leader
*
4.10 - Lastest Articles
*
4.11 - Services
*
4.12 - Information
*
4.13 - Video
*
4.14 - Blog-Page
*
4.15 - Events-Page
*
4.16 - About-Page
*
4.17 - Contact-Page
*
4.18 - Feature-Page
*
4.19 - Courses-Page
*
4.20 - JoomlaBase-Page
*
4.21 - Social- Page
*
4.22 - Style for Google Chrome
* 5.0 - Footer
* 6.0 - Responsive
*
6.1.a Extra small devices (phones, less
than 481px)
*

6.1.b Extra small devices (phones,

6.2 Small devices (tablets, 768px and

6.3 Medium devices (desktops, 992px and

6.4 Large devices (desktops, greater

481px and 767px)


991px)
1199px)
1200px)
* 7.0 - Pre-loading
*
---------------------------------------------------------------------------*/

Js Structure

All js used in homepage are stored in custom.js file. You can find some js as following:
Method for Header
var $width_Windows = jQuery(this).width();
/* Method for scroll Header 01 */
if(jQuery(this).scrollTop() > 0){
jQuery('.tz-header-1').addClass('tz-header-

eff');
}else{
jQuery('.tz-header-1').removeClass('tzheader-eff');
}
/* Method for scroll Header Home01 */
var $affixTopBanner01 = jQuery('.tz-banner .tzitems').height();
var $heightHeaderHome01 = jQuery('.tz-headerhome-1').height();
if(jQuery('.tz-header-home-1').length > 0){
if(jQuery(this).scrollTop() >
($affixTopBanner01 - $heightHeaderHome01)){
jQuery('.tz-headerhome-1').addClass('affix-eff');
jQuery('.tz-banner-style1').css('zindex','99999');
if(jQuery('.affix-top').length > 0) {
jQuery('.affix-top').affix({
offset: { top:
$affixTopBanner01}
});
}
}
else{
jQuery('.tz-headerhome-1').removeClass('affix-eff');
jQuery('.tz-banner-style1').css('zindex','1');
}
}
/* Method for scroll Header Home-02 */
var $height_Tz_Sign_In = jQuery('.tz-signin').height();
if(jQuery('.tz-header-2').length > 0){
if(jQuery(this).scrollTop() >=
($height_Tz_Sign_In + 30)){
jQuery('.tz-header-2').addClass('tzheader-2-eff')
jQuery('.tz-banner-style2').css('zindex','99999');
}
else{

jQuery('.tz-header-2').removeClass('tzheader-2-eff')
jQuery('.tz-banner-style2').css('zindex','1');
}
}
/* Method for scroll Header Home-03 */
if(jQuery('.tz-header-3').length > 0){
if(jQuery(this).scrollTop() >
($height_Tz_Sign_In + 30)){
jQuery('.tz-banner').css('zindex','99999');
jQuery('.tz-header-3').addClass('tzheader-3-eff');
}
else{
jQuery('.tz-banner').css('zindex','1');
jQuery('.tz-header-3').removeClass('tzheader-3-eff');
}
}
/*

Method for scroll Header Home-04 */

if(jQuery('.tz-header-4').length > 0){


if(jQuery(this).scrollTop() > 0 ){
jQuery('.tz-banner').css('zindex','99999');
jQuery('.tz-header-4').addClass('tzheader-4-eff');
}else{
jQuery('.tz-banner').css('zindex','1');
jQuery('.tz-header-4').removeClass('tzheader-4-eff');
}
}
/*

Method for scroll Header Home-04 */

if(jQuery('.tz-header-5').length > 0){


if(jQuery(this).scrollTop() > 0){
jQuery('.tz-header-5').addClass('tzheader-5-eff');

jQuery('.tz-banner').css('zindex','99999');
}else{
jQuery('.tz-header-5').removeClass('tzheader-5-eff');
jQuery('.tz-banner').css('zindex','1');
}
}
/*

Method for scroll Header Home-06 */

if(jQuery('.tz-header-6').length > 0){


if(jQuery(this).scrollTop() >
($height_Tz_Sign_In + 30)){
jQuery('.tz-header-6').addClass('tzheader-6-eff')
jQuery('.tz-banner').css('zindex','99999');
}
else{
jQuery('.tz-header-6').removeClass('tzheader-6-eff')
jQuery('.tz-banner').css('zindex','1');
}
}
/* Method for scroll Header Home-07 */
if(jQuery('.tz-header-7').length > 0){
if(jQuery(this).scrollTop() > 0){
jQuery('.tz-header-7').addClass('tzheader-7-eff')
jQuery('.tz-banner').css('zindex','99999');
}
else{
jQuery('.tz-header-7').removeClass('tzheader-7-eff')
jQuery('.tz-banner').css('zindex','1');
}
}
HTML-Example
<header class="tz-header tz-header2">
<div class="tz-customer-container">

<div class="container">
# menu item repeating here #
</div>
</div>
</header>
Method for Search
/* Method for button search */
jQuery('.tz-search').click(function(){
jQuery('.tz-content-search').addClass('tzcontent-search-eff');
jQuery('.tz-search-input').focus();
});
jQuery('.tz-form-close').click(function(){
jQuery('.tz-contentsearch').removeClass('tz-content-search-eff');
});
HTML
<!-- Begin section search form -->
<div class="tz-content-search">
<form action="#" method="get">
<i class="fa fa-times tz-formclose"></i>
<input type="text" class="tz-searchinput" id="tz-search-input" name="search"
placeholder="Search...">
</form><!-- End form search -->
</div>
<!-- End section search form -->
JS Carousel
jQuery('.tz-gallery-wrapper').owlCarousel({
items : 1,
itemsDesktop : [1199,1],
itemsDesktopSmall : [979,1],
itemsTablet: [768, 1],
itemsMobile: [479, 1],
slideSpeed:500,
paginationSpeed:800,
rewindSpeed:1000,
autoPlay:true,
stopOnHover: false,
singleItem:false,

rewindNav:false,
pagination:false,
paginationNumbers:false,
itemsScaleUp:false
});
jQuery('.tz-cources-prev').click(function(){
jQuery(".tz-gallerywrapper").trigger('owl.prev');
}) ;
jQuery(".tz-cources-next").click(function(){
jQuery(".tz-gallerywrapper").trigger('owl.next');
}) ;
HTML (EX: html used in Event-Single-Page)
<div class="tz-gallery-images">
<button class="tz-cources-prev">
<i class="fa fa-angle-left"</i>
</button>
<button class="tz-cources-next">
<i class="fa fa-angle-right"></i>
</button>
<ul class="tz-gallery-wrapper">
<li>
<a href="#">
<img src="http://placehold.it/
870x328" alt="Images">
</a>
</li>
<li>
<a href="#">
<img src="http://placehold.it/
870x328" alt="Images">
</a>
</li>
<li>
<a href="#">
<img src="http://placehold.it/
870x328" alt="Images">
</a>
</li>
</ul>
</div>
JS Video

/* Method for video */


jQuery('.tzautoplay').click(function(){
var $_this = jQuery(this);
var myVideo = $_this.parents('.tzvideo').find('.videoID')[0];
jQuery(this).hide();
$_this.parents('.tz-video').find('.tz-videocontent h3').css('opacity',0);
$_this.parents('.tz-video').find('.tz-videocontent small').css('opacity',0);
$_this.parents('.tz-video').find('.tz-videocontent span').css('opacity',0);
$_this.parents('.tz-video').find('.tz-videocontent strong').css('opacity',0);
$_this.parents('.tz-video').find('.bgvideo').hide();
$_this.parents('.tz-video').find('.bg-videostyle-5').hide();
$_this.parents('.tz-video').find('.bg-videostyle-7').hide();
$_this.parents('.tzvideo').find('.tzpause').show().css('opacity',0);
if (myVideo.paused)
myVideo.play();
}) ;
jQuery('.tzpause').click(function(){
jQuery(this).hide();
var $_this = jQuery(this);
var myVideo = $_this.parents('.tzvideo').find('.videoID')[0];
$_this.parents('.tz-video').find('.tz-videocontent h3').css('opacity',1);
$_this.parents('.tz-video').find('.tz-videocontent small').css('opacity',1);
$_this.parents('.tz-video').find('.tz-videocontent span').css('opacity',1);
$_this.parents('.tz-video').find('.tz-videocontent strong').css('opacity',1);
$_this.parents('.tz-video').find('.bgvideo').show();
$_this.parents('.tz-video').find('.bg-videostyle-5').show();
$_this.parents('.tz-video').find('.bg-videostyle-7').show();
$_this.parents('.tzvideo').find('.tzautoplay').show();

if (myVideo.play)
myVideo.pause();
});
HTML
<!-- Begin section tz-video -->
<section class="tz-video">
<div class="tz-video-content">
<button class="tzautoplay"><i class="fa
fa-video-camera"></i></button>
<button class="tzpause"><i class="fa
fa-pause"></i></button>
<h3>Enjoy your
best student life </h3>
<small>ETHIC UNIVERSITY</small>
<span class="tz-under-line"></span>
</div>
<div class="bg-video"></div>
<video class="videoID">
<source type="video/mp4" src="video/
video.mp4" />
<source type="video/ogg" src="video/
video.ogv" />
<source type="video/webm" src="video/
video.webm" />
</video>
</section>
<!--End section tz-video-->
Find Courses
/* Method click event for module Find Cources in
Home4,... */
jQuery('#tz-sidemenu a').on('click', function(e){
e.preventDefault();
if($(this).hasClass('tz-open')) {
// do nothing because the link is already open
} else {
var oldcontent = $('#tz-sidemenu a.tzopen').attr('href');
var newcontent = $(this).attr('href');
$(oldcontent).fadeOut('fast', function(){
$(newcontent).fadeIn().removeClass('tzhidden');
$(oldcontent).addClass('tz-hidden');

});
$('#tz-sidemenu a').removeClass('tz-open');
$(this).addClass('tz-open');
}
});
HTML-Example
<!-- Begin class tz-cources-table -->
<div class="tz-course-table">
<div class="container">
<div class="row">
<div class="col-md-4">
<ul id="tz-sidemenu" class="tzcources-content-left tz-cource-option">
<li>
<div>
<a href="#tz-fine-arts"
class="tz-open">
# content item
repeating here #
</a>
</div>
</li>
</ul>
</div>
<div class="col-md-8">
<div id="tz-fine-arts" class="tzcontent-right">
<div class="tz-tab-slider-img">
# content item repeating
here #
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End class tz-cources-table -->
JS PreLoading
/* Method for Pre-Loading */
"use strict";
jQuery('.loading-page').remove();

HTML-Example
<!-- Begin class loading-page -->
<div class="loading-page">
<img src="images/image-preload.gif"
alt="Images-loading">
</div>
<!-- End class loading-page -->
Off Canvas Menu
/* Method for menu offcavas-menu for page CanvansMenu */
var $true = true;
jQuery('.tz-button-togglecanvans').click(function(){
if ( $true == true ){
jQuery('.tz-offcavans-menu').animate({
right : '0'
},300) ;
jQuery('.tzscrollable').addClass('tzoffcavans-menu-eff');
$true = false;
}else{
jQuery('.tz-offcavans-menu').animate({
right : '-20em'
},150,function(){
jQuery('.tzscrollable').removeClass('tz-offcavans-menueff');
}) ;
$true = true;
}
});
jQuery('.tz-offcanvas-close').click(function(){
jQuery('.tz-offcavans-menu').animate({
right : '-20em'
},150,function(){
jQuery('.tzscrollable').removeClass('tzoffcavans-menu-eff');
}) ;
$true = true
});
HTML-Example in CanvasMenu.html page

<!-- Begin Header 1 -->


<header class="tz-header tz-header-home-1">
# Content Header...
<button class="tz-button-toggle-canvans pullright" type="button">
<i class="fa fa-bars"></i>
</button>
</header>
<!-- Start class tz-offcavans-menu -->
<aside class="tz-offcavans-menu">
<button class="tz-offcanvas-close"><img
src="images/close-ofcanvas.png" alt="Images"></button>
<div class="tzscrollable">
<nav class="tz-menu-ofcanvas-right">
<ul>
<li>
<a href="#">
<img src="images/check.png"
alt="Images">
<i class="fa fa-arrowsalt"></i>
<strong>Log In Form</
strong>
</a>
</li>
<li>
<a href="#">
<img src="images/check.png"
alt="Images">
<i class="fa fa-arrowsalt"></i>
<strong>Register Form</
strong>
</a>
</li>
<li>
<a href="#">
<img src="images/check.png"
alt="Images">
<i class="fa fa-arrowsalt"></i>
<strong>Remind User</
strong>
</a>
</li>
<li>
<a href="#">

<img src="images/check.png"
alt="Images">
<i class="fa fa-arrowsalt"></i>
<strong>Reset Pass</strong>
</a>
</li>
<li>
<a href="#">
<img src="images/check.png"
alt="Images">
<i class="fa fa-arrowsalt"></i>
<strong>Edit User Profile</
strong>
</a>
</li>
</ul>
</nav>
</div>
</aside>
<!-- End class tz-offcavans-menu -->

Credits

jQuery
jQuery Owl Carousel slider plugin
HTML5 Shiv
Font Awesome Icons
Bootstrap
jQuery Loader Plugin
jquery isotope

Say Thanks

Thanks for using our product. If you need any helps, you can send your questions to this
email [email protected]
We're are TemPlaza
content

You might also like