Halaman utama Jelajahi Bantuan
Daftar Masuk
choozmo
/
SP_Glass
2
0
Fork 0
Berkas Masalah 0 Permintaan Tarik 0 Wiki
Jelajahi Sumber

update

jeter20131220 3 tahun lalu
induk
d3e6cd9ba1
melakukan
b9b377e055
11 mengubah file dengan 243 tambahan dan 222 penghapusan
Tampilan Split Tampilkan Statistik Diff
  1. 119 0
      application.html
  2. 15 14
      glass-art.html
  3. 1 0
      goto.js
  4. 8 2
      index.html
  5. 74 13
      process1.html
  6. 0 64
      process2.html
  7. 0 64
      process4.html
  8. 0 64
      process5.html
  9. 13 0
      style.css
  10. 1 1
      style.css.map
  11. 12 0
      style.scss

+ 119 - 0
application.html
Tampilan Berkas 

@@ -0,0 +1,119 @@
 
+<!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>process</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 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>
 
+                    <div class="col-10">
 
+                        <p style="font-size: 48px;position: relative; left:15%; width: 50%;"
 
+                            class="propertytitle text-dark fw-bold">回收玻璃用途</p>
 
+                    </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="text-center py-3 border">
 
+                            <div class="bg-item3 bg-active px-3">
 
+                                <h1 class="text-center">1.科技建材</h1>
 
+                                <p class="text-dark px-0 mb-5">點擊螢幕一起互動吧</p>
 
+                                <p class="text-start">
 
+                                    將回收玻璃變身為高科技綠建材，經濟效益頓時躍升。
 
+                                    可作為燒製地磚、輕質骨材、發泡玻璃、管路回填料等建材之原料;
 
+                                    亦有少部分運用於掺於青中用於鋪設道路。由於顏色、顆粒的多樣，加上..</p>
 
+                            </div>
 
+                            <div class="bg-item3 px-3">
 
+                                <h1 class="text-center">2.耐火磚</h1>
 
+                                <p class="text-dark px-0 mb-5">點擊螢幕一起互動吧</p>
 
+                                <p class="text-start">透過高科技不斷創新研發、提升防火技術，以減少火災生命及財產損失。此種回收玻璃重量約一般磚頭的1/8，材質輕，又有耐震、隔熱、防火、隔音效果，是高效能的隔熱節能減碳建材。
 
+                                    價格與一般磚頭差不多。
 
+                                    </p>
 
+                            </div>
 
+                            <div class="bg-item3 px-3">
 
+                                <h1 class="text-center">3.玻璃製品</h1>
 
+                                <p class="text-dark px-0 mb-5">點擊螢幕一起互動吧</p>
 
+                                <p class="text-start">玻璃回收利潤低，春池透過玻璃的回收再製，將原本已經廢棄的玻璃，重新賦予它們新的價值，透過自動化系統，可大量製作圓瓶、透明、咬霧、方瓶、特殊瓶、圓罐、方罐等再製品，為廢棄玻璃創造，永續的高經濟價值。
 
+                                </p>
 
+                            </div>
 
+                            <div class="bg-item3 px-3">
 
+                                <h1 class="text-center">4.藝術玻璃</h1>
 
+                                <p class="text-dark px-0 mb-5">點擊螢幕一起互動吧</p>
 
+                                <p class="text-start">春池綠能玻璃傳承新竹地區玻璃藝術產業，每一件作品皆為手工精製，擁有四十餘年經歷的工藝師傅，發揮精湛的技藝，創作出春池玻璃獨有的藝術作品，春池手工吹製玻璃、工藝製品，如今已成功開發多款多元運用性的玻璃，產品的轉換效率不斷被提升，精益求精，追求卓越。
 
+                                </p>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+
 
+                </div>
 
+            </div>
 
+            <h1 class="text-center">動畫影片</h1>
 
+
 
+        </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>
 
+    <script src="./goto.js"></script>
 
