Startsida Utforska Hjälp
Registrera dig Logga in
choozmo
/
ArkCard-Linebot
2
1
Fork 0
Filer Ärenden 0 Pull-förfrågningar 0 Wiki
Bläddra i källkod

官網頁面初版

jeter20131220 3 år sedan
förälder
29e156b5cc
incheckning
867a81d3c4
39 ändrade filer med 763 tillägg och 0 borttagningar
Delad Vy Visa Diff Statistik
  1. 354 0
      ArkCard-web/collect.html
  2. 7 0
      ArkCard-web/goto.js
  3. BIN
      ArkCard-web/img/arkcards.png
  4. BIN
      ArkCard-web/img/banner.png
  5. BIN
      ArkCard-web/img/copy.png
  6. BIN
      ArkCard-web/img/qrcode.png
  7. BIN
      ArkCard-web/img/sec01-1.png
  8. BIN
      ArkCard-web/img/sec01-title.png
  9. BIN
      ArkCard-web/img/sec01.png
  10. BIN
      ArkCard-web/img/sec02.png
  11. BIN
      ArkCard-web/img/sec03.png
  12. BIN
      ArkCard-web/img/sec04.png
  13. BIN
      ArkCard-web/img/sec04/Tiktok.png
  14. BIN
      ArkCard-web/img/sec04/alibaba.jpg
  15. BIN
      ArkCard-web/img/sec04/nft-pay.jpg
  16. BIN
      ArkCard-web/img/sec05.png
  17. BIN
      ArkCard-web/img/sec05/10.png
  18. BIN
      ArkCard-web/img/sec05/11.png
  19. BIN
      ArkCard-web/img/sec05/12.png
  20. BIN
      ArkCard-web/img/sec05/5.png
  21. BIN
      ArkCard-web/img/sec05/6.png
  22. BIN
      ArkCard-web/img/sec05/7.png
  23. BIN
      ArkCard-web/img/sec05/8.png
  24. BIN
      ArkCard-web/img/sec05/9.png
  25. BIN
      ArkCard-web/img/sec05/Icon awesome-ethereum.png
  26. BIN
      ArkCard-web/img/sec05/like.png
  27. BIN
      ArkCard-web/img/sec05/sec05-1.png
  28. BIN
      ArkCard-web/img/sec05/sec05-2.png
  29. BIN
      ArkCard-web/img/sec05/sec05-3.png
  30. BIN
      ArkCard-web/img/sec05/sec05-4.png
  31. BIN
      ArkCard-web/img/share.png
  32. BIN
      ArkCard-web/img/组 1.png
  33. BIN
      ArkCard-web/img/组 10.png
  34. 90 0
      ArkCard-web/index.html
  35. 91 0
      ArkCard-web/news.html
  36. 57 0
      ArkCard-web/qr-code.html
  37. 78 0
      ArkCard-web/style.css
  38. 9 0
      ArkCard-web/style.css.map
  39. 77 0
      ArkCard-web/style.scss

+ 354 - 0
ArkCard-web/collect.html
Visa fil 

@@ -0,0 +1,354 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>ARK.Cards</title>
 
+
 
+    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
 
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
 
+        integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
 
+    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
 
+    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" />
 
+    <link rel="stylesheet" href="./style.css">
 
+</head>
 
+
 
+<body>
 
+    <section id="sec01" class="sec01-collect container-fluid px-0 mx-0">
 
+     <img class="img-fluid" src="./img/banner.png" alt="">
 
+     <div style="position: relative;" class="card-img-overlay p-0 d-flex align-items-end">
 
+        <h5 style="background: #fff; font-size: 16px; position: absolute; z-index: 20;"
 
+            class="card-title py-3  px-5 text-center mb-0 fw-bold">我的收藏</h5>
 
+    </div>
 
+    </section>
 
+    <section id="sec05-moblie" class="sec05 mt-4">
 
+        <div class="sec05-moblie container-fluid">
 
+            <div class="sec05-moblie-header">
 
+                <h1 class="secn-title ps-2">音樂</h1>
 
+            </div>
 
+            <div class="sec05-moblie-container row row-cols-1 row-cols-md-4 g-4">
 
+                <div class="col">
 
+                    <div class="card h-100">
 
+                        <a target="_blank" href="./artist-course.html">
 
+                            <img src="./img/sec05/sec05-1.png"class="card-img-top" alt="...">
 
+                        </a>
 
+                        <div class="card-body">
 
+                            <a target="_blank" href="./artist-course.html">
 
+                                <h5 class="card-title">Lorem ipsum.</h5>
 
+                            </a>
 
+                            <p class="card-text">
 
+                                Lorem ipsum dolor sit amet, 
+                            </p>
 
+                            <p class="card-text row">
 
+                                <small class="text-muted col-6 px-1">
 
+                                    <img class="mb-1 mx-1 d-inline" style="width: 10px; object-fit: cover; "
 
