first commit
This commit is contained in:
Erwin Galang
parent
f28d8470dc
commit
eb7985af64
|
|
@ -0,0 +1,84 @@
|
|||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
|
||||
|
||||
<title>oBanana B2B - Elevate Your Business</title>
|
||||
<meta name="keywords"
|
||||
content="apparel, catalog, clean, ecommerce, ecommerce HTML, electronics, fashion, html eCommerce, html store, minimal, multipurpose, multipurpose ecommerce, online store, responsive ecommerce template, shops" />
|
||||
<meta name="description" content="Best ecommerce html template for single and multi vendor store.">
|
||||
<meta name="author" content="ashishmaraviya">
|
||||
|
||||
<!-- site Favicon -->
|
||||
<link rel="icon" href="assets/images/favicon/favicon.png" sizes="32x32" />
|
||||
<link rel="apple-touch-icon" href="assets/images/favicon/favicon.png" />
|
||||
<meta name="msapplication-TileImage" content="assets/images/favicon/favicon.png" />
|
||||
|
||||
<!-- css Icon Font -->
|
||||
<link rel="stylesheet" href="assets/css/vendor/ecicons.min.css" />
|
||||
|
||||
<!-- css All Plugins Files -->
|
||||
<link rel="stylesheet" href="assets/css/plugins/animate.css" />
|
||||
<link rel="stylesheet" href="assets/css/plugins/swiper-bundle.min.css" />
|
||||
<link rel="stylesheet" href="assets/css/plugins/jquery-ui.min.css" />
|
||||
<link rel="stylesheet" href="assets/css/plugins/countdownTimer.css" />
|
||||
<link rel="stylesheet" href="assets/css/plugins/slick.min.css" />
|
||||
<link rel="stylesheet" href="assets/css/plugins/bootstrap.css" />
|
||||
|
||||
<!-- Main Style -->
|
||||
<link rel="stylesheet" href="assets/css/style.css" />
|
||||
<link rel="stylesheet" href="assets/css/responsive.css" />
|
||||
|
||||
<!-- Background css -->
|
||||
<link rel="stylesheet" id="bg-switcher-css" href="assets/css/backgrounds/bg-4.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- Start main Section -->
|
||||
<section class="ec-404-error-page-02">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm-12 text-center">
|
||||
<img class="img-404" src="assets/images/common/404-error-page.gif" alt="" />
|
||||
|
||||
<h1 class="main-title text-center">404</h1>
|
||||
<h3 class="sub-title text-center">Look like you're lost</h3>
|
||||
|
||||
<p class="desc-content text-center">the page you are looking for not avaible!</p>
|
||||
|
||||
<a class="link-404" href="#">Go to Back</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- End main Section -->
|
||||
|
||||
<!-- Vendor JS -->
|
||||
<script src="assets/js/vendor/jquery-3.5.1.min.js"></script>
|
||||
<script src="assets/js/vendor/popper.min.js"></script>
|
||||
<script src="assets/js/vendor/bootstrap.min.js"></script>
|
||||
<script src="assets/js/vendor/jquery-migrate-3.3.0.min.js"></script>
|
||||
<script src="assets/js/vendor/modernizr-3.11.2.min.js"></script>
|
||||
|
||||
<!--Plugins JS-->
|
||||
<script src="assets/js/plugins/swiper-bundle.min.js"></script>
|
||||
<script src="assets/js/plugins/countdownTimer.min.js"></script>
|
||||
<script src="assets/js/plugins/scrollup.js"></script>
|
||||
<script src="assets/js/plugins/jquery.zoom.min.js"></script>
|
||||
<script src="assets/js/plugins/slick.min.js"></script>
|
||||
<script src="assets/js/plugins/infiniteslidev2.js"></script>
|
||||
<script src="assets/js/vendor/jquery.magnific-popup.min.js"></script>
|
||||
<script src="assets/js/plugins/jquery.sticky-sidebar.js"></script>
|
||||
|
||||
<!-- Main Js -->
|
||||
<script src="assets/js/vendor/index.js"></script>
|
||||
<script src="assets/js/main.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
|
||||
|
||||
<title>oBanana B2B - Elevate Your Business</title>
|
||||
<meta name="keywords"
|
||||
content="apparel, catalog, clean, ecommerce, ecommerce HTML, electronics, fashion, html eCommerce, html store, minimal, multipurpose, multipurpose ecommerce, online store, responsive ecommerce template, shops" />
|
||||
<meta name="description" content="Best ecommerce html template for single and multi vendor store.">
|
||||
<meta name="author" content="ashishmaraviya">
|
||||
|
||||
<!-- site Favicon -->
|
||||
<link rel="icon" href="assets/images/favicon/favicon.png" sizes="32x32" />
|
||||
<link rel="apple-touch-icon" href="assets/images/favicon/favicon.png" />
|
||||
<meta name="msapplication-TileImage" content="assets/images/favicon/favicon.png" />
|
||||
|
||||
<!-- css Icon Font -->
|
||||
<link rel="stylesheet" href="assets/css/vendor/ecicons.min.css" />
|
||||
|
||||
<!-- css All Plugins Files -->
|
||||
<link rel="stylesheet" href="assets/css/plugins/animate.css" />
|
||||
<link rel="stylesheet" href="assets/css/plugins/swiper-bundle.min.css" />
|
||||
<link rel="stylesheet" href="assets/css/plugins/jquery-ui.min.css" />
|
||||
<link rel="stylesheet" href="assets/css/plugins/countdownTimer.css" />
|
||||
<link rel="stylesheet" href="assets/css/plugins/slick.min.css" />
|
||||
<link rel="stylesheet" href="assets/css/plugins/bootstrap.css" />
|
||||
|
||||
<!-- Main Style -->
|
||||
<link rel="stylesheet" href="assets/css/style.css" />
|
||||
<link rel="stylesheet" href="assets/css/responsive.css" />
|
||||
|
||||
<!-- Background css -->
|
||||
<link rel="stylesheet" id="bg-switcher-css" href="assets/css/backgrounds/bg-4.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- Start main Section -->
|
||||
<section class="ec-under-maintenance">
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="under-maintenance">
|
||||
<h1>Error 404</h1>
|
||||
<h4>The page was not found.</h4>
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
|
||||
been the industry's standard dummy.</p>
|
||||
<a href="index.php" class="btn btn-lg btn-primary" tabindex="0">Back to Home</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 disp-768">
|
||||
<div class="under-maintenance">
|
||||
<img class="maintenance-img" src="assets/images/common/404.png" alt="maintenance">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- End main Section -->
|
||||
|
||||
<!-- Vendor JS -->
|
||||
<script src="assets/js/vendor/jquery-3.5.1.min.js"></script>
|
||||
<script src="assets/js/vendor/popper.min.js"></script>
|
||||
<script src="assets/js/vendor/bootstrap.min.js"></script>
|
||||
<script src="assets/js/vendor/jquery-migrate-3.3.0.min.js"></script>
|
||||
<script src="assets/js/vendor/modernizr-3.11.2.min.js"></script>
|
||||
|
||||
<!--Plugins JS-->
|
||||
<script src="assets/js/plugins/swiper-bundle.min.js"></script>
|
||||
<script src="assets/js/plugins/countdownTimer.min.js"></script>
|
||||
<script src="assets/js/plugins/scrollup.js"></script>
|
||||
<script src="assets/js/plugins/jquery.zoom.min.js"></script>
|
||||
<script src="assets/js/plugins/slick.min.js"></script>
|
||||
<script src="assets/js/plugins/infiniteslidev2.js"></script>
|
||||
<script src="assets/js/vendor/jquery.magnific-popup.min.js"></script>
|
||||
<script src="assets/js/plugins/jquery.sticky-sidebar.js"></script>
|
||||
|
||||
<!-- Main Js -->
|
||||
<script src="assets/js/vendor/index.js"></script>
|
||||
<script src="assets/js/main.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,137 @@
|
|||
* {
|
||||
font-family: 'Lato', sans-serif;
|
||||
font-weight: 400;
|
||||
transition: all .1s ease;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 35px;
|
||||
font-weight:600;
|
||||
}
|
||||
h5{
|
||||
margin-top: 15px;
|
||||
}
|
||||
p{
|
||||
color: #888;
|
||||
}
|
||||
li{
|
||||
color: #888;
|
||||
}
|
||||
.page-title{
|
||||
padding: 70px 0;
|
||||
text-align: center;
|
||||
border: 1px solid #eee;
|
||||
/* box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1); */
|
||||
margin: 0 0 30px 0;
|
||||
background-image: url(../img/hero.png);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.page-title h1 {
|
||||
color: #fff;
|
||||
}
|
||||
ol ol, ul ul, ol ul, ul ol {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.page-section {
|
||||
margin-bottom: 5%;
|
||||
padding: 1em;
|
||||
background: #fff;
|
||||
color: #444;
|
||||
border: 1px solid #eee;
|
||||
/* box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1); */
|
||||
}
|
||||
.section-title{
|
||||
margin-bottom: 15px;
|
||||
padding-bottom: 10px;
|
||||
color: #5c3f6b;
|
||||
border-bottom: 1px solid #eee;
|
||||
font-size: 23px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.intro ul{
|
||||
background: #f3f4fb;
|
||||
padding: 20px 30px;
|
||||
}
|
||||
.intro ul li{
|
||||
padding: 5px 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
.doc-img{
|
||||
margin: 20px 0;
|
||||
}
|
||||
.inst-img{
|
||||
margin-bottom: 20px;
|
||||
width: 100%;
|
||||
border: 1px solid #eee;
|
||||
/* box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1); */
|
||||
}
|
||||
.dark_bg{
|
||||
background-color: #f3f4fb;
|
||||
border-bottom: 1px solid #fff;
|
||||
}
|
||||
h6 span{
|
||||
color: red;
|
||||
}
|
||||
.doc-img img{
|
||||
margin-bottom: 10px;
|
||||
width: 100%;
|
||||
border: 1px solid #eee;
|
||||
/* box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1); */
|
||||
}
|
||||
.thank{
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
.height-100{
|
||||
height: 100vh;
|
||||
}
|
||||
#thank p i{
|
||||
color: #ffd600;
|
||||
margin: 0 2px;
|
||||
}
|
||||
pre{
|
||||
margin: 15px 0;
|
||||
}
|
||||
.notes{
|
||||
margin: 10px 0;
|
||||
padding: 10px;
|
||||
background: #ffe9e9;
|
||||
border: 1px solid #f39797;
|
||||
border-radius: 0;
|
||||
}
|
||||
/* .navigation, #mainNav { */
|
||||
/* border: 1px solid #eee; */
|
||||
/* box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1); */
|
||||
/* } */
|
||||
.inner-wrapper-sticky {
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
.navigation__link {
|
||||
display: block;
|
||||
color: #444;
|
||||
text-decoration: none;
|
||||
padding: 12px 15px;
|
||||
font-weight: 400;
|
||||
border-bottom: 1px solid #eeeeee;
|
||||
}
|
||||
.navigation__link:hover {
|
||||
background-color: #bbb;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
.navigation__link.active {
|
||||
color: white;
|
||||
background-color: #2f3290;
|
||||
}
|
||||
#resource ul li{
|
||||
margin: 5px 0;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 90 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 353 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 282 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 282 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 162 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 119 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
|
|
@ -0,0 +1,372 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Ekka - Ecommerce Admin Template.</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Ekka - Ecommerce Admin Template.">
|
||||
<meta name="keywords"
|
||||
content="admin template, html admin dashboard, dashboard, admin panel, apparel, catalog, clean, ecommerce, ecommerce HTML, electronics, fashion, html eCommerce, html store, minimal, multipurpose, multipurpose ecommerce, online store, responsive ecommerce template, shops">
|
||||
<meta name="author" content="">
|
||||
|
||||
<link rel="shortcut icon" href="img/favicon.png">
|
||||
<link href='https://fonts.googleapis.com/css?family=Lato:100,400,700' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
|
||||
|
||||
<!-- Bootstrap stylesheet -->
|
||||
<link rel="stylesheet" href="css/bootstrap.css">
|
||||
<!-- Site Main stylesheet -->
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="page-title">
|
||||
<h1>Ekka - Ecommerce Admin Template.</h1>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-3">
|
||||
<nav class="navigation" id="mainNav">
|
||||
<a class="navigation__link" href="#intro">Introduction</a>
|
||||
<a class="navigation__link" href="#started">Getting Started</a>
|
||||
<a class="navigation__link dark_bg" href="#localinstall">Local Server Installation</a>
|
||||
<a class="navigation__link dark_bg" href="#serverinstall">Live Server Installation</a>
|
||||
<a class="navigation__link dark_bg" href="#cust-c">Customization Settings</a>
|
||||
<a class="navigation__link" href="#resource">Free Resources</a>
|
||||
<a class="navigation__link" href="#thank">Thank You</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="col-9">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<section class="col-12 page-section" id="intro">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div>
|
||||
<h2 class="section-title">Introduction</h2>
|
||||
<div class="intro">
|
||||
<ul>
|
||||
<li><strong>Item Name : </strong>Ekka - Ecommerce Admin Template.</li>
|
||||
<li><strong>Item Version : </strong>3.6</li>
|
||||
<li><strong>Author : ashishmaraviya</strong></li>
|
||||
<li><strong>Copyright : </strong> 2023</li>
|
||||
</ul>
|
||||
</div>
|
||||
<p>First of all, thank you so much for purchasing this <b>ekka admin</b> Template and for being my loyal customer. You are awesome! You are entitled to get free lifetime updates to this product + exceptional support from the author directly.</p>
|
||||
<p>This documentation is to help you regarding each step of customization. Please go through the documentation carefully to understand how this template is made and how to edit this properly. Basic <b>HTML, CSS | SCSS & JS</b> knowledge is required to customize this item. You may learn basics <a href="https://www.w3schools.com/" target="_blank"><b> here </b></a> and <a href="https://getbootstrap.com/" target="_blank"><b> here </b></a>.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="col-12 page-section" id="started">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div>
|
||||
<h2 class="section-title">Getting Started</h2>
|
||||
<h4>Requirements</h4>
|
||||
<p>You will need the following sofwares to customize this template.</p>
|
||||
<ol>
|
||||
<li>Code Editing Software (eg: Visual studio code, Dreamweaver, Sublime Text or Notepad++)</li>
|
||||
<li>For SCSS build up (eg: koala, prepos, codekit etc...)</li>
|
||||
<li>Web Browser for testing (eg: Google Chrome or Mozilla Firefox)</li>
|
||||
</ol>
|
||||
<div class="notes">Note : Be careful while editing the item. If not edited properly, the design layout may break completely. </div>
|
||||
<h4>Include Files</h4>
|
||||
<ul>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>SCSS</li>
|
||||
<li>JS</li>
|
||||
<li>IMAGES</li>
|
||||
<li>ICON(svg)</li>
|
||||
<li>FONT</li>
|
||||
</ul>
|
||||
<h4>Files Structure :</h4>
|
||||
<ul>
|
||||
<li>css</li>
|
||||
<ul>
|
||||
<li>ecart - ( Main stylesheets )</li>
|
||||
<li>ecart.rtl - ( RTL stylesheets )</li>
|
||||
</ul>
|
||||
<li>img</li>
|
||||
<ul>
|
||||
<li>banner</li>
|
||||
<li>brand</li>
|
||||
<li>category</li>
|
||||
<li>icons</li>
|
||||
<li>logo</li>
|
||||
<li>products</li>
|
||||
<li>review-image</li>
|
||||
<li>ui-icons</li>
|
||||
<li>user</li>
|
||||
<li>vendor</li>
|
||||
</ul>
|
||||
<li>js</li>
|
||||
<ul>
|
||||
<li>bootstrap.bundle.min</li>
|
||||
<li>chart</li>
|
||||
<li>date-range - ( Date Range Picker js files )</li>
|
||||
<li>ekka - ( ekka main js files )</li>
|
||||
</ul>
|
||||
<li>plugins</li>
|
||||
<ul>
|
||||
<li>charts - ( charts plugin files )</li>
|
||||
<li>data-tables - ( data-tables plugin files )</li>
|
||||
<li>daterangepicker - ( daterangepicker plugin files )</li>
|
||||
<li>flag-icons - ( Vflag-icons plugin files )</li>
|
||||
<li>fullcalendar - ( fullcalendar plugin files )</li>
|
||||
<li>jquery - ( jquery plugin files )</li>
|
||||
<li>jquery-zoom</li>
|
||||
<li>material - ( material plugin files )</li>
|
||||
<li>options-sidebar</li>
|
||||
<li>simplebar - ( simplebar plugin files )</li>
|
||||
<li>slick</li>
|
||||
<li>swiper</li>
|
||||
<li>tags-input</li>
|
||||
</ul>
|
||||
<li>scss</li>
|
||||
<ul>
|
||||
<li>bootstrap</li>
|
||||
<li>components</li>
|
||||
<li>pages</li>
|
||||
<li>utilities</li>
|
||||
<li>ekka scss file</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="col-12 page-section" id="localinstall">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h2 class="section-title">Local Server Installation</h2>
|
||||
<div class="sub-sec-1">
|
||||
|
||||
<p>➣ There are the Four things to setup & run the theme.</p>
|
||||
|
||||
<h6>1. Install & Start Xampp Server <a class="click-a" href="#step1">Click</a></h6>
|
||||
<h6>2. How to Setup Theme Code Folder <a class="click-a" href="#step2">Click</a></h6>
|
||||
<h6>3. Database Configuration <a class="click-a" href="#step3"> Click</a><span> (this theme have not use any database, because it's html template)</span></h6>
|
||||
<h6>4. Run the theme into browser <a class="click-a" href="#step4">Click</a></h6>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
<div class="sub-sec-1">
|
||||
|
||||
<h5 id="step1" class="step-heading"><b>Step-1 : </b> ➣ Install & Start Xampp Server</h5>
|
||||
|
||||
<div class="sub-sec-2">
|
||||
<p>➣ Download the letest version of <span class="f-red"><b>Xampp</b></span> & Install Xampp Server <a class="click-a" href="https://www.wikihow.com/Install-XAMPP-for-Windows" target="_blank">Click</a></p>
|
||||
<p>➣ Click on <span class="f-red"><b>Start</b></span> button to start Apache & MySql into Xampp Server</p>
|
||||
<img class="inst-img" onclick="zoomImage('img/xampp-start-01.png')" src="img/xampp-start-01.png" alt=""/>
|
||||
<p>➣ Now blow image show the running Xampp Server</p>
|
||||
<img class="inst-img" onclick="zoomImage('img/xampp-start-02.png')" src="img/xampp-start-02.png" alt=""/>
|
||||
|
||||
<p class="notes">Now Xammp Instalation process end up here and move to the next step below..</p>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Setup theme Code Folder -->
|
||||
<div class="sub-sec-1">
|
||||
|
||||
<h5 id="step2" class="step-heading"><b>Step-2 : </b> ➣ How to Setup Theme Code Folder</h5>
|
||||
|
||||
<div class="sub-sec-2">
|
||||
|
||||
<p>➣ Open unzip folder <span class="f-red"><b> ekka - Ecommerce HTML Template</b></span> and copy <span class="f-red"><b>ekka-admin</b></span> folder as show below image</p>
|
||||
<img class="inst-img" src="img/path-image-1.png" alt=""/>
|
||||
|
||||
<p>➣ Now open <span class="f-red"><b>Xampp</b></span> folder</p>
|
||||
<img class="inst-img" src="img/li-php-file-01.png" alt=""/>
|
||||
|
||||
|
||||
<p>➣ After that open <span class="f-red"><b>htdocs</b></span> folder</p>
|
||||
<img class="inst-img" src="img/li-php-file-02.png" alt=""/>
|
||||
|
||||
<p>➣ Now paste already copied<span class="f-red"><b> ekka-admin</b></span> folder into <span class="f-red"><b>htdocs</b></span></p>
|
||||
<img class="inst-img" src="img/path-image-2.png" alt=""/>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="sub-sec-1">
|
||||
<h5 id="step3" class="step-heading"><b>Step-3 : </b> ➣ Database Configuration</h5>
|
||||
|
||||
<p class="notes">This theme have not use any database, because it's html template and not needed any type of database configuration. theme directly run in localhost or server.</p>
|
||||
</div>
|
||||
|
||||
<div class="sub-sec-1">
|
||||
<h5 id="step4" class="step-heading"><b>Step-4 : </b> ➣ Run the theme into browser</h5>
|
||||
<p>➣ Open <span class="f-red"><b> Browser</b></span> and run the Landing page to type located theme path : <span class="f-red"><b>localhost/ekka-admin/</b></span> as show below image</p>
|
||||
<img class="inst-img" src="img/landing-shot.png" alt=""/>
|
||||
|
||||
|
||||
<p>➣ Now you can take a look on any of the layout by choosing on left of the site sidebar<b> Navigation</b>.</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="col-12 page-section" id="serverinstall">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h2 class="section-title">Live Server Installation</h2>
|
||||
<div class="sub-sec-1">
|
||||
<p>➣ There are the Four things to setup & run the theme.</p>
|
||||
|
||||
<h6>1. Hosting Account <a class="click-a" href="#li-step1">Click</a></h6>
|
||||
<h6>2. How to Setup Theme Code Folder <a class="click-a" href="#li-step2">Click</a></h6>
|
||||
<h6>3. Database Configuration <a class="click-a" href="#li-step3"> Click</a><span> (this theme have not use any database, because it's html template)</span></h6>
|
||||
<h6>4. Run the theme into browser <a class="click-a" href="#li-step4">Click</a></h6>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Hosting Account -->
|
||||
<div class="sub-sec-1">
|
||||
|
||||
<h5 id="li-step1" class="step-heading"><b>Step-1 : </b> ➣ Hosting Account</h5>
|
||||
|
||||
<div class="sub-sec-2">
|
||||
<p>➣ You must have <span class="f-red"><b>Hosting</b></span> account. And if you don't have please purchase it before move ahed. <a class="click-a" href="https://www.hostinger.in/web-hosting" target="_blank">Click</a></p>
|
||||
|
||||
<p class="notes">Note: I am just giving the example of Hosting account you can purchase any of hosting account that support PHP.</p>
|
||||
|
||||
<p>➣ Get Login into your hostinger account and open dashboard.</p>
|
||||
|
||||
<img class="inst-img" src="img/si-hosting-01.png" alt=""/>
|
||||
|
||||
<p class="notes">Now Hosting account end up here and move to the next step below..</p>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- Setup theme Code Folder -->
|
||||
<div class="sub-sec-1">
|
||||
|
||||
<h5 id="li-step2" class="step-heading"><b>Step-2 : </b> ➣ How to Setup Theme Code Folder</h5>
|
||||
|
||||
<div class="sub-sec-2">
|
||||
|
||||
<p>➣ From Dashboard Click on <span class="f-red"><b>File Manager</b></span> as show below image</p>
|
||||
<img class="inst-img" src="img/si-php-file-00.png" alt=""/>
|
||||
|
||||
<p>➣ Now upload <span class="f-red"><b>ekka-admin.zip</b></span> folder into server</p>
|
||||
<img class="inst-img" src="img/si-php-file-01.png" alt=""/>
|
||||
|
||||
<p>➣ After upload unzip this folder as shown below image</p>
|
||||
<img class="inst-img" src="img/si-php-file-02.png" alt=""/>
|
||||
|
||||
<p class="notes">Now the Theme Code setup is finished here move to the next step below..</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="sub-sec-1">
|
||||
<h5 id="li-step3" class="step-heading"><b>Step-3 : </b> ➣ Database Configuration</h5>
|
||||
|
||||
<p class="notes">This theme have not use any database, because it's html template and not needed any type of database configuration. theme directly run in localhost or server.</p>
|
||||
</div>
|
||||
<!-- Run theme into Browser -->
|
||||
<div class="sub-sec-1">
|
||||
|
||||
<h5 id="li-step4" class="step-heading"><b>Step-4 : </b> ➣ Run the theme into browser</h5>
|
||||
|
||||
<div class="sub-sec-2">
|
||||
|
||||
<p>➣ Open <span class="f-red"><b> Browser</b></span> and run the "Landing page" to type located theme path : <span class="f-red"><b>yourdomain.com/ekka-admin/</b></span> as show below image</p>
|
||||
<img class="inst-img" src="img/landing-shot-li.png" alt=""/>
|
||||
|
||||
|
||||
<p>➣ Now you can take a look on any of the layout by choosing on top of the site<b> menu</b>.</p>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="col-12 page-section" id="cust-c">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h2 class="section-title">Setting Sidebar</h2>
|
||||
<p>Below are the list of all features available to customize the backend panel as per you want. </p>
|
||||
|
||||
<p><b>➣ Header Layout </b>: If you want to set Header Layout Fixed | Static then, you can do it from setting sidebar.</p>
|
||||
<p><b>➣ Sidebar Layout </b>: Change into sidebar layout with multiple option.</p>
|
||||
<p><b>➣ Header Background </b>: If you want to change the Header background color.</p>
|
||||
<p><b>➣ Navigation Background </b>: If you want to change the Navigation background color.</p>
|
||||
<p><b>➣ Spacing Layout </b>: Spacing for whole website into all that elements.</p>
|
||||
|
||||
<img class="inst-img" src="img/setting_sidebar.png" alt="skin">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="col-12 page-section" id="resource">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div>
|
||||
<h2 class="section-title">Free Resources</h2>
|
||||
<ul>
|
||||
<li>Google Fonts</li>
|
||||
<li>Font Awesome Icons</li>
|
||||
<li>Owl Carousel</li>
|
||||
<li>Slick Carousel</li>
|
||||
<li>Animate</li>
|
||||
<li>Date Range Picker</li>
|
||||
<li>Data Tables</li>
|
||||
<li>Full Calendar</li>
|
||||
<li>Swiper</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="col-12 page-section height-100" id="thank">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="thank">
|
||||
<h2 class="section-title">Thank You</h2>
|
||||
<p>Thank you again for download 'ekka', enjoy it and give us ratting.</p>
|
||||
<img src="img/star.png" alt="shapes"></img>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- theme script -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
|
||||
<script src="js/jquery.sticky-sidebar.js"></script>
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,750 @@
|
|||
(function (global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
|
||||
typeof define === 'function' && define.amd ? define(factory) :
|
||||
(global.StickySidebar = factory());
|
||||
}(this, (function () { 'use strict';
|
||||
|
||||
var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
|
||||
|
||||
|
||||
|
||||
function unwrapExports (x) {
|
||||
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
|
||||
}
|
||||
|
||||
function createCommonjsModule(fn, module) {
|
||||
return module = { exports: {} }, fn(module, module.exports), module.exports;
|
||||
}
|
||||
|
||||
var stickySidebar = createCommonjsModule(function (module, exports) {
|
||||
(function (global, factory) {
|
||||
if (typeof undefined === "function" && undefined.amd) {
|
||||
undefined(['exports'], factory);
|
||||
} else {
|
||||
factory(exports);
|
||||
}
|
||||
})(commonjsGlobal, function (exports) {
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
|
||||
function _classCallCheck(instance, Constructor) {
|
||||
if (!(instance instanceof Constructor)) {
|
||||
throw new TypeError("Cannot call a class as a function");
|
||||
}
|
||||
}
|
||||
|
||||
var _createClass = function () {
|
||||
function defineProperties(target, props) {
|
||||
for (var i = 0; i < props.length; i++) {
|
||||
var descriptor = props[i];
|
||||
descriptor.enumerable = descriptor.enumerable || false;
|
||||
descriptor.configurable = true;
|
||||
if ("value" in descriptor) descriptor.writable = true;
|
||||
Object.defineProperty(target, descriptor.key, descriptor);
|
||||
}
|
||||
}
|
||||
|
||||
return function (Constructor, protoProps, staticProps) {
|
||||
if (protoProps) defineProperties(Constructor.prototype, protoProps);
|
||||
if (staticProps) defineProperties(Constructor, staticProps);
|
||||
return Constructor;
|
||||
};
|
||||
}();
|
||||
|
||||
/**
|
||||
* Sticky Sidebar JavaScript Plugin.
|
||||
* @version 3.3.4
|
||||
* @author Ahmed Bouhuolia <a.bouhuolia@gmail.com>
|
||||
* @license The MIT License (MIT)
|
||||
*/
|
||||
var StickySidebar = function () {
|
||||
|
||||
// ---------------------------------
|
||||
// # Define Constants
|
||||
// ---------------------------------
|
||||
//
|
||||
var EVENT_KEY = '.stickySidebar';
|
||||
var DEFAULTS = {
|
||||
/**
|
||||
* Additional top spacing of the element when it becomes sticky.
|
||||
* @type {Numeric|Function}
|
||||
*/
|
||||
topSpacing: 0,
|
||||
|
||||
/**
|
||||
* Additional bottom spacing of the element when it becomes sticky.
|
||||
* @type {Numeric|Function}
|
||||
*/
|
||||
bottomSpacing: 0,
|
||||
|
||||
/**
|
||||
* Container sidebar selector to know what the beginning and end of sticky element.
|
||||
* @type {String|False}
|
||||
*/
|
||||
containerSelector: false,
|
||||
|
||||
/**
|
||||
* Inner wrapper selector.
|
||||
* @type {String}
|
||||
*/
|
||||
innerWrapperSelector: '.inner-wrapper-sticky',
|
||||
|
||||
/**
|
||||
* The name of CSS class to apply to elements when they have become stuck.
|
||||
* @type {String|False}
|
||||
*/
|
||||
stickyClass: 'is-affixed',
|
||||
|
||||
/**
|
||||
* Detect when sidebar and its container change height so re-calculate their dimensions.
|
||||
* @type {Boolean}
|
||||
*/
|
||||
resizeSensor: true,
|
||||
|
||||
/**
|
||||
* The sidebar returns to its normal position if its width below this value.
|
||||
* @type {Numeric}
|
||||
*/
|
||||
minWidth: false
|
||||
};
|
||||
|
||||
// ---------------------------------
|
||||
// # Class Definition
|
||||
// ---------------------------------
|
||||
//
|
||||
/**
|
||||
* Sticky Sidebar Class.
|
||||
* @public
|
||||
*/
|
||||
|
||||
var StickySidebar = function () {
|
||||
|
||||
/**
|
||||
* Sticky Sidebar Constructor.
|
||||
* @constructor
|
||||
* @param {HTMLElement|String} sidebar - The sidebar element or sidebar selector.
|
||||
* @param {Object} options - The options of sticky sidebar.
|
||||
*/
|
||||
function StickySidebar(sidebar) {
|
||||
var _this = this;
|
||||
|
||||
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
||||
|
||||
_classCallCheck(this, StickySidebar);
|
||||
|
||||
this.options = StickySidebar.extend(DEFAULTS, options);
|
||||
|
||||
// Sidebar element query if there's no one, throw error.
|
||||
this.sidebar = 'string' === typeof sidebar ? document.querySelector(sidebar) : sidebar;
|
||||
if ('undefined' === typeof this.sidebar) throw new Error("There is no specific sidebar element.");
|
||||
|
||||
this.sidebarInner = false;
|
||||
this.container = this.sidebar.parentElement;
|
||||
|
||||
// Current Affix Type of sidebar element.
|
||||
this.affixedType = 'STATIC';
|
||||
this.direction = 'down';
|
||||
this.support = {
|
||||
transform: false,
|
||||
transform3d: false
|
||||
};
|
||||
|
||||
this._initialized = false;
|
||||
this._reStyle = false;
|
||||
this._breakpoint = false;
|
||||
|
||||
// Dimensions of sidebar, container and screen viewport.
|
||||
this.dimensions = {
|
||||
translateY: 0,
|
||||
maxTranslateY: 0,
|
||||
topSpacing: 0,
|
||||
lastTopSpacing: 0,
|
||||
bottomSpacing: 0,
|
||||
lastBottomSpacing: 0,
|
||||
sidebarHeight: 0,
|
||||
sidebarWidth: 0,
|
||||
containerTop: 0,
|
||||
containerHeight: 0,
|
||||
viewportHeight: 0,
|
||||
viewportTop: 0,
|
||||
lastViewportTop: 0
|
||||
};
|
||||
|
||||
// Bind event handlers for referencability.
|
||||
['handleEvent'].forEach(function (method) {
|
||||
_this[method] = _this[method].bind(_this);
|
||||
});
|
||||
|
||||
// Initialize sticky sidebar for first time.
|
||||
this.initialize();
|
||||
}
|
||||
|
||||
/**
|
||||
* Initializes the sticky sidebar by adding inner wrapper, define its container,
|
||||
* min-width breakpoint, calculating dimensions, adding helper classes and inline style.
|
||||
* @private
|
||||
*/
|
||||
|
||||
|
||||
_createClass(StickySidebar, [{
|
||||
key: 'initialize',
|
||||
value: function initialize() {
|
||||
var _this2 = this;
|
||||
|
||||
this._setSupportFeatures();
|
||||
|
||||
// Get sticky sidebar inner wrapper, if not found, will create one.
|
||||
if (this.options.innerWrapperSelector) {
|
||||
this.sidebarInner = this.sidebar.querySelector(this.options.innerWrapperSelector);
|
||||
|
||||
if (null === this.sidebarInner) this.sidebarInner = false;
|
||||
}
|
||||
|
||||
if (!this.sidebarInner) {
|
||||
var wrapper = document.createElement('div');
|
||||
wrapper.setAttribute('class', 'inner-wrapper-sticky');
|
||||
this.sidebar.appendChild(wrapper);
|
||||
|
||||
while (this.sidebar.firstChild != wrapper) {
|
||||
wrapper.appendChild(this.sidebar.firstChild);
|
||||
}this.sidebarInner = this.sidebar.querySelector('.inner-wrapper-sticky');
|
||||
}
|
||||
|
||||
// Container wrapper of the sidebar.
|
||||
if (this.options.containerSelector) {
|
||||
var containers = document.querySelectorAll(this.options.containerSelector);
|
||||
containers = Array.prototype.slice.call(containers);
|
||||
|
||||
containers.forEach(function (container, item) {
|
||||
if (!container.contains(_this2.sidebar)) return;
|
||||
_this2.container = container;
|
||||
});
|
||||
|
||||
if (!containers.length) throw new Error("The container does not contains on the sidebar.");
|
||||
}
|
||||
|
||||
// If top/bottom spacing is not function parse value to integer.
|
||||
if ('function' !== typeof this.options.topSpacing) this.options.topSpacing = parseInt(this.options.topSpacing) || 0;
|
||||
|
||||
if ('function' !== typeof this.options.bottomSpacing) this.options.bottomSpacing = parseInt(this.options.bottomSpacing) || 0;
|
||||
|
||||
// Breakdown sticky sidebar if screen width below `options.minWidth`.
|
||||
this._widthBreakpoint();
|
||||
|
||||
// Calculate dimensions of sidebar, container and viewport.
|
||||
this.calcDimensions();
|
||||
|
||||
// Affix sidebar in proper position.
|
||||
this.stickyPosition();
|
||||
|
||||
// Bind all events.
|
||||
this.bindEvents();
|
||||
|
||||
// Inform other properties the sticky sidebar is initialized.
|
||||
this._initialized = true;
|
||||
}
|
||||
}, {
|
||||
key: 'bindEvents',
|
||||
value: function bindEvents() {
|
||||
window.addEventListener('resize', this, { passive: true, capture: false });
|
||||
window.addEventListener('scroll', this, { passive: true, capture: false });
|
||||
|
||||
this.sidebar.addEventListener('update' + EVENT_KEY, this);
|
||||
|
||||
if (this.options.resizeSensor && 'undefined' !== typeof ResizeSensor) {
|
||||
new ResizeSensor(this.sidebarInner, this.handleEvent);
|
||||
new ResizeSensor(this.container, this.handleEvent);
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'handleEvent',
|
||||
value: function handleEvent(event) {
|
||||
this.updateSticky(event);
|
||||
}
|
||||
}, {
|
||||
key: 'calcDimensions',
|
||||
value: function calcDimensions() {
|
||||
if (this._breakpoint) return;
|
||||
var dims = this.dimensions;
|
||||
|
||||
// Container of sticky sidebar dimensions.
|
||||
dims.containerTop = StickySidebar.offsetRelative(this.container).top;
|
||||
dims.containerHeight = this.container.clientHeight;
|
||||
dims.containerBottom = dims.containerTop + dims.containerHeight;
|
||||
|
||||
// Sidebar dimensions.
|
||||
dims.sidebarHeight = this.sidebarInner.offsetHeight;
|
||||
dims.sidebarWidth = this.sidebarInner.offsetWidth;
|
||||
|
||||
// Screen viewport dimensions.
|
||||
dims.viewportHeight = window.innerHeight;
|
||||
|
||||
// Maximum sidebar translate Y.
|
||||
dims.maxTranslateY = dims.containerHeight - dims.sidebarHeight;
|
||||
|
||||
this._calcDimensionsWithScroll();
|
||||
}
|
||||
}, {
|
||||
key: '_calcDimensionsWithScroll',
|
||||
value: function _calcDimensionsWithScroll() {
|
||||
var dims = this.dimensions;
|
||||
|
||||
dims.sidebarLeft = StickySidebar.offsetRelative(this.sidebar).left;
|
||||
|
||||
dims.viewportTop = document.documentElement.scrollTop || document.body.scrollTop;
|
||||
dims.viewportBottom = dims.viewportTop + dims.viewportHeight;
|
||||
dims.viewportLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
|
||||
|
||||
dims.topSpacing = this.options.topSpacing;
|
||||
dims.bottomSpacing = this.options.bottomSpacing;
|
||||
|
||||
if ('function' === typeof dims.topSpacing) dims.topSpacing = parseInt(dims.topSpacing(this.sidebar)) || 0;
|
||||
|
||||
if ('function' === typeof dims.bottomSpacing) dims.bottomSpacing = parseInt(dims.bottomSpacing(this.sidebar)) || 0;
|
||||
|
||||
if ('VIEWPORT-TOP' === this.affixedType) {
|
||||
// Adjust translate Y in the case decrease top spacing value.
|
||||
if (dims.topSpacing < dims.lastTopSpacing) {
|
||||
dims.translateY += dims.lastTopSpacing - dims.topSpacing;
|
||||
this._reStyle = true;
|
||||
}
|
||||
} else if ('VIEWPORT-BOTTOM' === this.affixedType) {
|
||||
// Adjust translate Y in the case decrease bottom spacing value.
|
||||
if (dims.bottomSpacing < dims.lastBottomSpacing) {
|
||||
dims.translateY += dims.lastBottomSpacing - dims.bottomSpacing;
|
||||
this._reStyle = true;
|
||||
}
|
||||
}
|
||||
|
||||
dims.lastTopSpacing = dims.topSpacing;
|
||||
dims.lastBottomSpacing = dims.bottomSpacing;
|
||||
}
|
||||
}, {
|
||||
key: 'isSidebarFitsViewport',
|
||||
value: function isSidebarFitsViewport() {
|
||||
var dims = this.dimensions;
|
||||
var offset = this.scrollDirection === 'down' ? dims.lastBottomSpacing : dims.lastTopSpacing;
|
||||
return this.dimensions.sidebarHeight + offset < this.dimensions.viewportHeight;
|
||||
}
|
||||
}, {
|
||||
key: 'observeScrollDir',
|
||||
value: function observeScrollDir() {
|
||||
var dims = this.dimensions;
|
||||
if (dims.lastViewportTop === dims.viewportTop) return;
|
||||
|
||||
var furthest = 'down' === this.direction ? Math.min : Math.max;
|
||||
|
||||
// If the browser is scrolling not in the same direction.
|
||||
if (dims.viewportTop === furthest(dims.viewportTop, dims.lastViewportTop)) this.direction = 'down' === this.direction ? 'up' : 'down';
|
||||
}
|
||||
}, {
|
||||
key: 'getAffixType',
|
||||
value: function getAffixType() {
|
||||
this._calcDimensionsWithScroll();
|
||||
var dims = this.dimensions;
|
||||
var colliderTop = dims.viewportTop + dims.topSpacing;
|
||||
var affixType = this.affixedType;
|
||||
|
||||
if (colliderTop <= dims.containerTop || dims.containerHeight <= dims.sidebarHeight) {
|
||||
dims.translateY = 0;
|
||||
affixType = 'STATIC';
|
||||
} else {
|
||||
affixType = 'up' === this.direction ? this._getAffixTypeScrollingUp() : this._getAffixTypeScrollingDown();
|
||||
}
|
||||
|
||||
// Make sure the translate Y is not bigger than container height.
|
||||
dims.translateY = Math.max(0, dims.translateY);
|
||||
dims.translateY = Math.min(dims.containerHeight, dims.translateY);
|
||||
dims.translateY = Math.round(dims.translateY);
|
||||
|
||||
dims.lastViewportTop = dims.viewportTop;
|
||||
return affixType;
|
||||
}
|
||||
}, {
|
||||
key: '_getAffixTypeScrollingDown',
|
||||
value: function _getAffixTypeScrollingDown() {
|
||||
var dims = this.dimensions;
|
||||
var sidebarBottom = dims.sidebarHeight + dims.containerTop;
|
||||
var colliderTop = dims.viewportTop + dims.topSpacing;
|
||||
var colliderBottom = dims.viewportBottom - dims.bottomSpacing;
|
||||
var affixType = this.affixedType;
|
||||
|
||||
if (this.isSidebarFitsViewport()) {
|
||||
if (dims.sidebarHeight + colliderTop >= dims.containerBottom) {
|
||||
dims.translateY = dims.containerBottom - sidebarBottom;
|
||||
affixType = 'CONTAINER-BOTTOM';
|
||||
} else if (colliderTop >= dims.containerTop) {
|
||||
dims.translateY = colliderTop - dims.containerTop;
|
||||
affixType = 'VIEWPORT-TOP';
|
||||
}
|
||||
} else {
|
||||
if (dims.containerBottom <= colliderBottom) {
|
||||
dims.translateY = dims.containerBottom - sidebarBottom;
|
||||
affixType = 'CONTAINER-BOTTOM';
|
||||
} else if (sidebarBottom + dims.translateY <= colliderBottom) {
|
||||
dims.translateY = colliderBottom - sidebarBottom;
|
||||
affixType = 'VIEWPORT-BOTTOM';
|
||||
} else if (dims.containerTop + dims.translateY <= colliderTop && 0 !== dims.translateY && dims.maxTranslateY !== dims.translateY) {
|
||||
affixType = 'VIEWPORT-UNBOTTOM';
|
||||
}
|
||||
}
|
||||
|
||||
return affixType;
|
||||
}
|
||||
}, {
|
||||
key: '_getAffixTypeScrollingUp',
|
||||
value: function _getAffixTypeScrollingUp() {
|
||||
var dims = this.dimensions;
|
||||
var sidebarBottom = dims.sidebarHeight + dims.containerTop;
|
||||
var colliderTop = dims.viewportTop + dims.topSpacing;
|
||||
var colliderBottom = dims.viewportBottom - dims.bottomSpacing;
|
||||
var affixType = this.affixedType;
|
||||
|
||||
if (colliderTop <= dims.translateY + dims.containerTop) {
|
||||
dims.translateY = colliderTop - dims.containerTop;
|
||||
affixType = 'VIEWPORT-TOP';
|
||||
} else if (dims.containerBottom <= colliderBottom) {
|
||||
dims.translateY = dims.containerBottom - sidebarBottom;
|
||||
affixType = 'CONTAINER-BOTTOM';
|
||||
} else if (!this.isSidebarFitsViewport()) {
|
||||
|
||||
if (dims.containerTop <= colliderTop && 0 !== dims.translateY && dims.maxTranslateY !== dims.translateY) {
|
||||
affixType = 'VIEWPORT-UNBOTTOM';
|
||||
}
|
||||
}
|
||||
|
||||
return affixType;
|
||||
}
|
||||
}, {
|
||||
key: '_getStyle',
|
||||
value: function _getStyle(affixType) {
|
||||
if ('undefined' === typeof affixType) return;
|
||||
|
||||
var style = { inner: {}, outer: {} };
|
||||
var dims = this.dimensions;
|
||||
|
||||
switch (affixType) {
|
||||
case 'VIEWPORT-TOP':
|
||||
style.inner = { position: 'fixed', top: dims.topSpacing,
|
||||
left: dims.sidebarLeft - dims.viewportLeft, width: dims.sidebarWidth };
|
||||
break;
|
||||
case 'VIEWPORT-BOTTOM':
|
||||
style.inner = { position: 'fixed', top: 'auto', left: dims.sidebarLeft,
|
||||
bottom: dims.bottomSpacing, width: dims.sidebarWidth };
|
||||
break;
|
||||
case 'CONTAINER-BOTTOM':
|
||||
case 'VIEWPORT-UNBOTTOM':
|
||||
var translate = this._getTranslate(0, dims.translateY + 'px');
|
||||
|
||||
if (translate) style.inner = { transform: translate };else style.inner = { position: 'absolute', top: dims.translateY, width: dims.sidebarWidth };
|
||||
break;
|
||||
}
|
||||
|
||||
switch (affixType) {
|
||||
case 'VIEWPORT-TOP':
|
||||
case 'VIEWPORT-BOTTOM':
|
||||
case 'VIEWPORT-UNBOTTOM':
|
||||
case 'CONTAINER-BOTTOM':
|
||||
style.outer = { height: dims.sidebarHeight, position: 'relative' };
|
||||
break;
|
||||
}
|
||||
|
||||
style.outer = StickySidebar.extend({ height: '', position: '' }, style.outer);
|
||||
style.inner = StickySidebar.extend({ position: 'relative', top: '', left: '',
|
||||
bottom: '', width: '', transform: '' }, style.inner);
|
||||
|
||||
return style;
|
||||
}
|
||||
}, {
|
||||
key: 'stickyPosition',
|
||||
value: function stickyPosition(force) {
|
||||
if (this._breakpoint) return;
|
||||
|
||||
force = this._reStyle || force || false;
|
||||
|
||||
var offsetTop = this.options.topSpacing;
|
||||
var offsetBottom = this.options.bottomSpacing;
|
||||
|
||||
var affixType = this.getAffixType();
|
||||
var style = this._getStyle(affixType);
|
||||
|
||||
if ((this.affixedType != affixType || force) && affixType) {
|
||||
var affixEvent = 'affix.' + affixType.toLowerCase().replace('viewport-', '') + EVENT_KEY;
|
||||
StickySidebar.eventTrigger(this.sidebar, affixEvent);
|
||||
|
||||
if ('STATIC' === affixType) StickySidebar.removeClass(this.sidebar, this.options.stickyClass);else StickySidebar.addClass(this.sidebar, this.options.stickyClass);
|
||||
|
||||
for (var key in style.outer) {
|
||||
var unit = 'number' === typeof style.outer[key] ? 'px' : '';
|
||||
this.sidebar.style[key] = style.outer[key] + unit;
|
||||
}
|
||||
|
||||
for (var _key in style.inner) {
|
||||
var _unit = 'number' === typeof style.inner[_key] ? 'px' : '';
|
||||
this.sidebarInner.style[_key] = style.inner[_key] + _unit;
|
||||
}
|
||||
|
||||
var affixedEvent = 'affixed.' + affixType.toLowerCase().replace('viewport-', '') + EVENT_KEY;
|
||||
StickySidebar.eventTrigger(this.sidebar, affixedEvent);
|
||||
} else {
|
||||
if (this._initialized) this.sidebarInner.style.left = style.inner.left;
|
||||
}
|
||||
|
||||
this.affixedType = affixType;
|
||||
}
|
||||
}, {
|
||||
key: '_widthBreakpoint',
|
||||
value: function _widthBreakpoint() {
|
||||
|
||||
if (window.innerWidth <= this.options.minWidth) {
|
||||
this._breakpoint = true;
|
||||
this.affixedType = 'STATIC';
|
||||
|
||||
this.sidebar.removeAttribute('style');
|
||||
StickySidebar.removeClass(this.sidebar, this.options.stickyClass);
|
||||
this.sidebarInner.removeAttribute('style');
|
||||
} else {
|
||||
this._breakpoint = false;
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'updateSticky',
|
||||
value: function updateSticky() {
|
||||
var _this3 = this;
|
||||
|
||||
var event = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
||||
|
||||
if (this._running) return;
|
||||
this._running = true;
|
||||
|
||||
(function (eventType) {
|
||||
requestAnimationFrame(function () {
|
||||
switch (eventType) {
|
||||
// When browser is scrolling and re-calculate just dimensions
|
||||
// within scroll.
|
||||
case 'scroll':
|
||||
_this3._calcDimensionsWithScroll();
|
||||
_this3.observeScrollDir();
|
||||
_this3.stickyPosition();
|
||||
break;
|
||||
|
||||
// When browser is resizing or there's no event, observe width
|
||||
// breakpoint and re-calculate dimensions.
|
||||
case 'resize':
|
||||
default:
|
||||
_this3._widthBreakpoint();
|
||||
_this3.calcDimensions();
|
||||
_this3.stickyPosition(true);
|
||||
break;
|
||||
}
|
||||
_this3._running = false;
|
||||
});
|
||||
})(event.type);
|
||||
}
|
||||
}, {
|
||||
key: '_setSupportFeatures',
|
||||
value: function _setSupportFeatures() {
|
||||
var support = this.support;
|
||||
|
||||
support.transform = StickySidebar.supportTransform();
|
||||
support.transform3d = StickySidebar.supportTransform(true);
|
||||
}
|
||||
}, {
|
||||
key: '_getTranslate',
|
||||
value: function _getTranslate() {
|
||||
var y = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
|
||||
var x = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
||||
var z = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
|
||||
|
||||
if (this.support.transform3d) return 'translate3d(' + y + ', ' + x + ', ' + z + ')';else if (this.support.translate) return 'translate(' + y + ', ' + x + ')';else return false;
|
||||
}
|
||||
}, {
|
||||
key: 'destroy',
|
||||
value: function destroy() {
|
||||
window.removeEventListener('resize', this, { capture: false });
|
||||
window.removeEventListener('scroll', this, { capture: false });
|
||||
|
||||
this.sidebar.classList.remove(this.options.stickyClass);
|
||||
this.sidebar.style.minHeight = '';
|
||||
|
||||
this.sidebar.removeEventListener('update' + EVENT_KEY, this);
|
||||
|
||||
var styleReset = { inner: {}, outer: {} };
|
||||
|
||||
styleReset.inner = { position: '', top: '', left: '', bottom: '', width: '', transform: '' };
|
||||
styleReset.outer = { height: '', position: '' };
|
||||
|
||||
for (var key in styleReset.outer) {
|
||||
this.sidebar.style[key] = styleReset.outer[key];
|
||||
}for (var _key2 in styleReset.inner) {
|
||||
this.sidebarInner.style[_key2] = styleReset.inner[_key2];
|
||||
}if (this.options.resizeSensor && 'undefined' !== typeof ResizeSensor) {
|
||||
ResizeSensor.detach(this.sidebarInner, this.handleEvent);
|
||||
ResizeSensor.detach(this.container, this.handleEvent);
|
||||
}
|
||||
}
|
||||
}], [{
|
||||
key: 'supportTransform',
|
||||
value: function supportTransform(transform3d) {
|
||||
var result = false,
|
||||
property = transform3d ? 'perspective' : 'transform',
|
||||
upper = property.charAt(0).toUpperCase() + property.slice(1),
|
||||
prefixes = ['Webkit', 'Moz', 'O', 'ms'],
|
||||
support = document.createElement('support'),
|
||||
style = support.style;
|
||||
|
||||
(property + ' ' + prefixes.join(upper + ' ') + upper).split(' ').forEach(function (property, i) {
|
||||
if (style[property] !== undefined) {
|
||||
result = property;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
return result;
|
||||
}
|
||||
}, {
|
||||
key: 'eventTrigger',
|
||||
value: function eventTrigger(element, eventName, data) {
|
||||
try {
|
||||
var event = new CustomEvent(eventName, { detail: data });
|
||||
} catch (e) {
|
||||
var event = document.createEvent('CustomEvent');
|
||||
event.initCustomEvent(eventName, true, true, data);
|
||||
}
|
||||
element.dispatchEvent(event);
|
||||
}
|
||||
}, {
|
||||
key: 'extend',
|
||||
value: function extend(defaults, options) {
|
||||
var results = {};
|
||||
for (var key in defaults) {
|
||||
if ('undefined' !== typeof options[key]) results[key] = options[key];else results[key] = defaults[key];
|
||||
}
|
||||
return results;
|
||||
}
|
||||
}, {
|
||||
key: 'offsetRelative',
|
||||
value: function offsetRelative(element) {
|
||||
var result = { left: 0, top: 0 };
|
||||
|
||||
do {
|
||||
var offsetTop = element.offsetTop;
|
||||
var offsetLeft = element.offsetLeft;
|
||||
|
||||
if (!isNaN(offsetTop)) result.top += offsetTop;
|
||||
|
||||
if (!isNaN(offsetLeft)) result.left += offsetLeft;
|
||||
|
||||
element = 'BODY' === element.tagName ? element.parentElement : element.offsetParent;
|
||||
} while (element);
|
||||
return result;
|
||||
}
|
||||
}, {
|
||||
key: 'addClass',
|
||||
value: function addClass(element, className) {
|
||||
if (!StickySidebar.hasClass(element, className)) {
|
||||
if (element.classList) element.classList.add(className);else element.className += ' ' + className;
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'removeClass',
|
||||
value: function removeClass(element, className) {
|
||||
if (StickySidebar.hasClass(element, className)) {
|
||||
if (element.classList) element.classList.remove(className);else element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'hasClass',
|
||||
value: function hasClass(element, className) {
|
||||
if (element.classList) return element.classList.contains(className);else return new RegExp('(^| )' + className + '( |$)', 'gi').test(element.className);
|
||||
}
|
||||
}, {
|
||||
key: 'defaults',
|
||||
get: function () {
|
||||
return DEFAULTS;
|
||||
}
|
||||
}]);
|
||||
|
||||
return StickySidebar;
|
||||
}();
|
||||
|
||||
return StickySidebar;
|
||||
}();
|
||||
|
||||
exports.default = StickySidebar;
|
||||
|
||||
|
||||
// Global
|
||||
// -------------------------
|
||||
window.StickySidebar = StickySidebar;
|
||||
});
|
||||
});
|
||||
|
||||
unwrapExports(stickySidebar);
|
||||
|
||||
var jquery_stickySidebar = createCommonjsModule(function (module, exports) {
|
||||
(function (global, factory) {
|
||||
if (typeof undefined === "function" && undefined.amd) {
|
||||
undefined(['./sticky-sidebar'], factory);
|
||||
} else {
|
||||
factory(stickySidebar);
|
||||
}
|
||||
})(commonjsGlobal, function (_stickySidebar) {
|
||||
var _stickySidebar2 = _interopRequireDefault(_stickySidebar);
|
||||
|
||||
function _interopRequireDefault(obj) {
|
||||
return obj && obj.__esModule ? obj : {
|
||||
default: obj
|
||||
};
|
||||
}
|
||||
|
||||
(function () {
|
||||
if ('undefined' === typeof window) return;
|
||||
|
||||
var plugin = window.$ || window.jQuery || window.Zepto;
|
||||
var DATA_NAMESPACE = 'stickySidebar';
|
||||
|
||||
// Make sure the site has jquery or zepto plugin.
|
||||
if (plugin) {
|
||||
var _jQueryPlugin = function (config) {
|
||||
return this.each(function () {
|
||||
var $this = plugin(this),
|
||||
data = plugin(this).data(DATA_NAMESPACE);
|
||||
|
||||
if (!data) {
|
||||
data = new _stickySidebar2.default(this, typeof config == 'object' && config);
|
||||
$this.data(DATA_NAMESPACE, data);
|
||||
}
|
||||
|
||||
if ('string' === typeof config) {
|
||||
if (data[config] === undefined && ['destroy', 'updateSticky'].indexOf(config) === -1) throw new Error('No method named "' + config + '"');
|
||||
|
||||
data[config]();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
plugin.fn.stickySidebar = _jQueryPlugin;
|
||||
plugin.fn.stickySidebar.Constructor = _stickySidebar2.default;
|
||||
|
||||
var old = plugin.fn.stickySidebar;
|
||||
|
||||
/**
|
||||
* Sticky Sidebar No Conflict.
|
||||
*/
|
||||
plugin.fn.stickySidebar.noConflict = function () {
|
||||
plugin.fn.stickySidebar = old;
|
||||
return this;
|
||||
};
|
||||
}
|
||||
})();
|
||||
});
|
||||
});
|
||||
|
||||
var jquery_stickySidebar$1 = unwrapExports(jquery_stickySidebar);
|
||||
|
||||
return jquery_stickySidebar$1;
|
||||
|
||||
})));
|
||||
|
||||
//# sourceMappingURL=jquery.sticky-sidebar.js.map
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
$(function () {
|
||||
|
||||
'use strict';
|
||||
$(document).ready(function() {
|
||||
$('a[href*=#]').bind('click', function(e) {
|
||||
e.preventDefault(); // prevent hard jump, the default behavior
|
||||
|
||||
var target = $(this).attr("href"); // Set the target as variable
|
||||
|
||||
// perform animated scrolling by getting top-position of target-element and set it as scroll target
|
||||
$('html, body').stop().animate({
|
||||
scrollTop: $(target).offset().top
|
||||
}, 600, function() {
|
||||
location.hash = target; //attach the hash (#jumptarget) to the pageurl
|
||||
});
|
||||
|
||||
return false;
|
||||
});
|
||||
});
|
||||
|
||||
$(window).scroll(function() {
|
||||
var scrollDistance = $(window).scrollTop();
|
||||
|
||||
// Assign active class to nav links while scolling
|
||||
$('.page-section').each(function(i) {
|
||||
if ($(this).position().top <= scrollDistance) {
|
||||
$('.navigation a.active').removeClass('active');
|
||||
$('.navigation a').eq(i).addClass('active');
|
||||
}
|
||||
});
|
||||
}).scroll();
|
||||
$('#mainNav').stickySidebar({
|
||||
topSpacing: 30,
|
||||
bottomSpacing: 30
|
||||
});
|
||||
});
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,146 @@
|
|||
* {
|
||||
font-family: 'Lato', sans-serif;
|
||||
font-weight: 400;
|
||||
transition: all .1s ease;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 35px;
|
||||
font-weight:600;
|
||||
}
|
||||
h5{
|
||||
margin-top: 15px;
|
||||
}
|
||||
p{
|
||||
color: #888;
|
||||
}
|
||||
li{
|
||||
color: #888;
|
||||
}
|
||||
.page-title{
|
||||
padding: 70px 0;
|
||||
text-align: center;
|
||||
border: 1px solid #eee;
|
||||
/* box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1); */
|
||||
margin: 0 0 30px 0;
|
||||
background-image: url(../img/hero.png);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.page-title h1 {
|
||||
color: #fff;
|
||||
}
|
||||
ol ol, ul ul, ol ul, ul ol {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.page-section {
|
||||
margin-bottom: 5%;
|
||||
padding: 1em;
|
||||
background: #fff;
|
||||
color: #444;
|
||||
border: 1px solid #eee;
|
||||
/* box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1); */
|
||||
}
|
||||
.section-title{
|
||||
margin-bottom: 15px;
|
||||
padding-bottom: 10px;
|
||||
color: #5c3f6b;
|
||||
border-bottom: 1px solid #eee;
|
||||
font-size: 23px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.section-title span{
|
||||
color: #ff7b7b;
|
||||
font-weight: 600;
|
||||
font-size: 20px;
|
||||
}
|
||||
.intro ul{
|
||||
background: #f3f4fb;
|
||||
padding: 20px 30px;
|
||||
}
|
||||
.intro ul li{
|
||||
padding: 5px 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
.doc-img{
|
||||
margin: 20px 0;
|
||||
}
|
||||
.inst-img{
|
||||
margin-bottom: 20px;
|
||||
width: 100%;
|
||||
border: 1px solid #eee;
|
||||
/* box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1); */
|
||||
}
|
||||
.dark_bg{
|
||||
background-color: #f3f4fb;
|
||||
border-bottom: 1px solid #fff;
|
||||
}
|
||||
.dark_bg_red{
|
||||
background-color: #ffd1d1;
|
||||
border-bottom: 1px solid #fff;
|
||||
}
|
||||
h6 span{
|
||||
color: red;
|
||||
}
|
||||
.doc-img img{
|
||||
margin-bottom: 10px;
|
||||
width: 100%;
|
||||
border: 1px solid #eee;
|
||||
/* box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1); */
|
||||
}
|
||||
.thank{
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
.height-100{
|
||||
height: 100vh;
|
||||
}
|
||||
#thank p i{
|
||||
color: #ffd600;
|
||||
margin: 0 2px;
|
||||
}
|
||||
pre{
|
||||
margin: 15px 0;
|
||||
}
|
||||
.notes{
|
||||
margin: 10px 0;
|
||||
padding: 10px;
|
||||
background: #ffe9e9;
|
||||
border: 1px solid #f39797;
|
||||
border-radius: 0;
|
||||
}
|
||||
/* .navigation, #mainNav { */
|
||||
/* border: 1px solid #eee; */
|
||||
/* box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1); */
|
||||
/* } */
|
||||
.inner-wrapper-sticky {
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
.navigation__link {
|
||||
display: block;
|
||||
color: #444;
|
||||
text-decoration: none;
|
||||
padding: 12px 15px;
|
||||
font-weight: 400;
|
||||
border-bottom: 1px solid #eeeeee;
|
||||
}
|
||||
.navigation__link:hover {
|
||||
background-color: #bbb;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
.navigation__link.active {
|
||||
color: white;
|
||||
background-color: #2f3290;
|
||||
}
|
||||
#resource ul li{
|
||||
margin: 5px 0;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 90 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 419 B |
Binary file not shown.
|
After Width: | Height: | Size: 353 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 288 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 288 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 197 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 119 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
|
|
@ -0,0 +1,946 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Ekka - Ecommerce HTML Template.</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Ekka - Ecommerce HTML Template.">
|
||||
<meta name="keywords"
|
||||
content="apparel, catalog, clean, ecommerce, ecommerce HTML, electronics, fashion, html eCommerce, html store, minimal, multipurpose, multipurpose ecommerce, online store, responsive ecommerce template, shops">
|
||||
<meta name="author" content="">
|
||||
|
||||
<link rel="shortcut icon" href="img/favicon.png">
|
||||
<link href='https://fonts.googleapis.com/css?family=Lato:100,400,700' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
|
||||
|
||||
<!-- Bootstrap stylesheet -->
|
||||
<link rel="stylesheet" href="css/bootstrap.css">
|
||||
<!-- Site Main stylesheet -->
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="page-title">
|
||||
<h1>oBanana B2B - Elevate Your Business</h1>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-3">
|
||||
<nav class="navigation" id="mainNav">
|
||||
<a class="navigation__link" href="#intro">Introduction</a>
|
||||
<a class="navigation__link" href="#started">Getting Started</a>
|
||||
<a class="navigation__link dark_bg" href="#localinstall">Local Server Installation</a>
|
||||
<a class="navigation__link dark_bg" href="#serverinstall">Live Server Installation</a>
|
||||
<a class="navigation__link dark_bg" href="#cust-c">Colors Customization</a>
|
||||
<a class="navigation__link dark_bg" href="#cust-b">Background Customization</a>
|
||||
<a class="navigation__link dark_bg" href="#cust-d">Darkmode Customization</a>
|
||||
<a class="navigation__link dark_bg" href="#cust-rtl">RTL Customization</a>
|
||||
<a class="navigation__link dark_bg" href="#cust-w">Whatsapp plugin</a>
|
||||
<a class="navigation__link dark_bg" href="#cust-el">Elements</a>
|
||||
<a class="navigation__link dark_bg" href="#customization">Customization & Source Files</a>
|
||||
<a class="navigation__link dark_bg" href="#d-customization">Demo Home Page Customize</a>
|
||||
<a class="navigation__link dark_bg_red" href="#r-msg">Remove Popup</a>
|
||||
<a class="navigation__link dark_bg_red" href="#c-hf">Custom Header & Footer</a>
|
||||
<a class="navigation__link" href="#resource">Free Resources</a>
|
||||
<a class="navigation__link" href="#thank">Thank You</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="col-9">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<section class="col-12 page-section" id="intro">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div>
|
||||
<h2 class="section-title">Introduction</h2>
|
||||
<div class="intro">
|
||||
<ul>
|
||||
<li><strong>Item Name : </strong>oBanana B2B - Elevate Your Business</li>
|
||||
<li><strong>Item Version : </strong>3.6</li>
|
||||
<li><strong>Author : ashishmaraviya</strong></li>
|
||||
<li><strong>Copyright : </strong> 2023</li>
|
||||
</ul>
|
||||
</div>
|
||||
<p>First of all, thank you so much for purchasing this <b>ekka</b> Template and for being my loyal customer. You are awesome! You are entitled to get free lifetime updates to this product + exceptional support from the author directly.</p>
|
||||
<p>This documentation is to help you regarding each step of customization. Please go through the documentation carefully to understand how this template is made and how to edit this properly. Basic <b>HTML, CSS | SCSS & JS</b> knowledge is required to customize this item. You may learn basics <a href="https://www.w3schools.com/" target="_blank"><b> here </b></a> and <a href="https://getbootstrap.com/" target="_blank"><b> here </b></a>.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="col-12 page-section" id="started">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div>
|
||||
<h2 class="section-title">Getting Started</h2>
|
||||
<h4>Requirements</h4>
|
||||
<p>You will need the following sofwares to customize this template.</p>
|
||||
<ol>
|
||||
<li>Code Editing Software (eg: Visual studio code, Dreamweaver, Sublime Text or Notepad++)</li>
|
||||
<li>For SCSS build up (eg: koala, prepos, codekit etc...)</li>
|
||||
<li>Web Browser for testing (eg: Google Chrome or Mozilla Firefox)</li>
|
||||
</ol>
|
||||
<div class="notes">Note : Be careful while editing the item. If not edited properly, the design layout may break completely. </div>
|
||||
<h4>Include Files</h4>
|
||||
<ul>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>SCSS</li>
|
||||
<li>JS</li>
|
||||
<li>IMAGES(Demo images only)</li>
|
||||
<li>ICON(svg)</li>
|
||||
<li>FONT</li>
|
||||
</ul>
|
||||
<h4>Files Structure :</h4>
|
||||
<ul>
|
||||
<li>css</li>
|
||||
<ul>
|
||||
<li>Backgrounds - ( Background stylesheets )</li>
|
||||
<li>Plugins - ( Plugin stylesheets )</li>
|
||||
<li>Vendor - ( Vendor stylesheets )</li>
|
||||
</ul>
|
||||
<li>fonts</li>
|
||||
<ul>
|
||||
<li>ecicons - ( All svg icons )</li>
|
||||
<li>fjalla - ( fjalla fonts )</li>
|
||||
<li>montserrat - ( montserrat fonts )</li>
|
||||
<li>poppins - ( poppins fonts )</li>
|
||||
<li>oswald - ( oswald fonts )</li>
|
||||
</ul>
|
||||
<li>images</li>
|
||||
<ul>
|
||||
<li>banner</li>
|
||||
<li>bg</li>
|
||||
<li>blog-image</li>
|
||||
<li>brand-image</li>
|
||||
<li>cat-banner</li>
|
||||
<li>category-image</li>
|
||||
<li>common</li>
|
||||
<li>email-template</li>
|
||||
<li>favicon</li>
|
||||
<li>icons</li>
|
||||
<li>instragram-image</li>
|
||||
<li>logo</li>
|
||||
<li>main-slider-banner</li>
|
||||
<li>menu-banner</li>
|
||||
<li>offer-image</li>
|
||||
<li>product-360</li>
|
||||
<li>product-image</li>
|
||||
<li>review-image</li>
|
||||
<li>testimonial</li>
|
||||
<li>user</li>
|
||||
<li>vendor</li>
|
||||
<li>whatsapp</li>
|
||||
</ul>
|
||||
<li>js</li>
|
||||
<ul>
|
||||
<li>plugins - ( Plugins js files )</li>
|
||||
<li>vendor - ( Vendors js files )</li>
|
||||
</ul>
|
||||
<li>scss</li>
|
||||
<ul>
|
||||
<li>base - ( typography, font familys )</li>
|
||||
<li>bootstrap - ( Bootstrap folder )</li>
|
||||
<li>components - ( Component stylesheets )</li>
|
||||
<li>layout - ( Layout stylesheets )</li>
|
||||
<li>pages - ( Sub Pages stylesheets )</li>
|
||||
<li>utilities - ( Mixins & variable stylesheets )</li>
|
||||
</ul>
|
||||
<li>video</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="col-12 page-section" id="localinstall">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h2 class="section-title">Local Server Installation</h2>
|
||||
<div class="sub-sec-1">
|
||||
|
||||
<p>➣ There are the Four things to setup & run the theme.</p>
|
||||
|
||||
<h6>1. Install & Start Xampp Server <a class="click-a" href="#step1">Click</a></h6>
|
||||
<h6>2. How to Setup Theme Code Folder <a class="click-a" href="#step2">Click</a></h6>
|
||||
<h6>3. Database Configuration <a class="click-a" href="#step3"> Click</a><span> (this theme have not use any database, because it's html template)</span></h6>
|
||||
<h6>4. Run the theme into browser <a class="click-a" href="#step4">Click</a></h6>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
<div class="sub-sec-1">
|
||||
|
||||
<h5 id="step1" class="step-heading"><b>Step-1 : </b> ➣ Install & Start Xampp Server</h5>
|
||||
|
||||
<div class="sub-sec-2">
|
||||
<p>➣ Download the letest version of <span class="f-red"><b>Xampp</b></span> & Install Xampp Server <a class="click-a" href="https://www.wikihow.com/Install-XAMPP-for-Windows" target="_blank">Click</a></p>
|
||||
<p>➣ Click on <span class="f-red"><b>Start</b></span> button to start Apache & MySql into Xampp Server</p>
|
||||
<img class="inst-img" onclick="zoomImage('img/xampp-start-01.png')" src="img/xampp-start-01.png" alt=""/>
|
||||
<p>➣ Now blow image show the running Xampp Server</p>
|
||||
<img class="inst-img" onclick="zoomImage('img/xampp-start-02.png')" src="img/xampp-start-02.png" alt=""/>
|
||||
|
||||
<p class="notes">Now Xammp Instalation process end up here and move to the next step below..</p>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Setup theme Code Folder -->
|
||||
<div class="sub-sec-1">
|
||||
|
||||
<h5 id="step2" class="step-heading"><b>Step-2 : </b> ➣ How to Setup Theme Code Folder</h5>
|
||||
|
||||
<div class="sub-sec-2">
|
||||
|
||||
<p>➣ Open unzip folder <span class="f-red"><b> ekka - Ecommerce HTML Template</b></span> and copy <span class="f-red"><b>ekka-html</b></span> folder as show below image</p>
|
||||
<img class="inst-img" src="img/path-image-1.png" alt=""/>
|
||||
|
||||
<p>➣ Now open <span class="f-red"><b>Xampp</b></span> folder</p>
|
||||
<img class="inst-img" src="img/li-php-file-01.png" alt=""/>
|
||||
|
||||
|
||||
<p>➣ After that open <span class="f-red"><b>htdocs</b></span> folder</p>
|
||||
<img class="inst-img" src="img/li-php-file-02.png" alt=""/>
|
||||
|
||||
<p>➣ Now paste already copied<span class="f-red"><b> ekka-html</b></span> folder into <span class="f-red"><b>htdocs</b></span></p>
|
||||
<img class="inst-img" src="img/path-image-2.png" alt=""/>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="sub-sec-1">
|
||||
<h5 id="step3" class="step-heading"><b>Step-3 : </b> ➣ Database Configuration</h5>
|
||||
|
||||
<p class="notes">This theme have not use any database, because it's html template and not needed any type of database configuration. theme directly run in localhost or server.</p>
|
||||
</div>
|
||||
|
||||
<div class="sub-sec-1">
|
||||
<h5 id="step4" class="step-heading"><b>Step-4 : </b> ➣ Run the theme into browser</h5>
|
||||
<p>➣ Open <span class="f-red"><b> Browser</b></span> and run the Landing page to type located theme path : <span class="f-red"><b>localhost/ekka-html/</b></span> as show below image</p>
|
||||
<img class="inst-img" src="img/landing-shot.png" alt=""/>
|
||||
|
||||
|
||||
<p>➣ Now you can take a look on any of the layout by choosing on top of the site<b> menu</b>.</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="col-12 page-section" id="serverinstall">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h2 class="section-title">Live Server Installation</h2>
|
||||
<div class="sub-sec-1">
|
||||
<p>➣ There are the Four things to setup & run the theme.</p>
|
||||
|
||||
<h6>1. Hosting Account <a class="click-a" href="#li-step1">Click</a></h6>
|
||||
<h6>2. How to Setup Theme Code Folder <a class="click-a" href="#li-step2">Click</a></h6>
|
||||
<h6>3. Database Configuration <a class="click-a" href="#li-step3"> Click</a><span> (this theme have not use any database, because it's html template)</span></h6>
|
||||
<h6>4. Run the theme into browser <a class="click-a" href="#li-step4">Click</a></h6>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Hosting Account -->
|
||||
<div class="sub-sec-1">
|
||||
|
||||
<h5 id="li-step1" class="step-heading"><b>Step-1 : </b> ➣ Hosting Account</h5>
|
||||
|
||||
<div class="sub-sec-2">
|
||||
<p>➣ You must have <span class="f-red"><b>Hosting</b></span> account. And if you don't have please purchase it before move ahed. <a class="click-a" href="https://www.hostinger.in/web-hosting" target="_blank">Click</a></p>
|
||||
|
||||
<p class="notes">Note: I am just giving the example of Hosting account you can purchase any of hosting account that support PHP.</p>
|
||||
|
||||
<p>➣ Get Login into your hostinger account and open dashboard.</p>
|
||||
|
||||
<img class="inst-img" src="img/si-hosting-01.png" alt=""/>
|
||||
|
||||
<p class="notes">Now Hosting account end up here and move to the next step below..</p>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- Setup theme Code Folder -->
|
||||
<div class="sub-sec-1">
|
||||
|
||||
<h5 id="li-step2" class="step-heading"><b>Step-2 : </b> ➣ How to Setup Theme Code Folder</h5>
|
||||
|
||||
<div class="sub-sec-2">
|
||||
|
||||
<p>➣ From Dashboard Click on <span class="f-red"><b>File Manager</b></span> as show below image</p>
|
||||
<img class="inst-img" src="img/si-php-file-00.png" alt=""/>
|
||||
|
||||
<p>➣ Now upload <span class="f-red"><b>ekka-html.zip</b></span> folder into server</p>
|
||||
<img class="inst-img" src="img/si-php-file-01.png" alt=""/>
|
||||
|
||||
<p>➣ After upload unzip this folder as shown below image</p>
|
||||
<img class="inst-img" src="img/si-php-file-02.png" alt=""/>
|
||||
|
||||
<p class="notes">Now the Theme Code setup is finished here move to the next step below..</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="sub-sec-1">
|
||||
<h5 id="li-step3" class="step-heading"><b>Step-3 : </b> ➣ Database Configuration</h5>
|
||||
|
||||
<p class="notes">This theme have not use any database, because it's html template and not needed any type of database configuration. theme directly run in localhost or server.</p>
|
||||
</div>
|
||||
<!-- Run theme into Browser -->
|
||||
<div class="sub-sec-1">
|
||||
|
||||
<h5 id="li-step4" class="step-heading"><b>Step-4 : </b> ➣ Run the theme into browser</h5>
|
||||
|
||||
<div class="sub-sec-2">
|
||||
|
||||
<p>➣ Open <span class="f-red"><b> Browser</b></span> and run the "Landing page" to type located theme path : <span class="f-red"><b>yourdomain.com/ekka-html/</b></span> as show below image</p>
|
||||
<img class="inst-img" src="img/landing-shot-li.png" alt=""/>
|
||||
|
||||
|
||||
<p>➣ Now you can take a look on any of the layout by choosing on top of the site<b> menu</b>.</p>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="col-12 page-section" id="cust-c">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h2 class="section-title">Colors Customization</h2>
|
||||
<p>If you want to apply skin color 4 (skin-04.css) then, you can add path like bellow image on every html files in head tag. </p>
|
||||
<img class="inst-img" src="img/skin.png" alt="skin">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="col-12 page-section" id="cust-b">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h2 class="section-title">Background Customization</h2>
|
||||
<p>If you want to apply Background 2 (bg-2.css) then, you can replace path like bellow image on every html files in head tag. </p>
|
||||
<img class="inst-img" src="img/bg.png" alt="skin">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="col-12 page-section" id="cust-d">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h2 class="section-title">Dark mode Customization</h2>
|
||||
<p>If you want to apply Dark mode (dark.css) then, you can add path like bellow image on every html files in head tag. </p>
|
||||
<div style="margin-bottom:30px; background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #333333"><</span>link rel<span style="color: #333333">=</span><span style="background-color: #fff0f0">"stylesheet"</span> href<span style="color: #333333">=</span><span style="background-color: #fff0f0">"assets/css/dark.css"</span><span style="color: #333333"><span> class</span><span style="color: #333333">=</span><span style="background-color: #fff0f0">"dark"</span>></span>
|
||||
</pre></div>
|
||||
|
||||
<img class="inst-img" src="img/dark.png" alt="skin">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="col-12 page-section" id="cust-rtl">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h2 class="section-title">RTL mode Customization</h2>
|
||||
<p>If you want to apply RTL mode (rtl.css) then, you can add path like bellow image on every html files in head tag. </p>
|
||||
<div style="margin-bottom:30px; background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #333333"><</span>link rel<span style="color: #333333">=</span><span style="background-color: #fff0f0">"stylesheet"</span> href<span style="color: #333333">=</span><span style="background-color: #fff0f0">"assets/css/rtl.css"</span><span style="color: #333333"><span> class</span><span style="color: #333333">=</span><span style="background-color: #fff0f0">"rtl"</span>></span>
|
||||
</pre></div>
|
||||
|
||||
<img class="inst-img" src="img/rtl.png" alt="skin">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="col-12 page-section" id="cust-w">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h2 class="section-title">Whatsapp plugin Customization (Add custom number)</h2>
|
||||
<p>Customers can directly contact with you via whatsapp. You can replace whatsapp number and messages like bellow image.</p>
|
||||
<img class="inst-img" src="img/whatsapp.png" alt="skin">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="col-12 page-section" id="cust-el">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h2 class="section-title">Elements Customization (Add custom element)</h2>
|
||||
<h5>Elemets Products ( elemets-products.html )</h5>
|
||||
<p>If you want use other product card design then copy code which you want design and paste it.</p>
|
||||
<!-- HTML generated using hilite.me --><div style="margin-bottom:20px; background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #333333"><</span><span style="color: #FF0000; background-color: #FFAAAA">!</span><span style="color: #333333">--</span> START single card <span style="color: #333333">--></span>
|
||||
<span style="color: #333333"><</span>div class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ec-product-ds"</span><span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>div class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ec-product-image"</span><span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>a href<span style="color: #333333">=</span><span style="background-color: #fff0f0">"#"</span> class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"image"</span><span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>img class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"pic-1"</span> src<span style="color: #333333">=</span><span style="background-color: #fff0f0">"assets/images/product-image/pro_1/1_1.jpg"</span> alt<span style="color: #333333">=</span><span style="background-color: #fff0f0">""</span> <span style="color: #333333">/></span>
|
||||
<span style="color: #333333"></</span>a<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>span class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ec-product-discount-label"</span><span style="color: #333333">>-</span><span style="color: #0000DD; font-weight: bold">33</span><span style="color: #333333">%</</span>span<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>ul class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"links"</span><span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>li<span style="color: #333333">><</span>a href<span style="color: #333333">=</span><span style="background-color: #fff0f0">"#"</span> data<span style="color: #333333">-</span>tip<span style="color: #333333">=</span><span style="background-color: #fff0f0">"Add to Wishlist"</span><span style="color: #333333">><</span>img src<span style="color: #333333">=</span><span style="background-color: #fff0f0">"assets/images/icons/wishlist.svg"</span>
|
||||
class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"svg_img header_svg pro_svg"</span> alt<span style="color: #333333">=</span><span style="background-color: #fff0f0">"wishlist"</span> <span style="color: #333333">/></</span>a<span style="color: #333333">></</span>li<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>li<span style="color: #333333">><</span>a href<span style="color: #333333">=</span><span style="background-color: #fff0f0">"#"</span> data<span style="color: #333333">-</span>tip<span style="color: #333333">=</span><span style="background-color: #fff0f0">"Compare"</span><span style="color: #333333">><</span>img src<span style="color: #333333">=</span><span style="background-color: #fff0f0">"assets/images/icons/compare.svg"</span>
|
||||
class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"svg_img pro_svg"</span> alt<span style="color: #333333">=</span><span style="background-color: #fff0f0">"compare"</span> <span style="color: #333333">/></</span>a<span style="color: #333333">></</span>li<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>li<span style="color: #333333">><</span>a href<span style="color: #333333">=</span><span style="background-color: #fff0f0">"#"</span> data<span style="color: #333333">-</span>tip<span style="color: #333333">=</span><span style="background-color: #fff0f0">"Quick View"</span><span style="color: #333333">><</span>img src<span style="color: #333333">=</span><span style="background-color: #fff0f0">"assets/images/icons/quickview.svg"</span>
|
||||
class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"svg_img pro_svg"</span> alt<span style="color: #333333">=</span><span style="background-color: #fff0f0">"quick view"</span> <span style="color: #333333">/></</span>a<span style="color: #333333">></</span>li<span style="color: #333333">></span>
|
||||
<span style="color: #333333"></</span>ul<span style="color: #333333">></span>
|
||||
<span style="color: #333333"></</span>div<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>div class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ec-product-body"</span><span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>ul class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ec-rating"</span><span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>li class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ecicon eci-star fill"</span><span style="color: #333333">></</span>li<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>li class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ecicon eci-star fill"</span><span style="color: #333333">></</span>li<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>li class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ecicon eci-star fill"</span><span style="color: #333333">></</span>li<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>li class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ecicon eci-star fill"</span><span style="color: #333333">></</span>li<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>li class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ecicon eci-star"</span><span style="color: #333333">></</span>li<span style="color: #333333">></span>
|
||||
<span style="color: #333333"></</span>ul<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>h3 class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ec-title"</span><span style="color: #333333">><</span>a href<span style="color: #333333">=</span><span style="background-color: #fff0f0">"#"</span><span style="color: #333333">></span>Men<span style="background-color: #fff0f0">'s Blazer</a></h3></span>
|
||||
<span style="color: #333333"><</span>div class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ec-price"</span><span style="color: #333333">><</span>span<span style="color: #333333">></span><span style="color: #FF0000; background-color: #FFAAAA">$</span><span style="color: #6600EE; font-weight: bold">90.00</span><span style="color: #333333"></</span>span<span style="color: #333333">></span> <span style="color: #FF0000; background-color: #FFAAAA">$</span><span style="color: #6600EE; font-weight: bold">66.00</span><span style="color: #333333"></</span>div<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>a class<span style="color: #333333">=</span><span style="background-color: #fff0f0">" ec-add-to-cart"</span> href<span style="color: #333333">=</span><span style="background-color: #fff0f0">"#"</span><span style="color: #333333">></span>add to cart<span style="color: #333333"></</span>a<span style="color: #333333">></span>
|
||||
<span style="color: #333333"></</span>div<span style="color: #333333">></span>
|
||||
<span style="color: #333333"></</span>div<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span><span style="color: #FF0000; background-color: #FFAAAA">!</span><span style="color: #333333">--/</span>END single card <span style="color: #333333">--></span>
|
||||
</pre></div>
|
||||
|
||||
<h5>Elemets Typography ( elemets-typography.html )</h5>
|
||||
<p>If you want use other title style then copy code which you want style and paste it.</p>
|
||||
<!-- HTML generated using hilite.me --><div style="margin-bottom:20px; background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #333333"><</span>h1 class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ec-fw-bold ec-fc"</span><span style="color: #333333">></span>HEADING H1<span style="color: #333333"></</span>h1<span style="color: #333333">></span>
|
||||
</pre></div>
|
||||
<p>If you want use other list style then copy code which you want style and paste it.</p>
|
||||
<!-- HTML generated using hilite.me --><div style="margin-bottom:20px; background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #333333"><</span>div class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"col-lg-2 col-md-4 col-sm-6 col-6"</span><span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>ul class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ec-disc"</span><span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>li<span style="color: #333333">></span>Friday<span style="color: #333333"></</span>li<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>li<span style="color: #333333">></span>Monday<span style="color: #333333"></</span>li<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>li<span style="color: #333333">></span>Saturday<span style="color: #333333"></</span>li<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>li<span style="color: #333333">></span>Wednesday<span style="color: #333333"></</span>li<span style="color: #333333">></span>
|
||||
<span style="color: #333333"></</span>ul<span style="color: #333333">></span>
|
||||
<span style="color: #333333"></</span>div<span style="color: #333333">></span>
|
||||
</pre></div>
|
||||
|
||||
|
||||
<h5>Elemets Title ( elemets-title.html )</h5>
|
||||
<p>If you want use other Title style then copy code which you want style and paste it.</p>
|
||||
<!-- HTML generated using hilite.me --><div style="margin-bottom:20px; background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #333333"><</span>h2 class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ec-title-ds"</span><span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>span<span style="color: #333333">></span>Title Style <span style="color: #0000DD; font-weight: bold">1</span><span style="color: #333333"></</span>span<span style="color: #333333">></span>
|
||||
<span style="color: #333333"></</span>h2<span style="color: #333333">></span>
|
||||
</pre></div>
|
||||
|
||||
|
||||
<h5>Elemets Categories ( elemets-categories.html )</h5>
|
||||
<p>If you want use other Category style then copy code which you want style and paste it.</p>
|
||||
<!-- HTML generated using hilite.me --><div style="margin-bottom:20px; background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #333333"><</span>div class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ec_cat_content"</span><span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>div class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ec_cat_inner"</span><span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>div class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ec-cat-image"</span><span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>img src<span style="color: #333333">=</span><span style="background-color: #fff0f0">"assets/images/category-image/1.jpg"</span> alt<span style="color: #333333">=</span><span style="background-color: #fff0f0">"slider category img"</span> <span style="color: #333333">/></span>
|
||||
<span style="color: #333333"></</span>div<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>div class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ec-cat-desc"</span><span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>span class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ec-section-btn"</span><span style="color: #333333">><</span>a href<span style="color: #333333">=</span><span style="background-color: #fff0f0">"#"</span> class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"btn-primary"</span><span style="color: #333333">></span>Sofa chair<span style="color: #333333"></</span>a<span style="color: #333333">></</span>span<span style="color: #333333">></span>
|
||||
<span style="color: #333333"></</span>div<span style="color: #333333">></span>
|
||||
<span style="color: #333333"></</span>div<span style="color: #333333">></span>
|
||||
<span style="color: #333333"></</span>div<span style="color: #333333">></span>
|
||||
</pre></div>
|
||||
|
||||
<h5>Elemets Buttons ( elemets-buttons.html )</h5>
|
||||
<p>If you want use other Buttons style then copy code which you want style and paste it.</p>
|
||||
<div style="margin-bottom:20px; background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #333333"><</span>div class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ec-btn-ds"</span><span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>button class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"btn"</span><span style="color: #333333">></span>Default<span style="color: #333333"></</span>button<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>button class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"btn btn-primary"</span><span style="color: #333333">></span>Primary<span style="color: #333333"></</span>button<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>button class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"btn btn-secondary"</span><span style="color: #333333">></span>Secondary<span style="color: #333333"></</span>button<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>button class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"btn btn-success"</span><span style="color: #333333">></span>Success<span style="color: #333333"></</span>button<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>button class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"btn btn-info"</span><span style="color: #333333">></span>Info<span style="color: #333333"></</span>button<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>button class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"btn btn-warning"</span><span style="color: #333333">></span><span style="color: #FF0000; font-weight: bold">Warning</span><span style="color: #333333"></</span>button<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>button class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"btn btn-danger"</span><span style="color: #333333">></span>Danger<span style="color: #333333"></</span>button<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>button class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"btn btn-primary disabled"</span><span style="color: #333333">></span>Disabled<span style="color: #333333"></</span>button<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>button class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"btn btn-primary btn-link"</span><span style="color: #333333">></span>Link<span style="color: #333333"></</span>button<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>button class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"btn btn-primary btn-jittery"</span><span style="color: #333333">></span>Click Me<span style="color: #333333"></</span>button<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>button class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"btn btn-primary btn-jelly"</span><span style="color: #333333">></span>Jelly<span style="color: #333333"></</span>button<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>button class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"btn btn-primary btn-pulse"</span><span style="color: #333333">></span>Pulse<span style="color: #333333"></</span>button<span style="color: #333333">></span>
|
||||
<span style="color: #333333"></</span>div<span style="color: #333333">></span>
|
||||
</pre></div>
|
||||
|
||||
|
||||
<h5>Elemets Tabs ( elemets-tabs.html )</h5>
|
||||
<p>If you want use other Tabs style then copy code which you want style and paste it.</p>
|
||||
<div style="margin-bottom:20px; background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #333333"><</span>div class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ec-tab-wrapper ec-tab-wrapper-1"</span><span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>div class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ec-single-pro-tab-wrapper"</span><span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>div class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ec-single-pro-tab-nav"</span><span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>ul class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"nav nav-tabs"</span><span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>li class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"nav-item"</span><span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>a class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"nav-link active"</span> data<span style="color: #333333">-</span>bs<span style="color: #333333">-</span>toggle<span style="color: #333333">=</span><span style="background-color: #fff0f0">"tab"</span> data<span style="color: #333333">-</span>bs<span style="color: #333333">-</span>target<span style="color: #333333">=</span><span style="background-color: #fff0f0">"#ec-spt-nav-details"</span>
|
||||
role<span style="color: #333333">=</span><span style="background-color: #fff0f0">"tablist"</span><span style="color: #333333">></span>Detail<span style="color: #333333"></</span>a<span style="color: #333333">></span>
|
||||
<span style="color: #333333"></</span>li<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>li class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"nav-item"</span><span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>a class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"nav-link"</span> data<span style="color: #333333">-</span>bs<span style="color: #333333">-</span>toggle<span style="color: #333333">=</span><span style="background-color: #fff0f0">"tab"</span> data<span style="color: #333333">-</span>bs<span style="color: #333333">-</span>target<span style="color: #333333">=</span><span style="background-color: #fff0f0">"#ec-spt-nav-info"</span>
|
||||
role<span style="color: #333333">=</span><span style="background-color: #fff0f0">"tablist"</span><span style="color: #333333">></span>More Information<span style="color: #333333"></</span>a<span style="color: #333333">></span>
|
||||
<span style="color: #333333"></</span>li<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>li class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"nav-item"</span><span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>a class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"nav-link"</span> data<span style="color: #333333">-</span>bs<span style="color: #333333">-</span>toggle<span style="color: #333333">=</span><span style="background-color: #fff0f0">"tab"</span> data<span style="color: #333333">-</span>bs<span style="color: #333333">-</span>target<span style="color: #333333">=</span><span style="background-color: #fff0f0">"#ec-spt-nav-review"</span>
|
||||
role<span style="color: #333333">=</span><span style="background-color: #fff0f0">"tablist"</span><span style="color: #333333">></span>Reviews<span style="color: #333333"></</span>a<span style="color: #333333">></span>
|
||||
<span style="color: #333333"></</span>li<span style="color: #333333">></span>
|
||||
<span style="color: #333333"></</span>ul<span style="color: #333333">></span>
|
||||
<span style="color: #333333"></</span>div<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>div class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"tab-content ec-single-pro-tab-content"</span><span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>div <span style="color: #007020">id</span><span style="color: #333333">=</span><span style="background-color: #fff0f0">"ec-spt-nav-details"</span> class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"tab-pane fade show active"</span><span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>div class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ec-single-pro-tab-desc"</span><span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>p<span style="color: #333333">></span>Lorem Ipsum <span style="color: #000000; font-weight: bold">is</span> simply dummy text of the printing <span style="color: #000000; font-weight: bold">and</span> typesetting industry<span style="color: #333333">.</span> Lorem
|
||||
Ipsum has been the industry<span style="background-color: #fff0f0">'s standard dummy text ever since the 1500s, when an</span>
|
||||
unknown printer took a galley of <span style="color: #007020">type</span> <span style="color: #000000; font-weight: bold">and</span> scrambled it to make a <span style="color: #007020">type</span> specimen
|
||||
book<span style="color: #333333">.</span> It has survived <span style="color: #000000; font-weight: bold">not</span> only five centuries, but also the leap into electronic
|
||||
typesetting, remaining essentially unchanged<span style="color: #333333">.</span>
|
||||
<span style="color: #333333"></</span>p<span style="color: #333333">></span>
|
||||
<span style="color: #333333"></</span>div<span style="color: #333333">></span>
|
||||
<span style="color: #333333"></</span>div<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>div <span style="color: #007020">id</span><span style="color: #333333">=</span><span style="background-color: #fff0f0">"ec-spt-nav-info"</span> class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"tab-pane fade"</span><span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>div class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ec-single-pro-tab-moreinfo"</span><span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>p<span style="color: #333333">></span>It <span style="color: #000000; font-weight: bold">is</span> a <span style="color: #007020">long</span> established fact that a reader will be distracted by the readable
|
||||
content of a page when looking at its layout<span style="color: #333333">.</span> The point of using Lorem Ipsum <span style="color: #000000; font-weight: bold">is</span>
|
||||
that it has a more<span style="color: #333333">-</span><span style="color: #000000; font-weight: bold">or</span><span style="color: #333333">-</span>less normal distribution of letters, <span style="color: #008800; font-weight: bold">as</span> opposed to using
|
||||
<span style="background-color: #fff0f0">'Content here.</p></span>
|
||||
<span style="color: #333333"></</span>div<span style="color: #333333">></span>
|
||||
<span style="color: #333333"></</span>div<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>div <span style="color: #007020">id</span><span style="color: #333333">=</span><span style="background-color: #fff0f0">"ec-spt-nav-review"</span> class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"tab-pane fade"</span><span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>p<span style="color: #333333">></span>There are many variations of passages of Lorem Ipsum available, but the majority have
|
||||
suffered alteration <span style="color: #000000; font-weight: bold">in</span> some form, by injected humour, <span style="color: #000000; font-weight: bold">or</span> randomised words which
|
||||
don<span style="background-color: #fff0f0">'t look even slightly believable. If you are going to use a passage of Lorem</span>
|
||||
Ipsum<span style="color: #333333">.</</span>p<span style="color: #333333">></span>
|
||||
<span style="color: #333333"></</span>div<span style="color: #333333">></span>
|
||||
<span style="color: #333333"></</span>div<span style="color: #333333">></span>
|
||||
<span style="color: #333333"></</span>div<span style="color: #333333">></span>
|
||||
<span style="color: #333333"></</span>div<span style="color: #333333">></span>
|
||||
</pre></div>
|
||||
|
||||
<h5>Elemets Accordions ( elemets-accordions.html )</h5>
|
||||
<p>If you want use other Accordions style then copy code which you want style and paste it.</p>
|
||||
<div style="margin-bottom:20px; background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #333333"><</span>div <span style="color: #007020">id</span><span style="color: #333333">=</span><span style="background-color: #fff0f0">"ec-faq"</span><span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>div class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"col-sm-12 ec-faq-block"</span><span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>h4 class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ec-faq-title"</span><span style="color: #333333">></span>Lorem Ipsum <span style="color: #000000; font-weight: bold">is</span> simply dummy text<span style="color: #333333"></</span>h4<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>div class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ec-faq-content"</span><span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>p<span style="color: #333333">></span>Lorem Ipsum <span style="color: #000000; font-weight: bold">is</span> simply dummy text of the printing <span style="color: #000000; font-weight: bold">and</span> typesetting industry<span style="color: #333333">.</span> Lorem
|
||||
Ipsum has been the industry<span style="background-color: #fff0f0">'s standard dummy text ever since the 1500s, when an</span>
|
||||
unknown printer took a galley of <span style="color: #007020">type</span> <span style="color: #000000; font-weight: bold">and</span> scrambled it to make a <span style="color: #007020">type</span> specimen
|
||||
book<span style="color: #333333">.</span> It has survived <span style="color: #000000; font-weight: bold">not</span> only five centuries, but also the leap into electronic
|
||||
typesetting, remaining essentially unchanged<span style="color: #333333">.</span> <span style="color: #333333"></</span>p<span style="color: #333333">></span>
|
||||
<span style="color: #333333"></</span>div<span style="color: #333333">></span>
|
||||
<span style="color: #333333"></</span>div<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>div class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"col-sm-12 ec-faq-block"</span><span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>h4 class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ec-faq-title"</span><span style="color: #333333">></span>Lorem Ipsum <span style="color: #000000; font-weight: bold">is</span> simply dummy text<span style="color: #333333"></</span>h4<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>div class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ec-faq-content"</span><span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>p<span style="color: #333333">></span>Lorem Ipsum <span style="color: #000000; font-weight: bold">is</span> simply dummy text of the printing <span style="color: #000000; font-weight: bold">and</span> typesetting industry<span style="color: #333333">.</span> Lorem
|
||||
Ipsum has been the industry<span style="background-color: #fff0f0">'s standard dummy text ever since the 1500s, when an</span>
|
||||
unknown printer took a galley of <span style="color: #007020">type</span> <span style="color: #000000; font-weight: bold">and</span> scrambled it to make a <span style="color: #007020">type</span> specimen
|
||||
book<span style="color: #333333">.</span> It has survived <span style="color: #000000; font-weight: bold">not</span> only five centuries, but also the leap into electronic
|
||||
typesetting, remaining essentially unchanged<span style="color: #333333">.</span> <span style="color: #333333"></</span>p<span style="color: #333333">></span>
|
||||
<span style="color: #333333"></</span>div<span style="color: #333333">></span>
|
||||
<span style="color: #333333"></</span>div<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>div class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"col-sm-12 ec-faq-block"</span><span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>h4 class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ec-faq-title"</span><span style="color: #333333">></span>Lorem Ipsum <span style="color: #000000; font-weight: bold">is</span> simply dummy text<span style="color: #333333"></</span>h4<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>div class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ec-faq-content"</span><span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>p<span style="color: #333333">></span>Lorem Ipsum <span style="color: #000000; font-weight: bold">is</span> simply dummy text of the printing <span style="color: #000000; font-weight: bold">and</span> typesetting industry<span style="color: #333333">.</span> Lorem
|
||||
Ipsum has been the industry<span style="background-color: #fff0f0">'s standard dummy text ever since the 1500s, when an</span>
|
||||
unknown printer took a galley of <span style="color: #007020">type</span> <span style="color: #000000; font-weight: bold">and</span> scrambled it to make a <span style="color: #007020">type</span> specimen
|
||||
book<span style="color: #333333">.</span> It has survived <span style="color: #000000; font-weight: bold">not</span> only five centuries, but also the leap into electronic
|
||||
typesetting, remaining essentially unchanged<span style="color: #333333">.</span> <span style="color: #333333"></</span>p<span style="color: #333333">></span>
|
||||
<span style="color: #333333"></</span>div<span style="color: #333333">></span>
|
||||
<span style="color: #333333"></</span>div<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>div class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"col-sm-12 ec-faq-block"</span><span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>h4 class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ec-faq-title"</span><span style="color: #333333">></span>Lorem Ipsum <span style="color: #000000; font-weight: bold">is</span> simply dummy text<span style="color: #333333"></</span>h4<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>div class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ec-faq-content"</span><span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>p<span style="color: #333333">></span>Lorem Ipsum <span style="color: #000000; font-weight: bold">is</span> simply dummy text of the printing <span style="color: #000000; font-weight: bold">and</span> typesetting industry<span style="color: #333333">.</span> Lorem
|
||||
Ipsum has been the industry<span style="background-color: #fff0f0">'s standard dummy text ever since the 1500s, when an</span>
|
||||
unknown printer took a galley of <span style="color: #007020">type</span> <span style="color: #000000; font-weight: bold">and</span> scrambled it to make a <span style="color: #007020">type</span> specimen
|
||||
book<span style="color: #333333">.</span> It has survived <span style="color: #000000; font-weight: bold">not</span> only five centuries, but also the leap into electronic
|
||||
typesetting, remaining essentially unchanged<span style="color: #333333">.</span> <span style="color: #333333"></</span>p<span style="color: #333333">></span>
|
||||
<span style="color: #333333"></</span>div<span style="color: #333333">></span>
|
||||
<span style="color: #333333"></</span>div<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>div class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"col-sm-12 ec-faq-block"</span><span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>h4 class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ec-faq-title"</span><span style="color: #333333">></span>Lorem Ipsum <span style="color: #000000; font-weight: bold">is</span> simply dummy text<span style="color: #333333"></</span>h4<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>div class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ec-faq-content"</span><span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>p<span style="color: #333333">></span>Lorem Ipsum <span style="color: #000000; font-weight: bold">is</span> simply dummy text of the printing <span style="color: #000000; font-weight: bold">and</span> typesetting industry<span style="color: #333333">.</span> Lorem
|
||||
Ipsum has been the industry<span style="background-color: #fff0f0">'s standard dummy text ever since the 1500s, when an</span>
|
||||
unknown printer took a galley of <span style="color: #007020">type</span> <span style="color: #000000; font-weight: bold">and</span> scrambled it to make a <span style="color: #007020">type</span> specimen
|
||||
book<span style="color: #333333">.</span> It has survived <span style="color: #000000; font-weight: bold">not</span> only five centuries, but also the leap into electronic
|
||||
typesetting, remaining essentially unchanged<span style="color: #333333">.</span> <span style="color: #333333"></</span>p<span style="color: #333333">></span>
|
||||
<span style="color: #333333"></</span>div<span style="color: #333333">></span>
|
||||
<span style="color: #333333"></</span>div<span style="color: #333333">></span>
|
||||
<span style="color: #333333"></</span>div<span style="color: #333333">></span>
|
||||
</pre></div>
|
||||
|
||||
<h5>Elemets Blog ( elemets-blog.html )</h5>
|
||||
<p>If you want use other Blog style then copy code which you want style and paste it.</p>
|
||||
<div style="margin-bottom:20px; background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #333333"><</span>div class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"row margin-minus-t-15"</span><span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>div class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"col-lg-4 col-md-6 col-sm-6 col-xs-12"</span><span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>div class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ec-card-grid-space"</span><span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>a class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ec-card media-1"</span> href<span style="color: #333333">=</span><span style="background-color: #fff0f0">"#"</span><span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>div class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ec-num"</span><span style="color: #333333">></span><span style="color: #4400EE; font-weight: bold">01</span><span style="color: #333333"></</span>div<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>h1<span style="color: #333333">></span>What <span style="color: #000000; font-weight: bold">is</span> the lorem<span style="color: #333333">.</</span>h1<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>p<span style="color: #333333">></span>The syntax of a language <span style="color: #000000; font-weight: bold">is</span> how it works<span style="color: #333333">.</span> How to actually write it<span style="color: #333333">.</span> Learn HTML syntax<span style="color: #FF0000; background-color: #FFAAAA">…</span>
|
||||
<span style="color: #333333"></</span>p<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>div class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ec-date"</span><span style="color: #333333">></span><span style="color: #0000DD; font-weight: bold">7</span> jul <span style="color: #0000DD; font-weight: bold">2021-2022</span><span style="color: #333333"></</span>div<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>div class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ec-tags"</span><span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>div class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ec-tag"</span><span style="color: #333333">></span>READ MORE<span style="color: #333333"></</span>div<span style="color: #333333">></span>
|
||||
<span style="color: #333333"></</span>div<span style="color: #333333">></span>
|
||||
<span style="color: #333333"></</span>a<span style="color: #333333">></span>
|
||||
<span style="color: #333333"></</span>div<span style="color: #333333">></span>
|
||||
<span style="color: #333333"></</span>div<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>div class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"col-lg-4 col-md-6 col-sm-6 col-xs-12"</span><span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>div class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ec-card-grid-space"</span><span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>a class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ec-card media-2"</span> href<span style="color: #333333">=</span><span style="background-color: #fff0f0">"#"</span><span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>div class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ec-num"</span><span style="color: #333333">></span><span style="color: #4400EE; font-weight: bold">02</span><span style="color: #333333"></</span>div<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>h1<span style="color: #333333">></span>What <span style="color: #000000; font-weight: bold">is</span> the lorem<span style="color: #333333">.</</span>h1<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>p<span style="color: #333333">></span>The syntax of a language <span style="color: #000000; font-weight: bold">is</span> how it works<span style="color: #333333">.</span> How to actually write it<span style="color: #333333">.</span> Learn HTML syntax<span style="color: #FF0000; background-color: #FFAAAA">…</span>
|
||||
<span style="color: #333333"></</span>p<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>div class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ec-date"</span><span style="color: #333333">></span><span style="color: #0000DD; font-weight: bold">6</span> jul <span style="color: #0000DD; font-weight: bold">2021-2022</span><span style="color: #333333"></</span>div<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>div class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ec-tags"</span><span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>div class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ec-tag"</span><span style="color: #333333">></span>READ MORE<span style="color: #333333"></</span>div<span style="color: #333333">></span>
|
||||
<span style="color: #333333"></</span>div<span style="color: #333333">></span>
|
||||
<span style="color: #333333"></</span>a<span style="color: #333333">></span>
|
||||
<span style="color: #333333"></</span>div<span style="color: #333333">></span>
|
||||
<span style="color: #333333"></</span>div<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>div class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"col-lg-4 col-md-6 col-sm-6 col-xs-12 m-auto"</span><span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>div class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ec-card-grid-space"</span><span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>a class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ec-card media-3"</span> href<span style="color: #333333">=</span><span style="background-color: #fff0f0">"#"</span><span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>div class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ec-num"</span><span style="color: #333333">></span><span style="color: #4400EE; font-weight: bold">03</span><span style="color: #333333"></</span>div<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>h1<span style="color: #333333">></span>What <span style="color: #000000; font-weight: bold">is</span> the lorem<span style="color: #333333">.</</span>h1<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>p<span style="color: #333333">></span>The syntax of a language <span style="color: #000000; font-weight: bold">is</span> how it works<span style="color: #333333">.</span> How to actually write it<span style="color: #333333">.</span> Learn HTML syntax<span style="color: #FF0000; background-color: #FFAAAA">…</span>
|
||||
<span style="color: #333333"></</span>p<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>div class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ec-date"</span><span style="color: #333333">></span><span style="color: #0000DD; font-weight: bold">5</span> jul <span style="color: #0000DD; font-weight: bold">2021-2022</span><span style="color: #333333"></</span>div<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>div class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ec-tags"</span><span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>div class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ec-tag"</span><span style="color: #333333">></span>READ MORE<span style="color: #333333"></</span>div<span style="color: #333333">></span>
|
||||
<span style="color: #333333"></</span>div<span style="color: #333333">></span>
|
||||
<span style="color: #333333"></</span>a<span style="color: #333333">></span>
|
||||
<span style="color: #333333"></</span>div<span style="color: #333333">></span>
|
||||
<span style="color: #333333"></</span>div<span style="color: #333333">></span>
|
||||
<span style="color: #333333"></</span>div<span style="color: #333333">></span>
|
||||
</pre></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="col-12 page-section" id="customization">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h2 class="section-title">Customization & Source Files</h2>
|
||||
|
||||
<h4>Fonts</h4>
|
||||
<p>First download fonts which you want. and then paste fonts file in font folder.<br>
|
||||
and Goto "scss > base > _typography", and change. after compile your code and run thml file.</p>
|
||||
<img class="inst-img" src="img/typo.png" alt="typo">
|
||||
<h4>Logo</h4>
|
||||
<p>If you want to change logo. Goto "assets/image/logo" folder and change logo png image.</p>
|
||||
|
||||
<!-- HTML generated using hilite.me --><div style="margin-bottom:20px; background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #333333"><</span>a href<span style="color: #333333">=</span><span style="background-color: #fff0f0">"index.php"</span><span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>img src<span style="color: #333333">=</span><span style="background-color: #fff0f0">"assets/images/logo/logo.png"</span> alt<span style="color: #333333">=</span><span style="background-color: #fff0f0">"Site Logo"</span><span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>img class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"dark-logo"</span> src<span style="color: #333333">=</span><span style="background-color: #fff0f0">"assets/images/logo/dark-logo.png"</span> alt<span style="color: #333333">=</span><span style="background-color: #fff0f0">"Site Logo"</span> style<span style="color: #333333">=</span><span style="background-color: #fff0f0">"display: none;"</span><span style="color: #333333">></span>
|
||||
<span style="color: #333333"></</span>a<span style="color: #333333">></span>
|
||||
</pre></div>
|
||||
|
||||
|
||||
|
||||
<h4>Menus</h4>
|
||||
<p>If you want to add menu and change menu name.</p>
|
||||
<!-- HTML generated using hilite.me --><div style="margin-bottom:20px; background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #333333"><</span>li class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"dropdown"</span><span style="color: #333333">><</span>a href<span style="color: #333333">=</span><span style="background-color: #fff0f0">"javascript:void(0)"</span><span style="color: #333333">></span>Home<span style="color: #333333"></</span>a<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>ul class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"sub-menu"</span><span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>li<span style="color: #333333">><</span>a href<span style="color: #333333">=</span><span style="background-color: #fff0f0">"index.php"</span><span style="color: #333333">></span>Fashion 1<span style="color: #333333"></</span>a<span style="color: #333333">></</span>li<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>li<span style="color: #333333">><</span>a href<span style="color: #333333">=</span><span style="background-color: #fff0f0">"demo-2.html"</span><span style="color: #333333">></span>Fashion 2<span style="color: #333333"></</span>a<span style="color: #333333">></</span>li<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>li<span style="color: #333333">><</span>a href<span style="color: #333333">=</span><span style="background-color: #fff0f0">"demo-3.html"</span><span style="color: #333333">></span>Furniture<span style="color: #333333"></</span>a<span style="color: #333333">></</span>li<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>li<span style="color: #333333">><</span>a href<span style="color: #333333">=</span><span style="background-color: #fff0f0">"demo-4.html"</span><span style="color: #333333">></span>Mix products<span style="color: #333333"></</span>a<span style="color: #333333">></</span>li<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>li<span style="color: #333333">><</span>a href<span style="color: #333333">=</span><span style="background-color: #fff0f0">"demo-5.html"</span><span style="color: #333333">></span>Electronic<span style="color: #333333"></</span>a<span style="color: #333333">></</span>li<span style="color: #333333">></span>
|
||||
<span style="color: #333333"></</span>ul<span style="color: #333333">></span>
|
||||
<span style="color: #333333"></</span>li<span style="color: #333333">></span>
|
||||
</pre></div>
|
||||
|
||||
<h4>Brand icons</h4>
|
||||
<p>If you want to change brand icon.</p>
|
||||
<!-- HTML generated using hilite.me --><div style="margin-bottom:20px; background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #333333"><</span>li class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ec-brand-item"</span><span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>div class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ec-brand-img"</span><span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>a href<span style="color: #333333">=</span><span style="background-color: #fff0f0">"#"</span><span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>img alt<span style="color: #333333">=</span><span style="background-color: #fff0f0">"brand"</span> title<span style="color: #333333">=</span><span style="background-color: #fff0f0">"brand"</span> src<span style="color: #333333">=</span><span style="background-color: #fff0f0">"assets/images/brand-image/1.png"</span> <span style="color: #333333">/></span>
|
||||
<span style="color: #333333"></</span>a<span style="color: #333333">></span>
|
||||
<span style="color: #333333"></</span>div<span style="color: #333333">></span>
|
||||
<span style="color: #333333"></</span>li<span style="color: #333333">></span>
|
||||
</pre></div>
|
||||
|
||||
|
||||
<h4>Footer Other Link URL.</h4>
|
||||
<p>If you want to change footer other link url.</p>
|
||||
<!-- HTML generated using hilite.me --><div style="margin-bottom:20px; background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #333333"><</span>div class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ec-footer-widget"</span><span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>h4 class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ec-footer-heading"</span><span style="color: #333333">></span>Information<span style="color: #333333"></</span>h4<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>div class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ec-footer-links"</span><span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>ul class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"align-items-center"</span><span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>li class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ec-footer-link"</span><span style="color: #333333">><</span>a href<span style="color: #333333">=</span><span style="background-color: #fff0f0">"about-us.html"</span><span style="color: #333333">></span>About us<span style="color: #333333"></</span>a<span style="color: #333333">></</span>li<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>li class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ec-footer-link"</span><span style="color: #333333">><</span>a href<span style="color: #333333">=</span><span style="background-color: #fff0f0">"faq.html"</span><span style="color: #333333">></span>FAQ<span style="color: #333333"></</span>a<span style="color: #333333">></</span>li<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>li class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ec-footer-link"</span><span style="color: #333333">><</span>a href<span style="color: #333333">=</span><span style="background-color: #fff0f0">"track-order.html"</span><span style="color: #333333">></span>Delivery Information<span style="color: #333333"></</span>a<span style="color: #333333">></</span>li<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>li class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ec-footer-link"</span><span style="color: #333333">><</span>a href<span style="color: #333333">=</span><span style="background-color: #fff0f0">"contact-us.html"</span><span style="color: #333333">></span>Contact us<span style="color: #333333"></</span>a<span style="color: #333333">></</span>li<span style="color: #333333">></span>
|
||||
<span style="color: #333333"></</span>ul<span style="color: #333333">></span>
|
||||
<span style="color: #333333"></</span>div<span style="color: #333333">></span>
|
||||
<span style="color: #333333"></</span>div<span style="color: #333333">></span>
|
||||
</pre></div>
|
||||
|
||||
<h4>Footer Contact us info.</h4>
|
||||
<p>If you want to change footer Contact us info.</p>
|
||||
<!-- HTML generated using hilite.me --><div style="margin-bottom:20px; background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #333333"><</span>div class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"col-sm-12 col-lg-3 ec-footer-contact"</span><span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>div class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ec-footer-widget"</span><span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>div class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ec-footer-logo"</span><span style="color: #333333">><</span>a href<span style="color: #333333">=</span><span style="background-color: #fff0f0">"#"</span><span style="color: #333333">><</span>img src<span style="color: #333333">=</span><span style="background-color: #fff0f0">"assets/images/logo/footer-logo.png"</span>
|
||||
alt<span style="color: #333333">=</span><span style="background-color: #fff0f0">""</span><span style="color: #333333">><</span>img class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"dark-footer-logo"</span> src<span style="color: #333333">=</span><span style="background-color: #fff0f0">"assets/images/logo/dark-logo.png"</span>
|
||||
alt<span style="color: #333333">=</span><span style="background-color: #fff0f0">"Site Logo"</span> style<span style="color: #333333">=</span><span style="background-color: #fff0f0">"display: none;"</span> <span style="color: #333333">/></</span>a<span style="color: #333333">></</span>div<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>h4 class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ec-footer-heading"</span><span style="color: #333333">></span>Contact us<span style="color: #333333"></</span>h4<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>div class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ec-footer-links"</span><span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>ul class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"align-items-center"</span><span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>li class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ec-footer-link"</span><span style="color: #333333">></span><span>71</span> Pilgrim Avenue Chevy Chase,<span style="color: #333333"></</span>li<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>li class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ec-footer-link"</span><span style="color: #333333">><</span>span<span style="color: #333333">></span>Call Us:<span style="color: #333333"></</span>span<span style="color: #333333">><</span>a href<span style="color: #333333">=</span><span style="background-color: #fff0f0">"tel:+440123456789"</span><span style="color: #333333">>+</span><span style="color: #0000DD; font-weight: bold">44</span>
|
||||
<span>0123</span> <span>456</span> <span>789</span><span style="color: #333333"></</span>a<span style="color: #333333">></</span>li<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>li class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ec-footer-link"</span><span style="color: #333333">><</span>span<span style="color: #333333">></span>Email:<span style="color: #333333"></</span>span<span style="color: #333333">><</span>a
|
||||
href<span style="color: #333333">=</span><span style="background-color: #fff0f0">"mailto:example@ec-email.com"</span><span style="color: #333333">>+</span>example<span style="color: #555555; font-weight: bold">@ec</span><span style="color: #333333">-</span>email<span style="color: #333333">.</span>com<span style="color: #333333"></</span>a<span style="color: #333333">></</span>li<span style="color: #333333">></span>
|
||||
<span style="color: #333333"></</span>ul<span style="color: #333333">></span>
|
||||
<span style="color: #333333"></</span>div<span style="color: #333333">></span>
|
||||
<span style="color: #333333"></</span>div<span style="color: #333333">></span>
|
||||
<span style="color: #333333"></</span>div<span style="color: #333333">></span>
|
||||
</pre></div>
|
||||
|
||||
|
||||
|
||||
|
||||
<h4>Footer Social icon Link</h4>
|
||||
<p>If you want to change footer social icon link.</p>
|
||||
<!-- HTML generated using hilite.me --><div style="margin-bottom:20px; background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #333333"><</span><span style="">!</span><span style="color: #333333">--</span> Footer social Start <span style="color: #333333">--></span>
|
||||
<span style="color: #333333"><</span>div class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"col text-left footer-bottom-left"</span><span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>div class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"footer-bottom-social"</span><span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>span class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"social-text text-upper"</span><span style="color: #333333">></span>Follow us on:<span style="color: #333333"></</span>span<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>ul class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"mb-0"</span><span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>li class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"list-inline-item"</span><span style="color: #333333">><</span>a href<span style="color: #333333">=</span><span style="background-color: #fff0f0">"#"</span><span style="color: #333333">><</span>i class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ecicon eci-facebook"</span><span style="color: #333333">></</span>i<span style="color: #333333">></</span>a<span style="color: #333333">></span>
|
||||
<span style="color: #333333"></</span>li<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>li class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"list-inline-item"</span><span style="color: #333333">><</span>a href<span style="color: #333333">=</span><span style="background-color: #fff0f0">"#"</span><span style="color: #333333">><</span>i class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ecicon eci-twitter"</span><span style="color: #333333">></</span>i<span style="color: #333333">></</span>a<span style="color: #333333">></</span>li<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>li class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"list-inline-item"</span><span style="color: #333333">><</span>a href<span style="color: #333333">=</span><span style="background-color: #fff0f0">"#"</span><span style="color: #333333">><</span>i class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ecicon eci-instagram"</span><span style="color: #333333">></</span>i<span style="color: #333333">></</span>a<span style="color: #333333">></span>
|
||||
<span style="color: #333333"></</span>li<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>li class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"list-inline-item"</span><span style="color: #333333">><</span>a href<span style="color: #333333">=</span><span style="background-color: #fff0f0">"#"</span><span style="color: #333333">><</span>i class<span style="color: #333333">=</span><span style="background-color: #fff0f0">"ecicon eci-linkedin"</span><span style="color: #333333">></</span>i<span style="color: #333333">></</span>a<span style="color: #333333">></span>
|
||||
<span style="color: #333333"></</span>li<span style="color: #333333">></span>
|
||||
<span style="color: #333333"></</span>ul<span style="color: #333333">></span>
|
||||
<span style="color: #333333"></</span>div<span style="color: #333333">></span>
|
||||
<span style="color: #333333"></</span>div<span style="color: #333333">></span>
|
||||
</pre></div>
|
||||
|
||||
|
||||
<h4>Source File (CSS)</h4><!-- HTML generated using hilite.me --><div style="margin-bottom:20px; background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"> <span style="color: #333333"><</span><span style="color: #FF0000; background-color: #FFAAAA">!</span><span style="color: #333333">--</span> css Icon Font <span style="color: #333333">--></span>
|
||||
<span style="color: #333333"><</span>link rel<span style="color: #333333">=</span><span style="background-color: #fff0f0">"stylesheet"</span> href<span style="color: #333333">=</span><span style="background-color: #fff0f0">"assets/css/vendor/ecicons.min.css"</span> <span style="color: #333333">/></span>
|
||||
|
||||
<span style="color: #333333"><</span><span style="color: #FF0000; background-color: #FFAAAA">!</span><span style="color: #333333">--</span> css All Plugins Files <span style="color: #333333">--></span>
|
||||
<span style="color: #333333"><</span>link rel<span style="color: #333333">=</span><span style="background-color: #fff0f0">"stylesheet"</span> href<span style="color: #333333">=</span><span style="background-color: #fff0f0">"assets/css/plugins/animate.css"</span> <span style="color: #333333">/></span>
|
||||
<span style="color: #333333"><</span>link rel<span style="color: #333333">=</span><span style="background-color: #fff0f0">"stylesheet"</span> href<span style="color: #333333">=</span><span style="background-color: #fff0f0">"assets/css/plugins/swiper-bundle.min.css"</span> <span style="color: #333333">/></span>
|
||||
<span style="color: #333333"><</span>link rel<span style="color: #333333">=</span><span style="background-color: #fff0f0">"stylesheet"</span> href<span style="color: #333333">=</span><span style="background-color: #fff0f0">"assets/css/plugins/jquery-ui.min.css"</span> <span style="color: #333333">/></span>
|
||||
<span style="color: #333333"><</span>link rel<span style="color: #333333">=</span><span style="background-color: #fff0f0">"stylesheet"</span> href<span style="color: #333333">=</span><span style="background-color: #fff0f0">"assets/css/plugins/countdownTimer.css"</span> <span style="color: #333333">/></span>
|
||||
<span style="color: #333333"><</span>link rel<span style="color: #333333">=</span><span style="background-color: #fff0f0">"stylesheet"</span> href<span style="color: #333333">=</span><span style="background-color: #fff0f0">"assets/css/plugins/slick.min.css"</span> <span style="color: #333333">/></span>
|
||||
<span style="color: #333333"><</span>link rel<span style="color: #333333">=</span><span style="background-color: #fff0f0">"stylesheet"</span> href<span style="color: #333333">=</span><span style="background-color: #fff0f0">"assets/css/plugins/bootstrap.css"</span> <span style="color: #333333">/></span>
|
||||
|
||||
<span style="color: #333333"><</span><span style="color: #FF0000; background-color: #FFAAAA">!</span><span style="color: #333333">--</span> Main Style <span style="color: #333333">--></span>
|
||||
<span style="color: #333333"><</span>link rel<span style="color: #333333">=</span><span style="background-color: #fff0f0">"stylesheet"</span> href<span style="color: #333333">=</span><span style="background-color: #fff0f0">"assets/css/style.css"</span> <span style="color: #333333">/></span>
|
||||
<span style="color: #333333"><</span>link rel<span style="color: #333333">=</span><span style="background-color: #fff0f0">"stylesheet"</span> href<span style="color: #333333">=</span><span style="background-color: #fff0f0">"assets/css/responsive.css"</span> <span style="color: #333333">/></span>
|
||||
|
||||
<span style="color: #333333"><</span><span style="color: #FF0000; background-color: #FFAAAA">!</span><span style="color: #333333">--</span> Background css <span style="color: #333333">--></span>
|
||||
<span style="color: #333333"><</span>link rel<span style="color: #333333">=</span><span style="background-color: #fff0f0">"stylesheet"</span> <span style="color: #007020">id</span><span style="color: #333333">=</span><span style="background-color: #fff0f0">"bg-swhicher-css"</span> href<span style="color: #333333">=</span><span style="background-color: #fff0f0">"assets/css/backgrounds/bg-4.css"</span><span style="color: #333333">></span>
|
||||
</pre></div>
|
||||
|
||||
|
||||
|
||||
<h4>Source File (JS)</h4>
|
||||
<!-- HTML generated using hilite.me --><div style="margin-bottom:20px; background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"> <span style="color: #333333"><</span><span style="color: #FF0000; background-color: #FFAAAA">!</span><span style="color: #333333">--</span> Vendor JS <span style="color: #333333">--></span>
|
||||
<span style="color: #333333"><</span>script src<span style="color: #333333">=</span><span style="background-color: #fff0f0">"assets/js/vendor/jquery-3.5.1.min.js"</span><span style="color: #333333">></</span>script<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>script src<span style="color: #333333">=</span><span style="background-color: #fff0f0">"assets/js/vendor/popper.min.js"</span><span style="color: #333333">></</span>script<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>script src<span style="color: #333333">=</span><span style="background-color: #fff0f0">"assets/js/vendor/bootstrap.min.js"</span><span style="color: #333333">></</span>script<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>script src<span style="color: #333333">=</span><span style="background-color: #fff0f0">"assets/js/vendor/jquery-migrate-3.3.0.min.js"</span><span style="color: #333333">></</span>script<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>script src<span style="color: #333333">=</span><span style="background-color: #fff0f0">"assets/js/vendor/modernizr-3.11.2.min.js"</span><span style="color: #333333">></</span>script<span style="color: #333333">></span>
|
||||
|
||||
<span style="color: #333333"><</span><span style="color: #FF0000; background-color: #FFAAAA">!</span><span style="color: #333333">--</span>Plugins JS<span style="color: #333333">--></span>
|
||||
<span style="color: #333333"><</span>script src<span style="color: #333333">=</span><span style="background-color: #fff0f0">"assets/js/plugins/swiper-bundle.min.js"</span><span style="color: #333333">></</span>script<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>script src<span style="color: #333333">=</span><span style="background-color: #fff0f0">"assets/js/plugins/countdownTimer.min.js"</span><span style="color: #333333">></</span>script<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>script src<span style="color: #333333">=</span><span style="background-color: #fff0f0">"assets/js/plugins/scrollup.js"</span><span style="color: #333333">></</span>script<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>script src<span style="color: #333333">=</span><span style="background-color: #fff0f0">"assets/js/plugins/jquery.zoom.min.js"</span><span style="color: #333333">></</span>script<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>script src<span style="color: #333333">=</span><span style="background-color: #fff0f0">"assets/js/plugins/slick.min.js"</span><span style="color: #333333">></</span>script<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>script src<span style="color: #333333">=</span><span style="background-color: #fff0f0">"assets/js/plugins/infiniteslidev2.js"</span><span style="color: #333333">></</span>script<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>script src<span style="color: #333333">=</span><span style="background-color: #fff0f0">"assets/js/vendor/jquery.magnific-popup.min.js"</span><span style="color: #333333">></</span>script<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>script src<span style="color: #333333">=</span><span style="background-color: #fff0f0">"assets/js/plugins/jquery.sticky-sidebar.js"</span><span style="color: #333333">></</span>script<span style="color: #333333">></span>
|
||||
|
||||
<span style="color: #333333"><</span><span style="color: #FF0000; background-color: #FFAAAA">!</span><span style="color: #333333">--</span> Google translate Js <span style="color: #333333">--></span>
|
||||
<span style="color: #333333"><</span>script src<span style="color: #333333">=</span><span style="background-color: #fff0f0">"assets/js/vendor/google-translate.js"</span><span style="color: #333333">></</span>script<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>script<span style="color: #333333">></span>
|
||||
function googleTranslateElementInit() {
|
||||
new google<span style="color: #333333">.</span>translate<span style="color: #333333">.</span>TranslateElement({ pageLanguage: <span style="background-color: #fff0f0">'en'</span> }, <span style="background-color: #fff0f0">'google_translate_element'</span>);
|
||||
}
|
||||
<span style="color: #333333"></</span>script<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span><span style="color: #FF0000; background-color: #FFAAAA">!</span><span style="color: #333333">--</span> Main Js <span style="color: #333333">--></span>
|
||||
<span style="color: #333333"><</span>script src<span style="color: #333333">=</span><span style="background-color: #fff0f0">"assets/js/vendor/index.js"</span><span style="color: #333333">></</span>script<span style="color: #333333">></span>
|
||||
<span style="color: #333333"><</span>script src<span style="color: #333333">=</span><span style="background-color: #fff0f0">"assets/js/main.js"</span><span style="color: #333333">></</span>script<span style="color: #333333">></span>
|
||||
</pre></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="col-12 page-section" id="d-customization">
|
||||
<h2 class="section-title">Other Home Pages Customization</h2>
|
||||
<p>If you want to use home page 2 (demo-2.html) </p>
|
||||
<p><b>HTML file name : demo-2.html</b></p>
|
||||
<p><b>SCSS file name : demo2.scss</b> ( in scss folder )</p>
|
||||
|
||||
<p>demo2.scss file includes :</p>
|
||||
<p>1) _helper.scss file in components folder</p>
|
||||
<p>2) _chatboat.scss file in components folder</p>
|
||||
<p>3) _header_demo_2.scss file in layout folder</p>
|
||||
<p>4) _footer_demo_2.scss file in layout folder</p>
|
||||
<p>5) _demo2.scss file in pages folder (includes responsive css)</p>
|
||||
<img class="inst-img" src="img/home2.png" alt="">
|
||||
|
||||
<p><b>CSS file name : demo2.css</b> ( in css folder ) (includes responsive css)</p>
|
||||
<p><b>JS file name : demo-2.js</b> ( in js folder )</p>
|
||||
|
||||
<p class="notes">Other demo (home) pages not include dark mode, full scree mode, color options, backgrounds option, Language translate plugin and rtl options.</p>
|
||||
</section>
|
||||
<section class="col-12 page-section" id="r-msg">
|
||||
<h2 class="section-title">Remove Popup ( Template Running Directlly )</h2>
|
||||
<p>It is only shows you are notified that you do not run the project directly. Because Here, we are using SVG icons, multiple colors, dark mode & other features to change into the theme without loading & it will affect missed or lost content. So here, Please try to run the theme using WAMP or XAMPP Server.</p>
|
||||
<p>Here is the link for How to install & Run Project On Wamp server : <a href="https://www.youtube.com/watch?v=TynOxl7DQ4Y" target="_blank"> Video Guide Link</a></p>
|
||||
<img class="inst-img" src="img/rem.png" alt="">
|
||||
|
||||
<h5><b>If you want to remove the popup</b></h5>
|
||||
<p><b>Step-1 : </b> Go to the JS folder and open main.js file</p>
|
||||
<p><b>Step-2 : </b> Find "ec-direct-run" id and Comment OR remove (setTimeout) function block and run it.</p>
|
||||
<img class="inst-img" src="img/rem-2.png" alt="">
|
||||
</section>
|
||||
<section class="col-12 page-section" id="c-hf">
|
||||
<h2 class="section-title"><b>How To Do a Change Header And Footer with Any <span>Home Page to Home Page</span>.</b></h2>
|
||||
|
||||
<h4>Use of one home page Header with any of HomePage.</h4>
|
||||
<p>For example if you want to use home page 2 (demo-2.html), But you wanted to use other home page Header EX : home page 1(index.php) Header.</p>
|
||||
<h5>Below are the steps that you need to follow & do the required change into HTML files</h5>
|
||||
<p><b>Step 1 :</b> Open HomePage file that you want to set & Copy the full Header Tag code & replace it, into the Page that you want to replace.</p><p> ( EX : Copy html header(header tag) code from index.php and replace it into demo-2.html )</p>
|
||||
<!-- <p><b>Step 2 :</b> Add this "responsive.css" CSS file path into your "head Tag" of demo-2.html. Make sure you have been given the complate located path of that file.</p> -->
|
||||
<!-- <div style="background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #333333"><</span>link rel<span style="color: #333333">=</span><span style="background-color: #fff0f0">"stylesheet"</span> href<span style="color: #333333">=</span><span style="background-color: #fff0f0">"assets/css/responsive.css"</span> <span style="color: #333333">/></span> -->
|
||||
<!-- </pre></div> -->
|
||||
|
||||
|
||||
|
||||
<h5>Do the required change into SCSS file</h5>
|
||||
<p><b>Step 2 :</b> Open demo2.scss file from "assets/scss" directory into editor.</p>
|
||||
<p><b>Step 3 :</b> Replace the code [ @import "layout/_header_demo_2"; ] with [ @import "layout/_header"; ] & Save it.</p>
|
||||
<p><b>Step 4 :</b> Do the compile SCSS file and generate the css file in css directory (demo2.css). Using the software ex: prepros(https://prepros.io/)</p>
|
||||
|
||||
|
||||
<h4><b>Use of one home page Footer with any of HomePage.</b></h4>
|
||||
<p>For example if you want to use home page 2 (demo-2.html), But you wanted to use other home page Footer EX : home page 1(index.php) Footer.</p>
|
||||
<h5>Below are the steps that you need to follow & do the required change into HTML files</h5>
|
||||
<p><b>Step 1 :</b> Open HomePage file that you want to set & Copy the full Footer Tag code & replace it, into the Page that you want to replace.</p><p> ( EX : Copy html Footer(Footer tag) code from index.php and replace it into demo-2.html )</p>
|
||||
<!-- <p><b>Step 2 :</b> Add this "responsive.css" CSS file path into your "head Tag" of demo-2.html. Make sure you have been given the complate located path of that file.</p> -->
|
||||
<!-- <div style="background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #333333"><</span>link rel<span style="color: #333333">=</span><span style="background-color: #fff0f0">"stylesheet"</span> href<span style="color: #333333">=</span><span style="background-color: #fff0f0">"assets/css/responsive.css"</span> <span style="color: #333333">/></span> -->
|
||||
<!-- </pre></div> -->
|
||||
|
||||
|
||||
|
||||
<h5>Do the required change into SCSS file</h5>
|
||||
<p><b>Step 2 :</b> Open demo2.scss file from "assets/scss" directory into editor.</p>
|
||||
<p><b>Step 3 :</b> Replace the code [ @import "layout/_footer_demo_2"; ] with [ @import "layout/_footer"; ] & Save it.</p>
|
||||
<p><b>Step 4 :</b> Do the compile SCSS file and generate the css file in css directory (demo2.css). Using the software ex: prepros(https://prepros.io/)</p>
|
||||
|
||||
|
||||
|
||||
<h2 class="section-title">How To Do a Change Header And Footer with Any <span>Home Page to Inner Page</span>.</h2>
|
||||
<h4>Use of home page 2 Header with any of inner pages.</h4>
|
||||
<p>For example if you want to use home page 2 (demo-2.html), And you can use home page 2 header in inner pages (ex about.html).</p>
|
||||
<h5>Below are the steps that you need to follow & do the required change into HTML files</h5>
|
||||
<p><b>Step 1 :</b> Open HomePage 2 file that you want to set & Copy the full Header Tag code & replace it, into the Page that you want to replace.</p><p> ( EX : Copy html header(header tag) code from demo-2.html and replace it into about.html )</p>
|
||||
<p><b>Step 2 :</b> Add this "demo2.css" CSS file path into "head Tag" of about.html(all inner page). Make sure you have been given the complate located path of that file.</p>
|
||||
<div style="background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #333333"><</span>link rel<span style="color: #333333">=</span><span style="background-color: #fff0f0">"stylesheet"</span> href<span style="color: #333333">=</span><span style="background-color: #fff0f0">"assets/css/demo2.css"</span> <span style="color: #333333">/></span>
|
||||
</pre></div>
|
||||
|
||||
|
||||
|
||||
<h5>Do the required change into SCSS file</h5>
|
||||
<p><b>Step 3 :</b> Open style.scss file from "assets/scss" directory into editor.</p>
|
||||
<p><b>Step 4 :</b> Replace the code [ @import "layout/_header"; ] with [ @import "layout/_header_demo_2"; ] & Save it.</p>
|
||||
<p><b>Step 5 :</b> Do the compile SCSS file and generate the css file in css directory (style.css). Using the software ex: prepros(https://prepros.io/)</p>
|
||||
|
||||
<h4><b>Use of home page 2 Footer with any of inner pages.</b></h4>
|
||||
<p>For example if you want to use home page 2 (demo-2.html), And you can use home page 2 Footer in inner pages (ex about.html).</p>
|
||||
<h5>Below are the steps that you need to follow & do the required change into HTML files</h5>
|
||||
<p><b>Step 1 :</b> Open HomePage 2 file that you want to set & Copy the full Footer Tag code & replace it, into the Page that you want to replace.</p><p> ( EX : Copy html Footer(Footer tag) code from demo-2.html and replace it into about.html )</p>
|
||||
<p><b>Step 2 :</b> Add this "demo2.css" CSS file path into "head Tag" of about.html(all inner page). Make sure you have been given the complate located path of that file.</p>
|
||||
<div style="background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #333333"><</span>link rel<span style="color: #333333">=</span><span style="background-color: #fff0f0">"stylesheet"</span> href<span style="color: #333333">=</span><span style="background-color: #fff0f0">"assets/css/demo2.css"</span> <span style="color: #333333">/></span>
|
||||
</pre></div>
|
||||
|
||||
|
||||
|
||||
<h5>Do the required change into SCSS file</h5>
|
||||
<p><b>Step 3 :</b> Open style.scss file from "assets/scss" directory into editor.</p>
|
||||
<p><b>Step 4 :</b> Replace the code [ @import "layout/_footer"; ] with [ @import "layout/_footer_demo_2"; ] & Save it.</p>
|
||||
<p><b>Step 5 :</b> Do the compile SCSS file and generate the css file in css directory (style.css). Using the software ex: prepros(https://prepros.io/)</p>
|
||||
|
||||
|
||||
</section>
|
||||
<section class="col-12 page-section" id="resource">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div>
|
||||
<h2 class="section-title">Free Resources</h2>
|
||||
<ul>
|
||||
<li>Google Fonts</li>
|
||||
<li>Font Awesome Icons</li>
|
||||
<li>Owl Carousel</li>
|
||||
<li>Slick Carousel</li>
|
||||
<li>Animate</li>
|
||||
<li>Magnific-popup</li>
|
||||
<li>Swiper-bundle</li>
|
||||
<li>Infiniteslidev2 (Instagram infinite slide)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="col-12 page-section height-100" id="thank">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="thank">
|
||||
<h2 class="section-title">Thank You</h2>
|
||||
<p>Thank you again for download 'ekka', enjoy it and give us your valuable <a targe="_blank" href="https://themeforest.net/item/ekka-ecommerce-html-template/reviews/34126217"> Review & Rating Here</a>.</p>
|
||||
<img src="img/star.png" alt="shapes"></img>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- theme script -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
|
||||
<script src="js/jquery.sticky-sidebar.js"></script>
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,750 @@
|
|||
(function (global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
|
||||
typeof define === 'function' && define.amd ? define(factory) :
|
||||
(global.StickySidebar = factory());
|
||||
}(this, (function () { 'use strict';
|
||||
|
||||
var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
|
||||
|
||||
|
||||
|
||||
function unwrapExports (x) {
|
||||
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
|
||||
}
|
||||
|
||||
function createCommonjsModule(fn, module) {
|
||||
return module = { exports: {} }, fn(module, module.exports), module.exports;
|
||||
}
|
||||
|
||||
var stickySidebar = createCommonjsModule(function (module, exports) {
|
||||
(function (global, factory) {
|
||||
if (typeof undefined === "function" && undefined.amd) {
|
||||
undefined(['exports'], factory);
|
||||
} else {
|
||||
factory(exports);
|
||||
}
|
||||
})(commonjsGlobal, function (exports) {
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
|
||||
function _classCallCheck(instance, Constructor) {
|
||||
if (!(instance instanceof Constructor)) {
|
||||
throw new TypeError("Cannot call a class as a function");
|
||||
}
|
||||
}
|
||||
|
||||
var _createClass = function () {
|
||||
function defineProperties(target, props) {
|
||||
for (var i = 0; i < props.length; i++) {
|
||||
var descriptor = props[i];
|
||||
descriptor.enumerable = descriptor.enumerable || false;
|
||||
descriptor.configurable = true;
|
||||
if ("value" in descriptor) descriptor.writable = true;
|
||||
Object.defineProperty(target, descriptor.key, descriptor);
|
||||
}
|
||||
}
|
||||
|
||||
return function (Constructor, protoProps, staticProps) {
|
||||
if (protoProps) defineProperties(Constructor.prototype, protoProps);
|
||||
if (staticProps) defineProperties(Constructor, staticProps);
|
||||
return Constructor;
|
||||
};
|
||||
}();
|
||||
|
||||
/**
|
||||
* Sticky Sidebar JavaScript Plugin.
|
||||
* @version 3.3.4
|
||||
* @author Ahmed Bouhuolia <a.bouhuolia@gmail.com>
|
||||
* @license The MIT License (MIT)
|
||||
*/
|
||||
var StickySidebar = function () {
|
||||
|
||||
// ---------------------------------
|
||||
// # Define Constants
|
||||
// ---------------------------------
|
||||
//
|
||||
var EVENT_KEY = '.stickySidebar';
|
||||
var DEFAULTS = {
|
||||
/**
|
||||
* Additional top spacing of the element when it becomes sticky.
|
||||
* @type {Numeric|Function}
|
||||
*/
|
||||
topSpacing: 0,
|
||||
|
||||
/**
|
||||
* Additional bottom spacing of the element when it becomes sticky.
|
||||
* @type {Numeric|Function}
|
||||
*/
|
||||
bottomSpacing: 0,
|
||||
|
||||
/**
|
||||
* Container sidebar selector to know what the beginning and end of sticky element.
|
||||
* @type {String|False}
|
||||
*/
|
||||
containerSelector: false,
|
||||
|
||||
/**
|
||||
* Inner wrapper selector.
|
||||
* @type {String}
|
||||
*/
|
||||
innerWrapperSelector: '.inner-wrapper-sticky',
|
||||
|
||||
/**
|
||||
* The name of CSS class to apply to elements when they have become stuck.
|
||||
* @type {String|False}
|
||||
*/
|
||||
stickyClass: 'is-affixed',
|
||||
|
||||
/**
|
||||
* Detect when sidebar and its container change height so re-calculate their dimensions.
|
||||
* @type {Boolean}
|
||||
*/
|
||||
resizeSensor: true,
|
||||
|
||||
/**
|
||||
* The sidebar returns to its normal position if its width below this value.
|
||||
* @type {Numeric}
|
||||
*/
|
||||
minWidth: false
|
||||
};
|
||||
|
||||
// ---------------------------------
|
||||
// # Class Definition
|
||||
// ---------------------------------
|
||||
//
|
||||
/**
|
||||
* Sticky Sidebar Class.
|
||||
* @public
|
||||
*/
|
||||
|
||||
var StickySidebar = function () {
|
||||
|
||||
/**
|
||||
* Sticky Sidebar Constructor.
|
||||
* @constructor
|
||||
* @param {HTMLElement|String} sidebar - The sidebar element or sidebar selector.
|
||||
* @param {Object} options - The options of sticky sidebar.
|
||||
*/
|
||||
function StickySidebar(sidebar) {
|
||||
var _this = this;
|
||||
|
||||
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
||||
|
||||
_classCallCheck(this, StickySidebar);
|
||||
|
||||
this.options = StickySidebar.extend(DEFAULTS, options);
|
||||
|
||||
// Sidebar element query if there's no one, throw error.
|
||||
this.sidebar = 'string' === typeof sidebar ? document.querySelector(sidebar) : sidebar;
|
||||
if ('undefined' === typeof this.sidebar) throw new Error("There is no specific sidebar element.");
|
||||
|
||||
this.sidebarInner = false;
|
||||
this.container = this.sidebar.parentElement;
|
||||
|
||||
// Current Affix Type of sidebar element.
|
||||
this.affixedType = 'STATIC';
|
||||
this.direction = 'down';
|
||||
this.support = {
|
||||
transform: false,
|
||||
transform3d: false
|
||||
};
|
||||
|
||||
this._initialized = false;
|
||||
this._reStyle = false;
|
||||
this._breakpoint = false;
|
||||
|
||||
// Dimensions of sidebar, container and screen viewport.
|
||||
this.dimensions = {
|
||||
translateY: 0,
|
||||
maxTranslateY: 0,
|
||||
topSpacing: 0,
|
||||
lastTopSpacing: 0,
|
||||
bottomSpacing: 0,
|
||||
lastBottomSpacing: 0,
|
||||
sidebarHeight: 0,
|
||||
sidebarWidth: 0,
|
||||
containerTop: 0,
|
||||
containerHeight: 0,
|
||||
viewportHeight: 0,
|
||||
viewportTop: 0,
|
||||
lastViewportTop: 0
|
||||
};
|
||||
|
||||
// Bind event handlers for referencability.
|
||||
['handleEvent'].forEach(function (method) {
|
||||
_this[method] = _this[method].bind(_this);
|
||||
});
|
||||
|
||||
// Initialize sticky sidebar for first time.
|
||||
this.initialize();
|
||||
}
|
||||
|
||||
/**
|
||||
* Initializes the sticky sidebar by adding inner wrapper, define its container,
|
||||
* min-width breakpoint, calculating dimensions, adding helper classes and inline style.
|
||||
* @private
|
||||
*/
|
||||
|
||||
|
||||
_createClass(StickySidebar, [{
|
||||
key: 'initialize',
|
||||
value: function initialize() {
|
||||
var _this2 = this;
|
||||
|
||||
this._setSupportFeatures();
|
||||
|
||||
// Get sticky sidebar inner wrapper, if not found, will create one.
|
||||
if (this.options.innerWrapperSelector) {
|
||||
this.sidebarInner = this.sidebar.querySelector(this.options.innerWrapperSelector);
|
||||
|
||||
if (null === this.sidebarInner) this.sidebarInner = false;
|
||||
}
|
||||
|
||||
if (!this.sidebarInner) {
|
||||
var wrapper = document.createElement('div');
|
||||
wrapper.setAttribute('class', 'inner-wrapper-sticky');
|
||||
this.sidebar.appendChild(wrapper);
|
||||
|
||||
while (this.sidebar.firstChild != wrapper) {
|
||||
wrapper.appendChild(this.sidebar.firstChild);
|
||||
}this.sidebarInner = this.sidebar.querySelector('.inner-wrapper-sticky');
|
||||
}
|
||||
|
||||
// Container wrapper of the sidebar.
|
||||
if (this.options.containerSelector) {
|
||||
var containers = document.querySelectorAll(this.options.containerSelector);
|
||||
containers = Array.prototype.slice.call(containers);
|
||||
|
||||
containers.forEach(function (container, item) {
|
||||
if (!container.contains(_this2.sidebar)) return;
|
||||
_this2.container = container;
|
||||
});
|
||||
|
||||
if (!containers.length) throw new Error("The container does not contains on the sidebar.");
|
||||
}
|
||||
|
||||
// If top/bottom spacing is not function parse value to integer.
|
||||
if ('function' !== typeof this.options.topSpacing) this.options.topSpacing = parseInt(this.options.topSpacing) || 0;
|
||||
|
||||
if ('function' !== typeof this.options.bottomSpacing) this.options.bottomSpacing = parseInt(this.options.bottomSpacing) || 0;
|
||||
|
||||
// Breakdown sticky sidebar if screen width below `options.minWidth`.
|
||||
this._widthBreakpoint();
|
||||
|
||||
// Calculate dimensions of sidebar, container and viewport.
|
||||
this.calcDimensions();
|
||||
|
||||
// Affix sidebar in proper position.
|
||||
this.stickyPosition();
|
||||
|
||||
// Bind all events.
|
||||
this.bindEvents();
|
||||
|
||||
// Inform other properties the sticky sidebar is initialized.
|
||||
this._initialized = true;
|
||||
}
|
||||
}, {
|
||||
key: 'bindEvents',
|
||||
value: function bindEvents() {
|
||||
window.addEventListener('resize', this, { passive: true, capture: false });
|
||||
window.addEventListener('scroll', this, { passive: true, capture: false });
|
||||
|
||||
this.sidebar.addEventListener('update' + EVENT_KEY, this);
|
||||
|
||||
if (this.options.resizeSensor && 'undefined' !== typeof ResizeSensor) {
|
||||
new ResizeSensor(this.sidebarInner, this.handleEvent);
|
||||
new ResizeSensor(this.container, this.handleEvent);
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'handleEvent',
|
||||
value: function handleEvent(event) {
|
||||
this.updateSticky(event);
|
||||
}
|
||||
}, {
|
||||
key: 'calcDimensions',
|
||||
value: function calcDimensions() {
|
||||
if (this._breakpoint) return;
|
||||
var dims = this.dimensions;
|
||||
|
||||
// Container of sticky sidebar dimensions.
|
||||
dims.containerTop = StickySidebar.offsetRelative(this.container).top;
|
||||
dims.containerHeight = this.container.clientHeight;
|
||||
dims.containerBottom = dims.containerTop + dims.containerHeight;
|
||||
|
||||
// Sidebar dimensions.
|
||||
dims.sidebarHeight = this.sidebarInner.offsetHeight;
|
||||
dims.sidebarWidth = this.sidebarInner.offsetWidth;
|
||||
|
||||
// Screen viewport dimensions.
|
||||
dims.viewportHeight = window.innerHeight;
|
||||
|
||||
// Maximum sidebar translate Y.
|
||||
dims.maxTranslateY = dims.containerHeight - dims.sidebarHeight;
|
||||
|
||||
this._calcDimensionsWithScroll();
|
||||
}
|
||||
}, {
|
||||
key: '_calcDimensionsWithScroll',
|
||||
value: function _calcDimensionsWithScroll() {
|
||||
var dims = this.dimensions;
|
||||
|
||||
dims.sidebarLeft = StickySidebar.offsetRelative(this.sidebar).left;
|
||||
|
||||
dims.viewportTop = document.documentElement.scrollTop || document.body.scrollTop;
|
||||
dims.viewportBottom = dims.viewportTop + dims.viewportHeight;
|
||||
dims.viewportLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
|
||||
|
||||
dims.topSpacing = this.options.topSpacing;
|
||||
dims.bottomSpacing = this.options.bottomSpacing;
|
||||
|
||||
if ('function' === typeof dims.topSpacing) dims.topSpacing = parseInt(dims.topSpacing(this.sidebar)) || 0;
|
||||
|
||||
if ('function' === typeof dims.bottomSpacing) dims.bottomSpacing = parseInt(dims.bottomSpacing(this.sidebar)) || 0;
|
||||
|
||||
if ('VIEWPORT-TOP' === this.affixedType) {
|
||||
// Adjust translate Y in the case decrease top spacing value.
|
||||
if (dims.topSpacing < dims.lastTopSpacing) {
|
||||
dims.translateY += dims.lastTopSpacing - dims.topSpacing;
|
||||
this._reStyle = true;
|
||||
}
|
||||
} else if ('VIEWPORT-BOTTOM' === this.affixedType) {
|
||||
// Adjust translate Y in the case decrease bottom spacing value.
|
||||
if (dims.bottomSpacing < dims.lastBottomSpacing) {
|
||||
dims.translateY += dims.lastBottomSpacing - dims.bottomSpacing;
|
||||
this._reStyle = true;
|
||||
}
|
||||
}
|
||||
|
||||
dims.lastTopSpacing = dims.topSpacing;
|
||||
dims.lastBottomSpacing = dims.bottomSpacing;
|
||||
}
|
||||
}, {
|
||||
key: 'isSidebarFitsViewport',
|
||||
value: function isSidebarFitsViewport() {
|
||||
var dims = this.dimensions;
|
||||
var offset = this.scrollDirection === 'down' ? dims.lastBottomSpacing : dims.lastTopSpacing;
|
||||
return this.dimensions.sidebarHeight + offset < this.dimensions.viewportHeight;
|
||||
}
|
||||
}, {
|
||||
key: 'observeScrollDir',
|
||||
value: function observeScrollDir() {
|
||||
var dims = this.dimensions;
|
||||
if (dims.lastViewportTop === dims.viewportTop) return;
|
||||
|
||||
var furthest = 'down' === this.direction ? Math.min : Math.max;
|
||||
|
||||
// If the browser is scrolling not in the same direction.
|
||||
if (dims.viewportTop === furthest(dims.viewportTop, dims.lastViewportTop)) this.direction = 'down' === this.direction ? 'up' : 'down';
|
||||
}
|
||||
}, {
|
||||
key: 'getAffixType',
|
||||
value: function getAffixType() {
|
||||
this._calcDimensionsWithScroll();
|
||||
var dims = this.dimensions;
|
||||
var colliderTop = dims.viewportTop + dims.topSpacing;
|
||||
var affixType = this.affixedType;
|
||||
|
||||
if (colliderTop <= dims.containerTop || dims.containerHeight <= dims.sidebarHeight) {
|
||||
dims.translateY = 0;
|
||||
affixType = 'STATIC';
|
||||
} else {
|
||||
affixType = 'up' === this.direction ? this._getAffixTypeScrollingUp() : this._getAffixTypeScrollingDown();
|
||||
}
|
||||
|
||||
// Make sure the translate Y is not bigger than container height.
|
||||
dims.translateY = Math.max(0, dims.translateY);
|
||||
dims.translateY = Math.min(dims.containerHeight, dims.translateY);
|
||||
dims.translateY = Math.round(dims.translateY);
|
||||
|
||||
dims.lastViewportTop = dims.viewportTop;
|
||||
return affixType;
|
||||
}
|
||||
}, {
|
||||
key: '_getAffixTypeScrollingDown',
|
||||
value: function _getAffixTypeScrollingDown() {
|
||||
var dims = this.dimensions;
|
||||
var sidebarBottom = dims.sidebarHeight + dims.containerTop;
|
||||
var colliderTop = dims.viewportTop + dims.topSpacing;
|
||||
var colliderBottom = dims.viewportBottom - dims.bottomSpacing;
|
||||
var affixType = this.affixedType;
|
||||
|
||||
if (this.isSidebarFitsViewport()) {
|
||||
if (dims.sidebarHeight + colliderTop >= dims.containerBottom) {
|
||||
dims.translateY = dims.containerBottom - sidebarBottom;
|
||||
affixType = 'CONTAINER-BOTTOM';
|
||||
} else if (colliderTop >= dims.containerTop) {
|
||||
dims.translateY = colliderTop - dims.containerTop;
|
||||
affixType = 'VIEWPORT-TOP';
|
||||
}
|
||||
} else {
|
||||
if (dims.containerBottom <= colliderBottom) {
|
||||
dims.translateY = dims.containerBottom - sidebarBottom;
|
||||
affixType = 'CONTAINER-BOTTOM';
|
||||
} else if (sidebarBottom + dims.translateY <= colliderBottom) {
|
||||
dims.translateY = colliderBottom - sidebarBottom;
|
||||
affixType = 'VIEWPORT-BOTTOM';
|
||||
} else if (dims.containerTop + dims.translateY <= colliderTop && 0 !== dims.translateY && dims.maxTranslateY !== dims.translateY) {
|
||||
affixType = 'VIEWPORT-UNBOTTOM';
|
||||
}
|
||||
}
|
||||
|
||||
return affixType;
|
||||
}
|
||||
}, {
|
||||
key: '_getAffixTypeScrollingUp',
|
||||
value: function _getAffixTypeScrollingUp() {
|
||||
var dims = this.dimensions;
|
||||
var sidebarBottom = dims.sidebarHeight + dims.containerTop;
|
||||
var colliderTop = dims.viewportTop + dims.topSpacing;
|
||||
var colliderBottom = dims.viewportBottom - dims.bottomSpacing;
|
||||
var affixType = this.affixedType;
|
||||
|
||||
if (colliderTop <= dims.translateY + dims.containerTop) {
|
||||
dims.translateY = colliderTop - dims.containerTop;
|
||||
affixType = 'VIEWPORT-TOP';
|
||||
} else if (dims.containerBottom <= colliderBottom) {
|
||||
dims.translateY = dims.containerBottom - sidebarBottom;
|
||||
affixType = 'CONTAINER-BOTTOM';
|
||||
} else if (!this.isSidebarFitsViewport()) {
|
||||
|
||||
if (dims.containerTop <= colliderTop && 0 !== dims.translateY && dims.maxTranslateY !== dims.translateY) {
|
||||
affixType = 'VIEWPORT-UNBOTTOM';
|
||||
}
|
||||
}
|
||||
|
||||
return affixType;
|
||||
}
|
||||
}, {
|
||||
key: '_getStyle',
|
||||
value: function _getStyle(affixType) {
|
||||
if ('undefined' === typeof affixType) return;
|
||||
|
||||
var style = { inner: {}, outer: {} };
|
||||
var dims = this.dimensions;
|
||||
|
||||
switch (affixType) {
|
||||
case 'VIEWPORT-TOP':
|
||||
style.inner = { position: 'fixed', top: dims.topSpacing,
|
||||
left: dims.sidebarLeft - dims.viewportLeft, width: dims.sidebarWidth };
|
||||
break;
|
||||
case 'VIEWPORT-BOTTOM':
|
||||
style.inner = { position: 'fixed', top: 'auto', left: dims.sidebarLeft,
|
||||
bottom: dims.bottomSpacing, width: dims.sidebarWidth };
|
||||
break;
|
||||
case 'CONTAINER-BOTTOM':
|
||||
case 'VIEWPORT-UNBOTTOM':
|
||||
var translate = this._getTranslate(0, dims.translateY + 'px');
|
||||
|
||||
if (translate) style.inner = { transform: translate };else style.inner = { position: 'absolute', top: dims.translateY, width: dims.sidebarWidth };
|
||||
break;
|
||||
}
|
||||
|
||||
switch (affixType) {
|
||||
case 'VIEWPORT-TOP':
|
||||
case 'VIEWPORT-BOTTOM':
|
||||
case 'VIEWPORT-UNBOTTOM':
|
||||
case 'CONTAINER-BOTTOM':
|
||||
style.outer = { height: dims.sidebarHeight, position: 'relative' };
|
||||
break;
|
||||
}
|
||||
|
||||
style.outer = StickySidebar.extend({ height: '', position: '' }, style.outer);
|
||||
style.inner = StickySidebar.extend({ position: 'relative', top: '', left: '',
|
||||
bottom: '', width: '', transform: '' }, style.inner);
|
||||
|
||||
return style;
|
||||
}
|
||||
}, {
|
||||
key: 'stickyPosition',
|
||||
value: function stickyPosition(force) {
|
||||
if (this._breakpoint) return;
|
||||
|
||||
force = this._reStyle || force || false;
|
||||
|
||||
var offsetTop = this.options.topSpacing;
|
||||
var offsetBottom = this.options.bottomSpacing;
|
||||
|
||||
var affixType = this.getAffixType();
|
||||
var style = this._getStyle(affixType);
|
||||
|
||||
if ((this.affixedType != affixType || force) && affixType) {
|
||||
var affixEvent = 'affix.' + affixType.toLowerCase().replace('viewport-', '') + EVENT_KEY;
|
||||
StickySidebar.eventTrigger(this.sidebar, affixEvent);
|
||||
|
||||
if ('STATIC' === affixType) StickySidebar.removeClass(this.sidebar, this.options.stickyClass);else StickySidebar.addClass(this.sidebar, this.options.stickyClass);
|
||||
|
||||
for (var key in style.outer) {
|
||||
var unit = 'number' === typeof style.outer[key] ? 'px' : '';
|
||||
this.sidebar.style[key] = style.outer[key] + unit;
|
||||
}
|
||||
|
||||
for (var _key in style.inner) {
|
||||
var _unit = 'number' === typeof style.inner[_key] ? 'px' : '';
|
||||
this.sidebarInner.style[_key] = style.inner[_key] + _unit;
|
||||
}
|
||||
|
||||
var affixedEvent = 'affixed.' + affixType.toLowerCase().replace('viewport-', '') + EVENT_KEY;
|
||||
StickySidebar.eventTrigger(this.sidebar, affixedEvent);
|
||||
} else {
|
||||
if (this._initialized) this.sidebarInner.style.left = style.inner.left;
|
||||
}
|
||||
|
||||
this.affixedType = affixType;
|
||||
}
|
||||
}, {
|
||||
key: '_widthBreakpoint',
|
||||
value: function _widthBreakpoint() {
|
||||
|
||||
if (window.innerWidth <= this.options.minWidth) {
|
||||
this._breakpoint = true;
|
||||
this.affixedType = 'STATIC';
|
||||
|
||||
this.sidebar.removeAttribute('style');
|
||||
StickySidebar.removeClass(this.sidebar, this.options.stickyClass);
|
||||
this.sidebarInner.removeAttribute('style');
|
||||
} else {
|
||||
this._breakpoint = false;
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'updateSticky',
|
||||
value: function updateSticky() {
|
||||
var _this3 = this;
|
||||
|
||||
var event = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
||||
|
||||
if (this._running) return;
|
||||
this._running = true;
|
||||
|
||||
(function (eventType) {
|
||||
requestAnimationFrame(function () {
|
||||
switch (eventType) {
|
||||
// When browser is scrolling and re-calculate just dimensions
|
||||
// within scroll.
|
||||
case 'scroll':
|
||||
_this3._calcDimensionsWithScroll();
|
||||
_this3.observeScrollDir();
|
||||
_this3.stickyPosition();
|
||||
break;
|
||||
|
||||
// When browser is resizing or there's no event, observe width
|
||||
// breakpoint and re-calculate dimensions.
|
||||
case 'resize':
|
||||
default:
|
||||
_this3._widthBreakpoint();
|
||||
_this3.calcDimensions();
|
||||
_this3.stickyPosition(true);
|
||||
break;
|
||||
}
|
||||
_this3._running = false;
|
||||
});
|
||||
})(event.type);
|
||||
}
|
||||
}, {
|
||||
key: '_setSupportFeatures',
|
||||
value: function _setSupportFeatures() {
|
||||
var support = this.support;
|
||||
|
||||
support.transform = StickySidebar.supportTransform();
|
||||
support.transform3d = StickySidebar.supportTransform(true);
|
||||
}
|
||||
}, {
|
||||
key: '_getTranslate',
|
||||
value: function _getTranslate() {
|
||||
var y = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
|
||||
var x = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
||||
var z = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
|
||||
|
||||
if (this.support.transform3d) return 'translate3d(' + y + ', ' + x + ', ' + z + ')';else if (this.support.translate) return 'translate(' + y + ', ' + x + ')';else return false;
|
||||
}
|
||||
}, {
|
||||
key: 'destroy',
|
||||
value: function destroy() {
|
||||
window.removeEventListener('resize', this, { capture: false });
|
||||
window.removeEventListener('scroll', this, { capture: false });
|
||||
|
||||
this.sidebar.classList.remove(this.options.stickyClass);
|
||||
this.sidebar.style.minHeight = '';
|
||||
|
||||
this.sidebar.removeEventListener('update' + EVENT_KEY, this);
|
||||
|
||||
var styleReset = { inner: {}, outer: {} };
|
||||
|
||||
styleReset.inner = { position: '', top: '', left: '', bottom: '', width: '', transform: '' };
|
||||
styleReset.outer = { height: '', position: '' };
|
||||
|
||||
for (var key in styleReset.outer) {
|
||||
this.sidebar.style[key] = styleReset.outer[key];
|
||||
}for (var _key2 in styleReset.inner) {
|
||||
this.sidebarInner.style[_key2] = styleReset.inner[_key2];
|
||||
}if (this.options.resizeSensor && 'undefined' !== typeof ResizeSensor) {
|
||||
ResizeSensor.detach(this.sidebarInner, this.handleEvent);
|
||||
ResizeSensor.detach(this.container, this.handleEvent);
|
||||
}
|
||||
}
|
||||
}], [{
|
||||
key: 'supportTransform',
|
||||
value: function supportTransform(transform3d) {
|
||||
var result = false,
|
||||
property = transform3d ? 'perspective' : 'transform',
|
||||
upper = property.charAt(0).toUpperCase() + property.slice(1),
|
||||
prefixes = ['Webkit', 'Moz', 'O', 'ms'],
|
||||
support = document.createElement('support'),
|
||||
style = support.style;
|
||||
|
||||
(property + ' ' + prefixes.join(upper + ' ') + upper).split(' ').forEach(function (property, i) {
|
||||
if (style[property] !== undefined) {
|
||||
result = property;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
return result;
|
||||
}
|
||||
}, {
|
||||
key: 'eventTrigger',
|
||||
value: function eventTrigger(element, eventName, data) {
|
||||
try {
|
||||
var event = new CustomEvent(eventName, { detail: data });
|
||||
} catch (e) {
|
||||
var event = document.createEvent('CustomEvent');
|
||||
event.initCustomEvent(eventName, true, true, data);
|
||||
}
|
||||
element.dispatchEvent(event);
|
||||
}
|
||||
}, {
|
||||
key: 'extend',
|
||||
value: function extend(defaults, options) {
|
||||
var results = {};
|
||||
for (var key in defaults) {
|
||||
if ('undefined' !== typeof options[key]) results[key] = options[key];else results[key] = defaults[key];
|
||||
}
|
||||
return results;
|
||||
}
|
||||
}, {
|
||||
key: 'offsetRelative',
|
||||
value: function offsetRelative(element) {
|
||||
var result = { left: 0, top: 0 };
|
||||
|
||||
do {
|
||||
var offsetTop = element.offsetTop;
|
||||
var offsetLeft = element.offsetLeft;
|
||||
|
||||
if (!isNaN(offsetTop)) result.top += offsetTop;
|
||||
|
||||
if (!isNaN(offsetLeft)) result.left += offsetLeft;
|
||||
|
||||
element = 'BODY' === element.tagName ? element.parentElement : element.offsetParent;
|
||||
} while (element);
|
||||
return result;
|
||||
}
|
||||
}, {
|
||||
key: 'addClass',
|
||||
value: function addClass(element, className) {
|
||||
if (!StickySidebar.hasClass(element, className)) {
|
||||
if (element.classList) element.classList.add(className);else element.className += ' ' + className;
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'removeClass',
|
||||
value: function removeClass(element, className) {
|
||||
if (StickySidebar.hasClass(element, className)) {
|
||||
if (element.classList) element.classList.remove(className);else element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'hasClass',
|
||||
value: function hasClass(element, className) {
|
||||
if (element.classList) return element.classList.contains(className);else return new RegExp('(^| )' + className + '( |$)', 'gi').test(element.className);
|
||||
}
|
||||
}, {
|
||||
key: 'defaults',
|
||||
get: function () {
|
||||
return DEFAULTS;
|
||||
}
|
||||
}]);
|
||||
|
||||
return StickySidebar;
|
||||
}();
|
||||
|
||||
return StickySidebar;
|
||||
}();
|
||||
|
||||
exports.default = StickySidebar;
|
||||
|
||||
|
||||
// Global
|
||||
// -------------------------
|
||||
window.StickySidebar = StickySidebar;
|
||||
});
|
||||
});
|
||||
|
||||
unwrapExports(stickySidebar);
|
||||
|
||||
var jquery_stickySidebar = createCommonjsModule(function (module, exports) {
|
||||
(function (global, factory) {
|
||||
if (typeof undefined === "function" && undefined.amd) {
|
||||
undefined(['./sticky-sidebar'], factory);
|
||||
} else {
|
||||
factory(stickySidebar);
|
||||
}
|
||||
})(commonjsGlobal, function (_stickySidebar) {
|
||||
var _stickySidebar2 = _interopRequireDefault(_stickySidebar);
|
||||
|
||||
function _interopRequireDefault(obj) {
|
||||
return obj && obj.__esModule ? obj : {
|
||||
default: obj
|
||||
};
|
||||
}
|
||||
|
||||
(function () {
|
||||
if ('undefined' === typeof window) return;
|
||||
|
||||
var plugin = window.$ || window.jQuery || window.Zepto;
|
||||
var DATA_NAMESPACE = 'stickySidebar';
|
||||
|
||||
// Make sure the site has jquery or zepto plugin.
|
||||
if (plugin) {
|
||||
var _jQueryPlugin = function (config) {
|
||||
return this.each(function () {
|
||||
var $this = plugin(this),
|
||||
data = plugin(this).data(DATA_NAMESPACE);
|
||||
|
||||
if (!data) {
|
||||
data = new _stickySidebar2.default(this, typeof config == 'object' && config);
|
||||
$this.data(DATA_NAMESPACE, data);
|
||||
}
|
||||
|
||||
if ('string' === typeof config) {
|
||||
if (data[config] === undefined && ['destroy', 'updateSticky'].indexOf(config) === -1) throw new Error('No method named "' + config + '"');
|
||||
|
||||
data[config]();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
plugin.fn.stickySidebar = _jQueryPlugin;
|
||||
plugin.fn.stickySidebar.Constructor = _stickySidebar2.default;
|
||||
|
||||
var old = plugin.fn.stickySidebar;
|
||||
|
||||
/**
|
||||
* Sticky Sidebar No Conflict.
|
||||
*/
|
||||
plugin.fn.stickySidebar.noConflict = function () {
|
||||
plugin.fn.stickySidebar = old;
|
||||
return this;
|
||||
};
|
||||
}
|
||||
})();
|
||||
});
|
||||
});
|
||||
|
||||
var jquery_stickySidebar$1 = unwrapExports(jquery_stickySidebar);
|
||||
|
||||
return jquery_stickySidebar$1;
|
||||
|
||||
})));
|
||||
|
||||
//# sourceMappingURL=jquery.sticky-sidebar.js.map
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
$(function () {
|
||||
|
||||
'use strict';
|
||||
$(document).ready(function() {
|
||||
$('a[href*=#]').bind('click', function(e) {
|
||||
e.preventDefault(); // prevent hard jump, the default behavior
|
||||
|
||||
var target = $(this).attr("href"); // Set the target as variable
|
||||
|
||||
// perform animated scrolling by getting top-position of target-element and set it as scroll target
|
||||
$('html, body').stop().animate({
|
||||
scrollTop: $(target).offset().top
|
||||
}, 600, function() {
|
||||
location.hash = target; //attach the hash (#jumptarget) to the pageurl
|
||||
});
|
||||
|
||||
return false;
|
||||
});
|
||||
});
|
||||
|
||||
$(window).scroll(function() {
|
||||
var scrollDistance = $(window).scrollTop();
|
||||
|
||||
// Assign active class to nav links while scolling
|
||||
$('.page-section').each(function(i) {
|
||||
if ($(this).position().top <= scrollDistance) {
|
||||
$('.navigation a.active').removeClass('active');
|
||||
$('.navigation a').eq(i).addClass('active');
|
||||
}
|
||||
});
|
||||
}).scroll();
|
||||
$('#mainNav').stickySidebar({
|
||||
topSpacing: 30,
|
||||
bottomSpacing: 30
|
||||
});
|
||||
});
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,960 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="description" content="Ekka - Admin Dashboard HTML Template.">
|
||||
|
||||
<title>Ekka - Admin Dashboard HTML Template.</title>
|
||||
|
||||
<!-- FAVICON -->
|
||||
<link href="assets/img/favicon.png" rel="shortcut icon" />
|
||||
|
||||
<!-- GOOGLE FONTS -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700;800&family=Poppins:wght@300;400;500;600;700;800;900&family=Roboto:wght@400;500;700;900&display=swap" rel="stylesheet">
|
||||
|
||||
<link href="https://cdn.materialdesignicons.com/4.4.95/css/materialdesignicons.min.css" rel="stylesheet" />
|
||||
|
||||
<!-- PLUGINS CSS STYLE -->
|
||||
<link href="assets/plugins/simplebar/simplebar.css" rel="stylesheet" />
|
||||
|
||||
<link href='assets/plugins/flag-icons/css/flag-icon.min.css' rel='stylesheet'>
|
||||
|
||||
<!-- Ekka CSS -->
|
||||
<link id="ekka-css" href="assets/css/ekka.css" rel="stylesheet" />
|
||||
|
||||
</head>
|
||||
|
||||
<body class="ec-header-fixed ec-sidebar-fixed ec-sidebar-dark ec-header-light" id="body">
|
||||
<!-- WRAPPER -->
|
||||
<div class="wrapper">
|
||||
<!-- LEFT MAIN SIDEBAR -->
|
||||
<div class="ec-left-sidebar ec-bg-sidebar">
|
||||
<div id="sidebar" class="sidebar ec-sidebar-footer">
|
||||
|
||||
<div class="ec-brand">
|
||||
<a href="index.php" title="Ekka">
|
||||
<img class="ec-brand-icon" src="assets/img/logo/ec-site-logo.png" alt="" />
|
||||
<span class="ec-brand-name text-truncate">Ekka</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- begin sidebar scrollbar -->
|
||||
<div class="ec-navigation" data-simplebar>
|
||||
<!-- sidebar menu -->
|
||||
<ul class="nav sidebar-inner" id="sidebar-menu">
|
||||
<!-- Dashboard -->
|
||||
<li>
|
||||
<a class="sidenav-item-link" href="index.php">
|
||||
<i class="mdi mdi-view-dashboard-outline"></i>
|
||||
<span class="nav-text">Dashboard</span>
|
||||
</a>
|
||||
<hr>
|
||||
</li>
|
||||
|
||||
<!-- Vendors -->
|
||||
<li class="has-sub">
|
||||
<a class="sidenav-item-link" href="javascript:void(0)">
|
||||
<i class="mdi mdi-account-group-outline"></i>
|
||||
<span class="nav-text">Vendors</span> <b class="caret"></b>
|
||||
</a>
|
||||
|
||||
<ul class="collapse sub-menu" id="vendors" data-parent="#sidebar-menu">
|
||||
<li class="">
|
||||
<a class="sidenav-item-link" href="vendor-card.html">
|
||||
<span class="nav-text">Vendor Grid</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="">
|
||||
<a class="sidenav-item-link" href="vendor-list.html">
|
||||
<span class="nav-text">Vendor List</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a class="sidenav-item-link" href="vendor-profile.html">
|
||||
<span class="nav-text">Vendors Profile</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<!-- Users -->
|
||||
<li class="has-sub">
|
||||
<a class="sidenav-item-link" href="javascript:void(0)">
|
||||
<i class="mdi mdi-account-group"></i>
|
||||
<span class="nav-text">Users</span> <b class="caret"></b>
|
||||
</a>
|
||||
|
||||
<ul class="collapse sub-menu" id="users" data-parent="#sidebar-menu">
|
||||
<li>
|
||||
<a class="sidenav-item-link" href="user-card.html">
|
||||
<span class="nav-text">User Grid</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="">
|
||||
<a class="sidenav-item-link" href="user-list.html">
|
||||
<span class="nav-text">User List</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a class="sidenav-item-link" href="user-profile.html">
|
||||
<span class="nav-text">Users Profile</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<hr>
|
||||
</li>
|
||||
|
||||
<!-- Category -->
|
||||
<li class="has-sub">
|
||||
<a class="sidenav-item-link" href="javascript:void(0)">
|
||||
<i class="mdi mdi-dns-outline"></i>
|
||||
<span class="nav-text">Categories</span> <b class="caret"></b>
|
||||
</a>
|
||||
<ul class="collapse sub-menu" id="categorys" data-parent="#sidebar-menu">
|
||||
<li class="">
|
||||
<a class="sidenav-item-link" href="main-category.html">
|
||||
<span class="nav-text">Main Category</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a class="sidenav-item-link" href="sub-category.html">
|
||||
<span class="nav-text">Sub Category</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<!-- Products -->
|
||||
<li class="has-sub">
|
||||
<a class="sidenav-item-link" href="javascript:void(0)">
|
||||
<i class="mdi mdi-palette-advanced"></i>
|
||||
<span class="nav-text">Products</span> <b class="caret"></b>
|
||||
</a>
|
||||
|
||||
<ul class="collapse sub-menu" id="products" data-parent="#sidebar-menu">
|
||||
<li class="">
|
||||
<a class="sidenav-item-link" href="product-add.html">
|
||||
<span class="nav-text">Add Product</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a class="sidenav-item-link" href="product-list.html">
|
||||
<span class="nav-text">List Product</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a class="sidenav-item-link" href="product-grid.html">
|
||||
<span class="nav-text">Grid Product</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a class="sidenav-item-link" href="product-detail.html">
|
||||
<span class="nav-text">Product Detail</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<!-- Orders -->
|
||||
<li class="has-sub">
|
||||
<a class="sidenav-item-link" href="javascript:void(0)">
|
||||
<i class="mdi mdi-cart"></i>
|
||||
<span class="nav-text">Orders</span> <b class="caret"></b>
|
||||
</a>
|
||||
|
||||
<ul class="collapse sub-menu" id="orders" data-parent="#sidebar-menu">
|
||||
<li class="">
|
||||
<a class="sidenav-item-link" href="new-order.html">
|
||||
<span class="nav-text">New Order</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a class="sidenav-item-link" href="order-history.html">
|
||||
<span class="nav-text">Order History</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a class="sidenav-item-link" href="order-detail.html">
|
||||
<span class="nav-text">Order Detail</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a class="sidenav-item-link" href="invoice.html">
|
||||
<span class="nav-text">Invoice</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<!-- Reviews -->
|
||||
<li>
|
||||
<a class="sidenav-item-link" href="review-list.html">
|
||||
<i class="mdi mdi-star-half"></i>
|
||||
<span class="nav-text">Reviews</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<!-- Brands -->
|
||||
<li>
|
||||
<a class="sidenav-item-link" href="brand-list.html">
|
||||
<i class="mdi mdi-tag-faces"></i>
|
||||
<span class="nav-text">Brands</span>
|
||||
</a>
|
||||
<hr>
|
||||
</li>
|
||||
|
||||
<!-- Authentication -->
|
||||
<li class="has-sub ">
|
||||
<a class="sidenav-item-link" href="javascript:void(0)">
|
||||
<i class="mdi mdi-login"></i>
|
||||
<span class="nav-text">Authentication</span> <b class="caret"></b>
|
||||
</a>
|
||||
<ul class="collapse sub-menu" id="authentication" data-parent="#sidebar-menu">
|
||||
<li class="">
|
||||
<a href="sign-in.html">
|
||||
<span class="nav-text">Sign In</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="sign-up.html">
|
||||
<span class="nav-text">Sign Up</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<!-- Icons -->
|
||||
<li class="has-sub">
|
||||
<a class="sidenav-item-link" href="javascript:void(0)">
|
||||
<i class="mdi mdi-diamond-stone"></i>
|
||||
<span class="nav-text">Icons</span> <b class="caret"></b>
|
||||
</a>
|
||||
|
||||
<ul class="collapse sub-menu" id="icons" data-parent="#sidebar-menu">
|
||||
<li class="">
|
||||
<a class="sidenav-item-link" href="material-icon.html">
|
||||
<span class="nav-text">Material Icon</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a class="sidenav-item-link" href="font-awsome-icons.html">
|
||||
<span class="nav-text">Font Awsome Icon</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a class="sidenav-item-link" href="flag-icon.html">
|
||||
<span class="nav-text">Flag Icon</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<!-- Other Pages -->
|
||||
<li class="has-sub active expand">
|
||||
<a class="sidenav-item-link" href="javascript:void(0)">
|
||||
<i class="mdi mdi-image-filter-none"></i>
|
||||
<span class="nav-text">Other Pages</span> <b class="caret"></b>
|
||||
</a>
|
||||
<span class="collapse show">
|
||||
<ul class="sub-menu" id="otherpages" data-parent="#sidebar-menu">
|
||||
<li class="has-sub active">
|
||||
<a href="404.html">404 Page</a>
|
||||
</li>
|
||||
</ul>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PAGE WRAPPER -->
|
||||
<div class="ec-page-wrapper">
|
||||
|
||||
<!-- Header -->
|
||||
<header class="ec-main-header" id="header">
|
||||
<nav class="navbar navbar-static-top navbar-expand-lg">
|
||||
<!-- Sidebar toggle button -->
|
||||
<button id="sidebar-toggler" class="sidebar-toggle"></button>
|
||||
<!-- search form -->
|
||||
<div class="search-form d-lg-inline-block">
|
||||
<div class="input-group">
|
||||
<input type="text" name="query" id="search-input" class="form-control"
|
||||
placeholder="search.." autofocus autocomplete="off" />
|
||||
<button type="button" name="search" id="search-btn" class="btn btn-flat">
|
||||
<i class="mdi mdi-magnify"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div id="search-results-container">
|
||||
<ul id="search-results"></ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- navbar right -->
|
||||
<div class="navbar-right">
|
||||
<ul class="nav navbar-nav">
|
||||
<!-- User Account -->
|
||||
<li class="dropdown user-menu">
|
||||
<button class="dropdown-toggle nav-link ec-drop" data-bs-toggle="dropdown"
|
||||
aria-expanded="false">
|
||||
<img src="assets/img/user/user.png" class="user-image" alt="User Image" />
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-right ec-dropdown-menu">
|
||||
<!-- User image -->
|
||||
<li class="dropdown-header">
|
||||
<img src="assets/img/user/user.png" class="img-circle" alt="User Image" />
|
||||
<div class="d-inline-block">
|
||||
John Deo <small class="pt-1">john.example@gmail.com</small>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<a href="user-profile.html">
|
||||
<i class="mdi mdi-account"></i> My Profile
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i class="mdi mdi-email"></i> Message
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#"> <i class="mdi mdi-diamond-stone"></i> Projects </a>
|
||||
</li>
|
||||
<li class="right-sidebar-in">
|
||||
<a href="javascript:0"> <i class="mdi mdi-settings-outline"></i> Setting </a>
|
||||
</li>
|
||||
<li class="dropdown-footer">
|
||||
<a href="index.php"> <i class="mdi mdi-logout"></i> Log Out </a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="dropdown notifications-menu custom-dropdown">
|
||||
<button class="dropdown-toggle notify-toggler custom-dropdown-toggler">
|
||||
<i class="mdi mdi-bell-outline"></i>
|
||||
</button>
|
||||
|
||||
<div class="card card-default dropdown-notify dropdown-menu-right mb-0">
|
||||
<div class="card-header card-header-border-bottom px-3">
|
||||
<h2>Notifications</h2>
|
||||
</div>
|
||||
|
||||
<div class="card-body px-0 py-0">
|
||||
<ul class="nav nav-tabs nav-style-border p-0 justify-content-between" id="myTab"
|
||||
role="tablist">
|
||||
<li class="nav-item mx-3 my-0 py-0">
|
||||
<a href="#" class="nav-link active pb-3" id="home2-tab"
|
||||
data-bs-toggle="tab" data-bs-target="#home2" role="tab"
|
||||
aria-controls="home2" aria-selected="true">All (10)</a>
|
||||
</li>
|
||||
|
||||
<li class="nav-item mx-3 my-0 py-0">
|
||||
<a href="#" class="nav-link pb-3" id="profile2-tab" data-bs-toggle="tab"
|
||||
data-bs-target="#profile2" role="tab" aria-controls="profile2"
|
||||
aria-selected="false">Msgs (5)</a>
|
||||
</li>
|
||||
|
||||
<li class="nav-item mx-3 my-0 py-0">
|
||||
<a href="#" class="nav-link pb-3" id="contact2-tab" data-bs-toggle="tab"
|
||||
data-bs-target="#contact2" role="tab" aria-controls="contact2"
|
||||
aria-selected="false">Others (5)</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="tab-content" id="myTabContent3">
|
||||
<div class="tab-pane fade show active" id="home2" role="tabpanel"
|
||||
aria-labelledby="home2-tab">
|
||||
<ul class="list-unstyled" data-simplebar style="height: 360px">
|
||||
<li>
|
||||
<a href="javscript:void(0)"
|
||||
class="media media-message media-notification">
|
||||
<div class="position-relative mr-3">
|
||||
<img class="rounded-circle" src="assets/img/user/u2.jpg"
|
||||
alt="Image">
|
||||
<span class="status away"></span>
|
||||
</div>
|
||||
<div class="media-body d-flex justify-content-between">
|
||||
<div class="message-contents">
|
||||
<h4 class="title">Nitin</h4>
|
||||
<p class="last-msg">Lorem ipsum dolor sit, amet
|
||||
consectetur adipisicing elit. Nam itaque
|
||||
doloremque odio, eligendi delectus vitae.</p>
|
||||
|
||||
<span
|
||||
class="font-size-12 font-weight-medium text-secondary">
|
||||
<i class="mdi mdi-clock-outline"></i> 30 min
|
||||
ago...
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="javscript:void(0)"
|
||||
class="media media-message media-notification media-active">
|
||||
<div class="position-relative mr-3">
|
||||
<img class="rounded-circle" src="assets/img/user/u1.jpg"
|
||||
alt="Image">
|
||||
<span class="status active"></span>
|
||||
</div>
|
||||
<div class="media-body d-flex justify-content-between">
|
||||
<div class="message-contents">
|
||||
<h4 class="title">Lovina</h4>
|
||||
<p class="last-msg">Donec mattis augue a nisl
|
||||
consequat, nec imperdiet ex rutrum. Fusce et
|
||||
vehicula enim. Sed in enim eu odio vehic.</p>
|
||||
|
||||
<span
|
||||
class="font-size-12 font-weight-medium text-white">
|
||||
<i class="mdi mdi-clock-outline"></i> Just
|
||||
now...
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="javscript:void(0)"
|
||||
class="media media-message media-notification">
|
||||
<div class="position-relative mr-3">
|
||||
<img class="rounded-circle" src="assets/img/user/u5.jpg"
|
||||
alt="Image">
|
||||
<span class="status away"></span>
|
||||
</div>
|
||||
<div class="media-body d-flex justify-content-between">
|
||||
<div class="message-contents">
|
||||
<h4 class="title">Crinali</h4>
|
||||
<p class="last-msg">Lorem ipsum dolor sit, amet
|
||||
consectetur adipisicing elit. Nam itaque
|
||||
doloremque odio, eligendi delectus vitae.</p>
|
||||
|
||||
<span
|
||||
class="font-size-12 font-weight-medium text-secondary">
|
||||
<i class="mdi mdi-clock-outline"></i> 1 hrs
|
||||
ago...
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="javscript:void(0)"
|
||||
class="media media-message media-notification event-active">
|
||||
|
||||
<div
|
||||
class="d-flex rounded-circle align-items-center justify-content-center mr-3 media-icon iconbox-45 bg-info text-white">
|
||||
<i class="mdi mdi-calendar-check font-size-20"></i>
|
||||
</div>
|
||||
|
||||
<div class="media-body d-flex justify-content-between">
|
||||
<div class="message-contents">
|
||||
<h4 class="title">Upcomming event added</h4>
|
||||
<p class="last-msg font-size-14">03/Jan/2020 (1pm -
|
||||
2pm)</p>
|
||||
|
||||
<span
|
||||
class="font-size-12 font-weight-medium text-secondary">
|
||||
<i class="mdi mdi-clock-outline"></i> 10 min
|
||||
ago...
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="javscript:void(0)"
|
||||
class="media media-message media-notification">
|
||||
|
||||
<div
|
||||
class="d-flex rounded-circle align-items-center justify-content-center mr-3 media-icon iconbox-45 bg-warning text-white">
|
||||
<i class="mdi mdi-chart-areaspline font-size-20"></i>
|
||||
</div>
|
||||
|
||||
<div class="media-body d-flex justify-content-between">
|
||||
<div class="message-contents">
|
||||
<h4 class="title">Yearly Sales report</h4>
|
||||
<p class="last-msg font-size-14">Lorem ipsum dolor
|
||||
sit, amet consectetur adipisicing elit. Nam
|
||||
itaque doloremque odio, eligendi delectus vitae.
|
||||
</p>
|
||||
|
||||
<span
|
||||
class="font-size-12 font-weight-medium text-secondary">
|
||||
<i class="mdi mdi-clock-outline"></i> 1 hrs
|
||||
ago...
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="javscript:void(0)"
|
||||
class="media media-message media-notification">
|
||||
|
||||
<div
|
||||
class="d-flex rounded-circle align-items-center justify-content-center mr-3 media-icon iconbox-45 bg-primary text-white">
|
||||
<i
|
||||
class="mdi mdi-account-multiple-check font-size-20"></i>
|
||||
</div>
|
||||
|
||||
<div class="media-body d-flex justify-content-between">
|
||||
<div class="message-contents">
|
||||
<h4 class="title">New request</h4>
|
||||
<p class="last-msg font-size-14">Add Dany Jones as
|
||||
your contact consequat nec imperdiet ex rutrum.
|
||||
Fusce et vehicula enim. Sed in enim.</p>
|
||||
|
||||
<span
|
||||
class="my-1 btn btn-sm btn-success">Accept</span>
|
||||
<span
|
||||
class="my-1 btn btn-sm btn-secondary">Delete</span>
|
||||
|
||||
<span
|
||||
class="font-size-12 font-weight-medium text-secondary d-block">
|
||||
<i class="mdi mdi-clock-outline"></i> 5 min
|
||||
ago...
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="javscript:void(0)"
|
||||
class="media media-message media-notification">
|
||||
|
||||
<div
|
||||
class="d-flex rounded-circle align-items-center justify-content-center mr-3 media-icon iconbox-45 bg-danger text-white">
|
||||
<i class="mdi mdi-server-network-off font-size-20"></i>
|
||||
</div>
|
||||
|
||||
<div class="media-body d-flex justify-content-between">
|
||||
<div class="message-contents">
|
||||
<h4 class="title">Server overloaded</h4>
|
||||
<p class="last-msg font-size-14">Donec mattis augue
|
||||
a nisl consequat, nec imperdiet ex rutrum. Fusce
|
||||
et vehicula enim. Sed in enim eu odio vehic.</p>
|
||||
|
||||
<span
|
||||
class="font-size-12 font-weight-medium text-secondary">
|
||||
<i class="mdi mdi-clock-outline"></i> 30 min
|
||||
ago...
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="javscript:void(0)"
|
||||
class="media media-message media-notification">
|
||||
|
||||
<div
|
||||
class="d-flex rounded-circle align-items-center justify-content-center mr-3 media-icon iconbox-45 bg-purple text-white">
|
||||
<i class="mdi mdi-playlist-check font-size-20"></i>
|
||||
</div>
|
||||
|
||||
<div class="media-body d-flex justify-content-between">
|
||||
<div class="message-contents">
|
||||
<h4 class="title">Task complete</h4>
|
||||
<p class="last-msg font-size-14">Nam ut nisi erat.
|
||||
Ut quis tortor varius, hendrerit arcu quis,
|
||||
congue nisl. In scelerisque, sem ut ve.</p>
|
||||
|
||||
<span
|
||||
class="font-size-12 font-weight-medium text-secondary">
|
||||
<i class="mdi mdi-clock-outline"></i> 2 hrs
|
||||
ago...
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="tab-pane fade" id="profile2" role="tabpanel"
|
||||
aria-labelledby="profile2-tab">
|
||||
<ul class="list-unstyled" data-simplebar style="height: 360px">
|
||||
<li>
|
||||
<a href="javscript:void(0)"
|
||||
class="media media-message media-notification">
|
||||
<div class="position-relative mr-3">
|
||||
<img class="rounded-circle" src="assets/img/user/u6.jpg"
|
||||
alt="Image">
|
||||
<span class="status away"></span>
|
||||
</div>
|
||||
<div class="media-body d-flex justify-content-between">
|
||||
<div class="message-contents">
|
||||
<h4 class="title">Hardiko</h4>
|
||||
<p class="last-msg">Donec mattis augue a nisl
|
||||
consequat, nec imperdiet ex rutrum. Fusce et
|
||||
vehicula enim. Sed in enim eu odio vehic.</p>
|
||||
|
||||
<span
|
||||
class="font-size-12 font-weight-medium text-secondary">
|
||||
<i class="mdi mdi-clock-outline"></i> 1 hrs
|
||||
ago...
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="javscript:void(0)"
|
||||
class="media media-message media-notification">
|
||||
<div class="position-relative mr-3">
|
||||
<img class="rounded-circle" src="assets/img/user/u7.jpg"
|
||||
alt="Image">
|
||||
<span class="status away"></span>
|
||||
</div>
|
||||
<div class="media-body d-flex justify-content-between">
|
||||
<div class="message-contents">
|
||||
<h4 class="title">Browin</h4>
|
||||
<p class="last-msg">Nam ut nisi erat. Ut quis tortor
|
||||
varius, hendrerit arcu quis, congue nisl. In
|
||||
scelerisque, sem ut ve.</p>
|
||||
|
||||
<span
|
||||
class="font-size-12 font-weight-medium text-secondary">
|
||||
<i class="mdi mdi-clock-outline"></i> 1 hrs
|
||||
ago...
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="javscript:void(0)"
|
||||
class="media media-message media-notification media-active">
|
||||
<div class="position-relative mr-3">
|
||||
<img class="rounded-circle" src="assets/img/user/u1.jpg"
|
||||
alt="Image">
|
||||
<span class="status active"></span>
|
||||
</div>
|
||||
<div class="media-body d-flex justify-content-between">
|
||||
<div class="message-contents">
|
||||
<h4 class="title">jenelia</h4>
|
||||
<p class="last-msg">Donec mattis augue a nisl
|
||||
consequat, nec imperdiet ex rutrum. Fusce et
|
||||
vehicula enim. Sed in enim eu odio vehic.</p>
|
||||
|
||||
<span
|
||||
class="font-size-12 font-weight-medium text-white">
|
||||
<i class="mdi mdi-clock-outline"></i> Just
|
||||
now...
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="javscript:void(0)"
|
||||
class="media media-message media-notification">
|
||||
<div class="position-relative mr-3">
|
||||
<img class="rounded-circle" src="assets/img/user/u2.jpg"
|
||||
alt="Image">
|
||||
<span class="status away"></span>
|
||||
</div>
|
||||
<div class="media-body d-flex justify-content-between">
|
||||
<div class="message-contents">
|
||||
<h4 class="title">Bhavlio</h4>
|
||||
<p class="last-msg">Lorem ipsum dolor sit, amet
|
||||
consectetur adipisicing elit. Nam itaque
|
||||
doloremque odio, eligendi delectus vitae.</p>
|
||||
|
||||
<span
|
||||
class="font-size-12 font-weight-medium text-secondary">
|
||||
<i class="mdi mdi-clock-outline"></i> 1 hrs
|
||||
ago...
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="javscript:void(0)"
|
||||
class="media media-message media-notification">
|
||||
<div class="position-relative mr-3">
|
||||
<img class="rounded-circle" src="assets/img/user/u5.jpg"
|
||||
alt="Image">
|
||||
<span class="status away"></span>
|
||||
</div>
|
||||
<div class="media-body d-flex justify-content-between">
|
||||
<div class="message-contents">
|
||||
<h4 class="title">Browini</h4>
|
||||
<p class="last-msg">Lorem ipsum dolor sit, amet
|
||||
consectetur adipisicing elit. Nam itaque
|
||||
doloremque odio, eligendi delectus vitae.</p>
|
||||
|
||||
<span
|
||||
class="font-size-12 font-weight-medium text-secondary">
|
||||
<i class="mdi mdi-clock-outline"></i> 1 hrs
|
||||
ago...
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="tab-pane fade" id="contact2" role="tabpanel"
|
||||
aria-labelledby="contact2-tab">
|
||||
<ul class="list-unstyled" data-simplebar style="height: 360px">
|
||||
<li>
|
||||
<a href="javscript:void(0)"
|
||||
class="media media-message media-notification event-active">
|
||||
|
||||
<div
|
||||
class="d-flex rounded-circle align-items-center justify-content-center mr-3 media-icon iconbox-45 bg-info text-white">
|
||||
<i class="mdi mdi-calendar-check font-size-20"></i>
|
||||
</div>
|
||||
|
||||
<div class="media-body d-flex justify-content-between">
|
||||
<div class="message-contents">
|
||||
<h4 class="title">Upcomming event added</h4>
|
||||
<p class="last-msg font-size-14">03/Jan/2020 (1pm -
|
||||
2pm)</p>
|
||||
|
||||
<span
|
||||
class="font-size-12 font-weight-medium text-secondary">
|
||||
<i class="mdi mdi-clock-outline"></i> 10 min
|
||||
ago...
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="javscript:void(0)"
|
||||
class="media media-message media-notification">
|
||||
|
||||
<div
|
||||
class="d-flex rounded-circle align-items-center justify-content-center mr-3 media-icon iconbox-45 bg-warning text-white">
|
||||
<i class="mdi mdi-chart-areaspline font-size-20"></i>
|
||||
</div>
|
||||
|
||||
<div class="media-body d-flex justify-content-between">
|
||||
<div class="message-contents">
|
||||
<h4 class="title">New Sales report</h4>
|
||||
<p class="last-msg font-size-14">Lorem ipsum dolor
|
||||
sit, amet consectetur adipisicing elit. Nam
|
||||
itaque doloremque odio, eligendi delectus vitae.
|
||||
</p>
|
||||
|
||||
<span
|
||||
class="font-size-12 font-weight-medium text-secondary">
|
||||
<i class="mdi mdi-clock-outline"></i> 1 hrs
|
||||
ago...
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="javscript:void(0)"
|
||||
class="media media-message media-notification">
|
||||
|
||||
<div
|
||||
class="d-flex rounded-circle align-items-center justify-content-center mr-3 media-icon iconbox-45 bg-primary text-white">
|
||||
<i
|
||||
class="mdi mdi-account-multiple-check font-size-20"></i>
|
||||
</div>
|
||||
|
||||
<div class="media-body d-flex justify-content-between">
|
||||
<div class="message-contents">
|
||||
<h4 class="title">New Request</h4>
|
||||
<p class="last-msg font-size-14">Add Dany Jones as
|
||||
your contact consequat nec imperdiet ex rutrum.
|
||||
Fusce et vehicula enim. Sed in enim.</p>
|
||||
|
||||
<span
|
||||
class="my-1 btn btn-sm btn-success">Accept</span>
|
||||
<span
|
||||
class="my-1 btn btn-sm btn-secondary">Delete</span>
|
||||
|
||||
<span
|
||||
class="font-size-12 font-weight-medium text-secondary d-block">
|
||||
<i class="mdi mdi-clock-outline"></i> 5 min
|
||||
ago...
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="javscript:void(0)"
|
||||
class="media media-message media-notification">
|
||||
|
||||
<div
|
||||
class="d-flex rounded-circle align-items-center justify-content-center mr-3 media-icon iconbox-45 bg-danger text-white">
|
||||
<i class="mdi mdi-server-network-off font-size-20"></i>
|
||||
</div>
|
||||
|
||||
<div class="media-body d-flex justify-content-between">
|
||||
<div class="message-contents">
|
||||
<h4 class="title">Server overloaded</h4>
|
||||
<p class="last-msg font-size-14">Donec mattis augue
|
||||
a nisl consequat, nec imperdiet ex rutrum. Fusce
|
||||
et vehicula enim. Sed in enim eu odio vehic.</p>
|
||||
|
||||
<span
|
||||
class="font-size-12 font-weight-medium text-secondary">
|
||||
<i class="mdi mdi-clock-outline"></i> 30 min
|
||||
ago...
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="javscript:void(0)"
|
||||
class="media media-message media-notification">
|
||||
|
||||
<div
|
||||
class="d-flex rounded-circle align-items-center justify-content-center mr-3 media-icon iconbox-45 bg-purple text-white">
|
||||
<i class="mdi mdi-playlist-check font-size-20"></i>
|
||||
</div>
|
||||
|
||||
<div class="media-body d-flex justify-content-between">
|
||||
<div class="message-contents">
|
||||
<h4 class="title">New Task complete</h4>
|
||||
<p class="last-msg font-size-14">Nam ut nisi erat.
|
||||
Ut quis tortor varius, hendrerit arcu quis,
|
||||
congue nisl. In scelerisque, sem ut ve.</p>
|
||||
|
||||
<span
|
||||
class="font-size-12 font-weight-medium text-secondary">
|
||||
<i class="mdi mdi-clock-outline"></i> 2 hrs
|
||||
ago...
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="dropdown-menu dropdown-menu-right d-none">
|
||||
<li class="dropdown-header">You have 5 notifications</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i class="mdi mdi-account-plus"></i> New user registered
|
||||
<span class=" font-size-12 d-inline-block float-right"><i
|
||||
class="mdi mdi-clock-outline"></i> 10 AM</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i class="mdi mdi-account-remove"></i> User deleted
|
||||
<span class=" font-size-12 d-inline-block float-right"><i
|
||||
class="mdi mdi-clock-outline"></i> 07 AM</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i class="mdi mdi-chart-areaspline"></i> Sales report is ready
|
||||
<span class=" font-size-12 d-inline-block float-right"><i
|
||||
class="mdi mdi-clock-outline"></i> 12 PM</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i class="mdi mdi-account-supervisor"></i> New client
|
||||
<span class=" font-size-12 d-inline-block float-right"><i
|
||||
class="mdi mdi-clock-outline"></i> 10 AM</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i class="mdi mdi-server-network-off"></i> Server overloaded
|
||||
<span class=" font-size-12 d-inline-block float-right"><i
|
||||
class="mdi mdi-clock-outline"></i> 05 AM</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-footer">
|
||||
<a class="text-center" href="#"> View All </a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="right-sidebar-in right-sidebar-2-menu">
|
||||
<i class="mdi mdi-settings-outline mdi-spin"></i>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<!-- CONTENT WRAPPER -->
|
||||
<div class="ec-content-wrapper">
|
||||
<div class="content">
|
||||
<div class="error-wrapper border bg-white px-5">
|
||||
<div class="row justify-content-center align-items-center text-center">
|
||||
<div class="col-xl-4">
|
||||
<h1 class="text-primary bold error-title">404</h1>
|
||||
<p class="pt-4 pb-5 error-subtitle">Looks like something went wrong.</p>
|
||||
<a href="index.php" class="btn btn-primary btn-pill">Back to Home</a>
|
||||
</div>
|
||||
|
||||
<div class="col-xl-6 pt-5 pt-xl-0 text-center">
|
||||
<img src="assets/img/lightenning.png" class="img-fluid" alt="Error Page Image">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- End Content -->
|
||||
</div> <!-- End Content Wrapper -->
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="footer mt-auto">
|
||||
<div class="copyright bg-white">
|
||||
<p>
|
||||
Copyright © <span id="ec-year"></span><a class="text-primary"
|
||||
href="https://themeforest.net/user/ashishmaraviya" target="_blank"> Ekka Admin
|
||||
Dashboard</a>. All Rights Reserved.
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</div> <!-- End Page Wrapper -->
|
||||
</div> <!-- End Wrapper -->
|
||||
|
||||
<!-- Common Javascript -->
|
||||
<script src="assets/plugins/jquery/jquery-3.5.1.min.js"></script>
|
||||
<script src="assets/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="assets/plugins/simplebar/simplebar.min.js"></script>
|
||||
<script src="assets/plugins/jquery-zoom/jquery.zoom.min.js"></script>
|
||||
<script src="assets/plugins/slick/slick.min.js"></script>
|
||||
|
||||
<!-- Option Switcher -->
|
||||
<script src="assets/plugins/options-sidebar/optionswitcher.js"></script>
|
||||
|
||||
<!-- Ekka Custom -->
|
||||
<script src="assets/js/ekka.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<?php
|
||||
include "../functions.php";
|
||||
session_start();
|
||||
// $_SESSION["company"] = $_POST["company"];
|
||||
// $_SESSION["firstname"] = $_POST["company"];
|
||||
// $_SESSION["phone"] = $_POST["phonenumber"];
|
||||
// if( $_SESSION["isVendor"] ){
|
||||
// $result = updateVendor($_SESSION["vendorId"],$_SESSION["phone"],$_SESSION["company"],$_SESSION["userId"],$_SESSION["token"]);
|
||||
// //echo $result;
|
||||
// } else {
|
||||
// $result = createVendor($_SESSION["email"],$_SESSION["phone"],$_SESSION["company"],$_SESSION["userId"],$_SESSION["token"]);
|
||||
// $_SESSION["customerId"] = $result["_id"];
|
||||
// }
|
||||
// header("location: /");
|
||||
// $companyName = $_POST['user_login'];
|
||||
|
||||
// $email = $_POST['user_email'];
|
||||
$companyname = $_POST['user_login'];
|
||||
$firstName = $_POST['first_name'];
|
||||
$lastName = $_POST['last_name'];
|
||||
$vendorDescription = $_POST['vendor_description'];
|
||||
$vendorStatus = $_POST['status'];
|
||||
$building = $_POST['address_1'];
|
||||
$street = $_POST['address_2'];
|
||||
$barangay = $_POST['barangay'];
|
||||
$city = $_POST['city'];
|
||||
$province = $_POST['province'];
|
||||
$country = $_POST['country'];
|
||||
$email = $_POST['user_email'];
|
||||
$phone = $_POST['phone'];
|
||||
$dateRegistered = $_POST['date_registered'];
|
||||
|
||||
|
||||
|
||||
|
||||
addVendor(
|
||||
$companyname,
|
||||
$firstName,
|
||||
$lastName,
|
||||
$vendorDescription,
|
||||
$vendorStatus,
|
||||
$building,
|
||||
$street,
|
||||
$barangay,
|
||||
$city,
|
||||
$province,
|
||||
$country,
|
||||
$email,
|
||||
$phone,
|
||||
$dateRegistered
|
||||
);
|
||||
header("location: vendor-card.php");
|
||||
?>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,688 @@
|
|||
.select2-container {
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
vertical-align: middle
|
||||
}
|
||||
|
||||
.select2-container .select2-selection--single {
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
height: 28px;
|
||||
user-select: none;
|
||||
-webkit-user-select: none
|
||||
}
|
||||
|
||||
.select2-container .select2-selection--single .select2-selection__rendered {
|
||||
display: block;
|
||||
padding-left: 8px;
|
||||
padding-right: 20px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap
|
||||
}
|
||||
|
||||
.select2-container .select2-selection--single .select2-selection__clear {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
font-size: 1em
|
||||
}
|
||||
|
||||
.select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered {
|
||||
padding-right: 8px;
|
||||
padding-left: 20px
|
||||
}
|
||||
|
||||
.select2-container .select2-selection--multiple {
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
min-height: 32px;
|
||||
user-select: none;
|
||||
-webkit-user-select: none
|
||||
}
|
||||
|
||||
.select2-container .select2-selection--multiple .select2-selection__rendered {
|
||||
display: inline;
|
||||
list-style: none;
|
||||
padding: 0
|
||||
}
|
||||
|
||||
.select2-container .select2-selection--multiple .select2-selection__clear {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
font-size: 1em
|
||||
}
|
||||
|
||||
.select2-container .select2-search--inline .select2-search__field {
|
||||
box-sizing: border-box;
|
||||
border: none;
|
||||
font-size: 100%;
|
||||
margin-top: 5px;
|
||||
margin-left: 5px;
|
||||
padding: 0;
|
||||
max-width: 100%;
|
||||
resize: none;
|
||||
height: 18px;
|
||||
vertical-align: bottom;
|
||||
font-family: sans-serif;
|
||||
overflow: hidden;
|
||||
word-break: keep-all
|
||||
}
|
||||
|
||||
.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button {
|
||||
-webkit-appearance: none
|
||||
}
|
||||
|
||||
.select2-dropdown {
|
||||
background-color: white;
|
||||
border: 1px solid #aaa;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: -100000px;
|
||||
width: 100%;
|
||||
z-index: 1051
|
||||
}
|
||||
|
||||
.select2-results {
|
||||
display: block
|
||||
}
|
||||
|
||||
.select2-results__options {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0
|
||||
}
|
||||
|
||||
.select2-results__option {
|
||||
padding: 6px;
|
||||
user-select: none;
|
||||
-webkit-user-select: none
|
||||
}
|
||||
|
||||
.select2-results__option--selectable {
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.select2-container--open .select2-dropdown {
|
||||
left: 0
|
||||
}
|
||||
|
||||
.select2-container--open .select2-dropdown--above {
|
||||
border-bottom: none;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0
|
||||
}
|
||||
|
||||
.select2-container--open .select2-dropdown--below {
|
||||
border-top: none;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0
|
||||
}
|
||||
|
||||
.select2-search--dropdown {
|
||||
display: block;
|
||||
padding: 4px
|
||||
}
|
||||
|
||||
.select2-search--dropdown .select2-search__field {
|
||||
padding: 4px;
|
||||
width: 100%;
|
||||
box-sizing: border-box
|
||||
}
|
||||
|
||||
.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button {
|
||||
-webkit-appearance: none
|
||||
}
|
||||
|
||||
.select2-search--dropdown.select2-search--hide {
|
||||
display: none
|
||||
}
|
||||
|
||||
.select2-close-mask {
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: block;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
min-height: 100%;
|
||||
min-width: 100%;
|
||||
height: auto;
|
||||
width: auto;
|
||||
opacity: 0;
|
||||
z-index: 99;
|
||||
background-color: #fff;
|
||||
filter: alpha(opacity=0)
|
||||
}
|
||||
|
||||
.select2-hidden-accessible {
|
||||
border: 0 !important;
|
||||
clip: rect(0 0 0 0) !important;
|
||||
-webkit-clip-path: inset(50%) !important;
|
||||
clip-path: inset(50%) !important;
|
||||
height: 1px !important;
|
||||
overflow: hidden !important;
|
||||
padding: 0 !important;
|
||||
position: absolute !important;
|
||||
width: 1px !important;
|
||||
white-space: nowrap !important
|
||||
}
|
||||
|
||||
.select2-container--default .select2-selection--single {
|
||||
background-color: #fff;
|
||||
border: 1px solid #aaa;
|
||||
border-radius: 4px
|
||||
}
|
||||
|
||||
.select2-container--default .select2-selection--single .select2-selection__rendered {
|
||||
color: #444;
|
||||
line-height: 28px
|
||||
}
|
||||
|
||||
.select2-container--default .select2-selection--single .select2-selection__clear {
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
font-weight: bold;
|
||||
height: 26px;
|
||||
margin-right: 20px;
|
||||
padding-right: 0px
|
||||
}
|
||||
|
||||
.select2-container--default .select2-selection--single .select2-selection__placeholder {
|
||||
color: #999
|
||||
}
|
||||
|
||||
.select2-container--default .select2-selection--single .select2-selection__arrow {
|
||||
height: 26px;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
right: 1px;
|
||||
width: 20px
|
||||
}
|
||||
|
||||
.select2-container--default .select2-selection--single .select2-selection__arrow b {
|
||||
border-color: #888 transparent transparent transparent;
|
||||
border-style: solid;
|
||||
border-width: 5px 4px 0 4px;
|
||||
height: 0;
|
||||
left: 50%;
|
||||
margin-left: -4px;
|
||||
margin-top: -2px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 0
|
||||
}
|
||||
|
||||
.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear {
|
||||
float: left
|
||||
}
|
||||
|
||||
.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow {
|
||||
left: 1px;
|
||||
right: auto
|
||||
}
|
||||
|
||||
.select2-container--default.select2-container--disabled .select2-selection--single {
|
||||
background-color: #eee;
|
||||
cursor: default
|
||||
}
|
||||
|
||||
.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear {
|
||||
display: none
|
||||
}
|
||||
|
||||
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
|
||||
border-color: transparent transparent #888 transparent;
|
||||
border-width: 0 4px 5px 4px
|
||||
}
|
||||
|
||||
.select2-container--default .select2-selection--multiple {
|
||||
background-color: white;
|
||||
border: 1px solid #aaa;
|
||||
border-radius: 4px;
|
||||
cursor: text;
|
||||
padding-bottom: 5px;
|
||||
padding-right: 5px;
|
||||
position: relative
|
||||
}
|
||||
|
||||
.select2-container--default .select2-selection--multiple.select2-selection--clearable {
|
||||
padding-right: 25px
|
||||
}
|
||||
|
||||
.select2-container--default .select2-selection--multiple .select2-selection__clear {
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
height: 20px;
|
||||
margin-right: 10px;
|
||||
margin-top: 5px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
padding: 1px
|
||||
}
|
||||
|
||||
.select2-container--default .select2-selection--multiple .select2-selection__choice {
|
||||
background-color: #e4e4e4;
|
||||
border: 1px solid #aaa;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
margin-top: 5px;
|
||||
padding: 0;
|
||||
padding-left: 20px;
|
||||
position: relative;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
vertical-align: bottom;
|
||||
white-space: nowrap
|
||||
}
|
||||
|
||||
.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
|
||||
cursor: default;
|
||||
padding-left: 2px;
|
||||
padding-right: 5px
|
||||
}
|
||||
|
||||
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
border-right: 1px solid #aaa;
|
||||
border-top-left-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
font-size: 1em;
|
||||
font-weight: bold;
|
||||
padding: 0 4px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0
|
||||
}
|
||||
|
||||
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,
|
||||
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus {
|
||||
background-color: #f1f1f1;
|
||||
color: #333;
|
||||
outline: none
|
||||
}
|
||||
|
||||
.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
|
||||
margin-left: 5px;
|
||||
margin-right: auto
|
||||
}
|
||||
|
||||
.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__display {
|
||||
padding-left: 5px;
|
||||
padding-right: 2px
|
||||
}
|
||||
|
||||
.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove {
|
||||
border-left: 1px solid #aaa;
|
||||
border-right: none;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-right-radius: 4px;
|
||||
border-bottom-right-radius: 4px
|
||||
}
|
||||
|
||||
.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__clear {
|
||||
float: left;
|
||||
margin-left: 10px;
|
||||
margin-right: auto
|
||||
}
|
||||
|
||||
.select2-container--default.select2-container--focus .select2-selection--multiple {
|
||||
border: solid black 1px;
|
||||
outline: 0
|
||||
}
|
||||
|
||||
.select2-container--default.select2-container--disabled .select2-selection--multiple {
|
||||
background-color: #eee;
|
||||
cursor: default
|
||||
}
|
||||
|
||||
.select2-container--default.select2-container--disabled .select2-selection__choice__remove {
|
||||
display: none
|
||||
}
|
||||
|
||||
.select2-container--default.select2-container--open.select2-container--above .select2-selection--single,
|
||||
.select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0
|
||||
}
|
||||
|
||||
.select2-container--default.select2-container--open.select2-container--below .select2-selection--single,
|
||||
.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0
|
||||
}
|
||||
|
||||
.select2-container--default .select2-search--dropdown .select2-search__field {
|
||||
border: 1px solid #aaa
|
||||
}
|
||||
|
||||
.select2-container--default .select2-search--inline .select2-search__field {
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: 0;
|
||||
box-shadow: none;
|
||||
-webkit-appearance: textfield
|
||||
}
|
||||
|
||||
.select2-container--default .select2-results>.select2-results__options {
|
||||
max-height: 200px;
|
||||
overflow-y: auto
|
||||
}
|
||||
|
||||
.select2-container--default .select2-results__option .select2-results__option {
|
||||
padding-left: 1em
|
||||
}
|
||||
|
||||
.select2-container--default .select2-results__option .select2-results__option .select2-results__group {
|
||||
padding-left: 0
|
||||
}
|
||||
|
||||
.select2-container--default .select2-results__option .select2-results__option .select2-results__option {
|
||||
margin-left: -1em;
|
||||
padding-left: 2em
|
||||
}
|
||||
|
||||
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
|
||||
margin-left: -2em;
|
||||
padding-left: 3em
|
||||
}
|
||||
|
||||
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
|
||||
margin-left: -3em;
|
||||
padding-left: 4em
|
||||
}
|
||||
|
||||
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
|
||||
margin-left: -4em;
|
||||
padding-left: 5em
|
||||
}
|
||||
|
||||
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
|
||||
margin-left: -5em;
|
||||
padding-left: 6em
|
||||
}
|
||||
|
||||
.select2-container--default .select2-results__option--group {
|
||||
padding: 0
|
||||
}
|
||||
|
||||
.select2-container--default .select2-results__option--disabled {
|
||||
color: #999
|
||||
}
|
||||
|
||||
.select2-container--default .select2-results__option--selected {
|
||||
background-color: #ddd
|
||||
}
|
||||
|
||||
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
|
||||
background-color: #5897fb;
|
||||
color: white
|
||||
}
|
||||
|
||||
.select2-container--default .select2-results__group {
|
||||
cursor: default;
|
||||
display: block;
|
||||
padding: 6px
|
||||
}
|
||||
|
||||
.select2-container--classic .select2-selection--single {
|
||||
background-color: #f7f7f7;
|
||||
border: 1px solid #aaa;
|
||||
border-radius: 4px;
|
||||
outline: 0;
|
||||
background-image: -webkit-linear-gradient(top, #fff 50%, #eee 100%);
|
||||
background-image: -o-linear-gradient(top, #fff 50%, #eee 100%);
|
||||
background-image: linear-gradient(to bottom, #fff 50%, #eee 100%);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0)
|
||||
}
|
||||
|
||||
.select2-container--classic .select2-selection--single:focus {
|
||||
border: 1px solid #5897fb
|
||||
}
|
||||
|
||||
.select2-container--classic .select2-selection--single .select2-selection__rendered {
|
||||
color: #444;
|
||||
line-height: 28px
|
||||
}
|
||||
|
||||
.select2-container--classic .select2-selection--single .select2-selection__clear {
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
font-weight: bold;
|
||||
height: 26px;
|
||||
margin-right: 20px
|
||||
}
|
||||
|
||||
.select2-container--classic .select2-selection--single .select2-selection__placeholder {
|
||||
color: #999
|
||||
}
|
||||
|
||||
.select2-container--classic .select2-selection--single .select2-selection__arrow {
|
||||
background-color: #ddd;
|
||||
border: none;
|
||||
border-left: 1px solid #aaa;
|
||||
border-top-right-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
height: 26px;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
right: 1px;
|
||||
width: 20px;
|
||||
background-image: -webkit-linear-gradient(top, #eee 50%, #ccc 100%);
|
||||
background-image: -o-linear-gradient(top, #eee 50%, #ccc 100%);
|
||||
background-image: linear-gradient(to bottom, #eee 50%, #ccc 100%);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFCCCCCC', GradientType=0)
|
||||
}
|
||||
|
||||
.select2-container--classic .select2-selection--single .select2-selection__arrow b {
|
||||
border-color: #888 transparent transparent transparent;
|
||||
border-style: solid;
|
||||
border-width: 5px 4px 0 4px;
|
||||
height: 0;
|
||||
left: 50%;
|
||||
margin-left: -4px;
|
||||
margin-top: -2px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 0
|
||||
}
|
||||
|
||||
.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__clear {
|
||||
float: left
|
||||
}
|
||||
|
||||
.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__arrow {
|
||||
border: none;
|
||||
border-right: 1px solid #aaa;
|
||||
border-radius: 0;
|
||||
border-top-left-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
left: 1px;
|
||||
right: auto
|
||||
}
|
||||
|
||||
.select2-container--classic.select2-container--open .select2-selection--single {
|
||||
border: 1px solid #5897fb
|
||||
}
|
||||
|
||||
.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow {
|
||||
background: transparent;
|
||||
border: none
|
||||
}
|
||||
|
||||
.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b {
|
||||
border-color: transparent transparent #888 transparent;
|
||||
border-width: 0 4px 5px 4px
|
||||
}
|
||||
|
||||
.select2-container--classic.select2-container--open.select2-container--above .select2-selection--single {
|
||||
border-top: none;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
background-image: -webkit-linear-gradient(top, #fff 0%, #eee 50%);
|
||||
background-image: -o-linear-gradient(top, #fff 0%, #eee 50%);
|
||||
background-image: linear-gradient(to bottom, #fff 0%, #eee 50%);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0)
|
||||
}
|
||||
|
||||
.select2-container--classic.select2-container--open.select2-container--below .select2-selection--single {
|
||||
border-bottom: none;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
background-image: -webkit-linear-gradient(top, #eee 50%, #fff 100%);
|
||||
background-image: -o-linear-gradient(top, #eee 50%, #fff 100%);
|
||||
background-image: linear-gradient(to bottom, #eee 50%, #fff 100%);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFFFFFFF', GradientType=0)
|
||||
}
|
||||
|
||||
.select2-container--classic .select2-selection--multiple {
|
||||
background-color: white;
|
||||
border: 1px solid #aaa;
|
||||
border-radius: 4px;
|
||||
cursor: text;
|
||||
outline: 0;
|
||||
padding-bottom: 5px;
|
||||
padding-right: 5px
|
||||
}
|
||||
|
||||
.select2-container--classic .select2-selection--multiple:focus {
|
||||
border: 1px solid #5897fb
|
||||
}
|
||||
|
||||
.select2-container--classic .select2-selection--multiple .select2-selection__clear {
|
||||
display: none
|
||||
}
|
||||
|
||||
.select2-container--classic .select2-selection--multiple .select2-selection__choice {
|
||||
background-color: #e4e4e4;
|
||||
border: 1px solid #aaa;
|
||||
border-radius: 4px;
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
margin-top: 5px;
|
||||
padding: 0
|
||||
}
|
||||
|
||||
.select2-container--classic .select2-selection--multiple .select2-selection__choice__display {
|
||||
cursor: default;
|
||||
padding-left: 2px;
|
||||
padding-right: 5px
|
||||
}
|
||||
|
||||
.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
border-top-left-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
color: #888;
|
||||
cursor: pointer;
|
||||
font-size: 1em;
|
||||
font-weight: bold;
|
||||
padding: 0 4px
|
||||
}
|
||||
|
||||
.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover {
|
||||
color: #555;
|
||||
outline: none
|
||||
}
|
||||
|
||||
.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
|
||||
margin-left: 5px;
|
||||
margin-right: auto
|
||||
}
|
||||
|
||||
.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__display {
|
||||
padding-left: 5px;
|
||||
padding-right: 2px
|
||||
}
|
||||
|
||||
.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-right-radius: 4px;
|
||||
border-bottom-right-radius: 4px
|
||||
}
|
||||
|
||||
.select2-container--classic.select2-container--open .select2-selection--multiple {
|
||||
border: 1px solid #5897fb
|
||||
}
|
||||
|
||||
.select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple {
|
||||
border-top: none;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0
|
||||
}
|
||||
|
||||
.select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple {
|
||||
border-bottom: none;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0
|
||||
}
|
||||
|
||||
.select2-container--classic .select2-search--dropdown .select2-search__field {
|
||||
border: 1px solid #aaa;
|
||||
outline: 0
|
||||
}
|
||||
|
||||
.select2-container--classic .select2-search--inline .select2-search__field {
|
||||
outline: 0;
|
||||
box-shadow: none
|
||||
}
|
||||
|
||||
.select2-container--classic .select2-dropdown {
|
||||
background-color: #fff;
|
||||
border: 1px solid transparent
|
||||
}
|
||||
|
||||
.select2-container--classic .select2-dropdown--above {
|
||||
border-bottom: none
|
||||
}
|
||||
|
||||
.select2-container--classic .select2-dropdown--below {
|
||||
border-top: none
|
||||
}
|
||||
|
||||
.select2-container--classic .select2-results>.select2-results__options {
|
||||
max-height: 200px;
|
||||
overflow-y: auto
|
||||
}
|
||||
|
||||
.select2-container--classic .select2-results__option--group {
|
||||
padding: 0
|
||||
}
|
||||
|
||||
.select2-container--classic .select2-results__option--disabled {
|
||||
color: grey
|
||||
}
|
||||
|
||||
.select2-container--classic .select2-results__option--highlighted.select2-results__option--selectable {
|
||||
background-color: #3875d7;
|
||||
color: #fff
|
||||
}
|
||||
|
||||
.select2-container--classic .select2-results__group {
|
||||
cursor: default;
|
||||
display: block;
|
||||
padding: 6px
|
||||
}
|
||||
|
||||
.select2-container--classic.select2-container--open .select2-dropdown {
|
||||
border-color: #5897fb
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32px" height="32px"><path d="M 23.90625 3.96875 C 22.859375 3.96875 21.8125 4.375 21 5.1875 L 5.1875 21 L 5.125 21.3125 L 4.03125 26.8125 L 3.71875 28.28125 L 5.1875 27.96875 L 10.6875 26.875 L 11 26.8125 L 26.8125 11 C 28.4375 9.375 28.4375 6.8125 26.8125 5.1875 C 26 4.375 24.953125 3.96875 23.90625 3.96875 Z M 23.90625 5.875 C 24.410156 5.875 24.917969 6.105469 25.40625 6.59375 C 26.378906 7.566406 26.378906 8.621094 25.40625 9.59375 L 24.6875 10.28125 L 21.71875 7.3125 L 22.40625 6.59375 C 22.894531 6.105469 23.402344 5.875 23.90625 5.875 Z M 20.3125 8.71875 L 23.28125 11.6875 L 11.1875 23.78125 C 10.53125 22.5 9.5 21.46875 8.21875 20.8125 Z M 6.9375 22.4375 C 8.136719 22.921875 9.078125 23.863281 9.5625 25.0625 L 6.28125 25.71875 Z"/></svg>
|
||||
|
After Width: | Height: | Size: 837 B |
Binary file not shown.
|
After Width: | Height: | Size: 109 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue