-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
398 lines (389 loc) · 15.2 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ukraine</title>
<!-- Boostrap -->
<link rel="stylesheet" href="css/Bootstrap/bootstrap.min.css" />
<!-- Fontawesome -->
<link rel="stylesheet" href="css/Font Awesome/css/all.min.css" />
<!-- Animate -->
<link rel="stylesheet" href="css/Animate/animate.min.css" />
<!-- Custom Style -->
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<!-- Navbar -->
<nav id="Navbar" class="navbar navbar-expand-lg navbar-dark bg-transparent fixed-top">
<div class="container-fluid">
<a href="#Header" class="navbar-brand">
<img src="images/Flag_of_Ukraine.svg.png" alt="Ukraine" class="me-2">
UKRAINE
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#NavbarLinks" aria-controls="NavbarLinks" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="NavbarLinks">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a href="#Intro" class="nav-link">介紹</a>
</li>
<li class="nav-item">
<a href="#History" class="nav-link">歴史</a>
</li>
<li class="nav-item">
<a href="#Geography" class="nav-link">地理</a>
</li>
<li class="nav-item">
<a href="#Economy" class="nav-link">經濟</a>
</li>
<li class="nav-item">
<a href="#Culture" class="nav-link">文化</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Header -->
<header id="Header" class="jumbotron bg-light">
<div class="container text-center">
<h1 class="nation">烏克蘭</h1>
<h4 class="motto">自由 和諧 美好</h4>
</div>
</header>
<!-- Intro -->
<section id="Intro">
<div class="container">
<div class="row align-items-center">
<div class="col-sm-5 img-intro rounded"></div>
<div class="col-sm-7 p-5 text-white">
<h2 class="intro">
歐洲最大的國家 一個風景如畫的地方，創新，創造力與古老的傳統相结合之地。
</h2>
</div>
</div>
</div>
</section>
<!-- History -->
<section id="History">
<div class="container">
<div class="row">
<div class="col-sm-12 page-title text-center">
<h2 class="title shadow fw-bolder">
烏克蘭的前世今生
</h2>
</div>
</div>
<div class="row mt-3">
<div class="col-md-4 wow animate__fadeInLeft" data-wow-duration='1.5s'>
<div class="card">
<div class="img-wrap card-img-top">
<img src="images/ukraine-oring.jpg" alt="oring">
</div>
<div class="card-body">
<h4 class="card-title">起源</h4>
<p class="card-text">
根據考古資料，烏克蘭存有舊石器時代和新石器時代的古人類遺址。<br />烏克蘭歷史上是維京人在公元九世紀建立的基輔羅斯的核心地域，也是近代俄國資本主義發展最早的地區之一。10世紀前後，東斯拉夫人各部落在今烏克蘭地區結合形成古羅斯部族，並建立了基輔羅斯國家。
</p>
<a href="https://zh.wikipedia.org/wiki/%E4%B9%8C%E5%85%8B%E5%85%B0#%E5%8E%86%E5%8F%B2" target="_blank" class="btn btn-warning shadow">
See More
</a>
</div>
</div>
</div>
<div class="col-md-4 wow animate__fadeInUp" data-wow-duration='1.5s'>
<div class="card">
<div class="img-wrap card-img-top">
<img src="images/ukraine-Reply-of-the-Zaporozhian-Cossacks.jpg" alt="">
</div>
<div class="card-body">
<h4 class="card-title">近代史</h4>
<p class="card-text">
14世紀起，烏克蘭人開始脫離古基輔羅斯地區而形成為具有獨特語言、文化和生活習俗的單一民族。<br />15世紀俄羅斯統一後，不堪忍受壓迫的俄羅斯農民逃往這一地帶，形成烏克蘭哥薩克。烏克蘭是一個地理名稱正式被提出是在1569年羅斯西南的波多里亞到札波羅結一帶併入波蘭王國以後。
</p>
<a href="https://zh.wikipedia.org/wiki/%E4%B9%8C%E5%85%8B%E5%85%B0#%E8%BF%91%E7%8F%BE%E4%BB%A3" class="btn btn-warning shadow" target="blank">
See More
</a>
</div>
</div>
</div>
<div class="col-md-4 wow animate__fadeInRight" data-wow-duration='1.5s'>
<div class="card">
<div class="img-wrap card-img-top">
<img src="images/Soviet-Age.jpg" alt="Soviet">
</div>
<div class="card-body">
<h4 class="card-title">蘇聯時期</h4>
<p class="card-text">
一戰時期，1917年二月革命爆發，俄羅斯帝國被推翻，在德意志帝國的攻勢扶持下，烏克蘭人民共和國獨立。<br />德國投降後，蘇俄收復烏克蘭，東烏克蘭地區建立蘇維埃政權，成立烏克蘭蘇維埃社會主義共和國。<br />二戰時期，波蘭被納粹德國和蘇聯分割占領，西烏克蘭與烏克蘭蘇維埃社會主義共和國合併。
</p>
<a href="https://zh.wikipedia.org/wiki/%E4%B9%8C%E5%85%8B%E5%85%B0#%E8%98%87%E8%81%AF%E6%99%82%E6%9C%9F" class="btn btn-warning shadow" target="blank">
See More
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Geography -->
<section id="Geography">
<div class="container-fluid">
<div class="row">
<div id="Map" class="col-sm-5 map"></div>
<div class="col-sm-7 text-light text-center">
<div class="row p-4">
<div class="col-sm-12">
<h2 class="page-title">烏克蘭的地理</h2>
</div>
</div>
<div class="row p-4">
<div class="col-sm-4 col-4">
<i class="fa-solid fa-location-dot"></i>
<h4>地理位置</h4>
</div>
<div class="col-sm-4 col-4">
<i class="fa-solid fa-water"></i>
<h4>流河</h4>
</div>
<div class="col-sm-4 col-4">
<i class="fa-solid fa-tree"></i>
<h4>自然資源</h4>
</div>
</div>
<div class="row p-4 pt-0">
<div class="col-sm-4">
<p>
烏克蘭位於歐洲東部，面積為60.37萬平方公里（約占原蘇聯面積的5.3%），東西長1,300公里，南北長900公里。<br />
南臨亞速海和黑海，陸上東北接俄羅斯，北鄰白俄羅斯，西連斯洛伐克、波蘭和匈牙利，南同摩爾多瓦、羅馬尼亞接壤。
</p>
</div>
<div class="col-sm-4">
<p>
烏克蘭境內有23,000條河流，其中河長100公里以上的有110條。主要河流包括聶伯河、南布格河、北頓涅茨河、普魯特河、聶斯特河和多瑙河，其中最長的是聶伯河。<br />
烏克蘭有超過3,000個湖泊，較大的有亞爾普格湖、薩賽格湖、卡古爾湖和阿利別依湖等。
</p>
</div>
<div class="col-sm-4">
<p>
烏克蘭自然資源豐富。蘊藏著70餘種礦藏資源，如瀝青、無煙煤、鐵、錳、鉻、鈦、鉛、鋅、鋁、汞、鎳和一定量的天然氣和石油。<br />
烏克蘭森林資源較為豐富，占全國領土面積的14%，跨越三個植被帶：森林沼澤帶、森林草原帶和草原帶。
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Economy -->
<section id="Economy">
<div class="container">
<div class="row">
<div class="sol-sm-12 page-title text-center">
<h2 class="shadow">烏克蘭的經濟</h2>
</div>
</div>
<div class="row pt-3">
<div class="col-md-4 col-sm-6 wow animate__fadeInUp" data-wow-duration='1.5s'>
<div class="card">
<div class="card-header text-center">
<i class="fa-solid fa-tractor"></i>
<h4>農業</h4>
</div>
<div class="card-body">
<p class="card-text text-muted">
烏克蘭以肥沃的黑土聞名，是世界上最大的農業生產國和出口國之一，被稱為「歐洲糧倉」
</p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 wow animate__fadeInUp" data-wow-duration='2s'>
<div class="card">
<div class="card-header text-center">
<i class="fa-solid fa-cube"></i>
<h4>礦業</h4>
</div>
<div class="card-body">
<p class="card-text text-muted">
烏克蘭是世界上最重要的礦產生產國之一。烏克蘭是世界第七大鐵礦石生產國和第五大鐵礦石出口國
</p>
</div>
</div>
</div>
<div class="col-md-4 col-sm- wow animate__fadeInUp" data-wow-duration='2.5s'>
<div class="card">
<div class="card-header text-center">
<i class="fa-solid fa-industry"></i>
<h4>工業</h4>
</div>
<div class="card-body">
<p class="card-text text-muted">
烏克蘭工業基礎雄厚，航空航天、軍工、造船、通信等部門都擁有技術優勢
</p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 wow animate__fadeInUp" data-wow-duration='1.5s'>
<div class="card">
<div class="card-header text-center">
<i class="fa-solid fa-shuttle-space"></i>
<h4>航太</h4>
</div>
<div class="card-body">
<p class="card-text text-muted">
克蘭是全球少數擁有完整航空航天硬體工程和生產周期的國家之一。除了客機和運輸機的設計和生產外，烏克蘭還擁有飛機維修企業網絡，包括參與回收軍用飛機和直升機的公司
</p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 wow animate__fadeInUp" data-wow-duration='2s'>
<div class="card">
<div class="card-header text-center">
<i class="fa-solid fa-gun"></i>
<h4>軍工業</h4>
</div>
<div class="card-body">
<p class="card-text text-muted">
烏克蘭繼承了前蘇聯軍事工業基地的產業基礎。主要集中在機器製造業、燃料動力業及高技術部門，生產火箭裝置、宇航裝置、軍用艦船、飛機和飛彈等軍工產品
</p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 wow animate__fadeInUp" data-wow-duration='2.5s'>
<div class="card">
<div class="card-header text-center">
<i class="fa-solid fa-car-rear"></i>
<h4>汽車</h4>
</div>
<div class="card-body">
<p class="card-text text-muted">
烏克蘭的汽車工業同樣是在蘇聯時期建立的。汽車工業是烏克蘭發展最快的行業之一。烏克蘭國內生產的車型主要為卡車、公共汽車、無軌電車等。主要的汽車製造商有ZAZ、博格丹集團、KrAZ等
</p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 wow animate__fadeInUp" data-wow-duration='1.5s'>
<div class="card">
<div class="card-header text-center">
<i class="fa-solid fa-network-wired"></i>
<h4>IT</h4>
</div>
<div class="card-body">
<p class="card-text text-muted">
烏克蘭是世界第五大IT服務出口國，也是中東歐最大的軟體開發編程和IT外包服務市場，擁有超過17萬軟體開發人員
</p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 wow animate__fadeInUp" data-wow-duration='2s'>
<div class="card">
<div class="card-header text-center">
<i class="fa-solid fa-dollar-sign"></i>
<h4>貨幣</h4>
</div>
<div class="card-body">
<p class="card-text text-muted">
烏克蘭現行流通貨幣單位為格里夫納
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Culture -->
<section id="Culture">
<div class="container-fluid">
<div id="City" class="row city">
<div class="col-md-6 bg-city">
<h2 class="title">城市觀光</h2>
<p class="intro">
充滿活力的基輔夜生活還是利沃夫的咖啡香味？或許奧德薩夏日清晨微風？ 或哈爾科夫的史詩建築？
</p>
<a href="https://ukraine.ua/category/cities-places/cities/" target="_blank" class="btn btn-primary">
See More
<i class="fa-solid fa-arrow-right"></i>
</a>
</div>
<div class="col-md-6 img img-city"></div>
</div>
<div id="Place" class="row">
<div class="col-md-6 img img-lake"></div>
<div class="col-md-6 bg-suburban">
<h2 class="title">郊區遊覽</h2>
<p class="intro">
古堡還是自然奇觀？ 海邊度假還是登山？ 很難相信——但在烏克蘭這都可以找到。 還有更多你意想不到的驚喜！
</p>
<a href="https://ukraine.ua/category/cities-places/places/" class="btn btn-primary" target="blank">
See More
<i class="fa-solid fa-arrow-right"></i>
</a>
</div>
</div>
<div id="Create" class="row c-c">
<div class="col-md-6 bg-fashion">
<h2 class="title">文創產業</h2>
<p class="intro">
如今，烏克蘭已成為富有創造力、精英人士出生的地方。藝術家，設計師，音樂家，插畫家，建築師，攝影師。 他們不僅創造自己國家的未來，他們還創造世界的未來。
</p>
</div>
<div class="col-md-6 img img-fashion"></div>
</div>
<div id="Food" class="row">
<div class="col-md-6 img img-food"></div>
<div class="col-md-6 bg-food">
<h2 class="title bg-warning">烏克蘭美食</h2>
<p class="intro">
要想抓住客人的心，就要抓住他的胃！ 當美食與精選葡萄酒相遇時, 所有的美好假期都離不開一頓美食。不知道一個國家的特色美食，就不能真正了解這個國家！
</p>
<a href="https://ukraine.ua/explore/ukrainian-cuisine/" class="btn" target="blank">
See More
<i class="fa-solid fa-arrow-right"></i>
</a>
</div>
</div>
<div id="Wine" class="row wine">
<div class="col-md-6 bg-wine">
<h2 class="title bg-warning">烏克蘭的葡萄酒</h2>
<p class="intro">
烏克蘭並不是一個會立刻浮現在腦海裡的葡萄酒生產國，而是一個應該被視為“隱藏寶石”的葡萄酒國家。烏克蘭葡萄酒一定會超出您的預期。
</p>
<a href="https://ukraine.ua/explore/ukrainian-wine/" class="btn" target="blank">
See More
<i class="fa-solid fa-arrow-right"></i>
</a>
</div>
<div class="col-md-6 img img-wine"></div>
</div>
</div>
</section>
<!-- Footer -->
<footer id="Subscript">
<div class="contaier-fluid text-center">
<h2 class="page-title">READ MORE NEWS ABOUT UKRAINE</h2>
<p class="subscript">
<a href="https://war.ukraine.ua/" target="blank" class="btn fw-bold">
See More
<i class="fa-solid fa-arrow-right"></i>
<a>
</p>
</div>
</footer>
<!-- jQuery -->
<script src="js/jQuery/3.6.0/jquery-3.6.0.min.js"></script>
<!-- Bootstrap -->
<script type="text/javascript" src="js/Bootstrap/5.1.3/bootstrap.min.js"></script>
<!-- GSAP -->
<script src="js/gsap/3.10.0/gsap.min.js"></script>
<!-- ScrollMagic -->
<script src="js/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="js/ScrollMagic/2.0.7/animation.gsap.min.js"></script>
<!-- blockUI -->
<script src="js/blockUI/2.7.0/jquery.blockUI.js"></script>
<!-- Wow -->
<script type="text/javascript" src="js/Wow/wow.min.1.3.0.js"></script>
<!-- Custom -->
<script src="js/main.js"></script>
</body>
</html>