update

about.html

@@ -20,15 +20,16 @@
         <div class="card border-0">
             <img src="./img/T1.png" class="card-img img-fluid" alt="...">
             <div class="card-img-overlay pb-0">
-                <div class="row px-0 mx-0">
-                    <div class="col-2">
-                        <a style="text-decoration: none;" href="./index.html"> <img style="width: 80px;"
-                                src="./img/Button_Home.png" alt=""></a>
+                <div style="float: left;">
+                    <a style="text-decoration: none;" href="./index.html"> <img style="width: 80px;"
+                        src="./img/Button_Home.png" alt=""></a>
                     </div>
-                    <div class="col-10">
-                        <p style="font-size: 48px;position: relative; left:15%;width: 50%;"
+                <div class="text-center me-5">
+                    <div>
+                        <p style="font-size: 48px"
                             class="propertytitle text-dark fw-bold">關於春池玻璃</p>
                     </div>
+                </div>
                     <div style="margin-top: -20px;" class="pb-5">
                         <img style="position: relative; z-index: 2; top:15px;" class="img-fluid px-0 w-100"
                             src="./img/line.png" alt="">
@@ -44,7 +45,6 @@
                         </div>
                     </div>
 
-                </div>
             </div>
             <!-- <div style="margin-top: 100px;">
                 <video style="width: 100%;" autoplay muted loop playsinline>

application.html

@@ -20,15 +20,17 @@
         <div class="card border-0">
             <img src="./img/T1.png" class="card-img img-fluid" alt="...">
             <div class="card-img-overlay pb-0">
-                <div class="row px-0 mx-0">
-                    <div class="col-2">
-                        <a style="text-decoration: none;" href="./index.html"> <img style="width: 80px;"
-                                src="./img/Button_Home.png" alt=""></a>
+                <div style="float: left;">
+                    <a style="text-decoration: none;" href="./index.html"> <img style="width: 80px;"
+                        src="./img/Button_Home.png" alt=""></a>
                     </div>
-                    <div class="col-10">
-                        <p style="font-size: 48px;position: relative; left:15%; width: 50%;"
+                <div class="text-center me-5">
+                    <div>
+                        <p style="font-size: 48px"
                             class="propertytitle text-dark fw-bold">回收玻璃用途</p>
                     </div>
+                </div>
+                <div>
                     <div class="process-box px-0">
                         <div class="bg-item3 bg-active">
                             <div style="margin-top: -20px;" class="pb-5">
@@ -46,7 +48,7 @@
                                 </div>
                                 <div style="margin-top: 10px;">
                                     <video style="width: 100%;" autoplay muted loop playsinline>
-                                        <source src="./img/process/bt_01_0001-0280.mkv" type="video/mp4">
+                                        <source src="./img/application/bt_01_0001-0280.mkv" type="video/mp4">
                                     </video>
                                 </div>
                             </div>
@@ -66,7 +68,7 @@
                                 </div>
                                 <div style="margin-top: 10px;">
                                     <video style="width: 100%;" autoplay muted loop playsinline>
-                                        <source src="./img/process/bt_02_0001-0250.mkv" type="video/mp4">
+                                        <source src="./img/application/bt_02_0001-0250.mkv" type="video/mp4">
                                     </video>
                                 </div>
                             </div>
@@ -85,7 +87,7 @@
                                 </div>
                                 <div style="margin-top: 10px;">
                                     <video style="width: 100%;" autoplay muted loop playsinline>
-                                        <source src="./img/process/bt_03_0001-0300.mkv" type="video/mp4">
+                                        <source src="./img/application/bt_03_0001-0300.mkv" type="video/mp4">
                                     </video>
                                 </div>
                             </div>
@@ -104,7 +106,7 @@
                                 </div>
                                 <div style="margin-top: 10px;">
                                     <video style="width: 100%;" autoplay muted loop playsinline>
-                                        <source src="./img/process/bt_04_0001-0250.mkv" type="video/mp4">
+                                        <source src="./img/application/bt_04_0001-0250.mkv" type="video/mp4">
                                     </video>
                                 </div>
                             </div>