+                                        src="./img/sec05/Icon awesome-ethereum.png" alt=""><span>333</span>
 
+                                </small>
 
+                                <small class="price col-6 px-0 text-center">
 
+                                    <img class="mb-1 mx-1 d-inline" style="width: 12px; object-fit: cover; " src="./img/sec05/like.png" alt=""><span>333</span></small>
 
+                                </p>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+                <div class="col">
 
+                    <div class="card h-100">
 
+                        <a target="_blank" href="./artist-course.html">
 
+                            <img src="./img/sec05/sec05-2.png"class="card-img-top" alt="...">
 
+                        </a>
 
+                        <div class="card-body">
 
+                            <a target="_blank" href="./artist-course.html">
 
+                                <h5 class="card-title">Lorem ipsum.</h5>
 
+                            </a>
 
+                            <p class="card-text">
 
+                                Lorem ipsum dolor sit amet, 
+                            </p>
 
+                            <p class="card-text row">
 
+                                <small class="text-muted col-6 px-1">
 
+                                    <img class="mb-1 mx-1 d-inline" style="width: 10px; object-fit: cover; "
 
+                                        src="./img/sec05/Icon awesome-ethereum.png" alt=""><span>333</span>
 
+                                </small>
 
+                                <small class="price col-6 px-0 text-center">
 
+                                    <img class="mb-1 mx-1 d-inline" style="width: 12px; object-fit: cover; " src="./img/sec05/like.png" alt=""><span>333</span></small>
 
+                                </p>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+                <div class="col">
 
+                    <div class="card h-100">
 
+                        <a target="_blank" href="./artist-course.html">
 
+                            <img src="./img/sec05/sec05-3.png"class="card-img-top" alt="...">
 
+                        </a>
 
+                        <div class="card-body">
 
+                            <a target="_blank" href="./artist-course.html">
 
+                                <h5 class="card-title">Lorem ipsum.</h5>
 
+                            </a>
 
+                            <p class="card-text">
 
+                                Lorem ipsum dolor sit amet, 
+                            </p>
 
+                            <p class="card-text row">
 
+                                <small class="text-muted col-6 px-1">
 
+                                    <img class="mb-1 mx-1 d-inline" style="width: 10px; object-fit: cover; "
 
+                                        src="./img/sec05/Icon awesome-ethereum.png" alt=""><span>333</span>
 
+                                </small>
 
+                                <small class="price col-6 px-0 text-center">
 
+                                    <img class="mb-1 mx-1 d-inline" style="width: 12px; object-fit: cover; " src="./img/sec05/like.png" alt=""><span>333</span></small>
 
+                                </p>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+                <div class="col">
 
+                    <div class="card h-100">
 
+                        <a target="_blank" href="./artist-course.html">
 
+                            <img src="./img/sec05/sec05-4.png"class="card-img-top" alt="...">
 
+                        </a>
 
+                        <div class="card-body">
 
+                            <a target="_blank" href="./artist-course.html">
 
+                                <h5 class="card-title">Lorem ipsum.</h5>
 
+                            </a>
 
+                            <p class="card-text">
 
+                                Lorem ipsum dolor sit amet, 
+                            </p>
 
+                            <p class="card-text row">
 
+                                <small class="text-muted col-6 px-1">
 
+                                    <img class="mb-1 mx-1 d-inline" style="width: 10px; object-fit: cover; "
 
+                                        src="./img/sec05/Icon awesome-ethereum.png" alt=""><span>333</span>
 
+                                </small>
 
+                                <small class="price col-6 px-0 text-center">
 
+                                    <img class="mb-1 mx-1 d-inline" style="width: 12px; object-fit: cover; " src="./img/sec05/like.png" alt=""><span>333</span></small>
 
+                                </p>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+
 
+
 
+        </div>
 
+        <div class="sec05-moblie container-fluid">
 
+            <div class="sec05-moblie-header">
 
+                <h1 class="secn-title ps-2">運動</h1>
 
+            </div>
 
+            <div class="sec05-moblie-container row row-cols-1 row-cols-md-4 g-4">
 
+                <div class="col">
 
+                    <div class="card h-100">
 
+                        <a target="_blank" href="./artist-course.html">
 
+                            <img src="./img/sec05/5.png"class="card-img-top" alt="...">
 
+                        </a>
 
+                        <div class="card-body">
 
+                            <a target="_blank" href="./artist-course.html">
 
+                                <h5 class="card-title">Lorem ipsum.</h5>
 
+                            </a>
 
+                            <p class="card-text">
 
+                                Lorem ipsum dolor sit amet, 
+                            </p>
 
+                            <p class="card-text row">
 
+                                <small class="text-muted col-6 px-1">
 
+                                    <img class="mb-1 mx-1 d-inline" style="width: 10px; object-fit: cover; "
 
+                                        src="./img/sec05/Icon awesome-ethereum.png" alt=""><span>333</span>
 
+                                </small>
 
+                                <small class="price col-6 px-0 text-center">
 
