oBanana B2B - Elevate Your Business

Introduction

Item Name : oBanana B2B - Elevate Your Business
Item Version : 3.6
Author : ashishmaraviya
Copyright : 2023

First of all, thank you so much for purchasing this ekka 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.

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 HTML, CSS | SCSS & JS knowledge is required to customize this item. You may learn basics here and here .

Getting Started

Requirements

You will need the following sofwares to customize this template.

Code Editing Software (eg: Visual studio code, Dreamweaver, Sublime Text or Notepad++)
For SCSS build up (eg: koala, prepos, codekit etc...)
Web Browser for testing (eg: Google Chrome or Mozilla Firefox)

Note : Be careful while editing the item. If not edited properly, the design layout may break completely.

Include Files

HTML
CSS
SCSS
JS
IMAGES(Demo images only)
ICON(svg)
FONT

Files Structure :

Backgrounds - ( Background stylesheets )
Plugins - ( Plugin stylesheets )
Vendor - ( Vendor stylesheets )

fonts

ecicons - ( All svg icons )
fjalla - ( fjalla fonts )
montserrat - ( montserrat fonts )
poppins - ( poppins fonts )
oswald - ( oswald fonts )

images

banner
bg
blog-image
brand-image
cat-banner
category-image
common
email-template
favicon
icons
instragram-image
logo
main-slider-banner
menu-banner
offer-image
product-360
product-image
review-image
testimonial
user
vendor
whatsapp

plugins - ( Plugins js files )
vendor - ( Vendors js files )

scss

base - ( typography, font familys )
bootstrap - ( Bootstrap folder )
components - ( Component stylesheets )
layout - ( Layout stylesheets )
pages - ( Sub Pages stylesheets )
utilities - ( Mixins & variable stylesheets )

video

Local Server Installation

➣ There are the Four things to setup & run the theme.

1. Install & Start Xampp Server Click

2. How to Setup Theme Code Folder Click