index.html

@@ -49,7 +49,7 @@
                         </a>
                     </div>
                     <div class="col-4">
-                        <a style="text-decoration: none;" href="./video.html">
+                        <a style="text-decoration: none;" href="./video-2.html">
                             <img class="img-fluid" src="./img/Button_影片導覽.png" alt="">
                         </a>
                     </div>

process1.html

@@ -19,16 +19,19 @@
     <section id="sec01" style="height: 100vh;" class="sec01">
         <div class="card border-0">
             <img src="./img/T1.png" class="card-img img-fluid" alt="...">
+        
             <div class="card-img-overlay pb-0">
-                <div class="row px-0 mx-0">
-                    <div class="col-2">
-                        <a style="text-decoration: none;" href="./index.html"> <img style="width: 80px;"
-                                src="./img/Button_Home.png" alt=""></a>
+                <div style="float: left;">
+                    <a style="text-decoration: none;" href="./index.html"> <img style="width: 80px;"
+                        src="./img/Button_Home.png" alt=""></a>
                     </div>
-                    <div class="col-10">
-                        <p style="font-size: 48px;position: relative; left:15%; width: 50%;"
+                <div class="text-center me-5">
+                    <div>
+                        <p style="font-size: 48px"
                             class="propertytitle text-dark fw-bold">回收玻璃流程</p>
                     </div>
+                </div>
+                <div>
                     <div class="process-box px-0">
                         <div class="bg-item3 bg-active">
                             <div style="margin-top: -20px;" class="pb-5">
@@ -42,13 +45,13 @@
                                             35噸賓士大卡車正滿載碎玻璃，一批一批到入廠區，形成滿滿的玻璃山，而每個月卻會有200～300個貨櫃的廢玻璃出口到海外，這些不是垃圾，而是可以再利用的重要原料。</p>
                                     </div>
                                 </div>
-                                <h1 class="text-center mt-5">動畫影片1</h1>
+                                <!-- <h1 class="text-center mt-5">動畫影片1</h1> -->
 
-                                <!-- <div style="margin-top: 10px;">
+                                <div style="margin-top: 10px;">
                                     <video style="width: 100%;" autoplay muted loop playsinline>
-                                        <source src="./img/process/bt_01_0001-0280.mkv" type="video/mp4">
+                                        <source src="./img/process/bt_01_rec_0001-0250.mkv" type="video/mp4">
                                     </video>
-                                </div> -->
+                                </div>
                             </div>
                         </div>
                         <div class="bg-item3">
@@ -62,13 +65,12 @@
                                         <p class="text-start">利用廢棄玻璃製成亮彩琉璃、綠建材，實用又兼具環保。</p>
                                     </div>
                                 </div>
-                                <h1 class="text-center mt-5">動畫影片2</h1>
-
-                                <!-- <div style="margin-top: 10px;">
+                                <!-- <h1 class="text-center mt-5">動畫影片2</h1> -->
+                                <div style="margin-top: 10px;">
                                     <video style="width: 100%;" autoplay muted loop playsinline>
-                                        <source src="./img/process/bt_02_0001-0250.mkv" type="video/mp4">
+                                        <source src="./img/process/bt_03_color_0001-0250.mkv" type="video/mp4">
                                     </video>
-                                </div> -->
+                                </div>
                             </div>
                         </div>
                         <div class="bg-item3">

property.html

@@ -20,15 +20,17 @@
         <div class="card text-white border-0">
             <img src="./img/T1.png" class="card-img img-fluid" alt="...">
             <div class="card-img-overlay pb-0">
-                <div class="row px-0 mx-0">
-                    <div class="col-2">
-                        <a style="text-decoration: none;" href="./index.html"> <img style="width: 80px;"
-                                src="./img/Button_Home.png" alt=""></a>
+                <div style="float: left;">
+                    <a style="text-decoration: none;" href="./index.html"> <img style="width: 80px;"
+                        src="./img/Button_Home.png" alt=""></a>
                     </div>
