Halaman utama Jelajahi Bantuan
Daftar Masuk
choozmo
/
AI_Video_LP
4
0
Fork 0
Berkas Masalah 0 Permintaan Tarik 0 Wiki
Jelajahi Sumber

update index

SyuanYu 2 tahun lalu
induk
c65c1a9827
melakukan
2b6c88ad96
44 mengubah file dengan 1549 tambahan dan 132 penghapusan
Tampilan Split Tampilkan Statistik Diff
  1. 1 1
      layouts/DM/single.html
  2. 1 1
      layouts/ai-training/single.html
  3. 1 1
      layouts/amp/single.html
  4. 1 1
      layouts/bigdata/single.html
  5. 1 1
      layouts/crawler/single.html
  6. 87 69
      layouts/index.html
  7. 1 1
      layouts/ip/single.html
  8. 21 21
      layouts/partials/LP_components/hero.html
  9. 22 0
      layouts/partials/components/carousel.html
  10. 81 0
      layouts/partials/components/head.html
  11. 120 0
      layouts/partials/components/main.html
  12. 73 0
      layouts/partials/components/nav.html
  13. 22 0
      layouts/partials/components/scripts.html
  14. 236 0
      layouts/partials/components/serve.html
  15. 1 1
      layouts/partials/nav.html
  16. 1 1
      layouts/partials/navbar.html
  17. 13 6
      layouts/partials/scripts.html
  18. 1 1
      layouts/research/single.html
  19. 1 1
      layouts/trends/single.html
  20. 1 1
      layouts/video-making/single.html
  21. 9 2
      layouts/youtube-views-zh/single.html
  22. 3 3
      static/css/custom.css
  23. 426 5
      static/css/style.css
  24. 0 0
      static/css/style.css.map
  25. 424 8
      static/css/style.scss
  26. TEMPAT SAMPAH
      static/imgs/home/icon-01.png
  27. TEMPAT SAMPAH
      static/imgs/home/icon-02.png
  28. TEMPAT SAMPAH
      static/imgs/home/icon-03.png
  29. TEMPAT SAMPAH
      static/imgs/home/橫幅廣告-01.png
  30. TEMPAT SAMPAH
      static/imgs/home/橫幅廣告-02.png
  31. TEMPAT SAMPAH
      static/imgs/home/橫幅廣告-03.png
  32. TEMPAT SAMPAH
      static/imgs/home/裝飾-01.png
  33. TEMPAT SAMPAH
      static/imgs/home/裝飾-02.png
  34. TEMPAT SAMPAH
      static/imgs/home/裝飾-03.png
  35. TEMPAT SAMPAH
      static/imgs/home/裝飾-04.png
  36. TEMPAT SAMPAH
      static/imgs/home/首頁-01.png
  37. TEMPAT SAMPAH
      static/imgs/home/首頁-02.png
  38. TEMPAT SAMPAH
      static/imgs/home/首頁-03.png
  39. TEMPAT SAMPAH
      static/imgs/home/首頁-04-mb.png
  40. TEMPAT SAMPAH
      static/imgs/home/首頁-04.png
  41. TEMPAT SAMPAH
      static/imgs/home/首頁-05.png
  42. TEMPAT SAMPAH
      static/imgs/home/首頁-06.png
  43. TEMPAT SAMPAH
      static/imgs/home/首頁-07.png
  44. 1 7
      webSite/config.toml

+ 1 - 1
layouts/DM/single.html
Tampilan Berkas 

@@ -57,7 +57,7 @@
 
                 <div class="col-12 col-md-7">
 
                     <div class="header-right header-dm" style="background-image: url('{{ .Params.packageBg }}');">
 
                         <img src="/imgs/02.webp" alt="" class="header-right-cir">
 
-                        <!-- <img src="imgs/影片.webp" alt="" class="header-right__video"> -->
 
+                        <!-- <img src="imgs/影片.webp" alt="" class="header-right-video"> -->
 
                         <img class="header-right-magnifier" src="/imgs/放大鏡.webp" alt="">
 
                         <img class="header-right-bubble" src="/imgs/對話.webp" alt="">
 
                         <img class="header-right-linecir" src="/imgs/裝飾圓.webp" alt="">

+ 1 - 1
layouts/ai-training/single.html
Tampilan Berkas 

@@ -33,7 +33,7 @@
 
           <div class="header-right header-dm text-center" style="background-image: none;">
 
             <img src="/imgs/dm/dm_ai-training.png" alt="" style="width: 70%;">
 
             <img src="/imgs/02.webp" alt="" class="header-right-cir">
 
-            <!-- <img src="imgs/影片.webp" alt="" class="header-right__video"> -->
 
+            <!-- <img src="imgs/影片.webp" alt="" class="header-right-video"> -->
 
           </div>
 
         </div>
 
       </div>

+ 1 - 1
layouts/amp/single.html
Tampilan Berkas 

@@ -127,7 +127,7 @@
 
                 <div class="col-12 col-md-7">
 
                     <div class="header-right header-dm" style="background-image: url('/imgs/dm/dm_computer.jpeg');">
 
                         <img src="/imgs/02.webp" alt="" class="header-right-cir">
 
-                        <!-- <img src="imgs/影片.webp" alt="" class="header-right__video"> -->
 
+                        <!-- <img src="imgs/影片.webp" alt="" class="header-right-video"> -->
 
                         <img class="header-right-bubble" src="/imgs/對話.webp" alt="">
 
                         <img class="header-right-linecir" src="/imgs/裝飾圓.webp" alt="">
 
                     </div>

+ 1 - 1
layouts/bigdata/single.html
Tampilan Berkas 

@@ -80,7 +80,7 @@
 
         <div class="col-12 col-md-7">
 
           <div class="header-right header-dm" style="background-image: url('/imgs/dm/dm_data.jpeg');">
 
             <img src="/imgs/02.webp" alt="" class="header-right-cir">
 
-            <!-- <img src="imgs/影片.webp" alt="" class="header-right__video"> -->
 
+            <!-- <img src="imgs/影片.webp" alt="" class="header-right-video"> -->
 
             <img class="header-right-bubble" src="/imgs/對話.webp" alt="">
 
             <img class="header-right-linecir" src="/imgs/裝飾圓.webp" alt="">
 
           </div>

+ 1 - 1
layouts/crawler/single.html
Tampilan Berkas 

@@ -80,7 +80,7 @@
 
         <div class="col-12 col-md-7">
 
           <div class="header-right header-dm" style="background-image: url('/imgs/dm/dm_crawler.png');">
 
             <img src="/imgs/02.webp" alt="" class="header-right-cir">
 
-            <!-- <img src="imgs/影片.webp" alt="" class="header-right__video"> -->
 
+            <!-- <img src="imgs/影片.webp" alt="" class="header-right-video"> -->
 
             <img class="header-right-bubble" src="/imgs/對話.webp" alt="">
 
             <img class="header-right-linecir" src="/imgs/裝飾圓.webp" alt="">
 
           </div>

+ 87 - 69
layouts/index.html
Tampilan Berkas 

@@ -1,77 +1,87 @@
 
 <!DOCTYPE html>
 
 <html lang="{{ .Site.LanguageCode }}">
 
 
-  {{ partial "head.html" . }}
 
-  <!-- Start of HubSpot Embed Code -->
 
-  <script type="text/javascript" id="hs-script-loader" async defer src="//js-na1.hs-scripts.com/20485755.js"></script>
 
-  <!-- End of HubSpot Embed Code -->  
+{{ partial "components/head.html" . }}
 
+<!-- Start of HubSpot Embed Code -->
 
+<script type="text/javascript" id="hs-script-loader" async defer src="//js-na1.hs-scripts.com/20485755.js"></script>
 
+<!-- End of HubSpot Embed Code -->
 
 
-  <body>
 
+<body>
 
 
-    <div id="all" style="overflow-x:hidden;">
 
+  <div id="all" style="overflow: hidden;">
 
 
-        {{ partial "nav.html" . }}
 
+    {{ partial "components/nav.html" . }}
 
 
-       {{ partial "LP_components/hero.html" . }} 
+    <div id="home">
 
+      {{ partial "components/carousel.html" . }}
 
+      {{ partial "components/main.html" . }}
 
+      {{ partial "components/serve.html" . }}
 
+      {{ partial "LP_components/blogs_tab.html" . }}
 
+      {{ partial "LP_components/Footer.html" . }}
 
+    </div>
 
 
-       {{ partial "LP_components/video.html" . }} 
+    <!-- {{ partial "nav.html" . }}
 
 
-       {{ partial "LP_components/use_cases.html" . }}
 
+    {{ partial "LP_components/hero.html" . }}
 
 
-       {{ partial "LP_components/steps.html" . }}
 
+    {{ partial "LP_components/video.html" . }}
 
 
-       {{ partial "LP_components/features.html" . }}
 
+    {{ partial "LP_components/use_cases.html" . }}
 
 
-       {{ partial "LP_components/blogs_tab.html" . }}
 
+    {{ partial "LP_components/steps.html" . }}
 
 
-       {{ partial "LP_components/action.html" . }}
 
+    {{ partial "LP_components/features.html" . }}
 
 
-       {{ partial "LP_components/Footer.html" . }}
 
+    {{ partial "LP_components/blogs_tab.html" . }}
 
 
-       {{ partial "LP_components/news.html" . }}
 
+    {{ partial "LP_components/action.html" . }}
 
 
-    </div>
 
-    <!-- /#all -->
 
-
 
-    {{ partial "scripts.html" . }}
 
-    <script>
 
-      function tabLP () {
 
-            if(('.m-tabs').length){
 
-                  // Show the first tab by default
 
-              $('.blog-tabs-stage>div').hide();
 
-              $('.blog-tabs-stage>div:first').show();
 
-              $('.blog-tabs-nav li:first').addClass('blog-tab-active');
 
-
 
-              // Change tab class and display content
 
-              $('.blog-tabs-nav a').on('click', function(event){
 
-                  event.preventDefault();
 
-                  $('.blog-tabs-nav li').removeClass('blog-tab-active');
 
-                  $(this).parent().addClass('blog-tab-active');
 
-                  $('.blog-tabs-stage>div').hide();
 
-                  $($(this).attr('href')).show();
 
-              });
 
-            }
 
-        }
 