3. Database Configuration Click (this theme have not use any database, because it's html template)

4. Run the theme into browser Click

Step-1 : ➣ Install & Start Xampp Server

➣ Download the letest version of Xampp & Install Xampp Server Click

➣ Click on Start button to start Apache & MySql into Xampp Server

➣ Now blow image show the running Xampp Server

Now Xammp Instalation process end up here and move to the next step below..

Step-2 : ➣ How to Setup Theme Code Folder

➣ Open unzip folder ekka - Ecommerce HTML Template and copy ekka-html folder as show below image

➣ Now open Xampp folder

➣ After that open htdocs folder

➣ Now paste already copied ekka-html folder into htdocs

Step-3 : ➣ Database Configuration

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.

Step-4 : ➣ Run the theme into browser

➣ Open Browser and run the Landing page to type located theme path : localhost/ekka-html/ as show below image

➣ Now you can take a look on any of the layout by choosing on top of the site menu.

Live Server Installation

➣ There are the Four things to setup & run the theme.

1. Hosting Account Click

2. How to Setup Theme Code Folder Click

3. Database Configuration Click (this theme have not use any database, because it's html template)

4. Run the theme into browser Click

Step-1 : ➣ Hosting Account

➣ You must have Hosting account. And if you don't have please purchase it before move ahed. Click

Note: I am just giving the example of Hosting account you can purchase any of hosting account that support PHP.

➣ Get Login into your hostinger account and open dashboard.

Now Hosting account end up here and move to the next step below..

Step-2 : ➣ How to Setup Theme Code Folder

➣ From Dashboard Click on File Manager as show below image

➣ Now upload ekka-html.zip folder into server

➣ After upload unzip this folder as shown below image

Now the Theme Code setup is finished here move to the next step below..

Step-3 : ➣ Database Configuration

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.

Step-4 : ➣ Run the theme into browser

➣ Open Browser and run the "Landing page" to type located theme path : yourdomain.com/ekka-html/ as show below image

➣ Now you can take a look on any of the layout by choosing on top of the site menu.

Colors Customization

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.

Background Customization

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.

Dark mode Customization

If you want to apply Dark mode (dark.css) then, you can add path like bellow image on every html files in head tag.

<link rel="stylesheet" href="assets/css/dark.css" class="dark">

RTL mode Customization

If you want to apply RTL mode (rtl.css) then, you can add path like bellow image on every html files in head tag.

<link rel="stylesheet" href="assets/css/rtl.css" class="rtl">

Whatsapp plugin Customization (Add custom number)

Customers can directly contact with you via whatsapp. You can replace whatsapp number and messages like bellow image.

Elements Customization (Add custom element)

Elemets Products ( elemets-products.html )

If you want use other product card design then copy code which you want design and paste it.

<!-- START single card -->
<div class="ec-product-ds">
	<div class="ec-product-image">
		<a href="#" class="image">
			<img class="pic-1" src="assets/images/product-image/pro_1/1_1.jpg" alt="" />
		</a>
		<span class="ec-product-discount-label">-33%</span>
		<ul class="links">
			<li><a href="#" data-tip="Add to Wishlist"><img src="assets/images/icons/wishlist.svg"
						class="svg_img header_svg pro_svg" alt="wishlist" /></a></li>
			<li><a href="#" data-tip="Compare"><img src="assets/images/icons/compare.svg"
						class="svg_img pro_svg" alt="compare" /></a></li>
			<li><a href="#" data-tip="Quick View"><img src="assets/images/icons/quickview.svg"
						class="svg_img pro_svg" alt="quick view" /></a></li>
		</ul>
	</div>
	<div class="ec-product-body">
		<ul class="ec-rating">
			<li class="ecicon eci-star fill"></li>
			<li class="ecicon eci-star fill"></li>
			<li class="ecicon eci-star fill"></li>
			<li class="ecicon eci-star fill"></li>
			<li class="ecicon eci-star"></li>
		</ul>
		<h3 class="ec-title"><a href="#">Men's Blazer</a></h3>
		<div class="ec-price"><span>$90.00</span> $66.00</div>
		<a class=" ec-add-to-cart" href="#">add to cart</a>
	</div>
</div>
<!--/END single card -->

Elemets Typography ( elemets-typography.html )

If you want use other title style then copy code which you want style and paste it.

<h1 class="ec-fw-bold ec-fc">HEADING H1</h1>

If you want use other list style then copy code which you want style and paste it.

<div class="col-lg-2 col-md-4 col-sm-6 col-6">
	<ul class="ec-disc">
		<li>Friday</li>
		<li>Monday</li>
		<li>Saturday</li>
		<li>Wednesday</li>
	</ul>
</div>

Elemets Title ( elemets-title.html )

If you want use other Title style then copy code which you want style and paste it.

<h2 class="ec-title-ds">
	<span>Title Style 1</span>
</h2>

Elemets Categories ( elemets-categories.html )

If you want use other Category style then copy code which you want style and paste it.

<div class="ec_cat_content">
	<div class="ec_cat_inner">
		<div class="ec-cat-image">
			<img src="assets/images/category-image/1.jpg" alt="slider category img" />
		</div>
		<div class="ec-cat-desc">
			<span class="ec-section-btn"><a href="#" class="btn-primary">Sofa chair</a></span>
		</div>
	</div>
</div>

Elemets Buttons ( elemets-buttons.html )

If you want use other Buttons style then copy code which you want style and paste it.

<div class="ec-btn-ds">
	<button class="btn">Default</button>
	<button class="btn btn-primary">Primary</button>
	<button class="btn btn-secondary">Secondary</button>
	<button class="btn btn-success">Success</button>
	<button class="btn btn-info">Info</button>
	<button class="btn btn-warning">Warning</button>
	<button class="btn btn-danger">Danger</button>
	<button class="btn btn-primary disabled">Disabled</button>
	<button class="btn btn-primary btn-link">Link</button>
	<button class="btn btn-primary btn-jittery">Click Me</button>
	<button class="btn btn-primary btn-jelly">Jelly</button>
	<button class="btn btn-primary btn-pulse">Pulse</button>
</div>

Elemets Tabs ( elemets-tabs.html )

If you want use other Tabs style then copy code which you want style and paste it.

<div class="ec-tab-wrapper ec-tab-wrapper-1">
	<div class="ec-single-pro-tab-wrapper">
		<div class="ec-single-pro-tab-nav">
			<ul class="nav nav-tabs">
				<li class="nav-item">
					<a class="nav-link active" data-bs-toggle="tab" data-bs-target="#ec-spt-nav-details"
						role="tablist">Detail</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" data-bs-toggle="tab" data-bs-target="#ec-spt-nav-info"
						role="tablist">More Information</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" data-bs-toggle="tab" data-bs-target="#ec-spt-nav-review"
						role="tablist">Reviews</a>
				</li>
			</ul>
		</div>
		<div class="tab-content  ec-single-pro-tab-content">
			<div id="ec-spt-nav-details" class="tab-pane fade show active">
				<div class="ec-single-pro-tab-desc">
					<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
						Ipsum has been the industry's standard dummy text ever since the 1500s, when an
						unknown printer took a galley of type and scrambled it to make a type specimen
						book. It has survived not only five centuries, but also the leap into electronic
						typesetting, remaining essentially unchanged.
					</p>
				</div>
			</div>
			<div id="ec-spt-nav-info" class="tab-pane fade">
				<div class="ec-single-pro-tab-moreinfo">
					<p>It is a long established fact that a reader will be distracted by the readable
						content of a page when looking at its layout. The point of using Lorem Ipsum is
						that it has a more-or-less normal distribution of letters, as opposed to using
						'Content here.</p>
				</div>
			</div>
			<div id="ec-spt-nav-review" class="tab-pane fade">
				<p>There are many variations of passages of Lorem Ipsum available, but the majority have
					suffered alteration in some form, by injected humour, or randomised words which
					don't look even slightly believable. If you are going to use a passage of Lorem
					Ipsum.</p>
			</div>
		</div>
	</div>
</div>

Elemets Accordions ( elemets-accordions.html )

If you want use other Accordions style then copy code which you want style and paste it.

<div id="ec-faq">
	<div class="col-sm-12 ec-faq-block">
		<h4 class="ec-faq-title">Lorem Ipsum is simply dummy text</h4>
		<div class="ec-faq-content">
			<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
				Ipsum has been the industry's standard dummy text ever since the 1500s, when an
				unknown printer took a galley of type and scrambled it to make a type specimen
				book. It has survived not only five centuries, but also the leap into electronic
				typesetting, remaining essentially unchanged. </p>
		</div>
	</div>
	<div class="col-sm-12 ec-faq-block">
		<h4 class="ec-faq-title">Lorem Ipsum is simply dummy text</h4>
		<div class="ec-faq-content">
			<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
				Ipsum has been the industry's standard dummy text ever since the 1500s, when an
				unknown printer took a galley of type and scrambled it to make a type specimen
				book. It has survived not only five centuries, but also the leap into electronic
				typesetting, remaining essentially unchanged. </p>
		</div>
	</div>
	<div class="col-sm-12 ec-faq-block">
		<h4 class="ec-faq-title">Lorem Ipsum is simply dummy text</h4>
		<div class="ec-faq-content">
			<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
				Ipsum has been the industry's standard dummy text ever since the 1500s, when an
				unknown printer took a galley of type and scrambled it to make a type specimen
				book. It has survived not only five centuries, but also the leap into electronic
				typesetting, remaining essentially unchanged. </p>
		</div>
	</div>
	<div class="col-sm-12 ec-faq-block">
		<h4 class="ec-faq-title">Lorem Ipsum is simply dummy text</h4>
		<div class="ec-faq-content">
			<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
				Ipsum has been the industry's standard dummy text ever since the 1500s, when an
				unknown printer took a galley of type and scrambled it to make a type specimen
				book. It has survived not only five centuries, but also the leap into electronic
				typesetting, remaining essentially unchanged. </p>
		</div>
	</div>
	<div class="col-sm-12 ec-faq-block">
		<h4 class="ec-faq-title">Lorem Ipsum is simply dummy text</h4>
		<div class="ec-faq-content">
			<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
				Ipsum has been the industry's standard dummy text ever since the 1500s, when an
				unknown printer took a galley of type and scrambled it to make a type specimen
				book. It has survived not only five centuries, but also the leap into electronic
				typesetting, remaining essentially unchanged. </p>
		</div>
	</div>
</div>

Elemets Blog ( elemets-blog.html )

If you want use other Blog style then copy code which you want style and paste it.

<div class="row margin-minus-t-15">
	<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
		<div class="ec-card-grid-space">
			<a class="ec-card media-1" href="#">
				<div class="ec-num">01</div>
				<h1>What is the lorem.</h1>
				<p>The syntax of a language is how it works. How to actually write it. Learn HTML syntax…
				</p>
				<div class="ec-date">7 jul 2021-2022</div>
				<div class="ec-tags">
					<div class="ec-tag">READ MORE</div>
				</div>
			</a>
		</div>
	</div>
	<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
		<div class="ec-card-grid-space">
			<a class="ec-card media-2" href="#">
				<div class="ec-num">02</div>
				<h1>What is the lorem.</h1>
				<p>The syntax of a language is how it works. How to actually write it. Learn HTML syntax…
				</p>
				<div class="ec-date">6 jul 2021-2022</div>
				<div class="ec-tags">
					<div class="ec-tag">READ MORE</div>
				</div>
			</a>
		</div>
	</div>
	<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 m-auto">
		<div class="ec-card-grid-space">
			<a class="ec-card media-3" href="#">
				<div class="ec-num">03</div>
				<h1>What is the lorem.</h1>
				<p>The syntax of a language is how it works. How to actually write it. Learn HTML syntax…
				</p>
				<div class="ec-date">5 jul 2021-2022</div>
				<div class="ec-tags">
					<div class="ec-tag">READ MORE</div>
				</div>
			</a>
		</div>
	</div>
</div>

Customization & Source Files

Fonts

First download fonts which you want. and then paste fonts file in font folder.
and Goto "scss > base > _typography", and change. after compile your code and run thml file.

Logo

If you want to change logo. Goto "assets/image/logo" folder and change logo png image.

<a href="index.php">
	<img src="assets/images/logo/logo.png" alt="Site Logo">
	<img class="dark-logo" src="assets/images/logo/dark-logo.png" alt="Site Logo" style="display: none;">
</a>

Menus

If you want to add menu and change menu name.

<li class="dropdown"><a href="javascript:void(0)">Home</a>
	<ul class="sub-menu">
		<li><a href="index.php">Fashion 1</a></li>
		<li><a href="demo-2.html">Fashion 2</a></li>
		<li><a href="demo-3.html">Furniture</a></li>
		<li><a href="demo-4.html">Mix products</a></li>
		<li><a href="demo-5.html">Electronic</a></li>
	</ul>
</li>

Brand icons

If you want to change brand icon.

<li class="ec-brand-item">
	<div class="ec-brand-img">
		<a href="#">
			<img alt="brand" title="brand" src="assets/images/brand-image/1.png" />
		</a>
	</div>
</li>

Footer Other Link URL.

If you want to change footer other link url.

<div class="ec-footer-widget">
	<h4 class="ec-footer-heading">Information</h4>
	<div class="ec-footer-links">
		<ul class="align-items-center">
			<li class="ec-footer-link"><a href="about-us.html">About us</a></li>
			<li class="ec-footer-link"><a href="faq.html">FAQ</a></li>
			<li class="ec-footer-link"><a href="track-order.html">Delivery Information</a></li>
			<li class="ec-footer-link"><a href="contact-us.html">Contact us</a></li>
		</ul>
	</div>
</div>

Footer Contact us info.

If you want to change footer Contact us info.

<div class="col-sm-12 col-lg-3 ec-footer-contact">
	<div class="ec-footer-widget">
		<div class="ec-footer-logo"><a href="#"><img src="assets/images/logo/footer-logo.png"
					alt=""><img class="dark-footer-logo" src="assets/images/logo/dark-logo.png"
					alt="Site Logo" style="display: none;" /></a></div>
		<h4 class="ec-footer-heading">Contact us</h4>
		<div class="ec-footer-links">
			<ul class="align-items-center">
				<li class="ec-footer-link">71 Pilgrim Avenue Chevy Chase,</li>
				<li class="ec-footer-link"><span>Call Us:</span><a href="tel:+440123456789">+44
						0123 456 789</a></li>
				<li class="ec-footer-link"><span>Email:</span><a
						href="mailto:example@ec-email.com">+example@ec-email.com</a></li>
			</ul>
		</div>
	</div>
</div>

Footer Social icon Link

If you want to change footer social icon link.

<!-- Footer social Start -->
<div class="col text-left footer-bottom-left">
	<div class="footer-bottom-social">
		<span class="social-text text-upper">Follow us on:</span>
		<ul class="mb-0">
			<li class="list-inline-item"><a href="#"><i class="ecicon eci-facebook"></i></a>
			</li>
			<li class="list-inline-item"><a href="#"><i class="ecicon eci-twitter"></i></a></li>
			<li class="list-inline-item"><a href="#"><i class="ecicon eci-instagram"></i></a>
			</li>
			<li class="list-inline-item"><a href="#"><i class="ecicon eci-linkedin"></i></a>
			</li>
		</ul>
	</div>
</div>

Source File (CSS)

    <!-- 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-swhicher-css" href="assets/css/backgrounds/bg-4.css">

Source File (JS)

    <!-- 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>

    <!-- Google translate Js -->
    <script src="assets/js/vendor/google-translate.js"></script>
    <script>
        function googleTranslateElementInit() {
            new google.translate.TranslateElement({ pageLanguage: 'en' }, 'google_translate_element');
        }
    </script>
    <!-- Main Js -->
    <script src="assets/js/vendor/index.js"></script>
    <script src="assets/js/main.js"></script>

Other Home Pages Customization

If you want to use home page 2 (demo-2.html)

HTML file name : demo-2.html

SCSS file name : demo2.scss ( in scss folder )

demo2.scss file includes :

1) _helper.scss file in components folder

2) _chatboat.scss file in components folder

