nft and vtuber template

layouts/_default/taxonomy.html

@@ -166,9 +166,28 @@
             });
             }
         }
+        function nfttab () {
+            console.log('pass');
+            if(('.nft-tabs').length){
+                // Show the first tab by default
+            $('.nft-tabs-stage>div').hide();
+            $('.nft-tabs-stage>div:first').show();
+            $('.nft-tabs-nav li:first').addClass('nft-tab-active');
+
+            // Change tab class and display content
+            $('.nft-tabs-nav a').on('click', function(event){
+                event.preventDefault();
+                $('.nft-tabs-nav li').removeClass('nft-tab-active');
+                $(this).parent().addClass('nft-tab-active');
+                $('.nft-tabs-stage>div').hide();
+                $($(this).attr('href')).show();
+            });
+            }
+        }
         tab1();
         tab2();
         tab3();
+        nfttab();
     </script>
   </body>
 </html>

layouts/partials/breadcrumbs.html

@@ -1,37 +1,36 @@
 <div id="heading-breadcrumbs" style="margin-top: 64px;">
-    <span class="decor"></span>
     <div class="container">
         <div class="row">
             <div class="col-md-12">
-                <h1>{{ .Title }}</h1>
+                <h1 class="breadcrumbs_title">{{ .Title }}</h1>
             </div>
         </div>
     </div>
     <div class="container">
         <div class="row">
-            <div class="col-md-8">
+            <div class="col-md-12">
                 <div class="row">
-                    <div class="col-xs-3 col-md-3">
+                    <div class="col col-xs-3 col-md-3">
                         <a href="/tags/vtuber">VTUBER</a>
                     </div>
-                    <div class="col-xs-3 col-md-3">
+                    <div class="col  col-xs-3 col-md-3">
                         <a href="/tags/nft">NFT</a>
                     </div>
-                    <div class="col-xs-3 col-md-3">
+                    <div class="col col-xs-3 col-md-3">
                         <a>CLIMATE CHANGE</a>
                     </div>
-                    <div class="col-xs-3 col-md-3">
+                    <div class="col col-xs-3 col-md-3">
                         <a href="/tags/text-to-speech">TEXT-TO-SPEECH</a>
                     </div>
                 </div>
             </div>
-            <div class="col-md-4 blog_social">
+            <!-- <div class="col-md-4 blog_social">
                 <a href="https://www.linkedin.com/company/choozmo/"><img src="https://i.imgur.com/u2MFY3U.png" alt=""></a>
                 <a href="https://www.instagram.com/choozmo_cmm/"><img src="https://i.imgur.com/LNAJtkO.png" alt=""></a>
                 <a href="https://twitter.com/ai_cmm"><img src="https://i.imgur.com/ImYZfgI.png" alt=""></a>
                 <a href="https://www.youtube.com/channel/UCi3jHOCCmx0Zyl2ZvoHzHQg"><img src="https://i.imgur.com/A8EG8wf.png" width="32" height="32" alt=""></a>
                 <a href="https://www.facebook.com/choozmo/"><img src="https://i.imgur.com/0t496B3.png"></a>
-            </div>
+            </div> -->
         </div>
     </div>
 </div>

layouts/partials/head.html

@@ -36,6 +36,7 @@
 
   <!-- Custom stylesheet - for your changes -->
   <link href="{{ "css/custom.css" | relURL}}" rel="stylesheet">
