<!DOCTYPE html>
<html>
<head>
<title>h o b b s . z o n e</title>
<link href="./css/output.css" rel="stylesheet" />
<link href="./index.css" rel="stylesheet" />
<script>
const onKittyClick = () => {
const img = document.querySelector("img")
img.src = "./img/20240413_101400-sq.jpg"
img.onclick = null
setTimeout(() => {
// reset back to 1st pic, make it clickable again, then redirect
img.src = "./img/20231117_131631.jpg"
img.onclick = onKittyClick
window.location.href = "./landing.html"
}, 1000)
}
</script>
</head>
<body class="bg-slate-800 items-center flex-col flex min-h-svh">
<div class="bg-slate-900 text-white text-center p-4 w-full">
<a href="./landing.html">
<h1
class="text-4xl tracking-widest hover:scale-x-50 transition-transform duration-1000 ease-linear"
>
h o b b s . z o n e
</h1>
</a>
</div>
<div class="flex flex-row">
<h1 class="text-white p-6 text-center text-2xl">boop snoot to enter</h1>
</div>
<div class="flex-1 flex items-center">
<img
class="w-72 rounded-full aspect-square hover:scale-150 transition-transform duration-100 ease-out mb-36"
src="./img/20231117_131631.jpg"
alt="zuzu"
onclick="onKittyClick()"
/>
</div>
</body>
</html>