3) _header_demo_2.scss file in layout folder

4) _footer_demo_2.scss file in layout folder

5) _demo2.scss file in pages folder (includes responsive css)

CSS file name : demo2.css ( in css folder ) (includes responsive css)

JS file name : demo-2.js ( in js folder )

Other demo (home) pages not include dark mode, full scree mode, color options, backgrounds option, Language translate plugin and rtl options.

Remove Popup ( Template Running Directlly )

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.

Here is the link for How to install & Run Project On Wamp server : Video Guide Link

If you want to remove the popup

Step-1 : Go to the JS folder and open main.js file

Step-2 : Find "ec-direct-run" id and Comment OR remove (setTimeout) function block and run it.

How To Do a Change Header And Footer with Any Home Page to Home Page.

Use of one home page Header with any of HomePage.

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.

Below are the steps that you need to follow & do the required change into HTML files

Step 1 : Open HomePage file that you want to set & Copy the full Header Tag code & replace it, into the Page that you want to replace.

( EX : Copy html header(header tag) code from index.php and replace it into demo-2.html )

Do the required change into SCSS file

Step 2 : Open demo2.scss file from "assets/scss" directory into editor.

Step 3 : Replace the code [ @import "layout/_header_demo_2"; ] with [ @import "layout/_header"; ] & Save it.

