video.html 9.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>glass-property</title>
  8. <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"
  9. integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
  10. <!-- <link rel="stylesheet" href="./style.css"> -->
  11. </head>
  12. <body>
  13. <section class="sec01">
  14. <div class="card text-white border-0 pb-5">
  15. <img src="./img/T1.png" class="card-img img-fluid" alt="...">
  16. <div class="card-img-overlay px-0">
  17. <div class="row px-0 mx-0">
  18. <div class="col-2">
  19. <a style="text-decoration: none;" href="./index.html"> <img style="width: 80px;" src="./img/Button_Home.png" alt=""></a>
  20. </div>
  21. <div class="col-10">
  22. <p style="font-size: 48px;position: relative; left:25%" class="propertytitle text-dark fw-bold">影片導覽</p>
  23. </div>
  24. <div style="margin-top: -20px;" class="pb-5">
  25. <img style="position: relative; z-index: 2; top:15px;" class="img-fluid px-0 w-100"
  26. src="./img/line.png" alt="">
  27. <div style="background: #FFFFFF; font-size: 24px;"
  28. class="py-3 border d-flex align-items-center ps-4">
  29. <p class="text-dark px-0 mb-0">春池玻璃 |接班硬世代 三人紀實頻道</p>
  30. </div>
  31. </div>
  32. </div>
  33. <div class="tab-content px-0" id="myTabContent">
  34. <div class="tab-pane fade show active text-dark" id="home" role="tabpanel"
  35. aria-labelledby="home-tab">
  36. <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>
  37. </div>
  38. <div class="tab-pane fade text-dark" id="profile" role="tabpanel" aria-labelledby="profile-tab">
  39. <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>
  40. </div>
  41. <div class="tab-pane fade text-dark" id="contact" role="tabpanel" aria-labelledby="contact-tab">
  42. <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>
  43. </div>
  44. <div class="tab-pane fade text-dark" id="contact1" role="tabpanel" aria-labelledby="contact-tab">
  45. <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>
  46. </div>
  47. <div class="tab-pane fade text-dark" id="contact2" role="tabpanel" aria-labelledby="contact-tab">
  48. <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>
  49. </div>
  50. <div class="tab-pane fade text-dark" id="contact3" role="tabpanel" aria-labelledby="contact-tab">
  51. <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>
  52. </div>
  53. </div>
  54. <div class="d-flex justify-content-center text-center mt-3">
  55. <div style="width: 85%; margin:0 auto">
  56. <ul class="nav nav-pills" id="myTab" role="tablist">
  57. <li class="nav-item" role="presentation">
  58. <div class="nav-link active border-0 bg-transparent text-dark px-0" id="home-tab"
  59. data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab"
  60. aria-controls="home" aria-selected="true"><img src="./img/1633409116610.jpg" alt="">
  61. </div>
  62. </li>
  63. <li class="nav-item" role="presentation">
  64. <div class="nav-link border-0 bg-transparent text-dark px-0" id="profile-tab"
  65. data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab"
  66. aria-controls="profile" aria-selected="false"><img width="216"
  67. src="./img/1633409172788.jpg" alt=""></div>
  68. </li>
  69. <li class="nav-item" role="presentation">
  70. <div class="nav-link border-0 bg-transparent text-dark px-0" id="contact-tab"
  71. data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab"
  72. aria-controls="contact" aria-selected="false"><img width="216"
  73. src="./img/1633409158555.jpg" alt=""></div>
  74. </li>
  75. <li class="nav-item" role="presentation">
  76. <div class="nav-link border-0 bg-transparent text-dark px-0" id="contact-tab"
  77. data-bs-toggle="tab" data-bs-target="#contact1" type="button" role="tab"
  78. aria-controls="contact" aria-selected="false"><img width="216"
  79. src="./img/1633409158555.jpg" alt=""></div>
  80. </li>
  81. <li class="nav-item" role="presentation">
  82. <div class="nav-link border-0 bg-transparent text-dark px-0" id="contact-tab"
  83. data-bs-toggle="tab" data-bs-target="#contact2" type="button" role="tab"
  84. aria-controls="contact" aria-selected="false"><img width="216"
  85. src="./img/1633409116610.jpg" alt=""></div>
  86. </li>
  87. <li class="nav-item" role="presentation">
  88. <div class="nav-link border-0 bg-transparent text-dark px-0" id="profile-tab"
  89. data-bs-toggle="tab" data-bs-target="#contact3" type="button" role="tab"
  90. aria-controls="profile" aria-selected="false"><img width="216"
  91. src="./img/1633409172788.jpg" alt=""></div>
  92. </li>
  93. </ul>
  94. </div>
  95. </div>
  96. </div>
  97. </div>
  98. </section>
  99. <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"
  100. integrity="sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN"
  101. crossorigin="anonymous"></script>
  102. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js"
  103. integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/"
  104. crossorigin="anonymous"></script>
  105. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  106. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  107. </body>
  108. </html>