-        tabLP();
 
-
 
-        function debounce(func, wait = 20, immediate = true) {
 
-          var timeout;
 
-          return function() {
 
-            var context = this, args = arguments;
 
-            var later = function() {
 
-              timeout = null;
 
-              if (!immediate) func.apply(context, args);
 
-            };
 
-            var callNow = immediate && !timeout;
 
-            clearTimeout(timeout);
 
-            timeout = setTimeout(later, wait);
 
-            if (callNow) func.apply(context, args);
 
-          };
 
+    {{ partial "LP_components/Footer.html" . }}
 
+
 
+    {{ partial "LP_components/news.html" . }} -->
 
+
 
+  </div>
 
+  <!-- /#all -->
 
+
 
+  {{ partial "components/scripts.html" . }}
 
+  <script>
 
+    function tabLP() {
 
+      if (('.m-tabs').length) {
 
+        // Show the first tab by default
 
+        $('.blog-tabs-stage>div').hide();
 
+        $('.blog-tabs-stage>div:first').show();
 
+        $('.blog-tabs-nav li:first').addClass('blog-tab-active');
 
+
 
+        // Change tab class and display content
 
+        $('.blog-tabs-nav a').on('click', function (event) {
 
+          event.preventDefault();
 
+          $('.blog-tabs-nav li').removeClass('blog-tab-active');
 
+          $(this).parent().addClass('blog-tab-active');
 
+          $('.blog-tabs-stage>div').hide();
 
+          $($(this).attr('href')).show();
 
+        });
 
+      }
 
+    }
 
+    tabLP();
 
+
 
+    function debounce(func, wait = 20, immediate = true) {
 
+      var timeout;
 
+      return function () {
 
+        var context = this, args = arguments;
 
+        var later = function () {
 
+          timeout = null;
 
+          if (!immediate) func.apply(context, args);
 
+        };
 
+        var callNow = immediate && !timeout;
 
+        clearTimeout(timeout);
 
+        timeout = setTimeout(later, wait);
 
+        if (callNow) func.apply(context, args);
 
       };
 
-      const featuresBlock = document.querySelectorAll('.features-block');
 
-      const featuresRow = document.querySelectorAll('.sec-features .row');
 
-      function checkSlide() {
 
-        featuresRow.forEach((block, i) => {
 
+    };
 
+    const featuresBlock = document.querySelectorAll('.features-block');
 
+    const featuresRow = document.querySelectorAll('.sec-features .row');
 
+    function checkSlide() {
 
+      featuresRow.forEach((block, i) => {
 
         // half way through the image
 
         const slideInAt = (window.scrollY + window.innerHeight) - block.offsetHeight / 2;
 
         // bottom of the image
 
@@ -81,15 +91,23 @@
 
           featuresBlock[i].classList.add('active');
 
         }
 
       });
 
-      }
 
-      window.addEventListener('scroll', debounce(checkSlide));
 
-
 
-      $('.navbar-nav .dropdown:nth-of-type(2)').click(function() {
 
-        $('html, body').animate({
 
-            scrollTop: $("#sec-features").offset().top
 
-        }, 1000);
 
-      })
 
-    </script>
 
-
 
-  </body>
 
-</html>
 
+    }
 
+    window.addEventListener('scroll', debounce(checkSlide));
 
+
 
+    $('.navbar-nav .dropdown:nth-of-type(2)').click(function () {
 
+      $('html, body').animate({
 
+        scrollTop: $("#sec-features").offset().top
 
+      }, 1000);
 
+    })
 
+
 
+    var swiper = new Swiper(".mySwiper", {
 
+      pagination: {
 
+        el: ".swiper-pagination",
 
+        clickable: true,
 
+      },
 
+    });
 
+  </script>
 
+
 
+</body>
 
+
 
+</html>

+ 1 - 1
layouts/ip/single.html
Tampilan Berkas 

@@ -127,7 +127,7 @@
 
                 <div class="col-12 col-md-7">
 
                     <div class="header-right header-dm" style="background-image: url('/imgs/dm/dm_ip.png');">
 
                         <img src="/imgs/02.webp" alt="" class="header-right-cir">
 
-                        <!-- <img src="imgs/影片.webp" alt="" class="header-right__video"> -->
 
+                        <!-- <img src="imgs/影片.webp" alt="" class="header-right-video"> -->
 
                         <img class="header-right-bubble" src="/imgs/對話.webp" alt="">
 
                         <img class="header-right-linecir" src="/imgs/裝飾圓.webp" alt="">
 
                     </div>

+ 21 - 21
layouts/partials/LP_components/hero.html
Tampilan Berkas 

@@ -1,24 +1,24 @@
 
 <section class="sec-hero" style="margin-top: 64px;">
 
-    <div class="container">
 
-        <div class="row">
 
-            <div class="col-md-6">
 
-                <h2 class="hero-title">製作影片 一鍵合成</h2>
 
-                <p class="hero-txt">輸入文字素材，即速產生影片<br>
 
-                    大幅省下時間、人力、器材成本。<br>
 
-                    腳本內容直接上鏈，紀錄透明<br>
 
-                    創作屬於你的獨特內容。
 
-                </p>
 
-                <button class="hero-btn" onclick="window.location.href=`https://video.choozmo.com/register.html`">立即開始</button>
 
-            </div>
 
-            <div class="col-md-6 col-left" style="position: relative;">
 
-                <img src="/img/背景紫.png" alt="" class="hero-purple">
 
-                <!-- <img src="img/背景-橘.png" alt="" width="150px" class="hero-orange"> -->
 
-                <img src="/img/背景橘.png" alt="" class="hero-orange-s">
 
-                <img src="/img/textgrp3.png" alt="" class="hero-textgrp">
 
-                <img src="/img/video.png" alt="" class="hero-video">
 
-                <img src="/img/放大鏡.png" alt="" class="hero-amplify">
 
-                <div class="hero-imgfr"><img src="/img/2222.png" alt=""></div>
 
-            </div>
 
-        </div>
 
+  <div class="container">
 
+    <div class="row">
 
+      <div class="col-md-6">
 
+        <h2 class="hero-title">製作影片 一鍵合成</h2>
 
+        <p class="hero-txt">輸入文字素材，即速產生影片<br>
 
+          大幅省下時間、人力、器材成本。<br>
 
+          腳本內容直接上鏈，紀錄透明<br>
 
+          創作屬於你的獨特內容。
 
+        </p>
 
+        <button class="hero-btn" onclick="window.location.href=`https://video.choozmo.com/register.html`">立即開始</button>
 
+      </div>
 
+      <div class="col-md-6 col-left" style="position: relative;">
 
+        <img src="/img/背景紫.png" alt="" class="hero-purple">
 
+        <!-- <img src="img/背景-橘.png" alt="" width="150px" class="hero-orange"> -->
 
+        <img src="/img/背景橘.png" alt="" class="hero-orange-s">
 
+        <img src="/img/textgrp3.png" alt="" class="hero-textgrp">
 
+        <img src="/img/video.png" alt="" class="hero-video">
 
+        <img src="/img/放大鏡.png" alt="" class="hero-amplify">
 
+        <div class="hero-imgfr"><img src="/img/2222.png" alt=""></div>
 
+      </div>
 
     </div>
 
+  </div>
 
 </section>

+ 22 - 0
layouts/partials/components/carousel.html
Tampilan Berkas 

@@ -0,0 +1,22 @@
 
+<div class="swiper mySwiper">
 
+  <div class="swiper-wrapper">
 
+    <div class="swiper-slide">
 
+      <a href="">
 
+        <img src="/imgs/home/橫幅廣告-01.png" alt="">
 
+      </a>
 
+    </div>
 
+    <div class="swiper-slide">
 
+      <a href="/seo-image/dm/">
 
+        <img src="/imgs/home/橫幅廣告-02.png" alt="">
 
+      </a>
 
+    </div>
 
+    <div class="swiper-slide">
 
+      <a href="/ai-anchor/dm/">
 
+        <img src="/imgs/home/橫幅廣告-03.png" alt="">
 
+      </a>
 
+    </div>
 
+  </div>
 
+  <!-- <div class="swiper-button-next"></div> -->
 
+  <!-- <div class="swiper-button-prev"></div> -->
 
+  <div class="swiper-pagination"></div>
 
+</div>

+ 81 - 0
layouts/partials/components/head.html
Tampilan Berkas 

@@ -0,0 +1,81 @@
 
+<head>
 
+    <meta charset="utf-8">
 
+    <meta name="robots" content="all,follow">
 
+    <meta name="googlebot" content="index,follow,snippet,archive">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1">
 
+    {{ $title_plain := .Title | markdownify | plainify }}
 
+    <title>{{ $title_plain }}</title>
 
+    <meta name="author" content="{{ .Param "author" }}" />
 
+    {{ $keywords := .Site.Params.defaultKeywords | default (slice "" | first 0) }}
 
+    {{ if isset .Params "tags" }}{{ range .Params.tags }}{{ $keywords = $keywords | append . }}{{ end }}{{ end }}
 
+    {{ if isset .Params "keywords" }}{{ range .Params.keywords }}{{ $keywords = $keywords | append . }}{{ end }}{{ end }}
 
+    {{ if gt (len $keywords) 0 }}
 
+    <meta name="keywords" content="{{ delimit (uniq $keywords) ", " }}">
 
+    {{ end }}
 
+    {{ $description_plain := default .Site.Params.defaultDescription .Description | markdownify | plainify }}
 
+    <meta name="description" content="{{ $description_plain }}">
 
+  
+    {{ hugo.Generator }}
 
+  
+    <!-- Font -->
 
+    <link href='//fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,500,700,800' rel='stylesheet' type='text/css'>
 
+  
+    <!-- Bootstrap and Font Awesome CSS -->
 
+    <link rel="stylesheet" href="//use.fontawesome.com/releases/v5.11.2/css/all.css">
 
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" 
+    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
 
+  
+    <!-- CSS animations  -->
 
+    <link href="{{ "css/animate.css" | relURL}}" rel="stylesheet">
 
+  
+    <!-- Theme stylesheet, if possible do not edit this stylesheet -->
 
+    <!-- {{ with .Site.Params.style }}
 
+      <link href="{{ "css/style" | relURL}}.{{ . }}.css" rel="stylesheet" id="theme-stylesheet">
 
+    {{ else }}
 
+      <link href="{{ "css/style.default.css" | relURL}}" rel="stylesheet" id="theme-stylesheet">
 
+    {{ end }} -->
 
+  
+    <!-- Custom stylesheet - for your changes -->
 
+    <link href="{{ "css/custom.css" | relURL}}" rel="stylesheet">
 
+    <link href="{{ "css/customnft.css" | relURL}}" rel="stylesheet">
 
+    <link href="{{ "css/style.css" | relURL}}" rel="stylesheet">
 
+  
+    <!-- Responsivity for older IE -->
 
+    {{ `
 
+      <!--[if lt IE 9]>
 
+          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
 
+          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
 
+      <![endif]-->
 
+    ` | safeHTML }}
 
+  
+  
+    <!-- Favicon and Apple touch icons-->
 
+    <link rel="shortcut icon" href="{{ "img/favicon.ico" | relURL }}" type="image/x-icon" />
 
+    <link rel="apple-touch-icon" href="{{ "img/apple-touch-icon.png" | relURL }}" />
 
+  
+    <!-- swiper -->
 
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
 
+      
+    <!-- owl carousel CSS -->
 
+    <link href="{{ "css/owl.carousel.css" | relURL}}" rel="stylesheet">
 
+    <link href="{{ "css/owl.theme.css" | relURL}}" rel="stylesheet">
 
+    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
 
+  
+    <!-- RSS feed -->
 
+    <link rel="alternate" href="{{ "/index.xml" | absURL }}" type="application/rss+xml" title="{{ .Site.Title }}">
 
+  
+  
+    <!-- Global site tag (gtag.js) - Google Ads: 474336061 -->
 
+    <script async src="https://www.googletagmanager.com/gtag/js?id=AW-474336061"></script>
 
+    <script>
 
+      window.dataLayer = window.dataLayer || [];
 
+      function gtag(){dataLayer.push(arguments);}
 
+      gtag('js', new Date());
 
+  
+      gtag('config', 'AW-474336061');
 
+    </script>
 
+    <!-- Event snippet for ChoozMo video marking conversion page -->
 
+    <script>
 
+      gtag('event', 'conversion', {'send_to': 'AW-474336061/nOm7CPHvtZ0DEL2Wl-IB'});
 
+    </script>
 
+  </head>

+ 120 - 0
layouts/partials/components/main.html
Tampilan Berkas 

@@ -0,0 +1,120 @@
 
+<div class="mt-5" id="main">
 
+  <div class="content">
 
+    <section>
 
+      <img src="https://i.imgur.com/P1gNopa.png" alt="" class="logo mb-3">
 
+      <h4>
 
+        不再侷限一種廣告類型 <br>
 
+        搭配各式分析工具 <br>
 
+        使用 AI 自動化系統 <br>
 
+        給您一條龍的行銷規劃
 
+      </h4>
 
+    </section>
 
+
 
+    <div class="d-flex mt-4">
 
+      <img src="/imgs/home/icon-01.png" alt="" width="45">
 
+      <section>
 
+        <h3>
 
+          AI 廣告投放 <br>
 
+          高速 SEO <br>
 
+          AI 虛擬人像
 
+        </h3>
 
+      </section>
 
+    </div>
 
+    <div>
 
+      <button class="action-btn" onclick="window.location.href=`/contact/service/`">立即諮詢</button>
 
+    </div>
 
+  </div>
 
+
 
+  <div class="journey-content">
 
+    <div class="container">
 
+      <h3>ChoozMo Digital Customer Journey 數位顧客旅程</h3>
 
+      <div class="row">
 
+        <div class="col-3 title">
 
+          <h4>
 
+            awareness
 
+          </h4>
 
+          <img src="/imgs/home/icon-02.png" alt="">
 
+        </div>
 
+        <div class="col-3 title">
 
+          <h4>
 
+            Search
 
+          </h4>
 
+          <img src="/imgs/home/icon-02.png" alt="">
 
+        </div>
 
+        <div class="col-3 title">
 
+          <h4>
 
+            Reputation
 
+          </h4>
 
+          <img src="/imgs/home/icon-02.png" alt="">
 
+        </div>
 
+        <div class="col-3">
 
+          <h4>
 
+            Conversion
 
+          </h4>
 
+        </div>
 
+        <div class="col-12">
 
+          <span class="line"></span>
 
+        </div>
 
+        <div class="col-3 d-flex justify-content-center mb-4">
 
+          <section class="list">
 
+            <h5>品牌與產品曝光：</h5>
 
+            <p>各式 Google 廣告 GDN、搜尋、地標、購物廣告、YT、FB 廣告</p>
 
+            <strong>
 
+              適合廣告投放
 
+            </strong>
 
+          </section>
 
+        </div>
 
+        <div class="col-3 d-flex justify-content-center mb-4">
 
+          <section class="list">
 
+            <h5>自然搜尋：</h5>
 
+            <p>消費者知道產品或品牌後，做消費功課與各家產品比較</p>
 
+            <strong>
 
+              適合 SEO 優化
 
+            </strong>
 
+          </section>
 
+        </div>
 
+        <div class="col-3 d-flex justify-content-center mb-4">
 
+          <section class="list">
 
+            <h5>口碑參考：</h5>
 
+            <p>
 
+              消費者查詢品牌或產品的使用心得與評價
 
+            </p>
 
+            <strong>
 
+              適合新聞和口碑寫手
 
+            </strong>
 
+          </section>
 
+        </div>
 
+        <div class="col-3 d-flex justify-content-center mb-4">
 
+          <section class="list">
 
+            <h5>轉換：</h5>
 
+            <p>
 
+              填寫資料，線上購買，到門市購物等等
 
+            </p>
 
+            <strong>
 
+              優化購買流程
 
+            </strong>
 
+          </section>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </div>
 
+
 
+  <div class="container team-content">
 
+    <div class="row justify-content-center align-items-center">
 
+      <div class="col-12 col-md-5">
 
+        <strong>Choozmo Team</strong>
 
+        <h4>團隊獲得專業創投千萬元投資， <br>
 
+          技術能力獲得工業局 AI 服務能量登錄。</h4>
 
+          <ul>
 
+            <li>以品牌獲利為目標</li>
 
+            <li>精準的預算規劃 | 多元的行銷方案</li>
 
+            <li>優於業界的價錢 | 專業的 AI 認可</li>
 
+            <li>擁有自己的研發團隊</li>
 
+          </ul>
 
+      </div>
 
+      <div class="col-12 col-md-4 mt-3 mt-md-0">
 
+        <img src="imgs/home/首頁-03.png" alt="">
 
+      </div>
 
+    </div>
 
+  </div>
 
+</div>

+ 73 - 0
layouts/partials/components/nav.html
Tampilan Berkas 

@@ -0,0 +1,73 @@
 
+<nav class="navbar navbar-expand-lg navbar-light bg-light">
 
+  <div class="container-fluid">
 
+    <a class="navbar-brand home" href="/">
 
+      <img src="{{ .Site.Params.logo | relURL }}" alt="{{ .Title }} logo" class="d-none d-lg-block logo">
 
+      <img src="{{ .Site.Params.logo_small | relURL }}" alt="{{ .Title }} logo" class="d-block d-lg-none logo-sm">
 
+      <span class="sr-only">{{ .Title }} - {{ i18n "navHome" }}</span>
 
+    </a>
 
+    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
 
+      aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
 
+      <span class="navbar-toggler-icon"></span>
 
+    </button>
 
+    <div class="collapse navbar-collapse" id="navbarSupportedContent">
 
+
 
+      <ul class="navbar-nav me-auto mb-2 mb-lg-0 mt-4 mt-lg-0">
 
+        {{ $currentPage := . }}
 
+        {{ range .Site.Menus.main }}
 
+        {{ if .HasChildren }}
 
+
 
+        <li class="nav-item dropdown">
 
+          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown"
 
+            aria-expanded="false">
 
+            {{ .Pre }}
 
+            <span>{{ .Name }}</span>
 
+          </a>
 
+          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
 
+            {{ range .Children }}
 
+            <li class="{{ if $currentPage.IsMenuCurrent " main" . }}active{{ end }}">
 
+              <a class="dropdown-item" href="{{ .URL }}">{{ .Name }}</a>
 
+            </li>
 
+            {{ end }}
 
+          </ul>
 
+        </li>
 
+        {{ else }}
 
+        <li class="nav-item">
 
+          <a class="nav-link" href="{{ .URL }}">
 
+            {{ .Pre }}
 
+            <span>{{ .Name }}</span>
 
+          </a>
 
+        </li>
 
+        {{ end }}
 
+        {{ end }}
 
+      </ul>
 
+
 
+
 
+      <!-- <ul class="navbar-nav me-auto mb-2 mb-lg-0">
 
+        <li class="nav-item">
 
+          <a class="nav-link active" aria-current="page" href="#">Home</a>
 
+        </li>
 
+        <li class="nav-item">
 
+          <a class="nav-link" href="#">Link</a>
 
+        </li>
 
+        <li class="nav-item dropdown">
 
+          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
 
+            Dropdown
 
+          </a>
 
+          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
 
+            <li><a class="dropdown-item" href="#">Action</a></li>
 
+            <li><a class="dropdown-item" href="#">Another action</a></li>
 
+            <li><hr class="dropdown-divider"></li>
 
+            <li><a class="dropdown-item" href="#">Something else here</a></li>
 
+          </ul>
 
+        </li>
 
+        <li class="nav-item">
 
+          <a class="nav-link disabled">Disabled</a>
 
+        </li>
 
+      </ul> -->
 
+      <!-- <form class="d-flex">
 
+        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
 
+        <button class="btn btn-outline-success" type="submit">Search</button>
 
+      </form> -->
 
+    </div>
 
+  </div>
 
+</nav>

+ 22 - 0
layouts/partials/components/scripts.html
Tampilan Berkas 

@@ -0,0 +1,22 @@
 
+{{ template "_internal/google_analytics.html" . }}
 
+<script src="//code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
 
+  crossorigin="anonymous"></script>
 
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
 
+  integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
 
+<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
 
+<script src="//cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
 
+<script src="//cdnjs.cloudflare.com/ajax/libs/Counter-Up/1.0/jquery.counterup.min.js"></script>
 
+<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-parallax/1.1.3/jquery-parallax.js"></script>
 
+{{ if .Site.Params.enableGoogleMaps }}
 
+{{ if .Site.Params.googleMapsApiKey }}
 
+<script src="//maps.googleapis.com/maps/api/js?key={{.Site.Params.googleMapsApiKey}}&v=3.exp"></script>
 
+{{ else }}
 
+<script src="//maps.googleapis.com/maps/api/js?v=3.exp"></script>
 
+{{ end }}
 
+<script src="{{ " js/hpneo.gmaps.js" | relURL }}"></script>
 
+<script src="{{ " js/gmaps.init.js" | relURL }}"></script>
 
+{{ end }}
 
+<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
 
+
 
+<!-- swiper -->
 
+<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

+ 236 - 0
layouts/partials/components/serve.html
Tampilan Berkas 

@@ -0,0 +1,236 @@
 
+<!-- AI 廣告 -->
 
+<div class="container-fluid ad-content position-relative">
 
+  <div class="tag-item" style="top: -50px; right: -5vw;">
 
+    <img src="imgs/home/裝飾-01.png" alt="">
 
+    <h5 style="right: 40px;">AI 廣告</h5>
 
+  </div>
 
+  <section class="d-flex justify-content-center">
 
+    <h4>
 
+      AI 智能 廣告投放<br>
 
+      <strong>精密規劃您的廣告預算 | 用低於業界金額 打出最好成效</strong>
 
+    </h4>
 
+  </section>
 
+  <div class="row justify-content-center align-items-center px-5 px-lg-0">
 
+    <div class="col-12 col-lg-3">
 
+      <img src="imgs/home/首頁-04.png" alt="" class="d-lg-block d-none">
 
+      <img src="imgs/home/首頁-04-mb.png" alt="" class="d-lg-none d-block mx-auto">
 
+    </div>
 
+    <div class="col-12 col-lg-6 mt-5 mt-lg-0">
 
+      <ul>
 
+        <li>
 
+          <h5>Q 這麼多種廣告，怎麼知道自己適合哪一種？</h5>
 
+          <p>
 
+            集仕多以大數據分析技術，替您的品牌推薦最適合投放的廣告類型，精準抓取目標受眾，不花冤望錢。
 
+          </p>
 
+        </li>
 
+        <li>
 
+          <h5>Q 給別人投廣告是不是會花更多錢啊？</h5>
 
+          <p>
 
+            比起自己花費人力投廣告，猜測不確定性的投放組合，造成預算浪費。不如交給專業的 AI 廣告投手，替您省時省錢，讓您的廣告用最少的費用，達到最佳投放效益。
 
+          </p>
 
+        </li>
 
+        <li>
 
+          <h5>Q 為什麼要選擇集仕多？</h5>
 
+          <p>
 
+            集仕多為軟體科技公司，成員多為資訊工程師，在 Martech 科技行銷領域發展活耀，獲得多項研究獎、科技部計畫之代表團隊，團隊具有技術硬實力，提供最新行銷解決方案，AI
 
+            廣告投放技術是台灣少數獲工業局認證之廠商，為 AI 精準行銷首選。
 
+          </p>
 
+        </li>
 
+      </ul>
 
+    </div>
 
+  </div>
 
+  <div class="d-flex justify-content-center mb-5">
 
+    <a href="" class="more-btn">
 
+      點我了解更多
 
+    </a>
 
+  </div>
 
+  <div class="row justify-content-center align-items-center mx-auto w-100 py-4 py-sm-5"
 
+    style="background-color: #efe5ee;">
 
+    <div class="col-12 col-sm-4 col-lg-3 position-relative">
 
+      <img src="imgs/home/裝飾-03.png" alt="">
 
+      <span class="img-text">Youtube廣告 <br> 影片有效觀看</span>
 
+    </div>
 
+    <div class="col-12 col-sm-8 col-lg-4 px-5 px-sm-3 px-lg-0">
 
+      <h5>1 個觀看數只要 0.4 元 <br>
 
+        <strong>
 
+          透過 Google 廣告投放，增漲 YT 影片的有效觀看數，可自訂目標觀看受眾群，結案提供廣告成效報告與報表。<br>
 
+        </strong>
 
+        <small>
 
+          客戶案例經過一個月的 YouTube 廣告投放 <br>
 
+          影片曝光數達 58 萬、觀看次數 22 萬！
 
+        </small>
 
+      </h5>
 
+    </div>
 
+    <div class="col-12 col-lg-5 mt-5 mt-lg-0">
 
+      <img src="imgs/home/首頁-07.png" alt="">
 
+    </div>
 
+  </div>
 
+</div>
 
+
 
+<!-- SEO -->
 
+<div class="container-fluid position-relative pt-4 px-0">
 
+  <div class="tag-item">
 
+    <img src="imgs/home/裝飾-01.png" alt="">
 
+    <h5>SEO</h5>
 
+  </div>
 
+  <div class="container seo-content">
 
+    <h4>
 
+      高速 SEO 搜尋排名優化
 
+    </h4>
 
+    <section class="d-flex flex-column align-items-lg-center justify-content-center">
 
+      <p class="my-5">
 
+        你的 SEO 要跑多久？ <br>
 
+        集仕多獨家高速 SEO，經審核網站後，會提出網站優化建議，並且推薦適合的關鍵字 <br>
 
+        客戶實例最短兩周可以提升 SEO 排名。
 
+      </p>
 
+      <div class="d-none d-lg-flex">
 
+        <ul>
 
+          <li><strong>➤　形象 SEO</strong></li>
 
+          <li><strong>➤　新聞 SEO</strong></li>
 
+          <li><strong>➤　創業家 SEO</strong></li>
 
+        </ul>
 
+        <ul>
 
+          <li>將負面評價、負面新聞、負面討論排序向後，達成正面形象的目標</li>
 
+          <li>撰寫 SEO 新聞稿、製作AI主播報導影片、一次曝光到 11 家網路媒體</li>
 
+          <li>為店家打造在地口碑，以第三方客觀角度撰寫專屬推薦文章</li>
 
+        </ul>
 
+      </div>
 
+      <div class="d-block d-lg-none">
 
+        <ul class="p-0">
 
+          <li>
 
+            <strong>➤　形象 SEO</strong> <br>
 
+            將負面評價、負面新聞、負面討論排序向後，達成正面形象的目標
 
+          </li>
 
+          <li class="my-4">
 
+            <strong>➤　新聞 SEO</strong> <br>
 
+            撰寫 SEO 新聞稿、製作AI主播報導影片、一次曝光到 11 家網路媒體
 
+          </li>
 
+          <li>
 
+            <strong>➤　創業家 SEO</strong> <br>
 
+            為店家打造在地口碑，以第三方客觀角度撰寫專屬推薦文章
 
+          </li>
 
+        </ul>
 
+      </div>
 
+    </section>
 
+    <div class="video-box">
 
+      <iframe src="https://www.youtube.com/embed/6uMQaljwMig" title="YouTube video player" frameborder="0"
 
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
 
+        allowfullscreen></iframe>
 
+    </div>
 
+    <div class="d-flex justify-content-center">
 
+      <a href="" class="more-btn">
 
+        點我了解更多
 
+      </a>
 
+    </div>
 
+  </div>
 
+  <img src="imgs/home/首頁-05.png" alt="" class="bg-img">
 
+</div>
 
+
 
+<!-- AI 主播 -->
 
+<div class="container-fluid position-relative px-0 ai-content">
 
+  <div class="tag-item">
 
+    <img src="imgs/home/裝飾-01.png" alt="">
 
+    <h5 class="fw-bold" style="right: 40px;">AI 主播</h5>
 
+  </div>
 
+  <div class="container">
 
+    <h4>
 
+      AI 虛擬人像
 
+    </h4>
 
+
 
+    <div class="row my-5 py-5 justify-content-center align-items-center">
 
+      <div class="col-12 col-md-6 d-flex justify-content-center">
 
+        <section>
 
+          <h2 class="title">製作影片 一鍵合成</h2>
 
+          <p>
 
+            上傳文字與素材，即速產生影片<br>
 
+            大幅省下時間、人力、器材成本<br>
 
+            腳本內容直接上鏈，紀錄透明<br>
 
+            可以使用集仕多的影片版型<br>
 
+            也可以自己客製化
 
+          </p>
 
+        </section>
 
+      </div>
 
+      <div class="col-12 col-md-6 my-5 my-md-0">
 
+        <div class="position-relative">
 
+          <img src="/img/背景紫.png" alt="" class="hero-purple">
 
+          <img src="/img/背景橘.png" alt="" class="hero-orange-s">
 
+          <img src="/img/textgrp3.png" alt="" class="hero-textgrp">
 
+          <img src="/img/video.png" alt="" class="hero-video">
 
+          <img src="/img/放大鏡.png" alt="" class="hero-amplify">
 
+          <div class="hero-imgfr"><img src="/img/2222.png" alt=""></div>
 
+        </div>
 
+      </div>
 
+      <div class="col-12">
 
+        <section class="position-relative img-item">
 
+          <img src="imgs/home/首頁-06.png" alt="">
 
+          <p>2022 年集仕多的研發團隊 <br>
 
+            在 AI 虛擬人像上有了技術突破 <br>
 
+            第三代 AI 虛擬人像 <br>
 
+            不僅是視覺、聽覺也更加擬真 <br>
 
+            像真正的新聞播報員等級 <br>
 
+            現在不只能用集仕多的模板 <br>
 
+            可以諮詢我們客製化主播以及字幕邊框</p>
 
+        </section>
 
+      </div>
 
+    </div>
 
+
 
+    <section class="sec-video">
 
+      <div class="container">
 
+        <h2 class="video-title">三代主播－客製化範例影片</h2>
 
+        <h2 class="video-mb-title">
 
+          三代主播
 
+          <br>
 
+          客製化範例影片
 
+        </h2>
 
+        <span class="line"></span>
 
+        <p class="video-text">
 
+          2022 年與藝點新聞合作之活動宣傳影片 <br>
 
+          歐美主播 ｘ 客製化字幕 ｘ 高解析度人像
 
+        </p>
 
+        <div class="video-box">
 
+          <iframe src="https://www.youtube.com/embed/rTML9TAsUS8" title="YouTube video player" frameborder="0"
 
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
 
+            allowfullscreen></iframe>
 
+        </div>
 
+      </div>
 
+    </section>
 
+    <!-- <div class="d-flex justify-content-center mt-5">
 
+      <a href="" class="more-btn">
 
+        點我了解更多
 
+      </a>
 
+    </div> -->
 
+  </div>
 
+
 
+  <section class="sec-usecase">
 
+    <div class="container">
 
+      <h2 class="usecase-title">使用情境</h2>
 
+      <div class="row">
 
+        <div class="col-xs-12 col-sm-6 col-md-3">
 
+          <div class="usecase-block">
 
+            <div class="usecase-imgfr"><img src="/img/產品介紹.png" alt=""></div>
 
+            <h3 class="usecase-sub"><i class="fas fa-circle"></i> 產品介紹</h3>
 
+          </div>
 
+        </div>
 
+        <div class="col-xs-12 col-sm-6 col-md-3">
 
+          <div class="usecase-block">
 
+            <div class="usecase-imgfr"><img src="/img/教育.png" alt=""></div>
 
+            <h3 class="usecase-sub"><i class="fas fa-circle"></i> 教育培訓</h3>
 
+          </div>
 
+        </div>
 
+        <div class="col-xs-12 col-sm-6 col-md-3">
 
+          <div class="usecase-block">
 
+            <div class="usecase-imgfr"><img src="/img/A短影片_1.png" alt=""></div>
 
+            <h3 class="usecase-sub"><i class="fas fa-circle"></i> 資訊傳播</h3>
 
+          </div>
 
+        </div>
 
+        <div class="col-xs-12 col-sm-6 col-md-3">
 
+          <div class="usecase-block">
 
+            <div class="usecase-imgfr"><img src="/img/內容創作.png" alt=""></div>
 
+            <h3 class="usecase-sub"><i class="fas fa-circle"></i> 個人內容創作</h3>
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </section>
 
+
 
+</div>

+ 1 - 1
layouts/partials/nav.html
Tampilan Berkas 

@@ -2,7 +2,7 @@
 
     <div class="navbar navbar-default yamm" role="navigation" id="navbar">    
         <div class="container-fluid">
 
             <div class="navbar-header">
 
-                <a class="navbar-brand home" href="{{ "/" | relURL }}">
 
+                <a class="navbar-brand home" href="/">
 
                     <img src="{{ .Site.Params.logo | relURL }}" alt="{{ .Title }} logo" class="hidden-xs hidden-sm logo">
 
                     <img src="{{ .Site.Params.logo_small | relURL }}" alt="{{ .Title }} logo" class="visible-xs visible-sm logo-sm">
 
                     <span class="sr-only">{{ .Title }} - {{ i18n "navHome" }}</span>

+ 1 - 1
layouts/partials/navbar.html
Tampilan Berkas 

@@ -11,7 +11,7 @@
 
     <div class="collapse navbar-collapse ms-auto" id="navbarNav">
 
       <ul class="navbar-nav">
 
         <li class="nav-item">
 
-          <a class="nav-link active" aria-current="page" href="/">Home</a>
 
+          <a class="nav-link active" aria-current="page" href="/">首頁</a>
 
         </li>
 
         <li class="nav-item dropdown">
 
           <a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown"

+ 13 - 6
layouts/partials/scripts.html
Tampilan Berkas 

@@ -1,5 +1,9 @@
 
 {{ template "_internal/google_analytics.html" . }}
 
-<script src="//code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
 
+<script src="//code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
 
+    crossorigin="anonymous"></script>
 
+<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
 
+    integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
 
+    crossorigin="anonymous"></script> -->
 
 <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
 
 
 
@@ -13,12 +17,15 @@
 
 {{ else }}
 
 <script src="//maps.googleapis.com/maps/api/js?v=3.exp"></script>
 
 {{ end }}
 
-<script src="{{ "js/hpneo.gmaps.js" | relURL }}"></script>
 
-<script src="{{ "js/gmaps.init.js" | relURL }}"></script>
 
+<script src="{{ " js/hpneo.gmaps.js" | relURL }}"></script>
 
+<script src="{{ " js/gmaps.init.js" | relURL }}"></script>
 
 {{ end }}
 
-<script src="{{ "js/front.js" | relURL }}"></script>
 
+<script src="{{ " js/front.js" | relURL }}"></script>
 
 <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
 
-<script src="{{ "js/vtubers.js" | relURL }}"></script>
 
+<script src="{{ " js/vtubers.js" | relURL }}"></script>
 
 
 <!-- owl carousel -->
 
-<script src="{{ "js/owl.carousel.min.js" | relURL }}"></script>
 
+<script src="{{ " js/owl.carousel.min.js" | relURL }}"></script>
 
+
 
+<!-- swiper -->
 
+<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

+ 1 - 1
layouts/research/single.html
Tampilan Berkas 

@@ -80,7 +80,7 @@
 
         <div class="col-12 col-md-7">
 
           <div class="header-right header-dm" style="background-image: url('https://i.imgur.com/cqerHee.jpg');">
 
             <img src="/imgs/02.webp" alt="" class="header-right-cir">
 
-            <!-- <img src="imgs/影片.webp" alt="" class="header-right__video"> -->
 
+            <!-- <img src="imgs/影片.webp" alt="" class="header-right-video"> -->
 
             <img class="header-right-bubble" src="/imgs/對話.webp" alt="">
 
             <img class="header-right-linecir" src="/imgs/裝飾圓.webp" alt="">
 
           </div>

+ 1 - 1
layouts/trends/single.html
Tampilan Berkas 

@@ -50,7 +50,7 @@
 
                 <div class="col-12 col-md-7">
 
                     <div class="header-right">
 
                         <img src="/imgs/02.webp" alt="" class="header-right-cir">
 
-                        <div class="header-right__video">
 
+                        <div class="header-right-video">
 
                             <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>
 
                         </div>
 
                         <img class="header-right-magnifier" src="/imgs/放大鏡.webp" alt="">

+ 1 - 1
layouts/video-making/single.html
Tampilan Berkas 

@@ -89,7 +89,7 @@
 
         <div class="col-12 col-md-7">
 
           <div class="header-right header-dm" style="background-image: url('/imgs/dm/dm_video-making-1.png');">
 
             <img src="/imgs/02.webp" alt="" class="header-right-cir">
 
-            <!-- <img src="imgs/影片.webp" alt="" class="header-right__video"> -->
 
+            <!-- <img src="imgs/影片.webp" alt="" class="header-right-video"> -->
 
             <img class="header-right-bubble" src="/imgs/對話.webp" alt="">
 
             <img class="header-right-linecir" src="/imgs/裝飾圓.webp" alt="">
 
           </div>

+ 9 - 2
layouts/youtube-views-zh/single.html
Tampilan Berkas 

@@ -41,7 +41,7 @@
 
               保證 100% 真人觀看數 <br>
 
               快速曝光您的品牌 <br>
 
             </p>
 
-            <button class="contact-btn my-5" onclick="window.location.href=`/contact/service/`">立即諮詢</button>
 
+            <button class="contact-btn my-5">立即諮詢</button>
 
           </div>
 
           <div class="col-12 col-md-8">
 
             <div class="banner d-none d-md-block"></div>
 
@@ -327,7 +327,7 @@
 
       <p>想了解更多嗎？</p>
 
     </section>
 
 
-    <div class="container loaded pageForm">
 
+    <div class="container loaded pageForm" id="pageForm">
 
       <div class="row">
 
         <div class="col-12 col-md-6">
 
           <div class="pageForm-p">
 
@@ -383,6 +383,13 @@
 
       ga('send', 'pageview');
 
     }
 
   </script>
 
+  <script>
 
+    let contactBtn = document.querySelector('.contact-btn');
 
+    contactBtn.addEventListener('click', () => {
 
+      let element = document.querySelector('.pageForm');
 
+      window.scrollTo(0, element.offsetTop - 200);
 
+    })
 
+  </script>
 
   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
 
     integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
 
     crossorigin="anonymous"></script>

+ 3 - 3
static/css/custom.css
Tampilan Berkas 

@@ -513,8 +513,8 @@
 
 .blogtab-title {
 
   font-size: 3rem;
 
   letter-spacing: 1px;
 
-  padding-bottom: 6px;
 
-  border-bottom: 8px solid #ea5413;
 
+  padding-bottom: 7px;
 
+  border-bottom: 7px solid #ea5413;
 
   display: inline-block;
 
   text-align: center;
 
 }
 
@@ -564,7 +564,7 @@
 
 .btn-light {
 
   color: black;
 
   border: 1px solid #ea5413;
 
-  padding: 1rem 2.5rem 0.6rem;
 
+  padding: 1rem 2.5rem;
 
   outline: none;
 
   background-color: white;
 
   margin-top: 4rem;

+ 426 - 5
static/css/style.css
Tampilan Berkas 

@@ -5,7 +5,7 @@
 
 
 .navbar {
 
   box-shadow: 0 2px 10px 2px rgb(204, 204, 204);
 
-  background-color: white;
 
+  background-color: white !important;
 
   width: 100%;
 
 }
 
 
@@ -112,7 +112,7 @@
 
   z-index: -1;
 
 }
 
 
-.header-right__video {
 
+.header-right-video {
 
   position: absolute;
 
   width: 70%;
 
   height: auto;
 
@@ -438,6 +438,427 @@
 
   width: 3rem;
 
 }
 
 
+/* 首頁 */
 
+#home img {
 
+  max-width: 100%;
 
+  height: auto;
 
+}
 
+#home .swiper .swiper-pagination-bullet {
 
+  width: 13px;
 
+  height: 13px;
 
+  margin: 0 13px;
 
+}
 