-                    <div class="col-10">
-                        <p style="font-size: 48px;position: relative; left:25%;" class="propertytitle text-dark fw-bold">
-                            玻璃特性</p>
+                <div class="text-center me-5">
+                    <div>
+                        <p style="font-size: 48px"
+                            class="propertytitle text-dark fw-bold">玻璃特性</p>
                     </div>
+                </div>
+                <div>
                     <div style="margin-top: -20px;" class="pb-4">
                         <img style="position: relative; z-index: 2; top:15px;" class="img-fluid px-0 w-100"
                             src="./img/line.png" alt="">

video-2.html

@@ -0,0 +1,137 @@
+<!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>glass-property</title>
+
+
+
+
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
+    <!-- <link rel="stylesheet" href="./style.css"> -->
+</head>
+
+<body>
+    <section class="sec01">
+        <div class="card border-0">
+            <img src="./img/T1.png" class="card-img img-fluid" alt="...">
+            <div class="card-img-overlay pb-0">
+                <div style="float: left;">
+                    <a style="text-decoration: none;" href="./index.html"> <img style="width: 80px;"
+                        src="./img/Button_Home.png" alt=""></a>
+                    </div>
+                <div class="text-center me-5">
+                    <div>
+                        <p style="font-size: 48px; -webkit-text-stroke:0.7px #fff;"
+                            class="propertytitle text-dark fw-bold">影片導覽</p>
+                    </div>
+                </div>
+                    <div style="margin-top: -20px;" class="pb-5">
+                        <img style="position: relative; z-index: 2; top:15px;" class="img-fluid px-0 w-100"
+                            src="./img/line.png" alt="">
+                        <div style="background:	#FFFFFF;" class="py-3 border">
+                            <div style="margin:0 auto; width: 95%;">
+                                <p style="font-size: 22px;" class="text-dark px-0 mb-5">
+                                    春池玻璃 ｜接班硬世代 三人紀實頻道
+                                </p>
+                              
+                            </div>
+                        </div>
+                    </div>
+                    <div class="tab-content px-0" id="myTabContent">
+                        <div class="tab-pane fade show active text-dark" id="home" role="tabpanel"
+                            aria-labelledby="home-tab">
+                            <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed//M1N7eTCah_w' frameborder='0' allowfullscreen></iframe></div>
+                        </div>
+                        <div class="tab-pane fade text-dark" id="profile" role="tabpanel" aria-labelledby="profile-tab">
+                            <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed//oMRck77uSLo' frameborder='0' allowfullscreen></iframe></div>
+                        </div>
+                        <div class="tab-pane fade text-dark" id="contact" role="tabpanel" aria-labelledby="contact-tab">
+                            <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed//Bc27sD2XeyE' frameborder='0' allowfullscreen></iframe></div>
+                        </div>
+                        <div class="tab-pane fade text-dark" id="contact1" role="tabpanel" aria-labelledby="contact-tab">
+                            <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed//Bc27sD2XeyE' frameborder='0' allowfullscreen></iframe></div>
+    
+                        </div>
+                        <div class="tab-pane fade text-dark" id="contact2" role="tabpanel" aria-labelledby="contact-tab">
+                            <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed//M1N7eTCah_w' frameborder='0' allowfullscreen></iframe></div>
+    
+                        </div>
+                        <div class="tab-pane fade text-dark" id="contact3" role="tabpanel" aria-labelledby="contact-tab">
+                            <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed//oMRck77uSLo' frameborder='0' allowfullscreen></iframe></div>
+                            
+                        </div>
+                    </div>
+                    <div class="d-flex justify-content-center text-center mt-3">
+                        <div  style="width: 95%; margin:0 auto">
+                            <ul class="nav nav-pills" id="myTab" role="tablist">
+                                <li class="nav-item p-2" role="presentation">
+                                    <div class="nav-link active border-0 bg-transparent text-dark px-0" id="home-tab"
+                                        data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab"
+                                        aria-controls="home" aria-selected="true"><img src="./img/1633409116610.jpg" alt="">
+                                    </div>
+                                </li>
+                                <li class="nav-item p-2" role="presentation">
+                                    <div class="nav-link border-0 bg-transparent text-dark px-0" id="profile-tab"
+                                        data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab"
+                                        aria-controls="profile" aria-selected="false"><img width="216"
+                                            src="./img/1633409172788.jpg" alt=""></div>
+                                </li>
+                                <li class="nav-item p-2" role="presentation">
+                                    <div class="nav-link border-0 bg-transparent text-dark px-0" id="contact-tab"
+                                        data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab"
+                                        aria-controls="contact" aria-selected="false"><img width="216"
+                                            src="./img/1633409158555.jpg" alt=""></div>
+                                </li>
+                                <li class="nav-item p-2" role="presentation">
+                                    <div class="nav-link border-0 bg-transparent text-dark px-0" id="contact-tab"
+                                        data-bs-toggle="tab" data-bs-target="#contact1" type="button" role="tab"
+                                        aria-controls="contact" aria-selected="false"><img width="216"
+                                            src="./img/1633409158555.jpg" alt=""></div>
+                                </li>
+                                <li class="nav-item p-2" role="presentation">
+                                    <div class="nav-link border-0 bg-transparent text-dark px-0" id="contact-tab"
+                                        data-bs-toggle="tab" data-bs-target="#contact2" type="button" role="tab"
+                                        aria-controls="contact" aria-selected="false"><img width="216"
+                                            src="./img/1633409116610.jpg" alt=""></div>
+                                </li>
+                                <li class="nav-item p-2" role="presentation">
+                                    <div class="nav-link border-0 bg-transparent text-dark px-0" id="profile-tab"
+                                        data-bs-toggle="tab" data-bs-target="#contact3" type="button" role="tab"
+                                        aria-controls="profile" aria-selected="false"><img width="216"
+                                            src="./img/1633409172788.jpg" alt=""></div>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+
+            </div>
+            <!-- <div style="margin-top: 100px;">
+                <video style="width: 100%;" autoplay muted loop playsinline>
+                    <source src="./img/春池動畫.mp4" type="video/mp4">
+                </video>
+            </div> -->
+
+
+        </div>
+
+
+    </section>
+
+
+
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"
+        integrity="sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN"
+        crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js"
+        integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/"
+        crossorigin="anonymous"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+</body>
+
+</html>

