557 lines
45 KiB
HTML
557 lines
45 KiB
HTML
<html class="bg-bgMain min-h-screen flex flex-col scroll-smooth font-merriweather">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
|
<title>Cellar Social</title>
|
|
<link rel="icon" sizes="52x52" href="./assets/images/icon.png">
|
|
<link rel="icon" sizes="52x52" href="./assets/images/icon.png">
|
|
<link rel="icon" sizes="52x52" href="./assets/images/icon.png">
|
|
<link rel="icon" sizes="52x52" href="./assets/images/icon.png">
|
|
<link rel="icon" sizes="52x52" href="./assets/images/icon.png">
|
|
<link rel="preconnect" href="https://fonts.bunny.net">
|
|
<link href="https://fonts.bunny.net/css?family=libre-baskerville:400,400i,700,700i|merriweather:300,300i,400,400i,700,700i,900,900i" rel="stylesheet" />
|
|
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
|
<script src="tailwind-config.js"></script>
|
|
<link rel="stylesheet" href="./assets/css/custom.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.1/aos.css" />
|
|
</head>
|
|
|
|
<body class="bg-transparent flex flex-col items-center flex-grow min-h-screen relative tracking-wide text-lg leading-[1.5] break-words text-textMain">
|
|
<!-- main navbar start -->
|
|
<div class="w-full flex flex-col justify-start items-center bg-bgMain2 text-textMain2 absolute top-[0] z-[5]">
|
|
<div class="w-full flex flex-col justify-center items-center relative">
|
|
<div class="max-w-[1400px] w-full flex flex-col justify-start items-end px-[10px] relative">
|
|
<div class="w-full flex flex-row gap-[25px] justify-between p-[10px] flex-wrap">
|
|
<div class="max-w-[200px] min-w-[200px]">
|
|
<!-- <img src="./assets/images/logo.png" class=""></img> -->
|
|
<a href="index.html" class="font-bold text-2xl transition-all ease duration-[0.3s] hover:text-linkMain">Cellar Social</a>
|
|
</div>
|
|
<div class="grow-[1] flex flex-row gap-[50px] justify-end">
|
|
<div class="flex flex-row grow-[1] gap-[10px] text-base font-bold justify-end items-center max-lg:hidden">
|
|
<div class="flex flex-row h-full justify-center items-center gap-[10px] cursor-pointer relative">
|
|
<a href="search.html" class="px-[6px] py-[6px] flex flex-row h-full justify-center items-center transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">
|
|
<i class="bx bx-search"></i>
|
|
</a>
|
|
</div>
|
|
<div class="flex flex-row gap-[10px] cursor-pointer relative">
|
|
<button class="px-[15] py-[3px] transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Login</button>
|
|
</div>
|
|
</div>
|
|
<div class="lg:hidden">
|
|
<button class="flex flex-col justify-center items-center">
|
|
<i class="bx bx-menu text-3xl"></i>
|
|
</button>
|
|
</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="flex flex-row grow-[1] gap-[50px] justify-end items-center py-[10px] max-lg:hidden">
|
|
<a href="#" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
|
|
<p class="px-[10px]">Events</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="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="search.html" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
|
|
<p class="px-[10px]">Coffee</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="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="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>
|
|
</div>
|
|
</a>
|
|
<a href="#" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
|
|
<p class="px-[10px]">Promotions</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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- main navbar end -->
|
|
|
|
<!-- main middle start -->
|
|
<div class="w-full flex flex-col grow-[1] pt-[100px]">
|
|
|
|
<!-- hero start -->
|
|
<div class="w-full flex flex-col gap-[25px] justify-center items-center relative h-[calc(100vh-100px)] relative overflow-hidden border-b-[1px] border-bgMain2/15">
|
|
<!-- <img src="./assets/images/bghero.jpg" class="w-full h-full absolute inset-[0] object-cover opacity-[0.25]"></img> -->
|
|
<div class="w-full h-full z-[-1] opacity-[0.2] absolute bg-gradient-to-t from-bgMain to-transparent">
|
|
<video src="https://video.nostr.build/bb4d7552229a1a31411936acad24e5be9cb5e86afa8c0ac213e5782005ef09fb.mp4" autoplay muted loop class="w-full h-full object-cover"></video>
|
|
<!-- <div class="z-[1] bg-gradient-to-t from-bgMain to-transparent w-full absolute bottom-[0] h-3/4"></div> -->
|
|
</div>
|
|
<div class="w-full flex flex-col grow-[1] justify-end items-center">
|
|
<div class="max-w-[1400px] w-full grow-[1] flex flex-col justify-center items-center px-[10px] relative">
|
|
<div class="w-full flex flex-col gap-[35px] grow-[1] justify-center items-center pt-[10vh]">
|
|
<h1 data-aos="fade-down" data-aos-duration="1500" class="text-6xl font-[900] text-center">Everyone's a Critic</h1>
|
|
<p data-aos="fade-down" data-aos-duration="2000" data-aos-delay="1000" class="text-2xl text-center px-[100px]">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
<div data-aos="fade-down" data-aos-duration="2000" data-aos-delay="2000" class="w-full flex flex-row justify-center items-center">
|
|
<div class="w-full max-w-[500px] flex flex-row">
|
|
<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">
|
|
</div>
|
|
<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>
|
|
</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="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>
|
|
<img src="./assets/images/bottle.png" class="h-full z-[1] object-cover absolute bottom-[-100px] transition-all ease duration-[1.25s] group-hover:bottom-[-25px] group-hover:scale-[1.05]"></img>
|
|
<div class="w-full absolute bottom-[0] flex flex-row justify-center items-center bg-bgMain py-[10px] z-[1] transition-all ease duration-[0.5s] group-hover:bg-bgMain2">
|
|
<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="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>
|
|
<img src="./assets/images/bottle3alt.png" class="h-full z-[1] object-cover absolute bottom-[-100px] transition-all ease duration-[1.25s] group-hover:bottom-[-25px] group-hover:scale-[1.05]"></img>
|
|
<div class="w-full absolute bottom-[0] flex flex-row justify-center items-center bg-bgMain py-[10px] z-[1] transition-all ease duration-[0.5s] group-hover:bg-bgMain2">
|
|
<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="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>
|
|
<img src="./assets/images/bottle2.png" class="h-full z-[1] object-cover absolute bottom-[-100px] transition-all ease duration-[1.25s] group-hover:bottom-[-25px] group-hover:scale-[1.05]"></img>
|
|
<div class="w-full absolute bottom-[0] flex flex-row justify-center items-center bg-bgMain py-[10px] z-[1] transition-all ease duration-[0.5s] group-hover:bg-bgMain2">
|
|
<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="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>
|
|
<img src="./assets/images/coffeebag2.png" class="h-full z-[1] object-cover absolute bottom-[-100px] transition-all ease duration-[1.25s] group-hover:bottom-[-25px] group-hover:scale-[1.05]"></img>
|
|
<div class="w-full absolute bottom-[0] flex flex-row justify-center items-center bg-bgMain py-[10px] z-[1] transition-all ease duration-[0.5s] group-hover:bg-bgMain2">
|
|
<p class="font-bold text-xl px-[10px] overflow-hidden whitespace-nowrap text-ellipsis transition-all ease duration-[1.2s] group-hover:text-bgMain">Coffee</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- hero end -->
|
|
|
|
<!-- info section start -->
|
|
<div class="w-full flex flex-col justify-center items-center bg-bgmain min-h-[60vh]">
|
|
<div class="max-w-[1400px] w-full grow-[1] flex flex-col justify-center items-center px-[10px] relative">
|
|
<div class="w-full flex flex-row gap-[50px] flex-wrap">
|
|
<div class="w-full max-w-[500px] flex flex-col gap-[25px] justify-center items-start">
|
|
<img src="./assets/images/sBG1.png" class="w-full max-w-[400px]"></img>
|
|
</div>
|
|
<div class="w-full max-w-[750px] flex flex-col gap-[25px]">
|
|
<h2 data-aos="fade-left" data-aos-duration="1500" class="text-5xl font-bold">Section Title</h2>
|
|
<p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br><br>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- info section end -->
|
|
|
|
<!-- listings start -->
|
|
<div class="w-full flex flex-col justify-center items-center">
|
|
<div class="max-w-[1400px] w-full grow-[1] flex flex-col justify-center items-center px-[10px] relative">
|
|
<div class="w-full flex flex-col gap-[50px] py-[100px] items-center">
|
|
<div class="w-full flex flex-row gap-[25px] justify-center items-center">
|
|
<h2 data-aos="fade-down" data-aos-duration="1500" class="text-5xl font-bold">Wine Selections - Type: Rose</h2>
|
|
</div>
|
|
<!-- listings list start -->
|
|
<div class="w-full grid grid-cols-4 gap-[5px] max-lg:grid-cols-3 max-md:grid-cols-2 max-xs:grid-cols-1">
|
|
<!-- listing item start -->
|
|
<div class="w-full flex flex-col gap-[5px]">
|
|
<div class="w-full flex flex-col gap-[5px]">
|
|
<div class="flex flex-col grow-[1] relative overflow-hidden aspect-square bg-bgMain2 group">
|
|
<img src="https://preview.free3d.com/img/2015/01/2154247191454024843/dn06b30e.jpg" class="w-full h-full object-cover transition-all ease duration-[1s] group-hover:scale-[1.1]"></img>
|
|
<div class="w-full h-[0] opacity-[0] overflow-hidden absolute bottom-[0] bg-bgMain2/95 p-[0px] gap-[25px] flex flex-col justify-center items-center text-textMain2 text-center transition-all ease duration-[0.6s] group-hover:opacity-[1] group-hover:h-full group-hover:p-[25px] group-hover:backdrop-blur-sm">
|
|
<div class="grow-[1] flex flex-col gap-[25px]">
|
|
<p class="text-xl font-bold">Product Title</p>
|
|
<div class="line-clamp-3">
|
|
<p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
</div>
|
|
</div>
|
|
<div class="w-full border-t-[2px] border-bgMain pt-[15px] text-base font-bold flex flex-row gap-[10px] flex-wrap">
|
|
<p class="px-[10px] py-[5px] grow-[1] bg-bgMain text-bgMain2">Type: Wine</p>
|
|
<p class="px-[10px] py-[5px] grow-[1] bg-bgMain text-bgMain2">Style: Amber</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<a href="#" class="w-full px-[10px] py-[5px] bg-btnMain2 text-textMain2 text-center overflow-hidden whitespace-nowrap text-ellipsis relative transition-all ease duration-[0.6s] hover:tracking-widest">
|
|
Product Title
|
|
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="w-full flex flex-col gap-[5px]">
|
|
<div class="w-full flex flex-col gap-[5px]">
|
|
<div class="flex flex-col grow-[1] relative overflow-hidden aspect-square bg-bgMain2 group">
|
|
<img src="https://preview.free3d.com/img/2015/01/2154247191454024843/dn06b30e.jpg" class="w-full h-full object-cover transition-all ease duration-[1s] group-hover:scale-[1.1]"></img>
|
|
<div class="w-full h-[0] opacity-[0] overflow-hidden absolute bottom-[0] bg-bgMain2/95 p-[0px] gap-[25px] flex flex-col justify-center items-center text-textMain2 text-center transition-all ease duration-[0.6s] group-hover:opacity-[1] group-hover:h-full group-hover:p-[25px] group-hover:backdrop-blur-sm">
|
|
<div class="grow-[1] flex flex-col gap-[25px]">
|
|
<p class="text-xl font-bold">Product Title</p>
|
|
<div class="line-clamp-3">
|
|
<p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
</div>
|
|
</div>
|
|
<div class="w-full border-t-[2px] border-bgMain pt-[15px] text-base font-bold flex flex-row gap-[10px] flex-wrap">
|
|
<p class="px-[10px] py-[5px] grow-[1] bg-bgMain text-bgMain2">Type: Wine</p>
|
|
<p class="px-[10px] py-[5px] grow-[1] bg-bgMain text-bgMain2">Style: Amber</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<a href="#" class="w-full px-[10px] py-[5px] bg-btnMain2 text-textMain2 text-center overflow-hidden whitespace-nowrap text-ellipsis relative transition-all ease duration-[0.6s] hover:tracking-widest">
|
|
Product Title
|
|
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="w-full flex flex-col gap-[5px]">
|
|
<div class="w-full flex flex-col gap-[5px]">
|
|
<div class="flex flex-col grow-[1] relative overflow-hidden aspect-square bg-bgMain2 group">
|
|
<img src="https://preview.free3d.com/img/2015/01/2154247191454024843/dn06b30e.jpg" class="w-full h-full object-cover transition-all ease duration-[1s] group-hover:scale-[1.1]"></img>
|
|
<div class="w-full h-[0] opacity-[0] overflow-hidden absolute bottom-[0] bg-bgMain2/95 p-[0px] gap-[25px] flex flex-col justify-center items-center text-textMain2 text-center transition-all ease duration-[0.6s] group-hover:opacity-[1] group-hover:h-full group-hover:p-[25px] group-hover:backdrop-blur-sm">
|
|
<div class="grow-[1] flex flex-col gap-[25px]">
|
|
<p class="text-xl font-bold">Product Title</p>
|
|
<div class="line-clamp-3">
|
|
<p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
</div>
|
|
</div>
|
|
<div class="w-full border-t-[2px] border-bgMain pt-[15px] text-base font-bold flex flex-row gap-[10px] flex-wrap">
|
|
<p class="px-[10px] py-[5px] grow-[1] bg-bgMain text-bgMain2">Type: Wine</p>
|
|
<p class="px-[10px] py-[5px] grow-[1] bg-bgMain text-bgMain2">Style: Amber</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<a href="#" class="w-full px-[10px] py-[5px] bg-btnMain2 text-textMain2 text-center overflow-hidden whitespace-nowrap text-ellipsis relative transition-all ease duration-[0.6s] hover:tracking-widest">
|
|
Product Title
|
|
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="w-full flex flex-col gap-[5px]">
|
|
<div class="w-full flex flex-col gap-[5px]">
|
|
<div class="flex flex-col grow-[1] relative overflow-hidden aspect-square bg-bgMain2 group">
|
|
<img src="https://preview.free3d.com/img/2015/01/2154247191454024843/dn06b30e.jpg" class="w-full h-full object-cover transition-all ease duration-[1s] group-hover:scale-[1.1]"></img>
|
|
<div class="w-full h-[0] opacity-[0] overflow-hidden absolute bottom-[0] bg-bgMain2/95 p-[0px] gap-[25px] flex flex-col justify-center items-center text-textMain2 text-center transition-all ease duration-[0.6s] group-hover:opacity-[1] group-hover:h-full group-hover:p-[25px] group-hover:backdrop-blur-sm">
|
|
<div class="grow-[1] flex flex-col gap-[25px]">
|
|
<p class="text-xl font-bold">Product Title</p>
|
|
<div class="line-clamp-3">
|
|
<p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
</div>
|
|
</div>
|
|
<div class="w-full border-t-[2px] border-bgMain pt-[15px] text-base font-bold flex flex-row gap-[10px] flex-wrap">
|
|
<p class="px-[10px] py-[5px] grow-[1] bg-bgMain text-bgMain2">Type: Wine</p>
|
|
<p class="px-[10px] py-[5px] grow-[1] bg-bgMain text-bgMain2">Style: Amber</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<a href="#" class="w-full px-[10px] py-[5px] bg-btnMain2 text-textMain2 text-center overflow-hidden whitespace-nowrap text-ellipsis relative transition-all ease duration-[0.6s] hover:tracking-widest">
|
|
Product Title
|
|
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- listing item end -->
|
|
</div>
|
|
<!-- listings list start -->
|
|
<div class="w-full flex flex-row justify-center items-center">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- listings end -->
|
|
|
|
<!-- search start -->
|
|
<div id="searchSec" class="w-full flex flex-col justify-center items-center bg-black/15 min-h-[60vh] relative">
|
|
<div class="max-w-[1400px] w-full grow-[1] flex flex-col justify-center items-center px-[10px]">
|
|
<div class="w-full flex flex-row gap-[50px]">
|
|
<div class="w-full flex flex-col gap-[25px]">
|
|
<h2 data-aos="fade-left" data-aos-duration="1500" class="text-5xl font-bold">Find Your Desired Drink</h2>
|
|
<p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
<div class="w-full max-w-[500px] flex flex-row">
|
|
<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>
|
|
<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">
|
|
<div class="flex flex-col gap-[10px]">
|
|
<div class="flex flex-row flex-wrap gap-[10px]">
|
|
<div class="relative bg-black/5 group">
|
|
<input type="checkbox" name="product" class="opacity-[0] absolute inset-[0] peer cursor-pointer"></input>
|
|
<div class="transition-all ease duration-[0.4s] peer-checked:bg-bgMain2 peer-checked:text-bgMain py-[5px] px-[10px] border-[1px] border-bgMain2/25 group-hover:bg-black/10"><label class="">Wine</label></div>
|
|
</div>
|
|
<div class="relative bg-black/5 group">
|
|
<input type="checkbox" name="product" class="opacity-[0] absolute inset-[0] peer cursor-pointer"></input>
|
|
<div class="transition-all ease duration-[0.4s] peer-checked:bg-bgMain2 peer-checked:text-bgMain py-[5px] px-[10px] border-[1px] border-bgMain2/25 group-hover:bg-black/10"><label class="">Sake</label></div>
|
|
</div>
|
|
<div class="relative bg-black/5 group">
|
|
<input type="checkbox" name="product" class="opacity-[0] absolute inset-[0] peer cursor-pointer"></input>
|
|
<div class="transition-all ease duration-[0.4s] peer-checked:bg-bgMain2 peer-checked:text-bgMain py-[5px] px-[10px] border-[1px] border-bgMain2/25 group-hover:bg-black/10"><label class="">Spirits</label></div>
|
|
</div>
|
|
<div class="relative bg-black/5 group">
|
|
<input type="checkbox" name="product" class="opacity-[0] absolute inset-[0] peer cursor-pointer"></input>
|
|
<div class="transition-all ease duration-[0.4s] peer-checked:bg-bgMain2 peer-checked:text-bgMain py-[5px] px-[10px] border-[1px] border-bgMain2/25 group-hover:bg-black/10"><label class="">Coffee</label></div>
|
|
</div>
|
|
<div class="relative bg-black/5 group">
|
|
<input type="checkbox" name="product" class="opacity-[0] absolute inset-[0] peer cursor-pointer"></input>
|
|
<div class="transition-all ease duration-[0.4s] peer-checked:bg-bgMain2 peer-checked:text-bgMain py-[5px] px-[10px] border-[1px] border-bgMain2/25 group-hover:bg-black/10"><label class="">Misc</label></div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full bg-bgMain2/25 text-bgMain flex flex-row justify-center items-center p-[5px]"><p class="">Product</p></div>
|
|
</div>
|
|
<div class="flex flex-col gap-[10px]">
|
|
<div class="flex flex-row flex-wrap gap-[10px]">
|
|
<div class="relative bg-black/5 group">
|
|
<input type="checkbox" name="productType" class="opacity-[0] absolute inset-[0] peer cursor-pointer"></input>
|
|
<div class="transition-all ease duration-[0.4s] peer-checked:bg-bgMain2 peer-checked:text-bgMain py-[5px] px-[10px] border-[1px] border-bgMain2/25 group-hover:bg-black/10"><label class="">White</label></div>
|
|
</div>
|
|
<div class="relative bg-black/5 group">
|
|
<input type="checkbox" name="productType" class="opacity-[0] absolute inset-[0] peer cursor-pointer"></input>
|
|
<div class="transition-all ease duration-[0.4s] peer-checked:bg-bgMain2 peer-checked:text-bgMain py-[5px] px-[10px] border-[1px] border-bgMain2/25 group-hover:bg-black/10"><label class="">Amber</label></div>
|
|
</div>
|
|
<div class="relative bg-black/5 group">
|
|
<input type="checkbox" name="productType" class="opacity-[0] absolute inset-[0] peer cursor-pointer"></input>
|
|
<div class="transition-all ease duration-[0.4s] peer-checked:bg-bgMain2 peer-checked:text-bgMain py-[5px] px-[10px] border-[1px] border-bgMain2/25 group-hover:bg-black/10"><label class="">Rosé</label></div>
|
|
</div>
|
|
<div class="relative bg-black/5 group">
|
|
<input type="checkbox" name="productType" class="opacity-[0] absolute inset-[0] peer cursor-pointer"></input>
|
|
<div class="transition-all ease duration-[0.4s] peer-checked:bg-bgMain2 peer-checked:text-bgMain py-[5px] px-[10px] border-[1px] border-bgMain2/25 group-hover:bg-black/10"><label class="">Red</label></div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full bg-bgMain2/25 text-bgMain flex flex-row justify-center items-center p-[5px]"><p class="">Type</p></div>
|
|
</div>
|
|
<div class="flex flex-col gap-[10px]">
|
|
<div class="flex flex-row flex-wrap gap-[10px]">
|
|
<div class="relative bg-black/5 group">
|
|
<input type="checkbox" name="productStyle" class="opacity-[0] absolute inset-[0] peer cursor-pointer"></input>
|
|
<div class="transition-all ease duration-[0.4s] peer-checked:bg-bgMain2 peer-checked:text-bgMain py-[5px] px-[10px] border-[1px] border-bgMain2/25 group-hover:bg-black/10"><label class="">Bubbles + Fizz</label></div>
|
|
</div>
|
|
<div class="relative bg-black/5 group">
|
|
<input type="checkbox" name="productStyle" class="opacity-[0] absolute inset-[0] peer cursor-pointer"></input>
|
|
<div class="transition-all ease duration-[0.4s] peer-checked:bg-bgMain2 peer-checked:text-bgMain py-[5px] px-[10px] border-[1px] border-bgMain2/25 group-hover:bg-black/10"><label class="">Table</label></div>
|
|
</div>
|
|
<div class="relative bg-black/5 group">
|
|
<input type="checkbox" name="productStyle" class="opacity-[0] absolute inset-[0] peer cursor-pointer"></input>
|
|
<div class="transition-all ease duration-[0.4s] peer-checked:bg-bgMain2 peer-checked:text-bgMain py-[5px] px-[10px] border-[1px] border-bgMain2/25 group-hover:bg-black/10"><label class="">Dessert</label></div>
|
|
</div>
|
|
<div class="relative bg-black/5 group">
|
|
<input type="checkbox" name="productStyle" class="opacity-[0] absolute inset-[0] peer cursor-pointer"></input>
|
|
<div class="transition-all ease duration-[0.4s] peer-checked:bg-bgMain2 peer-checked:text-bgMain py-[5px] px-[10px] border-[1px] border-bgMain2/25 group-hover:bg-black/10"><label class="">Fortified</label></div>
|
|
</div>
|
|
<div class="relative bg-black/5 group">
|
|
<input type="checkbox" name="productStyle" class="opacity-[0] absolute inset-[0] peer cursor-pointer"></input>
|
|
<div class="transition-all ease duration-[0.4s] peer-checked:bg-bgMain2 peer-checked:text-bgMain py-[5px] px-[10px] border-[1px] border-bgMain2/25 group-hover:bg-black/10"><label class="">Vermouth</label></div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full bg-bgMain2/25 text-bgMain flex flex-row justify-center items-center p-[5px]"><p class="">Style</p></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <img src="./assets/images/otherrBG.png" class="w-full h-full absolute inset-[0] object-cover opacity-[0.03]"></img> -->
|
|
</div>
|
|
<!-- search end -->
|
|
|
|
<!-- register start -->
|
|
<div class="w-full flex flex-col justify-center items-center bg-bgmain py-[100px]">
|
|
<div class="max-w-[1400px] w-full grow-[1] flex flex-col justify-center items-center px-[10px] relative">
|
|
<div class="w-full flex flex-col gap-[50px]">
|
|
<div class="w-full flex flex-col gap-[25px]">
|
|
<h2 data-aos="fade-left" data-aos-duration="1500" class="text-5xl font-bold">Join & Socialize</h2>
|
|
<p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
<div class="w-full flex flex-row gap-[100px]">
|
|
<div class="w-full flex flex-col justify-ceter items-center gap-[25px]">
|
|
<div class="w-full flex flex-row justify-center items-center">
|
|
<div class="grow-[1] h-[2px] bg-bgMain2"></div>
|
|
<h3 class="font-bold text-xl px-[15px] py-[5px] text-center">Registration</h3>
|
|
<div class="grow-[1] h-[2px] bg-bgMain2"></div>
|
|
</div>
|
|
<p class="text-center">First time visiting the site, and don't have a Nostr account? Make sure to check out <a href="#" class="font-bold transition-all ease duration-[0.4s] hover:text-linkMain">this guide</a> for assistance. With that said, here are suggested methods of creating an account and using them to login in</p>
|
|
<div class="w-full flex flex-col gap-[50px] mt-[15px]">
|
|
<div class="w-full flex flex-col gap-[15px] p-[15px] text-bgMain border-[3px] border-bgMain2 items-center">
|
|
<div class="flex flex-row justify-center items-center mt-[-35px] bg-bgMain px-[15px] py-[5px] text-bgMain2 font-bold">
|
|
<p class="">PC Browser Extensions</p>
|
|
</div>
|
|
<div class="w-full flex flex-row gap-[10px] flex-wrap">
|
|
<a href="#" class="grow-[1] px-[10px] py-[5px] bg-btnMain2 text-textMain2 text-center overflow-hidden whitespace-nowrap text-ellipsis relative transition-all ease duration-[0.6s]">
|
|
Keys Band
|
|
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
|
|
</a>
|
|
<a href="#" class="grow-[1] px-[10px] py-[5px] bg-btnMain2 text-textMain2 text-center overflow-hidden whitespace-nowrap text-ellipsis relative transition-all ease duration-[0.6s]">
|
|
Gooti
|
|
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
|
|
</a>
|
|
<a href="#" class="grow-[1] px-[10px] py-[5px] bg-btnMain2 text-textMain2 text-center overflow-hidden whitespace-nowrap text-ellipsis relative transition-all ease duration-[0.6s]">
|
|
Nostr Connect
|
|
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="w-full flex flex-col gap-[15px] p-[15px] text-bgMain border-[3px] border-bgMain2 items-center">
|
|
<div class="flex flex-row justify-center items-center mt-[-35px] bg-bgMain px-[15px] py-[5px] text-bgMain2 font-bold">
|
|
<p class="">Mobile App</p>
|
|
</div>
|
|
<div class="w-full flex flex-col gap-[25px]">
|
|
<a href="#" class="grow-[1] px-[10px] py-[5px] bg-btnMain2 text-textMain2 text-center overflow-hidden whitespace-nowrap text-ellipsis relative transition-all ease duration-[0.6s]">
|
|
Amber
|
|
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full flex flex-col justify-ceter items-center gap-[25px]">
|
|
<div class="w-full flex flex-row justify-center items-center">
|
|
<div class="grow-[1] h-[2px] bg-bgMain2"></div>
|
|
<h3 class="font-bold text-xl px-[15px] py-[5px] text-center">Login</h3>
|
|
<div class="grow-[1] h-[2px] bg-bgMain2"></div>
|
|
</div>
|
|
<p class="text-center">Login with your Nostr account and start discovering and acuiring your desired drinks, and socialize with others</p>
|
|
<div class="w-full flex flex-coltext-bgMain items-center">
|
|
<div class="w-full flex flex-row gap-[10px]">
|
|
<a href="#" class="w-full px-[10px] py-[5px] bg-btnMain2 text-textMain2 text-center overflow-hidden whitespace-nowrap text-ellipsis relative transition-all ease duration-[0.6s]">
|
|
Browser Extension
|
|
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
|
|
</a>
|
|
<a href="#" class="w-full px-[10px] py-[5px] bg-btnMain2 text-textMain2 text-center overflow-hidden whitespace-nowrap text-ellipsis relative transition-all ease duration-[0.6s]">
|
|
Mobile App
|
|
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- register end -->
|
|
|
|
</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="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 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 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 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>
|
|
<!-- main footer end -->
|
|
|
|
<!-- SCRIPTS START-->
|
|
<script src="./assets/js/dropdown.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.1/aos.js"></script>
|
|
<script>AOS.init();</script>
|
|
<!-- SCRIPTS END-->
|
|
|
|
<!--
|
|
reusables: sec and container
|
|
<div class="w-full flex flex-col gap-[25px] py-[50px] items-center">
|
|
<div class="max-w-[1400px] w-full flex flex-col justify-start items-end px-[10px] relative"></div>
|
|
</div>
|
|
-->
|
|
</body>
|
|
</html>
|