-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathCertificateShowcasePage2023.html
443 lines (325 loc) · 15.8 KB
/
CertificateShowcasePage2023.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
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
<link rel="stylesheet" href="assets\css\w3.css">
<link rel="stylesheet" href="font.css">
<link rel="stylesheet" href="assets\css\3dbutton.css" \>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets\css\CertificateShowcasePage2023_CSS.css">
<title>Nelson LAN 靜態個人介紹網頁 證書頁面</title>
</head>
<body>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">-->
<link rel="stylesheet" href="w3.css">
<!--<link rel="stylesheet" href="pictures/skill_page/w3.css">-->
<link rel="stylesheet" href="font.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Lato_TC", sans-serif;}
body, html {
height: 100%;
color: #777;
line-height: 1.8;
}
.w3-myfont{
font-family: "Lato_TC", normal;
}
/* Create a Parallax Effect */
bgimg-0 ,.bgimg-1, .bgimg-2, .bgimg-3,.bgimg-4,.bgimg-5,.bgimg-6,.bgimg-7,.bgimg-8 {
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* Skill Sector Main Pic */
.bgimg-0 {
background-image: url("minecraft_server_gate.png");
min-height: 100%;
}
/* GCC2023 */
.bgimg-1 {
background-image: url("pictures/skill_page/CertificateShowcasePage2023/topic_sep_parts/GCC2023.jpg");
min-height: 100%;
}
/* CJKS */
.bgimg-2 {
background-image: url("pictures/skill_page/CertificateShowcasePage2023/topic_sep_parts/blend_CJKS.png");
min-height: 100%;
}
/* SkillCert */
.bgimg-3 {
background-image: url("pictures/skill_page/CertificateShowcasePage2023/topic_sep_parts/hackrank.png");
min-height: 100%;
}
.w3-wide {letter-spacing: 10px;}
.w3-hover-opacity {cursor: pointer;}
/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1600px) {
.bgimg-1, .bgimg-2, .bgimg-3,.bgimg-4,.bgimg-5,.bgimg-6 {
background-attachment: scroll;
min-height: 400px;
}
.w3-myfont{
font-family: "Lato_TC", normal;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
}
</style>
<div class="w3-top">
<div class="w3-bar" id="myNavbar">
<a class="w3-bar-item w3-button w3-hover-black w3-hide-medium w3-hide-large w3-right" href="javascript:void(0);" onClick="toggleFunction()" title="Toggle Navigation Menu">
<i class="fa fa-bars"></i> </a>
<a href="index.html#" class="w3-bar-item w3-button">HOME</a>
<a href="index.html#about" class="w3-bar-item w3-button w3-hide-small"><i class="fa fa-user"></i>ABOUT</a>
<a href="index.html#contact" class="w3-bar-item w3-button w3-hide-small"><i class="fa fa-envelope"></i> CONTACT</a>
<a href="index.html#duty" class="w3-bar-item w3-button w3-hide-small"><i class="fa fa-th"></i> DUTY</a>
<a href="index.html#portfolio" class="w3-bar-item w3-button w3-hide-small"><i class="fa fa-th"></i> PORTFOLIO</a>
<a href="skill.html" class="w3-bar-item w3-button w3-hide-small"><i class="fa fa-user"></i> SKILL</a>
<a href="media_archive.html" class="w3-bar-item w3-button w3-hide-small"><i class="fa fa-th"></i> Media Archive</a>
<a href="other_archive.html" class="w3-bar-item w3-button w3-hide-small"><i class="fa fa-th"></i> Other Archive</a>
</div>
<div id="navDemo" class="w3-bar-block w3-white w3-hide w3-hide-large w3-hide-medium">
<a href="main.html#about" class="w3-bar-item w3-button" onClick="toggleFunction()">ABOUT</a>
<a href="#skill" class="w3-bar-item w3-button" onClick="toggleFunction()">Skill</a>
<a href="index.html" class="w3-bar-item w3-button" onClick="toggleFunction()">PORTFOLIO</a>
<a href="media_archive.html" class="w3-bar-item w3-button" onClick="toggleFunction()">Media Archive</a>
<a href="other_archive.html" class="w3-bar-item w3-button" onClick="toggleFunction()">Other Archive</a>
<a href="main.html#contact" class="w3-bar-item w3-button" onClick="toggleFunction()">CONTACT</a>
</div>
</div><!-- Navbar on small screens -->
<div class="bgimg-0 w3-display-container w3-opacity-min" id="home">
<div class="w3-display-middle" style="white-space:nowrap;">
<span class="w3-center w3-padding-large w3-black w3-large w3-wide w3-animate-opacity">Certificate Showcase Page </span>
</div>
</div>
<!-- Logo Text -->
<div class="bgimg-1 w3-display-container " id="GCC2023">
<div class="w3-display-middle" style="white-space:nowrap;">
<!--
<span class="w3-center w3-padding-large w3-black w3-xlarge w3-animate-opacity">Game Development & <span class="w3-hide-small">3D Modelling / Animation</span> </span>
-->
</div>
</div><!-- Logo Text -->
<br><br><br><br><br>
<div class="wrapper2">
<b> <h1>Minor Certificate of Discipline of Learning</h1></b><hr>
<div>
Google Career Certificates are a suite of flexible online training programs, built and taught by Google,
that are designed to provide learners from all backgrounds with job-ready skills within 6 months. <br><br>
「Google Career Certificates 智慧數碼人才計劃」旨在透過一系列靈活的網上學習課程，讓來自不同背景的人士，在無需相關經驗的情況下，六個月內培養實用數碼職業技能。<br>
<br>
<b>【Self Introduction words】(個人引言)<br></b>
。 Certificates only represent how much effort I put into the Information Technology related field, as a lifelong learner.<br>
。 Enriching gained knowledge, refreshing forgotten, equipping crucial and learning well-timed new things for solving side projects and innovating daily life outside of the workplace. <br>
<br>
。 證書僅證明、代表本人是一個終身學習者，而投資多少功夫、時間到資訊科技領域之上。<br>
。 充實已經獲得的、喚醒已經遺忘的、裝備重要的、和學習與時並進的知識，務求做到推陳出新；在專案中排除困難，或是應用於生活之上、職場之外。 <br>
<br>
<b>【Obtained Certificates】(已獲取專業證書課程) <br></b>
。 These awards are hereby given to those who completed graded tests and assignments in each course. <br>
。 These certificates are without an expiration date and are globally recognised. <br><br>
。 此證書只會頒受予以下人仕，此證書沒有過期日及在全球承認。條件是完成評分課業及測考。 <br>
</div>
<hr>
<div class="container2">
<div id="start2"><img src="pictures\skill_page\CertificateShowcasePage2023\GCC2023_TSSFundamentals.png" alt=""></div>
<div id="slide5"><img src="pictures\skill_page\CertificateShowcasePage2023\GCC2023_TSSFundamentals.png" alt=""></div>
<div id="slide6"><img src="pictures\skill_page\CertificateShowcasePage2023\GCC2023_PMFoundation.png" alt=""></div>
<div id="slide7"><img src="pictures\skill_page\CertificateShowcasePage2023\GCC2023_UXFoundation.png" alt=""></div>
<div id="slide8"><img src="pictures\skill_page\CertificateShowcasePage2023\GCC2023_Network.png" alt=""></div>
<div id="slide9"><img src="pictures\skill_page\CertificateShowcasePage2023\GCC2023_OS.png" alt=""></div>
<div style="overflow-y: scroll; height:350px; " class="navigation">
<li>
<div class="btn">
<a href="#slide5"><img src="pictures\skill_page\CertificateShowcasePage2023\GCC2023_TSSFundamentals.png" alt=""></a>
</div>
</li>
<li>
<div class="btn">
<a href="#slide6"><img src="pictures\skill_page\CertificateShowcasePage2023\GCC2023_PMFoundation.png" alt=""></a>
</div>
</li>
<li>
<div class="btn">
<a href="#slide7"><img src="pictures\skill_page\CertificateShowcasePage2023\GCC2023_UXFoundation.png" alt=""></a>
</div>
</li>
<li>
<div class="btn">
<a href="#slide8"><img src="pictures\skill_page\CertificateShowcasePage2023\GCC2023_Network.png" alt=""></a>
</div>
</li>
<li>
<div class="btn">
<a href="#slide9"><img src="pictures\skill_page\CertificateShowcasePage2023\GCC2023_OS.png" alt=""></a>
</div>
</li>
</div>
</div>
</div>
<br><br><br><br><br>
<br><br><br><br><br>
<div class="bgimg-2 w3-display-container " id="CJKS">
<div class="w3-display-middle" style="white-space:nowrap;">
</div>
</div><!-- Logo Text -->
<div class="wrapper">
<h1>Certificate of <br>Progressions and Accomplishments</h1><hr>
<div>
These awards are hereby given to those who make progress in different ranks and stages,
and who make the VALID attempt(s) in competition, no matter whether answers are accepted,
conditional (passed sample, sectional accepted), or special cases.
These certificates are without an expiration date and are globally recognised.<br>
此證書只會頒受予以下人仕，此證書沒有過期日及在全球承認。
條件是在不同決賽梯段有曾作有效呈交，不論給出答案是完全、非完全滿足要求、或為特殊案列。
</div>
<hr>
<div class="container">
<div id="start" ><img src="pictures\skill_page\CertificateShowcasePage2023\CJ2022.png" alt=""></div>
<div id="slide1"><img src="pictures\skill_page\CertificateShowcasePage2023\CJ2022.png" alt=""></div>
<div id="slide2"><img src="pictures\skill_page\CertificateShowcasePage2023\CJ2022Q.png" alt=""></div>
<div id="slide3"><img src="pictures\skill_page\CertificateShowcasePage2023\Kick Start 2022.png" alt=""></div>
<div id="slide4"><img src="pictures\skill_page\CertificateShowcasePage2023\CJ2023.png" alt=""></div>
<div style="overscroll-behavior-y: none;" class="navigation">
<li>
<div class="btn">
<a href="#slide1"><img src="pictures\skill_page\CertificateShowcasePage2023\CJ2022.png" alt=""></a>
</div>
</li>
<li>
<div class="btn">
<a href="#slide2"><img src="pictures\skill_page\CertificateShowcasePage2023\CJ2022Q.png" alt=""></a>
</div>
</li>
<li>
<div class="btn">
<a href="#slide3"><img src="pictures\skill_page\CertificateShowcasePage2023\Kick Start 2022.png" alt=""></a>
</div>
</li>
<li>
<div class="btn">
<a href="#slide4"><img src="pictures\skill_page\CertificateShowcasePage2023\CJ2023.png" alt=""></a>
</div>
</li>
</div>
</div>
</div>
<br><br><br><br><br>
</div>
<!--------------------------------------------------->
<!--------------------------------------------------->
<!--------------------------------------------------->
<!--------------------------------------------------->
<!--------------------------------------------------->
<!--------------------------------------------------->
<div class="bgimg-3 w3-display-container " id="SkillCert">
<div class="w3-display-middle" style="white-space:nowrap;">
<!--
<span class="w3-center w3-padding-large w3-black w3-xlarge w3-animate-opacity">Game Development & <span class="w3-hide-small">3D Modelling / Animation</span> </span>
-->
</div>
</div><!-- Logo Text -->
<br><br><br><br><br>
<div class="wrapper3">
<h1>Certificate of <br>Passing Language Assessment </h1><hr>
<div style="white-space:nowrap;">
Certifications of Language Assessment are not equal to proficiency in a language but only prove of ability to code / to utilize to make products.
</div>
<hr>
<div class="container3">
<div id="start3"><img src="pictures\skill_page\CertificateShowcasePage2023\problem_solving_basic_certificate.png" alt=""></div>
<div id="slide37"><img src="pictures\skill_page\CertificateShowcasePage2023\problem_solving_basic_certificate.png" alt=""></div>
<div id="slide36"><img src="pictures\skill_page\CertificateShowcasePage2023\problem_solving_intermediate_certificate.png" alt=""></div>
<div id="slide35"><img src="pictures\skill_page\CertificateShowcasePage2023\sql_basic_certificate.png" alt=""></div>
<div id="slide34"><img src="pictures\skill_page\CertificateShowcasePage2023\sql_intermediate_certificate.png" alt=""></div>
<div id="slide33"><img src="pictures\skill_page\CertificateShowcasePage2023\python_basic_certificate.png" alt=""></div>
<div id="slide32"><img src="pictures\skill_page\CertificateShowcasePage2023\c_sharp_basic certificate.png" alt=""></div>
<div id="slide31"><img src="pictures\skill_page\CertificateShowcasePage2023\java_basic certificate.png" alt=""></div>
<div style="overflow-y: scroll; height:350px; " class="navigation">
<li>
<div class="btn">
<a href="#slide37"><img src="pictures\skill_page\CertificateShowcasePage2023\problem_solving_basic_certificate.png" alt=""></a>
</div>
</li>
<li>
<div class="btn">
<a href="#slide36"><img src="pictures\skill_page\CertificateShowcasePage2023\problem_solving_intermediate_certificate.png" alt=""></a>
</div>
</li>
<li>
<div class="btn">
<a href="#slide35"><img src="pictures\skill_page\CertificateShowcasePage2023\sql_basic_certificate.png" alt=""></a>
</div>
</li>
<li>
<div class="btn">
<a href="#slide34"><img src="pictures\skill_page\CertificateShowcasePage2023\sql_intermediate_certificate.png" alt=""></a>
</div>
</li>
<li>
<div class="btn">
<a href="#slide33"><img src="pictures\skill_page\CertificateShowcasePage2023\python_basic_certificate.png" alt=""></a>
</div>
</li>
<li>
<div class="btn">
<a href="#slide32"><img src="pictures\skill_page\CertificateShowcasePage2023\c_sharp_basic certificate.png" alt=""></a>
</div>
</li>
<li>
<div class="btn">
<a href="#slide31"><img src="pictures\skill_page\CertificateShowcasePage2023\java_basic certificate.png" alt=""></a>
</div>
</li>
</div>
</div>
</div>
<br><br><br><br><br>
<br><br><br><br><br>
<!--------------------------------------------------->
<!--------------------------------------------------->
<!--------------------------------------------------->
<footer class="w3-center w3-black w3-padding-64 w3-opacity w3-hover-opacity-off"> <a href="#home" class="w3-button w3-light-grey"><i class="fa fa-arrow-up w3-margin-right"></i>To the top</a>
<div class="w3-xlarge w3-section"> <a href="https://drive.google.com/open?id=1x5gO8Dmfox_wXYIrENMOVmvkefmgbh1B"><i class="fa fa-google w3-hover-opacity" style="font-size:36px";></i></a> <a href="https://www.youtube.com/user/bbbgbg"><i class="fa fa-youtube-play w3-hover-opacity" style="font-size:36px";></i></a> <a href="https://github.com/NelsonLAN"><i class="fa fa-github w3-hover-opacity" style="font-size:36px";></i></a> <a href="https://www.linkedin.com/in/nelsonlan574211143"><i class="fa fa-linkedin w3-hover-opacity" style="font-size:36px";></i></a> </div>
<p> © 版權屬 Nelson LAN 所有 (2012 - 2023)</p>
<p> © Copyright belong to NelsonLAN (2012 - 2023) </p>
</footer><!-- Footer -->
<script>
// Modal Image Gallery
function onClick(element) {
document.getElementById("img01").src = element.src;
document.getElementById("modal01").style.display = "block";
var captionText = document.getElementById("caption");
captionText.innerHTML = element.alt;
}
// Change style of navbar on scroll
window.onscroll = function() {myFunction()};
function myFunction() {
var navbar = document.getElementById("myNavbar");
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
navbar.className = "w3-bar" + " w3-card" + " w3-animate-top" + " w3-white";
} else {
navbar.className = navbar.className.replace(" w3-card w3-animate-top w3-white", "");
}
}
// Used to toggle the menu on small screens when clicking on the menu button
function toggleFunction() {
var x = document.getElementById("navDemo");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>
</body>
</html>