diff --git a/index.html b/index.html
index 5161b6d..1c176c2 100644
--- a/index.html
+++ b/index.html
@@ -56,25 +56,25 @@
<div class="h-[2px] w-full bg-bgMain"></div>
</div>
</a>
- <a href="#" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
+ <a href="search.html" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
<p class="px-[10px]">Sake</p>
<div class="px-[50%] transition-all ease duration-[0.4s] group-hover:px-[0%]">
<div class="h-[2px] w-full bg-bgMain"></div>
</div>
</a>
- <a href="#" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
+ <a href="search.html" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
<p class="px-[10px]">Coffe</p>
<div class="px-[50%] transition-all ease duration-[0.4s] group-hover:px-[0%]">
<div class="h-[2px] w-full bg-bgMain"></div>
</div>
</a>
- <a href="#" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
+ <a href="search.html" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
<p class=px-[10px]"">Spirits & Liqueurs</p>
<div class="px-[50%] transition-all ease duration-[0.4s] group-hover:px-[0%]">
<div class="h-[2px] w-full bg-bgMain"></div>
</div>
</a>
- <a href="#" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
+ <a href="search.html" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
<p class="px-[10px]">Wine</p>
<div class="px-[50%] transition-all ease duration-[0.4s] group-hover:px-[0%]">
<div class="h-[2px] w-full bg-bgMain"></div>
@@ -116,7 +116,7 @@
</div>
</div>
<div class="w-full h-[50vh] flex flex-row gap-[10px] mb-[10px] overflow-hidden max-lg:overflow-x-auto hide-scrollbar">
- <a href="#" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="2500" class="min-w-[300px] grow-[1] h-full flex flex-col justify-end items-center relative overflow-hidden group">
+ <a href="search.html" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="2500" class="min-w-[300px] grow-[1] h-full flex flex-col justify-end items-center relative overflow-hidden group">
<div class="w-full h-full max-h-[75%] flex flex-col relative overflow-hidden bg-bgMain2 transition-all ease duration-[0.75s] group-hover:max-h-[90%]">
<img src="./assets/images/bg bb.png" class="w-full h-full absolute inset-[0] object-cover grayscale-[0.75] opacity-[0.05] transition-all ease duration-[1s] group-hover:grayscale-[0] group-hover:opacity-[0.10]"></img>
</div>
@@ -125,7 +125,7 @@
<p class="font-bold text-xl px-[10px] overflow-hidden whitespace-nowrap text-ellipsis transition-all ease duration-[1.2s] group-hover:text-bgMain">Wine</p>
</div>
</a>
- <a href="#" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="3000" class="min-w-[300px] grow-[1] h-full flex flex-col justify-end items-center relative overflow-hidden group">
+ <a href="search.html" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="3000" class="min-w-[300px] grow-[1] h-full flex flex-col justify-end items-center relative overflow-hidden group">
<div class="w-full h-full max-h-[75%] flex flex-col relative overflow-hidden bg-bgMain2 transition-all ease duration-[0.75s] group-hover:max-h-[90%]">
<img src="./assets/images/bg bb.png" class="w-full h-full absolute inset-[0] object-cover grayscale-[0.75] opacity-[0.05] transition-all ease duration-[1s] group-hover:grayscale-[0] group-hover:opacity-[0.10]"></img>
</div>
@@ -134,7 +134,7 @@
<p class="font-bold text-xl px-[10px] overflow-hidden whitespace-nowrap text-ellipsis transition-all ease duration-[1.2s] group-hover:text-bgMain">Sake</p>
</div>
</a>
- <a href="#" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="3500" class="min-w-[300px] grow-[1] h-full flex flex-col justify-end items-center relative overflow-hidden group">
+ <a href="search.html" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="3500" class="min-w-[300px] grow-[1] h-full flex flex-col justify-end items-center relative overflow-hidden group">
<div class="w-full h-full max-h-[75%] flex flex-col relative overflow-hidden bg-bgMain2 transition-all ease duration-[0.75s] group-hover:max-h-[90%]">
<img src="./assets/images/bg bb.png" class="w-full h-full absolute inset-[0] object-cover grayscale-[0.75] opacity-[0.05] transition-all ease duration-[1s] group-hover:grayscale-[0] group-hover:opacity-[0.10]"></img>
</div>
@@ -143,7 +143,7 @@
<p class="font-bold text-xl px-[10px] overflow-hidden whitespace-nowrap text-ellipsis transition-all ease duration-[1.2s] group-hover:text-bgMain">Spirit</p>
</div>
</a>
- <a href="#" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="4000" class="min-w-[300px] grow-[1] h-full flex flex-col justify-end items-center relative overflow-hidden group">
+ <a href="search.html" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="4000" class="min-w-[300px] grow-[1] h-full flex flex-col justify-end items-center relative overflow-hidden group">
<div class="w-full h-full max-h-[75%] flex flex-col relative overflow-hidden bg-bgMain2 transition-all ease duration-[0.75s] group-hover:max-h-[90%]">
<img src="./assets/images/bg bb.png" class="w-full h-full absolute inset-[0] object-cover grayscale-[0.75] opacity-[0.05] transition-all ease duration-[1s] group-hover:grayscale-[0] group-hover:opacity-[0.10]"></img>
</div>
@@ -281,7 +281,7 @@
</div>
<!-- listings list start -->
<div class="w-full flex flex-row justify-center items-center">
- <a href="#" class="w-full max-w-[200px] px-[20px] py-[8px] font-bold bg-bgMain2 text-bgMain text-center overflow-hidden whitespace-nowrap text-ellipsis relative transition-all ease duration-[0.6s] hover:tracking-widest">
+ <a href="search.html" class="w-full max-w-[200px] px-[20px] py-[8px] font-bold bg-bgMain2 text-bgMain text-center overflow-hidden whitespace-nowrap text-ellipsis relative transition-all ease duration-[0.6s] hover:tracking-widest">
View More
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
</a>
@@ -302,7 +302,10 @@
<div class="w-full flex flex-row">
<input type="text" placeholder="Search..." class="w-full bg-black/10 py-[5px] px-[10px] border-b-[1px] border-bgMain2/25 placeholder:text-black/50 transition-all ease duration-[0.4s] focus:outline-[0] focus:bg-black/15"></input>
</div>
- <buttons class="flex flex-col justify-center items-center bg-bgMain2 text-bgMain p-[10px] cursor-pointer relative group"><i class="bx bx-search "></i><span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span></buttons>
+ <a href="search.html" class="flex flex-col justify-center items-center bg-bgMain2 text-bgMain p-[10px] cursor-pointer relative group">
+ <i class="bx bx-search "></i>
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </a>
</div>
<!-- Idea here is if the user selects a product, then the box of selections for type appears, and once a type is select then style box of selections appear, and so on -->
<div class="w-full flex flex-row gap-[25px] flex-wrap">
@@ -471,23 +474,23 @@
<div class="flex flex-col gap-[15px] justify-start items-start">
<p class="">Drinks</p>
<div class="flex flex-row gap-[15px] justify-start items-start flex-wrap">
- <a href="#" class="w-full max-w-[200px] text-base font-bold text-textMain2 relative group">
+ <a href="search.html" class="w-full max-w-[200px] text-base font-bold text-textMain2 relative group">
<div class="py-[5px]"><p class="px-[15px]">Wine</p></div>
<div class="py-[5px] text-bgMain2 absolute inset-[0] bg-bgMain z-[1] w-[0%] overflow-hidden transition-all ease duration-[0.4s] group-hover:w-full"><p class="px-[15px]">Wine</p></div>
</a>
- <a href="#" class="w-full max-w-[200px] text-base font-bold text-textMain2 relative group">
+ <a href="search.html" class="w-full max-w-[200px] text-base font-bold text-textMain2 relative group">
<div class="py-[5px]"><p class="px-[15px]">Sake</p></div>
<div class="py-[5px] text-bgMain2 absolute inset-[0] bg-bgMain z-[1] w-[0%] overflow-hidden transition-all ease duration-[0.4s] group-hover:w-full"><p class="px-[15px]">Sake</p></div>
</a>
- <a href="#" class="w-full max-w-[200px] text-base font-bold text-textMain2 relative group">
+ <a href="search.html" class="w-full max-w-[200px] text-base font-bold text-textMain2 relative group">
<div class="py-[5px]"><p class="px-[15px]">Spirits</p></div>
<div class="py-[5px] text-bgMain2 absolute inset-[0] bg-bgMain z-[1] w-[0%] overflow-hidden transition-all ease duration-[0.4s] group-hover:w-full"><p class="px-[15px]">Spirits</p></div>
</a>
- <a href="#" class="w-full max-w-[200px] text-base font-bold text-textMain2 relative group">
+ <a href="search.html" class="w-full max-w-[200px] text-base font-bold text-textMain2 relative group">
<div class="py-[5px]"><p class="px-[15px]">Coffee</p></div>
<div class="py-[5px] text-bgMain2 absolute inset-[0] bg-bgMain z-[1] w-[0%] overflow-hidden transition-all ease duration-[0.4s] group-hover:w-full"><p class="px-[15px]">Coffee</p></div>
</a>
- <a href="#" class="w-full max-w-[200px] text-base font-bold text-textMain2 relative group">
+ <a href="search.html" class="w-full max-w-[200px] text-base font-bold text-textMain2 relative group">
<div class="py-[5px]"><p class="px-[15px]">Misc</p></div>
<div class="py-[5px] text-bgMain2 absolute inset-[0] bg-bgMain z-[1] w-[0%] overflow-hidden transition-all ease duration-[0.4s] group-hover:w-full"><p class="px-[15px]">Misc</p></div>
</a>
diff --git a/search.html b/search.html
index 627c865..c337d40 100644
--- a/search.html
+++ b/search.html
@@ -64,25 +64,25 @@
<div class="h-[2px] w-full bg-bgMain"></div>
</div>
</a>
- <a href="#" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
+ <a href="search.html" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
<p class="px-[10px]">Sake</p>
<div class="px-[50%] transition-all ease duration-[0.4s] group-hover:px-[0%]">
<div class="h-[2px] w-full bg-bgMain"></div>
</div>
</a>
- <a href="#" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
+ <a href="search.html" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
<p class="px-[10px]">Coffe</p>
<div class="px-[50%] transition-all ease duration-[0.4s] group-hover:px-[0%]">
<div class="h-[2px] w-full bg-bgMain"></div>
</div>
</a>
- <a href="#" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
+ <a href="search.html" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
<p class=px-[10px]"">Spirits & Liqueurs</p>
<div class="px-[50%] transition-all ease duration-[0.4s] group-hover:px-[0%]">
<div class="h-[2px] w-full bg-bgMain"></div>
</div>
</a>
- <a href="#" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
+ <a href="search.html" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
<p class="px-[10px]">Wine</p>
<div class="px-[50%] transition-all ease duration-[0.4s] group-hover:px-[0%]">
<div class="h-[2px] w-full bg-bgMain"></div>
@@ -254,74 +254,74 @@
</div>
<!-- main middle end -->
- <!-- main footer start -->
- <div class="w-full flex flex-col justify-center items-center bg-bgMain2 text-textMain2">
- <div class="w-full flex flex-col justify-center items-center">
- <div class="max-w-[1400px] w-full flex flex-col justify-start items-end px-[10px] relative">
- <div class="w-full py-[50px] flex flex-row gap-[50px] flex-wrap">
- <div class="flex flex-col gap-[15px] justify-start items-start">
- <p class="">Drinks</p>
- <div class="flex flex-row gap-[15px] justify-start items-start flex-wrap">
- <a href="#" class="w-full max-w-[200px] text-base font-bold text-textMain2 relative group">
- <div class="py-[5px]"><p class="px-[15px]">Wine</p></div>
- <div class="py-[5px] text-bgMain2 absolute inset-[0] bg-bgMain z-[1] w-[0%] overflow-hidden transition-all ease duration-[0.4s] group-hover:w-full"><p class="px-[15px]">Wine</p></div>
- </a>
- <a href="#" class="w-full max-w-[200px] text-base font-bold text-textMain2 relative group">
- <div class="py-[5px]"><p class="px-[15px]">Sake</p></div>
- <div class="py-[5px] text-bgMain2 absolute inset-[0] bg-bgMain z-[1] w-[0%] overflow-hidden transition-all ease duration-[0.4s] group-hover:w-full"><p class="px-[15px]">Sake</p></div>
- </a>
- <a href="#" class="w-full max-w-[200px] text-base font-bold text-textMain2 relative group">
- <div class="py-[5px]"><p class="px-[15px]">Spirits</p></div>
- <div class="py-[5px] text-bgMain2 absolute inset-[0] bg-bgMain z-[1] w-[0%] overflow-hidden transition-all ease duration-[0.4s] group-hover:w-full"><p class="px-[15px]">Spirits</p></div>
- </a>
- <a href="#" class="w-full max-w-[200px] text-base font-bold text-textMain2 relative group">
- <div class="py-[5px]"><p class="px-[15px]">Coffee</p></div>
- <div class="py-[5px] text-bgMain2 absolute inset-[0] bg-bgMain z-[1] w-[0%] overflow-hidden transition-all ease duration-[0.4s] group-hover:w-full"><p class="px-[15px]">Coffee</p></div>
- </a>
- <a href="#" class="w-full max-w-[200px] text-base font-bold text-textMain2 relative group">
- <div class="py-[5px]"><p class="px-[15px]">Misc</p></div>
- <div class="py-[5px] text-bgMain2 absolute inset-[0] bg-bgMain z-[1] w-[0%] overflow-hidden transition-all ease duration-[0.4s] group-hover:w-full"><p class="px-[15px]">Misc</p></div>
- </a>
+ <!-- main footer start -->
+ <div class="w-full flex flex-col justify-center items-center bg-bgMain2 text-textMain2">
+ <div class="w-full flex flex-col justify-center items-center">
+ <div class="max-w-[1400px] w-full flex flex-col justify-start items-end px-[10px] relative">
+ <div class="w-full py-[50px] flex flex-row gap-[50px] flex-wrap">
+ <div class="flex flex-col gap-[15px] justify-start items-start">
+ <p class="">Drinks</p>
+ <div class="flex flex-row gap-[15px] justify-start items-start flex-wrap">
+ <a href="search.html" class="w-full max-w-[200px] text-base font-bold text-textMain2 relative group">
+ <div class="py-[5px]"><p class="px-[15px]">Wine</p></div>
+ <div class="py-[5px] text-bgMain2 absolute inset-[0] bg-bgMain z-[1] w-[0%] overflow-hidden transition-all ease duration-[0.4s] group-hover:w-full"><p class="px-[15px]">Wine</p></div>
+ </a>
+ <a href="search.html" class="w-full max-w-[200px] text-base font-bold text-textMain2 relative group">
+ <div class="py-[5px]"><p class="px-[15px]">Sake</p></div>
+ <div class="py-[5px] text-bgMain2 absolute inset-[0] bg-bgMain z-[1] w-[0%] overflow-hidden transition-all ease duration-[0.4s] group-hover:w-full"><p class="px-[15px]">Sake</p></div>
+ </a>
+ <a href="search.html" class="w-full max-w-[200px] text-base font-bold text-textMain2 relative group">
+ <div class="py-[5px]"><p class="px-[15px]">Spirits</p></div>
+ <div class="py-[5px] text-bgMain2 absolute inset-[0] bg-bgMain z-[1] w-[0%] overflow-hidden transition-all ease duration-[0.4s] group-hover:w-full"><p class="px-[15px]">Spirits</p></div>
+ </a>
+ <a href="search.html" class="w-full max-w-[200px] text-base font-bold text-textMain2 relative group">
+ <div class="py-[5px]"><p class="px-[15px]">Coffee</p></div>
+ <div class="py-[5px] text-bgMain2 absolute inset-[0] bg-bgMain z-[1] w-[0%] overflow-hidden transition-all ease duration-[0.4s] group-hover:w-full"><p class="px-[15px]">Coffee</p></div>
+ </a>
+ <a href="search.html" class="w-full max-w-[200px] text-base font-bold text-textMain2 relative group">
+ <div class="py-[5px]"><p class="px-[15px]">Misc</p></div>
+ <div class="py-[5px] text-bgMain2 absolute inset-[0] bg-bgMain z-[1] w-[0%] overflow-hidden transition-all ease duration-[0.4s] group-hover:w-full"><p class="px-[15px]">Misc</p></div>
+ </a>
+ </div>
</div>
- </div>
- <div class="flex flex-col gap-[15px] justify-start items-start">
- <p class="">Pages</p>
- <div class="flex flex-row gap-[15px] justify-start items-start flex-wrap">
- <a href="#" class="w-full max-w-[200px] text-base font-bold text-textMain2 relative group">
- <div class="py-[5px]"><p class="px-[15px]">Events</p></div>
- <div class="py-[5px] text-bgMain2 absolute inset-[0] bg-bgMain z-[1] w-[0%] overflow-hidden transition-all ease duration-[0.4s] group-hover:w-full"><p class="px-[15px]">Events</p></div>
- </a>
- <a href="#" class="w-full max-w-[200px] text-base font-bold text-textMain2 relative group">
- <div class="py-[5px]"><p class="px-[15px]">About</p></div>
- <div class="py-[5px] text-bgMain2 absolute inset-[0] bg-bgMain z-[1] w-[0%] overflow-hidden transition-all ease duration-[0.4s] group-hover:w-full"><p class="px-[15px]">About</p></div>
- </a>
+ <div class="flex flex-col gap-[15px] justify-start items-start">
+ <p class="">Pages</p>
+ <div class="flex flex-row gap-[15px] justify-start items-start flex-wrap">
+ <a href="#" class="w-full max-w-[200px] text-base font-bold text-textMain2 relative group">
+ <div class="py-[5px]"><p class="px-[15px]">Events</p></div>
+ <div class="py-[5px] text-bgMain2 absolute inset-[0] bg-bgMain z-[1] w-[0%] overflow-hidden transition-all ease duration-[0.4s] group-hover:w-full"><p class="px-[15px]">Events</p></div>
+ </a>
+ <a href="#" class="w-full max-w-[200px] text-base font-bold text-textMain2 relative group">
+ <div class="py-[5px]"><p class="px-[15px]">About</p></div>
+ <div class="py-[5px] text-bgMain2 absolute inset-[0] bg-bgMain z-[1] w-[0%] overflow-hidden transition-all ease duration-[0.4s] group-hover:w-full"><p class="px-[15px]">About</p></div>
+ </a>
+ </div>
</div>
- </div>
- <div class="flex flex-col gap-[15px] justify-start items-start">
- <p class="">Legal</p>
- <div class="flex flex-row gap-[15px] justify-start items-start flex-wrap">
- <a href="#" class="w-full max-w-[200px] text-base font-bold text-textMain2 relative group">
- <div class="py-[5px]"><p class="px-[15px]">Terms of Service</p></div>
- <div class="py-[5px] text-bgMain2 absolute inset-[0] bg-bgMain z-[1] w-[0%] overflow-hidden transition-all ease duration-[0.4s] group-hover:w-full"><p class="px-[15px]">Terms of Service</p></div>
- </a>
- <a href="#" class="w-full max-w-[200px] text-base font-bold text-textMain2 relative group">
- <div class="py-[5px]"><p class="px-[15px]">Privacy Policy</p></div>
- <div class="py-[5px] text-bgMain2 absolute inset-[0] bg-bgMain z-[1] w-[0%] overflow-hidden transition-all ease duration-[0.4s] group-hover:w-full"><p class="px-[15px]">Privacy Policy</p></div>
- </a>
+ <div class="flex flex-col gap-[15px] justify-start items-start">
+ <p class="">Legal</p>
+ <div class="flex flex-row gap-[15px] justify-start items-start flex-wrap">
+ <a href="#" class="w-full max-w-[200px] text-base font-bold text-textMain2 relative group">
+ <div class="py-[5px]"><p class="px-[15px]">Terms of Service</p></div>
+ <div class="py-[5px] text-bgMain2 absolute inset-[0] bg-bgMain z-[1] w-[0%] overflow-hidden transition-all ease duration-[0.4s] group-hover:w-full"><p class="px-[15px]">Terms of Service</p></div>
+ </a>
+ <a href="#" class="w-full max-w-[200px] text-base font-bold text-textMain2 relative group">
+ <div class="py-[5px]"><p class="px-[15px]">Privacy Policy</p></div>
+ <div class="py-[5px] text-bgMain2 absolute inset-[0] bg-bgMain z-[1] w-[0%] overflow-hidden transition-all ease duration-[0.4s] group-hover:w-full"><p class="px-[15px]">Privacy Policy</p></div>
+ </a>
+ </div>
</div>
</div>
</div>
</div>
- </div>
- <div class="w-full flex flex-col justify-center items-center border-t-[1px] border-bgMain/10">
- <div class="max-w-[1400px] w-full flex flex-col justify-center items-center px-[10px] relative">
- <div class="w-full p-[15px] flex flex-col justify-center items-center">
- <p class="">Copyright © <script>document.write(new Date().getFullYear())</script> <a href="#" target="_blank" class="font-bold transition-all ease duration-[0.4s] hover:text-linkMain">Cellar Social</a> All Rights Reserved.</p>
+ <div class="w-full flex flex-col justify-center items-center border-t-[1px] border-bgMain/10">
+ <div class="max-w-[1400px] w-full flex flex-col justify-center items-center px-[10px] relative">
+ <div class="w-full p-[15px] flex flex-col justify-center items-center">
+ <p class="">Copyright © <script>document.write(new Date().getFullYear())</script> <a href="#" target="_blank" class="font-bold transition-all ease duration-[0.4s] hover:text-linkMain">Cellar Social</a> All Rights Reserved.</p>
+ </div>
</div>
</div>
</div>
- </div>
- <!-- main footer end -->
+ <!-- main footer end -->
<!-- popups start -->
<div popupID="FilterSearch" class="fixed inset-[0] z-[90] bg-black/25 backdrop-blur-sm hidden flex-col justify-start items-center py-[25px] overflow-auto">