vtuber template

layouts/_default/taxonomy.html

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

layouts/partials/breadcrumbs.html

@@ -21,7 +21,7 @@
                         <a>AUTO CONTENT CREATION</a>
                     </div>
                     <div class="col-xs-3 col-md-3">
-                        <a>FINTECH</a>
+                        <a>NFT</a>
                     </div>
                 </div>
             </div>

layouts/shortcodes/vtuber.html

@@ -25,22 +25,22 @@
                         <h2>Top Vtuber</h2>
                         <div class="owl-carousel project">
                             <ul class="item rankblock">
-                                <li><span>No1.</span> Gawr Gura</li>
-                                <li><span>No2.</span> Inugami Korone </li>
-                                <li><span>No3.</span> Usada Pekora </li>
+                                <li><span>No1.</span> Gawr Gura / がうる・ぐら</li>
+                                <li><span>No2.</span> Inugami Korone / 戌神ころね</li>
+                                <li><span>No3.</span> Usada Pekora / 兎田ぺこら</li>
                             </ul>
                             <ul class="item rankblock">
-                                <li><span>No4.</span> Mori Calliope</li>
-                                <li><span>No5.</span> Shirakami Fubuki</li>
-                                <li><span>No6.</span> Houshou Marine </li>
+                                <li><span>No4.</span> Mori Calliope / もりかりおぺ</li>
+                                <li><span>No5.</span> Shirakami Fubuki / 白上フブキ</li>
+                                <li><span>No6.</span> Houshou Marine / 宝鐘マリン</li>
                             </ul>
                             <ul class="item rankblock">
-                                <li><span>No7.</span> Kiryu Coco</li>
-                                <li><span>No8.</span> Watson Amelia</li>
-                                <li><span>No9.</span> Minato Aqua</li>
+                                <li><span>No7.</span> Kiryu Coco / 桐生ココ</li>
+                                <li><span>No8.</span> Watson Amelia / ワトソン・アメリア</li>
+                                <li><span>No9.</span> Minato Aqua / 湊あくあ</li>
                             </ul>
                             <ul class="item rankblock">
-                                <li><span>No10.</span> Uruha Rushi</li>
+                                <li><span>No10.</span> Uruha Rushi / 羽るしあ</li>
                             </ul>
                         </div>
                     </div>
@@ -58,6 +58,7 @@
                           <li><a href="#tab-1">日本</a></li>
                           <li><a href="#tab-2">歐美</a></li>
                           <li><a href="#tab-3">印尼</a></li>
+                          <li><a href="#tab-4">台灣</a></li>
                         </ul>
                         <div class="v-tabs-stage">
                           <div id="tab-1">
@@ -65,7 +66,7 @@
                                 <div class="col-md-7">
                                     <div class="txt-block">
                                         <h2>Kizuna AI キズナアイ</h2>
-                                        <p>絆愛（日語：キズナアイ；英語：Kizuna AI）是一個日本虛擬偶像、影音部落客，經營有YouTube頻道「A.I.Channel」和「A.I.Games」，也是公認的第一個虛擬YouTuber</p>
+                                        <p>絆愛（日語：キズナアイ；英語：Kizuna AI）是一個日本虛擬偶像、影音部落客，經營有YouTube頻道「A.I.Channel」和「A.I.Games」，也是公認的第一個虛擬YouTuber，頻道訂閱數超過400多萬。</p>
                                     </div>
                                 </div>
                                 <div class="col-md-5">
@@ -79,7 +80,7 @@
                                     <div class="col-md-7">
                                         <div class="txt-block">
                                             <h2>Ami Yamato</h2>
-                                            <p>Ami Yamato是一位來自日本居住在倫敦的女性，影片以Vlog的形式呈現，紀錄她生活的點滴，視頻中還經常有真人坐在她的旁邊。</p>
+                                            <p>Ami Yamato是一位來自日本居住在倫敦的女性，影片以Vlog的形式呈現，紀錄她生活的點滴，視頻中還經常有真人坐在她的旁邊並進行合作，或是與影星於電視劇中對談，充分融入現實的生活情景中。</p>
                                         </div>
                                     </div>
                                     <div class="col-md-5">
