designer content change

.vscode/settings.json

@@ -1,3 +1,3 @@
 {
-    "liveServer.settings.port": 5502
+    "liveServer.settings.port": 5503
 }

designer1.html

@@ -87,16 +87,18 @@
 
                         <div class="deigner-slick">
                             <div style="position: relative;">
-                                <img class="playbutton play-pc"  data-info="XlPxHa9BcKY" data-bs-toggle="modal"
+                                <img class="playbutton play-pc" data-info="OytiQ68j7s4" data-bs-toggle="modal"
                                     data-bs-target="#yt-video" src="./img/designer1/play.png" alt="" width="80">
-                                <img class="img-fluid" src="./img/yt-video/designer1/XlPxHa9BcKY-HD.jpeg" alt="">
+                                <img class="img-fluid"
+                                    src="https://i.ytimg.com/vi/vxs8lJ2OOic/hq720.jpg?sqp=-oaymwEcCNAFEJQDSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLBEljG1lIdRsDYdWlMA5avdMYXYSw"
+                                    alt="">
                             </div>
                         </div>
 
                         <div class="deigner-slick">
                             <div style="position: relative;">
                                 <div class="text-center">
-                                    <img class="playbutton play-pc"  data-info="xc6SNElGDIM" data-bs-target="#yt-video"
+                                    <img class="playbutton play-pc" data-info="xc6SNElGDIM" data-bs-target="#yt-video"
                                         data-bs-toggle="modal" src="./img/designer1/play.png" alt="" width="80">
                                 </div>
                                 <img class="img-fluid" src="./img/yt-video/designer1/xc6SNElGDIM-HD.jpeg" alt="">
@@ -105,27 +107,29 @@
 
                         <div class="deigner-slick">
                             <div class="position: relative;">
-                                <img class="playbutton play-pc"  data-info="QIsBlu6D99s" data-bs-target="#yt-video"
+                                <img class="playbutton play-pc" data-info="QIsBlu6D99s" data-bs-target="#yt-video"
                                     data-bs-toggle="modal" src="./img/designer1/play.png" alt="" width="80">
                                 <img class="img-fluid" src="./img/yt-video/designer1/QIsBlu6D99s-HD.jpeg" alt="">
                             </div>
                         </div>
                     </div>
 
-                    <div class="designer-bannerslider-mb play-mb">
+                    <div class="designer-bannerslider-mb play-mb_box">
                         <div class="deigner-slick">
                             <div style="position: relative;">
-                                <img class="playbutton-mb play-mb" data-slide="0" data-info="XlPxHa9BcKY" data-bs-toggle="modal"
-                                    data-bs-target="#yt-video-mb1" src="./img/designer1/play.png" alt="" width="80">
-                                <img class="img-fluid" src="./img/yt-video/designer1/XlPxHa9BcKY-HD.jpeg" alt="">
+                                <img class="playbutton-mb play-mb" data-slide="0" data-info="OytiQ68j7s4"
+                                    data-bs-toggle="modal" data-bs-target="#yt-video-mb1" src="./img/designer1/play.png"
+                                    alt="" width="80">
+                                <img class="img-fluid" src="https://i.ytimg.com/vi/vxs8lJ2OOic/hq720.jpg?sqp=-oaymwEcCNAFEJQDSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLBEljG1lIdRsDYdWlMA5avdMYXYSw" alt="">
                             </div>
                         </div>
 
                         <div class="deigner-slick">
                             <div style="position: relative;">
                                 <div class="text-center">
-                                    <img class="playbutton-mb play-mb" data-slide="1" data-info="xc6SNElGDIM" data-bs-target="#yt-video-mb2"
-                                        data-bs-toggle="modal" src="./img/designer1/play.png" alt="" width="80">
+                                    <img class="playbutton-mb play-mb" data-slide="1" data-info="xc6SNElGDIM"
+                                        data-bs-target="#yt-video-mb2" data-bs-toggle="modal"
+                                        src="./img/designer1/play.png" alt="" width="80">
                                 </div>
                                 <img class="img-fluid" src="./img/yt-video/designer1/xc6SNElGDIM-HD.jpeg" alt="">
                             </div>