+                                    <img class="mb-1 mx-1 d-inline" style="width: 12px; object-fit: cover; " src="./img/sec05/like.png" alt=""><span>333</span></small>
 
+                                </p>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+                <div class="col">
 
+                    <div class="card h-100">
 
+                        <a target="_blank" href="./artist-course.html">
 
+                            <img src="./img/sec05/6.png"class="card-img-top" alt="...">
 
+                        </a>
 
+                        <div class="card-body">
 
+                            <a target="_blank" href="./artist-course.html">
 
+                                <h5 class="card-title">Lorem ipsum.</h5>
 
+                            </a>
 
+                            <p class="card-text">
 
+                                Lorem ipsum dolor sit amet, 
+                            </p>
 
+                            <p class="card-text row">
 
+                                <small class="text-muted col-6 px-1">
 
+                                    <img class="mb-1 mx-1 d-inline" style="width: 10px; object-fit: cover; "
 
+                                        src="./img/sec05/Icon awesome-ethereum.png" alt=""><span>333</span>
 
+                                </small>
 
+                                <small class="price col-6 px-0 text-center">
 
+                                    <img class="mb-1 mx-1 d-inline" style="width: 12px; object-fit: cover; " src="./img/sec05/like.png" alt=""><span>333</span></small>
 
+                                </p>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+                <div class="col">
 
+                    <div class="card h-100">
 
+                        <a target="_blank" href="./artist-course.html">
 
+                            <img src="./img/sec05/7.png"class="card-img-top" alt="...">
 
+                        </a>
 
+                        <div class="card-body">
 
+                            <a target="_blank" href="./artist-course.html">
 
+                                <h5 class="card-title">Lorem ipsum.</h5>
 
+                            </a>
 
+                            <p class="card-text">
 
+                                Lorem ipsum dolor sit amet, 
+                            </p>
 
+                            <p class="card-text row">
 
+                                <small class="text-muted col-6 px-1">
 
+                                    <img class="mb-1 mx-1 d-inline" style="width: 10px; object-fit: cover; "
 
+                                        src="./img/sec05/Icon awesome-ethereum.png" alt=""><span>333</span>
 
+                                </small>
 
+                                <small class="price col-6 px-0 text-center">
 
+                                    <img class="mb-1 mx-1 d-inline" style="width: 12px; object-fit: cover; " src="./img/sec05/like.png" alt=""><span>333</span></small>
 
+                                </p>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+                <div class="col">
 
+                    <div class="card h-100">
 
+                        <a target="_blank" href="./artist-course.html">
 
+                            <img src="./img/sec05/8.png"class="card-img-top" alt="...">
 
+                        </a>
 
+                        <div class="card-body">
 
+                            <a target="_blank" href="./artist-course.html">
 
+                                <h5 class="card-title">Lorem ipsum.</h5>
 
+                            </a>
 
+                            <p class="card-text">
 
+                                Lorem ipsum dolor sit amet, 
+                            </p>
 
+                            <p class="card-text row">
 
+                                <small class="text-muted col-6 px-1">
 
+                                    <img class="mb-1 mx-1 d-inline" style="width: 10px; object-fit: cover; "
 
+                                        src="./img/sec05/Icon awesome-ethereum.png" alt=""><span>333</span>
 
+                                </small>
 
+                                <small class="price col-6 px-0 text-center">
 
+                                    <img class="mb-1 mx-1 d-inline" style="width: 12px; object-fit: cover; " src="./img/sec05/like.png" alt=""><span>333</span></small>
 
+                                </p>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+
 
+
 
+        </div>
 
+        <div class="sec05-moblie container-fluid">
 
+            <div class="sec05-moblie-header">
 
+                <h1 class="secn-title ps-2">藝術</h1>
 
+            </div>
 
+            <div class="sec05-moblie-container row row-cols-1 row-cols-md-4 g-4">
 
+                <div class="col">
 
+                    <div class="card h-100">
 
+                        <a target="_blank" href="./artist-course.html">
 
+                            <img src="./img/sec05/9.png" class="card-img-top" alt="...">
 
+                        </a>
 
+                        <div class="card-body">
 
+                            <a target="_blank" href="./artist-course.html">
 
+                                <h5 class="card-title">Lorem ipsum.</h5>
 
+                            </a>
 
+                            <p class="card-text">
 
+                                Lorem ipsum dolor sit amet, 
+                            </p>
 
+                            <p class="card-text row">
 
+                                <small class="text-muted col-6 px-1">
 
+                                    <img class="mb-1 mx-1 d-inline" style="width: 10px; object-fit: cover; "
 
+                                        src="./img/sec05/Icon awesome-ethereum.png" alt=""><span>333</span>
 
+                                </small>
 
+                                <small class="price col-6 px-0 text-center">
 
+                                    <img class="mb-1 mx-1 d-inline" style="width: 12px; object-fit: cover; " src="./img/sec05/like.png" alt=""><span>333</span></small>
 
