Multikart - Multi-purpose E-commerce Html Template

Classes

Add class with "home"

For Parallax Image - .parallax

contain-align - .text-start, .text-center, .text-end

contain-position - .p-start, .p-center, .p-end

Home slider

HTML

<section class="p-0">
<div class="slide-1 home-slider">
<div>
<div class="home text-center">
<img src="../assets/images/home-banner/1.jpg" alt="" class="bg-img blur-up lazyload">
<div class="container">
<div class="row">
<div class="col">
<div class="slider-contain">
<div>
<h4>welcome to fashion</h4>
<h1>men fashion</h1>
<a href="#" class="btn btn-solid">shop now</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="home text-center">
<img src="../assets/images/home-banner/2.jpg" alt="" class="bg-img blur-up lazyload">
<div class="container">
<div class="row">
<div class="col">
<div class="slider-contain">
<div>
<h4>welcome to fashion</h4>
<h1>women fashion</h1>
<a href="#" class="btn btn-solid">shop now</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

Animated slider

HTML
JS

<section class="p-0">
<div class="slider-animate home-slider">
<div>
<div class="home">
<img src="../assets/images/jewellery/home-slider/2.jpg" alt="" class="bg-img blur-up lazyload">
<div class="container">
<div class="row">
<div class="col">
<div class="slider-contain product-detail">
<div>
<h4 class="animated" data-animation-in="fadeInUp">moods of the earth</h4>
<h1 class="animated font-cormorant" data-animation-in="fadeInUp"
data-delay-in="0.3">trending products</h1>
<p class="animated d-lg-block d-none" data-delay-in="0.4"
data-animation-in="fadeInUp">
An ode to the Earth's artistry, watch how these marvels come alive with
diamonds, rubies, tanzanite, citrines, emeralds, rubellite, sapphires and
coloured gemstones set in exceptional designs.</p>
<a href="#" class="btn btn-solid animated" data-animation-in="fadeInUp"
data-delay-in="0.5">shop now</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="home">
<img src="../assets/images/jewellery/home-slider/1.jpg" alt="" class="bg-img blur-up lazyload">
<div class="container">
<div class="row">
<div class="col">
<div class="slider-contain product-detail">
<div>
<h4 class="animated" data-animation-in="fadeInUp">moods of the earth</h4>
<h1 class="animated font-cormorant" data-animation-in="fadeInUp"
data-delay-in="0.3">trending products</h1>
<p class="animated d-lg-block d-none" data-delay-in="0.4"
data-animation-in="fadeInUp">
An ode to the Earth's artistry, watch how these marvels come alive with
diamonds, rubies, tanzanite, citrines, emeralds, rubellite, sapphires and
coloured gemstones set in exceptional designs.</p>
<a href="#" class="btn btn-solid animated" data-animation-in="fadeInUp"
data-delay-in="0.5">shop now</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

<!-- required js for animation -->
<script src="../assets/js/slick-animation.min.js"></script>
 
 
<!-- add .slickAnimation -->
<script>
$('.slider-animate').slick({
autoplay: true,
speed: 800,
lazyLoad: 'progressive',
fade: true,
dots: false,
}).slickAnimation();


</script>

Banner style

HTML

<div class="container banner-slider">
<div class="row">
<div class="col-md-7"><a href="#"><img src="../assets/images/electronics/1.jpg"
class="img-fluid blur-up lazyload height-banner" alt=""></a></div>
<div class="col-md-5">
<div class="row home-banner">
<div class="col-12">
<a href="#"><img src="../assets/images/electronics/2.jpg" class="img-fluid blur-up lazyload"
alt=""></a>
</div>
<div class="col-12">
<a href="#"><img src="../assets/images/electronics/4.jpg" class="img-fluid blur-up lazyload"
alt=""></a>
</div>
</div>
</div>
</div>
</div>

thumbnail style

HTML

