-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
130 lines (112 loc) · 5.05 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>0 seconds wasted</title>
<link href="https://fonts.cdnfonts.com/css/arcade" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="hidden" id="main">
<div id="welcome"></div>
<p id="welcome-description">Scroll down for more...</p>
</section>
<section>
<h1 class="hidden" id="year-2004">2004</h1>
<div class="hidden korea-description">
<span>I was born in</span>
<span id="korea-container">
<span style="margin-right: -10px;">Chungju,</span>
<span id="korea">korea</span>
<span class="hover-text">(South)</span>
</span>
<span style="font-size: 1.5em; margin-left: -7px;">🇰🇷</span>
</div>
<div id="korean-time" class="hidden korea-description"></div>
<div id="gifs">
<div class="stagger hidden">
<img src="media/bts.gif" width="270" height="270" frameBorder="0"></img>
</div>
<div class="stagger hidden">
<img src="media/faker.gif" width="480" height="270" frameBorder="0"></img>
</div>
<div class="stagger hidden">
<img src="media/chaewon.gif" width="270" height="270" frameBorder="0"></img>
</div>
</div>
<div class="hidden" id="korean-ppl">Here are some cool korean people</div>
</section>
<section id="nz">
<h1 class="hidden" id="year-2009">2009</h1>
<div class="hidden korea-description">
<span>I moved to</span>
<span style="margin-right: -10px;">Auckland,</span>
<span>New Zealand</span>
<span style="font-size: 1.5em; margin-left: -7px;">🇳🇿</span>
</div>
<div id="nz-time" class="hidden korea-description"></div>
<div id="gifs">
<div class="stagger hidden">
<img src="media/pukeko.gif" width="270" height="270" frameBorder="0"></img>
</div>
<div class="stagger hidden">
<img src="media/kiwi.gif" width="480" height="270" frameBorder="0"></img>
</div>
<div class="stagger hidden" style="display:grid; place-items: center;">
<img src="media/kakapo.gif" width="400" height="226" frameBorder="0"></img>
<div></div>
<div class="hidden" id="nz-birds" >These are native New Zealand birds</div>
</div>
</div>
</section>
<section>
<h1 class="hidden" id="year-2023">2023</h1>
<div class="hidden korea-description">
<span>I moved to</span>
<span style="margin-right: -10px;">Sydney,</span>
<span>Australia</span>
<span style="font-size: 1.5em; margin-left: -7px;">🇦🇺</span>
</div>
<div id="aus-time" class="hidden korea-description"></div>
<div id="gifs">
<div class="stagger hidden">
<img src="media/pc.gif" style="filter: brightness(0.8)" height="270" frameBorder="0"></img>
</div>
<div class="stagger hidden">
<img src="media/azkaban.jpg" height="270" frameBorder="0"></img>
</div>
<div class="stagger hidden">
<img src="media/kangaroo.gif" width="270" frameBorder="0"></img>
</div>
</div>
<div class="hidden" id="sydney">I am now studying Computer Science at UNSW</div>
</section>
<section>
<h1 class="hidden" id="about-me">About me</h1>
<div class="hidden korea-description">
<span>I like making videos sometimes</span>
</div>
<div id="korean-time" class="hidden korea-description"></div>
<div id="gifs">
<div class="videos hidden">
<iframe width="560" height="315" src="https://www.youtube.com/embed/WL5UjbLO0So?si=y_yCXdSJrG6eC21E" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
<div class="videos hidden">
<iframe width="560" height="315" src="https://www.youtube.com/embed/Lkgtjsb1M-g?si=BeyzW4ghVbzwHI7f" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
<div class="videos hidden">
<iframe width="560" height="315" src="https://www.youtube.com/embed/78JUojjLNDk?si=howpTiAJQY7Dyto7" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
<div class="videos hidden">
<iframe width="560" height="315" src="https://www.youtube.com/embed/vxr-R5HfOm0?si=yuFZ6_GLUk3acuXh" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
</div>
</section>
<section>
<h1 class="hidden" id="end">The End</h1>
<p class="hidden" style="font-family: 'Arcade Rounded', sans-serif; text-align: center;">Thanks for following my journey</p>
</section>
<script src="script.js"></script>
</body>
</html>