+                                </p>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+                <div class="col">
 
+                    <div class="card h-100">
 
+                        <a target="_blank" href="./artist-course.html">
 
+                            <img src="./img/sec05/10.png"class="card-img-top" alt="...">
 
+                        </a>
 
+                        <div class="card-body">
 
+                            <a target="_blank" href="./artist-course.html">
 
+                                <h5 class="card-title">Lorem ipsum.</h5>
 
+                            </a>
 
+                            <p class="card-text">
 
+                                Lorem ipsum dolor sit amet, 
+                            </p>
 
+                            <p class="card-text row">
 
+                                <small class="text-muted col-6 px-1">
 
+                                    <img class="mb-1 mx-1 d-inline" style="width: 10px; object-fit: cover; "
 
+                                        src="./img/sec05/Icon awesome-ethereum.png" alt=""><span>333</span>
 
+                                </small>
 
+                                <small class="price col-6 px-0 text-center">
 
+                                    <img class="mb-1 mx-1 d-inline" style="width: 12px; object-fit: cover; " src="./img/sec05/like.png" alt=""><span>333</span></small>
 
+                                </p>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+                <div class="col">
 
+                    <div class="card h-100">
 
+                        <a target="_blank" href="./artist-course.html">
 
+                            <img src="./img/sec05/11.png"class="card-img-top" alt="...">
 
+                        </a>
 
+                        <div class="card-body">
 
+                            <a target="_blank" href="./artist-course.html">
 
+                                <h5 class="card-title">Lorem ipsum.</h5>
 
+                            </a>
 
+                            <p class="card-text">
 
+                                Lorem ipsum dolor sit amet, 
+                            </p>
 
+                            <p class="card-text row">
 
+                                <small class="text-muted col-6 px-1">
 
+                                    <img class="mb-1 mx-1 d-inline" style="width: 10px; object-fit: cover; "
 
+                                        src="./img/sec05/Icon awesome-ethereum.png" alt=""><span>333</span>
 
+                                </small>
 
+                                <small class="price col-6 px-0 text-center">
 
+                                    <img class="mb-1 mx-1 d-inline" style="width: 12px; object-fit: cover; " src="./img/sec05/like.png" alt=""><span>333</span></small>
 
+                                </p>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+                <div class="col">
 
+                    <div class="card h-100">
 
+                        <a target="_blank" href="./artist-course.html">
 
+                            <img src="./img/sec05/12.png"class="card-img-top" alt="...">
 
+                        </a>
 
+                        <div class="card-body">
 
+                            <a target="_blank" href="./artist-course.html">
 
+                                <h5 class="card-title">Lorem ipsum.</h5>
 
+                            </a>
 
+                            <p class="card-text">
 
+                                Lorem ipsum dolor sit amet, 
+                            </p>
 
+                            <p class="card-text row">
 
+                                <small class="text-muted col-6 px-1">
 
+                                    <img class="mb-1 mx-1 d-inline" style="width: 10px; object-fit: cover; "
 
+                                        src="./img/sec05/Icon awesome-ethereum.png" alt=""><span>333</span>
 
+                                </small>
 
+                                <small class="price col-6 px-0 text-center">
 
+                                    <img class="mb-1 mx-1 d-inline" style="width: 12px; object-fit: cover; " src="./img/sec05/like.png" alt=""><span>333</span></small>
 
+                                </p>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+
 
+
 
+        </div>
 
+    </section>
 
+    <footer style="background: #484848;" class="py-4 w-100 px-0 mx-0">
 
+        <p class="text-white text-center mb-0">Copyright 2021 版權所有 © Ark.Cards</p>
 
+    </footer>
 
+
 
+
 
+
 
+
 
+
 
+    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
 
+    <script>
 
+      AOS.init();
 
+    </script>
 
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
 
+        integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
 
+        crossorigin="anonymous"></script>
 
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"
 
+        integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
 
+        crossorigin="anonymous"></script>
 
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.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>
 
+</body>
 
+
 
+</html>

+ 7 - 0
ArkCard-web/goto.js
Visa fil 

@@ -0,0 +1,7 @@
 
+$('.sec05-moblie-container').slick({
 
+    arrows: false,
 
+    slidesToShow: 1,
 
+    slidesToScroll: 1,
 
+    infinite: false,
 
+    centerMode: true,
 
+  });

BIN
ArkCard-web/img/arkcards.png
Visa fil


BIN
ArkCard-web/img/banner.png
Visa fil


BIN
ArkCard-web/img/copy.png
Visa fil


BIN
ArkCard-web/img/qrcode.png
Visa fil


BIN
ArkCard-web/img/sec01-1.png
Visa fil


BIN
ArkCard-web/img/sec01-title.png
Visa fil


BIN
ArkCard-web/img/sec01.png
Visa fil


BIN
ArkCard-web/img/sec02.png
Visa fil


BIN
ArkCard-web/img/sec03.png
Visa fil