<section class="p-0 position-relative overflow-hidden">
<div class="home-slider">
<div class="product-slick-animated">
<div>
<div class="home">
<img src="../assets/images/medicine/home-slider/1.jpg" alt="" class="bg-img blur-up lazyload">
<div class="container">
<div class="row">
<div class="col">
<div class="slider-contain product-detail">
<div>
<h1 class="animated font-cormorant" data-animation-in="fadeInUp"
data-delay-in="0.2">Classic Ring</h1>
<p class="animated d-lg-block d-none" data-animation-in="fadeInUp"
data-delay-in="0.3">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</p>
<ul data-animation-in="fadeInUp" data-delay-in="0.4" class="color-variant">
<li class="bg-light0"></li>
<li class="bg-light1"></li>
<li class="bg-light2"></li>
</ul>
<h3 class="animated" data-animation-in="fadeInUp" data-delay-in="0.5">
<span>$32.96</span><del>$459.00</del>
</h3>
<a href="#" class="btn btn-solid animated" data-animation-in="fadeInUp"
data-delay-in="0.6">add to cart</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="home">
<img src="../assets/images/medicine/home-slider/2.jpg" alt="" class="bg-img blur-up lazyload">
<div class="container">
<div class="row">
<div class="col">
<div class="slider-contain product-detail">
<div>
<h1 class="animated font-cormorant" data-animation-in="fadeInUp"
data-delay-in="0.2">Pearl Necklace</h1>
<p class="animated d-lg-block d-none" data-animation-in="fadeInUp"
data-delay-in="0.3">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</p>
<ul data-animation-in="fadeInUp" data-delay-in="0.4" class="color-variant">
<li class="bg-light0"></li>
<li class="bg-light1"></li>
<li class="bg-light2"></li>
</ul>
<h3 class="animated" data-animation-in="fadeInUp" data-delay-in="0.5">
<span>$32.96</span><del>$459.00</del>
</h3>
<a href="#" class="btn btn-solid animated" data-animation-in="fadeInUp"
data-delay-in="0.6">add to cart</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="home">
<img src="../assets/images/medicine/home-slider/3.jpg" alt="" class="bg-img blur-up lazyload">
<div class="container">
<div class="row">
<div class="col">
<div class="slider-contain product-detail">
<div>
<h1 class="animated font-cormorant" data-animation-in="fadeInUp"
data-delay-in="0.2">Blossom Earrings</h1>
<p class="animated d-lg-block d-none" data-animation-in="fadeInUp"
data-delay-in="0.3">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</p>
<ul data-animation-in="fadeInUp" data-delay-in="0.4" class="color-variant">
<li class="bg-light0"></li>
<li class="bg-light1"></li>
<li class="bg-light2"></li>
</ul>
<h3 class="animated" data-animation-in="fadeInUp" data-delay-in="0.5">
<span>$32.96</span><del>$459.00</del>
</h3>
<a href="#" class="btn btn-solid animated" data-animation-in="fadeInUp"
data-delay-in="0.6">add to cart</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row thumbnail-porduct">
<div class="col-lg-3 d-lg-block d-none m-auto">
<div class="animated-nav">
<div><img src="../assets/images/medicine/thumbnail/1.jpg" alt=""
class="img-fluid blur-up lazyload"></div>
<div><img src="../assets/images/medicine/thumbnail/2.jpg" alt=""
class="img-fluid blur-up lazyload"></div>
<div><img src="../assets/images/medicine/thumbnail/3.jpg" alt=""
class="img-fluid blur-up lazyload"></div>
</div>
</div>
</div>
</div>
</section>

feature highlight animation

HTML
JS

<section class="p-0 bg-white">
<div class="home-slider">
<div>
<div class="home" id="img-bg">
<img src="../assets/images/fragrance/1.jpg" alt="" class="bg-img blur-up lazyload">
<div class="container">
<div class="row">
<div class="col">
<div class="slider-contain product-detail">
<div>
<h1 class="animated font-courgette" data-animation-in="fadeInUp"
data-delay-in="0.2">Classic Ring</h1>
<p class="animated d-lg-block d-none" data-animation-in="fadeInUp"
data-delay-in="0.3">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</p>
<ul data-animation-in="fadeInUp" data-delay-in="0.4" class="color-variant">
<li class="bg-light0"></li>
<li class="bg-light1"></li>
<li class="bg-light2"></li>
</ul>
<h3 class="animated" data-animation-in="fadeInUp" data-delay-in="0.5">
<span>$32.96</span><del>$459.00</del>
</h3>
<a href="#" class="btn btn-solid animated" data-animation-in="fadeInUp"
data-delay-in="0.6">add to cart</a>
</div>
</div>
</div>
</div>
</div>
<div class="home-decor d-lg-block d-none">
<div class="decor-3 decor wow fadeInRight" id="img-1">
<img src="../assets/images/arrow.png" class="img-fluid" alt="">
<span>Long Lasting</span>
</div>
<div class="decor-4 decor wow fadeInLeft" id="img-2">
<span>Non-Irritant</span>
<img src="../assets/images/arrow.png" class="img-fluid" alt="">
</div>
</div>
</div>
</div>
</div>
</section>