+@media (max-width: 991px) {
 
+  #home .swiper .swiper-pagination-bullet {
 
+    width: 10px;
 
+    height: 10px;
 
+    margin: 0 10px;
 
+  }
 
+}
 
+#home .swiper .swiper-pagination {
 
+  bottom: -5px;
 
+}
 
+#home .swiper .swiper-pagination-bullet-active {
 
+  background-color: #000 !important;
 
+}
 
+#home #main {
 
+  overflow: hidden;
 
+}
 
+#home #main .content {
 
+  height: 65vh;
 
+  padding-left: 15vw;
 
+  background-image: url("/imgs/home/首頁-01.png");
 
+  background-position: center;
 
+  background-repeat: no-repeat;
 
+  display: flex;
 
+  flex-direction: column;
 
+  justify-content: center;
 
+}
 
+@media (max-width: 991px) {
 
+  #home #main .content {
 
+    background-position: -600px -100px;
 
+  }
 
+}
 
+@media (max-width: 767px) {
 
+  #home #main .content {
 
+    padding-left: 0;
 
+    align-items: center;
 
+  }
 
+}
 
+#home #main .content h4 {
 
+  color: #6c6d70;
 
+  line-height: 40px;
 
+  font-weight: bold;
 
+}
 
+@media (max-width: 767px) {
 
+  #home #main .content h4 {
 
+    text-align: center;
 
+  }
 