BIN
ArkCard-web/img/sec04.png
Visa fil


BIN
ArkCard-web/img/sec04/Tiktok.png
Visa fil


BIN
ArkCard-web/img/sec04/alibaba.jpg
Visa fil


BIN
ArkCard-web/img/sec04/nft-pay.jpg
Visa fil


BIN
ArkCard-web/img/sec05.png
Visa fil


BIN
ArkCard-web/img/sec05/10.png
Visa fil


BIN
ArkCard-web/img/sec05/11.png
Visa fil


BIN
ArkCard-web/img/sec05/12.png
Visa fil


BIN
ArkCard-web/img/sec05/5.png
Visa fil


BIN
ArkCard-web/img/sec05/6.png
Visa fil


BIN
ArkCard-web/img/sec05/7.png
Visa fil


BIN
ArkCard-web/img/sec05/8.png
Visa fil


BIN
ArkCard-web/img/sec05/9.png
Visa fil


BIN
ArkCard-web/img/sec05/Icon awesome-ethereum.png
Visa fil


BIN
ArkCard-web/img/sec05/like.png
Visa fil


BIN
ArkCard-web/img/sec05/sec05-1.png
Visa fil


BIN
ArkCard-web/img/sec05/sec05-2.png
Visa fil


BIN
ArkCard-web/img/sec05/sec05-3.png
Visa fil


BIN
ArkCard-web/img/sec05/sec05-4.png
Visa fil


BIN
ArkCard-web/img/share.png
Visa fil


BIN
ArkCard-web/img/组 1.png
Visa fil


BIN
ArkCard-web/img/组 10.png
Visa fil


+ 90 - 0
ArkCard-web/index.html
Visa fil 

@@ -0,0 +1,90 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>ARK.Cards</title>
 
+
 
+    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
 
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
 
+        integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
 
+    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
 
+    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" />
 
+    <link rel="stylesheet" href="./style.css">
 
+</head>
 
+
 
+<body>
 
+    <section id="sec01" class="sec01 container-fluid px-0 mx-0">
 
+     <img class="img-fluid" src="./img/sec01-1.png" alt="">
 
+
 
+    </section>
 
+    <section class="sec02 container-fluid px-0 mx-0">
 
+        <div class="card bg-transparent text-white border-0">
 
+            <img src="./img/sec02.png" class="img-fluid" alt="...">
 
+            <div style="position: relative;" class="card-img-overlay p-0 d-flex align-items-end justify-content-end">
 
+                <a href="./qr-code.html" data-aos="fade-left" style="background: rgba(0,0,0,0.5); font-size: 16px; position: absolute; z-index: 20;" class="card-title p-4 w-75 text-center">與好友分享NFT收藏</a>
 
+            </div>
 
+
 
+        </div>
 
+    </section>
 
+    <section class="sec02 container-fluid px-0 mx-0">
 
+        <div class="card bg-transparent text-white border-0">
 
+            <img src="./img/sec03.png" class="img-fluid" alt="...">
 
+            <div style="position: relative;" class="card-img-overlay p-0 d-flex align-items-end">
 
+                <a href="./news.html" data-aos="fade-right" data-aos-delay="500" style="background: rgba(0,0,0,0.5); font-size: 16px; position: absolute; z-index: 20;" class="card-title p-4 w-75 text-center">取得NFT最新消息</a>
 
+            </div>
 
+
 
+        </div>
 
+    </section>
 
+    <section class="sec02 container-fluid px-0 mx-0">
 
+        <div class="card bg-transparent text-white border-0">
 
+            <img src="./img/sec04.png" class="img-fluid" alt="...">
 
+            <div style="position: relative;" class="card-img-overlay p-0 d-flex align-items-end justify-content-end">
 
+                <a href="./collect.html" data-aos="fade-left" data-aos-delay="800" style="background: rgba(0,0,0,0.5); font-size: 16px; position: absolute; z-index: 20;" class="card-title p-4 w-75 text-center">我的NFT收藏清單</a>
 
+            </div>
 
+
 
+        </div>
 
+    </section>
 
+    <section class="sec03 container-fluid px-0 mx-0">
 
+        <div class="card bg-transparent text-white border-0">
 
+            <img style="object-fit: cover; height:180px;" src="./img/sec05.png" class="img-fluid" alt="...">
 
+            <div style="margin-top: 50px;" class="card-img-overlay p-0">
 
+                <div class="row px-0 mx-0">
 
+                    <div class="col-8 d-flex align-items-end px-0">
 
+                        <h5 data-aos="fade-right" style="background: rgba(0,0,0,0.5); font-size: 15px;" class="card-title p-4 w-100 mb-0">加入Ark.Cards LINE官方帳號</h5>
 
+                    </div>
 
+                    <div class="col-4 ps-0 pe-0">
 
+                        <img class="img-fluid" src="./img/组 1.png" alt="">
 
+                    </div>
 
+                </div>
 
+               
+            </div>
 
+
 
+        </div>
 
