-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
63 lines (61 loc) · 3.47 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
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="tailwind.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<script src="script.js"></script>
</head>
<body class="bg-mist">
<article class="relative table w-full h-screen">
<div class="table-cell align-middle text-center">
<h1 class="m-8">
<span class= "block font-sans leading-6 lg:leading-10 font-bold text-thick-mist text-xl lg:text-3xl">Mundane magic is...</span>
<span class= "transition-opacity duration-500 opacity-100 block font-sans leading-6 lg:leading-10 font-bold text-evergreen text-xl lg:text-3xl" id="target"></span>
</h1>
<a class="mx-8 inline-block">
<button id="btn" onclick="fade()" class="ease-in-out w-48 lg:w-60 h-12 lg:h-14 tracking-wider bg-thick-mist text-snow font-medium transform transform-gpu hover:scale-102 active:scale-102 focus:outline-none focus:shadow-inner font-sans rounded-md shadow-l">REMIND ME</button>
</a>
</div>
<!--modal-->
<div id="modal-id" class="fade-before overflow-x-hidden overflow-y-auto absolute inset-0 items-center justify-center z-50 outline-none focus:outline-none">
<div id="modal-window" class=" w-10/12 md:w-auto, mx-auto max-w-5xl md:max-w-2xl lg:max-w-xl flex items-center justify-center inset-center">
<!--content-->
<div class="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-snow outline-none focus:outline-none">
<!--header-->
<div class="flex items-start justify-between pt-8 pb-4 px-8 lg:p-8 rounded-t">
<h3 class="lg:leading-10 text-xl lg:text-3xl text-evergreen font-semibold">
The heck are you on about?
</h3>
<button class="p-1 ml-auto border-0 float-right text-3xl leading-none font-semibold outline-none focus:outline-none" onclick="document.getElementById('modal-id').classList.remove('fade');">
<span class="bg-transparent -6 w-6 leading-6 lg:leading-8 text-xl lg:text-3xl block outline-none focus:outline-none">
×
</span>
</button>
</div>
<!--body-->
<div class="relative px-8 pb-8 flex-auto">
<p class="mb-2 text-night leading-tight lg:leading-normal text-l lg:text-xl">
I sometimes get lost in life. I put my head down and forget the little things; human moments, inconsequential details, boring ecstasy.
I must remember. This is a way — a catalog of mundane magic.
</p>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var modal = document.getElementById('modal-id');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
document.getElementById('modal-id').classList.remove('fade');
}
}
</script>
</article>
</body>
<footer class="block fixed text-center font-bold text-evergreen inset-x-0 bottom-0 m-8">
<a class="cursor-pointer border-b-2 focus:outline-none focus:ring-2 ring-snow" onclick="{document.getElementById('modal-id').classList.add('fade');}">What?</a>
</footer>
</html>