+}
 
+#home #main .content section h3 {
 
+  color: #ea5413;
 
+  margin-left: 10px;
 
+  font-weight: bold;
 
+  font-size: 26px;
 
+  line-height: 40px;
 
+}
 
+#home #main .content .logo {
 
+  width: 200px;
 
+}
 
+#home #main .content div {
 
+  height: 115px;
 
+}
 
+#home #main .content .action-btn {
 
+  margin-top: 60px;
 
+  padding: 8px 22px;
 
+  color: #fff;
 
+  transition: all 0.3s;
 
+  border: none;
 
+  border-radius: 20px;
 
+  background-color: #ea5413;
 
+}
 
+#home #main .content .action-btn:hover {
 
+  background-color: #d54d13;
 
+}
 
+#home #main .journey-content {
 
+  display: flex;
 
+  align-items: center;
 
+  background-image: url("/imgs/home/首頁-02.png");
 
+  background-size: cover;
 
+  background-position: top;
 
+  background-repeat: no-repeat;
 
+}
 
+#home #main .journey-content h3 {
 
+  text-align: center;
 
+  font-weight: bold;
 
+  padding: 260px 0 80px;
 
+}
 
+#home #main .journey-content h4 {
 
+  color: #ea5413;
 
+  text-align: center;
 