+    </section>
 
+    <footer style="background: #484848;" class="py-4 w-100 px-0 mx-0">
 
+        <p class="text-white text-center mb-0">Copyright 2021 版權所有 © Ark.Cards</p>
 
+    </footer>
 
+
 
+
 
+
 
+
 
+
 
+    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
 
+    <script>
 
+      AOS.init();
 
+    </script>
 
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
 
+        integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
 
+        crossorigin="anonymous"></script>
 
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"
 
+        integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
 
+        crossorigin="anonymous"></script>
 
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.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>
 
+</body>
 
+
 
+</html>

+ 91 - 0
ArkCard-web/news.html
Visa fil 

@@ -0,0 +1,91 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>ARK.Cards</title>
 
+
 
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
 
+        integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
 
+    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
 
+    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" />
 
+    <link rel="stylesheet" href="./style.css">
 
+</head>
 
+
 
+<body>
 
+    <section id="sec01" class="sec01 container-fluid px-0 mx-0 mb-5">
 
+        <div class="card bg-transparent text-white border-0">
 
+            <img src="./img/sec03.png" class="img-fluid" alt="...">
 
+            <div style="position: relative;" class="card-img-overlay p-0 d-flex align-items-end justify-content-center">
 
+                <h5 data-aos="fade-left"
 
+                    style="background: rgba(0,0,0,0.7); font-size: 16px; position: absolute; z-index: 20;"
 
+                    class="card-title p-4 w-50 text-center fw-bold">最新消息</h5>
 
+            </div>
 
+        </div>
 
+    </section>
 
+    <section class="sec04 my-5">
 
+        <div class="row row-cols-1 mx-0 px-0 g-4 mt-5">
 
+            <div class="col px-0 mx-0">
 
+              <div class="card border-0">
 
+                <img src="./img/sec04/Tiktok.png" class="card-img-top" alt="...">
 
+                <div style="position: relative;" class="card-img-overlay p-0 d-flex justify-content-center">
 
+                    <h5 style="background: rgba(255,255,255,0.8); font-size: 14px; position: absolute; z-index: 20; top:-50px;" class="card-date py-4 pe-3 text-end">2021/08/25</h5>
 
+                </div>
 
+                <div class="card-body">
 
+                  <h5 class="card-title">Tiktok & Audius聯手，帶領全球音樂人大步走進幣圈與NFT的世界！</h5>
 
+                  <p class="card-text">Audius於8月正式公告與TikTok的合作消息，在外界看來，與Apple music、spotify 相比，Audius絕非是強強聯手的優先選擇，而能夠讓擁有8億會員的TikTok 選擇當第一批新......</p>
 
+                </div>
 
+              </div>
 
+              <hr>
 
+            </div>
 
+            <div class="col px-0 mx-0">
 
+              <div class="card border-0">
 
+                <img src="./img/sec04/alibaba.jpg" class="card-img-top" alt="...">
 
+                <div style="position: relative;" class="card-img-overlay p-0 d-flex justify-content-center">
 
+                    <h5 style="background: rgba(255,255,255,0.8); font-size: 14px; position: absolute; z-index: 20; top:-50px;" class="card-date py-4 pe-3 text-end">2021/08/25</h5>
 
+                </div>
 
+                <div class="card-body">
 
+                  <h5 class="card-title">NFT版權│阿里巴巴推出，阿里拍賣，實現版權交易的 NFT 市場</h5>
 
+                  <p class="card-text">8月17日，阿里再次登場，宣布推出新的NFT市場「區塊鏈數字版權資產交易」，允許版權持有人出售IP相關的代幣化版權資產憑證。</p>
 
+                </div>
 
+              </div>
 
+              <hr>
 
+            </div>
 
+            <div class="col px-0 mx-0">
 
+              <div class="card border-0">
 
+                <img src="./img/sec04/nft-pay.jpg" class="card-img-top" alt="...">
 
+                <div style="position: relative;" class="card-img-overlay p-0 d-flex justify-content-center">
 
+                    <h5 style="background: rgba(255,255,255,0.8); font-size: 14px; position: absolute; z-index: 20; top:-50px;" class="card-date py-4 pe-3 text-end">2021/08/25</h5>
 
+                </div>
 
+                <div class="card-body">
 
+                  <h5 class="card-title">NFT電影│娛樂圈結合NFT，電影票開放使用比特幣與萊特幣支付</h5>
 
+                  <p class="card-text">連結你的加密錢包，馬上進場， Matt Hartley 表示：“這是娛樂發行的下一步。我們認為這有可能成為比特幣的 Netflix”。</p>
 
+                </div>
 
+              </div>
 
+              <hr>
 
+            </div>
 
+          </div>
 
+    </section>
 
+
 
+    <footer style="background: #484848;" class="py-4">
 
+        <p class="text-white text-center mb-0">Copyright 2021 版權所有 © Ark.Cards</p>
 
+    </footer>
 
+
 
+
 
