-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
157 lines (146 loc) · 5.38 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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE html>
<html>
<head>
<title>Thanks!</title>
<meta charset="UTF-8" />
<!-- Responsive -->
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<!-- Desktop Site on Mobile -->
<meta name="viewport" content="width=1024" />
<!-- Icon -->
<link
rel="icon"
href="https://i.ibb.co/c39rMG9/Thank-You.png"
type="image/x-icon"
/>
<!-- TailwindCSS -->
<link
href="https://lianaling.github.io/appreciation-letter/output.css"
rel="stylesheet"
/>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap"
rel="stylesheet"
<link
rel="preconnect"
href="https://fonts.googleapis.com"
/>
<link
href="https://fonts.googleapis.com/css2?family=DM+Mono&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital@1&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Homemade+Apple&display=swap"
rel="stylesheet"
/>
</head>
<body style="background-color: white" class="scrollbar scrollbar-none">
<div
id="splash"
class="flex flex-col gap-5 w-screen h-screen justify-center items-center bg-theme font-display"
>
<p class="text-[5vw] text-white">To: Teacher Prema</p>
<button
type="button"
class="rounded-lg w-28 h-12 bg-secondary hover:bg-[#c58e96]"
onclick="scrollToPostSplash()"
>
<span class="text-3xl text-theme font-italic">Open</span>
</button>
</div>
<div
id="blank"
class="w-screen h-screen"
style="background-image: url(img/polka-dots.jpg)"
></div>
<div id="postSplash">
<!-- Two Col Grid -->
<div class="grid grid-cols-2 px-16 pt-16 pb-10 h-screen gap-10">
<div id="leftCol" class="flex flex-col font-display relative">
<p class="text-9xl">
<span class="text-theme">T</span>hanks a
<span class="text-theme">M</span>illion
</p>
<p class="font-mono text-subtitle">12th May 2022</p>
<img
class="w-[20rem] absolute bottom-0"
src="img/deco-drawing.png"
alt="deco-drawing"
border="0"
/>
</div>
<div
id="rightCol"
class="text-xl overflow-hidden overflow-y-auto scrollbar-none font-body relative"
>
<div id="content" class="flex flex-col gap-10 absolute top-[20rem]">
<p
id="quote"
class="font-italic text-subtitle bg-[#fafafa] p-5 rounded-lg"
>
Two roads diverged in a wood, and I— <br />
I took the one less travelled by, <br />
And that has made all the difference. <br /><br />
—Robert Frost, "The Road Not Taken"
</p>
<!-- Letter Body -->
<p>Dear Teacher Prema,</p>
<p>
I'm grateful to you for taking us under your wing. You were the
first person I thought of when I needed an IELTS tutor, and it was
gracious of you to coach both of us together.
</p>
<p>
I enjoyed every session that we had, as we often fell into a
(somewhat) heated debate on the technicalities of the English
language. The outcome of our discussions was always enlightening
and, if any, mind-blowing at times.
</p>
<p>
Your underlying philosophy of teaching English is respectable. It
is not for money that you teach but for the betterment of English
proficiency in Malaysia. Your insistence on using proper grammar
and vocabulary instead of slacking off in everyday usage is a
tenet that I will absolutely follow.
</p>
<p>
I feel the poem excerpt above by Robert Frost is a good portrayal
of what you do. Take the roadless travelled by, and that will make
all the difference. I believe your insistence will make a
difference in the English speaking community in Malaysia.
</p>
<p>
All in all, thank you for pouring mountainous effort into coaching
us. Thank you for the extra lessons and practice marathons one
week before our exams. Thank you for believing in our potential.
</p>
<p id="signature" class="text-right">
Your Student, <br />
<span class="font-handwritten text-4xl">Liana Ling</span>
</p>
</div>
</div>
</div>
</div>
<!-- Animation -->
<script>
function scrollToPostSplash() {
var scrollDiv = document.getElementById("postSplash").offsetTop;
window.scrollTo({ top: scrollDiv, behavior: "smooth" });
// document.getElementById("splash").style.display = "none";
// document.getElementById("blank").style.display = "none";
}
</script>
</body>
</html>