-
Notifications
You must be signed in to change notification settings - Fork 2
/
page_L2.html
520 lines (457 loc) · 19.2 KB
/
page_L2.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
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
<!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" />
<title>傳統精神接軌嘻哈潮流 「客+潮」發揚客家文化</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="css/page.css">
<link rel="icon" type="image/x-icon" href="resources/icon/svg/NS Logo_白_工作區域 1.svg">
<style>
.header {
position: relative;
white-space: nowrap;
display: inline-block;
vertical-align: middle;
background-color: #f8f8ff;
width: 100%;
}
.line {
display: block;
border-top: 1px solid black;
width: 90%;
height: 1.51px;
margin-left: auto;
margin-right: auto;
}
.header_font {
display: inline-block;
font-family: Noto Serif SC;
font-size: 37px;
font-weight: 400;
line-height: 53px;
color: black;
text-decoration: none;
letter-spacing: 0.06em;
text-align: center;
margin-top: 10px;
z-index: 1;
position: absolute;
}
.rectangle {
width: 180px;
height: 102px;
background-color: #937D54F2;
display: block;
margin-left: auto;
margin-right: auto;
z-index: 2;
}
.footer {
position: relative;
white-space: nowrap;
display: inline-block;
vertical-align: middle;
width: 100%;
height: 206px;
background-color: #937D54;
margin-bottom: 0px;
}
.footer_font {
display: inline-block;
font-family: Noto Serif SC;
font-size: 22px;
font-weight: 400;
line-height: 32px;
letter-spacing: 0.06em;
text-align: left;
white-space: pre-line;
margin-top: 41px;
z-index: 1;
position: absolute;
}
.link-container {
display: inline-block
}
.rectangle-hover {
position: relative;
color: black;
}
.rectangle-hover:hover {
color: white;
}
.rectangle-hover:hover::before {
content: '';
position: absolute;
text-align: center;
left: -35.5px;
top: -27px;
width: 180px;
height: 102px;
background-color: #937D54F2;
z-index: -1;
border-radius: 4px;
}
.mobileheader {
display: none;
}
.mobilefooter {
display: none;
}
@media(max-width:760px) {
.header {
display: none;
}
.mobileheader {
display: flex;
justify-content: center;
background-color: #f8f8ff;
}
.line {
display: none;
}
.container {
width: fit-content;
/* Set the width of the container */
margin: 0 auto;
/* Center the container horizontally */
display: flex;
justify-content: right;
height: fit-content;
top: 90px;
}
.mobileline {
position: relative;
display: block;
justify-content: center;
border-top: 1px solid black;
width: 90%;
height: 1.51px;
margin-left: auto;
margin-right: auto;
}
/* CSS for dropdown menu */
.dropdown-menu {
position: relative;
display: flex;
white-space: pre-line;
line-height: 10px;
height: fit-content;
margin-top: 20px;
border: none;
justify-content: flex-end;
margin-right: 10%;
background-color: #f8f8ff;
}
.dropdown-menu>a {
display: flex;
justify-content: right;
padding: 10px;
color: #333;
text-decoration: none;
}
.dropdown-menu ul {
position: absolute;
top: 100%;
left: 0;
display: none;
text-decoration: none;
background-color: #f8f8ff;
padding: 10px;
margin: 0;
list-style-type: none;
}
.dropdown-menu ul li {
margin-bottom: 5px;
text-decoration: none;
}
.dropdown-menu:hover ul {
display: block;
text-decoration: none;
color: #f8f8ff;
}
.mobilefont {
text-decoration: none;
font-family: Noto Serif SC;
font-size: 37px;
font-weight: 400;
line-height: 53px;
letter-spacing: 0.06em;
text-align: center;
margin-top: 42px;
color: black;
}
.footer {
display: none;
}
.mobilefooter {
display: flex;
justify-content: center;
height: 206px;
background-color: #937D54;
margin-bottom: 0px;
}
.mobilefooterfont {
display: block;
font-family: Noto Serif SC;
font-size: 15px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0.06em;
text-align: left;
white-space: pre-line;
margin-top: auto;
margin-bottom: auto;
margin-right: 0px;
position: relative;
color: white
}
}
</style>
</head>
<body>
<!--header_life-->
<div class="header">
<a href="index.html" style="color:#f8f8ff">
<img src="resources/icon/svg/NS Logo_白_工作區域 1.svg" style="margin-left:90px;
margin-top:0px;
width:275px;
height:170px;">
</a>
<img src="resources/icon/svg/NS banner_工作區域 1-02.svg" style="position:relative;
margin-left:132px;
margin-top:40px;
width:637px;
height:130px;">
<a href="international.pages.html" class="rectangle-hover" style="display:inline-block;
font-family: Noto Serif SC;
font-size: 37px;
font-weight: 400;
text-decoration: none;
line-height: 53px;
width:109px;
height:49px;
letter-spacing: 0.06em;
text-align: center;
margin-top:42px;
z-index:1;
position:absolute;
left:389px">國際</a>
<a href="life.pages-2.html" class="rectangle" style="display:inline-block;
font-family: Noto Serif SC;
font-size: 37px;
font-weight: 400;
text-decoration: none;
line-height: 53px;
width:180px;
height:102px;
padding-top:26px;
letter-spacing: 0.06em;
text-align: center;
vertical-align: middle;
margin-top:15px;
z-index:1;
position:absolute;
color:white;
border-radius: 4px;
left:570px">生活</a>
<a href="art.pages.html" class="rectangle-hover" style="display:inline-block;
font-family: Noto Serif SC;
font-size: 37px;
font-weight: 400;
text-decoration: none;
line-height: 53px;
width:109px;
height:49px;
letter-spacing: 0.06em;
text-align: center;
margin-top:42px;
z-index:1;
position:absolute;
left:834px">藝文</a>
<a href="knowledge.pages.html" class="rectangle-hover" style="display:inline-block;
font-family: Noto Serif SC;
font-size: 37px;
font-weight: 400;
text-decoration: none;
line-height: 53px;
width:109px;
height:49px;
letter-spacing: 0.06em;
text-align: center;
margin-top:42px;
z-index:1;
position:absolute;
left:1056px">新知</a>
</div>
<div class="line"></div>
<!--headermobile-->
<div class="mobileheader">
<img src="resources/icon/svg/NS Logo_白_工作區域 1.svg" style="margin-left:90px;
margin-top:0px;
width:180px;
height:120px;
justify-content:flex-start;
margin-left:5%">
<div class="container"></div>
<div class="dropdown-menu" style:="margin-right:0px;">
<a href="#">____
____
____</a>
<ul>
<li><a href="international.pages.html" class="mobilefont">國際</a></li>
<li><a href="life.pages-2.html" class="mobilefont">生活</a></li>
<li><a href="art.pages.html" class="mobilefont">藝文</a></li>
<li><a href="knowledge.pages.html" class="mobilefont">新知</a></li>
</ul>
</div>
</div>
</div>
<div class="mobileline"></div>
<!-- 文章首圖 -->
<img class="page-img" src="resources/imgs/生活/客+潮.jpg" alt="新聞標題">
<!-- 文章大標 -->
<div class="page-title">傳統精神接軌嘻哈潮流 「客+潮」發揚客家文化</div>
<!-- 文章內文 -->
<p class="page-text">
【記者陳孟樺台北報導】2022臺北客家義民嘉年華自22日起至24日以「義民35．客＋潮」為主題展開活動。義民嘉年華來到第35週年，乘著客家文化的浪，與現代潮流結合，衝上前所未見的浪峰。這次以嘻哈元素貫穿活動，期盼能拉近客家原生文化與年輕一輩的距離，同時也帶給民眾新穎體驗。
</p>
<p class="page-text">
本屆以「客＋潮」融合傳統與新潮流，更擴大規模舉辦往年的「迎神繞境」與「安座大典」，特別邀請全台35間宮廟參與。廟宇人員聲勢浩大，來自台灣各地的神轎一齊座落在自由廣場中央。安座大典啟動的那一刻，所有民眾肅立，專注地看著廟方將一尊尊義民爺與忠勇公請出轎，接著由典禮人員們小心翼翼地把義民爺牌位一ㄧ接過手傳至主祭台上。
</p>
<p class="page-text">
今年客家義民嘉年華融合傳統與潮流，主辦方祭出嘻哈主題曲「承蒙臺北」的舞蹈比賽，歌詞以客語道出義民來到台北的故事，詞曲中新舊雜揉與碰撞成為一大特點。而「創意踩街」受風雨影響而取消，令許多表演團隊感到惋惜，原定受邀參與的國立臺北大學熱舞社學生吳俞蓁認為：「平常不會注意到這類型的活動，但有結合熱舞表演就能吸引許多大學生與街舞圈年輕人的關注。」
</p>
<p class="page-text">
出身不同世代卻同樣關注、喜歡客家文化的民眾匯聚在義民嘉年華。會場中鑼鼓喧囂夾雜現代嘻哈音樂，針對本次主辦方嘗試結合兩種文化，臺北市政府客家事務委員會主任委員徐世勲説：「想讓民眾耳目一新，不見得是要完全顛覆，而是在某種既有的客家特色下變得非常潮流。」
</p>
<p class="page-text">
傳統與潮流在活動中交會，主辦方期待能重新詮釋當代客家精神。徐世勲認為，客家文化在創新或者與其他文化融合都有所突破，不過「客語傳承」仍是最大困境。國立臺灣大學客家研究社副社長吳廷宇認為，對客家青年而言，具備客語能力與擁有使用客語的環境同樣重要，「我們對公眾場合中出現這些語言可能還不習慣，像臺大學生會今年迎新傳單使用多元語言，就有些人不習慣而引發爭議。」主辦方這次嘗試交融兩種文化，吳廷宇也表示，大家會感到新潮，或許也有人因活動而想認識客家文化。
</p>
<p class="page-text">
本屆客家義民嘉年華為客家文化翻開嶄新的一頁，談及下一頁該如何續寫，徐世勲表示，未來計畫讓客家結合全球當代文化，「甚至讓大家覺得原來，我們客家人也可以引領潮流。」另一方面，吳廷宇點出，主辦方可以讓民眾體驗客家人的生活，「畢竟文化本質上是一種生活方式，所以民眾參與過這樣的生活方式後，推廣效度或深度都才會是持續的。」客家精神透過本次活動與潮流接軌，讓客家傳統以新形式發揚光大。
</p>
<!--手機板-->
<!-- 文章首圖 -->
<img class="m-page-img" src="resources/imgs/生活/客+潮.jpg" alt="新聞標題">
<!-- 文章大標 -->
<div class="m-page-title">傳統精神接軌嘻哈潮流 「客+潮」發揚客家文化</div>
<!-- 文章內文 -->
<p class="m-page-text">
【記者陳孟樺台北報導】2022臺北客家義民嘉年華自22日起至24日以「義民35．客＋潮」為主題展開活動。義民嘉年華來到第35週年，乘著客家文化的浪，與現代潮流結合，衝上前所未見的浪峰。這次以嘻哈元素貫穿活動，期盼能拉近客家原生文化與年輕一輩的距離，同時也帶給民眾新穎體驗。
</p>
<p class="m-page-text">
本屆以「客＋潮」融合傳統與新潮流，更擴大規模舉辦往年的「迎神繞境」與「安座大典」，特別邀請全台35間宮廟參與。廟宇人員聲勢浩大，來自台灣各地的神轎一齊座落在自由廣場中央。安座大典啟動的那一刻，所有民眾肅立，專注地看著廟方將一尊尊義民爺與忠勇公請出轎，接著由典禮人員們小心翼翼地把義民爺牌位一ㄧ接過手傳至主祭台上。
</p>
<p class="m-page-text">
今年客家義民嘉年華融合傳統與潮流，主辦方祭出嘻哈主題曲「承蒙臺北」的舞蹈比賽，歌詞以客語道出義民來到台北的故事，詞曲中新舊雜揉與碰撞成為一大特點。而「創意踩街」受風雨影響而取消，令許多表演團隊感到惋惜，原定受邀參與的國立臺北大學熱舞社學生吳俞蓁認為：「平常不會注意到這類型的活動，但有結合熱舞表演就能吸引許多大學生與街舞圈年輕人的關注。」
</p>
<p class="m-page-text">
出身不同世代卻同樣關注、喜歡客家文化的民眾匯聚在義民嘉年華。會場中鑼鼓喧囂夾雜現代嘻哈音樂，針對本次主辦方嘗試結合兩種文化，臺北市政府客家事務委員會主任委員徐世勲説：「想讓民眾耳目一新，不見得是要完全顛覆，而是在某種既有的客家特色下變得非常潮流。」
</p>
<p class="m-page-text">
傳統與潮流在活動中交會，主辦方期待能重新詮釋當代客家精神。徐世勲認為，客家文化在創新或者與其他文化融合都有所突破，不過「客語傳承」仍是最大困境。國立臺灣大學客家研究社副社長吳廷宇認為，對客家青年而言，具備客語能力與擁有使用客語的環境同樣重要，「我們對公眾場合中出現這些語言可能還不習慣，像臺大學生會今年迎新傳單使用多元語言，就有些人不習慣而引發爭議。」主辦方這次嘗試交融兩種文化，吳廷宇也表示，大家會感到新潮，或許也有人因活動而想認識客家文化。
</p>
<p class="m-page-text">
本屆客家義民嘉年華為客家文化翻開嶄新的一頁，談及下一頁該如何續寫，徐世勲表示，未來計畫讓客家結合全球當代文化，「甚至讓大家覺得原來，我們客家人也可以引領潮流。」另一方面，吳廷宇點出，主辦方可以讓民眾體驗客家人的生活，「畢竟文化本質上是一種生活方式，所以民眾參與過這樣的生活方式後，推廣效度或深度都才會是持續的。」客家精神透過本次活動與潮流接軌，讓客家傳統以新形式發揚光大。
</p>
<!-- 推薦新聞 -->
<br>
<hr>
<br>
<div class="related-news-title">推薦新聞</div>
<div style="display:flex;
flex-direction: row;
justify-content: center;
margin-top: 30px;
margin-bottom:30px;">
<div>
<a href="page_L1.html">
<div class="related-news-board">
<img class="related-news-img" src="resources/imgs/生活/南方影展.jpg">
<div class="related-news-cardtitle">南方影展凝聚台南電影人 首增學生獎鼓勵新銳創作</div>
</div>
</a>
</div>
<div>
<a href="page_L3.html">
<div class="related-news-board">
<img class="related-news-img" src="resources/imgs/生活/虎獅.jpg">
<div class="related-news-cardtitle">全台唯一「舞虎」！ 虎獅派對促陣頭文化傳承</div>
</div>
</a>
</div>
<div>
<a href="page_L4.html">
<div class="related-news-board">
<img class="related-news-img" src="resources/imgs/生活/人權.jpg">
<div class="related-news-cardtitle">「聲」入人權議題 黑手那卡西唱出街頭抗爭史</div>
</div>
</a>
</div>
</div>
<!--手機板-->
<div class="m-related-news-title">推薦新聞</div>
<div style="display:flex;
flex-direction: column;
align-items: center;
margin-top: 30px;
margin-bottom:30px;">
<div>
<a href="page_L1.html">
<div class="m-related-news-board">
<img class="m-related-news-img" src="resources/imgs/生活/南方影展.jpg">
<div class="m-related-news-cardtitle">南方影展凝聚台南電影人 首增學生獎鼓勵新銳創作</div>
</div>
</a>
</div>
<div>
<a href="page_L3.html">
<div class="m-related-news-board">
<img class="m-related-news-img" src="resources/imgs/生活/虎獅.jpg">
<div class="m-related-news-cardtitle">全台唯一「舞虎」！ 虎獅派對促陣頭文化傳承</div>
</div>
</a>
</div>
<div>
<a href="page_L4.html">
<div class="m-related-news-board">
<img class="m-related-news-img" src="resources/imgs/生活/人權.jpg">
<div class="m-related-news-cardtitle">「聲」入人權議題 黑手那卡西唱出街頭抗爭史</div>
</div>
</a>
</div>
</div>
<br>
<!--footer-->
<div class="footer">
<img src="resources/icon/svg/NS Logo_工作區域 1.svg" style="margin-left:48px;
margin-bottom:20px;
width:275px;
height:170px;">
<div class="footer_font" style="margin-left:50px;color: white;">HUNTER｜江昇 方琮翔 鄧芯怡 陳孟樺
BIG BOSS｜李法賢
SHOOT｜donnot.bother.us@gmail.com
</div>
<div class="footer_font" style="left: 861px;margin-top:67px;color:#EBC151;;">copyright©2023 NEWS SAFARI
</div>
</div>
<!--footermobile-->
<div class="mobilefooter">
<img src="resources/icon/svg/NS Logo_工作區域 1.svg" style="
margin-top:auto;
margin-bottom:auto;
width:180px;
height:120px;
display:flex;
justify-content:flex-start;">
<div class="mobilefooterfont" style="color: white;width:max-content;justify-content: flex-end;">
HUNTER｜江昇 方琮翔 鄧芯怡 陳孟樺
BIG BOSS｜李法賢
SHOOT｜donnot.bother.us@gmail.com
<div style="color:#EBC151;">copyright©2023 NEWS SAFARI</div>
</div>
</div>
</body>