+
 
+
 
+
 
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
 
+        integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
 
+        crossorigin="anonymous"></script>
 
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"
 
+        integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
 
+        crossorigin="anonymous"></script>
 
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.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>
 
+</body>
 
+
 
+</html>

+ 57 - 0
ArkCard-web/qr-code.html
Visa fil 

@@ -0,0 +1,57 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>ARK.Cards</title>
 
+
 
+    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
 
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
 
+        integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
 
+    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
 
+    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" />
 
+    <link rel="stylesheet" href="./style.css">
 
+</head>
 
+
 
+<body style="background:#484848;">
 
+    <section class="sec01-qrcode container-fluid px-0 mx-0">
 
+        <div class="card border-0 text-white">
 
+            <img src="./img/banner.png" class="card-img" alt="...">
 
+            <div class="card-img-overlay d-flex align-items-center justify-content-center">
 
+                <h5 class="card-title">我要接收</h5>
 
+            </div>
 
+        </div>
 
+    </section>
 
+    <section class="sec02-qrcode container-fluid px-0 mx-0 text-center">
 
+        <img class="img-fluid" src="./img/qrcode.png" alt="">
 
+        <img class="m-3" src="./img/copy.png" alt="">
 
+        <img class="m-3" src="./img/share.png" alt="">
 
+        <p style="font-size: 14px;" class="mt- text-white">我接收的地址： edit#slide=id.ge5de583e5f_0_42</p>
 
+    </section>
 
+
 
+    <footer style="background: #484848;" class="py-4 w-100 px-0 mx-0">
 
+        <p class="text-white text-center mb-0">Copyright 2021 版權所有 © Ark.Cards</p>
 
+    </footer>
 
+
 
+
 
+
 
+
 
+
 
+    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
 
+    <script>
 
+        AOS.init();
 
+    </script>
 
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
 
+        integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
 
+        crossorigin="anonymous"></script>
 
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"
 
+        integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
 
+        crossorigin="anonymous"></script>
 
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.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>
 
+</body>
 
+
 
+</html>

+ 78 - 0
ArkCard-web/style.css
Visa fil 

@@ -0,0 +1,78 @@
 
+* {
 
+  margin: 0;
 
+  padding: 0;
 
+  -webkit-box-sizing: border-box;
 
+          box-sizing: border-box;
 
+}
 
+
 
+.sec02 a, .sec01 a {
 
+  text-decoration: none;
 
+  color: #fff;
 
+  margin-bottom: -35px !important;
 
+}
 
+
 
+.sec02 h5, .sec01 h5 {
 
+  margin-bottom: -35px !important;
 
+}
 
+
 
+.sec04 .card-date {
 
+  width: 92vw;
 
+}
 
+
 
+.sec04 .card-title {
 
+  font-weight: 900;
 
+}
 
+
 
+.sec04 hr {
 
+  background: #D3D3D3;
 
+  height: 2px;
 
+  width: 90vw;
 
+  margin: 0 auto;
 
+  opacity: 1 !important;
 
+}
 
+
 
+.sec01-collect h5 {
 
+  margin-bottom: -5px !important;
 
+  border-radius: 10px 30px 0 0;
 
+}
 
+
 
+.sec05 .sec05-moblie-header {
 
+  border-left: 4px solid #000;
 
+}
 
+
 
+.sec05 .sec05-moblie-container {
 
+  padding-top: 10vw;
 
+}
 
+
 
+.sec05 .sec05-moblie-container .col {
 
+  margin: 10px;
 
+}
 
+
 
+.sec05 .sec05-moblie-container .col a {
 
+  text-decoration: none;
 
+  color: #000;
 
+  -webkit-transition: 0.3s;
 
+  transition: 0.3s;
 
+  cursor: pointer;
 
+}
 
+
 
+.sec05 .sec05-moblie-container .col a:hover {
 
+  color: #0000C6;
 
+}
 
+
 
+.sec05 .sec05-moblie-container .col .card .card-title {
 
+  font-weight: 900;
 
+}
 
+
 
+@media screen and (max-width: 350px) {
 
+  .sec05 .sec05-moblie-container .col .card .card-text {
 
+    font-size: 14px;
 
+  }
 
+}
 
+
 
+.sec02-qrcode {
 
+  position: relative;
 
+  top: -30px;
 
+  z-index: 30;
 
+}
 
+/*# sourceMappingURL=style.css.map */

+ 9 - 0
ArkCard-web/style.css.map
Visa fil 

@@ -0,0 +1,9 @@
 
