-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
93 lines (92 loc) · 2.94 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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.3.2/dist/confetti.browser.min.js"></script>
<link
href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
rel="stylesheet"
/>
<script src="index.js"></script>
<script
async
src="https://www.googletagmanager.com/gtag/js?id=G-DWC9KJR500"
></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "G-DWC9KJR500");
</script>
<title>Arnaud Spanneut x Alan</title>
</head>
<body>
<div class="absolute inset-0">
<section
class="flex items-center justify-center absolute z-10 inset-0 bg-gray-700 transition-all"
id="message-container"
>
<article class="notification rounded-lg p-4 shadow w-11/12 sm:w-96">
<div class="mb-1 flex justify-between text-sm">
<div>
<img src="alan.png" class="float-left" width="25" />
<span>Alan</span>
</div>
<div>1mn ago</div>
</div>
<h1 class="font-bold">Arnaud Spanneut</h1>
<h2>You have a new message ✉️</h2>
<a
href="#"
onclick="openMessage()"
class="inline-flex px-3 py-1 mt-3 border border-transparent text-sm rounded-md text-white bg-gray-800 hover:bg-gray-900"
>
Open
</a>
</article>
</section>
<section class="message flex items-center absolute z-0 inset-0 pb-14">
<article class="flex-1 text-center">
<h2 class="text-3xl sm:text-5xl mb-1">I'm happy to</h2>
<h1 class="text-3xl sm:text-5xl mb-10 text-secondary">
join Alan's family <span class="text-xl sm:text-4xl">🎉</span>
</h1>
<div class="video w-11/12 sm:w-96 m-auto">
<video
src="video.mp4"
style="width: 100%; height: 100%"
preload="auto"
muted=""
playsinline=""
webkit-playsinline=""
x5-playsinline=""
autoplay
loop
></video>
</div>
</article>
<footer
class="absolute inset-x-0 bottom-0 p-4 text-center tracking-wide text-sm z-100"
>
<a
href="https://twitter.com/ArnaudSpanneut"
target="_blank"
class="text-blue-600"
>@ArnaudSpanneut</a
>
-
<a
href="https://www.linkedin.com/in/arnaud-spanneut-23150135/"
class="text-blue-600"
target="_blank"
>LinkedIn</a
>
</footer>
</section>
</div>
</body>
</html>