-
Notifications
You must be signed in to change notification settings - Fork 0
/
報導者測試.html
146 lines (112 loc) · 5.02 KB
/
報導者測試.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
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-QVH86ZM211"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-QVH86ZM211');
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<!--標記網頁描述=Open Graph Protocol-->
<meta name="description" property="og:description"
itemprop="description" content="此網站為臺藝大圖文系學生 Haruo Wang 於2021年開始自主架設,作為前端工程、SEO及介面設計練習場,與其嘗試數位敘事之刊載平台所用。">
<!--Google Search Console 證明-->
<meta name="google-site-verification" content="QM81eyfiJNzxHY7-3elp-mhcvo9XfifzVk5-iGK8IBk" />
<title>寫幀集|抒寫幀實,是數位敘事的真諦</title>
<!--Lab的標準網址宣告-->
<link rel="canonical" href="https://haruowang.github.io/Lab.html">
<!--Bootstrap 核心 CSS-->
<link href="css/bs5/bootstrap.min.css" rel="stylesheet">
<!--Bootstrap 美化 CSS-->
<link href="css/bs5/carousel.css" rel="stylesheet">
<link href="css/style.css" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Alegreya+Sans&display=swap" rel="stylesheet">
<!--font awesome引用代碼-->
<script src="https://kit.fontawesome.com/2597de0e27.js" crossorigin="anonymous"></script>
</head>
<body>
<header>
<!--bg-white=導覽列背景顏色-->
<!--navbar-expand-md=出現漢堡選單之斷點-->
<!--navbar-light=導覽列文字顏色-->
<nav class="navbar bg-white fixed-top navbar-expand-md navbar-light">
<div class="container-fluid">
<!--寫幀集-->
<!--fs-2=字型大小-->
<a class="navbar-brand fs-2" href="index.html">fraME</a>
<!--button class…=使導覽列符合BS規範-->
<!--data-bs-toggle…=使導覽列能夠伸展-->
<!--data-bs-target…=套用下方div區塊裡的id-->
<!--aria…=和無障礙瀏覽有關的標籤-->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse"
aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<!--ms-auto=置右-->
<ul class="navbar-nav fs-4 ms-auto">
<li class="nav-item active">
<!--關於-->
<a class="nav-link" href="index.html#About"><strong>About</strong></a>
</li>
<li class="nav-item">
<!--作品集-->
<a class="nav-link" href="index.html#Work"><strong>Work</strong></a>
</li>
<li class="nav-item">
<!--實驗場-->
<!--i class="fas fa-flask"=實驗場icon-->
<a class="nav-link"><i class="fas fa-flask fa-lg"></i></a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main>
<!-- ↓↓↓ 在 body 內貼上 「報導者/橫著滾吧照片!」 HTML程式碼片段 ↓↓↓ -->
<div id="f6c74ce9-ce65-4927-b539-adf4091c8005"></div>
<script>
(function() {
var namespace = '__twreporterEmbeddedData'
var packageName = 'scrollable-image'
if (typeof window != 'undefined') {
if (!window[namespace]) {
window[namespace] = {}
}
if (window[namespace] && !window[namespace][packageName]) {
window[namespace][packageName] = []
}
}
if (Array.isArray(window[namespace][packageName])) {
var data = {"uuid":"f6c74ce9-ce65-4927-b539-adf4091c8005","lazyload":false,
"data":["images/如廁1.JPG","images/如廁2.JPG","images/如廁3.JPG","images/如廁4.JPG"]}
window[namespace][packageName].push(data)
}
})()
</script><script type="text/javascript" src="https://unpkg.com/@twreporter/scrollable-image@1.0.0/dist/main-e7b3e42ea2d59f6d2ba8.bundle.js"></script>
<!-- ↑↑↑ 在 body 內貼上 「報導者/橫著滾吧照片!」 HTML程式碼片段 ↑↑↑ -->
<hr class="featurette-divider">
<div class="row featurette">
<div class="col-md-7 order-md-2">
<!--Powered by-->
<h4>Powered by</h4>
<img src="images/報導者.svg" class="img-fluid" alt="報導者">
</div>
</div>
<hr class="featurette-divider">
</div>
<footer class="container">
<!--回首頁-->
<p class="float-end"><a href="#">Back to top</a></p>
<p>Copyright © fraME. All Rights Reserved. <a href="#">Privacy</a> · <a href="#">Terms</a></p>
</footer>
</main>
<script src="js/bs5/bootstrap.bundle.min.js"></script>
</body>
</html>