Step 4 : Do the compile SCSS file and generate the css file in css directory (demo2.css). Using the software ex: prepros(https://prepros.io/)

Use of one home page Footer with any of HomePage.

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.

Below are the steps that you need to follow & do the required change into HTML files

Step 1 : Open HomePage file that you want to set & Copy the full Footer Tag code & replace it, into the Page that you want to replace.

( EX : Copy html Footer(Footer tag) code from index.php and replace it into demo-2.html )

Do the required change into SCSS file

Step 2 : Open demo2.scss file from "assets/scss" directory into editor.

Step 3 : Replace the code [ @import "layout/_footer_demo_2"; ] with [ @import "layout/_footer"; ] & Save it.

Step 4 : Do the compile SCSS file and generate the css file in css directory (demo2.css). Using the software ex: prepros(https://prepros.io/)

How To Do a Change Header And Footer with Any Home Page to Inner Page.

Use of home page 2 Header with any of inner pages.

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).

Below are the steps that you need to follow & do the required change into HTML files

Step 1 : 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.

( EX : Copy html header(header tag) code from demo-2.html and replace it into about.html )

Step 2 : 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.

<link rel="stylesheet" href="assets/css/demo2.css" />

Do the required change into SCSS file

Step 3 : Open style.scss file from "assets/scss" directory into editor.

Step 4 : Replace the code [ @import "layout/_header"; ] with [ @import "layout/_header_demo_2"; ] & Save it.

Step 5 : Do the compile SCSS file and generate the css file in css directory (style.css). Using the software ex: prepros(https://prepros.io/)

Use of home page 2 Footer with any of inner pages.

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).

Below are the steps that you need to follow & do the required change into HTML files

Step 1 : 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.

( EX : Copy html Footer(Footer tag) code from demo-2.html and replace it into about.html )

Step 2 : 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.

<link rel="stylesheet" href="assets/css/demo2.css" />

Do the required change into SCSS file

Step 3 : Open style.scss file from "assets/scss" directory into editor.

Step 4 : Replace the code [ @import "layout/_footer"; ] with [ @import "layout/_footer_demo_2"; ] & Save it.

Step 5 : Do the compile SCSS file and generate the css file in css directory (style.css). Using the software ex: prepros(https://prepros.io/)

Free Resources

Google Fonts
Font Awesome Icons
Owl Carousel
Slick Carousel
Animate
Magnific-popup
Swiper-bundle
Infiniteslidev2 (Instagram infinite slide)

Thank You

Thank you again for download 'ekka', enjoy it and give us your valuable Review & Rating Here.