hobbs-zone-home/landing.html

103 lines
3.4 KiB
HTML

<!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" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</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="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4 m-4">
<a
href="./henry.html"
class="bg-slate-900 shadow-2xl p-4 rounded-md hover:scale-105 transition-transform min-h-32 min-w-40"
>
<div class="flex flex-row">
<img
class="w-24 rounded-full aspect-square mb-auto mt-auto"
src="./img/henry.jpg"
alt="zuzu"
/>
<div class="flex flex-col p-4">
<h1 class="text-4xl">Henry</h1>
<p>About me</p>
</div>
</div>
</a>
<a
href="https://git.hobbs.zone/henry"
class="bg-slate-900 shadow-2xl p-4 rounded-md hover:scale-105 transition-transform min-h-32 min-w-40"
>
<div class="flex flex-row">
<img
class="w-24 rounded-full aspect-square mb-auto mt-auto"
src="./img/gitea.svg"
alt="gitea"
/>
<div class="flex flex-col p-4">
<h1 class="text-4xl">Gitea</h1>
<p>Source code for my projects</p>
</div>
</div>
</a>
<a
href="https://mtg.hobbs.zone/"
class="bg-slate-900 shadow-2xl p-4 rounded-md hover:scale-105 transition-transform min-h-32 min-w-40"
>
<div class="flex flex-row">
<img
class="w-24 rounded-full aspect-square mb-auto mt-auto"
src="./img/mtg.png"
alt="mtg"
/>
<div class="flex flex-col p-4">
<h1 class="text-4xl">MTG Visual Serach</h1>
<p>AI-powered art search for Magic: The Gathering cards</p>
</div>
</div>
</a>
<div
class="bg-slate-900 shadow-2xl p-4 rounded-md hover:scale-105 transition-transform min-h-32 min-w-40"
>
<h1 class="text-4xl">More</h1>
</div>
<div
class="bg-slate-900 shadow-2xl p-4 rounded-md hover:scale-105 transition-transform min-h-32 min-w-40"
>
<h1 class="text-4xl">sites</h1>
</div>
<div
class="bg-slate-900 shadow-2xl p-4 rounded-md hover:scale-105 transition-transform min-h-32 min-w-40"
>
<h1 class="text-4xl">coming</h1>
</div>
<div
class="bg-slate-900 shadow-2xl p-4 rounded-md hover:scale-105 transition-transform min-h-32 min-w-40"
>
<h1 class="text-4xl">soon</h1>
</div>
<div
class="bg-slate-900 shadow-2xl p-4 rounded-md hover:scale-105 transition-transform min-h-32 min-w-40"
>
<h1 class="text-4xl">probably</h1>
</div>
</div>
<div
class="bottom-2 flex justify-center w-max bg-slate-200 p-2 rounded-md shadow-md fixed px-24"
>
<p class="text-black text-center">
<b>Email me: <a href="mailto:henry@hobbs.zone">henry@hobbs.zone</a></b>
</p>
</div>
</body>
</html>