+  font-weight: bold;
 
+}
 
+#home #main .journey-content .line {
 
+  display: block;
 
+  height: 2px;
 
+  background: #ea5413;
 
+  width: 100%;
 
+  margin: 30px 0;
 
+}
 
+#home #main .journey-content .title {
 
+  position: relative;
 
+}
 
+#home #main .journey-content .title img {
 
+  top: -70px;
 
+  right: -75px;
 
+  width: 180px;
 
+  position: absolute;
 
+}
 
+#home #main .journey-content .list {
 
+  padding: 0 25px;
 
+  font-size: 18px;
 
+}
 
+@media (max-width: 1200px) {
 
+  #home #main .journey-content .list {
 
+    padding: 0;
 
+  }
 
+}
 
+@media (max-width: 991px) {
 
+  #home #main .journey-content .list {
 
+    font-size: 16px;
 
+  }
 
+}
 
+#home #main .journey-content .list h5 {
 
+  font-size: 18px;
 
+}
 
+@media (max-width: 991px) {
 
+  #home #main .journey-content .list h5 {
 
+    font-size: 16px;
 
+  }
 
+}
 
+#home #main .journey-content .list p {
 
+  height: 75px;
 
+}
 
+@media (max-width: 1200px) {
 
+  #home #main .journey-content .list p {
 
+    height: 85px;
 
+  }
 
