60 lines
2.9 KiB
HTML
60 lines
2.9 KiB
HTML
<!doctype html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link href="./output.css" rel="stylesheet">
|
|
<title>Privacynerd's new home :)</title>
|
|
</head>
|
|
|
|
<body class="bg-white text-black decoration-amber-700
|
|
dark:bg-neutral-900 dark:text-white dark:decoration-amber-400">
|
|
<h1 class="text-5xl decoration-2 decoration-inherit font-bold underline text-center p-2 mt-10">Hello you!</h1>
|
|
<p class="text-lg text-center p-2">This is a test paragraph!</p>
|
|
|
|
<div class="shadow-amber-600 size-max mx-auto grid grid-cols-2 gap-10 px-10 font-mono font-bold m-6
|
|
sm:grid-cols-2
|
|
border-2 border-green-400 rounded-2xl p-5 backdrop-blur-xl drop-shadow-lg
|
|
hover:rotate-3 duration-200">
|
|
<div class="flex flex-col">
|
|
<p class="mb-3 font-mono text-sm font-medium text-gray-500 dark:text-gray-400">box-decoration-slice</p>
|
|
<div class="font-sans text-5xl leading-none font-extrabold tracking-tight"><span
|
|
class="bg-linear-to-r from-indigo-600 to-pink-500 box-decoration-slice px-2 leading-[3.5rem] text-white">Hello<br>World</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<p class="mb-3 font-mono text-sm font-medium text-gray-500 dark:text-gray-400">box-decoration-clone</p>
|
|
<div class="font-sans text-5xl leading-none font-extrabold tracking-tight"><span
|
|
class="bg-linear-to-r from-indigo-600 to-pink-500 box-decoration-clone px-2 leading-[3.5rem] text-white">Hello<br>World</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="mx-auto hover:rotate-3 m-3 duration-200 size-48 h-[3rem] rounded-xl bg-linear-120/decreasing from-violet-700 via-lime-300 to-violet-700">
|
|
</div>
|
|
|
|
<div
|
|
class="mx-auto hover:rotate-3 m-3 duration-200 size-48 h-[3rem] rounded-xl bg-linear-120/decreasing from-violet-700 to-pink-500 brightness-150"">
|
|
</div>
|
|
|
|
<a href="https://git.privacynerd.de" target="_blank"
|
|
class="mx-auto block size-max p-1 rounded-2xl drop-shadow-lg select-none
|
|
bg-linear-90/decreasing ease-linear from-pink-500 to-yellow-500
|
|
transition-(--badge-transition-properties) duration-(--badge-transition-durations)
|
|
hover:bg-linear-90/decreasing hover:from-green-600 hover:via-green-600 hover:to-green-600" draggable="false">
|
|
<div class="size-max flex flex-row gap-3 font-mono font-bold bg-white rounded-xl p-2
|
|
dark:bg-neutral-900
|
|
dark:hover:bg-white dark:hover:text-black
|
|
hover:bg-neutral-900 hover:text-white duration-(--badge-transition-duration-color)">
|
|
<img class="my-auto h-max
|
|
transition-transform hover:rotate-360 ease-in-out" src="img/logos/gitea.svg" />
|
|
<div class="my-auto text-xl">Privacynerd's Gitea</div>
|
|
</div>
|
|
</a>
|
|
|
|
</body>
|
|
|
|
</html>
|