1059 lines
51 KiB
HTML
1059 lines
51 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
|
<head lang="en">
|
|
<meta http-equiv="content-type" content="text/html;charset=utf-8">
|
|
<title> Documentation - Color Admin</title>
|
|
<!-- Bootstrap styles -->
|
|
<link href="assets/bootstrap/css/bootstrap.css" rel="stylesheet">
|
|
<link href="assets/bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
|
|
<link href="assets/bootstrap/css/docs.css" rel="stylesheet">
|
|
<link href="assets/bootstrap/js/google-code-prettify/prettify.css" rel="stylesheet">
|
|
|
|
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
|
|
<!--[if lt IE 9]>
|
|
<script src="assets/js/html5shiv.js"></script>
|
|
<![endif]-->
|
|
</head>
|
|
<body data-spy="scroll" data-target=".bs-docs-sidebar">
|
|
<div class="navbar navbar-inverse navbar-page">
|
|
<div class="navbar-inner">
|
|
<div class="container">
|
|
<button type="button" class="btn btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse">
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
</button>
|
|
<a class="brand" href="index.html">Documentation</a>
|
|
<div class="nav-collapse collapse">
|
|
<ul class="nav">
|
|
<li class="">
|
|
<a href="index.html">One-Page Parallax</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="index_blog.html">Blog</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="index_forum.html">Forum</a>
|
|
</li>
|
|
<li class="active">
|
|
<a href="index_e_commerce.html">E-Commerce</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="index_corporate.html">Corporate</a>
|
|
</li>
|
|
</ul>
|
|
<ul class="nav pull-right">
|
|
<li class="">
|
|
<a href="index_change_log.html">Change Log</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<header class="jumbotron subhead" id="overview">
|
|
<div class="container">
|
|
<h1 class="text-center">Color Admin</h1>
|
|
<p class="lead text-center">“E-Commerce Template” Documentation by “Sean Ngu” v5.5.2</p>
|
|
</div>
|
|
<div class="jumbotron-cover"></div>
|
|
</header>
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="span12">
|
|
<div class="well">
|
|
<p>
|
|
<strong>
|
|
Updated on: 08/July/2025<br>
|
|
By: Sean Ngu<br>
|
|
</strong>
|
|
</p>
|
|
<p>
|
|
If you have any inquiries or require further assistance beyond what is covered in this help file, please do not hesitate to <a href="https://wrapbootstrap.com/user/seanngu/message" target="_blank">send us a message</a> through Wrapbootstrap. We are more than happy to help. Thank you very much!
|
|
</p>
|
|
</div>
|
|
</div><!-- end span12 -->
|
|
</div><!-- end row -->
|
|
<div class="row">
|
|
<div class="span3 bs-docs-sidebar">
|
|
<ul class="nav nav-list bs-docs-sidenav affix-top">
|
|
<li><a href="#htmlStructure"><i class="icon-chevron-right"></i>HTML Structure</a></li>
|
|
<li><a href="#page-head"><i class="icon-chevron-right"></i>Page Head</a></li>
|
|
<li><a href="#page-top-nav"><i class="icon-chevron-right"></i>Page Top Nav</a></li>
|
|
<li><a href="#page-header"><i class="icon-chevron-right"></i>Page Header</a></li>
|
|
<li><a href="#page-content-header"><i class="icon-chevron-right"></i>Page Content Header</a></li>
|
|
<li><a href="#page-content"><i class="icon-chevron-right"></i>Page Content</a></li>
|
|
<li><a href="#page-footer"><i class="icon-chevron-right"></i>Page Footer</a></li>
|
|
<li><a href="#page-footer-copyright"><i class="icon-chevron-right"></i>Page Footer Copyright</a></li>
|
|
<li><a href="#panel-theme"><i class="icon-chevron-right"></i>Panel Theme</a></li>
|
|
<li><a href="#page-end"><i class="icon-chevron-right"></i>End of Page (Javascripts)</a></li>
|
|
<li><a href="#page-theme-options"><i class="icon-chevron-right"></i>Page Theme Options</a></li>
|
|
<li><a href="#page-dark-mode"><i class="icon-chevron-right"></i>Dark Mode <span class="label">NEW</span></a></li>
|
|
<li><a href="#page-rtl-mode"><i class="icon-chevron-right"></i>RTL Mode <span class="label">NEW</span></a></li>
|
|
<li><a href="#page-options"><i class="icon-chevron-right"></i>Page Options</a></li>
|
|
<li><a href="#page-gulp-scss"><i class="icon-chevron-right"></i>Gulp & SCSS</a></li>
|
|
<li><a href="#plugins-resources"><i class="icon-chevron-right"></i>Plugins & Resources</a></li>
|
|
<li><a href="#references"><i class="icon-chevron-right"></i>References</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="span9">
|
|
<div class="row-fluid">
|
|
<div class="span12">
|
|
<div class="page-header">
|
|
<h3 id="htmlStructure"><strong>A) HTML Structure</strong> - <a href="#top">top</a></h3>
|
|
</div>
|
|
<p>This template can be used as an fluid layout with a max of 12 columns next to each other. The general template structure is the same throughout the template. Here is the general structure.</p>
|
|
<pre class="prettyprint linenums">
|
|
<!-- BEGIN #page-container -->
|
|
<div id="page-container" class="fade">
|
|
<!-- BEGIN #top-nav -->
|
|
<div id="top-nav" class="top-nav">
|
|
</div>
|
|
<!-- END #top-nav -->
|
|
|
|
<!-- BEGIN #header -->
|
|
<div id="header" class="header">
|
|
</div>
|
|
<!-- END #header -->
|
|
|
|
<!-- BEGIN #slider -->
|
|
<div id="slider" class="section-container p-0 bg-black">
|
|
</div>
|
|
<!-- END #slider -->
|
|
|
|
<!-- BEGIN #promotions -->
|
|
<div id="promotions" class="section-container bg-white">
|
|
</div>
|
|
<!-- END #promotions -->
|
|
|
|
<!-- BEGIN #trending-items -->
|
|
<div id="trending-items" class="section-container bg-light">
|
|
</div>
|
|
<!-- END #trending-items -->
|
|
|
|
<!-- BEGIN #mobile-list -->
|
|
<div id="mobile-list" class="section-container bg-light pt-0">
|
|
</div>
|
|
<!-- END #mobile-list -->
|
|
|
|
<!-- BEGIN #tablet-list -->
|
|
<div id="tablet-list" class="section-container bg-light pt-0">
|
|
</div>
|
|
<!-- END #tablet-list -->
|
|
|
|
<!-- BEGIN #policy -->
|
|
<div id="policy" class="section-container pt-30px pb-30px">
|
|
</div>
|
|
<!-- END #policy -->
|
|
|
|
<!-- BEGIN #subscribe -->
|
|
<div id="subscribe" class="section-container bg-light pt-30px pb-30px">
|
|
</div>
|
|
<!-- END #subscribe -->
|
|
|
|
<!-- BEGIN #footer -->
|
|
<div id="footer" class="footer">
|
|
</div>
|
|
<!-- END #footer -->
|
|
|
|
<!-- BEGIN #footer-copyright -->
|
|
<div id="footer-copyright" class="footer-copyright">
|
|
</div>
|
|
<!-- END #footer-copyright -->
|
|
</div>
|
|
<!-- END #page-container -->
|
|
</pre>
|
|
</div><!-- end span12 -->
|
|
</div><!-- end row-fluid -->
|
|
<div class="row-fluid">
|
|
<div class="span12">
|
|
<div class="page-header">
|
|
<h3 id="page-head"><strong>B) Page Head</strong> - <a href="#top">top</a></h3>
|
|
</div>
|
|
<p>Page head contains metadata, javascript and css files:</p>
|
|
<pre class="prettyprint linenums">
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Color Admin | E-Commerce Front End Theme</title>
|
|
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
|
|
<meta content="" name="description" />
|
|
<meta content="" name="author" />
|
|
|
|
<!-- ================== BEGIN core-css ================== -->
|
|
<link href="../assets/css/e-commerce/vendor.min.css" rel="stylesheet" />
|
|
<link href="../assets/css/e-commerce/app.min.css" rel="stylesheet" />
|
|
<!-- ================== END core-css ================== -->
|
|
|
|
<!-- OR without-vendor.min.css -->
|
|
|
|
<!-- ================== BEGIN core-css ================== -->
|
|
<link href="../assets/plugins/animate.css/animate.min.css" rel="stylesheet" />
|
|
<link href="../assets/plugins/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet" />
|
|
<link href="../assets/plugins/jquery-ui-dist/jquery-ui.min.css" rel="stylesheet" />
|
|
<link href="../assets/plugins/pace-js/themes/black/pace-theme-flash.css" rel="stylesheet" />
|
|
<link href="../assets/plugins/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet" />
|
|
<link href="../assets/css/e-commerce/app.min.css" rel="stylesheet" />
|
|
<!-- ================== END core-css ================== -->
|
|
</head>
|
|
<body>
|
|
</pre>
|
|
</div><!-- end span12 -->
|
|
</div><!-- end row-fluid -->
|
|
<div class="row-fluid">
|
|
<div class="span12">
|
|
<div class="page-header">
|
|
<h3 id="page-top-nav"><strong>C) Top Nav</strong> - <a href="#top">top</a></h3>
|
|
</div>
|
|
<pre class="prettyprint linenums">
|
|
<!-- BEGIN #top-nav -->
|
|
<div id="top-nav" class="top-nav">
|
|
<!-- BEGIN container -->
|
|
<div class="container">
|
|
<div class="collapse navbar-collapse">
|
|
<ul class="nav navbar-nav">
|
|
<li class="dropdown dropdown-hover">
|
|
<a href="#" data-bs-toggle="dropdown"><img src="../assets/img/flag/flag-english.png" class="flag-img" alt="" /> English <b class="caret"></b></a>
|
|
<ul class="dropdown-menu">
|
|
<li><a href="#" class="dropdown-item"><img src="../assets/img/flag/flag-english.png" class="flag-img" alt="" /> English</a></li>
|
|
<li><a href="#" class="dropdown-item"><img src="../assets/img/flag/flag-german.png" class="flag-img" alt="" /> German</a></li>
|
|
<li><a href="#" class="dropdown-item"><img src="../assets/img/flag/flag-spanish.png" class="flag-img" alt="" /> Spanish</a></li>
|
|
<li><a href="#" class="dropdown-item"><img src="../assets/img/flag/flag-french.png" class="flag-img" alt="" /> French</a></li>
|
|
<li><a href="#" class="dropdown-item"><img src="../assets/img/flag/flag-chinese.png" class="flag-img" alt="" /> Chinese</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="#">Customer Care</a></li>
|
|
<li><a href="#">Order Tracker</a></li>
|
|
</ul>
|
|
<ul class="nav navbar-nav navbar-end">
|
|
<li><a href="#">Career</a></li>
|
|
<li><a href="#">Our Forum</a></li>
|
|
<li><a href="#">Newsletter</a></li>
|
|
<li><a href="#"><i class="fab fa-facebook-f fs-14px"></i></a></li>
|
|
<li><a href="#"><i class="fab fa-twitter fs-14px"></i></a></li>
|
|
<li><a href="#"><i class="fab fa-instagram fs-14px"></i></a></li>
|
|
<li><a href="#"><i class="fab fa-dribbble fs-14px"></i></a></li>
|
|
<li><a href="#"><i class="fab fa-google fs-14px"></i></a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- END container -->
|
|
</div>
|
|
<!-- END #top-nav -->
|
|
</pre>
|
|
</div><!-- end span12 -->
|
|
</div><!-- end row-fluid -->
|
|
<div class="row-fluid">
|
|
<div class="span12">
|
|
<div class="page-header">
|
|
<h3 id="page-header"><strong>D) Header </strong> - <a href="#top">top</a></h3>
|
|
</div>
|
|
<pre class="prettyprint linenums">
|
|
<!-- BEGIN #header -->
|
|
<div id="header" class="header">
|
|
<!-- BEGIN container -->
|
|
<div class="container">
|
|
<!-- BEGIN header-container -->
|
|
<div class="header-container">
|
|
<!-- BEGIN navbar-toggle -->
|
|
<button type="button" class="navbar-toggle collapsed" data-bs-toggle="collapse" data-bs-target="#navbar-collapse">
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
</button>
|
|
<!-- END navbar-toggle -->
|
|
<!-- BEGIN header-logo -->
|
|
<div class="header-logo">
|
|
<a href="index.html">
|
|
<span class="brand-logo"></span>
|
|
<span class="brand-text">
|
|
<span>Color</span>Admin
|
|
<small>e-commerce frontend theme</small>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
<!-- END header-logo -->
|
|
<!-- BEGIN header-nav -->
|
|
<div class="header-nav">
|
|
<div class="collapse navbar-collapse" id="navbar-collapse">
|
|
<ul class="nav justify-content-center">
|
|
<li class="active"><a href="index.html">Home</a></li>
|
|
<li class="dropdown dropdown-full-width dropdown-hover">
|
|
<a href="#" data-bs-toggle="dropdown">
|
|
Our Store
|
|
<b class="caret"></b>
|
|
<span class="arrow top"></span>
|
|
</a>
|
|
<!-- BEGIN dropdown-menu -->
|
|
<div class="dropdown-menu p-0">
|
|
<!-- BEGIN dropdown-menu-container -->
|
|
<div class="dropdown-menu-container">
|
|
<!-- BEGIN dropdown-menu-sidebar -->
|
|
<div class="dropdown-menu-sidebar">
|
|
<h4 class="title">Shop By Categories</h4>
|
|
<ul class="dropdown-menu-list">
|
|
<li><a href="product.html">Mobile Phone</a></li>
|
|
<li><a href="product.html">Tablet</a></li>
|
|
<li><a href="product.html">Laptop</a></li>
|
|
<li><a href="product.html">Desktop</a></li>
|
|
<li><a href="product.html">TV</a></li>
|
|
<li><a href="product.html">Speaker</a></li>
|
|
<li><a href="product.html">Gadget</a></li>
|
|
</ul>
|
|
</div>
|
|
<!-- END dropdown-menu-sidebar -->
|
|
<!-- BEGIN dropdown-menu-content -->
|
|
<div class="dropdown-menu-content">
|
|
<h4 class="title">Shop By Popular Phone</h4>
|
|
<div class="row">
|
|
<div class="col-lg-3">
|
|
<ul class="dropdown-menu-list">
|
|
<li><a href="product_detail.html"><i class="fa fa-fw fa-angle-right text-muted"></i> iPhone 7</a></li>
|
|
<li><a href="product_detail.html"><i class="fa fa-fw fa-angle-right text-muted"></i> iPhone 6s</a></li>
|
|
<li><a href="product_detail.html"><i class="fa fa-fw fa-angle-right text-muted"></i> iPhone 6</a></li>
|
|
<li><a href="product_detail.html"><i class="fa fa-fw fa-angle-right text-muted"></i> iPhone 5s</a></li>
|
|
<li><a href="product_detail.html"><i class="fa fa-fw fa-angle-right text-muted"></i> iPhone 5</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-lg-3">
|
|
<ul class="dropdown-menu-list">
|
|
<li><a href="product_detail.html"><i class="fa fa-fw fa-angle-right text-muted"></i> Galaxy S7</a></li>
|
|
<li><a href="product_detail.html"><i class="fa fa-fw fa-angle-right text-muted"></i> Galaxy A9</a></li>
|
|
<li><a href="product_detail.html"><i class="fa fa-fw fa-angle-right text-muted"></i> Galaxy J3</a></li>
|
|
<li><a href="product_detail.html"><i class="fa fa-fw fa-angle-right text-muted"></i> Galaxy Note 5</a></li>
|
|
<li><a href="product_detail.html"><i class="fa fa-fw fa-angle-right text-muted"></i> Galaxy S7</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-lg-3">
|
|
<ul class="dropdown-menu-list">
|
|
<li><a href="product_detail.html"><i class="fa fa-fw fa-angle-right text-muted"></i> Lumia 730</a></li>
|
|
<li><a href="product_detail.html"><i class="fa fa-fw fa-angle-right text-muted"></i> Lumia 735</a></li>
|
|
<li><a href="product_detail.html"><i class="fa fa-fw fa-angle-right text-muted"></i> Lumia 830</a></li>
|
|
<li><a href="product_detail.html"><i class="fa fa-fw fa-angle-right text-muted"></i> Lumia 820</a></li>
|
|
<li><a href="product_detail.html"><i class="fa fa-fw fa-angle-right text-muted"></i> Lumia Icon</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-lg-3">
|
|
<ul class="dropdown-menu-list">
|
|
<li><a href="product_detail.html"><i class="fa fa-fw fa-angle-right text-muted"></i> Xperia X</a></li>
|
|
<li><a href="product_detail.html"><i class="fa fa-fw fa-angle-right text-muted"></i> Xperia Z5</a></li>
|
|
<li><a href="product_detail.html"><i class="fa fa-fw fa-angle-right text-muted"></i> Xperia M5</a></li>
|
|
<li><a href="product_detail.html"><i class="fa fa-fw fa-angle-right text-muted"></i> Xperia C5</a></li>
|
|
<li><a href="product_detail.html"><i class="fa fa-fw fa-angle-right text-muted"></i> Xperia C4</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<h4 class="title">Shop By Brand</h4>
|
|
<ul class="dropdown-brand-list mb-0">
|
|
<li><a href="product.html"><img src="../assets/img/brand/brand-apple.png" alt="" /></a></li>
|
|
<li><a href="product.html"><img src="../assets/img/brand/brand-samsung.png" alt="" /></a></li>
|
|
<li><a href="product.html"><img src="../assets/img/brand/brand-htc.png" alt="" /></a></li>
|
|
<li><a href="product.html"><img src="../assets/img/brand/brand-microsoft.png" alt="" /></a></li>
|
|
<li><a href="product.html"><img src="../assets/img/brand/brand-nokia.png" alt="" /></a></li>
|
|
<li><a href="product.html"><img src="../assets/img/brand/brand-blackberry.png" alt="" /></a></li>
|
|
<li><a href="product.html"><img src="../assets/img/brand/brand-sony.png" alt="" /></a></li>
|
|
</ul>
|
|
</div>
|
|
<!-- END dropdown-menu-content -->
|
|
</div>
|
|
<!-- END dropdown-menu-container -->
|
|
</div>
|
|
<!-- END dropdown-menu -->
|
|
</li>
|
|
<li class="dropdown dropdown-hover">
|
|
<a href="#" data-bs-toggle="dropdown">
|
|
Accessories
|
|
<b class="caret"></b>
|
|
<span class="arrow top"></span>
|
|
</a>
|
|
<div class="dropdown-menu">
|
|
<a class="dropdown-item" href="product.html">Mobile Phone</a>
|
|
<a class="dropdown-item" href="product.html">Tablet</a>
|
|
<a class="dropdown-item" href="product.html">TV</a>
|
|
<a class="dropdown-item" href="product.html">Desktop</a>
|
|
<a class="dropdown-item" href="product.html">Laptop</a>
|
|
<a class="dropdown-item" href="product.html">Speaker</a>
|
|
<a class="dropdown-item" href="product.html">Gadget</a>
|
|
</div>
|
|
</li>
|
|
<li><a href="product.html">New Arrival</a></li>
|
|
<li class="dropdown dropdown-hover">
|
|
<a href="#" data-bs-toggle="dropdown">
|
|
Pages
|
|
<b class="caret"></b>
|
|
<span class="arrow top"></span>
|
|
</a>
|
|
<div class="dropdown-menu">
|
|
<a class="dropdown-item" href="index.html">Home (Default)</a>
|
|
<a class="dropdown-item" href="index_fixed_header.html">Home (Fixed Header)</a>
|
|
<a class="dropdown-item" href="index_inverse_header.html">Home (Inverse Header)</a>
|
|
<a class="dropdown-item" href="search_results.html">Search Results</a>
|
|
<a class="dropdown-item" href="product.html">Product Page</a>
|
|
<a class="dropdown-item" href="product_detail.html">Product Details Page</a>
|
|
<a class="dropdown-item" href="checkout_cart.html">Checkout Cart</a>
|
|
<a class="dropdown-item" href="checkout_info.html">Checkout Shipping</a>
|
|
<a class="dropdown-item" href="checkout_payment.html">Checkout Payment</a>
|
|
<a class="dropdown-item" href="checkout_complete.html">Checkout Complete</a>
|
|
<a class="dropdown-item" href="my_account.html">My Account</a>
|
|
<a class="dropdown-item" href="contact_us.html">Contact Us</a>
|
|
<a class="dropdown-item" href="about_us.html">About Us</a>
|
|
<a class="dropdown-item" href="faq.html">FAQ</a>
|
|
</div>
|
|
</li>
|
|
<li class="dropdown dropdown-hover">
|
|
<a href="#" data-bs-toggle="dropdown">
|
|
<i class="fa fa-search search-btn"></i>
|
|
<span class="arrow top"></span>
|
|
</a>
|
|
<div class="dropdown-menu p-15px">
|
|
<form action="search_results.html" method="POST" name="search_form">
|
|
<div class="input-group">
|
|
<input type="text" placeholder="Search" class="form-control bg-light" />
|
|
<button class="btn btn-dark" type="submit"><i class="fa fa-search"></i></button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- END header-nav -->
|
|
<!-- BEGIN header-nav -->
|
|
<div class="header-nav">
|
|
<ul class="nav justify-content-end">
|
|
<li class="dropdown dropdown-hover">
|
|
<a href="#" class="header-cart" data-bs-toggle="dropdown">
|
|
<i class="fa fa-shopping-bag"></i>
|
|
<span class="total">2</span>
|
|
<span class="arrow top"></span>
|
|
</a>
|
|
<div class="dropdown-menu dropdown-menu-cart p-0">
|
|
<div class="cart-header">
|
|
<h4 class="cart-title">Shopping Bag (1) </h4>
|
|
</div>
|
|
<div class="cart-body">
|
|
<ul class="cart-item">
|
|
<li>
|
|
<div class="cart-item-image"><img src="../assets/img/product/product-ipad.jpg" alt="" /></div>
|
|
<div class="cart-item-info">
|
|
<h4>iPad Pro Wi-Fi 128GB - Silver</h4>
|
|
<p class="price">$699.00</p>
|
|
</div>
|
|
<div class="cart-item-close">
|
|
<a href="#" data-bs-toggle="tooltip" data-bs-title="Remove">×</a>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="cart-item-image"><img src="../assets/img/product/product-imac.jpg" alt="" /></div>
|
|
<div class="cart-item-info">
|
|
<h4>21.5-inch iMac</h4>
|
|
<p class="price">$1299.00</p>
|
|
</div>
|
|
<div class="cart-item-close">
|
|
<a href="#" data-bs-toggle="tooltip" data-bs-title="Remove">×</a>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="cart-item-image"><img src="../assets/img/product/product-iphone.png" alt="" /></div>
|
|
<div class="cart-item-info">
|
|
<h4>iPhone 6s 16GB - Silver</h4>
|
|
<p class="price">$649.00</p>
|
|
</div>
|
|
<div class="cart-item-close">
|
|
<a href="#" data-bs-toggle="tooltip" data-bs-title="Remove">×</a>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="cart-footer">
|
|
<div class="row gx-2">
|
|
<div class="col-6">
|
|
<a href="checkout_cart.html" class="btn btn-default btn-theme d-block">View Cart</a>
|
|
</div>
|
|
<div class="col-6">
|
|
<a href="checkout_cart.html" class="btn btn-inverse btn-theme d-block">Checkout</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="divider"></li>
|
|
<li>
|
|
<a href="my_account.html">
|
|
<img src="../assets/img/user/user-1.jpg" class="user-img" alt="" />
|
|
<span class="d-none d-xl-inline">Login / Register</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- END header-nav -->
|
|
</div>
|
|
<!-- END header-container -->
|
|
</div>
|
|
<!-- END container -->
|
|
</div>
|
|
<!-- END #header -->
|
|
</pre>
|
|
</div><!-- end span12 -->
|
|
</div><!-- end row-fluid -->
|
|
<div class="row-fluid">
|
|
<div class="span12">
|
|
<div class="page-header">
|
|
<h3 id="page-content-header"><strong>E) Page Content Header</strong> - <a href="#top">top</a></h3>
|
|
</div>
|
|
<pre class="prettyprint linenums">
|
|
<!-- BEGIN #page-header -->
|
|
<div id="page-header" class="section-container page-header-container bg-black hide">
|
|
<!-- BEGIN page-header-cover -->
|
|
<div class="page-header-cover">
|
|
<img src="../assets/img/cover/cover-1.jpg" alt="" />
|
|
</div>
|
|
<!-- END page-header-cover -->
|
|
<!-- BEGIN container -->
|
|
<div class="container">
|
|
<h1 class="page-header"><b>Apple</b> Product</h1>
|
|
</div>
|
|
<!-- END container -->
|
|
</div>
|
|
<!-- BEGIN #page-header -->
|
|
</pre>
|
|
</div><!-- end span12 -->
|
|
</div><!-- end row-fluid -->
|
|
<div class="row-fluid">
|
|
<div class="span12">
|
|
<div class="page-header">
|
|
<h3 id="page-content"><strong>F) Page Content</strong> - <a href="#top">top</a></h3>
|
|
</div>
|
|
<p>
|
|
There have 2 options of page content. HTML code of Content container as shown below:
|
|
</p>
|
|
<h4>Page Content with Background</h4>
|
|
<pre class="prettyprint linenums">
|
|
<!-- BEGIN #content -->
|
|
<div id="content" class="has-bg section-container">
|
|
<!-- BEGIN cover-bg -->
|
|
<div class="cover-bg">
|
|
<img src="-- content background cover link --" alt="" />
|
|
</div>
|
|
<!-- END cover-bg -->
|
|
<!-- BEGIN container -->
|
|
<div class="container">
|
|
<!-- content here -->
|
|
</div>
|
|
<!-- END container -->
|
|
</div>
|
|
<!-- END #content -->
|
|
</pre>
|
|
<h4>Page Content without Background</h4>
|
|
<pre class="prettyprint linenums">
|
|
<!-- BEGIN #content -->
|
|
<div id="content" class="section-container">
|
|
<!-- BEGIN container -->
|
|
<div class="container">
|
|
<!-- content here -->
|
|
</div>
|
|
<!-- END container -->
|
|
</div>
|
|
<!-- END #content -->
|
|
</pre>
|
|
</div><!-- end span12 -->
|
|
</div><!-- end row-fluid -->
|
|
<div class="row-fluid">
|
|
<div class="span12">
|
|
<div class="page-header">
|
|
<h3 id="page-footer"><strong>G) Page Footer</strong> - <a href="#top">top</a></h3>
|
|
</div>
|
|
<pre class="prettyprint linenums">
|
|
<!-- BEGIN #footer -->
|
|
<div id="footer" class="footer">
|
|
<!-- BEGIN container -->
|
|
<div class="container">
|
|
<!-- BEGIN row -->
|
|
<div class="row">
|
|
<!-- BEGIN col-3 -->
|
|
<div class="col-md-3">
|
|
<h4 class="footer-header">ABOUT US</h4>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec tristique dolor, ac efficitur velit. Nulla lobortis tempus convallis. Nulla aliquam lectus eu porta pulvinar. Mauris semper justo erat.
|
|
</p>
|
|
<p>
|
|
Vestibulum porttitor lorem et vestibulum pharetra. Phasellus sit amet mi congue, hendrerit mi ut, dignissim eros.
|
|
</p>
|
|
</div>
|
|
<!-- END col-3 -->
|
|
<!-- BEGIN col-3 -->
|
|
<div class="col-md-3">
|
|
<h4 class="footer-header">RELATED LINKS</h4>
|
|
<ul class="fa-ul">
|
|
<li><i class="fa fa-li fa-angle-right"></i> <a href="#">Shopping Help</a></li>
|
|
<li><i class="fa fa-li fa-angle-right"></i> <a href="#">Terms of Use</a></li>
|
|
<li><i class="fa fa-li fa-angle-right"></i> <a href="#">Contact Us</a></li>
|
|
<li><i class="fa fa-li fa-angle-right"></i> <a href="#">Careers</a></li>
|
|
<li><i class="fa fa-li fa-angle-right"></i> <a href="#">Payment Method</a></li>
|
|
<li><i class="fa fa-li fa-angle-right"></i> <a href="#">Sales & Refund</a></li>
|
|
<li><i class="fa fa-li fa-angle-right"></i> <a href="#">Sitemap</a></li>
|
|
<li><i class="fa fa-li fa-angle-right"></i> <a href="#">Privacy & Policy</a></li>
|
|
</ul>
|
|
</div>
|
|
<!-- END col-3 -->
|
|
<!-- BEGIN col-3 -->
|
|
<div class="col-md-3">
|
|
<h4 class="footer-header">LATEST PRODUCT</h4>
|
|
<ul class="list-unstyled list-product">
|
|
<li>
|
|
<div class="image">
|
|
<img src="../assets/img/product/product-iphone-6s.jpg" alt="" />
|
|
</div>
|
|
<div class="info">
|
|
<h4 class="info-title">Iphone 6s</h4>
|
|
<div class="price">$1200.00</div>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="image">
|
|
<img src="../assets/img/product/product-galaxy-s6.jpg" alt="" />
|
|
</div>
|
|
<div class="info">
|
|
<h4 class="info-title">Samsung Galaxy s7</h4>
|
|
<div class="price">$850.00</div>
|
|
</div>
|
|
</li>
|
|
|
|
<li>
|
|
<div class="image">
|
|
<img src="../assets/img/product/product-ipad-pro.jpg" alt="" />
|
|
</div>
|
|
<div class="info">
|
|
<h4 class="info-title">Ipad Pro</h4>
|
|
<div class="price">$800.00</div>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="image">
|
|
<img src="../assets/img/product/product-galaxy-note5.jpg" alt="" />
|
|
</div>
|
|
<div class="info">
|
|
<h4 class="info-title">Samsung Galaxy Note 5</h4>
|
|
<div class="price">$1200.00</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- END col-3 -->
|
|
<!-- BEGIN col-3 -->
|
|
<div class="col-md-3">
|
|
<h4 class="footer-header">OUR CONTACT</h4>
|
|
<address>
|
|
<strong>Twitter, Inc.</strong><br />
|
|
1355 Market Street, Suite 900<br />
|
|
San Francisco, CA 94103<br /><br />
|
|
<abbr title="Phone">Phone:</abbr> (123) 456-7890<br />
|
|
<abbr title="Fax">Fax:</abbr> (123) 456-7891<br />
|
|
<abbr title="Email">Email:</abbr> <a href="mailto:sales@myshop.com">sales@myshop.com</a><br />
|
|
<abbr title="Skype">Skype:</abbr> <a href="skype:myshop">myshop</a>
|
|
</address>
|
|
</div>
|
|
<!-- END col-3 -->
|
|
</div>
|
|
<!-- END row -->
|
|
</div>
|
|
<!-- END container -->
|
|
</div>
|
|
<!-- END #footer -->
|
|
</pre>
|
|
</div><!-- end span12 -->
|
|
</div><!-- end row-fluid -->
|
|
<div class="row-fluid">
|
|
<div class="span12">
|
|
<div class="page-header">
|
|
<h3 id="page-footer-copyright"><strong>H) Page Footer Copyright</strong> - <a href="#top">top</a></h3>
|
|
</div>
|
|
<pre class="prettyprint linenums">
|
|
<!-- BEGIN #footer-copyright -->
|
|
<div id="footer-copyright" class="footer-copyright">
|
|
<!-- BEGIN container -->
|
|
<div class="container">
|
|
<div class="payment-method">
|
|
<img src="../assets/img/payment/payment-method.png" alt="" />
|
|
</div>
|
|
<div class="copyright">
|
|
Copyright © 2025 SeanTheme. All rights reserved.
|
|
</div>
|
|
</div>
|
|
<!-- END container -->
|
|
</div>
|
|
<!-- END #footer-copyright -->
|
|
</pre>
|
|
</div><!-- end span12 -->
|
|
</div><!-- end row-fluid -->
|
|
<div class="row-fluid">
|
|
<div class="span12">
|
|
<div class="page-header">
|
|
<h3 id="panel-theme"><strong>I) Panel Theme</strong> - <a href="#top">top</a></h3>
|
|
</div>
|
|
<p>
|
|
Panel Theme used to customize the overall layout options.
|
|
</p>
|
|
<pre class="prettyprint linenums">
|
|
<!-- begin theme-panel -->
|
|
<div class="theme-panel">
|
|
<a href="javascript:;" data-click="theme-panel-expand" class="theme-collapse-btn"><i class="fa fa-cog"></i></a>
|
|
<div class="theme-panel-content">
|
|
<div class="theme-list clearfix">
|
|
<div class="theme-list-item">
|
|
<a href="javascript:;" class="bg-purple"
|
|
data-theme-class="theme-purple"
|
|
data-click="theme-selector"
|
|
data-toggle="tooltip"
|
|
data-trigger="hover"
|
|
data-container="body"
|
|
data-title="Purple"> </a>
|
|
</div>
|
|
...
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end theme-panel -->
|
|
</pre>
|
|
</div><!-- end span12 -->
|
|
</div><!-- end row-fluid -->
|
|
<div class="row-fluid">
|
|
<div class="span12">
|
|
<div class="page-header">
|
|
<h3 id="page-end"><strong>J) End of Page (Javascript)</strong> - <a href="#top">top</a></h3>
|
|
</div>
|
|
<p>
|
|
Javascript files loaded in the end of page. This will reduce page load time.
|
|
</p>
|
|
<pre class="prettyprint linenums">
|
|
<!-- ================== BEGIN core-js ================== -->
|
|
<script src="../assets/js/e-commerce/vendor.min.js"></script>
|
|
<script src="../assets/js/e-commerce/app.min.js"></script>
|
|
<!-- ================== END core-js ================== -->
|
|
|
|
<!-- OR without vendor.min.js ================== -->
|
|
|
|
<!-- ================== BEGIN core-js ================== -->
|
|
<script src="../assets/plugins/pace-js/pace.min.js"></script>
|
|
<script src="../assets/plugins/jquery/dist/jquery.min.js"></script>
|
|
<script src="../assets/plugins/jquery-ui-dist/jquery-ui.min.js"></script>
|
|
<script src="../assets/plugins/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script src="../assets/plugins/paroller.js/dist/jquery.paroller.min.js"></script>
|
|
<script src="../assets/plugins/js-cookie/dist/js.cookie.min.js"></script>
|
|
<script src="../assets/js/e-commerce/app.min.js"></script>
|
|
<!-- ================== END core-js ================== -->
|
|
</body>
|
|
</html>
|
|
</pre>
|
|
</div>
|
|
</div><!-- end row-fluid -->
|
|
<div class="row-fluid">
|
|
<div class="span12">
|
|
<div class="page-header">
|
|
<h3 id="page-theme-options"><strong>K) Page Theme Options</strong> - <a href="#top">top</a></h3>
|
|
</div>
|
|
<p>Add the theme to the <code><body></code> tag in order to change the theme color.</p>
|
|
<h4>Available Theme Options</h4>
|
|
<pre class="prettyprint linenums">
|
|
<body class="theme-red">...</body>
|
|
<body class="theme-pink">...</body>
|
|
<body class="theme-orange">...</body>
|
|
<body class="theme-yellow">...</body>
|
|
<body class="theme-lime">...</body>
|
|
<body class="theme-green">...</body>
|
|
<body class="theme-teal">...</body>
|
|
<body class="theme-cyan">...</body>
|
|
<body class="theme-blue">...</body>
|
|
<body class="theme-purple">...</body>
|
|
<body class="theme-indigo">...</body>
|
|
<body class="theme-gray-500">...</body>
|
|
</pre>
|
|
</div><!-- end span12 -->
|
|
</div><!-- end row-fluid -->
|
|
<div class="row-fluid">
|
|
<div class="span12">
|
|
<div class="page-header">
|
|
<h3 id="page-dark-mode"><strong>L) Dark Mode</strong> - <a href="#top">top</a></h3>
|
|
</div>
|
|
<p>Add the <code>data-bs-theme="dark"</code> attribute to <code><html></code> in order to enable the dark mode.</p>
|
|
<pre class="prettyprint linenums">
|
|
<html data-bs-theme="dark">
|
|
</pre>
|
|
</div><!-- end span12 -->
|
|
</div><!-- end row-fluid -->
|
|
<div class="row-fluid">
|
|
<div class="span12">
|
|
<div class="page-header">
|
|
<h3 id="page-rtl-mode"><strong>M) RTL Mode</strong> - <a href="#top">top</a></h3>
|
|
</div>
|
|
<p>Add the <code>dir="rtl"</code> attribute to <code><html></code> in order to enable Right-To-Left (RTL) layout direction.</p>
|
|
<pre class="prettyprint linenums">
|
|
<html dir="rtl">
|
|
</pre>
|
|
<p>This will flip the layout direction of the entire page to support RTL languages like Arabic, Hebrew, or Persian.</p>
|
|
</div><!-- end span12 -->
|
|
</div><!-- end row-fluid -->
|
|
<div class="row-fluid">
|
|
<div class="span12">
|
|
<div class="page-header">
|
|
<h3 id="page-options"><strong>N) Page Options</strong> - <a href="#top">top</a></h3>
|
|
</div>
|
|
<p>Here is the general structure for the each case of page options.</p>
|
|
<h4>Page with fixed header</h4>
|
|
<pre class="prettyprint linenums">
|
|
<div id="header" class="header" data-fixed-top="true">
|
|
</pre>
|
|
<h4>Page with inverse header</h4>
|
|
<pre class="prettyprint linenums">
|
|
<div id="header" class="header" data-bs-theme="dark">
|
|
</pre>
|
|
</div><!-- end span12 -->
|
|
</div><!-- end row-fluid -->
|
|
<div class="row-fluid">
|
|
<div class="span12">
|
|
<div class="page-header">
|
|
<h3 id="page-gulp-scss"><strong>O) Using Gulp SCSS</strong> - <a href="#top">top</a></h3>
|
|
</div>
|
|
<h4>Installation</h4>
|
|
<p>Below is the command that required to run / compile the scss with gulpjs. If you are new to the gulpjs, you may refer to their <a href="https://gulpjs.com/" target="_blank">official website</a> for installation guide.</p>
|
|
<pre class="prettyprint linenums">
|
|
<!-- run the following command -->
|
|
cd /your-path-url/frontend/e-commerce/src/
|
|
npm install
|
|
gulp
|
|
|
|
<!-- available command -->
|
|
gulp plugins // generate list of plugins
|
|
</pre>
|
|
<p>Verify that you are running at least node <code>22.x.x</code> or later and npm <code>11.x.x</code> by running node -v and npm -v in a terminal/console window. Older versions produce errors, but newer versions are fine.</p>
|
|
<hr />
|
|
<h4>Gulp compilation</h4>
|
|
<p>
|
|
We are using gulp to compile & combine few plugins js & css into one single vendor file for js & css. This may help to improve the speed for page load if compare to multiple files loading in one page.
|
|
If you wish to edit the included plugins files, you may refer to the <code>/admin/src/gulpfile.js</code>.
|
|
</p>
|
|
<p>Below is the list of plugins that compile into <code>vendor.min.css</code>.</p>
|
|
<pre class="prettyprint linenums">
|
|
return gulp.src([
|
|
'node_modules/animate.css/animate.min.css',
|
|
'node_modules/@fortawesome/fontawesome-free/css/all.min.css',
|
|
'node_modules/jquery-ui-dist/jquery-ui.min.css',
|
|
'node_modules/pace-js/themes/black/pace-theme-flash.css',
|
|
'node_modules/bootstrap-icons/font/bootstrap-icons.css'
|
|
])
|
|
.pipe(sass())
|
|
.pipe(concat('vendor.min.css'))
|
|
.pipe(minifyCSS())
|
|
.pipe(gulp.dest(distPath + '/assets/css/e-commerce/'))
|
|
.pipe(livereload());
|
|
</pre>
|
|
<p>Below is the list of plugins that compile into <code>vendor.min.js</code>.</p>
|
|
<pre class="prettyprint linenums">
|
|
return gulp.src([
|
|
'node_modules/pace-js/pace.min.js',
|
|
'node_modules/jquery/dist/jquery.min.js',
|
|
'node_modules/jquery-ui-dist/jquery-ui.min.js',
|
|
'node_modules/bootstrap/dist/js/bootstrap.bundle.min.js',
|
|
'node_modules/paroller.js/dist/jquery.paroller.min.js',
|
|
'node_modules/js-cookie/dist/js.cookie.js'
|
|
])
|
|
.pipe(sourcemaps.init())
|
|
.pipe(concat('vendor.min.js'))
|
|
.pipe(sourcemaps.write())
|
|
.pipe(gulp.dest(distPath + '/assets/js/e-commerce/'))
|
|
.pipe(livereload());
|
|
</pre>
|
|
</div><!-- end span12 -->
|
|
</div><!-- end row-fluid -->
|
|
<div class="row-fluid">
|
|
<div class="span12">
|
|
<div class="page-header">
|
|
<h3 id="plugins-resources"><strong>P) Plugins & Resources</strong> - <a href="#top">top</a></h3>
|
|
</div>
|
|
<p>
|
|
Below is the list of all plugins and external resources used to power this template.
|
|
</p>
|
|
<table class="table table-bordered">
|
|
<thead>
|
|
<tr>
|
|
<th style="width:100px;">Name</th>
|
|
<th>CSS Files</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Bootstrap</td>
|
|
<td>
|
|
<p><b>Required CSS File</b></p>
|
|
<pre class="prettyprint linenums">
|
|
<link rel="stylesheet" href="../assets/plugins/bootstrap/dist/css/bootstrap.min.css" />
|
|
</pre>
|
|
<p><b>Required JS File</b></p>
|
|
<pre class="prettyprint linenums">
|
|
<script src="../assets/plugins/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
|
</pre>
|
|
<p><b>Official Link:</b><br /> <a href="http://getbootstrap.com/">http://getbootstrap.com/</a></p>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div>jQuery</div>
|
|
</td>
|
|
<td>
|
|
<p><b>Required JS File</b></p>
|
|
<pre class="prettyprint linenums">
|
|
<script src="../assets/plugins/jquery/dist/jquery.min.js"></script>
|
|
</pre>
|
|
<p><b>Official Link:</b><br /> <a href="http://jquery.com/">http://jquery.com/</a></p>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div>jQuery UI</div>
|
|
</td>
|
|
<td>
|
|
<p><b>Required CSS File</b></p>
|
|
<pre class="prettyprint linenums">
|
|
<link rel="stylesheet" href="../assets/plugins/jquery-ui-dist/jquery-ui.min.css" />
|
|
</pre>
|
|
<p><b>Required JS File</b></p>
|
|
<pre class="prettyprint linenums">
|
|
<script src="../assets/plugins/jquery-ui-dist/jquery-ui.min.js"></script>
|
|
</pre>
|
|
<p><b>Official Link:</b><br /> <a href="https://jqueryui.com/">https://jqueryui.com/</a></p>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Bootstrap Icons</td>
|
|
<td>
|
|
<p><b>Required CSS File</b></p>
|
|
<pre class="prettyprint linenums">
|
|
<link rel="stylesheet" href="../assets/plugins/bootstrap-icons/font/bootstrap-icons.css" />
|
|
</pre>
|
|
<p><b>Official Link:</b><br /> <a href="https://icons.getbootstrap.com/">https://icons.getbootstrap.com/</a></p>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Font Awesome</td>
|
|
<td>
|
|
<p><b>Required CSS File</b></p>
|
|
<pre class="prettyprint linenums">
|
|
<link rel="stylesheet" href="../assets/plugins/@fortawesome/fontawesome-free/css/all.min.css" />
|
|
</pre>
|
|
<p><b>Official Link:</b><br /> <a href="https://fontawesome.com/">https://fontawesome.com/</a></p>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Animate.css</td>
|
|
<td>
|
|
<p><b>Required CSS File</b></p>
|
|
<pre class="prettyprint linenums">
|
|
<link rel="stylesheet" href="../assets/plugins/animate/animate.min.css" />
|
|
</pre>
|
|
<p><b>Official Link:</b><br /> <a href="http://daneden.github.io/animate.css/">http://daneden.github.io/animate.css/</a></p>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>scrollMonitor</td>
|
|
<td>
|
|
<p><b>Required JS File</b></p>
|
|
<pre class="prettyprint linenums">
|
|
<script src="../assets/plugins/scrollmonitor/scrollMonitor.js"></script>
|
|
</pre>
|
|
<p><b>Official Link:</b><br /> <a href="https://github.com/stutrek/scrollMonitor">https://github.com/stutrek/scrollMonitor</a></p>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Pace</td>
|
|
<td>
|
|
<p><b>Required CSS File</b></p>
|
|
<pre class="prettyprint linenums">
|
|
<link rel="stylesheet" href="../assets/plugins/pace-js/themes/black/pace-theme-flash.css" />
|
|
</pre>
|
|
<p><b>Required JS File</b></p>
|
|
<pre class="prettyprint linenums">
|
|
<script src="../assets/plugins/pace-js/pace.min.js"></script>
|
|
</pre>
|
|
<p><b>Official Link:</b><br /> <a href="https://codebyzach.github.io/pace/">https://codebyzach.github.io/pace/</a></p>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>JS Cookie</td>
|
|
<td>
|
|
<p><b>Required JS File</b></p>
|
|
<pre class="prettyprint linenums">
|
|
<script src="../assets/plugins/js-cookie/dist/js.cookie.min.js"></script>
|
|
</pre>
|
|
<p><b>Official Link:</b><br /> <a href="https://github.com/js-cookie/js-cookie">https://github.com/js-cookie/js-cookie</a></p>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Paroller</td>
|
|
<td>
|
|
<p><b>Required JS File</b></p>
|
|
<pre class="prettyprint linenums">
|
|
<script="../assets/plugins/paroller.js/dist/jquery.paroller.min.js"></script>
|
|
</pre>
|
|
<p><b>Official Link:</b><br /> <a href="https://tgomilar.github.io/paroller.js/">https://tgomilar.github.io/paroller.js/</a></p>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div><!-- end row-fluid -->
|
|
<div class="row-fluid">
|
|
<div class="span12">
|
|
<div class="page-header">
|
|
<h3 id="references"><strong>Q) References</strong> - <a href="#top">top</a></h3>
|
|
</div>
|
|
<p>
|
|
I've used the following images, icons or other files as listed.
|
|
</p>
|
|
<p><b>jQuery Plugins</b></p>
|
|
<ol>
|
|
<li><b>Bootstrap</b>:<a href="http://getbootstrap.com/">http://getbootstrap.com/</a></li>
|
|
<li><b>jQuery</b>:<a href="http://jquery.com/">http://jquery.com/</a></li>
|
|
<li><b>jQuery UI</b>:<a href="http://jqueryui.com/">http://jqueryui.com/</a></li>
|
|
<li><b>Bootstrap Icons</b>:<a href="https://icons.getbootstrap.com/">https://icons.getbootstrap.com/</a></li>
|
|
<li><b>Font Awesome</b>:<a href="http://fortawesome.github.io/Font-Awesome/">http://fortawesome.github.io/Font-Awesome/</a></li>
|
|
<li><b>Animate.css</b>:<a href="http://daneden.github.io/animate.css/">http://daneden.github.io/animate.css/</a></li>
|
|
<li><b>scrollMonitor</b>:<a href="https://github.com/stutrek/scrollMonitor">https://github.com/stutrek/scrollMonitor</a></li>
|
|
<li><b>Pace</b>:<a href="http://github.hubspot.com/pace/">http://github.hubspot.com/pace/</a></li>
|
|
<li><b>JS Cookie</b>:<a href="https://github.com/js-cookie/js-cookie">https://github.com/js-cookie/js-cookie</a></li>
|
|
<li><b>Paroller</b>:<a href="https://tgomilar.github.io/paroller.js/">https://tgomilar.github.io/paroller.js/</a>
|
|
</ol>
|
|
</div>
|
|
</div><!-- end row-fluid -->
|
|
</div><!-- end span12 -->
|
|
</div><!-- end row-fluid -->
|
|
</div><!-- end container -->
|
|
|
|
<footer class="footer">
|
|
<div class="container text-left">
|
|
<p>Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes, you might consider visiting the forums and inbox us your question via <a href="https://wrapbootstrap.com/user/seanngu/message">wrapbootstrap</a>.</p>
|
|
<br />
|
|
<p class="append-bottom alt large"><strong>Sean Ngu</strong></p>
|
|
<p><a href="#top">Go To Table of Contents</a></p>
|
|
</div>
|
|
</footer><!-- end footer -->
|
|
|
|
<script src="assets/bootstrap/js/jquery.js"></script>
|
|
<script src="assets/bootstrap/js/bootstrap-transition.js"></script>
|
|
<script src="assets/bootstrap/js/bootstrap-alert.js"></script>
|
|
<script src="assets/bootstrap/js/bootstrap-modal.js"></script>
|
|
<script src="assets/bootstrap/js/bootstrap-dropdown.js"></script>
|
|
<script src="assets/bootstrap/js/bootstrap-scrollspy.js"></script>
|
|
<script src="assets/bootstrap/js/bootstrap-tab.js"></script>
|
|
<script src="assets/bootstrap/js/bootstrap-tooltip.js"></script>
|
|
<script src="assets/bootstrap/js/bootstrap-popover.js"></script>
|
|
<script src="assets/bootstrap/js/bootstrap-button.js"></script>
|
|
<script src="assets/bootstrap/js/bootstrap-collapse.js"></script>
|
|
<script src="assets/bootstrap/js/bootstrap-carousel.js"></script>
|
|
<script src="assets/bootstrap/js/bootstrap-typeahead.js"></script>
|
|
<script src="assets/bootstrap/js/bootstrap-affix.js"></script>
|
|
|
|
<script src="assets/bootstrap/js/holder/holder.js"></script>
|
|
<script src="assets/bootstrap/js/google-code-prettify/prettify.js"></script>
|
|
<script src="assets/bootstrap/js/application.js"></script>
|
|
</body>
|
|
</html> |