|
@@ -18,6 +18,7 @@
|
|
|
<link rel="stylesheet" href="./style.css">
|
|
|
</head>
|
|
|
|
|
|
+
|
|
|
<body id="top">
|
|
|
<section style="position: relative;">
|
|
|
<img style="position: absolute; left:15vw; top:8.5vw;z-index: 10;" width="150" src="./img/line_2.png" alt="">
|
|
@@ -43,7 +44,8 @@
|
|
|
<img style="position: relative; right:20px;" class="img-fluid" src="./img/about/Bar.png" alt="">
|
|
|
<div class="card-img-overlay">
|
|
|
<div class="mt-3 me-2">
|
|
|
- <h1 style="font-size:3rem;" class="fw-bold mb-0 text-white" set-lan="html:index-videos">影片導覽</h1>
|
|
|
+ <h1 style="font-size:3rem;" class="fw-bold mb-0 text-white" set-lan="html:index-videos">
|
|
|
+ 影片導覽</h1>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -107,100 +109,92 @@
|
|
|
<!-- <h1 class="p-2">實際應用</h1> -->
|
|
|
<div class="row row-cols-lg-3 px-0 mx-0">
|
|
|
<div class="col">
|
|
|
- <img class="video-img img-fluid"
|
|
|
- data-info="AAA8pkLcfY8" data-bs-toggle="modal"
|
|
|
+ <img class="video-img img-fluid" data-info="AAA8pkLcfY8" data-bs-toggle="modal"
|
|
|
data-bs-target="#exampleModal" src="./img/video/封面_AI Spokesgirl.webp" alt="">
|
|
|
</div>
|
|
|
<div class="col">
|
|
|
- <img class="video-img img-fluid"
|
|
|
- data-info="83uE8kVIWsM" data-bs-toggle="modal"
|
|
|
+ <img class="video-img img-fluid" data-info="83uE8kVIWsM" data-bs-toggle="modal"
|
|
|
data-bs-target="#exampleModal" src="./img/video/封面_氣象.webp" alt="">
|
|
|
</div>
|
|
|
<div class="col">
|
|
|
- <img class="video-img img-fluid"
|
|
|
- data-info="y0dgW_dcgDE" data-bs-toggle="modal"
|
|
|
+ <img class="video-img img-fluid" data-info="y0dgW_dcgDE" data-bs-toggle="modal"
|
|
|
data-bs-target="#exampleModal" src="./img/video/封面_翠玉.webp" alt="">
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
+
|
|
|
</section>
|
|
|
- <h1 style="font-size: 32px;background:#D4DAEC; color:#193179; margin-top: -100px;" class="py-5 fw-bold ps-3" set-lan="html:application">實際應用</h1>
|
|
|
+ <h1 style="font-size: 32px;background:#D4DAEC; color:#193179; margin-top: -100px;" class="py-5 fw-bold ps-3"
|
|
|
+ set-lan="html:application">實際應用</h1>
|
|
|
</div>
|
|
|
<div style="margin-bottom: 100px;">
|
|
|
- <!-- dailypaper -->
|
|
|
+ <!-- dailypaper -->
|
|
|
<section class="sec-video" style="width: 75vw; margin: 0 auto" id='dailypaper-video'>
|
|
|
<!-- <h1 class="p-2" set-lan="html:local_news">地方日報</h1> -->
|
|
|
<div class="row row-cols-lg-3 px-0 mx-0">
|
|
|
<div class="col">
|
|
|
- <img class="video-img img-fluid"
|
|
|
- data-info="EuI2Lh2FWDo" data-bs-toggle="modal"
|
|
|
+ <img class="video-img img-fluid" data-info="EuI2Lh2FWDo" data-bs-toggle="modal"
|
|
|
data-bs-target="#exampleModal" src="./img/video/0923(1)_YT封面_地方.webp" alt="">
|
|
|
</div>
|
|
|
<div class="col">
|
|
|
- <img class="video-img img-fluid"
|
|
|
- data-info="YQx_3O8W7hM" data-bs-toggle="modal"
|
|
|
+ <img class="video-img img-fluid" data-info="YQx_3O8W7hM" data-bs-toggle="modal"
|
|
|
data-bs-target="#exampleModal" src="./img/video/0917(03)_YT封面_地方.webp" alt="">
|
|
|
</div>
|
|
|
<div class="col">
|
|
|
- <img class="video-img img-fluid"
|
|
|
- data-info="kzQKfJyQHc0" data-bs-toggle="modal"
|
|
|
+ <img class="video-img img-fluid" data-info="kzQKfJyQHc0" data-bs-toggle="modal"
|
|
|
data-bs-target="#exampleModal" src="./img/video/0924(02)_YT封面_地方.webp" alt="">
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
- <h1 style="font-size: 32px;background:#D4DAEC; color:#193179; margin-top: -100px;" class="py-5 fw-bold ps-3" set-lan="html:local_news">地方日報</h1>
|
|
|
+ <h1 style="font-size: 32px;background:#D4DAEC; color:#193179; margin-top: -100px;" class="py-5 fw-bold ps-3"
|
|
|
+ set-lan="html:local_news">地方日報</h1>
|
|
|
</div>
|
|
|
-
|
|
|
+
|
|
|
<div style="margin-bottom: 100px;">
|
|
|
<!-- metaverse -->
|
|
|
- <section class="sec-video" style="width: 75vw; margin:auto" id='metaverse-video'>
|
|
|
+ <section class="sec-video" style="width: 75vw; margin:auto" id='metaverse-video'>
|
|
|
<!-- <h1 class="p-2" set-lan="html:metaverse">元宇宙</h1> -->
|
|
|
<div class="row row-cols-lg-3 px-0 mx-0">
|
|
|
<div class="col">
|
|
|
- <img class="video-img img-fluid"
|
|
|
- data-info="hoSKF4X5OgU" data-bs-toggle="modal"
|
|
|
+ <img class="video-img img-fluid" data-info="hoSKF4X5OgU" data-bs-toggle="modal"
|
|
|
data-bs-target="#exampleModal" src="./img/video/0923_IG封面_NFT.webp" alt="">
|
|
|
</div>
|
|
|
<div class="col">
|
|
|
- <img class="video-img img-fluid"
|
|
|
- data-info="QQBzJwHjMlk" data-bs-toggle="modal"
|
|
|
+ <img class="video-img img-fluid" data-info="QQBzJwHjMlk" data-bs-toggle="modal"
|
|
|
data-bs-target="#exampleModal" src="./img/video/0927_YT封面_NFT.webp" alt="">
|
|
|
</div>
|
|
|
<div class="col">
|
|
|
- <img class="video-img img-fluid"
|
|
|
- data-info="LsS2SXQ1wrs" data-bs-toggle="modal"
|
|
|
+ <img class="video-img img-fluid" data-info="LsS2SXQ1wrs" data-bs-toggle="modal"
|
|
|
data-bs-target="#exampleModal" src="./img/video/1001_YT封面_NFT.webp" alt="">
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
- <h1 style="font-size: 32px;background:#D4DAEC; color:#193179; margin-top: -100px;" class="py-5 fw-bold ps-3" set-lan="html:metaverse">元宇宙</h1>
|
|
|
+ <h1 style="font-size: 32px;background:#D4DAEC; color:#193179; margin-top: -100px;" class="py-5 fw-bold ps-3"
|
|
|
+ set-lan="html:metaverse">元宇宙</h1>
|
|
|
</div>
|
|
|
|
|
|
-
|
|
|
+
|
|
|
<div style="margin-bottom: 100px;">
|
|
|
<!-- NFT -->
|
|
|
<section class="sec-video" style="width: 75vw; margin: 0 auto" id='NFT-video'>
|
|
|
<!-- <h1 class="p-2">NFT</h1> -->
|
|
|
<div class="row row-cols-lg-3 px-0 mx-0">
|
|
|
<div class="col">
|
|
|
- <img class="video-img img-fluid"
|
|
|
- data-info="LKOLD4ssEIA" data-bs-toggle="modal"
|
|
|
+ <img class="video-img img-fluid" data-info="LKOLD4ssEIA" data-bs-toggle="modal"
|
|
|
data-bs-target="#exampleModal" src="./img/video/0818_YT封面_NFT.webp" alt="">
|
|
|
</div>
|
|
|
<div class="col">
|
|
|
- <img class="video-img img-fluid"
|
|
|
- data-info="QVYsivxltkg" data-bs-toggle="modal"
|
|
|
+ <img class="video-img img-fluid" data-info="QVYsivxltkg" data-bs-toggle="modal"
|
|
|
data-bs-target="#exampleModal" src="./img/video/0819_YT封面_NFT.webp" alt="">
|
|
|
</div>
|
|
|
<div class="col">
|
|
|
- <img class="video-img img-fluid"
|
|
|
- data-info="-udbHXGkqJM" data-bs-toggle="modal"
|
|
|
+ <img class="video-img img-fluid" data-info="-udbHXGkqJM" data-bs-toggle="modal"
|
|
|
data-bs-target="#exampleModal" src="./img/video/0907_YT封面_NFT.webp" alt="">
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
+
|
|
|
</section>
|
|
|
- <h1 style="font-size: 32px;background:#D4DAEC; color:#193179; margin-top: -100px;" class="py-5 fw-bold ps-3">NFT</h1>
|
|
|
+ <h1 style="font-size: 32px;background:#D4DAEC; color:#193179; margin-top: -100px;"
|
|
|
+ class="py-5 fw-bold ps-3">NFT</h1>
|
|
|
</div>
|
|
|
<div style="margin-bottom: 100px;">
|
|
|
|
|
@@ -209,25 +203,23 @@
|
|
|
<!-- <h1 class="p-2" set-lan="html:5G_network">5G網路</h1> -->
|
|
|
<div class="row row-cols-lg-3 px-0 mx-0">
|
|
|
<div class="col">
|
|
|
- <img class="video-img img-fluid"
|
|
|
- data-info="iZxOOUPWL-Q"
|
|
|
- data-bs-toggle="modal" data-bs-target="#exampleModal" src="./img/video/1007_YT封面_NFT.webp" alt="">
|
|
|
+ <img class="video-img img-fluid" data-info="iZxOOUPWL-Q" data-bs-toggle="modal"
|
|
|
+ data-bs-target="#exampleModal" src="./img/video/1007_YT封面_NFT.webp" alt="">
|
|
|
</div>
|
|
|
<div class="col">
|
|
|
- <img class="video-img img-fluid"
|
|
|
- data-info="NWyxxTfBAmA" data-bs-toggle="modal"
|
|
|
+ <img class="video-img img-fluid" data-info="NWyxxTfBAmA" data-bs-toggle="modal"
|
|
|
data-bs-target="#exampleModal" src="./img/video/1005_YT封面_NFT.webp" alt="">
|
|
|
</div>
|
|
|
<div class="col">
|
|
|
- <img class="video-img img-fluid"
|
|
|
- data-info="C0EHKQX-B4M" data-bs-toggle="modal"
|
|
|
+ <img class="video-img img-fluid" data-info="C0EHKQX-B4M" data-bs-toggle="modal"
|
|
|
data-bs-target="#exampleModal" src="./img/video/1006_YT封面_NFT.webp" alt="">
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
- <h1 style="font-size: 32px;background:#D4DAEC; color:#193179; margin-top: -100px;" class="py-5 fw-bold ps-3" set-lan="html:5G_network">5G網路</h1>
|
|
|
+ <h1 style="font-size: 32px;background:#D4DAEC; color:#193179; margin-top: -100px;" class="py-5 fw-bold ps-3"
|
|
|
+ set-lan="html:5G_network">5G網路</h1>
|
|
|
</div>
|
|
|
-
|
|
|
+
|
|
|
|
|
|
|
|
|
|
|
@@ -260,8 +252,9 @@
|
|
|
height: 100%;
|
|
|
}
|
|
|
</style>
|
|
|
- <div class='embed-container'><iframe class='youtube-video' src='https://www.youtube.com/embed//XfTQ2uIWWbA'
|
|
|
- frameborder='0' allowfullscreen height="394" allow="autoplay;"></iframe></div>
|
|
|
+ <div class='embed-container'><iframe class='youtube-video'
|
|
|
+ src='https://www.youtube.com/embed//XfTQ2uIWWbA' frameborder='0' allowfullscreen
|
|
|
+ height="394" allow="autoplay;"></iframe></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|