+  <link href="{{ "css/customnft.css" | relURL}}" rel="stylesheet">
 
   <!-- Responsivity for older IE -->
   {{ `

layouts/shortcodes/nft.html

@@ -0,0 +1,195 @@
+<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>

layouts/shortcodes/vtuber.html

@@ -177,6 +177,8 @@
         </div>
     </section>
     <section class="row sec sec06">
+        <img src="https://i.imgur.com/2HjEBt5.png" alt="" width="250px" class="sec06-left">
+        <img src="https://i.imgur.com/2932J5G.png" alt="" width="250px" class="sec06-right">
         <div class="container">
             <h2 class="grow_title">How to Promote Your VTuber Channel</h2>
             <p class="grow_txt">ChoozMo support Virtual YouTuber/Influencer digital marketing and fan growth strategy.<br>
@@ -185,7 +187,11 @@
                 presenter to say anything! Any language!</p>
             <span class="grow_call">Optimize your VTuber Channel</span>
             <a class="grow_btn" href="https://docs.google.com/forms/d/e/1FAIpQLSfmkiBSQn5SZtZ3Wulq2O7D-XtYcf_9mlu35lrJp9Tq-mIa9Q/viewform">Grow Fans Now ! </a>
-            <img src="/img/browsing.svg" alt="" class='grow_img' width="80">
+            <div class="sec06-icons">
+                <img src="/img/Icon awesome-play.png" alt="" width="15">
+                <img src="/img/Group 946.png" alt="" width="15">
+                <img src="/img/Group 947.png" alt="" width="20">
+            </div>
         </div>
     </section>
     <section class="row sec sec05">

static/css/custom.css

@@ -2,6 +2,9 @@
 .text-center {
   text-align: center;
 }
+.text-left {
+  text-align: left;
+}
 /* LP-components nav */
 #navigation .navbar-nav .main-link {
   background-color: white;
@@ -15,7 +18,7 @@
 }
 
 #navigation .navbar-nav .dropdown.active .main-link {
-  border-bottom: 3px solid #EA5413
+  border-bottom: 3px solid #EA5413;
 }
 
 #navigation .navbar-nav .signin-link {
@@ -759,7 +762,7 @@
 }
 
 .project {
-  max-height: 15rem;
+  max-height: 16rem;
 }
 
 .project .owl-pagination {
@@ -987,6 +990,39 @@
 .sec06 {
   text-align: center;
   padding: 2rem 0;
+  position: relative;
+  color: black;
+}
+
+.sec06-left {
+  position: absolute;
+  left: 2rem;
+  top: -10rem;
+}
+
+.sec06-right {
+  position: absolute;
+  right: 2rem;
+  bottom: 5rem;
+}
+
+.sec06 > .container {
+  box-shadow: 0px 0px 8px 2px rgb(212, 212, 212);
+  transform: translateY(-12rem);
+  background-color: white;
+  padding: 3rem 0;
+  padding-bottom: 7rem;
+  position: relative;
+}
+
+.sec06 .sec06-icons {
+  position: absolute;
+  left: 4rem;
+  bottom: 2rem;
+}
+
+.sec06 .sec06-icons img {
+  margin-right: 1rem;
 }
 
 .grow_title {
@@ -1004,6 +1040,7 @@
   display: block;
   margin-top: 1.5rem;
   margin-bottom: 1rem;
+  color: #EA5413;
 }
 
 .grow_btn {
@@ -1036,6 +1073,14 @@
   overflow: hidden;
 }
 
+.advantages-list {
+  text-align: left;
+}
+
+.txt-block .advantages-list span {
+  text-align: center;
+}
+
 
 @media (max-width: 992px) {
   .sec-steps .steps-block {
@@ -1199,6 +1244,7 @@
 
   #heading-breadcrumbs {
     margin-bottom: 0;
+    background: white, url('https://i.imgur.com/N7tVTSh.png');
   }
   #block-vtuber {
     padding: 0;
@@ -1251,7 +1297,6 @@
 
 
 .btn:hover {
-  background-color: #181c47;
   color: white;
 }
 

static/css/customnft.css

@@ -0,0 +1,77 @@
+#block-nft {
+    padding: 30px 0;
+    margin-bottom: 40px;
+    font-family: "Proxima Nova",sans-serif;
+    color: #181c47;}
+  
+#block-nft h2 {
+    font-family: 'Poppins', sans-serif;
+    font-weight: bolder;
+    font-size: 3.7rem;
+}
+  
+#block-nft p {
+    font-size: 1.8rem;
+    line-height: 3rem;
+}
+
+#block-nft {
+    padding: 0;
+}
+
+#block-nft .v-tabs-stage h2 {
+    font-size: 2.5rem;
+}
+  
+#block-nft .v-tabs .owl-page span {
+    background: #EA5413;
+}
+
+#block-nft .sec05 {
+    background-color: white;
+}
+
+.sec05::after {
+    display: none;
+}
+
+.nft-tabs {
+    max-width: 100%;
+}
+.nft-tabs-nav li {
+    float: left;
+    width: 18%;
+    list-style: none;
+    margin: 0 1%;
+}
+.nft-tabs-nav li a {
+    color: #EA5413;
+    font-size: 2.5rem;
+    letter-spacing: 2px;
+    display: block;
+    font-weight: 600;
+    padding: 10px 0;
+    text-align: center;
+    text-decoration: none;
+    border: 1px solid #EA5413;
+    border-radius: 10rem;
+}
+.nft-tabs-nav li a:hover {
+    color: white;
+    background-color: #EA5413;
+}
+.nft-tabs-nav li.nft-tab-active a {
+    color: white;
+    background-color: #EA5413;
+}
+.nft-tabs-stage  {
+    clear: both;
+    padding: 40px 30px 10px 30px;
+    position: relative;
+    top: -1px;
+    text-align: left;
+}
+
+#block-nft .nft-tabs-stage h2 {
+    font-size: 2.5rem;
+}

static/css/style.default.css

@@ -1731,13 +1731,30 @@ fieldset[disabled] .btn-template-primary.active {
   border: none;
 }
 #heading-breadcrumbs {
-  background: #FFEBE2;
+  background: url('https://i.imgur.com/N7tVTSh.png');
   padding: 0 0;
+  background-size: cover;
+  background-repeat: no-repeat;
+  padding-bottom: 20px;
   margin-bottom: 40px;
   text-align: center;
   position: relative;
 }
 
+#heading-breadcrumbs .breadcrumbs_title {
+  position: relative;
+}
+
+#heading-breadcrumbs .breadcrumbs_title::after {
+  position: absolute;
+  width: 6rem;
+  height: .5rem;
+  top: 120%;
+  left: 48%;
+  content: "";
+  background-color: #EA5413;
+}
+
 #heading-breadcrumbs .blog_social {
   display: flex;
   align-items: center;
@@ -1753,21 +1770,43 @@ fieldset[disabled] .btn-template-primary.active {
 #heading-breadcrumbs .container:nth-of-type(2) {
   padding-top: 10px;
   padding-bottom: 10px;
-  border-top: 1px solid rgb(206, 206, 206);
   font-size: 1.8rem;
 }
 
-#heading-breadcrumbs .container:nth-of-type(2) a {
-  color: #181c47;
+#heading-breadcrumbs .col {
+  position: relative;
 }
 
-#heading-breadcrumbs .decor {
+#heading-breadcrumbs .col::before {
   position: absolute;
-  height: 65px;
-  width: 210px;
+  content: '';
+  width: 100%;
+  height: 100%;
+  border-left: 1px solid black;
+  left: 0;
   top: 0;
-  left: 5rem;
-  background: url('https://animoto.com/static/PinkRedTopLeft-42f195470b381165d4626a5adce05837.svg') no-repeat;
+  z-index: -1;
+}
+
+#heading-breadcrumbs .col:last-of-type::after {
+  position: absolute;
+  content: '';
+  width: 100%;
+  height: 100%;
+  border-right: 1px solid black;
+  left: 0;
+  top: 0;
+  z-index: -1;
+}
+
+@media (min-width: 1200px){
+  #heading-breadcrumbs .container:nth-of-type(2)  {
+      max-width: 60%;
+  }
+}
+
+#heading-breadcrumbs .container:nth-of-type(2) a {
+  color: #181c47;
 }
 
 #heading-breadcrumbs.no-mb {

webSite/content/tags/nft/_index.md

@@ -0,0 +1,6 @@
++++
+title = "NFT Cover Story"
+date = "2021-07-23T12:27:12+08:00"
++++
+
+{{< nft >}}