AI_Video_LP/layouts/shortcodes/metaverse.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>元宇宙101</h2>
                      <p>元宇宙是一個網絡化的虛擬現實。人們表現爲自己設計的「化身」，
                        從事世俗的和非凡的活動，像在遊戲中一樣，人們居住並控制着在空間中移動的角色。</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//8zgFttNCTHs?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//hoSKF4X5OgU?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
              </div>
              <div class="col-md-6">
                  <div class="txt-block">
                      <h2>元宇宙的中的線上演唱會</h2>
                      <p class="text-left">在元宇宙中融合VR、AR，無論正前方或左右移動，
                        可360度零死角自由觀看歌手演出，甚至飛起來到正上方看歌手頭頂，同時畫面旋轉、放大、縮小，盡在你手。</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>在元宇宙中買賣房地產</h2>
                      <p class="text-left">Decentraland是一個完全基於區塊鏈技術的虛擬世界，
                        使用者可以使用代幣買土地（land），還能創建高樓大廈、參與交易等。
                        南韓青年買不起房進攻「元宇宙」 虛擬世界買地蓋樓獲利。</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//-mnQLpA3zwE?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//QQBzJwHjMlk?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
              </div>
              <div class="col-md-6">
                  <div class="txt-block">
                      <h2>Facebook將投資5000萬美元 打造元宇宙</h2>
                      <p>Facebook（臉書）宣布，將投入5,000萬美元，以延展實境（XR）計畫與研究資金作為起點，
                          資助全球Metaverse（元宇宙）研究機構與計畫夥伴。Facebook表示，將與政府、產業與學者專
                          家合作，一起建立Metaverse平台。</p>
                  </div>
              </div>
          </div>
      </div>
  </section>
  <section class="row sec sec05">
      <div class="container mb-spec">
          <h2>元宇宙熱門遊戲</h2>
          <div class="row">
              <div class="col-md-12">
                  <div class="m-tabs">
                      <ul class="m-tabs-nav">
                        <li><a href="#tab3-1">OVR</a></li>
                        <li><a href="#tab3-2">Roblox</a></li>
                      </ul>
                      <div class="m-tabs-stage">
                        <div id="tab3-1">
                          <div class="row">
                              <div class="col-md-7">
                                  <div class="txt-block">
                                      <h2>融合 AR/VR、AI技術</h2>
                                      <p>OVR融合 AR/VR、AI 和區塊鏈技術，使用者可以用 OVR 代幣購買 OVR 土地
                                        ，成爲 OVR 地主來決定在自己的土地上構建擁有比如商店、廣告、遊戲、博物館等各
                                        種自己想要的 AR 體驗，或者租賃出售土地。</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//QQBzJwHjMlk?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>超越遊戲打造「虛擬世界」-魷魚遊戲</h2>
                                      <p>在疫情期間大受全球孩童喜愛的線上遊戲平台商Roblox，在本週遞交了IPO申請，成為繼遊戲引擎開發商Unity之後，又一枚即將於2020年上市的遊戲界新星。
                                        他們提供一個有如樂高般的遊戲開發平台，允許使用者打造各式各樣的遊戲，並在平台上與其他玩家分享銷售。<br>搭上「魷魚遊戲」熱潮，Roblox也出現眾多模擬遊戲。</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//B1Ar9GTVi4Q?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
                              </div>
                          </div>
                        </div>
                      </div>
                    </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//HZ0C0_XJioA?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
            </div>
            <div class="col-md-6">
                <div class="txt-block">
                    <h2>元宇宙常見應用場域</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>
</div>