-
Notifications
You must be signed in to change notification settings - Fork 0
/
genshin.html
326 lines (279 loc) · 17.7 KB
/
genshin.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
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Metadata -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home | Given Mikaela Andaya</title>
<!-- CSS -->
<link rel="stylesheet" href="style/general.css">
<link rel="stylesheet" href="style/space.css">
<link rel="stylesheet" href="style/games.css">
<link rel="stylesheet" href="style/utility.css">
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/bb83019d49.js" crossorigin="anonymous"></script>
</head>
<body>
<!-- header -->
<header>
<!-- Navigation -->
<nav>
<ul class="navigation">
<li>
<a href="index.html"><i class="fa-solid fa-house"></i> Home</a>
</li>
<li>
<a href="about.html"> <i class="fa-solid fa-user"></i> About <i class="fa-solid fa-caret-down"></i></a>
<!-- Sub Nav -->
<div class="sub-nav">
<a href="favorites.html"> <i class="fa-solid fa-star"></i> Favorites</a>
<a href="likes.html"> <i class="fa-solid fa-thumbs-up"></i></i> Likes & Dislikes</a>
</div>
</li>
<li>
<a href="hobbies.html"><i class="fa-solid fa-palette"></i> Hobbies <i class="fa-solid fa-caret-down"></i> </a>
<!-- Sub Nav -->
<div class="sub-nav">
<a href="hobbies.html"> <i class="fa-solid fa-paintbrush"></i> Art</a>
<a href="games.html"> <i class="fa-solid fa-gamepad"></i> Games</a>
<a href="favorites.html"> <i class="fa-solid fa-film"></i> Media</a>
</div>
</li>
<li>
<a href="gallery.html"><i class="fa-solid fa-images"></i> Gallery</a>
</li>
<li>
<a href="contacts.html"><i class="fa-solid fa-address-book"></i> Contacts</a>
</li>
</ul>
<div class="line"></div>
<div class="action">
<button class="btn btn-cta ft-primary"> <i class="fa-solid fa-pen"></i> Write me a message!</button>
<i class="fa-solid fa-star"></i>
</div>
</nav>
</header>
<div class="planet">
<img src="media/image/graphic/header.png" class="planet-header">
<h1 class="planet-title ft-fallback">GAMES</h1>
<h1 class="planet-title ft-fallback">GAMES</h1>
<h1 class="planet-title ft-fallback">GAMES</h1>
</div>
<div class="decor">
<img src="media/image/decor/saturn.png" class="saturn-top">
<img src="media/image/decor/catstronauts.png" class="catstronauts">
<img src="media/image/decor/curved-arrows.png" class="arrow-top-l">
<img src="media/image/decor/star-sparkle-l.png" class="stars-top-l">
<img src="media/image/decor/curved-arrows.png" class="arrow-top-r">
<img src="media/image/decor/star-sparkle-r.png" class="stars-top-r">
<img src="media/image/decor/planetpx-1.png" class="px1">
<img src="media/image/decor/planetpx-2.png" class="px2">
</div>
<main>
<div class="decor">
<img src="media/image/decor/tape.png" class="l-tape">
<img src="media/image/decor/tape.png" class="r-tape">
<!-- <img src="media/image/decor/const1.png" class="const"> -->
</div>
<!-- Games Navigation Section -->
<section id="game-nav">
<h2 class="heading">Games I play</h2>
<hr class="small-hr">
<div class="games">
<!-- CRK -->
<div class="game">
<p class="game-title cr-white">Cookie Run: Kingdom</p>
<div class="image">
<img src="media/image/graphic/crk.png" alt="crk">
</div>
<button class="btn btn-space" onclick="window.location.href = 'cookie-run.html';">More <i class="fa-solid fa-arrow-right"></i></button>
</div>
<!-- Genshin -->
<div class="game">
<p class="game-title cr-white">Genshin Impact</p>
<div class="image">
<img src="media/image/graphic/gen.png" alt="jenshin">
</div>
<button class="btn btn-space" onclick="window.location.href = 'genshin.html';">More <i class="fa-solid fa-arrow-right"></i></button>
</div>
<!-- Bandori -->
<div class="game">
<p class="game-title cr-white">BanG Dream</p>
<div class="image">
<img src="media/image/graphic/bd.png" alt="bandori">
</div>
<button class="btn btn-space" onclick="window.location.href = 'bandori.html';">More <i class="fa-solid fa-arrow-right"></i></button>
</div>
<!-- Planet Section Divider -->
<div id="section-divider" class="px">
<img src="media/image/decor/planet-overlay.png" class="planet-bg">
<img src="media/image/decor/saturnpx.png" class="planet">
</div>
</div>
</section>
<!-- Game Title Sectionh -->
<section id="game-title">
<img src="media/image/graphic/gi-logo.png" alt="genshin-logo" class="logo">
<p class="paragraph cr-white ta-center">A single player game where a traveler explores a colorful new world, meeting new ppl while searching for their lost sibling… u defeat enemies along the way to get stronger and stronger. Even tho its a single player game, u can also play co-op with other travelers!</p>
</section>
<!-- Game Gallery Section -->
<section id="game-gallery">
<div class="gallery-decor relative">
<img src="media/image/decor/paimon-sway.png" class="gi-r">
</div>
<div class="gallery right">
<div class="gallery-item">
<img src="media/image/graphic/gi-land1.png" alt=" gi screenshot">
</div>
<div class="gallery-item">
<img src="media/image/graphic/gi-por.png" alt=" gi screenshot">
</div>
<div class="gallery-item">
<img src="media/image/graphic/gi-land2.png" alt=" gi screenshot">
</div>
</div>
<p class="paragraph ta-center">At first <span class="bold td-underline">i refused to play the game</span> even when my cousin kept pushing me to<br> cuz she said i’d like it <span class="cr-blue light">(and i did, a lot)</span>
</p>
</section>
<!-- Text Bleed 1 Section -->
<section id="text-bleed" class="left">
<article class="text-part ta-right">
<p class="paragraph">I did try it but <span class="bold cr-lightYellow">i got kinda bored of doing quests</span> <span class="light">(i still skip em now)</span> so i stopped playing it for a veeery long time</p>
<p class="paragraph">not until <span class="bold cr-blue">eula’s banner</span> i played again, i kinda forgot i tried it earlier than that until i saw my history on the web event.</p>
</article>
<div class="image">
<img src="media/image/graphic/gi-abys.png" alt="genshin cryo abyss mage">
</div>
</section>
<!-- Text Bleed 1 Section -->
<section id="text-bleed" class="right">
<div class="image">
<img src="media/image/graphic/gi-specter.png" alt="genshin specter">
</div>
<article class="text-part ta-right">
<p class="paragraph">I didnt even know how to pull on the gacha banner <span class="td-underline light">cuz i thought i had to pay</span> (c" ತ,_ತ) at least i <span class="cr-blue bold">saved a bunch of primos</span> when i knew thooooo</p>
<p class="paragraph">I just liked <span class="light cr-lightYellow"> exploring</span> on the game before, <span class="bold">now im kinda too lazy</span> to do it <span class="td-underline">without playing with someone else</span></p>
</article>
</section>
<!-- Eula Section -->
<section id="gi-eula">
<article class="text-part">
<p class="paragraph ta-center">I rlly <span class="cr-velvet">regret not pulling</span> on <span class="cr-blue">eula’s </span> banner (´༎ຶོρ༎ຶོ) i lost 50/50 on her last rerun (´༎ຶོρ༎ຶོ) ….T-T</p>
<p class="paragraph ta-center">buuuut at least i got <span class="cr-maple bold">kazuha!</span> (๑╹ω╹๑ ) i didnt even know he was a rlly good character i just saw how he looked nice and pretty so i pulled for him</p>
<div class="kazuha relative">
<img src="media/image/graphic/gi-kazuha.jpg" alt="kazuha" class="img-fit">
</div>
</article>
<div class="image relative">
<img src="media/image/graphic/gi-eula.png" alt="eula" class="img-fit">
</div>
</section>
<!-- Eula Section -->
<section id="gi-ayaka">
<div class="contents">
<div class="image relative">
<img src="media/image/graphic/gi-ayaka.png" alt="ayaka" class="img-fit fit-contain">
</div>
<article class="text-part">
<p class="paragraph ta-center">Then after that i got a <span class="bold cr-lightYellow">gacha addiction</span> and i also pulled for <span class="cr-blue">ayaka</span> cuz my other friends rlly wanted her so i just thought, <span class="td-underline light">ehh why not?</span> </p>
<p class="paragraph ta-center">Who knows if im gonna get her anyway pfft….<br> <span class="bold cr-blue">i got her</span></p>
</article>
</div>
</section>
<!-- Kokomi section -->
<section id="gi-kokomi">
<div class="top-text ta-center">
<p class="paragraph">Then after that it was <span class="cr-hydro bold">kokomi’s banner</span> i think? And <span class="td-underline">i rllI rlly rlly wanted her</span> cuz her design was <span class="cr-pink">soo pretty </span>(i do not care if she’s not good, <span class="bold cr-pink">looks stay forever(⁎⁍̴̆Ɛ⁍̴̆⁎)</span></p>
</div>
<div class="main-content">
<article class="text-part">
<p class="paragraph ta-right">and i only had <span class="cr-maple light">one ten pull</span> prepared on the <span class="light">last day of her banner</span> cuz i was contemplating if i should or not cuz <span class="light td-underline"> ppl said she was bad</span> but i rlly liked her so T-T</p>
<p class="paragraph ta-right">and i had a rlly <span class="cr-lightYellow">strong feeling</span> i would get her <span class="bold">AND I DDIIIIIIIIIIIID AAAAAAAAA I GOT SO HAPPY EVEN JUST REMEMBERING IT NOW <span class="cr-hydro">MAKES ME SOOO HAPPPY</span> </span></p>
<p class="paragraph ta-right">i <span class="cr-maple">screamed in happiness</span> and i think everyone was <span class="light td-underline">used to my weirdness</span> at that point cuz <span class="bold cr-velvet">they didnt bother</span> to check what was happening</p>
</article>
<div class="image relative">
<img src="media/image/graphic/gi-kokomi.png" alt="kokomi" class="img-fit fit-contain">
</div>
</div>
</section>
<!-- Pull section -->
<section id="gi-pulls">
<div class="pull">
<p class="paragraph ta-center">Then next i got <span class="bold td-underline cr-electro">raiden</span> i just got her cuz she looked hot</p>
<div class="pull-image relative">
<img src="media/image/graphic/gi-raiden-full.jpg" alt="raiden" class="img-fit">
<img src="media/image/graphic/raiden-name.png" alt="raiden" class="img-fit name">
</div>
</div>
<div class="pull">
<p class="paragraph ta-center">I got <span class="bold td-underline cr-blue">ganyu</span> after her banner too becuz <span class="light">i rlly wanted her for her dmg</span> (´༎ຶོρ༎ຶོ) oh and i got <span class="cr-blue">amos</span> on the standard not long after too</p>
<div class="pull-image relative">
<img src="media/image/graphic/gi-ganyu.png" alt="ganyu" class="img-fit">
<img src="media/image/graphic/ganyu-name.png" alt="ganyu" class="img-fit name">
</div>
</div>
<div class="pull">
<p class="paragraph ta-center">And theeen i got <span class="bold td-underline cr-blue">shenhe</span> after <span class="light">40 pulls</span> cuz again, she looks hot</p>
<div class="pull-image relative">
<img src="media/image/graphic/gi-shenhe.jpg" alt="raiden" class="img-fit">
<img src="media/image/graphic/shenhe-name.png" alt="raiden" class="img-fit name left">
</div>
<p class="paragraph after-text ta-center">Then T-T <span class="bold">WHEN IT WAS TIME FOR <span class="cr-electro">YAE’S BANNER</span> THE ONE I RLLY
THE ONE I RLLY ACTUALLY WANTED T-T</span></p>
</div>
<div class="fail-pull">
<div class="image relative">
<img src="media/image/graphic/neko-cry.gif" alt="neko and mimi" class="img-fit fit-contain">
</div>
<article class="text-part">
<h2 class="heading-empha cr-maple">I DIDNT GET HER </h2>
<p class="paragraph"><span class="bold">LIKE BRUUUUUHHHH</span> <br> <span class="bold">RUGHGHHEHFHHHHHHGHHHHHA….</span><br>
At least i got T-T qiqi C2 (c" ತ,_ತ) T-T</p>
</article>
</div>
</section>
<!-- Extra pull section -->
<section id="gi-extra-pulls">
<div class="image relative">
<img src="media/image/graphic/gi-hutaosmash.png" alt="hutao and ayato" class="img-fit fit-contain">
</div>
<p class="paragraph ta-center">oh and i got <span class="cr-maple">hutao</span> and <span class="cr-hydro">ayato</span> too <br>(i might be forgetting someone oh right <span class="cr-electro">cyno</span> ) </p>
<div class="image-2 relative">
<img src="media/image/graphic/gi-cyno.png" alt="cyno" class="img-fit">
</div>
</section>
<!-- Next Banner section -->
<section id="next-banner">
<div class="top-text">
<p class="paragraph ta-right bold">BUT IM SAVING UP FOR <span class="td-underline cr-dendro">NAHIDA</span> AND <span class="td-underline cr-electro">YAE RERUN</span> NOOOOW<br>SOOOO LETS GOOOOO</p>
</div>
<div class="banner">
<div class="text-part ta-right">
<h2 class="heading-small"><span class="cr-white">Genshin Impact</span> <br><span class="cr-blue">Version 3.2</span> <span class="light">Banners</span><br> --------------></h2>
</div>
<div class="image relative">
<img src="media/image/graphic/gi-next-banner.png" alt="genshin next-banner" class="img-fit fit-contain">
</div>
</div>
</section>
<!-- hutao-trans Section-->
<section id="hutao-trans">
<div class="text-part relative">
<p class="paragraph cr-white ta-center light">Speeaking of <span class="cr-maple">hu tao</span>, i havent even crowned her and her skills r like <span class="cr-velvet bold">8 8 8</span> but she did <span class="td-underline bold cr-pink">my highest dmg of 400k+</span> but <span class="cr-white bold">it didnt record</span> it on the achievements cuz i reseted spiral abyss right when i did it but <span class="cr-blue">i did 300k something</span> with her thats recorded so</p>
<img src="media/image/graphic/gi-hut-trans.png" alt="hutao gacha banner" class="img-fit fit-contain fit-pos">
</div>
</section>
<!-- Last word section -->
<section id="gi-finalword">
<p class="paragraph ta-center">Kinda obvious <span class="cr-blue">i rlly like genshin</span> right, <span class="light td-underline">it gives me energy and stress at the same time</span></p>
<p class="paragraph ta-center">Im thankful for <span class="cr-white">my cousin</span> for recommending me this game and also <span class="td-underline">my mom</span> that gave me a <span class="cr-velvet">nice pc</span> so now i can play in <span class="bold cr-hydro">highest graphics</span> without lagging + <span class="light">more storage for my poor ipad</span> </p>
</section>
</main>
<!-- Footer -->
<footer>
<h2 class="ft-alt web-name">Given Mikalea Andaya</h2>
<p class="ft-primary maker ">Website Design By <span class="name cr-blue">Vincent Auriol Liussyaputra</span> 🞄 Shubamium</p>
</footer>
</body>
</html>