修正

akaswapwhyixd.html

@@ -131,7 +131,7 @@
                     <p>愛，是一種強烈的情感和依戀，難以言語或文字來表達，但人們透過「愛」得以連結彼此、產生力量，在黑暗時刻能以「愛」作為火光，照亮前行的未知道路。</p>
                     <p>由NFT藝術平台「akaSwap」主辦，跨領域藝術團隊「何理互動設計」擔任策展人的「reSync: Love」將於2021年8月28日至2021年9月15日於線上展出(<a
                             target="_blank"
-                            href="resynclove.whyixd.com">resynclove.whyixd.com</a>)。展覽集結王宗欣、安地羊、小油画、趙安玲等十四位台灣視覺藝術家，在疫情造成人際關係斷連的此刻，期盼以「愛」作為主題，喚起人們再次「連結」彼此的力量。
+                            href="https://www.resynclove.whyixd.com/">resynclove.whyixd.com</a>)。展覽集結王宗欣、安地羊、小油画、趙安玲等十四位台灣視覺藝術家，在疫情造成人際關係斷連的此刻，期盼以「愛」作為主題，喚起人們再次「連結」彼此的力量。
                     </p>
                     <h2 class="my-3 ps-0" style="font-weight: 700;">遊走三大概念故事展間，以互動觀展方式串聯展覽核心</h2>
                     <p>策展團隊何理互動設計表示，因應數位化觀展形式，團隊以「互動式」文本發展出「Memories of Love」、「What is Love?」、「Meaning of

index.html

@@ -122,6 +122,12 @@
     </div>
     <!-- 主視覺 -->
     <section id="banner" class="container-fluid mx-0 px-0">
+        <div style="margin-top:130px;" class="marquee">
+            <div>
+              <span>You spin me right round, baby. Like a record, baby.</span>
+              <span>You spin me right round, baby. Like a record, baby.</span>
+            </div>
+          </div>
         <div id="banner-container">
             <div class="youtube-slider">
                 <!-- <div class="youtube ">

style.css

@@ -304,6 +304,49 @@ body .learn-more:hover {
   }
 }
 
+#banner .marquee {
+  font-size: 36px;
+  margin: 30px auto;
+  height: 100px;
+  width: 75vw;
+  overflow: hidden;
+  position: relative;
+}
+
+#banner .marquee div {
+  display: block;
+  width: 200%;
+  height: 50px;
+  color: #fff;
+  position: absolute;
+  overflow: hidden;
+  -webkit-animation: marquee 5s linear infinite;
+          animation: marquee 5s linear infinite;
+}
+
+#banner .marquee span {
+  float: right;
+  width: 50%;
+}
+
+@-webkit-keyframes marquee {
+  0% {
+    left: 0;
+  }
+  100% {
+    left: -100%;
+  }
+}
+
+@keyframes marquee {
+  0% {
+    left: 0;
+  }
+  100% {
+    left: -100%;
+  }
+}
+
 #banner #banner-container {
   width: 80vw;
   margin: 50px auto;
@@ -319,7 +362,6 @@ body .learn-more:hover {
 
 #banner #banner-container .youtube {
   width: 80vw;
-  padding-top: 10vw;
   margin: 0 auto;
   color: #fff;
 }

style.scss

@@ -231,6 +231,34 @@ body {
     @media screen and(max-width:$moblie) {
         background: url(./img/mobile-banner1.jpg);
     }
+    .marquee {
+        font-size: 36px;
+        margin: 30px auto; 
+        height: 100px;
+        width: 75vw;
+        overflow: hidden;
+        position: relative;
+      }
+      
+      .marquee div {
+        display: block;
+        width: 200%;
+        height: 50px;
+        color:#fff;
+        position: absolute;
+        overflow: hidden;
+        animation: marquee 5s linear infinite;
+      }
+      
+      .marquee span {
+        float: right;
+        width: 50%;
+      }
+      
+      @keyframes marquee {
+        0% { left: 0; }
+        100% { left: -100%; }
+      }
     #banner-container {
         width: 80vw;
         margin: 50px auto;
@@ -241,7 +269,6 @@ body {
         }
         .youtube {
             width: 80vw;
-            padding-top: 10vw;
             margin: 0 auto;
             color: #fff;
             a {