@@ -133,8 +137,9 @@
 
                         <div class="deigner-slick">
                             <div class="position: relative;">
-                                <img class="playbutton-mb play-mb" data-slide="2" data-info="QIsBlu6D99s" data-bs-target="#yt-video-mb3"
-                                    data-bs-toggle="modal" src="./img/designer1/play.png" alt="" width="80">
+                                <img class="playbutton-mb play-mb" data-slide="2" data-info="QIsBlu6D99s"
+                                    data-bs-target="#yt-video-mb3" data-bs-toggle="modal" src="./img/designer1/play.png"
+                                    alt="" width="80">
                                 <img class="img-fluid" src="./img/yt-video/designer1/QIsBlu6D99s-HD.jpeg" alt="">
                             </div>
                         </div>
@@ -206,7 +211,7 @@
                         <div style="cursor: pointer;" class="col-md-3 col-lg-3 pe-2" data-bs-toggle="modal"
                             data-bs-target="#exampleModal3">
                             <div
-                                style="height:450px; background: url(./img/designer1/Portfolio/13560/designer337_63_01.jpg); background-repeat: no-repeat; background-size:cover;">
+                                style="height:450px; background: url(https://images.hhh.com.tw/uploads/_hcase/designer337_66_01.jpg); background-repeat: no-repeat; background-size:cover;">
 
                             </div>
                         </div>
@@ -230,7 +235,8 @@
                         <img class="img-fluid" src="./img/designer1/Portfolio/11185/designer337_38_01.jpg" alt="">
                     </div>
                     <div class="col-12 my-3" data-bs-toggle="modal" data-bs-target="#exampleModal3">
-                        <img class="img-fluid" src="./img/designer1/Portfolio/11919/designer337_45_01.jpg" alt="">
+                        <img class="img-fluid" src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_08.jpg"
+                            alt="">
                     </div>
                     <div class="col-12 my-3" data-bs-toggle="modal" data-bs-target="#exampleModal4">
                         <img class="img-fluid" src="./img/designer1/Portfolio/13560/designer337_63_01.jpg" alt="">
@@ -241,6 +247,9 @@
                 </a>
                 <hr style="width: 130px; margin:0 auto; opacity: 1; background:#707070;">
             </div>
+            <div class="exampleModal3">
+
+            </div>
         </div>
         <!-- 影片彈跳視窗01 -->
         <div style="background:rgba(0,0,0,0.5)" class="modal fade" id="exampleModal" tabindex="-1"
@@ -388,8 +397,427 @@
             <div class="Portfolio-img modal-dialog modal-lg">
                 <div class="modal-content">
                     <div id="carouselExampleControls3" class="carousel slide" data-bs-ride="carousel">
-                        <div class="carousel-inner">
+                        <div class="carousel-inner exampleModal3">
                             <div class="carousel-item active">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_01.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_02.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_03.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_04.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_05.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_06.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_07.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_08.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_09.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_10.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_11.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_12.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_13.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_14.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_15.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_16.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_17.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_18.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_19.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_20.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_21.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_22.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_23.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_24.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_25.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_26.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_27.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_28.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_29.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_30.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_31.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_32.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_33.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_34.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_35.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_36.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_37.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_38.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_39.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_40.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_41.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_42.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_01.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_02.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_03.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_04.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_05.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_06.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_07.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_08.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_09.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_10.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_11.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_12.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_13.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_14.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_15.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_16.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_17.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_18.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_19.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_20.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_21.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_22.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_23.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_24.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_25.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_26.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_27.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_28.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_29.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_30.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_31.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_32.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_33.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_34.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_35.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_36.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_37.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_38.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_39.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_40.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_41.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+
+                            <div class="carousel-item">
+                                <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_42.jpg"
+                                    class="d-block w-100" alt="...">
+                            </div>
+                            <!-- <div class="carousel-item active">
                                 <img src="./img/designer1/Portfolio/13560/designer337_63_01.jpg" class="d-block w-100"
                                     alt="...">
                             </div>
