File: /home/durgeshpandey215/public_html/demokalyani.skilladders.com/view/product-list.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title id="pagetitle"></title>
<link rel="icon" type="image/png" href="../public/fabicon.png">
<link rel="stylesheet" href="../src/assests/css/style.css">
<link rel="stylesheet" href="../src/assests/css/output.css">
<link
href="https://cdn.jsdelivr.net/npm/remixicon@4.5.0/fonts/remixicon.css"
rel="stylesheet"
/>
<style>
#preloader {
transition: opacity 0.5s ease, visibility 0.5s ease;
}
</style>
</head>
<div id="preloader" class="fixed inset-0 bg-white flex flex-col items-center justify-center z-50">
<div class="w-12 h-12 border-4 border-orange-500 border-t-transparent rounded-full animate-spin mb-4"></div>
<p class="text-gray-700 text-lg font-semibold">Loading...</p>
</div>
<body class="w-full h-full box-border overflow-x-hidden">
<main class="max-w-[1980px] m-[0px_auto] ">
<header>
<div class=" bg-black">
<div class="h-[50px] w-full text-white m-auto px-[50px] hidden md:flex items-center justify-between">
<div class="flex space-x-[21.75px] mt-0 text-lg 2xl:text-2xl">
<a href="#"><i class="ri-facebook-circle-fill text-white"></i></a>
<a href="#"><i class="ri-instagram-fill"></i></a>
<a href="#"><i class="ri-linkedin-fill"></i></a>
<a href="#"><i class="ri-twitter-fill"></i></a>
</div>
<div class="space-x-3">
<a href="" class="text-white text-sm font-medium"><i class="ri-mail-line pr-2"></i><span>info@kalyanilimited.com</span></a>
<a href="" class="text-white text-sm font-medium"><i class="ri-whatsapp-line pr-2"></i><span>+9174895262</span></a>
<a href="" class="text-white text-sm font-medium"><i class="ri-phone-line pr-2"></i><span>+917270992000</span></a>
</div>
</div>
</div>
<nav class="bg-white py-3 px-4 md:py-6 md:px-8 w-full 2xl:h-[139.39px] m-auto">
<div class="flex justify-between items-center">
<a class="w-[100px] md:w-[140px] 2xl:w-[187.5px] h-auto inline-block object-contain" href="/index.html">
<img class="h-full w-full" src="../public/logo-nav.png" alt="" />
</a>
<ul class="hidden xl:flex gap-6 py-1 px-5 rounded-full">
<li class="font-medium md:text-sm 2xl:text-base text-zinc-500 nav-link md:pt-[2px] xl:pt-0" data-link="/index.html"><a href="/index.html" class="inline-block">Home</a></li>
<li class="relative group font-medium">
<a href="#" class="inline-flex items-center font-medium md:text-sm 2xl:text-base text-zinc-500">
About Kalyani
<span class="ms-[2px]">
<i class="ri-arrow-down-s-line"></i>
</span>
</a>
<ul class="absolute hidden z-30 group-hover:block capitalize hover:block bg-white text-black mt-0 rounded-lg shadow-lg w-60 ">
<!-- Categories will be dynamically inserted here -->
<li><a href="/view/about/aboutcompany.html" class="block px-4 py-2 hover:bg-orange-50">Company Profile</a></li>
<li><a href="/view/about/certificate.html" class="block px-4 py-2 hover:bg-orange-50">Certificate and Membership</a></li>
<li><a href="/view/about/about.html" class="block px-4 py-2 hover:bg-orange-50">Quality policy</a></li>
<li><a href="/view/about/aboutcooprate.html" class="block px-4 py-2 hover:bg-orange-50">Corporate video</a></li>
</ul>
</li>
<li class="relative group/cat font-medium">
<button class=" font-medium flex text-zinc-500 rounded">
<a href="/view/category-home.html">
Our Products
</a>
<span class="ms-[2px]">
<i class="ri-arrow-down-s-line"></i>
</span>
</button>
<ul class="absolute left-0 w-60 bg-white shadow-lg rounded opacity-0 invisible group-hover/cat:opacity-100 group-hover/cat:visible transition duration-200 z-50 categorylist">
</ul>
</li>
<li class="relative group font-medium">
<a href="#" class="inline-flex items-center font-medium md:text-sm 2xl:text-base text-zinc-500">
Business Area
<span class="ms-[2px]">
<i class="ri-arrow-down-s-line"></i>
</span>
</a>
<ul class="absolute hidden z-30 group-hover:block hover:block bg-white text-black mt-0 rounded-lg shadow-lg w-60">
<li><a href="/view/business/domistic_board.html" class="block px-4 py-2 hover:bg-orange-50">Domestic Brand Business</a></li>
<li><a href="/view/business/institution.html" class="block px-4 py-2 hover:bg-orange-50">Institutional Business</a></li>
<li><a href="/view/business/international.html" class="block px-4 py-2 hover:bg-orange-50"> International Business</a></li>
<li><a href="/view/business/manufacture.html" class="block px-4 py-2 hover:bg-orange-50">Contract Manufacturing</a></li>
<li><a href="/view/business/kalyanigrow.html" class="block px-4 py-2 hover:bg-orange-50">Grow with Kalyani</a></li>
<!-- <li><a href="/view/business/domistic_board.html" class="block px-4 py-2 hover:bg-orange-50">Product 1</a></li> -->
</ul>
</li>
<li class="relative group font-medium">
<a href="#" class="inline-flex items-center font-medium md:text-sm 2xl:text-base text-zinc-500">
Key Strength
<span class="ms-[2px]">
<i class="ri-arrow-down-s-line"></i>
</span>
</a>
<ul class="absolute hidden z-30 group-hover:block hover:block bg-white text-black mt-0 rounded-lg shadow-lg w-60">
<li><a href="/view/key-streangths/manfacture-strength.html" class="block px-4 py-2 hover:bg-orange-50">Manufacturing Strength</a></li>
<li><a href="/view/key-streangths/research-development.html" class="block px-4 py-2 hover:bg-orange-50">Research & Development</a></li>
<li><a href="/view/key-streangths/product-development.html" class="block px-4 py-2 hover:bg-orange-50">Product Development</a></li>
<li><a href="/view/key-streangths/marketing-network.html" class="block px-4 py-2 hover:bg-orange-50">Marketing Network</a></li>
<li><a href="/view/key-streangths/packageing.html" class="block px-4 py-2 hover:bg-orange-50">Packaging</a></li>
</ul>
</li>
<li class="font-medium md:text-sm 2xl:text-base text-zinc-500 nav-link" data-link="/kalyanigrow.html"><a href="#">Blog</a></li>
<li class="font-medium md:text-sm 2xl:text-base text-zinc-500 nav-link" data-link="/contact.html"><a href="/view/contact.html">Contact us</a></li>
</ul>
<div class="hidden xl:flex">
<a href="" class="w-[36px] h-[36px] 2xl:w-[50px] 2xl:h-[50px] bg-[#FEECD4] rounded-full flex items-center justify-center mr-2"><i class="ri-search-2-line text-xl text-[#ED7D0B]"></i></a>
<a
class="rounded-full px-[22px] py-[10px] 2xl:px-[25px] 2xl:py-[13.9px] font-medium md:text-sm 2xl:text-base text-white bg-[rgba(237,125,11,1)]" href="contact.html"
>
Corporate Brochure
</a>
</div>
<div class="block xl:hidden p-4 bg-white shadow-sm text-black">
<button id="openNav" class="text-3xl">
<i class="ri-menu-line"></i>
</button>
</div>
<div id="sideNav" class="fixed top-0 left-0 h-full w-0 bg-white text-black transition-all duration-300 ease-in-out overflow-x-hidden z-50">
<div class="flex justify-between p-4 items-center bg-white">
<img src="../public/logo-nav.png" alt="" srcset="" height="h-20 mx-auto block">
<button id="closeNav" class="text-3xl text-black">
<i class="ri-close-line "></i> <!-- Close icon -->
</button>
</div>
<ul class="mt-8 space-y-2 ">
<li><a href="/index.html" class="block text-lg px-4">Home</a></li>
<div class="w-full max-w-md mx-auto bg-white rounded-lg ">
<!-- Accordion Item 1 -->
<div class="border-b my-1">
<input type="checkbox" id="accordion1" class="peer hidden">
<label for="accordion1" class=" text-lg font-inter cursor-pointer border-b-gray-200 transition-all duration-300 py-2 flex justify-between bg-gray-100 px-5 "><span>Our Products</span> <i class="ri-arrow-down-s-line"></i></label>
<div class="max-h-0 overflow-hidden peer-checked:max-h-64 transition-[max-height] duration-500 ease-in-out bg-gray-50 px-4 ">
<ul class=" list-inside text-sm text-black categorylist list-none">
</ul>
</div>
</div>
<div class="border-b my-1">
<input type="checkbox" id="accordion2" class="peer hidden">
<label for="accordion2" class=" text-lg font-inter cursor-pointer border-b-gray-200 transition-all duration-300 py-2 flex justify-between bg-gray-100 px-5 "><span> About Kalyani</span> <i class="ri-arrow-down-s-line"></i></label>
<div class="max-h-0 overflow-hidden peer-checked:max-h-64 transition-[max-height] duration-500 ease-in-out bg-gray-50 px-4 ">
<ul class=" list-inside text-black text-sm ">
<!-- Categories will be dynamically inserted here -->
<li><a href="/view/about/aboutcompany.html" class="block px-4 py-2 hover:bg-orange-50">Company Profile</a></li>
<li><a href="/view/about/certificate.html" class="block px-4 py-2 hover:bg-orange-50">Certificate and Membership</a></li>
<li><a href="/view/about/about.html" class="block px-4 py-2 hover:bg-orange-50">Quality policy</a></li>
<li><a href="/view/about/aboutcooprate.html" class="block px-4 py-2 hover:bg-orange-50">Corporate video</a></li>
</ul>
</div>
</div>
<!-- 🧩 Parent Accordion -->
<div class="border-b my-1">
<input type="checkbox" id="productacc" class="peer hidden">
<label for="productacc" class="text-lg font-inter cursor-pointer border-b-gray-200 transition-all duration-300 py-2 flex justify-between bg-gray-100 px-5">
<span> Our Products</span> <i class="ri-arrow-down-s-line"></i>
</label>
<!-- 👇 Nested Accordions Wrapper -->
<div class="max-h-0 overflow-hidden peer-checked:max-h-[1000px] transition-[max-height] duration-500 ease-in-out bg-gray-50 px-4 productaccording">
</div>
</div>
<div class="border-b my-1">
<input type="checkbox" id="accordion3" class="peer hidden">
<label for="accordion3" class=" text-lg font-inter cursor-pointer border-b-gray-200 transition-all duration-300 py-2 flex justify-between bg-gray-100 px-5 "><span> Business Area</span> <i class="ri-arrow-down-s-line"></i></label>
<div class="max-h-0 overflow-hidden peer-checked:max-h-64 transition-[max-height] duration-500 ease-in-out bg-gray-50 px-4 ">
<ul class=" list-inside text-black text-sm ">
<li><a href="/view/business/domistic_board.html" class="block px-4 py-2 hover:bg-orange-50">Domestic Brand Business</a></li>
<li><a href="/view/business/institution.html" class="block px-4 py-2 hover:bg-orange-50">Institutional Business</a></li>
<li><a href="/view/business/international.html" class="block px-4 py-2 hover:bg-orange-50"> International Business</a></li>
<li><a href="/view/business/manufacture.html" class="block px-4 py-2 hover:bg-orange-50">Contract Manufacturing</a></li>
<li><a href="/view/business/kalyanigrow.html" class="block px-4 py-2 hover:bg-orange-50">Grow with Kalyani</a></li>
</ul>
</div>
</div>
<div class="border-b my-1">
<input type="checkbox" id="accordion4" class="peer hidden">
<label for="accordion4" class=" text-lg font-inter cursor-pointer border-b-gray-200 transition-all duration-300 py-2 flex justify-between bg-gray-100 px-5 "><span>Key Strength</span> <i class="ri-arrow-down-s-line"></i></label>
<div class="max-h-0 overflow-hidden peer-checked:max-h-64 transition-[max-height] duration-500 ease-in-out bg-gray-50 px-4 ">
<ul class=" list-inside text-black text-sm ">
<!-- Categories will be dynamically inserted here -->
<li><a href="/view/key-streangths/manfacture-strength.html" class="block px-4 py-2 hover:bg-orange-50">Manufacturing Strength</a></li>
<li><a href="/view/key-streangths/research-development.html" class="block px-4 py-2 hover:bg-orange-50">Research & Development</a></li>
<li><a href="/view/key-streangths/product-development.html" class="block px-4 py-2 hover:bg-orange-50">Product Development</a></li>
<li><a href="/view/key-streangths/marketing-network.html" class="block px-4 py-2 hover:bg-orange-50">Marketing Network</a></li>
<li><a href="/view/key-streangths/packageing.html" class="block px-4 py-2 hover:bg-orange-50">Packaging</a></li>
</ul>
</div>
</div>
<!-- Accordion Item 2 -->
</div>
<!-- <li><a href="/view/business/kalyanigrow.html" class="block text-lg px-4">Grow with Kalyani</a></li> -->
<li><a href="/view/contact.html" class="block text-lg px-4">contact us</a></li>
</ul>
</div>
<div id="overlay" class="fixed inset-0 bg-black opacity-0 transition-opacity duration-300 ease-in-out z-40 hidden"></div>
</div>
</nav>
</header>
<section class="w-full hidden lg:block">
<div class="flex items-center max-xl:overflow-x-auto scroll-smooth max-xl:overflow-hidden bg-gray-100 whitespace-nowrap">
<button class="max-xl:p-2 bg-black px-6 py-12 cursor-pointer flex-shrink-0" onclick="goBack()">
<i class="ri-arrow-left-line text-white text-7xl max-sm:text-4xl" aria-hidden="true"></i>
<span class="sr-only">Scroll left</span>
</button>
<a href="/view/category-home.html"
class="p-6 md:px-6 md:py-[52.3px] cursor-pointer group flex-shrink-0 transform duration-300 block hover:bg-orange-500">
<img class="m-auto w-10 h-10 object-contain lg:w-14 duration-300 group-hover:invert group-hover:brightness-0"
src="/public/Vector.png"
alt="Main Product"
loading="lazy">
<div class="w-20 lg:w-28 whitespace-normal block">
<h3 class="font-medium text-xs sm:text-sm md:text-base text-center group-hover:text-white">
Main Product
</h3>
</div>
</a>
<div class="flex allcatlinks">
</div>
<!-- <div class="group flex">
<div class=" p-10 max-xl:p-2 bg-orange-500 text-white cursor-pointer flex-shrink-0">
<img class="m-auto max-xl:w-10 max-xl:h-[40px]" src="./assets/product category/top-info/Vector-2.png" alt="Product by Ingredient" loading="lazy">
<h3 class="font-medium max-sm:text-xs text-center">Product by Ingredient</h3>
</div>
<div class="hidden group-hover:block p-10 max-xl:p-2 bg-orange-500 text-white cursor-pointer flex-shrink-0">
<img class="m-auto max-xl:w-10 max-xl:h-[40px]" src="./assets/product category/top-info/Vector-2.png" alt="Product by Ingredient" loading="lazy">
<h3 class="font-medium max-sm:text-xs text-center">Product by Ingredient</h3>
</div>
</div> -->
</div>
</section>
<section class="w-full max-sm:pt-2 subcate-con">
</section>
<section class=" w-full my-10">
<div class="p-search flex items-center justify-between flex-wrap m-auto max-w-7xl">
<form action="" class="flex py-2 px-3 bg-gray-100 my-1 rounded-md border border-gray-200">
<i class="ri-search-2-line text-gray-400 pt-1"></i>
<input id="seacrhSubcat" class="border-none bg-transparent outline-none p-[2px_10px] w-full font-inter lg:w-96" type="search"
placeholder="Search Products">
</form>
<div class="p-sort flex bg-gray-100 px-2 py-1 my-1 rounded-md max-sm:w-30 ">
<i class="ri-sort-desc text-lg py-1" ></i>
<form action="">
<select id="sortOrderSubcat" name="cars" class="p-[5px_2px] outline-none max-sm:text-[13px] bg-transparent">
<option >Sort By</option>
<option value="asc">Ascending Order </option>
<option value="desc">Descending Order</option>
</select>
</form>
</div>
</div>
</section>
<section class="grid lg:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-3 max-w-10/12 m-auto my-10 product-list">
</section>
</main>
<footer class="max-w-[1980px] m-auto pt-16 px-8 md:px-16 2xl:lg:px-32 text-white" style="background-image:url('../public/footerbanner.webp') ; background-repeat: no-repeat; background-size: cover;">
<!-- Top Section -->
<div class="flex flex-col md:flex-row justify-between gap-10">
<!-- Contact Section -->
</div>
<!-- Divider -->
<!-- Middle Section -->
<div class="grid grid-cols-1 lg:grid-cols-11 gap-4 text-base">
<!-- Company Info and Logo -->
<div class="col-span-1 md:col-span-3">
<div class="w-36 aspect-video mb-4">
<img class="h-full w-full object-contain" src="../public/footerLogo.png" alt="Footer Logo" />
</div>
<p>
Kalyani Industries Ltd., established in 2000, is a leading manufacturer, exporter, and supplier of high-quality products.
</p>
<a class="font-semibold underline cursor-pointer">Read More...</a>
<!-- Social Media Icons -->
<div class="flex gap-4 mt-8 text-2xl">
<a href="#"><i class="ri-facebook-circle-fill"></i></a>
<a href="#"><i class="ri-instagram-fill"></i></a>
<a href="#"><i class="ri-linkedin-fill"></i></a>
<a href="#"><i class="ri-twitter-fill"></i></a>
</div>
</div>
<!-- Products Section -->
<div class="col-span-1 md:col-span-4">
<h6 class="mb-6 text-lg font-semibold">Our Products</h6>
<ul class="grid grid-cols-2 text-orange-200 text-base 2xl:text-lg gap-1 " id="footerlist">
</ul>
</div>
<!-- Column 2 -->
<div>
<h6 class="mb-6 text-lg font-semibold">Company</h6>
<ul class="space-y-2 text-orange-200 text-base 2xl:text-lg">
<li><a href="/view/business/kalyanigrow.html">Grow With Us</a></li>
<li><a href="/view/domistic_board.html">About us</a></li>
<li><a href="/view/contact.html">Contact us</a></li>
<!-- <li>Jobs</li>
<li>In Press</li> -->
</ul>
</div>
<div class="col-span-1 md:col-span-3">
<div class="flex font-dmSans gap-5 text-base max-w-[320px] ">
<i class="ri-mail-line text-lg"></i>
<div class="py-1" >
<h6 class="text-lg">Mail</h6>
<a href="mailto:info@kalyanilimited.com" class="text-sm">info@kalyanilimited.com</a>
</div>
</div>
<div class="flex gap-5 text-base max-w-[320px] py-1">
<span class="text-2xl"><i class="ri-phone-line"></i></span>
<div>
<h6 class="text-lg">tel</h6>
<a href="tel:912282215489" class="text-sm">+91 22-82215489</a><br />
<a href="tel:912261278127" class="text-sm">+91 22-61278127</a><br />
<a href="tel:912261278127" class="text-sm">+91 22-62381265</a><br />
<a href="tel:912267421923" class="text-sm">+91 22-67421923</a>
</div>
</div>
<!-- Mail Section -->
<!-- Address Section -->
<div class="flex gap-5 text-base max-w-[320px]">
<span class="text-2xl"><i class="ri-map-pin-line"></i></span>
<div>
<h6 class="text-lg" class="text-base">Address</h6>
<a href="" class="text-sm">
Corporate Office 1202-1204, B Wing, Kailash Business Park, Ghatkopar Powai Link Road, Vikhroli(W), Mumbai -400079.
</a>
</div>
</div>
</div>
</div>
<!-- Divider -->
<div class="my-4">
<hr class="border-t-2 border-white opacity-50" />
</div>
<!-- Bottom Section -->
<div class="flex flex-col md:flex-row justify-between text-sm pb-3">
<p>© 2007-2024 All Rights Reserved with Kalyani Industries Limited.</p>
<div class="flex gap-4 mt-4 md:mt-0">
<a href="#" class="underline">Privacy Policy</a>
<a href="#" class="underline">Terms of Use</a>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="../src/assests/js/scripts.js"></script>
<script src="../src/assests/js/api.js"></script>
<script>
$(document).ready(function () {
$(".relative").hover(function () {
let card = $(this).find(".carddiv"); // Get only the hovered card
let windowWidth = $(window).width(); // Get window width
let cardOffset = card.offset(); // Get the card position
let cardWidth = card.outerWidth();
let windowRightEdge = $(window).width();
if (cardOffset.left + cardWidth > windowRightEdge) {
// If card overflows, move it below & center
card.removeClass("-right-52 -top-7").addClass("left-1/2 -translate-x-1/2 top-full mt-2");
} else {
// If no overflow, keep default position
card.removeClass("left-1/2 -translate-x-1/2 top-full mt-2").addClass("-right-52 -top-7");
}
});
});
</script>
</body>
</html>