+}
 
+#home #main .journey-content .list strong {
 
+  display: block;
 
+  padding: 15px;
 
+  margin: 20px auto 50px;
 
+  text-align: center;
 
+  color: #fff;
 
+  background-color: #ea5413;
 
+}
 
+#home #main .team-content {
 
+  margin: 100px auto;
 
+}
 
+#home #main .team-content strong {
 
+  font-size: 26px;
 
+}
 
+#home #main .team-content h4 {
 
+  margin: 20px 0;
 
+  color: #ea5413;
 
+  font-weight: bold;
 
+  line-height: 36px;
 
+}
 
+#home #main .team-content ul {
 
+  list-style: none;
 
+  padding: 0;
 
+  margin: 0;
 
+}
 
+#home #main .team-content ul li {
 
+  margin: 5px 0;
 
+  font-size: 18px;
 
+}
 
+#home .ad-content {
 
+  width: 90%;
 
+  padding: 50px 0 0;
 
+  border: 1px solid #90268f;
 
+}
 
+#home .ad-content ul {
 
+  padding: 0;
 
+  list-style: none;
 
+}
 
+#home .ad-content ul li {
 
+  margin-bottom: 50px;
 
+}
 
+#home .ad-content ul li h5 {
 
+  font-weight: bold;
 
+}
 
+#home .ad-content ul li p {
 
+  color: #90268f;
 
+  font-size: 20px;
 
+  font-weight: bold;
 
+}
 
+#home .ad-content section h4 {
 
+  text-align: center;
 
+  font-size: 30px;
 
+  font-weight: bold;
 
+}
 
+#home .ad-content section h4 strong {
 
+  display: block;
 
+  margin: 20px 0 50px;
 
+  font-size: 24px;
 
+  color: #ea5413;
 
+}
 
+#home .ad-content h5 {
 
+  font-weight: bold;
 
+  font-size: 24px;
 
+  line-height: 32px;
 
+}
 
+@media (max-width: 1200px) {
 
+  #home .ad-content h5 {
 
+    font-size: 20px;
 
+  }
 
+}
 
+#home .ad-content h5 strong {
 
+  margin: 30px 0;
 
+  display: block;
 
+  color: #90268f;
 
+}
 
+#home .ad-content .img-text {
 
+  position: absolute;
 
+  left: 50%;
 
+  top: 50%;
 
+  transform: translate(-50%, -50%);
 
+  font-size: 1.6vw;
 
+  font-weight: bold;
 
+}
 
+@media (max-width: 575px) {
 
+  #home .ad-content .img-text {
 
+    font-size: 24px;
 
+  }
 
+}
 
+#home .tag-item {
 
+  position: absolute;
 
+  right: 0;
 
+}
 
+#home .tag-item img {
 
+  width: 200px;
 
+}
 
+#home .tag-item h5 {
 
+  position: absolute;
 
+  top: 35px;
 
+  right: 75px;
 
+  color: #fff;
 
+  font-size: 26px;
 
+}
 
+#home .seo-content {
 
+  overflow: hidden;
 
+}
 
+#home .seo-content ul {
 
+  list-style: none;
 
+}
 
+#home .seo-content ul li {
 
+  font-size: 18px;
 
+}
 
+#home .seo-content section p {
 
+  color: #6c6d70;
 
+  font-weight: bold;
 
+  font-size: 18px;
 
+  line-height: 32px;
 
+}
 
+#home .seo-content .video-box {
 
+  width: 55%;
 
+  padding-bottom: 30%;
 
+  margin: 50px auto;
 
+}
 
+@media (max-width: 991px) {
 
+  #home .seo-content .video-box {
 
+    width: 100%;
 
+    padding-bottom: 56%;
 
+  }
 
+}
 
+#home .seo-content h4,
 
+#home .ai-content h4 {
 
+  padding-top: 100px;
 
+  text-align: center;
 
+  font-size: 30px;
 
+  font-weight: bold;
 
+}
 
+#home .ai-content {
 
+  margin-top: 100px;
 
+}
 
+#home .ai-content p {
 
+  line-height: 32px;
 
+  font-size: 18px;
 
+}
 
+#home .ai-content .title {
 
+  color: #ea5413;
 
+  font-weight: bold;
 
+}
 
+#home .ai-content .video-title {
 
+  font-size: 2rem;
 
+  font-weight: bold;
 
+}
 
+@media (max-width: 991px) {
 
+  #home .ai-content .img-item {
 
+    display: flex;
 
+    justify-content: center;
 
+  }
 
+}
 
+@media (max-width: 991px) {
 
+  #home .ai-content .img-item img {
 
+    width: 800px;
 
+    max-width: initial;
 
+  }
 
+}
 
+@media (max-width: 575px) {
 
+  #home .ai-content .img-item img {
 
+    margin-left: 50px;
 
+  }
 
+}
 
+#home .ai-content .img-item p {
 
