216 lines
9.2 KiB
HTML
216 lines
9.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
|
|
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="/css/main.60830a19b8a16b435f4b417af5ef27c1c3e6abccb39c75b8ff95fdda4ec9b51d.css" integrity="sha256-YIMKGbiha0NfS0F69e8nwcPmq8yznHW4/5X92k7JtR0=" crossorigin="anonymous">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<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="SoXX" />
|
|
<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="SoXX"/>
|
|
<meta name="twitter:description" content=""/>
|
|
|
|
<script defer data-domain="fenpa.ws" src="https://anal.fenpa.ws/js/script.js"></script>
|
|
<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’s by the motto “Enjoy every day as much as you can”. 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">
|
|
<div class="flex gap-4 bg-neutral-700 p-4">
|
|
<div class="">
|
|
<img src="ref.webp" alt="" class="object-cover">
|
|
</div>
|
|
|
|
<div class="md:flex gap-4 flex-col flex-1 min-w-[300px] hidden">
|
|
<img src="side.webp" alt="" class="">
|
|
<img src="side2.webp" alt="" class="hidden lg:block">
|
|
</div>
|
|
</div>
|
|
</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> |