-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
56 lines (51 loc) · 5.71 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="robots" content="noindex,nofollow">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="https://cdn.tailwindcss.com?plugins=typography"></script>
<title>
Pinkary template
</title>
<meta name="robots" content="noindex">
<style>
@font-face {
font-family: 'Mona Sans';
src:
url('./assets/fonts/Mona-Sans.woff2') format('woff2 supports variations'),
url('./assets/fonts/Mona-Sans.woff2') format('woff2-variations');
font-weight: 200 900;
font-stretch: 75% 125%;
}
html {
font-family: 'Mona Sans';
}
</style>
</head>
<body class="flex flex-col items-center justify-center h-full min-h-dvh bg-gray-950 text-gray-50 accent-violet-400">
<main class="flex flex-col items-center justify-center flex-1 w-full max-w-lg gap-8 p-4 pb-12 my-8">
<figure>
<img class="w-72" src="./assets/images/logo.png" alt="Pinkary logo.">
</figure>
<div class="flex flex-col items-center gap-4 p-4">
<div class="flex gap-2">
<svg class="w-12 h-12" viewBox="0 0 36 36" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="80" height="80"><mask id=":rm:" maskUnits="userSpaceOnUse" x="0" y="0" width="36" height="36"><rect width="36" height="36" rx="72" fill="#FFFFFF"></rect></mask><g mask="url(#:rm:)"><rect width="36" height="36" fill="#ffb238"></rect><rect x="0" y="0" width="36" height="36" transform="translate(3 3) rotate(221 18 18) scale(1.2)" fill="#49007e" rx="36"></rect><g transform="translate(-5 -2) rotate(-1 18 18)"><path d="M15 21c2 1 4 1 6 0" stroke="#FFFFFF" fill="none" stroke-linecap="round"></path><rect x="13" y="14" width="1.5" height="2" rx="1" stroke="none" fill="#FFFFFF"></rect><rect x="21" y="14" width="1.5" height="2" rx="1" stroke="none" fill="#FFFFFF"></rect></g></g></svg>
<svg class="w-12 h-12" viewBox="0 0 36 36" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="80" height="80"><mask id=":r14:" maskUnits="userSpaceOnUse" x="0" y="0" width="36" height="36"><rect width="36" height="36" rx="72" fill="#FFFFFF"></rect></mask><g mask="url(#:r14:)"><rect width="36" height="36" fill="#540045"></rect><rect x="0" y="0" width="36" height="36" transform="translate(-3 -3) rotate(87 18 18) scale(1)" fill="#ff714b" rx="36"></rect><g transform="translate(-7 -4) rotate(7 18 18)"><path d="M15 19c2 1 4 1 6 0" stroke="#000000" fill="none" stroke-linecap="round"></path><rect x="12" y="14" width="1.5" height="2" rx="1" stroke="none" fill="#000000"></rect><rect x="22" y="14" width="1.5" height="2" rx="1" stroke="none" fill="#000000"></rect></g></g></svg>
<svg class="w-12 h-12" viewBox="0 0 36 36" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="80" height="80"><mask id=":r30:" maskUnits="userSpaceOnUse" x="0" y="0" width="36" height="36"><rect width="36" height="36" rx="72" fill="#FFFFFF"></rect></mask><g mask="url(#:r30:)"><rect width="36" height="36" fill="#ff005b"></rect><rect x="0" y="0" width="36" height="36" transform="translate(9 -5) rotate(219 18 18) scale(1)" fill="#ffb238" rx="6"></rect><g transform="translate(4.5 -3) rotate(-9 18 18)"><path d="M15 19c2 1 4 1 6 0" stroke="#000000" fill="none" stroke-linecap="round"></path><rect x="10" y="14" width="1.5" height="2" rx="1" stroke="none" fill="#000000"></rect><rect x="24" y="14" width="1.5" height="2" rx="1" stroke="none" fill="#000000"></rect></g></g></svg>
<svg class="w-12 h-12" viewBox="0 0 36 36" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="80" height="80"><mask id=":r16:" maskUnits="userSpaceOnUse" x="0" y="0" width="36" height="36"><rect width="36" height="36" rx="72" fill="#FFFFFF"></rect></mask><g mask="url(#:r16:)"><rect width="36" height="36" fill="#ff005b"></rect><rect x="0" y="0" width="36" height="36" transform="translate(0 8) rotate(324 18 18) scale(1)" fill="#ffb238" rx="36"></rect><g transform="translate(-4 4) rotate(4 18 18)"><path d="M13,19 a1,0.75 0 0,0 10,0" fill="#000000"></path><rect x="10" y="14" width="1.5" height="2" rx="1" stroke="none" fill="#000000"></rect><rect x="24" y="14" width="1.5" height="2" rx="1" stroke="none" fill="#000000"></rect></g></g></svg>
<svg class="w-12 h-12" viewBox="0 0 36 36" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="80" height="80"><mask id=":r2m:" maskUnits="userSpaceOnUse" x="0" y="0" width="36" height="36"><rect width="36" height="36" rx="72" fill="#FFFFFF"></rect></mask><g mask="url(#:r2m:)"><rect width="36" height="36" fill="#ff7d10"></rect><rect x="0" y="0" width="36" height="36" transform="translate(-1 5) rotate(345 18 18) scale(1)" fill="#0a0310" rx="36"></rect><g transform="translate(-1 3) rotate(-5 18 18)"><path d="M13,19 a1,0.75 0 0,0 10,0" fill="#FFFFFF"></path><rect x="14" y="14" width="1.5" height="2" rx="1" stroke="none" fill="#FFFFFF"></rect><rect x="20" y="14" width="1.5" height="2" rx="1" stroke="none" fill="#FFFFFF"></rect></g></g></svg>
</div>
<div class="text-xl font-extralight">One link. All your socials.</div>
<a href="./profile" class="flex items-center justify-center px-10 py-3 mt-6 text-center transition-colors border border-gray-200 rounded-2xl group hover:border-gray-50 ">
<span class="group-hover:animate-pulse">Your profile</span>
</a>
</div>
</main>
<footer class="flex-shrink-0 w-full text-sm text-center border-t text-slate-500 border-slate-800">
<p class="p-4 ">
This theme is a tribute to the <a href="https://pinkary.com/" target="_blank" class="underline">Pinkary social network</a>. Made with ❤️ and Tailwind CSS. Code on <a href="https://github.com/marcomezzavilla/pinkary-theme" target="_blank" class="underline">Github</a>.
</p>
</footer>
</body>
</html>