@@ -444,7 +872,7 @@
                             <div class="carousel-item ">
                                 <img src="./img/designer1/Portfolio/13560/designer337_63_02.jpg" class="d-block w-100"
                                     alt="...">
-                            </div>
+                            </div> -->
 
                         </div>
                         <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls3"
@@ -544,7 +972,7 @@
 
 
     <footer id="footer" class="container-fluid px-0 mx-0 mt-5">
-        
+
         <p class="mb-0">幸福空間 版權所有 &copy;Gorgeous Space Go.Ltd. All Rights Reserved.</p>
     </footer>
 
@@ -588,15 +1016,15 @@
             <div id="video-modal" class="modal-body modal-box-mb">
                 <div class="designer-bannerslider2">
                     <div class="deigner-slick">
-                        <!-- <img class="img-fluid" src="./img/designer3/Portfolio/12947/designer735_01_01.jpg" alt=""> -->
-                        <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 class='youtube-video2' src='https://www.youtube.com/embed//XlPxHa9BcKY?enablejsapi=1' frameborder='0' allowfullscreen height="394" allow="autoplay;"></iframe></div>
+  
+                        <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 class='youtube-video2' src='https://www.youtube.com/embed//OytiQ68j7s4?enablejsapi=1' frameborder='0' allowfullscreen height="394" allow="autoplay;"></iframe></div>
                     </div>
                     <div class="deigner-slick">
-                        <!-- <img class="img-fluid" src="./img/designer3/Portfolio/12947/designer735_01_01.jpg" alt=""> -->
+                
                         <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 class='youtube-video2' src='https://www.youtube.com/embed//xc6SNElGDIM?enablejsapi=1' frameborder='0' allowfullscreen height="394" allow="autoplay;"></iframe></div>
                     </div>
                     <div class="deigner-slick">
-                        <!-- <img class="img-fluid" src="./img/designer3/Portfolio/12947/designer735_01_01.jpg" alt=""> -->
+
                         <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 class='youtube-video2' src='https://www.youtube.com/embed//QIsBlu6D99s?enablejsapi=1' frameborder='0' allowfullscreen height="394" allow="autoplay;"></iframe></div>
                     </div>
                     </div>
@@ -612,16 +1040,16 @@
             <div id="video-modal" class="modal-body modal-box-mb">
                 <div class="designer-bannerslider2">
                     <div class="deigner-slick">
-                        <!-- <img class="img-fluid" src="./img/designer3/Portfolio/12947/designer735_01_01.jpg" alt=""> -->
+              
                         <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 class='youtube-video2' src='https://www.youtube.com/embed//xc6SNElGDIM?enablejsapi=1' frameborder='0' allowfullscreen height="394" allow="autoplay;"></iframe></div>
                     </div>
                     <div class="deigner-slick">
-                        <!-- <img class="img-fluid" src="./img/designer3/Portfolio/12947/designer735_01_01.jpg" alt=""> -->
+                    
                         <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 class='youtube-video2' src='https://www.youtube.com/embed//QIsBlu6D99s?enablejsapi=1' frameborder='0' allowfullscreen height="394" allow="autoplay;"></iframe></div>
                     </div>
                     <div class="deigner-slick">
-                        <!-- <img class="img-fluid" src="./img/designer3/Portfolio/12947/designer735_01_01.jpg" alt=""> -->
-                        <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 class='youtube-video2' src='https://www.youtube.com/embed//XlPxHa9BcKY?enablejsapi=1' frameborder='0' allowfullscreen height="394" allow="autoplay;"></iframe></div>
+        
+                        <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 class='youtube-video2' src='https://www.youtube.com/embed//OytiQ68j7s4?enablejsapi=1' frameborder='0' allowfullscreen height="394" allow="autoplay;"></iframe></div>
                     </div>
                     </div>
                 </div>
@@ -636,15 +1064,15 @@
             <div id="video-modal" class="modal-body modal-box-mb">
                 <div class="designer-bannerslider2">
                     <div class="deigner-slick">
