5g template

layouts/shortcodes/5G.html

@@ -0,0 +1,73 @@
+<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>5G 101</h2>
+                      <p>5G，全名為「第五代行動通訊網路」，是目前 4G 通訊技術成熟後，對下一代網
+                        路技術的統稱， 5G 網速當然更快、延遲更短暫、連結更廣泛。若把網路比做公路，
+                        現況每逢連假就爆塞，但 5G 公路有 400 線道，不管再高車流量時速都可維持
+                        120 以上，上下交流道不必減速。</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//YzfCsOFLREU?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
+              </div>
+          </div>
+      </div>
+  </section>
+  <section class="row sec sec02 sec-5g">
+      <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//NWyxxTfBAmA?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
+              </div>
+              <div class="col-md-6">
+                  <div class="txt-block">
+                      <h2>5G V.S. 4G</h2>
+                      <ul class="item rankblock advantages-list">
+                        <li><span><img src="https://i.imgur.com/pUidtRX.png" alt="" width="30"></span> 高速率</li>
+                        <li><span><img src="https://i.imgur.com/pUidtRX.png" alt="" width="30"></span> 低延遲</li>
+                        <li><span><img src="https://i.imgur.com/pUidtRX.png" alt="" width="30"></span> 可串連物聯網</li>
+                    </ul>
+                  </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>5G應用-- 智慧商店</h2>
+                      <p class="text-left">全家便利商店在智慧零售上持續發展，第二家科技概念店（簡稱二號店）
+                        亮相，結合自助結帳、5G、自助咖啡機、IoT、智慧販賣機等科技，試圖帶來新的超商消費體驗。</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//C0EHKQX-B4M?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//iZxOOUPWL-Q?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
+              </div>
+              <div class="col-md-6">
+                  <div class="txt-block">
+                      <h2>5G應用-- 影音娛樂</h2>
+                      <p>5G伴隨著新型表演型態產生，經由技術人員展示，可以看到VR裝置在手中的搖桿，變成了魔幻畫筆創造出各種視覺效果，透過5G技術就能夠同步結合舞台。
+                        透過各種科技技術的整合，包括AI、Bigdata、Cloud，打造出各種不同場域的需求。 
+                       </p>
+                  </div>
+              </div>
+          </div>
+      </div>
+  </section>
+</div>

static/css/customnft.css

@@ -228,6 +228,15 @@
     z-index: 0;
 }
 
+.sec-5g .advantages-list {
+    text-align: start;
+}
+
+.sec-5g .txt-block .rankblock span {
+    background-color: transparent;
+    color: transparent;
+}
+
 @media (max-width: 576px) {
     .nft-tabs-nav li a {
         color: #EA5413;

webSite/content/tags/5G/_index.md

@@ -0,0 +1,6 @@
++++
+title = "5G Issue"
+date = "2021-07-23T12:27:12+08:00"
++++
+
+{{< 5G >}}