File: /home/aliazzsr/html.vqode.com/Pankore/edibleOil.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 rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/product-name.css" />
<link rel="stylesheet" href="css/output.css" />
</head>
<body class="product-body">
<main>
<header class="fixed top-0 z-50 w-full 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="px-4 menu">
<div class="flex flex-col h-full wrapper">
<div
class="flex items-center justify-between py-4 font-semibold text-black"
>
<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="hidden space-x-3 md:block">
<i
class="fa fa-phone text-purple text-[13px]"
aria-hidden="true"
></i>
<span>+971 4227 4088</span>
</div>
<div class="hidden space-x-3 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 justify-center flex-1 md:justify-between 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="block space-x-2 md:hidden">
<i
class="fa fa-phone text-purple text-[13px]"
aria-hidden="true"
></i>
<span>+971 4227 4088</span>
</div>
<div class="block space-x-2 md:hidden">
<i
class="fa fa-envelope text-purple text-[16px]"
aria-hidden="true"
></i>
<span>[email protected]</span>
</div>
</div>
</div>
</div>
<section
class="product-banner-image md:h-[85vh] md:max-h-[825px] md:min-h-[700px] min-h-[425px] flex flex-col pb-8 pt-32 md:pt-4"
>
<div
class="grid items-center grid-cols-1 gap-10 pb-10 mt-auto wrapper md:grid-cols-2 banner-content-animation"
>
<div class="text-white">
<div class="flex items-center space-x-5 text-[26px] font-semibold">
<h4>WELCOME TO</h4>
<span>|</span>
<h4>OUR PRODUCTS</h4>
</div>
<!-- Product Name -->
<h3 class="font-bold text-[56px] mt-[20px] leading-[66px]">
Sunflower
</h3>
<h3 class="font-bold text-[56px] mb-[20px] leading-[66px]">EDIBLE OIL</h3>
<p class="font-medium text-[19px] leading-8">
The edible sunflower seed – a tasty nutrient-rich product extracted from the sunflowers’ big blooms has gained popularity becoming an international snack. They are seeds that are enclosed in a tough black and white striped shell, and their kernels are tiny and oval yet loaded with nutritious value. Sunflower seeds are a great source of good oils like monounsaturated fats and polyunsaturated fats that benefit heart health.
</p>
</div>
<div
class="w-full max-w-[475px] bg-white/10 backdrop:blur rounded-[24px] px-8 py-4"
>
<h3 class="text-[26px] font-bold text-white">QUOTATION REQUEST</h3>
<form class="flex flex-col mt-4 space-y-4">
<input
class="bg-white/50 outline-none w-full px-4 py-[13px] rounded-lg text-black placeholder:text-black font-semibold"
placeholder="Full Name"
/>
<input
class="bg-white/50 outline-none w-full px-4 py-[13px] rounded-lg text-black placeholder:text-black font-semibold"
placeholder="Email Address"
/>
<input
class="bg-white/50 outline-none w-full px-4 py-[13px] rounded-lg text-black placeholder:text-black font-semibold"
placeholder="Phone"
/>
<textarea
class="bg-white/50 outline-none mb-2 resize-none w-full px-4 py-[13px] rounded-lg text-black placeholder:text-black font-semibold"
placeholder="Message"
rows="3"
></textarea>
<button
type="submit"
class="self-end bg-purple px-4 py-2.5 text-white font-semibold rounded-md"
>
Submit
</button>
</form>
</div>
</div>
</section>
<div class="relative hidden md:block">
<img
class="absolute left-0 top-6"
src="public/inner-products/sugar-cane.webp"
/>
<img
class="absolute top-0 right-0"
src="public/inner-products/sugar-cane1.webp"
/>
</div>
<section>
<div class="mt-4 text-center wrapper">
<h3 class="pt-4 mb-2 text-xl font-bold text-purple">
WHY SUNFLOWERS OIL IS YOUR ULTIMATE CHOICE
</h3>
<h2
class="md:text-[54px] text-[36px] tracking-[1px] font-bold md:mb-4 mb-2"
>
SUNFLOWERS OIL
</h2>
<p class="px-2 text-lg font-semibold text-gray-700">
We're thrilled to supply premium Sunflower Edible Oil, sourced for the Sudanese market and other regions across Africa, highlighting our dedication to quality and purity. This refined sunflower oil, derived from nutritious sunflower seeds known for their exceptional taste, serves as an ideal cooking and frying oil, embodying natural richness and quality.
</p>
<p class="text-gray-700 text-lg font-semibold px-2 text-purple pt-2">
Origin: Turkey & Saudi Arabia
</p>
<p class="text-gray-700 text-lg font-semibold px-2 text-dark-gray pt-2">
Packing: 4x4 L
</p>
</div>
</section>
<!-- Web Section -->
<section class=" hidden mt-4 space-x-20 wrapper md:flex">
<div class="w-[210px] reveal fade-top pb-8 proMT">
<div>
<span class="text-[60px] font-bold leading-10">100</span
><span class="text-[24px] font-semibold leading-10">%</span>
</div>
<h3 class="text-purple text-[25px] font-semibold mt-0.5">
Quality Product
</h3>
</div>
<div class="relative">
<img
class="absolute -left-[70px] z-40 top-[210px] reveal fade-top"
src="public/inner-products/left.webp"
/>
<img
class="absolute -right-[70px] z-40 top-[180px] reveal fade-top"
src="public/inner-products/right.webp"
/>
<img
class="reveal fade-top rounded-[84px] w-full h-full mt-5"
src="public/inner-products/sunflower1.webp"
/>
</div>
<div class="w-[210px] reveal fade-bottom">
<img
class="rounded-[48px] mb-[30px]"
src="public/inner-products/sunflower2.webp"
/>
<div>
<span class="text-[60px] font-bold leading-10">24/7</span
>
</div>
<h3 class="text-purple text-[25px] font-semibold mt-0.5">
Assistance
</h3>
</div>
</section>
<!-- Mobile Section -->
<section class="overflow-hidden md:hidden wrapper">
<img
class="reveal popOut rounded-[40px] w-full h-full mt-3"
src="public/inner-products/sunflower1.webp"
/>
<div class="my-5">
<div class="reveal fade-left">
<div>
<span class="text-[60px] font-bold leading-10">100</span
><span class="text-[24px] font-semibold leading-10">%</span>
</div>
<h3 class="text-purple text-[25px] font-semibold mt-0.5">
Quality Product
</h3>
</div>
<img
class="rounded-[40px] w-full object-cover reveal fade-right mt-2.5"
src="public/inner-products/sunflower2.webp"
/>
</div>
<div class="popScale popOut">
<div>
<span class="text-[60px] font-bold leading-10">24/7</span
>
</div>
<h3 class="text-purple text-[25px] font-semibold mt-0.5">
Assistance
</h3>
</div>
</section>
<section
class="flex flex-col my-8 overflow-hidden wrapper md:items-start md:flex-row md:mt-28 md:space-x-10 md:pb-28 pb-28"
>
<div class="md:w-[42%] reveal fade-left">
<h3 class="pt-4 mb-2 text-xl font-bold text-purple">
Why Choose
</h3>
<h2
class="md:text-[54px] text-[36px] tracking-[1px] font-bold md:mb-4 mb-2"
>
Palm Oil
</h2>
<p class="text-dark-gray/60 text-[17px] mt-3 font-medium leading-[28px]">
We take pride in importing palm oil, a crucial component in the global vegetable oil market. Sourced from the fruit of the oil palm tree (Elaeis guineensis), our palm oil is renowned for its versatility and extensive applications. As the world's most prevalent vegetable oil, it stands out for its distinctive properties and varied uses. Our commitment extends to delivering this exceptional product to various markets across Africa.
</p>
<p class="text-gray-700 text-lg font-semibold text-purple pt-2">
Origin: Originated from Malizia, Indonesia and Turkey
</p>
<p class="text-gray-700 text-lg font-semibold text-dark-gray pt-2">
Packing: 4x4 L
</p>
<h4 class="text-dark-gray font-semibold text-[22px] mb-3 mt-3">Specification</h4>
<div
class="grid text-purple grid-cols-2 gap-y-5 mt-[28px] text-[16px] font-semibold"
>
<div class="">
<div class="flex items-center space-x-2">
<span class="w-3 h-[2px] bg-purple"></span>
<h5>Refined, Bleached and </h5>
</div>
<span class="pl-[20px]">Deodorized (RBD)</span>
</div>
<div class="">
<div class="flex items-center space-x-2">
<span class="w-3 h-[2px] bg-purple"></span>
<h5>Free Fatty Acid (FFA)</h5>
</div>
<span class="pl-[20px]">0.1% max</span>
</div>
<div class="">
<div class="flex items-center space-x-2">
<span class="w-3 h-[2px] bg-purple"></span>
<h5>Max iodine value is between </h5>
</div>
<span class="pl-[20px]">44 and 58</span>
</div>
<div class="">
<div class="flex items-center space-x-2">
<span class="w-3 h-[2px] bg-purple"></span>
<h5>Moisture & Impurities</h5>
</div>
<span class="pl-[20px]">0.1% Max </span>
</div>
<div class="">
<div class="flex items-center space-x-2">
<span class="w-3 h-[2px] bg-purple"></span>
<h5>Melting Point 18°C to 22°C </h5>
</div>
<span class="pl-[20px]">(64°F to 72°F)</span>
</div>
</div>
</div>
<div
class="relative flex flex-1 space-x-4 reveal fade-right max-sm:pt-4"
>
<img
class="rounded-[46px] w-[52%]"
src="public/inner-products/sunflower3.webp"
/>
<img
class="rounded-[46px] w-[46%] md:h-[350px] md:mt-3"
src="public/inner-products/sunflower5.webp"
/>
<img
class="rounded-[42px] w-[52%] absolute right-20 md:-bottom-7 -bottom-24 reveal fade-top"
src="public/inner-products/sunflower4.webp"
/>
</div>
</section>
<div class="relative hidden md:block">
<img
class="absolute bottom-0 left-0"
src="public/inner-products/sugar-cane2.webp"
/>
<img
class="absolute bottom-0 right-0"
src="public/inner-products/sugar-cane3.webp"
/>
</div>
</main>
<section class="transparent-section"></section>
<footer class="justify-between hidden pt-3 pb-6 md:flex bg-purple md:pb-0">
<img class="" src="public/header_footer/footer-left-sugarcane.webp" />
<div class="flex-1 flex flex-col max-w-[800px]">
<div class="flex justify-between flex-1 w-full pt-10 text-white">
<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="mt-4 underline underline-offset-2"
>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]">PHONE: </span
><span class="font-bold"> 987 987 987 98</span>
</div>
<div>
<span class="font-[400]">EMAIL: </span
><span class="font-bold"> [email protected]</span>
</div> -->
<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 justify-between pt-4 pb-6 bg-purple md:pb-0 md:hidden"
>
<div class="flex justify-between flex-1 px-6 pt-10 text-white">
<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="mt-4 underline underline-offset-2"
>View All</a
>
</nav>
</div>
</div>
<div class="px-4 mt-8 mb-4 text-white">
<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>