1
0
homepage-build/chars/soxx/index.html
2024-08-20 20:03:53 +00:00

1139 lines
51 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://fenpa.ws//css/tailwind.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> SoXX | Soxx Refsheet</title>
<meta property="og:title" content="" />
<meta property="og:description" content="" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://fenpa.ws/chars/soxx/" />
<meta name="twitter:title" content=""/>
<meta name="twitter:description" content=""/>
<style>
:root{
--main: #f39a32;--secondary: #ad5000;--third: #2D161C;--eyes: #54a6b1;
}
</style>
</head>
<body class="flex flex-col">
<img src="https://fenpa.ws//images/mainbg.webp" alt="" class="fixed inset-0 -z-10 h-full object-cover w-full">
<nav class="text-neutral-50 w-full fixed top-0 z-30 bg-neutral-900/50 flex-wrap duration-100 backdrop-blur-sm"
id="navbar">
<div class="sm:mx-[15vw]">
<div
class="container gap-5 justify-between items-center p-3 mx-auto flex">
<div class="flex flex-wrap gap-1 items-center sm:gap-4">
<a href="/"
class="px-1 py-1 rounded sm:px-2 text-white hover:font-bold hover:text-[var(--main)]">Home</a>
</div>
<div class="ml-auto">
<a href="/impressum" class="px-1 py-1 rounded sm:px-2 text-white hover:font-bold hover:text-[var(--main)]">Impressum</a>
</div>
</div>
</div>
</nav>
<header class="w-full relative p-60 grid place-items-center">
</header>
<div class="relative w-full -mt-80 p-4 mb-8">
<div class="w-full">
<div class="bg-neutral-800 rounded-t max-w-7xl mx-auto mt-4">
<div class="p-4">
<div class="flex gap-4 justify-between">
<div class="flex-1">
<div class="prose prose-invert flex-1 mb-16">
<h1 class="text-[var(--main)]"><b>SoXX</b>
</h1>
<div class="flex gap-4 flex-wrap ml-4">
<span class="">
<b>gender:</b> <span>Male</span>
</span>
<span class="">
<b>height:</b> <span>Antro: 1,30m</span>
</span>
<span class="">
<b>weight:</b> <span>35,5KG</span>
</span>
<span class="">
<b>bodytype:</b> <span>Normal</span>
</span>
</div>
</div>
<div class="prose mb-4 prose-invert">
<h2 class="text-[var(--main)]">About:</h2>
<div class="ml-4">
<p>SoXX is a happy little Fennec, enjoying the world ant life&rsquo;s by the motto &ldquo;Enjoy every day as much as you can&rdquo;. He wants to help everybody as much as he can, even if it means that he goes into trubble for it.</p>
<p>Soxx has special interest in Photography, gaming, It suff and website making.</p>
</div>
</div>
</div>
<div class="hidden sm:flex flex-1 items-center">
<div class="">
<img src="https://fenpa.ws//images/soxx/spittyartz/SpittyArtz%20-%20Velentiensday.webp" class="w-full aspect-auto"
alt="">
</div>
</div>
</div>
</div>
<div class="w-full flex max-w-7xl mx-auto rouned mb-4">
<div class="flex-1 p-2 flex items-center justify-center cursor-pointer onhovercopy" data-clipboard="#f39a32"
style="background:#f39a32">
<b class="filter saturate-0 contrast-[9999999%] invert pointer-events-none hidden md:flex p-2 items-center gap-4 flex-wrap"
style="color:#f39a32">main: #f39a32</b>
</div>
<style>
.onhovercopy:hover b::after{
content: ' [click to copy]';
font-size: small;
}
</style>
<div class="flex-1 p-2 flex items-center justify-center cursor-pointer onhovercopy" data-clipboard="#ad5000"
style="background:#ad5000">
<b class="filter saturate-0 contrast-[9999999%] invert pointer-events-none hidden md:flex p-2 items-center gap-4 flex-wrap"
style="color:#ad5000">secondary: #ad5000</b>
</div>
<style>
.onhovercopy:hover b::after{
content: ' [click to copy]';
font-size: small;
}
</style>
<div class="flex-1 p-2 flex items-center justify-center cursor-pointer onhovercopy" data-clipboard="#2D161C"
style="background:#2D161C">
<b class="filter saturate-0 contrast-[9999999%] invert pointer-events-none hidden md:flex p-2 items-center gap-4 flex-wrap"
style="color:#2D161C">third: #2D161C</b>
</div>
<style>
.onhovercopy:hover b::after{
content: ' [click to copy]';
font-size: small;
}
</style>
<div class="flex-1 p-2 flex items-center justify-center cursor-pointer onhovercopy" data-clipboard="#54a6b1"
style="background:#54a6b1">
<b class="filter saturate-0 contrast-[9999999%] invert pointer-events-none hidden md:flex p-2 items-center gap-4 flex-wrap"
style="color:#54a6b1">eyes: #54a6b1</b>
</div>
<style>
.onhovercopy:hover b::after{
content: ' [click to copy]';
font-size: small;
}
</style>
</div>
</div>
<div
class="bg-neutral-700 p-4 rounded-sm max-w-7xl mx-auto mt-4 prose prose-invert lg:pose-xl">
<div class="flex gap-4 bg-neutral-700 p-4">
<div class="flex-1 prose prose-invert">
<h3>Likes:</h3>
<ul>
<li>
Happy people
</li>
<li>
gaming
</li>
<li>
cuddling
</li>
<li>
go outside with friends
</li>
<li>
nature
</li>
<li>
technology
</li>
</ul>
</div>
<div class="md:flex-1"></div>
<div class="flex-1 prose prose-invert">
<h3>Dislikes:</h3>
<ul>
<li>
Arrogant people
</li>
<li>
fun killers
</li>
<li>
cold weather
</li>
</ul>
</div>
</div>
</div>
<div
class="bg-neutral-700 p-4 rounded-sm max-w-7xl mx-auto mt-4 prose prose-invert lg:pose-xl border-l-4 border-[var(--main)]">
<div class="-ml-[4px]">
<h2 class="m-0 mb-2 text-[var(--main)]">Notes:</h2>
SoXX is not an OC, he is me and shares my life!<br>
</div>
</div>
<div class="bg-neutral-700 p-4 rounded-sm max-w-7xl mx-auto mt-4 pb-8">
<div class="prose prose-invert">
<h1>Images</h1>
<p>You can click on a folder to expand it</p>
<div class="flex gap-4 flex-wrap">
<button
class="text-[var(--main)] px-4 py-2 rounded bg-neutral-800 hover:bg-neutral-900"
id="openAll"><b>Open All</b></button>
<button
class="text-[var(--main)] px-4 py-2 rounded bg-neutral-800 hover:bg-neutral-900"
id="closeAll"><b>Close All</b></button>
</div>
</div>
<div class="">
<div class="galery-header mx-auto max-w-5xl">
<div
class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-4">
</div>
</div>
</details>
<details class="max-w-5xl mx-auto" data-galery-block>
<summary
class="mt-8 flex items-center bg-neutral-800 cursor-pointer px-2 py-1 w-full rounded hover:bg-[var(--main)] duration-75 group z-10">
<div class="prose">
<b
class="filter saturate-0 invert contrast-[100000%] pointer-events-none text-black group-hover:text-[var(--main)]">
//
asabi</b>
</div>
</summary>
<div class="bg-neutral-900 -mt-1">
<div
class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-4">
<div class="gallery-item">
<img src="https://fenpa.ws//images/soxx/asabi/Asabi%20-%20A%20look%20into%20the%20Past%20[LOW%20RES].webp"
loading="lazy" class="max-h-[250px]"
alt="Asabi - A look into the Past [LOW RES].webp" data-whitebox>
</div>
</div>
</div>
</details>
<details class="max-w-5xl mx-auto" data-galery-block>
<summary
class="mt-8 flex items-center bg-neutral-800 cursor-pointer px-2 py-1 w-full rounded hover:bg-[var(--main)] duration-75 group z-10">
<div class="prose">
<b
class="filter saturate-0 invert contrast-[100000%] pointer-events-none text-black group-hover:text-[var(--main)]">
//
asbel</b>
</div>
</summary>
<div class="bg-neutral-900 -mt-1">
<div
class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-4">
<div class="gallery-item">
<img src="https://fenpa.ws//images/soxx/asbel/Asbel%20-%20SoXX%20Undress%20[HIGH%20RES].webp"
loading="lazy" class="max-h-[250px]"
alt="Asbel - SoXX Undress [HIGH RES].webp" data-whitebox>
</div>
</div>
</div>
</details>
<details class="max-w-5xl mx-auto" data-galery-block>
<summary
class="mt-8 flex items-center bg-neutral-800 cursor-pointer px-2 py-1 w-full rounded hover:bg-[var(--main)] duration-75 group z-10">
<div class="prose">
<b
class="filter saturate-0 invert contrast-[100000%] pointer-events-none text-black group-hover:text-[var(--main)]">
//
binturongboy</b>
</div>
</summary>
<div class="bg-neutral-900 -mt-1">
<div
class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-4">
<div class="gallery-item">
<img src="https://fenpa.ws//images/soxx/binturongboy/binturongboy%20-%20SoXX%20TF%20%28Gift%20from%20Nerox%29%20[TRANSPARENT].webp"
loading="lazy" class="max-h-[250px]"
alt="binturongboy - SoXX TF (Gift from Nerox) [TRANSPARENT].webp" data-whitebox>
</div>
</div>
</div>
</details>
<details class="max-w-5xl mx-auto" data-galery-block>
<summary
class="mt-8 flex items-center bg-neutral-800 cursor-pointer px-2 py-1 w-full rounded hover:bg-[var(--main)] duration-75 group z-10">
<div class="prose">
<b
class="filter saturate-0 invert contrast-[100000%] pointer-events-none text-black group-hover:text-[var(--main)]">
//
cyber</b>
</div>
</summary>
<div class="bg-neutral-900 -mt-1">
<div
class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-4">
<div class="gallery-item">
<img src="https://fenpa.ws//images/soxx/cyber/Cyber%20-%20EF%2025%20roomsign%20alt%20Jay%20x%20Soxx%20.webp"
loading="lazy" class="max-h-[250px]"
alt="Cyber - EF 25 roomsign alt Jay x Soxx .webp" data-whitebox>
</div>
<div class="gallery-item">
<img src="https://fenpa.ws//images/soxx/cyber/Cyber%20-%20soxx%20jay%20luca%20cyber%20kintype%20artwork%20no%20shade.webp"
loading="lazy" class="max-h-[250px]"
alt="Cyber - soxx jay luca cyber kintype artwork no shade.webp" data-whitebox>
</div>
<div class="gallery-item">
<img src="https://fenpa.ws//images/soxx/cyber/cyber%20-%20soxx%20BDay%20shaded.webp"
loading="lazy" class="max-h-[250px]"
alt="cyber - soxx BDay shaded.webp" data-whitebox>
</div>
</div>
</div>
</details>
<details class="max-w-5xl mx-auto" data-galery-block>
<summary
class="mt-8 flex items-center bg-neutral-800 cursor-pointer px-2 py-1 w-full rounded hover:bg-[var(--main)] duration-75 group z-10">
<div class="prose">
<b
class="filter saturate-0 invert contrast-[100000%] pointer-events-none text-black group-hover:text-[var(--main)]">
//
dacia</b>
</div>
</summary>
<div class="bg-neutral-900 -mt-1">
<div
class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-4">
<div class="gallery-item">
<img src="https://fenpa.ws//images/soxx/dacia/Dacia%20-%20VR%20Advanture.webp"
loading="lazy" class="max-h-[250px]"
alt="Dacia - VR Advanture.webp" data-whitebox>
</div>
</div>
</div>
</details>
<details class="max-w-5xl mx-auto" data-galery-block>
<summary
class="mt-8 flex items-center bg-neutral-800 cursor-pointer px-2 py-1 w-full rounded hover:bg-[var(--main)] duration-75 group z-10">
<div class="prose">
<b
class="filter saturate-0 invert contrast-[100000%] pointer-events-none text-black group-hover:text-[var(--main)]">
//
eldnsay</b>
</div>
</summary>
<div class="bg-neutral-900 -mt-1">
<div
class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-4">
<div class="gallery-item">
<img src="https://fenpa.ws//images/soxx/eldnsay/Eldnsay%20-%20SoXX%20and%20Luca.webp"
loading="lazy" class="max-h-[250px]"
alt="Eldnsay - SoXX and Luca.webp" data-whitebox>
</div>
</div>
</div>
</details>
<details class="max-w-5xl mx-auto" data-galery-block>
<summary
class="mt-8 flex items-center bg-neutral-800 cursor-pointer px-2 py-1 w-full rounded hover:bg-[var(--main)] duration-75 group z-10">
<div class="prose">
<b
class="filter saturate-0 invert contrast-[100000%] pointer-events-none text-black group-hover:text-[var(--main)]">
//
elementelspirits</b>
</div>
</summary>
<div class="bg-neutral-900 -mt-1">
<div
class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-4">
<div class="gallery-item">
<img src="https://fenpa.ws//images/soxx/elementelspirits/ElementelSpirits%20-%20Hakerfen%20[ORIG].webp"
loading="lazy" class="max-h-[250px]"
alt="ElementelSpirits - Hakerfen [ORIG].webp" data-whitebox>
</div>
</div>
</div>
</details>
<details class="max-w-5xl mx-auto" data-galery-block>
<summary
class="mt-8 flex items-center bg-neutral-800 cursor-pointer px-2 py-1 w-full rounded hover:bg-[var(--main)] duration-75 group z-10">
<div class="prose">
<b
class="filter saturate-0 invert contrast-[100000%] pointer-events-none text-black group-hover:text-[var(--main)]">
//
jay</b>
</div>
</summary>
<div class="bg-neutral-900 -mt-1">
<div class="p-4 prose-invert prose">
<h3 class="text-[var(--main)]">Jay</h3>
<p>Everyone&#39;s favourite noodle and my mate, authoritative sources say &#39;the best ferret ever, 11/10&#39;.</p>
<div class="flex gap-4 flex-wrap">
<a href="https://www.furaffinity.net/user/kazucreations">www.furaffinity.net</a>
<a href="https://t.me/kazucreations">t.me</a>
<a href="https://kazucreations.com/">kazucreations.com</a>
</div>
</div>
<div
class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-4">
<div class="gallery-item">
<img src="https://fenpa.ws//images/soxx/jay/Jay%20-%20ACNH%20[TRANCPARENT].webp"
loading="lazy" class="max-h-[250px]"
alt="Jay - ACNH [TRANCPARENT].webp" data-whitebox>
</div>
<div class="gallery-item">
<img src="https://fenpa.ws//images/soxx/jay/Jay%20-%20ACNH.webp"
loading="lazy" class="max-h-[250px]"
alt="Jay - ACNH.webp" data-whitebox>
</div>
<div class="gallery-item">
<img src="https://fenpa.ws//images/soxx/jay/Jay%20-%20Flower%20Power.webp"
loading="lazy" class="max-h-[250px]"
alt="Jay - Flower Power.webp" data-whitebox>
</div>
<div class="gallery-item">
<img src="https://fenpa.ws//images/soxx/jay/Jay%20-%20Forever%20%28Jahrestag%20&#43;%20EDIT%29.webp"
loading="lazy" class="max-h-[250px]"
alt="Jay - Forever (Jahrestag &#43; EDIT).webp" data-whitebox>
</div>
<div class="gallery-item">
<img src="https://fenpa.ws//images/soxx/jay/Jay%20-%20Halloween%202023.webp"
loading="lazy" class="max-h-[250px]"
alt="Jay - Halloween 2023.webp" data-whitebox>
</div>
<div class="gallery-item">
<img src="https://fenpa.ws//images/soxx/jay/Jay%20-%20Luca%20and%20SoXX%20%28EDIT%29.webp"
loading="lazy" class="max-h-[250px]"
alt="Jay - Luca and SoXX (EDIT).webp" data-whitebox>
</div>
<div class="gallery-item">
<img src="https://fenpa.ws//images/soxx/jay/Jay%20-%20Ottn%20Water%20%28ALT%29.webp"
loading="lazy" class="max-h-[250px]"
alt="Jay - Ottn Water (ALT).webp" data-whitebox>
</div>
<div class="gallery-item">
<img src="https://fenpa.ws//images/soxx/jay/Jay%20-%20Ottn%20Water.webp"
loading="lazy" class="max-h-[250px]"
alt="Jay - Ottn Water.webp" data-whitebox>
</div>
<div class="gallery-item">
<img src="https://fenpa.ws//images/soxx/jay/Jay%20-%20Pride%202023.webp"
loading="lazy" class="max-h-[250px]"
alt="Jay - Pride 2023.webp" data-whitebox>
</div>
<div class="gallery-item">
<img src="https://fenpa.ws//images/soxx/jay/Jay%20-%20SeroXX%20FUSION.webp"
loading="lazy" class="max-h-[250px]"
alt="Jay - SeroXX FUSION.webp" data-whitebox>
</div>
<div class="gallery-item">
<img src="https://fenpa.ws//images/soxx/jay/Jay%20-%20SeroXX%20[TRANSPARENT].webp"
loading="lazy" class="max-h-[250px]"
alt="Jay - SeroXX [TRANSPARENT].webp" data-whitebox>
</div>
<div class="gallery-item">
<img src="https://fenpa.ws//images/soxx/jay/Jay%20-%20SoXX%20Badge.webp"
loading="lazy" class="max-h-[250px]"
alt="Jay - SoXX Badge.webp" data-whitebox>
</div>
<div class="gallery-item">
<img src="https://fenpa.ws//images/soxx/jay/Jay%20-%20SoXX%20Gaming%20[TRANSPARENT].webp"
loading="lazy" class="max-h-[250px]"
alt="Jay - SoXX Gaming [TRANSPARENT].webp" data-whitebox>
</div>
<div class="gallery-item">
<img src="https://fenpa.ws//images/soxx/jay/Jay%20-%20SoXX%20and%20Friends.webp"
loading="lazy" class="max-h-[250px]"
alt="Jay - SoXX and Friends.webp" data-whitebox>
</div>
<div class="gallery-item">
<img src="https://fenpa.ws//images/soxx/jay/Jay%20-%20SoXX%20and%20Luca%20in%20Kigu.png%20[TRANSPARENT].webp"
loading="lazy" class="max-h-[250px]"
alt="Jay - SoXX and Luca in Kigu.png [TRANSPARENT].webp" data-whitebox>
</div>
<div class="gallery-item">
<img src="https://fenpa.ws//images/soxx/jay/Jay%20-%20SoXX%20in%20the%20Dark.webp"
loading="lazy" class="max-h-[250px]"
alt="Jay - SoXX in the Dark.webp" data-whitebox>
</div>
<div class="gallery-item">
<img src="https://fenpa.ws//images/soxx/jay/Jay%20-%20SoXX%20und%20Jay%20-%20Kuscheln.webp"
loading="lazy" class="max-h-[250px]"
alt="Jay - SoXX und Jay - Kuscheln.webp" data-whitebox>
</div>
<div class="gallery-item">
<img src="https://fenpa.ws//images/soxx/jay/Jay%20-%20The%20RING%20[TRANCPARENT].webp"
loading="lazy" class="max-h-[250px]"
alt="Jay - The RING [TRANCPARENT].webp" data-whitebox>
</div>
<div class="gallery-item">
<img src="https://fenpa.ws//images/soxx/jay/Jay%20-%20a%20bit%20of%20chub.webp"
loading="lazy" class="max-h-[250px]"
alt="Jay - a bit of chub.webp" data-whitebox>
</div>
<div class="gallery-item">
<img src="https://fenpa.ws//images/soxx/jay/Jay%20-%20a%20nice%20present.webp"
loading="lazy" class="max-h-[250px]"
alt="Jay - a nice present.webp" data-whitebox>
</div>
</div>
</div>
</details>
<details class="max-w-5xl mx-auto" data-galery-block>
<summary
class="mt-8 flex items-center bg-neutral-800 cursor-pointer px-2 py-1 w-full rounded hover:bg-[var(--main)] duration-75 group z-10">
<div class="prose">
<b
class="filter saturate-0 invert contrast-[100000%] pointer-events-none text-black group-hover:text-[var(--main)]">
//
Julchen1412</b>
</div>
</summary>
<div class="bg-neutral-900 -mt-1">
<div
class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-4">
<div class="gallery-item">
<img src="https://fenpa.ws//images/soxx/Julchen1412/full%20moon%20ych%20@fenpaws.gif"
loading="lazy" class="max-h-[250px]"
alt="full moon ych @fenpaws.gif" data-whitebox>
</div>
</div>
</div>
</details>
<details class="max-w-5xl mx-auto" data-galery-block>
<summary
class="mt-8 flex items-center bg-neutral-800 cursor-pointer px-2 py-1 w-full rounded hover:bg-[var(--main)] duration-75 group z-10">
<div class="prose">
<b
class="filter saturate-0 invert contrast-[100000%] pointer-events-none text-black group-hover:text-[var(--main)]">
//
kitchidrachenblut</b>
</div>
</summary>
<div class="bg-neutral-900 -mt-1">
<div
class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-4">
<div class="gallery-item">
<img src="https://fenpa.ws//images/soxx/kitchidrachenblut/KitchiDrachenblut%20-%20Owner%20SoXX.webp"
loading="lazy" class="max-h-[250px]"
alt="KitchiDrachenblut - Owner SoXX.webp" data-whitebox>
</div>
</div>
</div>
</details>
<details class="max-w-5xl mx-auto" data-galery-block>
<summary
class="mt-8 flex items-center bg-neutral-800 cursor-pointer px-2 py-1 w-full rounded hover:bg-[var(--main)] duration-75 group z-10">
<div class="prose">
<b
class="filter saturate-0 invert contrast-[100000%] pointer-events-none text-black group-hover:text-[var(--main)]">
//
kyanitethedraptor</b>
</div>
</summary>
<div class="bg-neutral-900 -mt-1">
<div
class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-4">
<div class="gallery-item">
<img src="https://fenpa.ws//images/soxx/kyanitethedraptor/KyaniteTheDraptor%20-%20River%20Advanture%20[ALT].webp"
loading="lazy" class="max-h-[250px]"
alt="KyaniteTheDraptor - River Advanture [ALT].webp" data-whitebox>
</div>
<div class="gallery-item">
<img src="https://fenpa.ws//images/soxx/kyanitethedraptor/KyaniteTheDraptor%20-%20River%20Advanture.webp"
loading="lazy" class="max-h-[250px]"
alt="KyaniteTheDraptor - River Advanture.webp" data-whitebox>
</div>
</div>
</div>
</details>
<details class="max-w-5xl mx-auto" data-galery-block>
<summary
class="mt-8 flex items-center bg-neutral-800 cursor-pointer px-2 py-1 w-full rounded hover:bg-[var(--main)] duration-75 group z-10">
<div class="prose">
<b
class="filter saturate-0 invert contrast-[100000%] pointer-events-none text-black group-hover:text-[var(--main)]">
//
magenta</b>
</div>
</summary>
<div class="bg-neutral-900 -mt-1">
<div
class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-4">
<div class="gallery-item">
<img src="https://fenpa.ws//images/soxx/magenta/Magenta%20-%20SoXX%20and%20Jay.webp"
loading="lazy" class="max-h-[250px]"
alt="Magenta - SoXX and Jay.webp" data-whitebox>
</div>
<div class="gallery-item">
<img src="https://fenpa.ws//images/soxx/magenta/Magenta7%20-%20SoXX%20-%20Back%20.webp"
loading="lazy" class="max-h-[250px]"
alt="Magenta7 - SoXX - Back .webp" data-whitebox>
</div>
</div>
</div>
</details>
<details class="max-w-5xl mx-auto" data-galery-block>
<summary
class="mt-8 flex items-center bg-neutral-800 cursor-pointer px-2 py-1 w-full rounded hover:bg-[var(--main)] duration-75 group z-10">
<div class="prose">
<b
class="filter saturate-0 invert contrast-[100000%] pointer-events-none text-black group-hover:text-[var(--main)]">
//
neko</b>
</div>
</summary>
<div class="bg-neutral-900 -mt-1">
<div
class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-4">
<div class="gallery-item">
<img src="https://fenpa.ws//images/soxx/neko/Neko%20-%20Jay%20and%20SoXX%202019.png%20[TRANSPARENT].webp"
loading="lazy" class="max-h-[250px]"
alt="Neko - Jay and SoXX 2019.png [TRANSPARENT].webp" data-whitebox>
</div>
<div class="gallery-item">
<img src="https://fenpa.ws//images/soxx/neko/Neko%20-%20Pride%202023.PNG"
loading="lazy" class="max-h-[250px]"
alt="Neko - Pride 2023.PNG" data-whitebox>
</div>
<div class="gallery-item">
<img src="https://fenpa.ws//images/soxx/neko/Neko%20-%20SCREE.webp"
loading="lazy" class="max-h-[250px]"
alt="Neko - SCREE.webp" data-whitebox>
</div>
</div>
</div>
</details>
<details class="max-w-5xl mx-auto" data-galery-block>
<summary
class="mt-8 flex items-center bg-neutral-800 cursor-pointer px-2 py-1 w-full rounded hover:bg-[var(--main)] duration-75 group z-10">
<div class="prose">
<b
class="filter saturate-0 invert contrast-[100000%] pointer-events-none text-black group-hover:text-[var(--main)]">
//
RainbowT</b>
</div>
</summary>
<div class="bg-neutral-900 -mt-1">
<div
class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-4">
<div class="gallery-item">
<img src="https://fenpa.ws//images/soxx/RainbowT/2021-08.jorden2.webp"
loading="lazy" class="max-h-[250px]"
alt="2021-08.jorden2.webp" data-whitebox>
</div>
</div>
</div>
</details>
<details class="max-w-5xl mx-auto" data-galery-block>
<summary
class="mt-8 flex items-center bg-neutral-800 cursor-pointer px-2 py-1 w-full rounded hover:bg-[var(--main)] duration-75 group z-10">
<div class="prose">
<b
class="filter saturate-0 invert contrast-[100000%] pointer-events-none text-black group-hover:text-[var(--main)]">
//
shuryashish</b>
</div>
</summary>
<div class="bg-neutral-900 -mt-1">
<div
class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-4">
<div class="gallery-item">
<img src="https://fenpa.ws//images/soxx/shuryashish/ShuryaSHISH%20-%20SoXX%20as%20Otter%20[EXTRA%20DETAIL%20DARK].webp"
loading="lazy" class="max-h-[250px]"
alt="ShuryaSHISH - SoXX as Otter [EXTRA DETAIL DARK].webp" data-whitebox>
</div>
<div class="gallery-item">
<img src="https://fenpa.ws//images/soxx/shuryashish/ShuryaSHISH%20-%20SoXX%20as%20Otter%20[EXTRA%20DETAIL%20WHITE].webp"
loading="lazy" class="max-h-[250px]"
alt="ShuryaSHISH - SoXX as Otter [EXTRA DETAIL WHITE].webp" data-whitebox>
</div>
<div class="gallery-item">
<img src="https://fenpa.ws//images/soxx/shuryashish/ShuryaSHISH%20-%20SoXX%20as%20Otter.webp"
loading="lazy" class="max-h-[250px]"
alt="ShuryaSHISH - SoXX as Otter.webp" data-whitebox>
</div>
</div>
</div>
</details>
<details class="max-w-5xl mx-auto" data-galery-block>
<summary
class="mt-8 flex items-center bg-neutral-800 cursor-pointer px-2 py-1 w-full rounded hover:bg-[var(--main)] duration-75 group z-10">
<div class="prose">
<b
class="filter saturate-0 invert contrast-[100000%] pointer-events-none text-black group-hover:text-[var(--main)]">
//
spittyartz</b>
</div>
</summary>
<div class="bg-neutral-900 -mt-1">
<div
class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-4">
<div class="gallery-item">
<img src="https://fenpa.ws//images/soxx/spittyartz/SpittyArtz%20-%20Velentiensday.webp"
loading="lazy" class="max-h-[250px]"
alt="SpittyArtz - Velentiensday.webp" data-whitebox>
</div>
</div>
</div>
</details>
<details class="max-w-5xl mx-auto" data-galery-block>
<summary
class="mt-8 flex items-center bg-neutral-800 cursor-pointer px-2 py-1 w-full rounded hover:bg-[var(--main)] duration-75 group z-10">
<div class="prose">
<b
class="filter saturate-0 invert contrast-[100000%] pointer-events-none text-black group-hover:text-[var(--main)]">
//
thanshuhai</b>
</div>
</summary>
<div class="bg-neutral-900 -mt-1">
<div
class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-4">
<div class="gallery-item">
<img src="https://fenpa.ws//images/soxx/thanshuhai/thanshuhai%20-%20BLEP%20-%20Icon%20[WITH%20INFO].webp"
loading="lazy" class="max-h-[250px]"
alt="thanshuhai - BLEP - Icon [WITH INFO].webp" data-whitebox>
</div>
</div>
</div>
</details>
</div>
<script>
document.getElementById('openAll').addEventListener('click', () => {
document.querySelectorAll('[data-galery-block]')
.forEach(e => e.setAttribute('open', true))
})
document.getElementById('closeAll').addEventListener('click',
() => {
document.querySelectorAll('[data-galery-block]')
.forEach(e => e.removeAttribute('open'))
})
document.querySelectorAll('[data-clipboard]').forEach(el=>{
const colorValue = el.getAttribute('data-clipboard')
el.addEventListener('click',()=>{
navigator.clipboard.writeText(colorValue);
})
})
</script>
</div>
</div>
<div class="fixed inset-0 z-50 bg-black/90 hidden w-full h-screen overflow-hidden grid place-items-center cursor-pointer" id="whiteboxRoot">
<img src="" alt="" id="whiteboxImage" class="object-contain max-h-[90vh] max-w-[90vw] cursor-default">
</div>
<script>
const whiteboxRoot = document.getElementById('whiteboxRoot')
const whiteboxImage = document.getElementById('whiteboxImage')
function showWhitebox(src){
whiteboxImage.src = src
whiteboxRoot.classList.remove('hidden')
}
function closeWhitebox(){
whiteboxRoot.classList.add('hidden')
}
whiteboxRoot.addEventListener('click',function(event){
console.log(this,event.target);
if (this == event.target){
closeWhitebox()
}
})
document.querySelectorAll('[data-whitebox]').forEach(e=>{
e.addEventListener('click',()=>showWhitebox(e.src))
})
</script>
</div>
</body>
</html>