-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
427 lines (425 loc) · 20.5 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
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
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
name="description"
content="An essay about Silver Wolf from the Turn - Based RPG game Honkai: Star Rail."
/>
<title>A Silver Wolf Essay</title>
<link rel="icon" type="image/webp" href="./assets/favicon.webp" />
<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=Inter+Tight:wght@700&family=Noto+Sans+Display:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet"
/>
<link href="index.css" rel="stylesheet" />
</head>
<body>
<header class="header">
<div class="content header__content">
<img
src="./assets/images/silver_wolf_sticker.webp"
alt="Silver Wolf Sticker"
width="55px"
height="55px"
/>
<h1 class="title content__title">SILVER<br />WOLF</h1>
<div class="toggle-theme">
<button
id="toggle-theme__button"
class="toggle-theme__button"
aria-label="Open color scheme menu"
aria-haspopup="menu"
>
<svg
class="icon button__icon light-mode active"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 -960 960 960"
>
<path
d="M480-360q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35Zm0 80q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480q0 83-58.5 141.5T480-280ZM200-440H40v-80h160v80Zm720 0H760v-80h160v80ZM440-760v-160h80v160h-80Zm0 720v-160h80v160h-80ZM256-650l-101-97 57-59 96 100-52 56Zm492 496-97-101 53-55 101 97-57 59Zm-98-550 97-101 59 57-100 96-56-52ZM154-212l101-97 55 53-97 101-59-57Zm326-268Z"
/>
</svg>
<svg
class="icon button__icon dark-mode"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 -960 960 960"
>
<path
d="M480-120q-150 0-255-105T120-480q0-150 105-255t255-105q14 0 27.5 1t26.5 3q-41 29-65.5 75.5T444-660q0 90 63 153t153 63q55 0 101-24.5t75-65.5q2 13 3 26.5t1 27.5q0 150-105 255T480-120Zm0-80q88 0 158-48.5T740-375q-20 5-40 8t-40 3q-123 0-209.5-86.5T364-660q0-20 3-40t8-40q-78 32-126.5 102T200-480q0 116 82 198t198 82Zm-10-270Z"
/>
</svg>
</button>
<ul
id="toggle-theme__menu"
class="toggle-theme__menu"
aria-label="Toggle theme menu"
>
<li class="menu__item">
<button class="item__button" data-color-scheme="auto">
Follow System
</button>
</li>
<li class="menu__item">
<button class="item__button" data-color-scheme="light">
Light Mode
</button>
</li>
<li class="menu__item">
<button class="item__button" data-color-scheme="dark">
Dark Mode
</button>
</li>
</ul>
</div>
</div>
</header>
<main class="main">
<div class="main__container">
<div class="content main__content">
<div class="banner content__banner" role="banner">
<aside class="art banner__art">
<picture>
<source
type="image/webp"
srcset="./assets/images/silver_wolf_splash_art.webp"
media="(min-width: 600px)"
width="668"
height="684"
/>
<img
src="./assets/images/silver_wolf_splash_art_300w.webp"
alt="Silver Wolf Splash Art"
width="300px"
height="307px"
/>
</picture>
</aside>
<h2 class="title banner__title">A SILVER WOLF ESSAY</h2>
<p class="tagline banner__tagline">
An essay about a fictional character from the Turn - Based RPG
game Honkai: Star Rail.
</p>
</div>
<article id="introduction" class="article introduction">
<h2 class="article__title introduction__title">INTRODUCTION</h2>
<div class="article__content introduction__content">
<div>
<h3>Who is Silver Wolf?</h3>
<p>
Silver Wolf is a character from the Turn - Based RPG game
Honkai: Star Rail developed and published by Hoyoverse. She is
a genius hacker who loves to play video games and also treats
her life or any activity like a video game. Because of this
mindset, she always tries to find a way to make things from
her perspective exciting and fun just like a video game
through her skill known as "Aether Editing", which makes her
able to alter the data of reality to whatever she wants.
</p>
<p>
Silver Wolf is one of the members of the criminal group called
Stellaron Hunters in the game. She joins the group not because
she's a bad person, it's because she has "completed" her home
planet and want to challenge new levels outside of her planet.
Her home planet is called Punklorde, so far there are only
hints as to what kind of planet Punklorde is in the game, the
majority of it's people consists of hackers and gamers just
like Silver Wolf.
</p>
<p>
Back on her home planet, almost everyone is working in a team.
Usually loners don't last long in Punklorde, but if they do,
they would become a legend. Silver Wolf did become legend of
the current era in Punklorde because she's a loner that's able
to last.
</p>
</div>
<aside class="content__aside">
<figure class="aside__figure">
<picture>
<source
type="image/webp"
srcset="
./assets/images/silver_wolf_light_cone_artwork.webp
"
media="(min-width: 600px)"
width="354"
height="495"
/>
<img
src="./assets/images/silver_wolf_light_cone_artwork_185w.webp"
alt="Silver Wolf Light Cone Artwork"
loading="lazy"
width="185px"
height="258px"
/>
</picture>
<figcaption>
Silver Wolf artwork blowing bubble gum under an umbrella in
a rainy night, while using a screen from her Aether Editing
skill.
</figcaption>
</figure>
</aside>
</div>
</article>
<article id="character" class="article character">
<h2 class="article__title">CHARACTER</h2>
<div class="article__content character__content">
<div class="content__text">
<h3>Appearance</h3>
<p>
Silver Wolf whole appearance is themed around asymmetry,
casual and gamer with the color black, white, blue and purple.
She is petite young woman with silver eyes and silver hair
with purple highlights. She wears a blue and purple shade
sunglasses on top of her head and ties her hair with a blue
and purple polkadot bow into a swirly ponytail that ends with
the purple highlights. She wears a short, black and purple
coat with a white, asymmetrical crop-top.
</p>
<p>
She also wears a black shorts paired with a white belt, and a
black and purple color fabric with the purple polkadot pattern
as a decoration hanging on her left waist. On her belt, she
has her mobile game console and a gamepad attached on her
right side. She also wears a black, white and blue boots,
along with a fishnet on her left leg and a knife attached to
her right leg. In addition, she also have blue band-aids on
her lower back and left knee.
</p>
<h3>Personality</h3>
<p>
Silver Wolf has a laidback personality, where she just enjoys
anything that comes her way. She speaks in a casual way and
uses internet slang in her conversation, because she's
presumably still a young adult often surfs the internet. This
personality is really shown through her design by wearing
modern but casual clothing and having some asymmetry to them,
and she's often shown blowing bubble gum in her artwork
further emphasizing her laidback or casual personality.
</p>
</div>
<aside class="content__aside">
<figure class="aside__figure">
<picture>
<source
type="image/webp"
srcset="./assets/images/silver_wolf_character_model.webp"
media="(min-width: 600px)"
width="354"
height="456"
/>
<img
src="./assets/images/silver_wolf_character_model_185w.webp"
alt="Silver Wolf Character Model"
width="185px"
height="238px"
/>
</picture>
<figcaption>
Silver Wolf character model (front view: left image, rear
view: right image).
</figcaption>
</figure>
</aside>
</div>
</article>
<article id="author" class="article author">
<h2 class="article__title author__title">AUTHOR</h2>
<div class="article__content author__content">
<aside class="author__info">
<div class="author__info__content">
<div class="author__avatar">
<a
class="avatar__source"
href="https://x.com/ramen_star/status/1794363482072330268"
target="_blank"
>
<picture>
<source
type="image/webp"
srcset="
https://gravatar.com/avatar/27b2a91a60fe98f8313fddea13bd10269bcb5d92cfdfeadbe3932d17cb23e7a9.webp?s=150
"
media="(min-width: 768px)"
width="150"
height="150"
/>
<img
class="avatar__image"
src="https://gravatar.com/avatar/27b2a91a60fe98f8313fddea13bd10269bcb5d92cfdfeadbe3932d17cb23e7a9.png?s=125"
alt="Author's Avatar"
width="125px"
height="125px"
loading="lazy"
/>
</picture>
</a>
</div>
<h4 class="author__name">Reykim</h4>
<div class="author__bio">
<ul class="bio__list">
<li class="list__item location" aria-label="Location">
<svg
aria-hidden="true"
class="icon location__icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 -960 960 960"
>
<path
d="M480.21-480Q510-480 531-501.21t21-51Q552-582 530.79-603t-51-21Q450-624 429-602.79t-21 51Q408-522 429.21-501t51 21ZM480-191q119-107 179.5-197T720-549q0-105-68.5-174T480-792q-103 0-171.5 69T240-549q0 71 60.5 161T480-191Zm0 95Q323.03-227.11 245.51-339.55 168-452 168-549q0-134 89-224.5T479.5-864q133.5 0 223 90.5T792-549q0 97-77 209T480-96Zm0-456Z"
/>
</svg>
<span> Indonesia </span>
</li>
<li class="list__item work" aria-label="Work">
<svg
class="icon work__icon"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 -960 960 960"
>
<path
d="M168-144q-29.7 0-50.85-21.15Q96-186.3 96-216v-432q0-29.7 21.15-50.85Q138.3-720 168-720h168v-72.21Q336-822 357.18-843q21.17-21 50.91-21h144.17Q582-864 603-842.85q21 21.15 21 50.85v72h168q29.7 0 50.85 21.15Q864-677.7 864-648v432q0 29.7-21.15 50.85Q821.7-144 792-144H168Zm0-72h624v-432H168v432Zm240-504h144v-72H408v72ZM168-216v-432 432Z"
/>
</svg>
<span> Frontend Engineer </span>
</li>
<li class="list__item interests" aria-label="Interests">
<svg
class="icon interests__icon interests"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 -960 960 960"
>
<path
d="m96-528 192-336 192 336H96Zm192 384q-60 0-102-42.24t-42-101.55Q144-348 186-390q42-42 102-42t102 42q42 42 42 102t-42 102q-42 42-102 42Zm.21-72Q318-216 339-237.21t21-51Q360-318 338.79-339t-51-21Q258-360 237-338.79t-21 51Q216-258 237.21-237t51 21ZM221-600h134l-67-119-67 119Zm307 456v-288h288v288H528Zm72-72h144v-144H600v144Zm72-312q-54-45-89.06-74.59-35.05-29.58-56-52Q506-677 497.5-696q-8.5-19-8.5-42.67 0-42.62 28-71.97Q545-840 589.46-840q25.54 0 46.04 10.5T672-797q16-22 37-32.5t46.18-10.5Q799-840 827-810.64q28 29.35 28 71.97 0 23.67-8 42.67t-29.13 41.2q-21.13 22.2-56.5 51.5Q726-574 672-528Zm0-96q68-57 89.5-78.5T783-740q0-11-8-19.5t-18.74-8.5q-8.26 0-15.26 4t-12 10l-57 53-56-53q-6-6-13.21-10-7.2-4-14.79-4-11 0-19 8.5t-8 19.5q0 17 22.5 39t88.5 77Zm0-77Zm-383 48Zm0 362Zm382 0Z"
/>
</svg>
<ul>
<li>IT and Programming</li>
<li>Gaming</li>
<li>Badminton</li>
<li>Animation</li>
<li>Comics</li>
</ul>
</li>
</ul>
</div>
</div>
</aside>
<div class="author__remark">
<h3>Closing Remarks</h3>
<p class="remark__content">
Hello, I'm Reykim and I'm the author of this website. I made
this website for one of the assignment of a course that I took
about the basic of web programming. The task was to make a
website with any topic utilizing many HTML5 tags, using CSS to
make a good layout, and also Javascript to make the website
interactive. I chose the character "Silver Wolf" as my topic
because this character is the one that popped up in my mind.
</p>
<p>
That's all I have to say, I hope you enjoy reading this small
website that I made and maybe this website can be an example
to start your web development journey. Again, thank you for
reading!
</p>
</div>
</div>
</article>
</div>
<aside id="table-of-content" class="table-of-content" aria-label="menu">
<button
id="toggle-table-of-content"
class="table-of-content__button"
aria-label="Toggle table of content"
>
<svg
class="icon table-of-content__icon menu active"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 -960 960 960"
aria-hidden="true"
>
<path
d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"
/>
</svg>
<svg
class="icon table-of-content__icon menu-open"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 -960 960 960"
aria-hidden="true"
>
<path
d="M120-240v-80h520v80H120Zm664-40L584-480l200-200 56 56-144 144 144 144-56 56ZM120-440v-80h400v80H120Zm0-200v-80h520v80H120Z"
/>
</svg>
</button>
<nav class="table-of-content__nav">
<ul class="nav__list">
<li class="list__item">
<a href="#introduction">Introduction</a>
</li>
<li class="list__item">
<a href="#character">Character</a>
</li>
<li class="list__item">
<a href="#author">Author</a>
</li>
</ul>
</nav>
</aside>
</div>
</main>
<footer class="footer">
<div class="content footer__content">
<nav class="footer__nav">
<ul class="nav__list">
<li class="list__item github">
<a href="https://github.com/reykim7854" target="_blank">
<svg
class="icon github__icon"
viewBox="0 0 98 96"
xmlns="http://www.w3.org/2000/svg"
>
<title>Github Icon</title>
<desc>Icon for the website github.com</desc>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
/>
</svg>
</a>
</li>
<li class="list__item twitter">
<a href="https://x.com/Reykim_" target="_blank">
<svg
class="icon twitter__icon"
viewBox="0 0 1200 1227"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<title>X (formerly Twitter) Icon</title>
<desc>Icon for the website x.com</desc>
<path
d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z"
/>
</svg>
</a>
</li>
</ul>
</nav>
<p>Made with ♥</p>
<p class="back-to-top"><a href="#">Back to Top</a></p>
</div>
</footer>
</body>
<script src="./index.js" type="text/javascript"></script>
</html>