File: /home/aliazzsr/html.vqode.com/Pankore/blogListing.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="blog-detail-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 active" 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>
<div
class="blog-banner-image md:h-[80vh] md:max-h-[750px] md:min-h-[650px] min-h-[425px] pt-16 md:pt-4"
>
<div
class="flex flex-col items-center justify-center h-full px-3 text-white max-sm:pt-24 wrapper banner-content-animation"
>
<h1
class="md:text-[92px] text-[36px] font-bold tracking-[1px] md:-mt-10 mb-2"
>
BLOG FEEDS
</h1>
<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-2"
type="button"
>
<span>CONTACT US</span> <span class="text-lg">+</span>
</a>
</div>
</div>
</section>
<div class="relative w-screen">
<img
src="public/blog/page-bg.webp"
class="absolute right-0 hidden md:block top-8 -z-10"
/>
</div>
<section class="relative max-w-[1300px] md:px-10 px-[15px] mx-auto">
<div class="z-30 mt-4 text-center">
<h3 class="pt-4 mb-2 text-xl font-bold text-purple">SEE OUR</h3>
<h2
class="md:text-[54px] text-[36px] tracking-[1px] font-bold md:mb-4 mb-2"
>
COMPANY BLOGS
</h2>
<!-- <p class="px-2 text-lg font-semibold text-gray-700">
Welcome to our internet homepage. We are delighted to have you here
and excited
</p>
<p class="text-lg font-semibold text-gray-700">
to present our range of products. As a leading supplier.
</p> -->
</div>
<div class="grid grid-cols-1 gap-10 my-12 md:grid-cols-3">
<div class="">
<div class="w-full max-h-[250px] relative overflow-hidden">
<a href="blogDetail.html"><img
class="object-cover w-full h-full image-hover-zoom"
src="public/blog/blog-list1.webp"
/></a>
<!-- <h4
class="absolute left-3 bottom-3 bg-white text-purple text-[16px] font-semibold py-2 px-2.5"
>
September 20, 2021
</h4> -->
</div>
<!-- <div class="bg-white shadow-md px-[30px] py-[20px]">
<h3 class="font-semibold text-zinc-600">Adam Smith</h3>
<h2 class="font-bold text-[26px] py-2.5">
Top 15 secrete business ideas next level
</h2>
<a
href="blogDetail.html"
href="blogDetail.html"
class="font-bold underline text-purple underline-offset-2"
>Read More</a
>
</div> -->
</div>
<div class="">
<div class="w-full max-h-[250px] relative overflow-hidden">
<a href="blogDetail.html"><img
class="object-cover w-full h-full image-hover-zoom"
src="public/blog/blog-list2.webp"
/></a>
<!-- <h4
class="absolute left-3 bottom-3 bg-white text-purple text-[16px] font-semibold py-2 px-2.5"
>
September 20, 2021
</h4> -->
</div>
<!-- <div class="bg-white shadow-md px-[30px] py-[20px]">
<h3 class="font-semibold text-zinc-600">Adam Smith</h3>
<h2 class="font-bold text-[26px] py-2.5">
Top 15 secrete business ideas next level
</h2>
<a
href="blogDetail.html"
class="font-bold underline text-purple underline-offset-2"
>Read More</a
>
</div> -->
</div>
<div class="">
<div class="w-full max-h-[250px] relative overflow-hidden">
<a href="blogDetail.html"><img
class="object-cover w-full h-full image-hover-zoom"
src="public/blog/blog-list3.webp"
/></a>
<!-- <h4
class="absolute left-3 bottom-3 bg-white text-purple text-[16px] font-semibold py-2 px-2.5"
>
September 20, 2021
</h4> -->
</div>
<!-- <div class="bg-white shadow-md px-[30px] py-[20px]">
<h3 class="font-semibold text-zinc-600">Adam Smith</h3>
<h2 class="font-bold text-[26px] py-2.5">
Top 15 secrete business ideas next level
</h2>
<a
href="blogDetail.html"
class="font-bold underline text-purple underline-offset-2"
>Read More</a
>
</div> -->
</div>
<div class="">
<div class="w-full max-h-[250px] relative overflow-hidden">
<a href="blogDetail.html"><img
class="object-cover w-full h-full image-hover-zoom"
src="public/blog/blog-list4.webp"
/></a>
<!-- <h4
class="absolute left-3 bottom-3 bg-white text-purple text-[16px] font-semibold py-2 px-2.5"
>
September 20, 2021
</h4> -->
</div>
<!-- <div class="bg-white shadow-md px-[30px] py-[20px]">
<h3 class="font-semibold text-zinc-600">Adam Smith</h3>
<h2 class="font-bold text-[26px] py-2.5">
Top 15 secrete business ideas next level
</h2>
<a
href="blogDetail.html"
class="font-bold underline text-purple underline-offset-2"
>Read More</a
>
</div> -->
</div>
<div class="">
<div class="w-full max-h-[250px] relative overflow-hidden">
<a href="blogDetail.html"><img
class="object-cover w-full h-full image-hover-zoom"
src="public/blog/blog-list5.webp"
/></a>
<!-- <h4
class="absolute left-3 bottom-3 bg-white text-purple text-[16px] font-semibold py-2 px-2.5"
>
September 20, 2021
</h4> -->
</div>
<!-- <div class="bg-white shadow-md px-[30px] py-[20px]">
<h3 class="font-semibold text-zinc-600">Adam Smith</h3>
<h2 class="font-bold text-[26px] py-2.5">
Top 15 secrete business ideas next level
</h2>
<a
href="blogDetail.html"
class="font-bold underline text-purple underline-offset-2"
>Read More</a
>
</div> -->
</div>
<div class="">
<div class="w-full max-h-[250px] relative overflow-hidden">
<a href="blogDetail.html"><img
class="object-cover w-full h-full image-hover-zoom"
src="public/blog/blog-list6.webp"
/></a>
<!-- <h4
class="absolute left-3 bottom-3 bg-white text-purple text-[16px] font-semibold py-2 px-2.5"
>
September 20, 2021
</h4> -->
</div>
<!-- <div class="bg-white shadow-md px-[30px] py-[20px]">
<h3 class="font-semibold text-zinc-600">Adam Smith</h3>
<h2 class="font-bold text-[26px] py-2.5">
Top 15 secrete business ideas next level
</h2>
<a
href="blogDetail.html"
class="font-bold underline text-purple underline-offset-2"
>Read More</a
>
</div> -->
</div>
<div class="">
<div class="w-full max-h-[250px] relative overflow-hidden">
<a href="blogDetail.html"><img
class="object-cover w-full h-full image-hover-zoom"
src="public/blog/blog-list7.webp"
/></a>
<!-- <h4
class="absolute left-3 bottom-3 bg-white text-purple text-[16px] font-semibold py-2 px-2.5"
>
September 20, 2021
</h4> -->
</div>
<!-- <div class="bg-white shadow-md px-[30px] py-[20px]">
<h3 class="font-semibold text-zinc-600">Adam Smith</h3>
<h2 class="font-bold text-[26px] py-2.5">
Top 15 secrete business ideas next level
</h2>
<a
href="blogDetail.html"
class="font-bold underline text-purple underline-offset-2"
>Read More</a
>
</div> -->
</div>
<div class="">
<div class="w-full max-h-[250px] relative overflow-hidden">
<a href="blogDetail.html"><img
class="object-cover w-full h-full image-hover-zoom"
src="public/blog/blog-list8.webp"
/></a>
<!-- <h4
class="absolute left-3 bottom-3 bg-white text-purple text-[16px] font-semibold py-2 px-2.5"
>
September 20, 2021
</h4> -->
</div>
<!-- <div class="bg-white shadow-md px-[30px] py-[20px]">
<h3 class="font-semibold text-zinc-600">Adam Smith</h3>
<h2 class="font-bold text-[26px] py-2.5">
Top 15 secrete business ideas next level
</h2>
<a
href="blogDetail.html"
class="font-bold underline text-purple underline-offset-2"
>Read More</a
>
</div> -->
</div>
<div class="">
<div class="w-full max-h-[250px] relative overflow-hidden">
<a href="blogDetail.html"><img
class="object-cover w-full h-full image-hover-zoom"
src="public/blog/blog-list1.webp"
/></a>
<!-- <h4
class="absolute left-3 bottom-3 bg-white text-purple text-[16px] font-semibold py-2 px-2.5"
>
September 20, 2021
</h4> -->
</div>
<!-- <div class="bg-white shadow-md px-[30px] py-[20px]">
<h3 class="font-semibold text-zinc-600">Adam Smith</h3>
<h2 class="font-bold text-[26px] py-2.5">
Top 15 secrete business ideas next level
</h2>
<a class="font-bold underline text-purple underline-offset-2"
>Read More</a
>
</div> -->
</div>
</div>
</section>
</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]">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 class="flex justify-between mb-1.5">
<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> -->
<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>