<!-- home effect js -->
<scriptsrc="../assets/js/home-effect-1.js"></script>

<section id="tool-bg" class="p-0 height-85 tools_slider">
<div class="slide-1 home-slider">
<div>
<div class="home text-center">
<img src="../assets/images/home-banner/49.jpg" alt="" class="bg-img blur-up lazyload">
<div class="container">
<div class="row">
<div class="col">
<div class="slider-contain">
<div>
<h4>welcome to tools</h4>
<h1>auto parts</h1>
<a href="#" class="btn btn-solid">shop now</a>
</div>
</div>
</div>
</div>
<div class="tools-parts" id="tool-1">
<img src="../assets/images/tools/3.png" class="img-fluid blur-up lazyload" alt="">
</div>
<div class="tools-parts1" id="tool-2">
<img src="../assets/images/tools/4.png" class="img-fluid blur-up lazyload" alt="">
</div>
</div>
</div>
</div>
<div>
<div class="home text-center">
<img src="../assets/images/home-banner/50.jpg" alt="" class="bg-img blur-up lazyload">
<div class="container">
<div class="row">
<div class="col">
<div class="slider-contain">
<div>
<h4>welcome to tools</h4>
<h1>auto parts</h1>
<a href="#" class="btn btn-solid">shop now</a>
</div>
</div>
</div>
</div>
<div class="tools-parts" id="tool-3">
<img src="../assets/images/tools/1.png" class="img-fluid blur-up lazyload" alt="">
</div>
</div>
</div>
</div>
</div>
</section>

<!-- slider parallax effect jquery-->
<scriptsrc="../assets/js/parallax-effect.js"></script>

video in slider

HTML
JS

<section class="p-0 ">
<div class="slide-1 home-slider">
<div>
<div class="home p-center text-center">
<div class="slider-contain" id="block" style="width: 100%; "
data-vide-bg="../assets/video/video.mp4" data-vide-options="position: 0% 50%">
</div>
</div>
</div>
<div>
<div class="home text-center">
<img src="../assets/images/home-banner/1.jpg" alt="" class="bg-img blur-up lazyload">
<div class="container">
<div class="row">
<div class="col">
<div class="slider-contain">
<div>
<h4>welcome to fashion</h4>
<h1>men fashion</h1>
<a href="#" class="btn btn-solid">shop now</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

<!-- Video js-->
<scriptsrc="../assets/js/jquery.vide.min.js"></script>

language

currency

item name

1 x $ 299.00

item name

1 x $ 299.00

subtotal : $299.00

customer's login

Classes

Add class with "home"

For Parallax Image - .parallax

contain-align - .text-start, .text-center, .text-end

contain-position - .p-start, .p-center, .p-end

Home slider

Animated slider

Banner style

thumbnail style

feature highlight animation

product parallax

video in slider

50+ demo

50+ demos suit for any type of online store.

NFT New

Vegetables 4 New

Vegetables 5 New

gradient

fashion

fashion 2

fashion 3

fashion 4

fashion 5

fashion 6

fashion 7

furniture

furniture 2

furniture dark

electronics

electronics 2

electronics 3

marketplace

marketplace 2

marketplace 3

marketplace 4

vegetables

vegetables 2

vegetables 3

jewellery

jewellery 2

jewellery 3

bag

watch

medical

perfume

yoga

christmas

bicycle

marijuana

gym

tools

shoes

books

kids

game

beauty

left sidebar

video slider

metro

goggles

flower

light

nursery

pets

video

lookbook

full page

instagram

parallax

50+
demo

50+ demos
suit for any type of online store.