+{
 
+    "version": 3,
 
+    "mappings": "AAAA,AAAA,CAAC,CAAC;EACE,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;EACV,UAAU,EAAE,UAAU;CACzB;;AAED,AACI,MADE,CACF,CAAC,EADE,MAAM,CACT,CAAC,CAAA;EACG,eAAe,EAAE,IAAI;EACrB,KAAK,EAAC,IAAI;EACV,aAAa,EAAE,gBAAgB;CAClC;;AALL,AAMI,MANE,CAMF,EAAE,EANC,MAAM,CAMT,EAAE,CAAA;EACE,aAAa,EAAE,gBAAgB;CAClC;;AAGL,AACI,MADE,CACF,UAAU,CAAA;EACN,KAAK,EAAE,IAAI;CACd;;AAHL,AAII,MAJE,CAIF,WAAW,CAAA;EACP,WAAW,EAAE,GAAG;CACnB;;AANL,AAOI,MAPE,CAOF,EAAE,CAAA;EACE,UAAU,EAAC,OAAO;EAClB,MAAM,EAAE,GAAG;EACX,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,MAAM;EACd,OAAO,EAAE,YAAY;CACxB;;AAGL,AACI,cADU,CACV,EAAE,CAAA;EACE,aAAa,EAAE,eAAe;EAC9B,aAAa,EAAE,aAAa;CAC/B;;AAEL,AAEI,MAFE,CAEF,oBAAoB,CAAA;EAChB,WAAW,EAAC,cAAc;CAC7B;;AAJL,AAKI,MALE,CAKF,uBAAuB,CAAC;EACpB,WAAW,EAAE,IAAI;CAuBpB;;AA7BL,AAOQ,MAPF,CAKF,uBAAuB,CAEnB,IAAI,CAAC;EACD,MAAM,EAAE,IAAI;CAoBf;;AA5BT,AASY,MATN,CAKF,uBAAuB,CAEnB,IAAI,CAEA,CAAC,CAAC;EACE,eAAe,EAAE,IAAI;EACrB,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,IAAI;EAChB,MAAM,EAAE,OAAO;CAIlB;;AAjBb,AAcgB,MAdV,CAKF,uBAAuB,CAEnB,IAAI,CAEA,CAAC,AAKI,MAAM,CAAC;EACJ,KAAK,EAAE,OAAO;CACjB;;AAhBjB,AAmBgB,MAnBV,CAKF,uBAAuB,CAEnB,IAAI,CAWA,KAAK,CACD,WAAW,CAAC;EACR,WAAW,EAAE,GAAG;CACnB;;AAEG,MAAM,CAAC,MAAM,MAAM,SAAS,EAAE,KAAK;EAvBvD,AAsBgB,MAtBV,CAKF,uBAAuB,CAEnB,IAAI,CAWA,KAAK,CAID,UAAU,CAAC;IAEH,SAAS,EAAE,IAAI;GAEtB;;;AAOjB,AAAA,aAAa,CAAA;EACX,QAAQ,EAAE,QAAQ;EAClB,GAAG,EAAC,KAAK;EACT,OAAO,EAAE,EAAE;CACZ",
 
+    "sources": [
 
+        "style.scss"
 
+    ],
 
+    "names": [],
 
+    "file": "style.css"
 
+}

+ 77 - 0
ArkCard-web/style.scss
Visa fil 

@@ -0,0 +1,77 @@
 
+* {
 
+    margin: 0;
 
+    padding: 0;
 
+    box-sizing: border-box;
 
+}
 
+// 服務介紹頁面
 
+.sec02,.sec01{
 
+    a{
 
+        text-decoration: none;
 
+        color:#fff;
 
+        margin-bottom: -35px !important; 
+    }
 
+    h5{
 
+        margin-bottom: -35px !important; 
+    }
 
+}
 
+// news頁面
 
+.sec04{
 
+    .card-date{
 
+        width: 92vw;
 
+    }
 
+    .card-title{
 
+        font-weight: 900;
 
+    }
 
+    hr{
 
+        background:#D3D3D3;
 
+        height: 2px;
 
+        width: 90vw;
 
+        margin: 0 auto;
 
+        opacity: 1 !important;
 
+    }
 
+}
 
+// 收藏頁面
 
+.sec01-collect{
 
+    h5{
 
+        margin-bottom: -5px !important;
 
+        border-radius: 10px 30px 0 0;
 
+    }
 
+}
 
+.sec05{
 
+  
+    .sec05-moblie-header{
 
+        border-left:4px solid #000;
 
+    }
 
+    .sec05-moblie-container {
 
+        padding-top: 10vw;
 
+        .col {
 
+            margin: 10px;
 
+            a {
 
+                text-decoration: none;
 
+                color: #000;
 
+                transition: 0.3s;
 
+                cursor: pointer;
 
+                &:hover {
 
+                    color:	#0000C6;
 
+                }
 
+            }
 
+            .card {
 
+                .card-title {
 
+                    font-weight: 900;
 
+                }
 
+                .card-text {
 
+                    @media screen and(max-width:350px) {
 
+                        font-size: 14px;
 
+                    }
 
+                }
 
+            }
 
+        }
 
+    }
 
+}
 
+
 
+// 我要接收頁面
 
+.sec02-qrcode{
 
+  position: relative;
 
+  top:-30px;
 
+  z-index: 30;
 
+}