mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
919 lines
No EOL
36 KiB
HTML
919 lines
No EOL
36 KiB
HTML
<div class="container">
|
|
<div class="wrapper">
|
|
<div class="input-wrapper">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="1.5"
|
|
stroke="white"
|
|
class="search-icon"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
|
|
></path>
|
|
</svg>
|
|
<input type="text" placeholder="Search..." name="" id="" class="" />
|
|
|
|
<button class="filter-btn">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="1.5"
|
|
stroke="white"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 0 1-.659 1.591l-5.432 5.432a2.25 2.25 0 0 0-.659 1.591v2.927a2.25 2.25 0 0 1-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 0 0-.659-1.591L3.659 7.409A2.25 2.25 0 0 1 3 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0 1 12 3Z"
|
|
></path>
|
|
</svg>
|
|
</button>
|
|
|
|
<div class="pink-overlay"></div>
|
|
|
|
<div class="blue-overlay"></div>
|
|
|
|
<div class="gradient-box"></div>
|
|
</div>
|
|
|
|
<div class="grid-layout">
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
<div class="aspect-square bg-black"></div>
|
|
</div>
|
|
<div class="oval-overlay">
|
|
<div class="shadow"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
/* From Uiverse.io by PhanDangKhoa96 - Tags: input */
|
|
.container {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #000000;
|
|
}
|
|
|
|
.wrapper {
|
|
isolation: isolate;
|
|
overflow: hidden;
|
|
position: relative;
|
|
padding-top: 6rem;
|
|
padding-bottom: 6rem;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.input-wrapper {
|
|
isolation: isolate;
|
|
position: relative;
|
|
width: 100%;
|
|
max-width: 340px;
|
|
}
|
|
|
|
.search-icon {
|
|
position: absolute;
|
|
left: 1.5rem;
|
|
top: 50%;
|
|
opacity: 0.7;
|
|
width: 32px;
|
|
height: 32px;
|
|
translate: 0 -50%;
|
|
}
|
|
|
|
.input-wrapper input {
|
|
padding-top: 1rem;
|
|
padding-bottom: 1rem;
|
|
padding-right: 5rem;
|
|
padding-left: 5rem;
|
|
outline-style: none;
|
|
width: 100%;
|
|
font-size: 1.5rem;
|
|
line-height: 2rem;
|
|
background-color: #000000;
|
|
border: 2px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 20px;
|
|
color: white;
|
|
}
|
|
|
|
.filter-btn {
|
|
aspect-ratio: 1/1;
|
|
display: grid;
|
|
position: absolute;
|
|
right: 0.75rem;
|
|
top: 50%;
|
|
place-items: center;
|
|
border-radius: 0.75rem;
|
|
border-style: solid;
|
|
transition-property: background-color, border-color, color, fill, stroke,
|
|
opacity, box-shadow, transform;
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
transition-duration: 300ms;
|
|
transition-duration: 300ms;
|
|
cursor: pointer;
|
|
border: 2px solid rgba(255, 255, 255, 0.1);
|
|
width: 48px;
|
|
height: 48px;
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
translate: 0 -50%;
|
|
}
|
|
|
|
.filter-btn svg {
|
|
width: 32px;
|
|
height: 32px;
|
|
transition-property: background-color, border-color, color, fill, stroke,
|
|
opacity, box-shadow, transform;
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
transition-duration: 300ms;
|
|
transition-duration: 300ms;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.filter-btn:hover {
|
|
background-color: white;
|
|
}
|
|
|
|
.filter-btn:hover svg {
|
|
stroke: black;
|
|
}
|
|
|
|
.pink-overlay {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 50%;
|
|
border-radius: 9999px;
|
|
width: 5rem;
|
|
height: 5rem;
|
|
transition-property: all;
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
transition-duration: 300ms;
|
|
transition-duration: 500ms;
|
|
opacity: 1;
|
|
filter: blur(24px) drop-shadow(0 0 60px #b43598);
|
|
background: #b43598;
|
|
z-index: -10;
|
|
translate: 0 -50%;
|
|
}
|
|
|
|
.blue-overlay {
|
|
position: absolute;
|
|
right: -1.25rem;
|
|
top: 66.666667%;
|
|
border-radius: 9999px;
|
|
transition-property: all;
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
transition-duration: 300ms;
|
|
transition-duration: 500ms;
|
|
opacity: 1;
|
|
filter: blur(24px) drop-shadow(0 0 60px #120d57);
|
|
height: 100px;
|
|
width: 100px;
|
|
z-index: -10;
|
|
background: #120d57;
|
|
translate: 0 -50%;
|
|
}
|
|
|
|
.gradient-box {
|
|
--border-angle: 0turn;
|
|
--main-bg: conic-gradient(
|
|
from var(--border-angle),
|
|
rgba(0, 0, 0, 0.1),
|
|
rgba(0, 0, 0, 0.1) 100%
|
|
);
|
|
|
|
--gradient-border: conic-gradient(
|
|
from var(--border-angle),
|
|
transparent 25%,
|
|
white 28%,
|
|
transparent 30%,
|
|
transparent 60%,
|
|
transparent 73%,
|
|
white 78%,
|
|
transparent 80%
|
|
);
|
|
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
translate: -50% -50%;
|
|
border-color: transparent;
|
|
border-style: solid;
|
|
height: calc(100% + 4px);
|
|
width: calc(100% + 4px);
|
|
border-width: 2px;
|
|
filter: blur(2px);
|
|
z-index: -10;
|
|
border-radius: 20px;
|
|
background: var(--main-bg) padding-box, var(--gradient-border) border-box,
|
|
var(--main-bg) border-box;
|
|
background-position: center center;
|
|
animation: bg-spin 5s linear infinite forwards;
|
|
}
|
|
|
|
.input-wrapper:hover .pink-overlay {
|
|
height: 100%;
|
|
width: 100%;
|
|
border-radius: 20px;
|
|
filter: blur(1px) drop-shadow(0 0 0 #b43598);
|
|
}
|
|
|
|
.input-wrapper:hover .blue-overlay {
|
|
top: 50%;
|
|
right: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
border-radius: 20px;
|
|
filter: blur(1px) drop-shadow(0 0 0 #120d57);
|
|
}
|
|
|
|
.input-wrapper:hover .gradient-box {
|
|
animation: bg-spin 5s linear infinite forwards;
|
|
}
|
|
|
|
@keyframes bg-spin {
|
|
to {
|
|
--border-angle: 1turn;
|
|
}
|
|
}
|
|
|
|
@property --border-angle {
|
|
syntax: "<angle>";
|
|
inherits: true;
|
|
initial-value: 0turn;
|
|
}
|
|
|
|
.grid-layout {
|
|
display: grid;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 100%;
|
|
height: 100%;
|
|
scale: 1.1;
|
|
z-index: -10;
|
|
grid-template-columns: repeat(30, minmax(0, 1fr));
|
|
translate: -50% -50%;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-radius: 50%;
|
|
gap: 1px;
|
|
}
|
|
|
|
.grid-layout .aspect-square {
|
|
aspect-ratio: 1/1;
|
|
background: black;
|
|
}
|
|
|
|
.oval-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: -10;
|
|
}
|
|
|
|
.oval-overlay .shadow {
|
|
height: 100%;
|
|
width: 100%;
|
|
scale: 1.1;
|
|
border-radius: 50%;
|
|
box-shadow: 0 0 20px 20px #000 inset;
|
|
}
|
|
|
|
</style>
|
|
|