File: /home/aliazzsr/html.vqode.com/Pankore/productsGrid.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<script
defer
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollTrigger.min.js"></script>
<link
href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/output.css" />
</head>
<body class="products-body">
<main>
<header class="fixed w-full top-0 z-50 py-4 scroll-header">
<nav class="flex items-center justify-between wrapper">
<a>
<img
class="header-logo md:h-auto h-[55px]"
src="public/header_footer/logo.webp"
/>
</a>
<button id="menu-button">
<img class="header-menu" src="public/header_footer/menu.webp" />
</button>
</nav>
</header>
<div id="menu" class="menu px-4">
<div class="h-full flex flex-col wrapper">
<div
class="flex items-center justify-between py-4 text-black font-semibold"
>
<button id="closeMenu">
<i
class="fa fa-times fa-xmark text-gray-500 md:text-[32px] text-[20px] absolute md:right-14 right-4 md:top-6 top-3"
aria-hidden="true"
></i>
</button>
<a class="flex-1">
<img
id="menu-button"
class="md:h-auto h-[50px]"
src="public/menu/logo.webp"
/>
</a>
<div class="flex items-center justify-between md:flex-1">
<div class="flex items-center space-x-3">
<i
class="fa fa-globe text-purple text-[16px]"
aria-hidden="true"
></i>
<div class="font-bold text-[17px] space-x-1.5">
<span>EN</span>
<span class="text-slate-500/80 text-lg font-[300]">|</span>
<span class="text-slate-500/80">AR</span>
</div>
</div>
<div class="space-x-3 hidden md:block">
<i
class="fa fa-phone text-purple text-[13px]"
aria-hidden="true"
></i>
<span>+971 4227 4088</span>
</div>
<div class="space-x-3 hidden md:block">
<i
class="fa fa-envelope text-purple text-[16px]"
aria-hidden="true"
></i>
<span>[email protected]</span>
</div>
</div>
</div>
<div
class="flex items-center flex-1 md:justify-between justify-center 2xl:justify-center 2xl:space-x-12"
>
<div id="menu-left-images" class="flex items-center space-x-8">
<img
class="rounded-[28px] h-[460px] hidden md:inline-flex"
src="public/menu/menu-img1.webp"
/>
<img
class="rounded-[28px] h-[460px] hidden md:inline-flex"
src="public/menu/menu-img2.webp"
/>
</div>
<div
id="menu-center"
class="bg-black rounded-[34px] md:w-[450px] w-[380px] md:px-20 px-6 md:py-14 py-8"
>
<span class="text-neutral-600 font-semibold text-[18px]"
>Menu</span
>
<nav>
<ul
class="text-white font-[600] tracking-[1px] text-[22px] space-y-7 mt-6"
>
<li class="nav-item" id="home">
<a href="home.html">HOME</a>
</li>
<li class="nav-item" id="about">
<a href="whoWeAre.html">WHO WE ARE</a>
</li>
<li class="nav-item" id="services">
<a href="businesses.html">OUR BUSINESS</a>
</li>
<li class="nav-item" id="contact">
<a href="productsSlider.html">PRODUCTS</a>
</li>
<li class="nav-item" id="services">
<a href="blogListing.html">BLOGS</a>
</li>
<li class="nav-item" id="contact">
<a href="contactUs.html">CONTACT US</a>
</li>
</ul>
</nav>
</div>
<div id="menu-right-images" class="flex items-center space-x-8">
<img
class="rounded-[28px] h-[460px] hidden md:inline-flex"
src="public/menu/menu-img3.webp"
/>
<img
class="rounded-[28px] h-[460px] hidden md:inline-flex"
src="public/menu/menu-img4.webp"
/>
</div>
</div>
<div class="flex items-center justify-between pb-2 font-semibold">
<div class="space-x-2 md:hidden block">
<i
class="fa fa-phone text-purple text-[13px]"
aria-hidden="true"
></i>
<span>+971 4227 4088</span>
</div>
<div class="space-x-2 md:hidden block">
<i
class="fa fa-envelope text-purple text-[16px]"
aria-hidden="true"
></i>
<span>[email protected]</span>
</div>
</div>
</div>
</div>
<!-- Carousel Section -->
<section>
<div class="relative">
<img
class="w-full md:h-[80vh] md:min-h-[600px] min-h-[475px] hidden md:block"
src="public/products/product-list-banner.webp"
/>
<img
class="w-full md:h-[80vh] md:min-h-[600px] min-h-[475px] md:hidden"
src="public/products/products-m-banner.webp"
/>
<div
class="absolute banner-content-animation pt-12 inset-0 text-white flex flex-col items-center justify-center px-3"
>
<h1
class="md:text-[92px] text-[36px] font-bold tracking-[1px] mt-16 mb-6"
>
OUR PRODUCTS
</h1>
<div class="text-center font-medium md:text-lg space-y-[3px]">
<p class="hidden md:block">
We recogonize our success based on the sustainability of our
business. Our approach and
</p>
<p class="hidden md:block">
business activities aim to create long lasting sustainable
solutions and fair
</p>
<p class="hidden md:block">business opportunities</p>
<!-- only visible in mobile view -->
<p class="md:hidden">
We recogonize our success based on the sustainability of our
business. Our approach and business activities aim to create
long lasting sustainable solutions and fair business
opportunities
</p>
</div>
<a
href="contactUs.html"
class="primary-button text-white md:px-10 md:py-[9px] px-6 py-[8px] space-x-2 rounded-lg font-semibold md:text-[15px] text-[14px] mt-12"
type="button"
>
<span>CONTACT US</span> <span class="text-lg">+</span>
</a>
</div>
</div>
</section>
<!-- Section 2 -->
<div class="relative">
<img
src="public/products/product-list-sugar-vector.webp"
class="absolute hidden md:block left-0 top-10 -z-20"
/>
</div>
<section class="relative max-w-[1400px] mx-auto md:px-20 px-[15px]">
<div class="text-center mt-4">
<h3 class="text-purple font-bold pt-4 text-xl mb-2">SEE OUR</h3>
<h2
class="md:text-[54px] text-[36px] tracking-[1px] font-bold md:mb-4 mb-2"
>
COMPANY PRODUCTS
</h2>
</div>
<div
class="mt-16 grid-view mb-8 z-20 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 4xl:grid-cols-4 gap-4"
>
<div class="w-full relative pt-1.5 pl-1.5">
<div
class="bg-purple absolute -z-10 top-0 left-0 w-[70%] h-[45%]"
></div>
<div class="overflow-hidden">
<img
class="w-full h-[300px] object-cover"
src="public/home/product-img1.webp"
/>
</div>
<div
class="px-[28px] shadow-md bg-white -translate-y-[28%] z-20 py-[24px] w-[89%] mx-auto"
>
<h5 class="text-[23px] font-bold mb-3">White Refined Sugar</h5>
<a
href="whiteRefinedSugar.html"
class="underline cursor-pointer underline-offset-2 text-[15px] font-bold text-purple"
>View More</a
>
</div>
</div>
<div class="flex-1 relative pt-1.5 pl-1.5">
<div
class="bg-purple absolute -z-10 top-0 left-0 w-[70%] h-[45%]"
></div>
<div class="overflow-hidden">
<img
class="w-full h-[300px]"
src="public/home/product-img2.webp"
/>
</div>
<div
class="px-[28px] shadow-md bg-white -translate-y-[28%] z-20 py-[24px] w-[89%] mx-auto"
>
<h5 class="text-[23px] font-bold mb-3">White Crystal Sugar</h5>
<a
href="whiteCrystalSugar.html"
class="underline cursor-pointer underline-offset-2 text-[15px] font-bold text-purple"
>View More</a
>
</div>
</div>
<div class="flex-1 relative pt-1.5 pl-1.5">
<div
class="bg-purple absolute -z-10 top-0 left-0 w-[70%] h-[45%]"
></div>
<div class="overflow-hidden">
<img
class="w-full h-[300px]"
src="public/home/product-img3.webp"
/>
</div>
<div
class="px-[28px] shadow-md bg-white -translate-y-[28%] z-20 py-[24px] w-[89%] mx-auto"
>
<h5 class="text-[23px] font-bold mb-3">Parboiled Rice</h5>
<a
href="proboiledRice.html"
class="underline cursor-pointer underline-offset-2 text-[15px] font-bold text-purple"
>View More</a
>
</div>
</div>
<div class="flex-1 relative pt-1.5 pl-1.5">
<div
class="bg-purple absolute -z-10 top-0 left-0 w-[70%] h-[45%]"
></div>
<div class="overflow-hidden">
<img
class="w-full h-[300px]"
src="public/home/product-img4.webp"
/>
</div>
<div
class="px-[28px] shadow-md bg-white -translate-y-[28%] z-20 py-[24px] w-[89%] mx-auto"
>
<h5 class="text-[23px] font-bold mb-3">Short Grain Swarna</h5>
<a
href="shortGrainSwarna.html"
class="underline cursor-pointer underline-offset-2 text-[15px] font-bold text-purple"
>View More</a
>
</div>
</div>
<div class="flex-1 relative pt-1.5 pl-1.5">
<div
class="bg-purple absolute -z-10 top-0 left-0 w-[70%] h-[45%]"
></div>
<div class="overflow-hidden">
<img
class="w-full h-[300px]"
src="public/home/product-img5.webp"
/>
</div>
<div
class="px-[28px] shadow-md bg-white -translate-y-[28%] z-20 py-[24px] w-[89%] mx-auto"
>
<h5 class="text-[23px] font-bold mb-3">Gadarif Halawa Sesame</h5>
<a
href="gadarifHalawaSesame.html"
class="underline cursor-pointer underline-offset-2 text-[15px] font-bold text-purple"
>View More</a
>
</div>
</div>
<div class="flex-1 relative pt-1.5 pl-1.5">
<div
class="bg-purple absolute -z-10 top-0 left-0 w-[70%] h-[45%]"
></div>
<div class="overflow-hidden">
<img
class="w-full h-[300px]"
src="public/home/product-img6.webp"
/>
</div>
<div
class="px-[28px] shadow-md bg-white -translate-y-[28%] z-20 py-[24px] w-[89%] mx-auto"
>
<h5 class="text-[23px] font-bold mb-3">Non-Gadrif Sesame</h5>
<a
href="nonGadrifSesame.html"
class="underline cursor-pointer underline-offset-2 text-[15px] font-bold text-purple"
>View More</a
>
</div>
</div>
<div class="flex-1 relative pt-1.5 pl-1.5">
<div
class="bg-purple absolute -z-10 top-0 left-0 w-[70%] h-[45%]"
></div>
<div class="overflow-hidden">
<img
class="w-full h-[300px]"
src="public/home/product-img8.webp"
/>
</div>
<div
class="px-[28px] shadow-md bg-white -translate-y-[28%] z-20 py-[24px] w-[89%] mx-auto"
>
<h5 class="text-[23px] font-bold mb-3">Red Sesame</h5>
<a
href="redSesame.html"
class="underline cursor-pointer underline-offset-2 text-[15px] font-bold text-purple"
>View More</a
>
</div>
</div>
<div class="flex-1 relative pt-1.5 pl-1.5">
<div
class="bg-purple absolute -z-10 top-0 left-0 w-[70%] h-[45%]"
></div>
<div class="overflow-hidden">
<img
class="w-full h-[300px]"
src="public/home/product-img7.webp"
/>
</div>
<div
class="px-[28px] shadow-md bg-white -translate-y-[28%] z-20 py-[24px] w-[89%] mx-auto"
>
<h5 class="text-[23px] font-bold mb-3">Kernel Peanuts</h5>
<a
href="kernelPeanuts.html"
class="underline cursor-pointer underline-offset-2 text-[15px] font-bold text-purple"
>View More</a
>
</div>
</div>
<div class="flex-1 relative pt-1.5 pl-1.5">
<div
class="bg-purple absolute -z-10 top-0 left-0 w-[70%] h-[45%]"
></div>
<div class="overflow-hidden">
<img
class="w-full h-[300px]"
src="public/home/product-img9.webp"
/>
</div>
<div
class="px-[28px] shadow-md bg-white -translate-y-[28%] z-20 py-[24px] w-[89%] mx-auto"
>
<h5 class="text-[23px] font-bold mb-3">White Flour</h5>
<a
href="whiteFlour.html"
class="underline cursor-pointer underline-offset-2 text-[15px] font-bold text-purple"
>View More</a
>
</div>
</div>
<div class="flex-1 relative pt-1.5 pl-1.5">
<div
class="bg-purple absolute -z-10 top-0 left-0 w-[70%] h-[45%]"
></div>
<div class="overflow-hidden">
<img
class="w-full h-[300px]"
src="public/home/product-img10.webp"
/>
</div>
<div
class="px-[28px] shadow-md bg-white -translate-y-[28%] z-20 py-[24px] w-[89%] mx-auto"
>
<h5 class="text-[23px] font-bold mb-3">Red Lentils</h5>
<a
href="redLentils.html"
class="underline cursor-pointer underline-offset-2 text-[15px] font-bold text-purple"
>View More</a
>
</div>
</div>
<div class="flex-1 relative pt-1.5 pl-1.5">
<div
class="bg-purple absolute -z-10 top-0 left-0 w-[70%] h-[45%]"
></div>
<div class="overflow-hidden">
<img
class="w-full h-[300px]"
src="public/home/product-img11.webp"
/>
</div>
<div
class="px-[28px] shadow-md bg-white -translate-y-[28%] z-20 py-[24px] w-[89%] mx-auto"
>
<h5 class="text-[23px] font-bold mb-3">Milk Powder - Full Cream</h5>
<a
href="milkPowderFullCream.html"
class="underline cursor-pointer underline-offset-2 text-[15px] font-bold text-purple"
>View More</a
>
</div>
</div>
<div class="flex-1 relative pt-1.5 pl-1.5">
<div
class="bg-purple absolute -z-10 top-0 left-0 w-[70%] h-[45%]"
></div>
<div class="overflow-hidden">
<img
class="w-full h-[300px]"
src="public/home/product-img12.webp"
/>
</div>
<div
class="px-[28px] shadow-md bg-white -translate-y-[28%] z-20 py-[24px] w-[89%] mx-auto"
>
<h5 class="text-[23px] font-bold mb-3">Edible Oil</h5>
<a
href="edibleOil.html"
class="underline cursor-pointer underline-offset-2 text-[15px] font-bold text-purple"
>View More</a
>
</div>
</div>
</div>
</section>
</main>
<section class="transparent-section"></section>
<footer class="md:flex bg-purple justify-between pt-3 pb-6 md:pb-0 hidden">
<img class="" src="public/header_footer/footer-left-sugarcane.webp" />
<div class="flex-1 flex flex-col max-w-[800px]">
<div class="flex w-full justify-between text-white flex-1 pt-10">
<div>
<h4 class="font-semibold text-[22px] mb-8">OUR PAGES</h4>
<nav class="space-y-3 flex flex-col text-[17px] font-[500]">
<a href="home.html">Home</a>
<a href="whoWeAre.html">Who We Are</a>
<a href="productsSlider.html">Products</a>
<a href="pankoreBusiness.html">Our Businesses</a>
<a href="blogListing.html">Blog</a>
<a href="contactUs.html">Contact Us</a>
</nav>
</div>
<div class="">
<h4 class="font-semibold text-[22px] mb-8">ASK FOR MORE</h4>
<form class="flex flex-col space-y-4">
<input
type="text"
class="placeholder-white outline-none border text-sm border-white px-4 py-[13px] bg-transparent text-white w-[240px]"
placeholder="Enter full name"
/>
<input
type="text"
class="placeholder-white outline-none border text-sm border-white px-4 py-[13px] bg-transparent text-white w-[240px]"
placeholder="Enter email address"
/>
<textarea rows="2" class="footer-msg px-[20px] py-[13px] w-full placeholder:text-[#ffffff] text-[#ffffff] font-medium resize-none" placeholder="Type..." type="text" id="message" name="message" required=""></textarea>
<button
class="text-purple bg-white py-[12px] text-[16px] font-bold w-[240px]"
type="submit"
>
SUBMIT NOW
</button>
</form>
</div>
<div class="">
<h4 class="font-semibold text-[22px] mb-8">OUR PRODUCTS</h4>
<nav class="space-y-3 flex flex-col text-[17px] font-[500]">
<a href="whiteRefinedSugar.html">White Refined Sugar</a>
<a href="whiteCrystalSugar.html">White Crystal Sugar</a>
<a href="proboiledRice.html">Proboiled Rice</a>
<a href="shortGrainSwarna.html">Short Grain Swarna</a>
<a href="gadarifHalawaSesame.html">Gadarif Halawa Sesame</a>
<a
href="productsGrid.html"
class="underline underline-offset-2 mt-4"
>View All</a
>
</nav>
</div>
</div>
<div
class="flex -mx-10 items-center justify-center text-white text-[14px] footer-border mt-auto pt-[26px] pb-[26px] px-3"
>
<div>
<span class="font-[400]">COPYRIGHT: </span
><span class="font-bold"> ©2023. ALL RIGHTS RESERVED</span>
</div>
</div>
</div>
<img class="" src="public/header_footer/footer-right-sugarcane.webp" />
</footer>
<footer
class="flex flex-col bg-purple justify-between pt-4 pb-6 md:pb-0 md:hidden"
>
<div class="flex justify-between text-white flex-1 pt-10 px-6">
<div>
<h4 class="font-semibold md:text-[22px] text-[18px] md:mb-8 mb-3">
OUR PAGES
</h4>
<nav
class="space-y-3 flex flex-col md:text-[18px] text-[16px] font-[500]"
>
<a href="home.html">Home</a>
<a href="whoWeAre.html">Who We Are</a>
<a href="productsSlider.html">Products</a>
<a href="pankoreBusiness.html">Our Businesses</a>
<a href="blogListing.html">Blog</a>
<a href="contactUs.html">Contact Us</a>
</nav>
</div>
<div>
<h4 class="font-semibold md:text-[22px] text-[18px] md:mb-8 mb-3">
OUR PRODUCTS
</h4>
<nav
class="space-y-3 flex flex-col md:text-[18px] text-[16px] font-[500]"
>
<a href="whiteRefinedSugar.html">White Refined Sugar</a>
<a href="whiteCrystalSugar.html">White Crystal Sugar</a>
<a href="proboiledRice.html">Proboiled Rice</a>
<a href="shortGrainSwarna.html">Short Grain Swarna</a>
<a href="gadarifHalawaSesame.html">Gadarif Halawa Sesame</a>
<a
href="productsGrid.html"
class="underline underline-offset-2 mt-4"
>View All</a
>
</nav>
</div>
</div>
<div class="text-white mt-8 px-4 mb-4">
<h4 class="font-semibold md:text-[22px] text-[18px] mb-4">
ASK FOR MORE
</h4>
<form class="flex flex-col space-y-4">
<input
type="text"
class="placeholder-white outline-none border text-sm border-white px-4 py-[13px] bg-transparent text-white w-full"
placeholder="Enter full name"
/>
<input
type="text"
class="placeholder-white outline-none border text-sm border-white px-4 py-[13px] bg-transparent text-white w-full"
placeholder="Enter email address"
/>
<textarea rows="2" class="footer-msg px-[20px] py-[13px] w-full placeholder:text-[#ffffff] text-[#ffffff] font-medium resize-none" placeholder="Type..." type="text" id="message" name="message" required=""></textarea>
<button
class="text-purple bg-white py-[12px] text-[16px] font-bold w-full"
type="submit"
>
SUBMIT NOW
</button>
</form>
</div>
<div class="text-white text-[15px] footer-border mt-auto pt-[28px] px-4">
<div>
<span class="font-[400]">COPYRIGHT: </span
><span class="font-bold"> ©2023. ALL RIGHTS RESERVED</span>
</div>
</div>
</footer>
<!-- Add your JavaScript scripts here or link to external scripts -->
<script src="javascript/header-footer.js"></script>
</body>
</html>