-                        <!-- <img class="img-fluid" src="./img/designer3/Portfolio/12947/designer735_01_01.jpg" alt=""> -->
+
                         <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 class='youtube-video2' src='https://www.youtube.com/embed//QIsBlu6D99s?enablejsapi=1' frameborder='0' allowfullscreen></iframe></div>
                     </div>
                     <div class="deigner-slick">
-                        <!-- <img class="img-fluid" src="./img/designer3/Portfolio/12947/designer735_01_01.jpg" alt=""> -->
-                        <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 class='youtube-video2' src='https://www.youtube.com/embed//XlPxHa9BcKY?enablejsapi=1' frameborder='0' allowfullscreen></iframe></div>
+             
+                        <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 class='youtube-video2' src='https://www.youtube.com/embed//OytiQ68j7s4?enablejsapi=1' frameborder='0' allowfullscreen></iframe></div>
                     </div>
                     <div class="deigner-slick">
-                        <!-- <img class="img-fluid" src="./img/designer3/Portfolio/12947/designer735_01_01.jpg" alt=""> -->
+        
                         <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 class='youtube-video2' src='https://www.youtube.com/embed//xc6SNElGDIM?enablejsapi=1' frameborder='0' allowfullscreen></iframe></div>
                     </div>
                     </div>
@@ -664,7 +1092,7 @@
     <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
 
     <script src="./goto.js"></script>
-    
+
 </body>
 
 </html>

designer2.html

@@ -113,7 +113,7 @@
 
                     </div>
 
-                    <div class="designer-bannerslider-mb play-mb">
+                    <div class="designer-bannerslider-mb play-mb play-mb_box">
                         <div class="deigner-slick">
                             <div style="position: relative;">
                                 <img class="playbutton-mb play-mb" data-slide="0" data-info="2YzswkcIeq8" data-bs-toggle="modal"

goto.js

