File: /home/aliazzsr/html.vqode.com/Pankore/redSesame.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 w-full top-0 z-50 py-4 scroll-header max-sm:max-w-[100vw]"
>
<nav class="flex items-center justify-between wrapper z-50">
<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>
<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="wrapper grid md:grid-cols-2 items-center grid-cols-1 gap-10 mt-auto pb-10 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]">RED</h3>
<h3 class="font-bold text-[56px] mb-[20px] leading-[66px]">
SESAME
</h3>
<p class="font-medium text-[19px] leading-8">
We are proud to be the exporter of rich, flavorful red sesame cultivated in Sudan, which is renowned for its high oil content and exceptional quality. Sudan is a major player in the global sesame export market. We take full responsibility for the export of sesame from Sudan's growing regions, ensuring that all quality, efficiency, and export criteria are met according to international standards.
</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 space-y-4 mt-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 top-6 left-0"
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="text-center mt-4 wrapper">
<h3 class="text-purple font-bold pt-4 text-xl mb-2">
WHY RED SESAME IS YOUR ULTIMATE CHOICE
</h3>
<h2
class="md:text-[54px] text-[36px] tracking-[1px] font-bold md:mb-4 mb-2"
>
RED SESAME
</h2>
<p class="text-gray-700 text-lg font-semibold px-2">
Our mission is to provide our customers with the highest quality products and service, red sesame seeds<br> are carefully selected for their quality and flavor, ensuring that our customers receive the <br>freshest and most delicious red sesame seeds on the market.
</p>
<p class="text-gray-700 text-lg font-semibold px-2 text-purple pt-2">
Origin: Sudan - Western States
</p>
<p class="text-gray-700 text-lg font-semibold px-2 text-dark-gray pt-2">
Packing 50KG/bag
</p>
</div>
</section>
<!-- Web Section -->
<section class="wrapper space-x-20 mt-4 hidden 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-[40px] w-full h-full mt-5"
src="public/inner-products/Red-Sesame1.webp"
/>
</div>
<div class="w-[210px] reveal fade-bottom">
<img
class="rounded-[48px] mb-[30px]"
src="public/inner-products/Red-Sesame2.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="md:hidden wrapper">
<img
class="reveal popOut rounded-[84px] w-full h-full mt-4"
src="public/inner-products/Red-Sesame1.webp"
/>
<div class="reveal fade-left mt-[32px]">
<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-[84px] reveal fade-right mt-4 mb-[32px] mx-auto w-full h-full object-contain"
src="public/inner-products/Red-Sesame2.webp"
/>
<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="wrapper flex flex-col md:flex-row md:my-16 my-8 md:space-x-10 border-box max-sm:overflow-hidden"
>
<div class="md:w-[45%] reveal fade-left">
<h4 class="text-purple font-semibold pt-2 text-[22px] mb-2">
Specifications
</h4>
<h2 class="text-[36px] tracking-[1px] font-bold">Red Sesame </h2>
<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>Oil Content Min</h5>
</div>
<span class="pl-[20px]">- 52-55%</span>
</div>
<div class=" ">
<div class="flex items-center space-x-2">
<span class="w-3 h-[2px] bg-purple"></span>
<h5>Moisture</h5>
</div>
<span class="pl-[20px]">- 5% max</span>
</div>
<div class=" ">
<div class="flex items-center space-x-2">
<span class="w-3 h-[2px] bg-purple"></span>
<h5>Admixture Max</h5>
</div>
<span class="pl-[20px]">- 1% max</span>
</div>
<div class="">
<div class="flex items-center space-x-2">
<span class="w-3 h-[2px] bg-purple"></span>
<h5>Purity Min</h5>
</div>
<span class="pl-[20px]">- 99% min</span>
</div>
<div class="">
<div class="flex items-center space-x-2">
<span class="w-3 h-[2px] bg-purple"></span>
<h5>Foreign Matter Max</h5>
</div>
<span class="pl-[20px]">- 0.5% max</span>
</div>
<div class="">
<div class="flex items-center space-x-2">
<span class="w-3 h-[2px] bg-purple"></span>
<h5>FFA (Free Fatty Acids) Max</h5>
</div>
<span class="pl-[20px]">- 1% max</span>
</div>
</div>
</div>
<div
class="flex flex-1 space-x-4 items-center mt-4 md:mt-0 reveal fade-right"
>
<img
class="rounded-[46px] w-[52%]"
src="public/inner-products/Red-Sesame3.webp"
/>
<img
class="rounded-[46px] w-[45%] object-contain md:[250px]"
src="public/inner-products/Red-Sesame4.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="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>Home</a>
<a>Who We Are</a>
<a>Products</a>
<a>Our Businesses</a>
<a>Blog</a>
<a>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>White Refined Sugar</a>
<a>White Crystal Sugar</a>
<a>Proboiled Rice</a>
<a>Short Grain Swarna</a>
<a>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>Home</a>
<a>Who We Are</a>
<a>Products</a>
<a>Our Businesses</a>
<a>Blog</a>
<a>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>White Refined Sugar</a>
<a>White Crystal Sugar</a>
<a>Proboiled Rice</a>
<a>Short Grain Swarna</a>
<a>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>