gamefi template

layouts/shortcodes/defi.html

@@ -45,12 +45,14 @@
                           <tr>
                             <th><span>Ranking</span></th>
                             <th><span>App</span></th>
+                            <th><span>Name</span></th>
                             <th><span>Users</span></th>
                             <th><span>Volume</span></th>
                             <th><span>Transaction</span></th>
                           </tr>
                         </thead>
-                        <tbody>
+                        
+                        <!-- <tbody>
                           <tr>
                             <td class="lalign">Top1</td>
                             <td><img src="https://dappimg.com/media/image/dapp/e5dc6e5e94e149f6b92a63ee00e9597b.blob">Step Hero</td>
@@ -86,9 +88,33 @@
                             <td>4.6%</td>
                             <td>11.5</td>
                           </tr>
-                        </tbody>
+                        </tbody> -->
                     </table>
-                    <table id="gamefi-rank-mb" cellspacing="0">
+                    <div class="rank_data">
+                        <span>Top1.</span>
+                        <span><img src="https://dappimg.com/media/image/dapp/e5dc6e5e94e149f6b92a63ee00e9597b.blob" alt="" width="35"></span>
+                        <span class="rank_data_name">Zoo</span>
+                        <span>2.83K</span>
+                        <span>$470.67K</span>
+                        <span>18.78k</span>
+                    </div>
+                    <div class="rank_data">
+                        <span>Top2.</span>
+                        <span><img src="https://dappimg.com/media/image/dapp/e5dc6e5e94e149f6b92a63ee00e9597b.blob" alt="" width="35"></span>
+                        <span class="rank_data_name">Step Hero</span>
+                        <span>1.22K</span>
+                        <span>$309.78K</span>
+                        <span>5.48K</span>
+                    </div>
+                    <div class="rank_data">
+                        <span>Top3.</span>
+                        <span><img src="https://dappimg.com/media/image/dapp/e5dc6e5e94e149f6b92a63ee00e9597b.blob" alt="" width="35"></span>
+                        <span class="rank_data_name">ZED RUN</span>
+                        <span>1.15k</span>
+                        <span>$300.78K</span>
+                        <span>21K</span>
+                    </div>
+                    <!-- <table id="gamefi-rank-mb" cellspacing="0">
                         <thead>
                             <tr>
                               <th><span>Ranking</span></th>
@@ -104,7 +130,7 @@
                             </tr>
                             <tr>
                               <td class="lalign">Top2</td>
-                              <td><img src="https://dappimg.com/media/image/dapp/e5dc6e5e94e149f6b92a63ee00e9597b.blob">ZOO</td>
+                              <td><img src="https://dappimg.com/media/image/dapp/0e77f70b73da4289b98d2d56fb1f29e6.blob">ZOO</td>
                               <td>8.9</td>
                             </tr>
                             <tr>
@@ -123,7 +149,7 @@
                               <td>11.5</td>
                             </tr>
                           </tbody>
-                    </table>
+                    </table> -->
                 </div>
                 
             </div>
@@ -136,9 +162,18 @@
                     <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; max-width: 100%; box-shadow: 1px 1px 8px 2px grey; border-radius: 1rem;} .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed//c3955IWinD0?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
                 </div>
                 <div class="col-md-6">
-                    <div class="txt-block">
+                    <div class="txt-block" style="padding-top: 0;">
                         <h2>GameFi 熱門遊戲- Step Hero</h2>
                         <p></p>
+                        <div style="margin-bottom: 1rem;">
+                            <video muted="muted" loop="loop" autoplay="autoplay" playsinline="" id="video_0" class="rounded-tl rounded-tr" width="150" style="padding-right: 10px;">
+                                <source src="https://stephero-nft.s3.ap-southeast-1.amazonaws.com/heros/step_hero_king_arthur/step_hero_king_arthur_lv1.mp4">
+                            </video>
+                            <video muted="muted" loop="loop" autoplay="autoplay" playsinline="" id="video_1" class="rounded-tl rounded-tr" width="150" style="padding-left: 10px;">
+                                <source src="https://stephero-nft.s3.ap-southeast-1.amazonaws.com/heros/step_hero_lucifer/step_hero_lucifer.mp4">
+                            </video>
+                        </div>
+                        <a href="https://stephero.io/" class="btn-dark gamefi-go">GO</a>
                     </div>
                 </div>
             </div>
