|
@@ -68,7 +68,7 @@
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<section class="banner">
|
|
<section class="banner">
|
|
- <div class="designer-content">
|
|
|
|
|
|
+ <div class="designer-content" id="designer1">
|
|
<div class="row px-0 mx-0">
|
|
<div class="row px-0 mx-0">
|
|
<div class="designer-img col-md-6 col-lg-6">
|
|
<div class="designer-img col-md-6 col-lg-6">
|
|
<div class="d-flex justify-content-end">
|
|
<div class="d-flex justify-content-end">
|
|
@@ -81,8 +81,65 @@
|
|
<p class="ps-1 fw-bold">Interior Design Masters</p>
|
|
<p class="ps-1 fw-bold">Interior Design Masters</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- <div class="video col-md-6 col-lg-6 text-center" style="background-image: url(./img/designer1/video.png);">
|
|
|
|
- <img class="playbutton" src="./img/designer1/play.png" alt="">
|
|
|
|
|
|
+ <div class="video col-md-6 col-lg-6 text-center">
|
|
|
|
+
|
|
|
|
+ <div class="designer-bannerslider play-pc">
|
|
|
|
+
|
|
|
|
+ <div class="deigner-slick">
|
|
|
|
+ <div style="position: relative;">
|
|
|
|
+ <img class="playbutton play-pc" data-info="XlPxHa9BcKY" 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="">
|
|
|
|
+ </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"
|
|
|
|
+ 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>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <div class="deigner-slick">
|
|
|
|
+ <div class="position: relative;">
|
|
|
|
+ <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">
|
|
|
|
+ <img class="img-fluid" src="./img/yt-video/designer1/xc6SNElGDIM-HD.jpeg" alt="">
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <div class="designer-bannerslider-mb play-mb">
|
|
|
|
+ <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="">
|
|
|
|
+ </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">
|
|
|
|
+ </div>
|
|
|
|
+ <img class="img-fluid" src="./img/yt-video/designer1/xc6SNElGDIM-HD.jpeg" alt="">
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <div class="deigner-slick">
|
|
|
|
+ <div class="position: relative;">
|
|
|
|
+ <img class="playbutton-mb play-mb" data-slide="2" data-info="xc6SNElGDIM" 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/xc6SNElGDIM-HD.jpeg" alt="">
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
<div class="work-text text-start">
|
|
<div class="work-text text-start">
|
|
<p class="fw-bold mb-0">三宅一秀空間創意</p>
|
|
<p class="fw-bold mb-0">三宅一秀空間創意</p>
|
|
<p class="fw-bold">SHOWHOUSE Interior Design</p>
|
|
<p class="fw-bold">SHOWHOUSE Interior Design</p>
|
|
@@ -137,7 +194,6 @@
|
|
data-bs-target="#exampleModal">
|
|
data-bs-target="#exampleModal">
|
|
<div
|
|
<div
|
|
style="height:450px; background: url(./img/designer1/Portfolio/11185/designer337_38_01.jpg); background-repeat: no-repeat; background-size:cover;">
|
|
style="height:450px; background: url(./img/designer1/Portfolio/11185/designer337_38_01.jpg); background-repeat: no-repeat; background-size:cover;">
|
|
-
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="cursor: pointer;" class="col-md-3 col-lg-3 pe-2" data-bs-toggle="modal"
|
|
<div style="cursor: pointer;" class="col-md-3 col-lg-3 pe-2" data-bs-toggle="modal"
|
|
@@ -477,7 +533,8 @@
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="width: 90vw; position: relative; z-index: 100;" class="gotop2 text-end">
|
|
<div style="width: 90vw; position: relative; z-index: 100;" class="gotop2 text-end">
|
|
- <img data-gt-target="#top" data-gt-duration="500" data-gt-offset="0" style="position: absolute; bottom:10px; right:20px;" width="60" src="./img/gotop1.png" alt="">
|
|
|
|
|
|
+ <img data-gt-target="#top" data-gt-duration="500" data-gt-offset="0"
|
|
|
|
+ style="position: absolute; bottom:10px; right:20px;" width="60" src="./img/gotop1.png" alt="">
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
|
|
|
|
@@ -491,6 +548,110 @@
|
|
</footer>
|
|
</footer>
|
|
|
|
|
|
|
|
|
|
|
|
+ <div class="closeplay modal fade" id="yt-video" tabindex="-1" aria-labelledby="exampleModalLabel1"
|
|
|
|
+ aria-hidden="true">
|
|
|
|
+ <div class="modal-dialog modal-lg">
|
|
|
|
+ <div class="modal-content bg-transparent border-0">
|
|
|
|
+
|
|
|
|
+ <div id="video-modal" class="modal-body">
|
|
|
|
+ <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-video' src='https://www.youtube.com/embed//XlPxHa9BcKY' frameborder='0' allowfullscreen
|
|
|
|
+ height="394" allow="autoplay;"></iframe></div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <div class="closeplay modal fade modal-mb" id="yt-video-mb1" tabindex="-1" aria-labelledby="exampleModalLabel1" aria-hidden="true">
|
|
|
|
+ <div class="modal-dialog modal-lg">
|
|
|
|
+ <div class="modal-content bg-transparent border-0">
|
|
|
|
+
|
|
|
|
+ <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></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 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>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <div class="closeplay modal fade modal-mb" id="yt-video-mb2" tabindex="-1" aria-labelledby="exampleModalLabel1" aria-hidden="true">
|
|
|
|
+ <div class="modal-dialog modal-lg">
|
|
|
|
+ <div class="modal-content bg-transparent border-0">
|
|
|
|
+
|
|
|
|
+ <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></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>
|
|
|
|
+ </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>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <div class="closeplay modal fade modal-mb" id="yt-video-mb3" tabindex="-1" aria-labelledby="exampleModalLabel1" aria-hidden="true">
|
|
|
|
+ <div class="modal-dialog modal-lg">
|
|
|
|
+ <div class="modal-content bg-transparent border-0">
|
|
|
|
+
|
|
|
|
+ <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></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>
|
|
|
|
+ </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>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
|
|
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
|
|
integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
|
|
integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
|
|
crossorigin="anonymous"></script>
|
|
crossorigin="anonymous"></script>
|
|
@@ -500,8 +661,9 @@
|
|
<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="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
|
|
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
|
|
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
|
|
|
|
+
|
|
<script src="./goto.js"></script>
|
|
<script src="./goto.js"></script>
|
|
-</body>
|
|
|
|
|
|
+
|
|
</body>
|
|
</body>
|
|
|
|
|
|
</html>
|
|
</html>
|