+  position: absolute;
 
+  top: 32%;
 
+  left: 50%;
 
+  font-size: 20px;
 
+  font-weight: bold;
 
+  line-height: 38px;
 
+  color: #6c6d70;
 
+}
 
+@media (max-width: 1400px) {
 
+  #home .ai-content .img-item p {
 
+    top: 31%;
 
+    line-height: 34px;
 
+  }
 
+}
 
+@media (max-width: 1200px) {
 
+  #home .ai-content .img-item p {
 
+    top: 28%;
 
+    line-height: 32px;
 
+    font-size: 18px;
 
+  }
 
+}
 
+@media (max-width: 991px) {
 
+  #home .ai-content .img-item p {
 
+    top: 25%;
 
+    line-height: 30px;
 
+    font-size: 16px;
 
+  }
 
+}
 
+@media (max-width: 991px) {
 
+  #home .ai-content .img-item p {
 
+    left: 42%;
 
+  }
 
+}
 
+@media (max-width: 575px) {
 
+  #home .ai-content .img-item p {
 
+    left: 32vw;
 
+    top: 25%;
 
+    line-height: 26px;
 
+    font-size: 15px;
 
+  }
 
+}
 
+#home .ai-content .sec-video {
 
+  margin-top: 0;
 
+}
 
+#home .ai-content .sec-video .video-mb-title {
 
+  font-size: 26px;
 
+  font-weight: bold;
 
+}
 
+@media (max-width: 767px) {
 
+  #home .ai-content .sec-video .video-box {
 
+    width: 100%;
 
+    padding-bottom: 45%;
 
+  }
 
+}
 
+#home .ai-content .sec-usecase .usecase-title {
 
+  font-size: 2rem;
 
+  font-weight: bold;
 
+}
 
+#home .ai-content .sec-usecase .usecase-imgfr {
 
+  height: auto;
 
+}
 
+#home .ai-content .sec-usecase .usecase-sub {
 
+  font-size: 18px;
 
+  margin-top: 20px;
 
+}
 
+#home .bg-img {
 
+  margin-top: -85vw;
 
+  position: relative;
 
+  z-index: -1;
 
+  transform: scale(1.1);
 
+  -o-object-position: 3vw 0px;
 
+     object-position: 3vw 0px;
 
+}
 
+#home .more-btn {
 
+  padding: 13px 30px;
 
+  color: #fff;
 
+  background-color: #ea5413;
 
+  text-decoration: none;
 
+  border-radius: 100px;
 
+  transition: all 0.3s;
 
+}
 
+#home .more-btn:hover {
 
+  background-color: #d54d13;
 
+}
 
+#home .sec-blogtab {
 
+  margin: 100px auto;
 
+}
 
+#home .sec-blogtab .blogtab-title {
 
+  font-size: 2rem;
 
+  margin-bottom: 30px;
 
+}
 
+#home .sec-blogtab .blog-txt {
 
+  font-size: 16px;
 
+}
 
+#home .sec-blogtab .btn-light {
 
+  font-size: 16px;
 
+  transition: all 0.3s;
 
+  text-decoration: none;
 
+}
 
+#home .sec-blogtab .blog-tabs-nav a {
 
+  transition: all 0.3s;
 
+  text-decoration: none;
 
+}
 
+#home .sec-blogtab .blog-tabs-nav a:hover {
 
+  opacity: 0.8;
 
+}
 