+
 
+
 
+    <script>
 
+        var next3 = document.getElementById('sec01');
 
+        var items3 = document.getElementsByClassName('bg-item3');
 
+        var index = 0;
 
+
 
+        function btnNext2() {
 
+            index++;
 
+
 
+            if (index > 3) index = 0;
 
+            console.log(index);
 
+
 
+            ShowItems3();
 
+        };
 
+
 
+        next3.onclick = btnNext2;
 
+
 
+        console.log(items3)
 
+
 
+        function ShowItems3() {
 
+            // 迴圈執行，將每張項目的類別bg-active移除
 
+            for (var i = 0; i < items3.length; i++) {
 
+                items3[i].classList.remove("bg-active");
 
+            }
 
+            // 將要顯示的項目添加bg-active類別
 
+            items3[index].classList.add("bg-active");
 
+            // $('.bg-item').fadeIn();
 
+
 
+        };
 
+    </script>
 
+</body>
 
+
 
+</html>

+ 15 - 14
process3.html → glass-art.html
Tampilan Berkas 

@@ -16,36 +16,35 @@
 
 </head>
 
 
 <body>
 
-    <section class="sec01">
 
+    <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>
 
+                        <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%;" class="propertytitle text-dark fw-bold">回收玻璃流程</p>
 
+                        <p style="font-size: 48px;position: relative; left:15%; width: 50%;"
 
+                            class="propertytitle text-dark fw-bold">回收玻璃藝術</p>
 
                     </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="text-center py-3 border d-flex align-items-center justify-content-center">
 
-                            <div>
 
-                                <h1 class="text-center">3.人工初步分類</h1>
 
-                                <p  class="text-dark px-0 mb-5">點擊螢幕一起互動吧</p>
 
-                                <p class="text-start">人工檢查 、分色、去除非金屬雜物。</p>
 
+                        <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="text-center py-3 border">
 
+                            <div class="px-3">
 
+                                <p class="text-dark px-0 mb-5">點擊螢幕一起互動吧</p>
 
                             </div>
 
                         </div>
 
-                        
                     </div>
 
-           
+
 
                 </div>
 
             </div>
 
             <h1 class="text-center">動畫影片</h1>
 
-        
+
 
         </div>
 
-        
+
 
 
     </section>
 
 
@@ -59,6 +58,8 @@
 
         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>
 
+    <script src="./goto.js"></script>
 
+
 
 </body>
 
 
 </html>

+ 1 - 0
goto.js
Tampilan Berkas 

