新增影片

index.html

@@ -25,7 +25,7 @@
             <div id="logo" class=" col-md-2 col-lg-2">
                 <a href=""> <img src="./img/LOGO.png" alt=""></a>
             </div>
-            <div id="link" class="col-md-10 col-lg-9">
+            <div id="link" class="col-md-10 col-lg-8">
                 <a data-gt-target="#sec01 " data-gt-duration="500" data-gt-offset="">相關新聞</a>
                 <a data-gt-target="#sec02" data-gt-duration="800" data-gt-offset="60">TOP NFT ARTIST</a>
                 <a data-gt-target="#sec04" data-gt-duration="500" data-gt-offset="60">洞察報告</a>
@@ -36,9 +36,10 @@
 
             </div>
             <img id="menu-btn1" src="./img/menu.png" alt="">
-            <div id="socail-link" class="col-md-10 col-lg-1">
+            <div id="socail-link" class="col-md-10 col-lg-2">
                 <a target="_blank" href="https://www.facebook.com/nftboard"><img src="./img/facebook (2).png"
                         alt=""></a>
+                <a target="_blank" href="https://www.instagram.com/nftboard.info/"><img src="./img/instagram.png" alt=""></a>        
             </div>
         </div>
     </section>
@@ -192,6 +193,8 @@
             <div id="sec01-container-card" class="row"></div>
         </div>
     </section>
+    <!-- 影片區塊 -->
+    
     <!-- 廣告區塊 -->
     <section id="sec-adv">
         <div id="sec-adv-container" class="container-fluid py-5">
@@ -208,6 +211,18 @@
             </div>
         </div>
     </section>
+    <!-- <section id="video" class="container-fluid" style="padding:1vw 0;">
+        <video   type="video/mp4" src="./img/video1.mp4" controls></video>
+    </section> -->
+    <div class="wrap container-fluid" style="padding:1vw 0;">
+        <div class="adv-banner">
+          <video autoplay muted loop>
+            <source src="./img/video1.mp4" type="video/mp4">
+          </video>
+        </div>
+      </div>
+   
+
     <!-- 作品集活動區塊 -->
     <section id="sec-works" class="container-fluid pb-5">
         <div class="sec-work-title">
@@ -223,7 +238,7 @@
             <div id="sec02-top-box" class="row">
                 <div class="col-lg-3">
                     <h1>TOP NFT</h1>
-
+                 
                 </div>
                 <div id="sec02-content" class="col-lg-9">
                     <div class="row">
@@ -3898,12 +3913,13 @@
                     console.log(msg);
                     const limit = 5;
                     for (var i = 0; i < limit; i++) {
+                        var numb=i+1;
                         sec01News += ' \
                             <div class="card col-lg-6"> \
                                 <a href="' + msg[i].website + '" " target="_blank"><img class="data-line" src="' + msg[i].newsimg + '" alt=""></a> \
                                 <div class="row"> \
                                     <div class="col-2"> \
-                                        <h1>'+ msg[i].sec01news + '</h1> \
+                                        <h1>'+ numb + '</h1> \
                                     </div> \
                                         <div class="col-10"> \
                                             <a href="' + msg[i].website + '" " target="_blank"> \

style.css

@@ -128,7 +128,8 @@ body .learn-more:hover {
 }
 
 #Navigation #socail-link {
-  padding: 4vw 1vw 2vw 1vw;
+  padding: 4vw 5vw 2vw 1vw;
+  text-align: right;
 }
 
 @media screen and (max-width: 767px) {
@@ -139,6 +140,7 @@ body .learn-more:hover {
 
 #Navigation #socail-link img {
   width: 30px;
+  margin: 0 10px;
   -webkit-filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(138deg) brightness(103%) contrast(102%);
           filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(138deg) brightness(103%) contrast(102%);
   -webkit-transition: 0.3s;
@@ -615,6 +617,50 @@ body .learn-more:hover {
   }
 }
 
+#video {
+  width: 100vw;
+  padding-bottom: 10vw;
+  text-align: center;
+  background-position: center center;
+  background-size: cover;
+}
+
+#video video {
+  width: 80vw;
+  margin: 0 auto;
+}
+
+.wrap {
+  text-align: center;
+  width: 100vw;
+}
+
+.wrap .adv-banner {
+  width: 100%;
+  height: 90vh;
+  position: relative;
+  overflow: hidden;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+
+.wrap .adv-banner video {
+  position: absolute;
+  width: 100%;
+  height: 90%;
+  top: 0;
+  left: 0;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
 #sec-works .sec-work-container {
   width: 85vw;
 }

style.scss

@@ -100,13 +100,14 @@ body {
         }
     }
     #socail-link {
-        padding: 4vw 1vw 2vw 1vw;
+        padding: 4vw 5vw 2vw 1vw;
+        text-align: right;
         @media screen and(max-width:$moblie) {
             display: none;
         }
         img {
             width: 30px;
-
+            margin: 0 10px;
             filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(138deg) brightness(103%) contrast(102%);
             transition: 0.3s;
             &:hover {
@@ -478,7 +479,40 @@ body {
         }
     }
 }
-
+// 影片區塊
+#video{
+    width: 100vw;
+    padding-bottom: 10vw;
+    text-align: center;
+    // background: url(./img/sec04banner.jpg);
+    background-position: center center;
+    background-size: cover;
+    video{
+        width: 80vw;
+        margin: 0 auto;
+    }
+}
+.wrap{
+text-align: center;
+width: 100vw;
+    .adv-banner{
+        width: 100%;
+        height: 90vh;
+        position: relative;
+        overflow: hidden;
+        display: flex;
+        justify-content: center;
+        align-items:center;
+      }
+      .adv-banner video{
+        position: absolute;
+        width: 100%;
+        height: 90%;
+        top:0;
+        left:0;
+        object-fit: cover;
+      }
+}   
 // 活動作品集
 #sec-works {