video.html

@@ -16,22 +16,29 @@
 </head>
 <body>
     <section class="sec01">
-        <div class="card text-white border-0 pb-5">
+        <div class="card border-0 pb-5">
             <img src="./img/T1.png" class="card-img img-fluid" alt="...">
             <div class="card-img-overlay px-0">
-                <div class="row px-0 mx-0">
-                    <div class="col-2">
-                        <a style="text-decoration: none;" href="./index.html"> <img style="width: 80px;" src="./img/Button_Home.png" alt=""></a>
+                <div style="float: left;">
+                    <a style="text-decoration: none;" href="./index.html"> <img style="width: 80px;"
+                        src="./img/Button_Home.png" alt=""></a>
                     </div>
-                    <div class="col-10">
-                        <p style="font-size: 48px;position: relative; left:25%" class="propertytitle text-dark fw-bold">影片導覽</p>
+                <div class="text-center me-5">
+                    <div>
+                        <p style="font-size: 48px"
+                            class="propertytitle text-dark fw-bold">影片導覽</p>
                     </div>
+                </div>
+                <div>
                     <div style="margin-top: -20px;" class="pb-5">
                         <img style="position: relative; z-index: 2; top:15px;" class="img-fluid px-0 w-100"
                             src="./img/line.png" alt="">
-                        <div style="background:	#FFFFFF; font-size: 24px;"
-                            class="py-3 border d-flex align-items-center ps-4">
-                            <p class="text-dark px-0 mb-0">春池玻璃 ｜接班硬世代 三人紀實頻道</p>
+                        <div style="background:	#FFFFFF;" class="py-3 border">
+                            <div style="margin:0 auto; width: 95%;">
+                                <p style="font-size: 22px;" class="text-dark px-0 mb-5">
+                                    春池玻璃 ｜接班硬世代 三人紀實頻道
+                                </p>
+                            </div>
                         </div>
                     </div>