@@ -1,5 +1,7 @@
 
 
+ 
+
 
 
 $('.designer-bannerslider').slick({
@@ -52,25 +54,48 @@ $('#yt-video-mb').on('hidden.bs.modal', function () {
 
 let videoId = ['XlPxHa9BcKY', 'xc6SNElGDIM', 'xc6SNElGDIM'];
 
-var index=0;
+var index = 0;
 
-function getSlideNNext(){
+function getSlideNNext() {
   index++
-  if (index == videoId.length) index = 0; 
+  if (index == videoId.length) index = 0;
   console.log(videoId[index]);
 
-  
+
 };
 
+$(".designer-bannerslider2").on('beforeChange', function (event, slick, currentSlide, nextSlide) {
+  $('.youtube-video2').each(function () {
+    this.contentWindow.postMessage('{"event": "command", "func": "stopVideo", "args": ""}', '*');
+  });
+
+});
+
 $(document).on("click", ".slick-next", function (event) {
-  
+
   getSlideNNext();
-  $('.youtube-video2').each(function() {
+  $('.youtube-video2').each(function () {
     this.contentWindow.postMessage('{"event": "command", "func": "stopVideo", "args": ""}', '*');
   });
 });
 
-function getSlidePrev(){
+$('#yt-video-mb1').on('hidden.bs.modal', function () {
+  $('.youtube-video2').each(function () {
+    this.contentWindow.postMessage('{"event": "command", "func": "stopVideo", "args": ""}', '*');
+  });
+});
+$('#yt-video-mb2').on('hidden.bs.modal', function () {
+  $('.youtube-video2').each(function () {
+    this.contentWindow.postMessage('{"event": "command", "func": "stopVideo", "args": ""}', '*');
+  });
+});
+$('#yt-video-mb3').on('hidden.bs.modal', function () {
+  $('.youtube-video2').each(function () {
+    this.contentWindow.postMessage('{"event": "command", "func": "stopVideo", "args": ""}', '*');
+  });
+});
+
+function getSlidePrev() {
   index--
   if (index == -1) index = videoId.length - 1;
   console.log(videoId[index]);
@@ -78,12 +103,12 @@ function getSlidePrev(){
 };
 
 $(document).on("click", ".slick-prev", function (event) {
-  
+
   getSlidePrev();
-  $('.youtube-video2').each(function() {
+  $('.youtube-video2').each(function () {
     this.contentWindow.postMessage('{"event": "command", "func": "stopVideo", "args": ""}', '*');
   });
-  
+
 });
 
 $('.designer-bannerslider2').slick({
@@ -100,11 +125,11 @@ $(".play-mb").click(function () {
   // $('.modal-box-mb').css('width','100%');
   var videosrc = $(this).data("info");
   var slidenumber = $(this).data("slide");
-  
+
   console.log(slidenumber);
   console.log(videosrc);
 
-  $('.designer-bannerslider2').slick('slickGoTo',0);
+  $('.designer-bannerslider2').slick('slickGoTo', 0);
 });
 
 
@@ -149,3 +174,27 @@ $(".link").click(function () {
 //   $("#carousel-example-generic").carousel(direction);
 // }
 
+
+// function designer_img(){
+//   for(var i=1; i<42; i++){
+//     let designer_slide_img="";
+//     var img_number=i;
+//     if (i<10){
+//       img_number="0"+i
+//     }
+
+
+//     designer_slide_img=`
+//     <div class="carousel-item active">
+//     <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_'${img_number}'.jpg" class="d-block w-100"
+//         alt="...">
+//     </div>
+//     `
+//   }
+
+//   $('.exampleModal3').html(designer_slide_img);
+
+
+// }
+// designer_img();
+

style.css

@@ -302,6 +302,12 @@ body {
   left: -5px;
 }
 
+@media screen and (max-width: 1024px) {
+  .banner .banner-content #lux-banner .banner-border1 {
+    top: 20px;
+  }
+}
+
 .banner .banner-content #lux-banner .lux-01 {
   overflow: hidden;
   border-radius: 150px 150px 0% 0%;
@@ -2428,7 +2434,7 @@ body {
   right: 130px;
   top: 65px;
   position: fixed;
-  z-index: 20;
+  z-index: 999;
   -webkit-box-shadow: 0px 3px 20px #00000029;
           box-shadow: 0px 3px 20px #00000029;
   display: none;
@@ -2768,7 +2774,7 @@ body {
 @media screen and (max-width: 1024px) {
   .playbutton {
     width: 50px;
-    margin-top: 70px;
+    margin-top: 10px;
   }
 }
 
@@ -2822,6 +2828,24 @@ body {
   }
 }
 
+@media screen and (min-width: 1025px) {
+  .play-mb_box {
+    display: none !important;
+  }
+}
+
+@media screen and (max-width: 1024px) {
+  .play-mb_box {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .play-mb_box {
+    display: block !important;
+  }
+}
+
 @media screen and (min-width: 1025px) {
   .play-mb {
     display: none !important;

style.scss

@@ -235,6 +235,9 @@ body {
                 height:32vw;
                 top:30px;
                 left:-5px;
+                @media screen and(max-width:$table) {
+                    top:20px;
+                }
             }
             .lux-01{
                 overflow: hidden;
@@ -1726,7 +1729,7 @@ body {
     right: 130px;
     top: 65px;
     position: fixed;
-    z-index: 20;
+    z-index: 999;
     box-shadow: 0px 3px 20px #00000029;
     display: none;
     @media screen and(max-width:$table) {
@@ -2016,7 +2019,7 @@ right:3px;
 
     @media screen and(max-width:$table) {
         width: 50px;
-        margin-top: 70px;
+        margin-top: 10px;
      }
     @media screen and(max-width:$moblie) {
         margin-top: 20vw;
@@ -2053,12 +2056,28 @@ right:3px;
 }
 
 .play-pc{
+  
     @media screen and(max-width:$moblie) {
         display: none;
     }
 }
 
+.play-mb_box{
+  
+    @media screen and(min-width:$desktop) {
+        display: none !important;
+    }
+    @media screen and(max-width:$table) {
+        display: none;
+    }
+    @media screen and(max-width:$moblie) {
+        display: block !important;
+    }
+}
+
+
 .play-mb{
+  
     @media screen and(min-width:$desktop) {
         display: none !important;
     }