AI_Video_LP/layouts/shortcodes/defi.html

<div id="block-carbon">
    <section class="row sec sec01">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <div class="txt-block">
                        <h2>什麼是DeFi? DeFi101</h2>
                        <p>DeFi為去中心化金融，基於區塊鏈的去中心化金融應用擁有交易即清算、
                            抗審查、無地域限制等特性，只要有連網設備，人們就能自由享受金融服務
                            ，實現普惠金融的願景。
                        </p>
                    </div>
                </div>
                <div class="col-md-6" style="position: relative;">
                    <img src="https://i.imgur.com/2HjEBt5.png" alt="" width="250px" class="sec-right">
                    <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//IbtKtkZEhh4?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
                </div>
            </div>
        </div>
    </section>
    <section class="row sec sec02">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <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//-udbHXGkqJM?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
                </div>
                <div class="col-md-6">
                    <div class="txt-block">
                        <h2>GameFi - NFT & DeFi</h2>
                        <p>GameFi為DeFi的一個子集，DeFi 和 NFT 融合下的「遊戲化金融」概念，
                            是將金融產品以遊戲的方式呈現，將 DeFi 的規則遊戲化，遊戲道具、衍生
                            品 NFT 化，並加入傳統遊戲的對戰、社交等玩法。</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="row sec sec03">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h2>GameFi 排行(11/10 - 10/17)</h2>
                    <table id="gamefi-rank" cellspacing="0">
                        <thead>
                          <tr>
                            <th><span>Ranking</span></th>
                            <th><span>App</span></th>
                            <th><span>Name</span></th>
                            <th><span>Social Signal</span></th>
                            <th><span>Volume</span></th>
                            <th><span>Transaction</span></th>
                          </tr>
                        </thead>
                    </table>
                    <div class="rank_data">
                        <span>Top1.</span>
                        <span><img src="https://i.imgur.com/6FNNnOQ.png" alt="" width="35"></span>
                        <span class="rank_data_name">DNAxCAT</span>
                        <span>37,636</span>
                        <span>$1.27M</span>
                        <span>2.87K</span>
                    </div>
                    <div class="rank_data">
                        <span>Top2.</span>
                        <span><img src="https://i.imgur.com/jHo4KV9.png" alt="" width="35"></span>
                        <span class="rank_data_name">EpicHero</span>
                        <span>9,638</span>
                        <span>$288.09K</span>
                        <span>500</span>
                    </div>
                    <div class="rank_data">
                        <span>Top3.</span>
                        <span><img src="https://i.imgur.com/CGQ2lW3.png" alt="" width="35"></span>
                        <span class="rank_data_name">DeHero</span>
                        <span>7,985</span>
                        <span>$56.07K</span>
                        <span>3.46K</span>
                    </div>
                    <div class="rank_data">
                        <span>Top4.</span>
                        <span><img src="https://i.imgur.com/Fa7GuSK.png" alt="" width="35"></span>
                        <span class="rank_data_name">Splinterlands</span>
                        <span>36,898</span>
                        <span>$43.00K</span>
                        <span>135</span>
                    </div>
                    <div class="rank_data">
                        <span>Top5.</span>
                        <span><img src="https://i.imgur.com/K95C1q3.png" alt="" width="35"></span>
                        <span class="rank_data_name">SuperWorld</span>
                        <span>23</span>
                        <span>$32.20K</span>
                        <span>2</span>
                    </div>
                    <!-- <table id="gamefi-rank-mb" cellspacing="0">
                        <thead>
                            <tr>
                              <th><span>Ranking</span></th>
                              <th><span>App</span></th>
                              <th><span>Transaction</span></th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr>
                              <td class="lalign">Top1</td>
                              <td><img src="https://dappimg.com/media/image/dapp/e5dc6e5e94e149f6b92a63ee00e9597b.blob">Step Hero</td>
                              <td>22.2</td>
                            </tr>
                            <tr>
                              <td class="lalign">Top2</td>
                              <td><img src="https://dappimg.com/media/image/dapp/0e77f70b73da4289b98d2d56fb1f29e6.blob">ZOO</td>
                              <td>8.9</td>
                            </tr>
                            <tr>
                              <td class="lalign">Top3</td>
                              <td><img src="https://dappimg.com/media/image/dapp/e5dc6e5e94e149f6b92a63ee00e9597b.blob">DungeonSwap</td>
                              <td>12.0</td>
                            </tr>
                            <tr>
                              <td class="lalign">Top4</td>
                              <td><img src="https://dappimg.com/media/image/dapp/e5dc6e5e94e149f6b92a63ee00e9597b.blob">Project Nebula</td>
                              <td>7.0</td>
                            </tr>
                            <tr>
                              <td class="lalign">Top5</td>
                              <td><img src="https://dappimg.com/media/image/dapp/e5dc6e5e94e149f6b92a63ee00e9597b.blob">CryptoKitties</td>
                              <td>11.5</td>
                            </tr>
                          </tbody>
                    </table> -->
                </div>
                
            </div>
        </div>
    </section>
    <section class="row sec sec04">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <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" 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>
        </div>
    </section>
    <section class="row sec sec05">
        <div class="container" style="margin-top: 20px;padding-bottom: 90px;">
            <div class="row">
                <div class="col-md-6">
                    <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">
                    <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//ic5PCZnk3cg?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
                </div>
            </div>
        </div>
    </section>
    <section class="row sec sec06">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <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//pXF8nj5GTDY?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
                </div>
                <div class="col-md-6">
                    <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>
        </div>
    </section>
    <section class="row sec sec07">
      <div class="container">
          <div class="row">
            <div class="col-md-6">
              <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">
                  <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//3UU1D7MipzA?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
              </div>
          </div>
      </div>
  </section>
  <section class="row sec sec08">
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <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//PgT21sF_nXQ?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
            </div>
            <div class="col-md-6">
                <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>
    </div>
</section>
</div>