@@ -90,7 +91,7 @@
                                     <div class="col-md-7">
                                         <div class="txt-block">
                                             <h2>Miquela</h2>
-                                            <p>來自洛杉磯，現年19歲的Lil Miquela便是其中佼佼者。擁有巴西與西班牙血統，Lil Miquela總是跟上最新趨勢的時髦穿搭，齊瀏海、雀斑與雙包包頭的個性造型，吸引了超過百萬的全球追蹤者關注。</p>
+                                            <p>來自洛杉磯，現年19歲的Lil Miquela便是其中佼佼者。擁有巴西與西班牙血統，Lil Miquela總是跟上最新趨勢的時髦穿搭，齊瀏海、雀斑與雙包包頭的個性造型，吸引了超過百萬的全球追蹤者關注，自2016年在Instagram出道以來，已在全球累積超過160萬追蹤者。</p>
                                         </div>
                                     </div>
                                     <div class="col-md-5">
@@ -104,11 +105,24 @@
                                 <div class="col-md-7">
                                     <div class="txt-block">
                                         <h2>Hololive Vtuber 練習生</h2>
-                                        <p>日本 Vtuber 公司 HoloLive，往全球開始拓展，HoloLive印尼第一期生相當成功，因此也推出了二期生，在二期生當中，Kureiji Ollie已達74萬訂閱。</p>
+                                        <p>日本 Vtuber 公司 HoloLive，往全球開始拓展，HoloLive印尼第一期生相當成功，一期生有Airani Iofifteen, AyundaRisu, MoonaHoshinova ，因此也推出了二期生，在二期生當中，PavoliaReine, AnyaMelfissa 及 Kureiji Ollie，其中Kureiji Ollie已達74萬訂閱。</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//IzHhpC_bD6g?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
+                                    <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//2zc9Cj6ZZN8?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
+                                </div>
+                            </div>
+                          </div>
+                          <div id="tab-4">
+                            <div class="row">
+                                <div class="col-md-7">
+                                    <div class="txt-block">
+                                        <h2>台灣熱議 VTuber</h2>
+                                        <p>日本 Vtuber 公司 HoloLive，往全球開始拓展，HoloLive印尼第一期生相當成功，一期生有Airani Iofifteen, AyundaRisu, MoonaHoshinova ，因此也推出了二期生，在二期生當中，PavoliaReine, AnyaMelfissa 及 Kureiji Ollie，其中Kureiji Ollie已達74萬訂閱。</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//2zc9Cj6ZZN8?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
                                 </div>
                             </div>
                           </div>
@@ -134,7 +148,7 @@
                                 <div class="col-md-7">
                                     <div class="txt-block">
                                         <h2>企業形象VTuber</h2>
-                                        <p>各企業也紛紛推出VTuber，Netflix推出N子黑野明擔任宣傳大使。樂敦製藥與三得利也皆推出VTuber，茨城縣則由VTuber擔任形象大使。</p>
+                                        <p>各企業也紛紛推出VTuber，Netflix推出N子黑野明擔任宣傳大使，可以說英日兩種語言，並且擔任Netflix動畫情報的專員。雅虎擔任也推出兩位虛擬網紅虎妮與杏仁咪魯，樂敦製藥與三得利也皆推出VTuber，茨城縣則由VTuber擔任形象大使。</p>
                                     </div>
                                 </div>
                                 <div class="col-md-5">
@@ -147,7 +161,51 @@
                                 <div class="col-md-7">
                                     <div class="txt-block">
                                         <h2>非人像玩偶VTuber</h2>