+
 
 /* content page */
 
 .cntheader {
 
   margin-top: 81px;
 
@@ -760,7 +1181,7 @@
 
 }
 
 
 @media (max-width: 1300px) {
 
-  .header-right__video {
 
+  .header-right-video {
 
     position: absolute;
 
     width: 76%;
 
   }
 
@@ -925,7 +1346,7 @@
 
   .cntheader {
 
     padding-bottom: 0rem;
 
   }
 
-  .header-right__video {
 
+  .header-right-video {
 
     position: absolute;
 
     width: 70%;
 
     left: 2.3rem;
 
@@ -976,7 +1397,7 @@
 
   .ctncategory-btn {
 
     margin-top: 0.6rem;
 
   }
 
-  .header-right__video {
 
+  .header-right-video {
 
     position: absolute;
 
     width: 75%;
 
     left: 2.1rem;

File diff ditekan karena terlalu besar
+ 0 - 0
static/css/style.css.map


+ 424 - 8
static/css/style.scss
Tampilan Berkas 

@@ -4,7 +4,7 @@
 
 
 .navbar {
 
   box-shadow: 0 2px 10px 2px rgb(204, 204, 204);
 
-  background-color: white;
 
+  background-color: white !important;
 
   width: 100%;
 
 }
 
 
@@ -120,7 +120,7 @@
 
   z-index: -1;
 
 }
 
 
-.header-right__video {
 
+.header-right-video {
 
   position: absolute;
 
   width: calc(80% - 10%);
 
   height: auto;
 
@@ -459,6 +459,422 @@
 
   width: 3rem;
 
 }
 
 
+/* 首頁 */
 
+
 
+#home {
 
+  img {
 
+    max-width: 100%;
 
+    height: auto;
 
+  }
 
+  .swiper {
 
+    .swiper-pagination-bullet {
 
+      width: 13px;
 
+      height: 13px;
 
+      margin: 0 13px;
 
+      @media (max-width: 991px) {
 
+        width: 10px;
 
+        height: 10px;
 
+        margin: 0 10px;
 
+      }
 
+    }
 
+    .swiper-pagination {
 
+      bottom: -5px;
 
+    }
 
+    .swiper-pagination-bullet-active {
 
+      background-color: #000 !important;
 
+    }
 
+  }
 
+  #main {
 
+    overflow: hidden;
 
+    .content {
 
+      height: 65vh;
 
+      padding-left: 15vw;
 
+      background-image: url("/imgs/home/首頁-01.png");
 
+      background-position: center;
 
+      background-repeat: no-repeat;
 
+      display: flex;
 
+      flex-direction: column;
 
+      justify-content: center;
 
+      @media (max-width: 991px) {
 
+        background-position: -600px -100px;
 
+      }
 
+      @media (max-width: 767px) {
 
+        padding-left: 0;
 
+        align-items: center;
 
+      }
 
+      h4 {
 
+        color: #6c6d70;
 
+        line-height: 40px;
 
+        font-weight: bold;
 
+        @media (max-width: 767px) {
 
+          text-align: center;
 
+        }
 
+      }
 
+      section {
 
+        h3 {
 
+          color: #ea5413;
 
+          margin-left: 10px;
 
+          font-weight: bold;
 
+          font-size: 26px;
 
+          line-height: 40px;
 
+        }
 
+      }
 
+      .logo {
 
+        width: 200px;
 
+      }
 
+      div {
 
+        height: 115px;
 
+      }
 
+      .action-btn {
 
+        margin-top: 60px;
 
+        padding: 8px 22px;
 
+        color: #fff;
 
+        transition: all 0.3s;
 
+        border: none;
 
+        border-radius: 20px;
 
+        background-color: #ea5413;
 
+        &:hover {
 
+          background-color: #d54d13;
 
+        }
 
+      }
 
+    }
 
+
 
+    .journey-content {
 
+      display: flex;
 
+      align-items: center;
 
+      background-image: url("/imgs/home/首頁-02.png");
 
+      background-size: cover;
 
+      background-position: top;
 
+      background-repeat: no-repeat;
 
+      h3 {
 
+        text-align: center;
 
+        font-weight: bold;
 
+        padding: 260px 0 80px;
 
+      }
 
+      h4 {
 
+        color: #ea5413;
 
+        text-align: center;
 
+        font-weight: bold;
 
+      }
 
+      .line {
 
+        display: block;
 
+        height: 2px;
 
+        background: #ea5413;
 
+        width: 100%;
 
+        margin: 30px 0;
 
+      }
 
+      .title {
 
+        position: relative;
 
+        img {
 
+          top: -70px;
 
+          right: -75px;
 
+          width: 180px;
 
+          position: absolute;
 
+        }
 
+      }
 
+      .list {
 
+        padding: 0 25px;
 
+        font-size: 18px;
 
+        @media (max-width: 1200px) {
 
+          padding: 0;
 
+        }
 
+        @media (max-width: 991px) {
 
+          font-size: 16px;
 
+        }
 
+        h5 {
 
+          font-size: 18px;
 
+          @media (max-width: 991px) {
 
+            font-size: 16px;
 
+          }
 
+        }
 
+        p {
 
+          height: 75px;
 
+          @media (max-width: 1200px) {
 
+            height: 85px;
 
+          }
 
+        }
 
+        strong {
 
+          display: block;
 
+          padding: 15px;
 
+          margin: 20px auto 50px;
 
+          text-align: center;
 
+          color: #fff;
 
+          background-color: #ea5413;
 
+        }
 
+      }
 
+    }
 
+
 
+    .team-content {
 
+      margin: 100px auto;
 
+      strong {
 
+        font-size: 26px;
 
+      }
 
+      h4 {
 
+        margin: 20px 0;
 
+        color: #ea5413;
 
+        font-weight: bold;
 
+        line-height: 36px;
 
+      }
 
+      ul {
 
+        list-style: none;
 
+        padding: 0;
 
+        margin: 0;
 
+        li {
 
+          margin: 5px 0;
 
+          font-size: 18px;
 
+        }
 
+      }
 
+    }
 
+  }
 
+  .ad-content {
 
+    width: 90%;
 
+    padding: 50px 0 0;
 
+    border: 1px solid #90268f;
 
+    ul {
 
+      padding: 0;
 
+      list-style: none;
 
+      li {
 
+        margin-bottom: 50px;
 
+        h5 {
 
+          font-weight: bold;
 
+        }
 
+        p {
 
+          color: #90268f;
 
+          font-size: 20px;
 
+          font-weight: bold;
 
+        }
 
+      }
 
+    }
 
+    section {
 
+      h4 {
 
+        text-align: center;
 
+        font-size: 30px;
 
+        font-weight: bold;
 
+        strong {
 
+          display: block;
 
+          margin: 20px 0 50px;
 
+          font-size: 24px;
 
+          color: #ea5413;
 
+        }
 
+      }
 
+    }
 
+    h5 {
 
+      font-weight: bold;
 
+      font-size: 24px;
 
+      line-height: 32px;
 
+      @media (max-width: 1200px) {
 
+        font-size: 20px;
 
+      }
 
+      strong {
 
+        margin: 30px 0;
 
+        display: block;
 
+        color: #90268f;
 
+      }
 
+    }
 
+    .img-text {
 
+      position: absolute;
 
+      left: 50%;
 
+      top: 50%;
 
+      transform: translate(-50%, -50%);
 
+      font-size: 1.6vw;
 
+      font-weight: bold;
 
+      @media (max-width: 575px) {
 
+        font-size: 24px;
 
+      }
 
+    }
 
+  }
 
+  .tag-item {
 
+    position: absolute;
 
+    right: 0;
 
+    img {
 
+      width: 200px;
 
+    }
 
+    h5 {
 
+      position: absolute;
 
+      top: 35px;
 
+      right: 75px;
 
+      color: #fff;
 
+      font-size: 26px;
 
+    }
 
+  }
 
+
 
+  .seo-content {
 
+    overflow: hidden;
 
+    ul {
 
+      list-style: none;
 
+      li {
 
+        font-size: 18px;
 
+      }
 
+    }
 
+    section {
 
+      p {
 
+        color: #6c6d70;
 
+        font-weight: bold;
 
+        font-size: 18px;
 
+        line-height: 32px;
 
+      }
 
+    }
 
+    .video-box {
 
+      width: 55%;
 
+      padding-bottom: 30%;
 
+      margin: 50px auto;
 
+      @media (max-width: 991px) {
 
+        width: 100%;
 
+        padding-bottom: 56%;
 
+      }
 
+    }
 
+  }
 
+
 
+  .seo-content,
 
+  .ai-content {
 
+    h4 {
 
+      padding-top: 100px;
 
+      text-align: center;
 
+      font-size: 30px;
 
+      font-weight: bold;
 
+    }
 
+  }
 
+
 
+  .ai-content {
 
+    margin-top: 100px;
 
+    p {
 
+      line-height: 32px;
 
+      font-size: 18px;
 
+    }
 
+
 
+    .title {
 
+      color: #ea5413;
 
+      font-weight: bold;
 
+    }
 
+
 
+    .video-title {
 
+      font-size: 2rem;
 
+      font-weight: bold;
 
+    }
 
+
 
+    .img-item {
 
+      @media (max-width: 991px) {
 
+        display: flex;
 
+        justify-content: center;
 
+      }
 
+      img {
 
+        @media (max-width: 991px) {
 
+          width: 800px;
 
+          max-width: initial;
 
+        }
 
+        @media (max-width: 575px) {
 
+          margin-left: 50px;
 
+        }
 
+      }
 
+      p {
 
+        position: absolute;
 
+        top: 32%;
 
+        left: 50%;
 
+        font-size: 20px;
 
+        font-weight: bold;
 
+        line-height: 38px;
 
+        color: #6c6d70;
 
+        @media (max-width: 1400px) {
 
+          top: 31%;
 
+          line-height: 34px;
 
+        }
 
+        @media (max-width: 1200px) {
 
+          top: 28%;
 
+          line-height: 32px;
 
+          font-size: 18px;
 
+        }
 
+        @media (max-width: 991px) {
 
+          top: 25%;
 
+          line-height: 30px;
 
+          font-size: 16px;
 
+        }
 
+        @media (max-width: 991px) {
 
+          left: 42%;
 
+        }
 
+        @media (max-width: 575px) {
 
+          left: 32vw;
 
+          top: 25%;
 
+          line-height: 26px;
 
+          font-size: 15px;
 
+        }
 
+      }
 
+    }
 
+
 
+    .sec-video {
 
+      margin-top: 0;
 
+      .video-mb-title {
 
+        font-size: 26px;
 
+        font-weight: bold;
 
+      }
 
+      .video-box {
 
+        @media (max-width: 767px) {
 
+          width: 100%;
 
+          padding-bottom: 45%;
 
+        }
 
+      }
 
+    }
 
+
 
+    .sec-usecase {
 
+      .usecase-title {
 
+        font-size: 2rem;
 
+        font-weight: bold;
 
+      }
 
+      .usecase-imgfr {
 
+        height: auto;
 
+      }
 
+      .usecase-sub {
 
+        font-size: 18px;
 
+        margin-top: 20px;
 
+      }
 
+    }
 
+  }
 
+
 
+  .bg-img {
 
+    margin-top: -85vw;
 
+    position: relative;
 
+    z-index: -1;
 
+    transform: scale(1.1);
 
+    object-position: 3vw 0px;
 
+  }
 
+
 
+  .more-btn {
 
+    padding: 13px 30px;
 
+    color: #fff;
 
+    background-color: #ea5413;
 
+    text-decoration: none;
 
+    border-radius: 100px;
 
+    transition: all 0.3s;
 
+    &:hover {
 
+      background-color: #d54d13;
 
+    }
 
+  }
 
+
 
+  .sec-blogtab {
 
+    margin: 100px auto;
 
+    .blogtab-title {
 
+      font-size: 2rem;
 
+      margin-bottom: 30px;
 
+    }
 
+    .blog-txt {
 
+      font-size: 16px;
 
+    }
 
+    .btn-light {
 
+      font-size: 16px;
 
+      transition: all 0.3s;
 
+      text-decoration: none;
 
+    }
 
+    .blog-tabs-nav {
 
+      a {
 
+        transition: all 0.3s;
 
+        text-decoration: none;
 
+        &:hover {
 
+          opacity: 0.8;
 
+        }
 
+      }
 
+    }
 
+  }
 
+}
 
+
 
 /* content page */
 
 
 .cntheader {
 
@@ -775,7 +1191,7 @@
 
   color: #ff892e;
 
 }
 
 @media (max-width: 1300px) {
 
-  .header-right__video {
 
+  .header-right-video {
 
     position: absolute;
 
     width: calc(80% - 4%);
 
   }
 
@@ -951,7 +1367,7 @@
 
   .cntheader {
 
     padding-bottom: 0rem;
 
   }
 
-  .header-right__video {
 
+  .header-right-video {
 
     position: absolute;
 
     width: calc(80% - 10%);
 
     left: 2.3rem;
 
@@ -1009,7 +1425,7 @@
 
   .ctncategory-btn {
 
     margin-top: 0.6rem;
 
   }
 
-  .header-right__video {
 
+  .header-right-video {
 
     position: absolute;
 
     width: calc(80% - 5%);
 
     left: 2.1rem;
 
@@ -1042,7 +1458,7 @@
 
   }
 
   .header-title {
 
     @media (max-width: 575px) {
 
-     font-size: 2rem;
 
+      font-size: 2rem;
 
     }
 
   }
 
   .header-sub {
 
@@ -1171,7 +1587,7 @@
 
           @media (max-width: 991px) {
 
             width: 200px;
 
           }
 
-          @media (max-width: 575px){
 
+          @media (max-width: 575px) {
 
             width: 170px;
 
           }
 
         }
 
@@ -1182,7 +1598,7 @@
 
   ul {
 
     list-style: none;
 
     text-align: center;
 
-    @media (max-width: 767px){
 
+    @media (max-width: 767px) {
 
       padding: 0;
 
     }
 
     li {

TEMPAT SAMPAH
static/imgs/home/icon-01.png
Tampilan Berkas


TEMPAT SAMPAH
static/imgs/home/icon-02.png
Tampilan Berkas


TEMPAT SAMPAH
static/imgs/home/icon-03.png
Tampilan Berkas


TEMPAT SAMPAH
static/imgs/home/橫幅廣告-01.png
Tampilan Berkas


TEMPAT SAMPAH
static/imgs/home/橫幅廣告-02.png
Tampilan Berkas


TEMPAT SAMPAH
static/imgs/home/橫幅廣告-03.png
Tampilan Berkas


TEMPAT SAMPAH
static/imgs/home/裝飾-01.png
Tampilan Berkas


TEMPAT SAMPAH
static/imgs/home/裝飾-02.png
Tampilan Berkas


TEMPAT SAMPAH
static/imgs/home/裝飾-03.png
Tampilan Berkas


TEMPAT SAMPAH
static/imgs/home/裝飾-04.png
Tampilan Berkas


TEMPAT SAMPAH
static/imgs/home/首頁-01.png
Tampilan Berkas


TEMPAT SAMPAH
static/imgs/home/首頁-02.png
Tampilan Berkas


TEMPAT SAMPAH
static/imgs/home/首頁-03.png
Tampilan Berkas


TEMPAT SAMPAH
static/imgs/home/首頁-04-mb.png
Tampilan Berkas


TEMPAT SAMPAH
static/imgs/home/首頁-04.png
Tampilan Berkas


TEMPAT SAMPAH
static/imgs/home/首頁-05.png
Tampilan Berkas


TEMPAT SAMPAH
static/imgs/home/首頁-06.png
Tampilan Berkas


TEMPAT SAMPAH
static/imgs/home/首頁-07.png
Tampilan Berkas


+ 1 - 7
webSite/config.toml
Tampilan Berkas 

@@ -111,16 +111,10 @@ page = ["HTML"]
 
     url = "/youtube-views-zh/dm/"
 
     weight = 11
 
     parent = "home"
 
-    
-[[menu.main]]
 
-    identifier="login"
 
-    name = "特色"
 
-    url  = "#sec-features"
 
-    weight = 2
 
 
 [[menu.main]]
 
     identifier="blog"
 
-    name = "文章"
 
+    name = "部落格"
 
     url  = "/tags/vtuber/"
 
     weight = 3

Beberapa file tidak ditampilkan karena terlalu banyak file yang berubah dalam diff ini