Gearing up something amazing for you…
Still waiting? Magic takes a moment! ✨
<div class="rbt-catagories-section rbt-curved-style-box rbt-catagories-section-bg-one">
<div class="row row--12 mt_dec--24">
<div class="col-xl-8 col-lg-12 col-12 mt--24">
<div class="row row--12 mt_dec--24 rbt-mobile-row">
<div class="col-lg-4 col-md-6 col-sm-6 col-6 mt--24">
category card...
</div>
...
</div>
</div>
<div class="col-xl-4 col-lg-12 col-12 mt--24">
<div class="rbt-cat-box banner-card text-center rbt-curved-style-box rbt-catagories-img-bg rbt-scroll-trigger fade_in animation-order-5">
<div class="inner">
<div class="content">
<p class="subtitle rbt-scroll-trigger fade_in animation-order-1">Weekend Deal</p>
<h4 class="rbt-title rbt-scroll-trigger fade_in animation-order-2"><a href="#"><span class="rbt-bold--text">DJI Ronin</span> Action</a></h4>
<h3 class="secondary-title rbt-scroll-trigger fade_in animation-order-3">Super holiday</h3>
</div>
<div class="rbt-image-portion">
<a href="#">
<img class="rbt-scroll-trigger zoom_in animation-order-4" src="..." alt="...">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row row--12 mt_dec--24 rbt-mobile-row">
<div class="col-lg-1-5 col-lg-4 col-md-4 col-sm-12 col-6 mt--24">
category card...
</div>
<div class="col-lg-1-5 col-lg-4 col-md-4 col-sm-12 col-6 mt--24">
category card...
</div>
<div class="col-lg-1-5 col-lg-4 col-md-4 col-sm-12 col-6 mt--24">
category card...
</div>
<div class="col-lg-2-5 col-lg-8 col-md-8 col-sm-12 col-6 mt--24">
category card wider...
</div>
<div class="col-lg-1-5 col-lg-4 col-md-4 col-sm-12 col-6 mt--24">
category card...
</div>
<div class="col-lg-2-5 col-lg-8 col-md-8 col-sm-12 col-6 mt--24">
category card wider...
</div>
<div class="col-lg-1-5 col-lg-4 col-md-4 col-sm-12 col-6 mt--24">
category card...
</div>
<div class="col-lg-1-5 col-lg-4 col-md-4 col-sm-12 col-6 mt--24">
category card...
</div>
</div>
<div class="wrapper plr--56 plr_lg--60 plr_md--20 plr_sm--20">
<div class="rbt-catagory-contain-box rbt-catagory-contain-box-style-one rbt-bg-color-gray-light ">
<div class="row">
<div class="col-lg-12 d-flex justify-content-between flex-row align-items-center flex-wrap rbt-gap--16">
<div class="rbt-component-section-title rbt-gap--4 p-0 mb--0 border-0">
<a href="#" class="rbt-card-subtitle rbt-card-catagories-text mt--0 rbt-scroll-trigger fade_in animation-order-1">Headphones</a>
<h4 class="rbt-title rbt-scroll-trigger fade_in animation-order-2"><span class="rbt-bold--text">Popular By Categories</span></h4>
</div>
<a class="rbt-btn rbt-btn-secondary rbt-btn-sm-2 rbt-scroll-trigger fade_in animation-order-3" href="#">
<span class="btn-text">View All Categories</span>
<span class="btn-icon ml--4"><i class="fa-sharp fa-solid fa-arrow-up-right-from-square"></i></span>
</a>
</div>
</div>
<!-- Catagories Swiper -->
<div class="row swiper-right-sm-width">
<div class="col-md-12">
<!-- Start Card Swiper Area -->
<div class="swiper category-activation-one rbt-arrow-between gutter-swiper-24 mt--0 mb--0 ptb--20">
<div class="swiper-wrapper">
<!-- Start Category Box Layout -->
<div class="swiper-slide">
<div class="single-slide">
<div class="rbt-cat-box rbt-cat-box-5 variation-one rbt-scroll-trigger fade_in animation-order-1">
<div class="inner">
<div class="rbt-image-portion position-relative overflow-hidden">
<a href="#">
<img class="rbt-scroll-trigger zoom_in animation-order-1" src="..." alt="...">
</a>
<div class="rbt-right-corner-portion bottom--position">
<div class="rbt-corner-portion-wrapper">
<a href="#" class="rbt-card-link-btn"><i class="fa-solid fa-arrow-up-right"></i></a>
</div>
</div>
</div>
<div class="content">
<h6 class="title">
<a href="#">01 Chairs</a>
</h6>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
slide 2...
</div>
<div class="swiper-slide">
slide 3...
</div>
<div class="swiper-slide">
slide 4...
</div>
<div class="swiper-slide">
slide 5...
</div>
...
</div>
</div>
<!-- End Card Swiper Area -->
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 d-flex justify-content-between flex-row align-items-end mb--40 flex-wrap rbt-gap--16">
<div class="rbt-component-section-title rbt-gap--4 mb--0 p-0 border-0">
<h4 class="rbt-title rbt-scroll-trigger fade_in animation-order-1"><span class="rbt-bold--text">Popular by Categories</span></h4>
</div>
<a class="rbt-btn rbt-btn-secondary rbt-btn-sm-2 rbt-scroll-trigger fade_in animation-order-2" href="#">
<span class="btn-text">View All Categories</span>
<span class="btn-icon ml--4"><i class="fa-sharp fa-solid fa-arrow-up-right-from-square"></i></span>
</a>
</div>
</div>
<div class="row row--12 mt_dec--24">
<div class="col-lg-3 col-md-4 col-sm-4 col-4 mt--24">
<a class="rbt-cat-box rbt-cat-box-2 text-center rbt-scroll-trigger fade_in animation-order-1" href="#">
<div class="inner">
<div class="rbt-image-portion rbt-scroll-trigger zoom_in animation-order-1">
<img src="..." alt="...">
</div>
<div class="content">
<h6 class="title">Regional</h6>
</div>
</div>
</a>
</div>
...
</div>
<div class="row">
<div class="col-lg-12">
<div class="rbt-component-section-title rbt-gap--4 mb--40 p-0 border-0 text-center align-items-center">
<span class="rbt-card-subtitle b1 rbt-text-color-heading mt--0 rbt-scroll-trigger fade_in animation-order-1">Best Featured</span>
<h2 class="rbt-title rbt-scroll-trigger fade_in animation-order-2"><span class="rbt-bold--text">Categories </span>Your May Interested</h2>
<a class="rbt-btn-link rbt-text-color-primary d-flex rbt-text-medium rbt-gap--8 mt--8 justify-content-center rbt-scroll-trigger fade_in animation-order-3" href="#">
<span class="btn-text">View All Categories</span>
<span class="btn-icon"><i class="fa-sharp fa-solid fa-arrow-up-right-from-square"></i></span>
</a>
</div>
</div>
</div>
<div class="row row--12 mt_dec--24">
<div class="col-lg-7 col-md-6 col-sm-12 col-12 mt--24">
category card...
</div>
<div class="col-lg-5 col-md-6 col-sm-12 col-12 mt--24">
category card...
</div>
<div class="col-lg-9 col-md-6 col-sm-12 col-12 mt--24">
<div class="row row--12 mt_dec--24">
<div class="col-lg-6 col-md-12 col-sm-12 col-12 mt--24">
category card...
</div>
<div class="col-lg-6 col-md-12 col-sm-12 col-12 mt--24">
category card...
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-12 col-12 mt--24">
category card...
</div>
</div>
<div class="row">
<div class="col-lg-12 d-flex justify-content-between flex-row align-items-center flex-wrap rbt-gap--16 mb--32">
<div class="rbt-component-section-title rbt-gap--4 p-0 mb--0 border-0">
<h4 class="rbt-title rbt-scroll-trigger fade_in animation-order-1">Popular By <span class="rbt-bold--text">Sports Categories</span></h4>
</div>
<a class="rbt-btn rbt-btn-secondary rbt-btn-sm-2 rbt-scroll-trigger fade_in animation-order-2" href="#">
<span class="btn-text">View All Categories</span>
<span class="btn-icon ml--4"><i class="ml--4 fa-solid fa-arrow-up-right"></i></span>
</a>
</div>
</div>
<div class="row row--12 mt_dec--24">
<div class="col-lg-3 col-md-6 col-sm-6 col-6 mt--24">
<div class="rbt-cat-box rbt-cat-box-6 text-center rbt-scroll-trigger fade_in animation-order-1">
<div class="inner">
<div class="content">
<h5 class="title"><a href="#">Printer & Ink</a></h5>
<div class="rbt-image-portion rbt-scroll-trigger zoom_in animation-order-1">
<a href="#">
<img src="..." alt="...">
</a>
</div>
<ul class="quick-button-list">
<li>
<a class="rbt-btn rbt-btn-white icon-hover rbt-btn-md" href="#">
<span class="btn-text">Shorts</span>
<span class="btn-icon"><i class="fa-sharp fa-solid fa-arrow-up-right-from-square"></i></span>
</a>
</li>
<li>
<a class="rbt-btn rbt-btn-white icon-hover rbt-btn-md" href="#">
<span class="btn-text">Swim</span>
<span class="btn-icon"><i class="fa-sharp fa-solid fa-arrow-up-right-from-square"></i></span>
</a>
</li>
<li>
<a class="rbt-btn rbt-btn-white icon-hover rbt-btn-md" href="#">
<span class="btn-text">Jackets</span>
<span class="btn-icon"><i class="fa-sharp fa-solid fa-arrow-up-right-from-square"></i></span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
...
</div>
<div class="row align-items-center mt_dec--24">
<div class="col-lg-4 mt--24">
<div class="rbt-component-section-title rbt-gap--4 mb--0 p-0 border-0 text-left">
<span class="rbt-card-subtitle h4 rbt-text-color-heading mt--0 rbt-scroll-trigger fade_in animation-order-1">Best Featured</span>
<h2 class="rbt-title h1 rbt-scroll-trigger fade_in animation-order-2"><span class="rbt-bold--text">Categories </span>Your May Interested</h2>
</div>
</div>
<div class="col-lg-8 mt--24">
<div class="row row--12 mt_dec--32 justify-content-center">
<div class="col-lg-4 col-md-4 col-sm-4 col-4 mt--32">
category card...
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4 mt--32">
category card...
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4 mt--32">
category card...
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 d-flex justify-content-between flex-row align-items-center flex-wrap rbt-gap--16 mb--32">
<div class="rbt-component-section-title rbt-gap--4 p-0 mb--0 border-0">
<h4 class="rbt-title rbt-scroll-trigger fade_in animation-order-1"><span class="rbt-bold--text">Popular By Categories</span></h4>
</div>
<a class="rbt-btn rbt-btn-secondary rbt-btn-sm-2 rbt-scroll-trigger fade_in animation-order-2" href="#">
<span class="btn-text">View All Categories</span>
<span class="btn-icon ml--4"><i class="fa-sharp fa-solid fa-arrow-up-right-from-square"></i></span>
</a>
</div>
</div>
<div class="row row--12 mt_dec--24">
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-6 mt--24">
<div class="rbt-cat-box rbt-cat-box-4 text-left rbt-scroll-trigger fade_in animation-order-1">
<div class="inner">
<div class="content">
<h6 class="title"><a href="shop-by-categories.html">Printer & Ink</a></h6>
<ul class="quick-link-list rbt-link-hover">
<li><a href="#" class="quick-link">Artistry Palette</a></li>
<li><a href="#" class="quick-link">Face</a></li>
<li><a href="#" class="quick-link">Hair Styling</a></li>
</ul>
</div>
<div class="rbt-image-portion rbt-scroll-trigger zoom_in animation-order-1">
<a href="#">
<img src="..." alt="...">
</a>
</div>
</div>
</div>
</div>
...
</div>
<div class="row">
<div class="col-lg-12">
<div class="rbt-component-section-title text-center border-0 p-0 mb--32">
<h3 class="rbt-title rbt-scroll-trigger fade_in animation-order-1">Popular By<span class="rbt-bold--text"> Categories</span></h3>
</div>
</div>
</div>
<div class="row row--12 mt_dec--24">
<div class="col-lg-9 col-md-12 col-sm-12 col-12 mt--24">
<div class="row row--12 mt_dec--24">
<div class="col-lg-5 col-md-6 col-sm-6 col-12 mt--24">
category card...
</div>
<div class="col-lg-7 col-md-6 col-sm-6 col-12 mt--24">
category card...
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 col-12 mt--24">
category card...
</div>
<div class="col-lg-7 col-md-6 col-sm-6 col-12 mt--24">
category card...
</div>
<div class="col-lg-5 col-md-6 col-sm-6 col-12 mt--24">
category card...
</div>
</div>