-                                        <p>風靡全球的三麗鷗招牌萌貓 Hello Kitty，在2018年正式出道，當起了 VTuber。除此之外，花生君是另一特別 VTuber，是個外型特殊的花生。</p>
+                                        <p>風靡全球的三麗鷗招牌萌貓 Hello Kitty，在2018年正式出道，當起了 VTuber，由於 Hello Kitty本身的高人氣，一開台即吸引了上萬人訂閱，目前已有將近三十萬人訂閱。除此之外，花生君是另一特別 VTuber，是個外型特殊的花生，醜中帶可愛的外型，也吸引了十二萬訂閱數。</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//uwUVb7jPMJo?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
+                                </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <section class="row sec sec05">
+        <img src="/img/browsing.svg" alt="" class='img_decor' width="120">
+        <div class="container">
+            <h2>VTuber製作軟體</h2>
+            <div class="row">
+                <div class="col-md-12">
+                    <div class="m-tabs">
+                        <ul class="m-tabs-nav">
+                          <li><a href="#tab3-1">免費</a></li>
+                          <li><a href="#tab3-2">付費</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>VTuber免費製作軟體</h2>
+                                        <p>各企業也紛紛推出VTuber，Netflix推出N子黑野明擔任宣傳大使，可以說英日兩種語言，並且擔任Netflix動畫情報的專員。雅虎擔任也推出兩位虛擬網紅虎妮與杏仁咪魯，樂敦製藥與三得利也皆推出VTuber，茨城縣則由VTuber擔任形象大使。</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//QIbinFBjJxA?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>VTuber付費製作軟體</h2>
+                                        <p>風靡全球的三麗鷗招牌萌貓 Hello Kitty，在2018年正式出道，當起了 VTuber，由於 Hello Kitty本身的高人氣，一開台即吸引了上萬人訂閱，目前已有將近三十萬人訂閱。除此之外，花生君是另一特別 VTuber，是個外型特殊的花生，醜中帶可愛的外型，也吸引了十二萬訂閱數。</p>
                                     </div>
                                 </div>
                                 <div class="col-md-5">

static/css/custom.css

@@ -438,7 +438,7 @@
   /* clip-path: polygon(0% -10%, 100% 0%, 110% 100%, 0% 100%); */
 }
 
-.sec03, .sec04 {
+.sec03, .sec04, .sec05 {
   text-align: center;
   padding: 12rem 0;
 }
@@ -477,6 +477,18 @@
     background-position: 0 0;
 }
 
+.sec05 {
+  position: relative;
+  padding-top: 0;
+  padding-bottom: 4rem;
+}
+
+.img_decor {
+  position: absolute;
+  left: 4rem;
+  top: 1rem;
+}
+
 .project {
   max-height: 15rem;
 }
@@ -585,7 +597,7 @@
 }
 .v-tabs-nav li {
   float: left;
-  width: 33.3%;
+  width: 25%;
   list-style: none;
 }
 .v-tabs-nav li a {
@@ -658,6 +670,45 @@
   font-size: 2.5rem;
 }
 
+.m-tabs {
+  max-width: 100%;
+}
+.m-tabs-nav li {
+  float: left;
+  width: 50%;
+  list-style: none;
+}
+.m-tabs-nav li a {
+  color: #23408c;
+  font-size: 2.5rem;
+  letter-spacing: 2px;
+  display: block;
+  font-weight: 600;
+  padding: 10px 0;
+  text-align: center;
+  text-decoration: none;
+}
+.m-tabs-nav li a:hover {
+  color: black;
+}
+.m-tab-active a {
+  background: #fff;
+  border-bottom: 2px solid #23408c;
+  color: #2db34a;
+  cursor: default;
+}
+.m-tabs-stage {
+  clear: both;
+  padding: 40px 30px 10px 30px;
+  position: relative;
+  top: -1px;
+  text-align: left;
+}
+
+#block-vtuber .m-tabs-stage h2 {
+  font-size: 2.5rem;
+}
+