AI_Video_LP/layouts/shortcodes/nft.html

<div id="block-nft">
    <section class="row sec sec01">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <div class="txt-block">
                        <h2>什麼是 NFT ?<br>NFT 101</h2>
                        <p>彼此雖相似，但每顆都有不一樣特質，因此無法互相取代。例如有編號的限量金銀幣、版畫、簽名球員卡等。
                            而在區塊鏈的世界，主要是在以太坊區塊鏈上，經由ERC-721智能合約發行，或在Flow區塊鏈上以NFT類型發
                            行的代幣。</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//QNMgk5jbSm4?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//NKA0GBz0ULc?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
                </div>
                <div class="col-md-6">
                    <div class="txt-block">
                        <h2>NFT 的誕生</h2>
                        <p>早在 2011 年，唯一的加密貨幣是比特幣。2017 年 6 月，John Watkinson 和 Matt Hall 在以
                            太坊區塊鏈上創建了 10 000 個獨特的卡通人物。 這是一個新奇事物，尤其是他們讓人們免費獲得角色。
                            所需要的只是以太坊錢包。所以在 2017 年 9 月，Dieter Shirley 為「不可替代的代幣」或「NFT」提出了一個新的 ERC 標準。</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="row sec sec03">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <div class="txt-block">
                        <h2>NFT 的崛起</h2>
                        <p class="text-left">Ｔwitter執行長第一則推文所有權公開拍賣，最終以得標金額高達新台幣7849萬元售出。
                            三月初由Twitter執行長傑克·多西(Jack Dorsey)以NFT形式，將
                            自己在15年前於Twitter發出的第一則推文公開拍賣，稍早確定由區塊鏈技術公司Bridge
                             Oracle 執行長西納·艾斯塔維（Sina Estavi）以1630.58以太幣得標，換算市值約為
                             275.5萬美元，約為新台幣7849萬元。</p>
                    </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//8dm14mSW5jE?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
                </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//qPkYbocQnaQ?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
                </div>
                <div class="col-md-6">
                    <div class="txt-block">
                        <h2>NFT 的優勢</h2>
                        <ul class="item rankblock advantages-list">
                            <li><span>1.</span> 好追蹤</li>
                            <li><span>2.</span> 防範偽造</li>
                            <li><span>3.</span> 流通性高</li>
                            <li><span>4.</span> 資產虛實整合</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="row sec sec05">
        <div class="container">
            <h2>NFT 的應用場域</h2>
            <div class="row">
                <div class="col-md-12">
                    <div class="nft-tabs">
                        <ul class="nft-tabs-nav">
                          <li><a href="#tab3-1">時尚娛樂產業</a></li>
                          <li><a href="#tab3-2">體育賽事</a></li>
                          <li><a href="#tab3-3">藝術作品</a></li>
                          <li><a href="#tab3-4">遊戲</a></li>
                          <li><a href="#tab3-5">音樂</a></li>
                        </ul>
                        <div class="nft-tabs-stage">
                          <div id="tab3-1">
                            <div class="row">
                                <div class="col-md-7">
                                    <div class="txt-block">
                                        <h2>LV、Burberry 精品遊戲結合NFT</h2>
                                        <p></p>
                                    </div>
                                </div>
                                <div class="col-md-5">
                                    <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//1aNzBx7I6wQ?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
                                </div>
                            </div>
                          </div>
                          <div id="tab3-2">
                            <div class="row">
                                <div class="col-md-7">
                                    <div class="txt-block">
                                        <h2>NBA 數位周邊商品結合NFT</h2>
                                        <p></p>
                                    </div>
                                </div>
                                <div class="col-md-5">
                                    <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//C1dqDa5DZ0I?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
                                </div>
                            </div>
                          </div>
                          <div id="tab3-3">
                            <div class="row">
                                <div class="col-md-7">
                                    <div class="txt-block">
                                        <h2>藝術與NFT結合</h2>
                                        <p></p>
                                    </div>
                                </div>
                                <div class="col-md-5">
                                    <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//M5BMHkX0pOw?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
                                </div>
                            </div>
                          </div>
                          <div id="tab3-4">
                            <div class="row">
                                <div class="col-md-7">
                                    <div class="txt-block">
                                        <h2>NFT遊戲 Axie Infinity 邊玩邊賺</h2>
                                        <p></p>
                                    </div>
                                </div>
                                <div class="col-md-5">
                                    <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//LKOLD4ssEIA?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
                                </div>
                            </div>
                          </div>
                          <div id="tab3-5">
                            <div class="row">
                                <div class="col-md-7">
                                    <div class="txt-block">
                                        <h2>NFT 區塊鏈上的音樂</h2>
                                        <p></p>
                                    </div>
                                </div>
                                <div class="col-md-5">
                                    <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//QVYsivxltkg?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
                                </div>
                            </div>
                          </div>
                        </div>
                      </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//PU8dTUFGh1E?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
                </div>
                <div class="col-md-6">
                    <div class="txt-block">
                        <h2>高成交價排名</h2>
                        <div class="owl-carousel project">
                            <ul class="item rankblock">
                                <li><span>No1.</span> Everydays- The First 5000 Days</li>
                                <li><span>No2.</span> CryptoPunk #3100</li>
                                <li><span>No3.</span> CryptoPunk #7804</li>
                            </ul>
                            <ul class="item rankblock">
                                <li><span>No4.</span> Crossroads</li>
                                <li><span>No5.</span> Twitter史上第一個推文</li>
                                <li><span>No6.</span> CryptoPunk #6965</li>
                            </ul>
                            <ul class="item rankblock">
                                <li><span>No7.</span> 網上遊戲Axie Infinity 內的物業</li>
                                <li><span>No8.</span> CryptoPunk #4156</li>
                                <li><span>No9.</span> Forever Rose</li>
                            </ul>
                            <ul class="item rankblock">
                                <li><span>No10.</span> Metarift</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>