-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
205 lines (190 loc) · 9.59 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
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=no"/>
<link rel="icon" type="image/x-icon" href="/public/favicon.ico"/>
<title>ITPU New Year's Greeting by Amir Mirgaliev</title>
</head>
<body>
<div class="background">
<picture>
<source media="(max-width: 499px)" srcset="/public/images/snow-bg-mobile.png"/>
<source media="(min-width: 500px)" srcset="/public/images/snow-bg.png"/>
<img src="/public/images/snow-bg.png" alt="background"/>
</picture>
</div>
<header id="header" data-aos="fade-down">
<img src="/public/images/logo.svg" alt="logo" class="img-resp header-logo">
</header>
<main id="main">
<div class="slides">
<section class="wish-slide text-center active">
<div class="container">
<h1 data-aos="zoom-in" data-aos-delay="800">Step into our New Year vibe!</h1>
<p data-aos="zoom-in" data-aos-delay="800">Warm wishes await you here! <br>
Each slide is a surprise prepared especially for you. <br>
Grab your cozy sweater and savor a cup of hot chocolate while you enjoy the journey.</p>
<div class="btn-wrapper" data-aos="fade-up" data-aos-delay="1200">
<button class="btn next-slide" id="start-btn">Let's start!</button>
</div>
</div>
</section>
<section class="wish-slide students-wish text-center">
<div class="container">
<h2>Students</h2>
<p>Firstly, I'd like to congratulate the majority of our community — our students. <br>
Since I am a student myself, I hope that all of us will have a strong reserve of energy and motivation as we step into the upcoming new year. And, of course, good luck on your exams!</p>
<em class="special-wish__tip">My special wish for you is to see more</em>
<button class="show-wish">
<img src="/public/images/eye-close.svg" class="img-resp eye-close" alt="eye-close">
</button>
<div class="special-wish flex center">
<div>
<span>This:</span>
<img src="/public/images/right-answer.svg" class="img-resp" alt="right-answer">
</div>
<div>
<span>Instead of this:</span>
<img src="/public/images/wrong-answer.svg" class="img-resp" alt="wrong-answer">
</div>
</div>
<div class="btn-wrapper">
<button class="btn next-slide">Continue</button>
</div>
</div>
</section>
<section class="wish-slide teachers-wish text-center">
<div class="container">
<h2>Teachers</h2>
<p>Next, I wish to congratulate an equally important and large part of the university — our teachers, who give us new knowledge every day. I want to wish you the strongest nerves and active students during the live sessions, and also thank you for your work and effort, we really appreciate it!</p>
<em class="special-wish__tip">My special wish for you is that your students be like</em>
<button class="show-wish">
<img src="/public/images/eye-close.svg" class="img-resp eye-close" alt="eye-close">
</button>
<div class="special-wish flex center">
<div>
<span>This:</span>
<img src="/public/images/working-student.svg" class="img-resp" loading="lazy" alt="working-student">
</div>
<div>
<span>Instead of that:</span>
<img src="/public/images/sleeping-student.svg" class="img-resp" loading="lazy" alt="sleeping-student">
</div>
</div>
<div class="btn-wrapper flex center">
<button class="btn-control prev-slide">
<img src="/public/images/arrow.svg" class="img-resp" alt="prev">
</button>
<button class="btn-control next-slide">
<img src="/public/images/arrow.svg" class="img-resp" alt="next">
</button>
</div>
</div>
</section>
<section class="wish-slide union-wish text-center">
<div class="container">
<h2>Student union</h2>
<p>Also, I can't skip the significant part of the ITPU — Student Union. Thanks a lot for not being passive and organizing many events for us, including this amazing contest. I'm glad to be in a good relationship with the members of it. Wish you to keep this up and provide us with more engaging activities!</p>
<em class="special-wish__tip">My special wish for you is to</em>
<button class="show-wish">
<img src="/public/images/eye-close.svg" class="img-resp eye-close" alt="eye-close">
</button>
<div class="special-wish center">
<p>Save your positions in the next year, and to finally solve the problem with the regions :)</p>
</div>
<div class="btn-wrapper flex center">
<button class="btn-control prev-slide">
<img src="/public/images/arrow.svg" class="img-resp" alt="prev">
</button>
<button class="btn-control next-slide">
<img src="/public/images/arrow.svg" class="img-resp" alt="next">
</button>
</div>
</div>
</section>
<section class="wish-slide affairs-wish text-center">
<div class="container">
<h2>Student Affairs Department</h2>
<p>Last but not least, the soul of our community — Student Affairs Department. Thank you for regular events such as teambuildings, trainings and simple meetings. In my opinion it is super important to organize such events, since we learn online and sometimes there is a lack of live communication, but our psychologists cover this.</p>
<em class="special-wish__tip">My special wish for you is to</em>
<button class="show-wish">
<img src="/public/images/eye-close.svg" class="img-resp eye-close" alt="eye-close">
</button>
<div class="special-wish center">
<p>Give us the opportunity to meet each other and improve our soft skills more often :)</p>
</div>
<div class="btn-wrapper flex center">
<button class="btn-control prev-slide">
<img src="/public/images/arrow.svg" class="img-resp" alt="prev">
</button>
<button class="btn-control next-slide">
<img src="/public/images/arrow.svg" class="img-resp" alt="next">
</button>
</div>
</div>
</section>
<section class="wish-slide thanks-slide text-center">
<div class="container">
<h2>Thanks for your attention!</h2>
<p>I hope that these short wishes made you a little bit happier and got you in the New Year's mood. My final wish to all of you is just to be kinder, and others will return you the same. Let's say goodbye to the 2023 which gave many people including me places in ITPU, and welcome the up-and-coming 2024!</p>
<div class="btn-wrapper">
<button class="btn next-slide" id="end-btn">Finish</button>
</div>
</div>
</section>
<section class="wish-slide fireworks-slide text-center">
<div class="container">
<h2>Happy New Year!!!</h2>
<div class="btn-wrapper">
<button class="btn santa-hat" id="call-santa">Call Santa</button>
</div>
</div>
</section>
<section class="wish-slide gift-slide text-center">
<div class="container">
<div class="gift-wrapper">
<img src="/public/images/gift.png" alt="gift" loading="lazy" class="img-resp open-gift">
</div>
<div class="my-gift good">
<img src="/public/images/cup.svg" alt="itpu-cup" loading="lazy" class="img-resp">
<button class="btn next-slide">Take it</button>
</div>
<div class="my-gift bad">
<img src="/public/images/coal.png" alt="coal" loading="lazy" class="img-resp">
<button class="btn next-slide">Take it</button>
</div>
</div>
</section>
<section class="wish-slide last-slide text-center">
<div class="container">
<h2>That's it</h2>
<p>Well, this is the end of this little journey. <br>
I hope you liked it, thank you again and have a nice day!</p>
</div>
</section>
</div>
</main>
<footer id="footer" data-aos="fade-up" data-aos-offset="0">
<p>by Amir Mirgaliev</p>
</footer>
<canvas id="fireworks"></canvas>
<div id="santa-popup">
<div class="santa-popup__wrapper text-center">
<img src="/public/images/santa.png" alt="santa" class="img-resp">
<h3>Ho-ho-ho! Hello my friend!</h3>
<p>Let's see how you did this year</p>
<div class="santa-option flex" data-option="good">
<span class="santa-radio"></span>
I've been on my best behavior, Santa!
</div>
<div class="santa-option flex" data-option="bad">
<span class="santa-radio"></span>
I'm afraid I haven't behaved very nicely this year, Santa.
</div>
<button id="get-gift" disabled>Get a gift</button>
</div>
</div>
<script type="module" src="./src/js/main.js"></script>
</body>
</html>