- >
PIXORUS
CUSTOMER SATISFACTION
src="https://plus.unsplash.com/premium_photo-1661866803933-17fc0cf78150?q=80&w=1374&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="" class="w-10 h-10 rounded-full bg-red-400">-
Diego Morata
- Chart
- Orders
</section>
<section class="grid grid-cols-5 gap-3 items-stretch mt-2 pb-4 border-b-[2px] border-[#dde2e6]">
<div class="bg-white p-5">
<ul class="flex flex-col justify-between h-full">
<li class="border-b-2 py-2 text-sm font-bold ">
<a href="#" class="flex justify-between w-full">Traditional Wear
<i class="fa-solid fa-caret-down text-gray-400"></i></a>
</a>
</li>
<li class="border-b-2 py-2 text-sm font-bold ">
<a href="#" class="flex justify-between w-full">Western Wear</a>
</li>
<li class="border-b-2 py-2 text-sm font-bold ">
<a href="#">Swim & Bachwear
<i class="fa-solid fa-caret-down text-gray-400"></i>
</a>
</li>
<li class="border-b-2 py-2 text-sm font-bold ">
<a href="#" class="flex justify-between w-full">Winter & Seasonal Wear
<i class="fa-solid fa-caret-down text-gray-400"></i>
</a>
</li>
<li class="border-b-2 py-2 text-sm font-bold ">
<a href="#" class="flex justify-between w-full">Beauty & Groomng
<i class="fa-solid fa-caret-down text-gray-400"></i>
</a>
</li>
<li class="border-b-2 py-2 text-sm font-bold ">
<a href="#" class="flex justify-between w-full">Juwellery
<i class="fa-solid fa-caret-down text-gray-400"></i>
</a>
</li>
<li class="border-b-2 py-2 text-sm font-bold ">
<a href="#" class="flex justify-between w-full">Personal care Appliaces
<i class="fa-solid fa-caret-down text-gray-400"></i>
</a>
</li>
<li class="border-b-2 py-2 text-sm font-bold ">
<a href="#" class="flex justify-between w-full">Interantional Brands
<i class="fa-solid fa-caret-down text-gray-400"></i>
</a>
</li>
<li class="border-b-2 py-2 text-sm font-bold ">
<a href="#" class="flex justify-between w-full">Foot Wear
<i class="fa-solid fa-caret-down text-gray-400"></i>
</a>
</li>
<li class="border-b-2 py-2 text-sm font-bold ">
<a href="#" class="flex justify-between w-full">Wacthes
<i class="fa-solid fa-caret-down text-gray-400"></i>
</a>
</li>
<li class="border-b-2 py-2 text-sm font-bold ">
<a href="#" class="flex justify-between w-full">Accessories
<i class="fa-solid fa-caret-down text-gray-400"></i>
</a>
</li>
</ul>
</div>
<div class=" col-span-3 fle">
<div class="flex justify-between w-full items-center bg-[#b6dddc]">
<div class="banner-text w-[50%] pl-5">
<p class="font-bold">Biggest Offer Revealed</p>
<h1 class="text-3xl font-bold ">More Deals Inside Up to 50%</h1>
<button class=" text-gray-400 text-xs mt-10">Whistlist Now >></button>
</div>
<div class="h-[300px] w-auto object-fill">
<img class="h-full w-auto object-fill"
src="../images/pexels-polina-tankilevitch-6700403-removebg-preview.png" alt="">
</div>
</div>
<div class="grid grid-cols-3 gap-3 mt-3">
<div class="bg-[#ecd8d9] h-44 bg-no-repeat bg-right-bottom flex flex-col justify-between"
style="background-image: url('/images/bag-img.PNG');background-size:100px;">
<div class="p-6">
<h3 class="font-bold">Up to 30% off</h3>
<p class="font-semibold text-xs">For all hand purses</p>
</div>
<h2 class="text-lg font-semibold p-6">Avaken</h2>
</div>
<!-- <img src="../images/bag-img.PNG" alt="" class="h-56"> -->
<div class="bg-[#e2e2e2] h-44 bg-no-repeat
bg-opacity-5
bg-right-bottom flex flex-col justify-between"
style="background-image: url('/images/watch.png');background-size:150px;">
<div class="p-2">
<h3 class="font-bold">Explore <br> the biggest <br> discount</h3>
<p class="font-semibold text-xs">Time Zone</p>
</div>
<h2 class="text-lg font-semibold p-2">Iconic</h2>
</div>
<div class="bg-[#dde9d1] h-44 bg-no-repeat bg-right-bottom flex flex-col justify-end"
style="background-image: url('/images/lamp.png');background-size:100px;">
<div class="p-6">
<h3 class="font-bold">Dont miss the <br> year end sell</h3>
<p class="font-semibold text-xs">For all hand purses</p>
</div>
</div>
</div>
</div>
<div class=" px-5 flex flex-col justify-between">
<h1 class="font-bold ">Recently Viewed</h1>
<div class="bg-white h-48 flex flex-col justify-center items-center gap-5">
<img src="../images/ladies-bag.png" alt="" class="h-28">
<h1 class="font-bold text-xs ">See your browsing history</h1>
</div>
<h1 class="font-bold">Suggestions for You</h1>
<div>
<div class="bg-white h-48 flex flex-col justify-center items-center gap-5">
<img src="../images/ladies-bag.png" alt="" class="h-28">
<h1 class="font-bold text-xs ">See your browsing history</h1>
</div>
</div>
</div>
</section>
<section class="flex gap-3 my-3">
<div class="flex flex-col items-center bg-white">
<img src="../images/gucci.png" alt="" class="h-[150px] w-[350px]">
<div class="py-5">
<h4 class="font-bold text-xs">Red Leather GUCCI bag</h4>
<p class=" text-[10px] font-bold text-gray-400">45K USD</p>
</div>
</div>
<div class="flex flex-col items-center bg-white">
<img src="../images/cream.png" alt="" class="h-[150px] w-[350px]">
<div class="py-5">
<h4 class="font-bold text-xs">Red Leather GUCCI bag</h4>
<p class=" text-[10px] font-bold text-gray-400">45K USD</p>
</div>
</div>
<div class="flex flex-col items-center bg-white">
<img src="../images/camera.png" alt="" class="h-[150px] w-[350px]">
<div class="py-5">
<h4 class="font-bold text-xs">Red Leather GUCCI bag</h4>
<p class=" text-[10px] font-bold text-gray-400">45K USD</p>
</div>
</div>
<div class="flex flex-col items-center bg-white">
<img src="../images/shoes.png" alt="" class="h-[150px] w-[350px]">
<div class="py-5">
<h4 class="font-bold text-xs">Red Leather GUCCI bag</h4>
<p class=" text-[10px] font-bold text-gray-400">45K USD</p>
</div>
</div>
<div class="flex flex-col items-center bg-white">
<img src="../images/wallet.png" alt="" class="h-[150px] w-[350px]">
<div class="py-5">
<h4 class="font-bold text-xs">Red Leather GUCCI bag</h4>
<p class=" text-[10px] font-bold text-gray-400">45K USD</p>
</div>
</div>
</section>
<section>
<h1 class="font-bold text-xl">Deals of the Day | <span class="text-orange-700">20 : 45 : 12 Left</span></h1>
</section>
</main>
<script src="https://kit.fontawesome.com/e4a865e267.js" crossorigin="anonymous"></script>
Top comments (0)