index2.html 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
  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>ip代理服務介紹</title>
  8. <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
  9. integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
  10. <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
  11. <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" />
  12. <link rel="stylesheet" href="./style.css">
  13. <link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon">
  14. </head>
  15. <body>
  16. <section id="sec-works" class="container-fluid pb-5">
  17. <div class="sec-work-title">
  18. <h1>NFTBoard 成功案例</h1>
  19. </div>
  20. <div id="sec-work-container" class="container-fluid px-0 mx-0">
  21. <div id="sec-work-box" class="row"></div>
  22. </div>
  23. </section>
  24. <section id="sec13">
  25. <form class="ip-service" action="">
  26. <img src="./img/LOGO.png" alt="">
  27. <h1 class="my-4">聯繫我們</h1>
  28. <label for="name">您的國家區域</label>
  29. <input type="text" id="loc" placeholder="請留下您的所在區域" required>
  30. <label for="name">姓名</label>
  31. <input type="text" id="name" placeholder="請留下您的姓名" required>
  32. <label for="eamil">聯絡Email</label>
  33. <input type="email" id="email" placeholder="請留下您的Email" required>
  34. <label for="name">聯絡手機</label>
  35. <input type="phone" id="phone" placeholder="請留下您的聯繫方式" required>
  36. <label for="name">合作方式</label>
  37. <label for="checkbox" id="selector1"><input type="checkbox" style="width:15px;height:15px; margin:10px;">異業合作</label>
  38. <label for="checkbox" id="selector1"><input type="checkbox" style="width:15px;height:15px; margin:10px;">廣告刊登</label>
  39. <label for="checkbox" id="selector1"><input type="checkbox" style="width:15px;height:15px; margin:10px;">創作者IP x NFT代理發行(將您的音樂、美術、攝影、3D等作品對接到全球NFT平台)</label>
  40. <label for="checkbox" id="selector1"><input type="checkbox" style="width:15px;height:15px; margin:10px;">創作者IP x NFT知識產權聯動行銷(透過IP授權與營銷聯動,創造版權新收入)</label>
  41. <label class="mt-4" for="name">您的作品網址:(無則免填)</label>
  42. <input type="text" id="work" placeholder="請留下您的作品網址" required>
  43. <input class="btn" style="opacity: 1;" type="submit" value="提交">
  44. </form>
  45. </section>
  46. <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
  47. integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
  48. crossorigin="anonymous"></script>
  49. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"
  50. integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
  51. crossorigin="anonymous"></script>
  52. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  53. <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
  54. <script src="./goto.js"></script>
  55. <script src="./node_modules/jquery-touchswipe/jquery.touchSwipe.min.js"></script>
  56. <script src="./node_modules/jquery-touchswipe/jquery.touchSwipe.js"></script>
  57. <script>
  58. $(document).ready(function () {
  59. console.log(1)
  60. $.ajax({
  61. method: "GET",
  62. url: "work-box.json",
  63. dataType: "json",
  64. })
  65. .done(function (msg) {
  66. var secwork = '';
  67. console.log(msg);
  68. const limit = 7;
  69. for (var i = 0; i < limit; i++) {
  70. secwork += ' \
  71. <div class="work-box col-12 col-lg-4 p-3 h-100 d-inline-block">\
  72. <div class="card">\
  73. <a href="' + msg[i].website + '" " target="_blank"><img class="img-fluid" src="' + msg[i].workimg + '" alt=""></a> \
  74. <div class="card-body">\
  75. <p style="font-weight: 900; font-size: 20px; ">'+ msg[i].worktext1 + '</p> \
  76. <p>'+ msg[i].worktext2 + '</p> \
  77. </div> \
  78. </div> \
  79. </div>';
  80. }
  81. $('#sec-work-box').html(secwork);
  82. $('#sec-work-box').slick({
  83. arrows: false,
  84. slidesToShow: 3,
  85. slidesToScroll: 1,
  86. infinite: true,
  87. dots: true,
  88. responsive: [
  89. {
  90. breakpoint: 600, // RWD在1024寬度時切換顯示數量
  91. settings: {
  92. arrows: false,
  93. slidesToShow: 1, //一次顯示3個
  94. slidesToScroll: 1,//切換下一頁時移動3個
  95. infinite: true,
  96. }
  97. },
  98. ]
  99. });
  100. // var test = msg[0].newstext1;
  101. // $('#jsontest').append(test);
  102. });
  103. });
  104. </script>
  105. </body>
  106. </html>