index.html 3.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  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>3D區域狀態</title>
  8. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css">
  9. <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
  10. <link rel="stylesheet" href="css/index.css">
  11. </head>
  12. <body>
  13. <nav>
  14. <div class="floor_icon">
  15. <img src="../images/icon_B_1F.png " alt="1F">
  16. <img src="../images/icon_B_B1.png " alt="B1">
  17. <img src="../images/solid_line.png " alt="solid_line" style="margin-left: 12%;">
  18. <img src="../images/icon_B_3D.png " alt="3D">
  19. </div>
  20. </nav>
  21. <div id="bg col-12">
  22. <img src="../images/bg_04.png" alt="bg">
  23. <div id="first_floor">
  24. <div class="col-7">
  25. <img src="../images/area_1F.png" alt="area_1F" width="39%">
  26. </div>
  27. <div class="sign1 col-auto">
  28. <img src="../images/sign_A.png" alt="" width="36px" style="z-index: 1;">
  29. <img class="hidden_a" src="../images/sign_a_text.png" alt="" width="14%" style="margin-left: 1%; z-index: 0;">
  30. </div>
  31. <div class="sign2 col-auto">
  32. <img src="../images/sign_B.png" alt="" width="36px" style="z-index: 1;">
  33. <img class="hidden_b" src="../images/sign_b_text.png" alt="" width="14%" style="margin-left: 1%; z-index: 0;">
  34. </div>
  35. <div class="sign3 col-auto">
  36. <img src="../images/sign_C.png" alt="" width="36px" style="z-index: 1;">
  37. <img class="hidden_c" src="../images/sign_c_text.png" alt="" width="14%" style="margin-left: 1%; z-index: 0;">
  38. </div>
  39. </div>
  40. <div id="basement_floor">
  41. <div class="col-5">
  42. <img src="../images/area_B1.png" alt="area_B1" width="41%">
  43. </div>
  44. <div class="sign4 col-auto">
  45. <img src="../images/sign_D.png" alt="" width="36px" style="z-index: 1;">
  46. <img src="../images/sign_d_text.png" alt="" width="14%" style="margin-left: 1%; z-index: 0;">
  47. </div>
  48. <div class="sign5 col-auto">
  49. <img src="../images/sign_E.png" alt="" width="36px" style="z-index: 1;">
  50. <img class="hidden_e" src="../images/sign_e_text.png" alt="" width="14%" style="margin-left: 1%; z-index: 0;">
  51. </div>
  52. <div class="sign6 col-auto">
  53. <img src="../images/sign_F.png" alt="" width="36px" style="z-index: 1;">
  54. <img class="hidden_f" src="../images/sign_f_text.png" alt="" width="14%" style="margin-left: 1%; z-index: 0;">
  55. </div>
  56. </div>
  57. </div>
  58. <footer class="col-12">
  59. <div class="footer_buttons col-12">
  60. <a class="col-auto" href="#">服務據點</a>
  61. <a class="col-auto" href="#">聯絡我們</a>
  62. <a class="col-auto" href="#">GLOBAL LINK</a>
  63. </div>
  64. </footer>
  65. </body>
  66. </html>