@@ -63,3 +63,4 @@ function ShowItems2() {
 
 // console.log(duration);
 
 
 // setInterval(btnNext,duration);
 
+

+ 8 - 2
index.html
Tampilan Berkas 

@@ -54,14 +54,20 @@
 
                         </a>
 
                     </div>
 
                     <div class="col-4">
 
+                        <a style="text-decoration: none;" href="./process1.html">
 
                         <img class="img-fluid" src="./img/Button_玻璃流程.png" alt="">
 
+                        </a>
 
                     </div>
 
                     <div class="col-4">
 
-                        <img class="img-fluid" src="./img/Button_玻璃用途.png" alt="">
 
+                        <a style="text-decoration: none;" href="./application.html">
 
+                            <img class="img-fluid" src="./img/Button_玻璃用途.png" alt="">
 
+                        </a>
 
 
                     </div>
 
                     <div class="col-4">
 
-                        <img class="img-fluid" src="./img/Button_玻璃藝術.png" alt="">
 
+                        <a style="text-decoration: none;" href="./glass-art.html">
 
+                            <img class="img-fluid" src="./img/Button_玻璃藝術.png" alt="">
 
+                        </a>
 
                     </div>
 
 
                 </div>

+ 74 - 13
process1.html
Tampilan Berkas 

@@ -16,36 +16,65 @@
 
 </head>
 
 
 <body>
 
-    <section class="sec01">
 
+    <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>
 
+                        <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%;" class="propertytitle text-dark fw-bold">回收玻璃流程</p>
 
+                        <p style="font-size: 48px;position: relative; left:15%; width: 50%;"
 
+                            class="propertytitle text-dark fw-bold">回收玻璃流程</p>
 
                     </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="text-center py-3 border d-flex align-items-center justify-content-center">
 
-                            <div>
 
+                        <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="text-center py-3 border">
 
+                            <div class="bg-item3 bg-active px-3">
 
                                 <h1 class="text-center">1.回收的玻璃山</h1>
 
-                                <p  class="text-dark px-0 mb-5">點擊螢幕一起互動吧</p>
 
-                                <p class="text-start"> 35噸賓士大卡車正滿載碎玻璃，一批一批到入廠區，形成滿滿的玻璃山，而每個月卻會有200～300個貨櫃的廢玻璃出口到海外，這些不是垃圾，而是可以再利用的重要原料。</p>
 
+                                <p class="text-dark px-0 mb-5">點擊螢幕一起互動吧</p>
 
+                                <p class="text-start">
 
+                                    35噸賓士大卡車正滿載碎玻璃，一批一批到入廠區，形成滿滿的玻璃山，而每個月卻會有200～300個貨櫃的廢玻璃出口到海外，這些不是垃圾，而是可以再利用的重要原料。</p>
 
+                            </div>
 
+                            <div class="bg-item3 px-3">
 
+                                <h1 class="text-center">2.回收廢棄玻璃</h1>
 
+                                <p class="text-dark px-0 mb-5">點擊螢幕一起互動吧</p>
 
+                                <p class="text-start">利用廢棄玻璃製成亮彩琉璃、綠建材，實用又兼具環保。</p>
 
+                            </div>
 
+                            <div class="bg-item3 px-3">
 
+                                <h1 class="text-center">3.人工初步分類</h1>
 
+                                <p class="text-dark px-0 mb-5">點擊螢幕一起互動吧</p>
 
+                                <p class="text-start">人工檢查 、分色、去除非金屬雜物。</p>
 
+                            </div>
 
+                            <div class="bg-item3 px-3">
 
+                                <h1 class="text-center">4.去除雜質磁選</h1>
 
+                                <p class="text-dark px-0 mb-5">點擊螢幕一起互動吧</p>
 
+                                <p class="text-start">以磁選機去除含鐵雜質，洗滌。
 
+                                </p>
 
+                            </div>
 
+                            <div class="bg-item3 px-3">
 
+                                <h1 class="text-center">5.二次破碎、玻璃碎屑</h1>
 
+                                <p class="text-dark px-0 mb-5">點擊螢幕一起互動吧</p>
 
+                                <p class="text-start">再經機械磨碎至玻璃窯爐熔燒。</p>
 
+                            </div>
 
+                            <div class="bg-item3 px-3">
 
+                                <h1 class="text-center">6.二次破碎、玻璃碎屑</h1>
 
+                                <p class="text-dark px-0 mb-5">點擊螢幕一起互動吧</p>
 
+                                <p class="text-start">
 
+                                    把具有傷害性的破碎玻璃鋒利面，全數熔合成無傷害性、高強度的圓面粒子，顆粒粒徑由零點六厘米至十二厘米。玻璃破屑溶燒後，重新利用、創造新品，循環再生。</p>
 
                             </div>
 
                         </div>
 
-                        
                     </div>
 
-           
+
 
                 </div>
 
             </div>
 
             <h1 class="text-center">動畫影片</h1>
 
-        
+
 
         </div>
 
-        
+
 
 
     </section>
 
 
@@ -59,6 +88,38 @@
 
         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>
 
+    <script src="./goto.js"></script>
 
+
 
+
 
+    <script>
 
+        var next3 = document.getElementById('sec01');
 
+        var items3 = document.getElementsByClassName('bg-item3');
 
+        var index = 0;
 
+
 
+        function btnNext2() {
 
+            index++;
 
+
 
+            if (index > 5) index = 0;
 
+            console.log(index);
 
+
 
+            ShowItems3();
 
+        };
 
+
 
+        next3.onclick = btnNext2;
 
+
 
+        console.log(items3)
 
+
 
+        function ShowItems3() {
 
+            // 迴圈執行，將每張項目的類別bg-active移除
 
+            for (var i = 0; i < items3.length; i++) {
 
+                items3[i].classList.remove("bg-active");
 
+            }
 
+            // 將要顯示的項目添加bg-active類別
 
+            items3[index].classList.add("bg-active");
 
+            // $('.bg-item').fadeIn();
 
+
 
+        };
 
+    </script>
 
 </body>
 
 
 </html>

+ 0 - 64
process2.html
Tampilan Berkas 

@@ -1,64 +0,0 @@
 
-<!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>process</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 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>
 
-                    <div class="col-10">
 
-                        <p style="font-size: 48px;position: relative; left:15%; width: 50%;" class="propertytitle text-dark fw-bold">回收玻璃流程</p>
 
-                    </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="text-center py-3 border d-flex align-items-center justify-content-center">
 
-                            <div>
 
-                                <h1 class="text-center">2.回收廢棄玻璃</h1>
 
-                                <p  class="text-dark px-0 mb-5">點擊螢幕一起互動吧</p>
 
-                                <p class="text-start">利用廢棄玻璃製成亮彩琉璃、綠建材，實用又兼具環保。</p>
 
-                            </div>
 
-                        </div>
 
-                        
-                    </div>
 
-           
-                </div>
 
-            </div>
 
-            <h1 class="text-center">動畫影片</h1>
 
-        
-        </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>

+ 0 - 64
process4.html
Tampilan Berkas 

@@ -1,64 +0,0 @@
 
-<!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>process</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 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>
 
-                    <div class="col-10">
 
-                        <p style="font-size: 48px;position: relative; left:15%; width: 50%;" class="propertytitle text-dark fw-bold">回收玻璃流程</p>
 
-                    </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="text-center py-3 border d-flex align-items-center justify-content-center">
 
-                            <div>
 
-                                <h1 class="text-center">5.二次破碎、玻璃碎屑</h1>
 
-                                <p  class="text-dark px-0 mb-5">點擊螢幕一起互動吧</p>
 
-                                <p class="text-start">再經機械磨碎至玻璃窯爐熔燒。</p>
 
-                            </div>
 
-                        </div>
 
-                        
-                    </div>
 
-           
-                </div>
 
-            </div>
 
-            <h1 class="text-center">動畫影片</h1>
 
-        
-        </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>

+ 0 - 64
process5.html
Tampilan Berkas 

@@ -1,64 +0,0 @@
 
-<!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>process</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 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>
 
-                    <div class="col-10">
 
-                        <p style="font-size: 48px;position: relative; left:15%; width: 50%;" class="propertytitle text-dark fw-bold">回收玻璃流程</p>
 
-                    </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="text-center py-3 border d-flex align-items-center justify-content-center">
 
-                            <div>
 
-                                <h1 class="text-center">6.二次破碎、玻璃碎屑</h1>
 
-                                <p  class="text-dark px-0 mb-5">點擊螢幕一起互動吧</p>
 
-                                <p class="text-start">把具有傷害性的破碎玻璃鋒利面，全數熔合成無傷害性、高強度的圓面粒子，顆粒粒徑由零點六厘米至十二厘米。玻璃破屑溶燒後，重新利用、創造新品，循環再生。</p>
 
-                            </div>
 
-                        </div>
 
-                        
-                    </div>
 
-           
-                </div>
 
-            </div>
 
-            <h1 class="text-center">動畫影片</h1>
 
-        
-        </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>

+ 13 - 0
style.css
Tampilan Berkas 

@@ -116,6 +116,19 @@ ul > li:nth-child(1) {
 
   display: none;
 
 }
 
 
+.bg-item3 {
 
+  display: none;
 
+}
 
+
 
+.bg-item3 img {
 
+  -webkit-animation-name: BgFadein;
 
+          animation-name: BgFadein;
 
+  -webkit-animation-duration: 3s;
 
+          animation-duration: 3s;
 
+  -webkit-animation-timing-function: ease-out;
 
+          animation-timing-function: ease-out;
 
+}
 
+
 
 .bg-item2 {
 
   display: none;
 
 }

+ 1 - 1
style.css.map
Tampilan Berkas 

@@ -1,6 +1,6 @@
 
 {
 
     "version": 3,
 
-    "mappings": ";AAAA,AAAA,CAAC,CAAC;EACE,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;EACV,UAAU,EAAE,UAAU;EACtB,WAAW,EAAE,UAAU;CAC1B;;AAGD,AAAA,cAAc,CAAA;EACZ,mBAAmB,EAAC,UAAU;EAC9B,gBAAgB,EAAC,UAAU;CAC5B;;AAED,AAAA,CAAC,CAAA;EACC,SAAS,EAAE,IAAI;CAChB;;AAED,AAAA,SAAS,CAAA;EACP,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,eAAe;CACvB;;AACD,AAAA,EAAE,CAAA;EACA,eAAe,EAAE,IAAI;EACrB,KAAK,EAAE,eAAe;CAEvB;;AACD,AAAA,EAAE,GAAC,EAAE,CAAA;EACH,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,eAAe;CACvB;;AAED,AAAA,EAAE,GAAC,EAAE,AAAA,UAAW,CAAA,CAAC,EAAC;EAChB,SAAS,EAAE,gBAAgB;CAC5B;;AACD,AAAA,EAAE,GAAC,EAAE,AAAA,UAAW,CAAA,CAAC,EAAC;EAChB,SAAS,EAAE,gBAAgB;CAC5B;;AACD,AAAA,EAAE,GAAC,EAAE,AAAA,UAAW,CAAA,CAAC,EAAC;EAChB,SAAS,EAAE,gBAAgB;CAC5B;;AAID,UAAU,CAAV,GAAU;EACR,EAAE;IACA,OAAO,EAAE,CAAC;;EAEZ,GAAG;IACD,OAAO,EAAE,CAAC;;EAGZ,GAAG;IACD,OAAO,EAAE,CAAC;;;;AAGd,UAAU,CAAV,GAAU;EACR,GAAG;IACD,OAAO,EAAE,CAAC;;EAEZ,GAAG;IACD,OAAO,EAAE,CAAC;;EAEZ,GAAG;IACD,OAAO,EAAE,CAAC;;;;AAGd,UAAU,CAAV,GAAU;EACR,GAAG;IACD,OAAO,EAAE,CAAC;;EAEZ,GAAG;IACD,OAAO,EAAE,CAAC;;;;AAId,AAAA,QAAQ,CAAA;EACN,OAAO,EAAE,IAAI;CAcd;;AAED,AAAA,SAAS,CAAA;EACP,OAAO,EAAE,IAAI;CASd;;AAVD,AAEE,SAFO,CAEP,GAAG,CAAA;EACD,cAAc,EAAC,QAAQ;EACvB,kBAAkB,EAAE,EAAE;EACtB,yBAAyB,EAAC,QAAQ;CAEnC;;AAKH,AAAA,UAAU,CAAA;EACR,OAAO,EAAE,KAAK;CACf;;AAED,UAAU,CAAV,QAAU;EACR,EAAE;IACA,OAAO,EAAE,GAAG;;EAEd,GAAG;IAAE,OAAO,EAAE,GAAG;;EAEjB,IAAI;IACF,OAAO,EAAE,CAAC",
 
+    "mappings": ";AAAA,AAAA,CAAC,CAAC;EACE,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;EACV,UAAU,EAAE,UAAU;EACtB,WAAW,EAAE,UAAU;CAC1B;;AAGD,AAAA,cAAc,CAAA;EACZ,mBAAmB,EAAC,UAAU;EAC9B,gBAAgB,EAAC,UAAU;CAC5B;;AAED,AAAA,CAAC,CAAA;EACC,SAAS,EAAE,IAAI;CAChB;;AAED,AAAA,SAAS,CAAA;EACP,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,eAAe;CACvB;;AACD,AAAA,EAAE,CAAA;EACA,eAAe,EAAE,IAAI;EACrB,KAAK,EAAE,eAAe;CAEvB;;AACD,AAAA,EAAE,GAAC,EAAE,CAAA;EACH,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,eAAe;CACvB;;AAED,AAAA,EAAE,GAAC,EAAE,AAAA,UAAW,CAAA,CAAC,EAAC;EAChB,SAAS,EAAE,gBAAgB;CAC5B;;AACD,AAAA,EAAE,GAAC,EAAE,AAAA,UAAW,CAAA,CAAC,EAAC;EAChB,SAAS,EAAE,gBAAgB;CAC5B;;AACD,AAAA,EAAE,GAAC,EAAE,AAAA,UAAW,CAAA,CAAC,EAAC;EAChB,SAAS,EAAE,gBAAgB;CAC5B;;AAID,UAAU,CAAV,GAAU;EACR,EAAE;IACA,OAAO,EAAE,CAAC;;EAEZ,GAAG;IACD,OAAO,EAAE,CAAC;;EAGZ,GAAG;IACD,OAAO,EAAE,CAAC;;;;AAGd,UAAU,CAAV,GAAU;EACR,GAAG;IACD,OAAO,EAAE,CAAC;;EAEZ,GAAG;IACD,OAAO,EAAE,CAAC;;EAEZ,GAAG;IACD,OAAO,EAAE,CAAC;;;;AAGd,UAAU,CAAV,GAAU;EACR,GAAG;IACD,OAAO,EAAE,CAAC;;EAEZ,GAAG;IACD,OAAO,EAAE,CAAC;;;;AAId,AAAA,QAAQ,CAAA;EACN,OAAO,EAAE,IAAI;CAcd;;AAED,AAAA,SAAS,CAAA;EACP,OAAO,EAAE,IAAI;CASd;;AAVD,AAEE,SAFO,CAEP,GAAG,CAAA;EACD,cAAc,EAAC,QAAQ;EACvB,kBAAkB,EAAE,EAAE;EACtB,yBAAyB,EAAC,QAAQ;CAEnC;;AAKH,AAAA,SAAS,CAAA;EACP,OAAO,EAAE,IAAI;CASd;;AAVD,AAEE,SAFO,CAEP,GAAG,CAAA;EACD,cAAc,EAAC,QAAQ;EACvB,kBAAkB,EAAE,EAAE;EACtB,yBAAyB,EAAC,QAAQ;CAEnC;;AAKH,AAAA,UAAU,CAAA;EACR,OAAO,EAAE,KAAK;CACf;;AAED,UAAU,CAAV,QAAU;EACR,EAAE;IACA,OAAO,EAAE,GAAG;;EAEd,GAAG;IAAE,OAAO,EAAE,GAAG;;EAEjB,IAAI;IACF,OAAO,EAAE,CAAC",
 
     "sources": [
 
         "style.scss"
 
     ],

+ 12 - 0
style.scss
Tampilan Berkas 

@@ -88,6 +88,18 @@ ul>li:nth-child(1){
 
   // }
 
 
 
+}
 
+
 
+.bg-item3{
 
+  display: none;
 
+  img{
 
+    animation-name:BgFadein;
 
+    animation-duration: 3s;
 
+    animation-timing-function:ease-out;
 
+    
+  }
 
+
 
+
 
 }
 
 
 .bg-item2{