@@ -151,6 +186,11 @@
                     <div class="txt-block">
                         <h2>GameFi 熱門遊戲- DungeonSwap</h2>
                         <p></p>
+                        <div style="margin-bottom: 1rem;position: relative;">
+                            <!-- /<div class="back-deco"></div> -->
+                            <video src="https://media.dungeonswap.app/relic/video/HeavenlyGlobe.mp4" autoplay="autoplay" playsinline="" loop="" class="video" width="150"></video>
+                        </div>
+                        <a href="https://dungeonswap.app/" class="btn-dark gamefi-go">GO</a>
                     </div>
                 </div>
                 <div class="col-md-6">
@@ -169,6 +209,10 @@
                     <div class="txt-block">
                         <h2>GameFi 熱門遊戲- Project Nebula</h2>
                         <p></p>
+                        <div style="margin-bottom: 1.5rem;">
+                            <img src="https://upload.wikimedia.org/wikipedia/commons/5/58/PIA21474-CrabNebula-5Observatories-Animation.gif" alt="" width="250">
+                        </div>
+                        <a href="https://projectnebula.app/" class="btn-dark gamefi-go">GO</a>
                     </div>
                 </div>
             </div>
@@ -178,9 +222,14 @@
       <div class="container">
           <div class="row">
             <div class="col-md-6">
-              <div class="txt-block">
+              <div class="txt-block" style="text-align: center;">
                   <h2>GameFi 熱門遊戲- MOBOX</h2>
                   <p></p>
+                  <div style="margin-bottom: 1.3rem; text-align: center;">
+                    <img width="250" src="https://miro.medium.com/max/1400/1*pmfW0LOLXxjiLocCGaPuWw.gif" alt="">
+                  </div>
+                  
+                  <a href="https://mobox.io/#/" class="btn-dark gamefi-go">GO</a>
               </div>
               </div>
               <div class="col-md-6">
@@ -199,6 +248,7 @@
                 <div class="txt-block">
                     <h2>GameFi 熱門遊戲- CryptoBay</h2>
                     <p></p>
+                    <a href="https://play.cryptobay.io/" class="btn-dark gamefi-go">GO</a>
                 </div>
             </div>
         </div>

static/css/custom.css

@@ -450,6 +450,7 @@
 }
 
 .btn-dark {
+  text-decoration: none;
   color: white;
   border: 1px solid #EA5413;
   padding: 1rem 2.5rem;

static/css/customnft.css

@@ -118,9 +118,11 @@
 #gamefi-rank {
     width: 100%;
     text-align: center;
-    border-radius: 2rem;
-    box-shadow: 1px 1px 5px 1px rgba(201, 201, 201, 0.637);
+    border-radius: 5px;
+    /* box-shadow: 1px 1px 5px 1px rgba(201, 201, 201, 0.637); */
     padding: 1.5rem;
+    border-bottom: 1px solid rgb(230, 230, 230);
+    margin-bottom: 1rem;
 }
 
 @media (max-width: 576px) {
@@ -176,4 +178,43 @@
       background-image: url("https://i.imgur.com/fR4Tz5V.png");
       background-size: 3840px 66px;
       background-position: 0 0;
-  }
+  }
+
+.gamefi-go:hover {
+    text-decoration: none;
+    color: white;
+}
+
+.rank_data {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    grid-template-rows: auto;
+    padding: 1rem 0;
+    background: white;
+    box-shadow: 1px 1px 5px 1px rgba(201, 201, 201, 0.637);
+    border-radius: 1rem;
+    margin-bottom: 1rem;
+    transition: all .5s;
+}
+
+.rank_data span {
+    vertical-align: bottom;
+}
+
+.rank_data_name {
+    font-weight: 700;
+}
+
+.rank_data:hover {
+    transform: translate(-2px, -2px);
+}
+
+.back-deco {
+    position: absolute;
+    width: 150px;
+    height: 150px;
+    left: 50%;
+    top: 0;
+    background-color: hotpink;
+    z-index: 0;
+}