shopify-html/search.html

326 lines
25 KiB
HTML
Raw Permalink Normal View History

2024-03-11 07:58:44 +00:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com/3.4.1"></script>
<script src="./tailwind-config.js"></script>
<title>MVP 1</title>
</head>
<body>
<!-- header -->
<header class="bg-black">
<div class="container mx-auto">
<nav class="flex items-center py-5.5">
<div class="w-27.5">
<img class="w-full" src="./assets/images/logo.svg" alt="logo">
</div>
<div class="flex justify-center gap-x-9 w-full lg:-ml-27.5">
<a href="#" class="text-white text-lg leading-5.5 font-ms font-light">Product Catalog</a>
<a href="#" class="text-white text-lg leading-5.5 font-ms font-light">For Resellers</a>
<a href="#" class="text-white text-lg leading-5.5 font-ms font-light">For Suppliers</a>
<a href="#" class="text-white text-lg leading-5.5 font-ms font-light">Blog</a>
<a href="#" class="text-white text-lg leading-5.5 font-ms font-light">Need Help?</a>
</div>
</nav>
</div>
</header>
<!-- end header -->
<!-- section-1 product catalog section-1 -->
<section class="pt-10 pb-12" style="background: linear-gradient(180deg, #F2E8FF 0%, #F8F3FF 0.01%, #F8F2FF 0.02%, #F5E8FF 44%, #F1DBFF 100%);">
<div class="container mx-auto">
<!-- search bar section-1 -->
<div class="flex items-center gap-2.5">
<button class="flex shrink-0 justify-center items-center bg-white w-10 h-10 rounded-full">
<img class="max-w-[1.563rem]" src="./assets/images/arrow-left-icon.svg" alt="arrow">
</button>
<div class="relative w-full">
<input class="px-[3.75rem] py-4 w-full border-[0.7px] outline-none border-grey5 rounded-lg text-black text-xl leading-6 font-ms font-normal placeholder:text-grey5" placeholder="Search for beauty products, brands, and more..." type="text">
<div class="absolute left-4 top-1/2 -translate-y-1/2">
<img src="./assets/images/search-grey-icon.svg" alt="search">
</div>
<button class="absolute right-4 top-1/2 -translate-y-1/2">
<img src="./assets/images/cross-grey-icon.svg" alt="cross">
</button>
<!-- uncomment below line to see search suggestion items, below the search bar -->
<!-- <div class="absolute top-[4.125rem] left-0 z-10 flex flex-col gap-y-3.5 w-full bg-white py-4.5 px-3.5 rounded-lg border-[0.7px] border-grey5">
<div class="flex items-center gap-3.5 cursor-pointer">
<div class="w-[4.688rem] h-[4.688rem] flex justify-center items-center border-[0.5px] border-grey5">
<img class="w-9" src="./assets/images/product1.png" alt="product">
</div>
<div>
<p class="text-pink1 text-lg leading-5.5 font-ms font-semibold">AVOSKIN</p>
<p class="text-black text-lg leading-5.5 font-ms font-normal mt-0.5">Your Skin Bae Serum - Alpha Abutin 3% + Grapeseed | 30 ml</p>
</div>
</div>
<div class="flex items-center gap-3.5 cursor-pointer">
<div class="w-[4.688rem] h-[4.688rem] flex justify-center items-center border-[0.5px] border-grey5">
<img class="w-9" src="./assets/images/product1.png" alt="product">
</div>
<div>
<p class="text-pink1 text-lg leading-5.5 font-ms font-semibold">AVOSKIN</p>
<p class="text-black text-lg leading-5.5 font-ms font-normal mt-0.5">Your Skin Bae Serum - Alpha Abutin 3% + Grapeseed | 30 ml</p>
</div>
</div>
<div class="flex items-center gap-3.5 cursor-pointer">
<div class="w-[4.688rem] h-[4.688rem] flex justify-center items-center border-[0.5px] border-grey5">
<img class="w-9" src="./assets/images/product1.png" alt="product">
</div>
<div>
<p class="text-pink1 text-lg leading-5.5 font-ms font-semibold">AVOSKIN</p>
<p class="text-black text-lg leading-5.5 font-ms font-normal mt-0.5">Your Skin Bae Serum - Alpha Abutin 3% + Grapeseed | 30 ml</p>
</div>
</div>
</div> -->
</div>
<button class="bg-purple2 px-6 py-2 rounded-[1.25rem]">
<span class="text-white text-xl leading-6 font-ms font-normal">Search</span>
</button>
<button class="flex shrink-0 justify-center items-center bg-white w-10 h-10 rounded-full">
<img class="max-w-[1.563rem]" src="./assets/images/share-icon.svg" alt="arrow">
</button>
</div>
<!-- end search bar section-1 -->
<!-- tabs section-1 -->
<div class="flex justify-center items-center mt-10">
<button class="text-center pt-1 pb-6 w-1/4">
<p class="text-grey6 text-lg leading-5.5 font-ms font-normal">Explore by Category</p>
</button>
<button class="text-center pt-1 pb-6 w-1/4 border-b-[0.188rem] border-purple2">
<p class="text-black text-lg leading-5.5 font-ms font-medium">Discover Top Brands</p>
</button>
<button class="text-center pt-1 pb-6 w-1/4">
<p class="text-grey6 text-lg leading-5.5 font-ms font-normal">Solutions for Your Concerns</p>
</button>
<button class="text-center pt-1 pb-6 w-1/4">
<p class="text-grey6 text-lg leading-5.5 font-ms font-normal">Raena Exclusives</p>
</button>
</div>
<!-- end tabs section-1 -->
<!-- CATEGORY section-1 -->
<div class="flex">
<div class="pt-5">
<p class="text-grey6 text-base leading-5 font-ms font-normal">Search results for <span class="text-black font-medium">“Avoskin”</span> - 5,200 items founds</p>
<div class="flex gap-x-10 gap-y-4 flex-wrap mt-5">
<div class="flex flex-col justify-end w-[12.813rem] bg-white">
<div class="px-2.5 pt-3 pb-3">
<img class="mx-auto w-[6.25rem]" src="./assets/images/product1.png" alt="product">
<p class="text-pink1 text-[0.688rem] leading-3.5 font-ms font-semibold mt-3">AVOSKIN</p>
<p class="text-black text-[0.688rem] leading-3.5 font-ms font-normal mt-2">Your Skin Bae Serum - Alpha Abutin 3% + Grapeseed | 30 ml</p>
<div class="flex justify-between items-center mt-2">
<p class="text-black text-[0.688rem] leading-3.5 font-ms font-semibold">Rp 199.000</p>
<p class="text-grey3 text-[0.563rem] leading-3 font-ms font-normal line-through">Rp 259.000</p>
</div>
</div>
<button class="bg-purple2 w-full p-2 text-white text-xs leading-3.5 font-ms font-semibold">Notify Me!</button>
</div>
<div class="flex flex-col justify-end w-[12.813rem] bg-white">
<div class="px-2.5 pt-3 pb-3">
<img class="mx-auto w-[6.25rem]" src="./assets/images/product1.png" alt="product">
<p class="text-pink1 text-[0.688rem] leading-3.5 font-ms font-semibold mt-3">AVOSKIN</p>
<p class="text-black text-[0.688rem] leading-3.5 font-ms font-normal mt-2">Your Skin Bae Serum - Alpha Abutin 3% + Grapeseed | 30 ml</p>
<div class="flex justify-between items-center mt-2">
<p class="text-black text-[0.688rem] leading-3.5 font-ms font-semibold">Rp 199.000</p>
<p class="text-grey3 text-[0.563rem] leading-3 font-ms font-normal line-through">Rp 259.000</p>
</div>
</div>
<button class="bg-purple2 w-full p-2 text-white text-xs leading-3.5 font-ms font-semibold">Notify Me!</button>
</div>
<div class="flex flex-col justify-end w-[12.813rem] bg-white">
<div class="px-2.5 pt-3 pb-3">
<img class="mx-auto w-[6.25rem]" src="./assets/images/product1.png" alt="product">
<p class="text-pink1 text-[0.688rem] leading-3.5 font-ms font-semibold mt-3">AVOSKIN</p>
<p class="text-black text-[0.688rem] leading-3.5 font-ms font-normal mt-2">Your Skin Bae Serum - Alpha Abutin 3% + Grapeseed | 30 ml</p>
<div class="flex justify-between items-center mt-2">
<p class="text-black text-[0.688rem] leading-3.5 font-ms font-semibold">Rp 199.000</p>
<p class="text-grey3 text-[0.563rem] leading-3 font-ms font-normal line-through">Rp 259.000</p>
</div>
</div>
<button class="bg-purple2 w-full p-2 text-white text-xs leading-3.5 font-ms font-semibold">Notify Me!</button>
</div>
<div class="flex flex-col justify-end w-[12.813rem] bg-white">
<div class="px-2.5 pt-3 pb-3">
<img class="mx-auto w-[6.25rem]" src="./assets/images/product1.png" alt="product">
<p class="text-pink1 text-[0.688rem] leading-3.5 font-ms font-semibold mt-3">AVOSKIN</p>
<p class="text-black text-[0.688rem] leading-3.5 font-ms font-normal mt-2">Your Skin Bae Serum - Alpha Abutin 3% + Grapeseed | 30 ml</p>
<div class="flex justify-between items-center mt-2">
<p class="text-black text-[0.688rem] leading-3.5 font-ms font-semibold">Rp 199.000</p>
<p class="text-grey3 text-[0.563rem] leading-3 font-ms font-normal line-through">Rp 259.000</p>
</div>
</div>
<button class="bg-purple2 w-full p-2 text-white text-xs leading-3.5 font-ms font-semibold">Notify Me!</button>
</div>
<div class="flex flex-col justify-end w-[12.813rem] bg-white">
<div class="px-2.5 pt-3 pb-3">
<img class="mx-auto w-[6.25rem]" src="./assets/images/product1.png" alt="product">
<p class="text-pink1 text-[0.688rem] leading-3.5 font-ms font-semibold mt-3">AVOSKIN</p>
<p class="text-black text-[0.688rem] leading-3.5 font-ms font-normal mt-2">Your Skin Bae Serum - Alpha Abutin 3% + Grapeseed | 30 ml</p>
<div class="flex justify-between items-center mt-2">
<p class="text-black text-[0.688rem] leading-3.5 font-ms font-semibold">Rp 199.000</p>
<p class="text-grey3 text-[0.563rem] leading-3 font-ms font-normal line-through">Rp 259.000</p>
</div>
</div>
<button class="bg-purple2 w-full p-2 text-white text-xs leading-3.5 font-ms font-semibold">Notify Me!</button>
</div>
<div class="flex flex-col justify-end w-[12.813rem] bg-white">
<div class="px-2.5 pt-3 pb-3">
<img class="mx-auto w-[6.25rem]" src="./assets/images/product1.png" alt="product">
<p class="text-pink1 text-[0.688rem] leading-3.5 font-ms font-semibold mt-3">AVOSKIN</p>
<p class="text-black text-[0.688rem] leading-3.5 font-ms font-normal mt-2">Your Skin Bae Serum - Alpha Abutin 3% + Grapeseed | 30 ml</p>
<div class="flex justify-between items-center mt-2">
<p class="text-black text-[0.688rem] leading-3.5 font-ms font-semibold">Rp 199.000</p>
<p class="text-grey3 text-[0.563rem] leading-3 font-ms font-normal line-through">Rp 259.000</p>
</div>
</div>
<button class="bg-purple2 w-full p-2 text-white text-xs leading-3.5 font-ms font-semibold">Notify Me!</button>
</div>
<div class="flex flex-col justify-end w-[12.813rem] bg-white">
<div class="px-2.5 pt-3 pb-3">
<img class="mx-auto w-[6.25rem]" src="./assets/images/product1.png" alt="product">
<p class="text-pink1 text-[0.688rem] leading-3.5 font-ms font-semibold mt-3">AVOSKIN</p>
<p class="text-black text-[0.688rem] leading-3.5 font-ms font-normal mt-2">Your Skin Bae Serum - Alpha Abutin 3% + Grapeseed | 30 ml</p>
<div class="flex justify-between items-center mt-2">
<p class="text-black text-[0.688rem] leading-3.5 font-ms font-semibold">Rp 199.000</p>
<p class="text-grey3 text-[0.563rem] leading-3 font-ms font-normal line-through">Rp 259.000</p>
</div>
</div>
<button class="bg-purple2 w-full p-2 text-white text-xs leading-3.5 font-ms font-semibold">Notify Me!</button>
</div>
<div class="flex flex-col justify-end w-[12.813rem] bg-white">
<div class="px-2.5 pt-3 pb-3">
<img class="mx-auto w-[6.25rem]" src="./assets/images/product1.png" alt="product">
<p class="text-pink1 text-[0.688rem] leading-3.5 font-ms font-semibold mt-3">AVOSKIN</p>
<p class="text-black text-[0.688rem] leading-3.5 font-ms font-normal mt-2">Your Skin Bae Serum - Alpha Abutin 3% + Grapeseed | 30 ml</p>
<div class="flex justify-between items-center mt-2">
<p class="text-black text-[0.688rem] leading-3.5 font-ms font-semibold">Rp 199.000</p>
<p class="text-grey3 text-[0.563rem] leading-3 font-ms font-normal line-through">Rp 259.000</p>
</div>
</div>
<button class="bg-purple2 w-full p-2 text-white text-xs leading-3.5 font-ms font-semibold">Notify Me!</button>
</div>
<div class="flex flex-col justify-end w-[12.813rem] bg-white">
<div class="px-2.5 pt-3 pb-3">
<img class="mx-auto w-[6.25rem]" src="./assets/images/product1.png" alt="product">
<p class="text-pink1 text-[0.688rem] leading-3.5 font-ms font-semibold mt-3">AVOSKIN</p>
<p class="text-black text-[0.688rem] leading-3.5 font-ms font-normal mt-2">Your Skin Bae Serum - Alpha Abutin 3% + Grapeseed | 30 ml</p>
<div class="flex justify-between items-center mt-2">
<p class="text-black text-[0.688rem] leading-3.5 font-ms font-semibold">Rp 199.000</p>
<p class="text-grey3 text-[0.563rem] leading-3 font-ms font-normal line-through">Rp 259.000</p>
</div>
</div>
<button class="bg-purple2 w-full p-2 text-white text-xs leading-3.5 font-ms font-semibold">Notify Me!</button>
</div>
<div class="flex flex-col justify-end w-[12.813rem] bg-white">
<div class="px-2.5 pt-3 pb-3">
<img class="mx-auto w-[6.25rem]" src="./assets/images/product1.png" alt="product">
<p class="text-pink1 text-[0.688rem] leading-3.5 font-ms font-semibold mt-3">AVOSKIN</p>
<p class="text-black text-[0.688rem] leading-3.5 font-ms font-normal mt-2">Your Skin Bae Serum - Alpha Abutin 3% + Grapeseed | 30 ml</p>
<div class="flex justify-between items-center mt-2">
<p class="text-black text-[0.688rem] leading-3.5 font-ms font-semibold">Rp 199.000</p>
<p class="text-grey3 text-[0.563rem] leading-3 font-ms font-normal line-through">Rp 259.000</p>
</div>
</div>
<button class="bg-purple2 w-full p-2 text-white text-xs leading-3.5 font-ms font-semibold">Notify Me!</button>
</div>
</div>
<!-- pagination section-1 -->
<div class="flex justify-center gap-x-[0.313rem] mt-7.5">
<button class="min-w-[2.375rem] bg-white px-3.5 py-1.5 border border-grey1 rounded-md text-center">
<span class="text-grey8/30 text-[0.938rem] leading-5 font-ms font-medium">Prev</span>
</button>
<button class="min-w-[2.375rem] bg-white px-3.5 py-1.5 border border-grey1 rounded-md text-center">
<span class="text-grey8 text-[0.938rem] leading-5 font-ms font-medium">First</span>
</button>
<button class="min-w-[2.375rem] bg-purple2 px-3.5 py-1.5 rounded-lg text-center">
<span class="text-white text-[0.938rem] leading-5 font-ms font-semibold">1</span>
</button>
<button class="min-w-[2.375rem] bg-white px-3.5 py-1.5 border border-grey1 rounded-lg text-center">
<span class="text-grey8 text-[0.938rem] leading-5 font-ms font-semibold">2</span>
</button>
<button class="min-w-[2.375rem] bg-white px-3.5 py-1.5 border border-grey1 rounded-lg text-center">
<span class="text-grey8 text-[0.938rem] leading-5 font-ms font-semibold">2</span>
</button>
<button class="min-w-[2.375rem] bg-white px-3.5 py-1.5 border border-grey1 rounded-lg text-center">
<span class="text-grey8 text-[0.938rem] leading-5 font-ms font-semibold">3</span>
</button>
<button class="min-w-[2.375rem] bg-white px-3.5 py-1.5 border border-grey1 rounded-lg text-center">
<span class="text-grey8 text-[0.938rem] leading-5 font-ms font-semibold">...</span>
</button>
<button class="min-w-[2.375rem] bg-white px-3.5 py-1.5 border border-grey1 rounded-lg text-center">
<span class="text-grey8 text-[0.938rem] leading-5 font-ms font-semibold">10</span>
</button>
<button class="min-w-[2.375rem] bg-white px-3.5 py-1.5 border border-grey1 rounded-md text-center">
<span class="text-grey8 text-[0.938rem] leading-5 font-ms font-medium">Next</span>
</button>
<button class="min-w-[2.375rem] bg-white px-3.5 py-1.5 border border-grey1 rounded-md text-center">
<span class="text-grey8 text-[0.938rem] leading-5 font-ms font-medium">Last</span>
</button>
</div>
<!-- end pagination section-1 -->
</div>
</div>
<!-- end CATEGORY section-1 -->
</div>
</section>
<!-- end section-1 product catalog -->
<!-- footer -->
<footer class="bg-black py-[3.25rem]">
<div class="container mx-auto">
<div class="flex">
<div class="w-[30%]">
<div class="w-27.5">
<img class="w-full" src="./assets/images/logo.svg" alt="logo">
</div>
<p class="text-white text-lg leading-[1.625rem] font-ms font-normal mt-7">Start and grow your Beauty Business with Raena!</p>
<div class="flex gap-3 mt-7.5">
<div class="max-w-8">
<img src="./assets/images/facebook-icon.svg" alt="social">
</div>
<div class="max-w-8">
<img src="./assets/images/youtube-icon.svg" alt="social">
</div>
<div class="max-w-8">
<img src="./assets/images/linkedin-icon.svg" alt="social">
</div>
<div class="max-w-8">
<img src="./assets/images/telegram-icon.svg" alt="social">
</div>
<div class="max-w-8">
<img src="./assets/images/instagram-icon.svg" alt="social">
</div>
</div>
</div>
<div class="w-[70%] flex justify-between ml-24">
<div class="flex flex-col gap-3">
<a href="#" class="text-white text-lg leading-[1.625rem] font-ms font-normal">About Us</a>
<a href="#" class="text-white text-lg leading-[1.625rem] font-ms font-normal">How to Become a Reseller</a>
<a href="#" class="text-white text-lg leading-[1.625rem] font-ms font-normal">FAQ</a>
</div>
<div class="flex flex-col gap-3">
<a href="#" class="text-white text-lg leading-[1.625rem] font-ms font-normal">Start an Online Business</a>
<a href="#" class="text-white text-lg leading-[1.625rem] font-ms font-normal">Buying and Selling Distributors</a>
<a href="#" class="text-white text-lg leading-[1.625rem] font-ms font-normal">Dropship Reseller Community</a>
</div>
<div class="flex flex-col gap-3">
<a href="#" class="text-white text-lg leading-[1.625rem] font-ms font-normal">What is Dropship</a>
<a href="#" class="text-white text-lg leading-[1.625rem] font-ms font-normal">What is a Dropshipper</a>
<a href="#" class="text-white text-lg leading-[1.625rem] font-ms font-normal">What is a Reseller</a>
</div>
</div>
</div>
<p class="text-white text-lg leading-5.5 font-ms font-normal mt-7">© Copyright 2012 - 2024 | All rights reserved</p>
</div>
</footer>
<!-- end footer -->
</body>
</html>