Browse Source

更新簡介、即時展示、特色頁面

jeter20131220 3 năm trước cách đây
mục cha
commit
4c07063c97
18 tập tin đã thay đổi với 650 bổ sung211 xóa
  1. 144 23
      about.html
  2. 174 62
      demo.html
  3. 172 74
      features.html
  4. BIN
      img/about/Bar.png
  5. BIN
      img/about/PC.png
  6. BIN
      img/about/home_六角.png
  7. BIN
      img/about/home_黑.png
  8. BIN
      img/about/slide.png
  9. BIN
      img/about/textgrp3.png
  10. BIN
      img/about/video.png
  11. BIN
      img/about/圖層 13.png
  12. BIN
      img/组 6.png
  13. BIN
      img/组 7.png
  14. BIN
      img/组 8.png
  15. BIN
      img/组 9.png
  16. 82 23
      style.css
  17. 0 0
      style.css.map
  18. 78 29
      style.scss

+ 144 - 23
about.html

@@ -8,52 +8,144 @@
     <title>Ai_anchor_About</title>
 
 
-
-
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"
+        integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css"
+        integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"
         integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
     <link rel="stylesheet" href="./style.css">
 </head>
 
 <body>
-    <section class="sec01">
+    <section class="aboutpage">
         <div class="card border-0">
             <!-- <img src="./img/T1.png" class="card-img img-fluid" alt="..."> -->
-            <div class="card-img-overlay pb-0">
-                <div class="ai-spokesgril">
-                    <a style="text-decoration: none;color:#000; font-size: 32px;font-weight: 900;"
-                        href="./index.html"><img class="me-3" style="width: 50px;" src="./img/圖片1.png" alt="">AI
-                        Spokesgirl</a>
-                    <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
-                        <li class="nav-item dropdown">
-                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+            <div>
+                <div class="row px-0 mx-0">
+                    <div class="col-lg-2 px-0">
+                        <div class="card border-0">
+                            <img style="width:14vw;" src="./img/about/home_六角.png" alt="...">
+                            <div class="card-img-overlay d-flex justify-content-center align-items-center">
+                                <div>
+                                    <a href="./index.html">
+                                        <img class="home-btn"
+                                            style="width: 70px; position: relative; right:1.5vw; bottom:20px;"
+                                            src="./img/about/home_黑.png" alt="">
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-lg-9 px-0">
+                        <div class="card border-0">
+                            <img style="position: relative; right:20px;" class="img-fluid" src="./img/about/Bar.png"
+                                alt="">
+                            <div class="card-img-overlay">
+                                <div class="mt-3 me-2">
+                                    <h1 style="font-size:3rem;" class="fw-bold mb-0 text-white">簡介</h1>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-lg-1 px-0">
+                        <!-- <nav style="margin-top: 40px;" class="navbar"> -->
+                            <div style="margin-top: 40px;">
+                                <ul style="float: left;" class="navbar-nav mb-2 mb-lg-0 me-3">
+                                    <li class="nav-item dropdown">
+                                        <a class="nav-link dropdown-toggle" style="font-size: 18px;" href="#" id="navbarDropdown" role="button"
+                                            data-bs-toggle="dropdown" aria-expanded="false">
+                                            中/En
+                                        </a>
+                                        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+                                            <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:en"
+                                                    onclick="changeLan(this);window.location.reload();"
+                                                    value="en">English</button>
+                                            </li>
+                                            <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:zh"
+                                                    onclick="changeLan(this);window.location.reload();"
+                                                    value="zh">中文</button></li>
+                                        </ul>
+                                    </li>
+                                </ul>
+                                <div style="float: left;" class="me-auto mt-2">
+                                    <a id="expand" onclick="openFullscreen();" style="cursor: pointer;" class="border-0"><i
+                                           style="font-size: 18px;" class="fas fa-expand text-dark"></i></a>
+                                    <a id="compression" onclick="closeFullscreen();" style="cursor: pointer;"
+                                        class="border-0"><i class="fas fa-compress text-dark"></i></a>
+                                </div>
+                            </div>
+                        <!-- </nav> -->
+                    </div>
+                </div>
+                <!-- <div class="ai-spokesgril">
+                    <div class="card border-0 me-3">
+                        <a style="text-decoration: none;" href="./index.html">
+                            <img src="./img/about/home_六角.png" width="180"
+                                style="width:14vw; height: 14vw; object-fit: cover;" class="img-fluid" alt="...">
+                        </a>
+                        <div class="card-img-overlay d-flex justify-content-center">
+                            <div class="mt-4 me-2">
+                                <img class="home-btn" style="width: 50px;" src="./img/home.png" alt="">
+                            </div>
+                        </div>
+                    </div>
+                    <div style="position: relative; top:-30px;" class="card border-0">
+                        <img style="width: 75vw; height: 10vw;" src="./img/about/Bar.png" alt="">
+                        <div class="card-img-overlay">
+                            <div class="mt-4 me-2">
+                                <h1 class="fw-bold mb-0 text-white">簡介</h1>
+
+                            </div>
+                        </div>
+                    </div>
+                    <ul style="position: relative; top:-20px;" class="navbar-nav  mb-2 mb-lg-0">
+                        <li class="nav-item dropdown me-3">
+                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
+                                data-bs-toggle="dropdown" aria-expanded="false">
                                 中/En
                             </a>
                             <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
-                                <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:en" onclick="changeLan(this);window.location.reload();" value="en">English</button></li>
-                                <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:zh" onclick="changeLan(this);window.location.reload();" value="zh">中文</button></li>
+                                <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:en"
+                                        onclick="changeLan(this);window.location.reload();" value="en">English</button>
+                                </li>
+                                <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:zh"
+                                        onclick="changeLan(this);window.location.reload();" value="zh">中文</button></li>
                             </ul>
                         </li>
                     </ul>
-                </div>
-                <section class="sec-hero" style="margin-top: 10px;">
-                    <div class="container">
+                    <div style="position: relative; top:-20px;" class="me-auto">
+                        <a id="expand" onclick="openFullscreen();" style="cursor: pointer;" class="border-0"><i
+                                class="fas fa-expand text-dark"></i></a>
+                        <a id="compression" onclick="closeFullscreen();" style="cursor: pointer;" class="border-0"><i
+                                class="fas fa-compress text-dark"></i></a>
+                    </div>
+                </div> -->
+                <section class="sec-hero container-fluid" style="margin-top: 10px;">
+                    <div style="width: 85vw; margin:0 auto;">
                         <div class="row">
-                            <div class="col-md-6">
+                            <div class="col-md-5">
                                 <h2 class="hero-title mb-5" set-lan="html:hero_title">製作影片 一鍵合成</h2>
-                                <p class="hero-txt"><lan set-lan="html:hero_txt1">輸入文字素材,即速產生影片</lan><br>
+                                <p class="hero-txt">
+                                    <lan set-lan="html:hero_txt1">輸入文字素材,即速產生影片</lan><br>
                                     <lan set-lan="html:hero_txt2">創作影片,不再需要錄影機、演員、麥克風繁雜器材。</lan><br>
-                                    <lan set-lan="html:hero_txt3">大幅省下時間、人力、器材成本。</lan></p>
-                                <button class="hero-btn" onclick="direct()"><lan set-lan="html:try_it_out">立即開始</lan></button>
+                                    <lan set-lan="html:hero_txt3">大幅省下時間、人力、器材成本。</lan>
+                                </p>
+                                <button class="hero-btn" onclick="direct()">
+                                    <lan set-lan="html:try_it_out">立即開始</lan>
+                                </button>
                             </div>
-                            <div class="col-md-6 col-left" style="position: relative;">
+                            <div class="col-md-7 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/about/slide.png" alt="" class="hero-slide">
                                 <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>
+                                <img src="img/about/圖層 13.png" alt="" class="hero-aips">
+
+                                <!-- <img src="img/放大鏡.png" alt="" class="hero-amplify"> -->
+                                <div class="hero-imgfr"><img src="/img/about/PC.png" alt=""></div>
                             </div>
                         </div>
                     </div>
@@ -72,6 +164,35 @@
         crossorigin="anonymous"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
     <script src="js/lan.js"></script>
+    <script>
+        var expandbtn = document.getElementById("expand");
+        var compressionbtn = document.getElementById("compression");
+
+        // Using JavaScript to open the page in fullscreen mode
+        var elem = document.documentElement;
+        function openFullscreen() {
+            if (elem.requestFullscreen) {
+                elem.requestFullscreen();
+                compressionbtn.style.display = 'inline';
+            } else if (elem.webkitRequestFullscreen) { /* Safari */
+                elem.webkitRequestFullscreen();
+            } else if (elem.msRequestFullscreen) { /* IE11 */
+                elem.msRequestFullscreen();
+            }
+        }
+
+        function closeFullscreen() {
+            if (document.exitFullscreen) {
+                document.exitFullscreen();
+                compressionbtn.style.display = 'none';
+
+            } else if (document.webkitExitFullscreen) { /* Safari */
+                document.webkitExitFullscreen();
+            } else if (document.msExitFullscreen) { /* IE11 */
+                document.msExitFullscreen();
+            }
+        }
+    </script>
 </body>
 
 </html>

+ 174 - 62
demo.html

@@ -2,81 +2,193 @@
 <html lang="en">
 
 <head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Ai_anchor_Demo</title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"
-        integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
-    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
-      crossorigin="anonymous">
-    <link rel="stylesheet" href="./style.css">
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Ai_anchor_Demo</title>
+  
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"
+    integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
+  <link rel="stylesheet" href="./style.css">
 </head>
 
 <body>
-    <div class="ai-spokesgril">
-      <a style="text-decoration: none;color:#000; font-size: 32px;font-weight: 900;"
-          href="./index.html"><img class="me-3" style="width: 50px;" src="./img/圖片1.png" alt="">AI
-          Spokesgirl</a>
-      <ul class="navbar-nav ms-auto mb-2 mb-lg-0 me-2">
+  <div class="row px-0 mx-0">
+    <div class="col-lg-2 px-0">
+      <div class="card border-0">
+        <img style="width:14vw;" src="./img/about/home_六角.png" alt="...">
+        <div class="card-img-overlay d-flex justify-content-center align-items-center">
+          <div>
+            <a href="./index.html">
+              <img class="home-btn" style="width: 70px; position: relative; right:1.5vw; bottom:20px;"
+                src="./img/about/home_黑.png" alt="">
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="col-lg-9 px-0">
+      <div class="card border-0">
+        <img style="position: relative; right:20px;" class="img-fluid" src="./img/about/Bar.png" alt="">
+        <div class="card-img-overlay">
+          <div class="mt-3 me-2">
+            <h1 style="font-size:3rem;" class="fw-bold mb-0 text-white">即時展示</h1>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="col-lg-1 px-0">
+      <!-- <nav style="margin-top: 40px;" class="navbar"> -->
+      <div style="margin-top: 40px;">
+        <ul style="float: left;" class="navbar-nav mb-2 mb-lg-0 me-3">
           <li class="nav-item dropdown">
-              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                  中/En
-              </a>
-              <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
-                  <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:en" onclick="changeLan(this);window.location.reload();" value="en">English</button></li>
-                  <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:zh" onclick="changeLan(this);window.location.reload();" value="zh">中文</button></li>
-              </ul>
+            <a class="nav-link dropdown-toggle" style="font-size: 18px;" href="#" id="navbarDropdown" role="button"
+              data-bs-toggle="dropdown" aria-expanded="false">
+              中/En
+            </a>
+            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+              <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:en"
+                  onclick="changeLan(this);window.location.reload();" value="en">English</button>
+              </li>
+              <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:zh"
+                  onclick="changeLan(this);window.location.reload();" value="zh">中文</button></li>
+            </ul>
           </li>
-      </ul>
+        </ul>
+        <div style="float: left;" class="me-auto mt-2">
+          <a id="expand" onclick="openFullscreen();" style="cursor: pointer;" class="border-0"><i
+              style="font-size: 18px;" class="fas fa-expand text-dark"></i></a>
+          <a id="compression" onclick="closeFullscreen();" style="cursor: pointer;" class="border-0"><i
+              class="fas fa-compress text-dark"></i></a>
+        </div>
+      </div>
+      <!-- </nav> -->
     </div>
-    <section class="sec-usecase">
-      <div class="container">
-          <div class="row my-5">
-              <div class="col m-2">
-                <a onclick="direct()" class="demo-btn">
-                  <h3 class="usecase-sub"><i class="fas fa-circle"></i> <lan set-lan="html:make_video_hand">手動製作影片</lan></h3>
-                </a>
+  </div>
+  <section class="sec-usecase">
+    <div class="container-fluid">
+      <div style="width: 85vw; margin:0 auto;">
+        <div class="row my-5">
+          <div class="col m-2">
+            <a onclick="direct()" style="background:#193179;" class="demo-btn">
+              <h3 class="usecase-sub">
+                <!-- <i class="fas fa-circle"></i> -->
+                <lan set-lan="html:make_video_hand">手動製作影片</lan>
+              </h3>
+            </a>
+            <div class="demo-box">
+              <div class="demo-card">
+                <ul>
+                  <li>只需要等待數分鐘即可生產完成</li>
+                  <li>可上傳圖片或是影片作為背景</li>
+                  <li>生成MP4檔</li>
+                </ul>
+              </div>
+              <div class="text-center">
+                <button style="background:#193179;" class="demo-CTA border-0 mb-5">開始制作</button>
+              </div>
+            </div>
+          </div>
+          <div class="col m-2">
+            <a href="" class="demo-btn" style="background:#294290;">
+              <h3 class="usecase-sub">
+                <!-- <i class="fas fa-circle"></i> -->
+                <lan set-lan="html:make_video_auto">自動影片製作</lan>
+              </h3>
+              <div>
               </div>
-              <div class="col m-2">
-                <a href="" class="demo-btn">
-                  <h3 class="usecase-sub"><i class="fas fa-circle"></i> <lan set-lan="html:make_video_auto">自動影片製作</lan></h3>
-                </a>
+            </a>
+            <div class="demo-box">
+              <div class="demo-card">
+                <ul>
+                  <li>只需要等待數分鐘即可生產完成</li>
+                  <li>可上傳圖片或是影片作為背景</li>
+                  <li>生成MP4檔</li>
+                </ul>
               </div>
-              <div class="col m-2">
-                <a class="demo-btn" data-bs-toggle="modal" data-bs-target="#exampleModal">
-                  <h3 class="usecase-sub"><i class="fas fa-circle"></i> <lan set-lan="html:make_video_trial">免費註冊使用</lan></h3>
-                </a>
+              <div class="text-center">
+                <button style="background:#193179;" class="demo-CTA border-0 mb-5">開始制作</button>
               </div>
+            </div>
           </div>
+          <div class="col m-2">
+            <a class="demo-btn" style="background: #3C57A7;" data-bs-toggle="modal" data-bs-target="#exampleModal">
+              <h3 class="usecase-sub">
+                <!-- <i class="fas fa-circle"></i> -->
+                <lan set-lan="html:make_video_trial">免費註冊使用</lan>
+              </h3>
+            </a>
+            <div class="demo-box">
+              <div class="demo-card text-center">
+               <img src="./img/Video_choozmo_qrcode.png" alt="">
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
-      <div class="closeplay modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel2"
-                aria-hidden="true">
-                <div class="modal-dialog modal-lg">
-                    <div class="modal-content border-0">
-                        <div class="modal-header border-0">
-                            <h5 class="modal-title" id="exampleModalLabel"></h5>
-                            <button type="button" class="btn-close" data-bs-dismiss="modal"
-                                aria-label="Close"><img src="./img/close.svg" alt=""></button>
-                        </div>
-                        <div class="modal-body text-center">
-                            <h2><i class="far fa-caret-square-right me-2"></i><lan set-lan="html:make_video_trial">免費註冊使用</lan></h2>
-                            <img src="./img/Video_choozmo_qrcode.png" alt="" width="450">
-                            <a href="https://video.choozmo.com" style="text-decoration: none;color: black;"><h2>https://video.choozmo.com</h2></a>
-                        </div>
-                    </div>
-                </div>
+    </div>
+    <div class="closeplay modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel2"
+      aria-hidden="true">
+      <div class="modal-dialog modal-lg">
+        <div class="modal-content border-0">
+          <div class="modal-header border-0">
+            <h5 class="modal-title" id="exampleModalLabel"></h5>
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"><img
+                src="./img/close.svg" alt=""></button>
+          </div>
+          <div class="modal-body text-center">
+            <h2><i class="far fa-caret-square-right me-2"></i>
+              <lan set-lan="html:make_video_trial">免費註冊使用</lan>
+            </h2>
+            <img src="./img/Video_choozmo_qrcode.png" alt="" width="450">
+            <a href="https://video.choozmo.com" style="text-decoration: none;color: black;">
+              <h2>https://video.choozmo.com</h2>
+            </a>
+          </div>
+        </div>
       </div>
+    </div>
+
+  </section>
+  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
+    integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
+    crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"
+    integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
+    crossorigin="anonymous"></script>
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+  <script src="js/lan.js"></script>
+  <script>
+    var expandbtn = document.getElementById("expand");
+    var compressionbtn = document.getElementById("compression");
+
+    // Using JavaScript to open the page in fullscreen mode
+    var elem = document.documentElement;
+    function openFullscreen() {
+        if (elem.requestFullscreen) {
+            elem.requestFullscreen();
+            compressionbtn.style.display = 'inline';
+        } else if (elem.webkitRequestFullscreen) { /* Safari */
+            elem.webkitRequestFullscreen();
+        } else if (elem.msRequestFullscreen) { /* IE11 */
+            elem.msRequestFullscreen();
+        }
+    }
+
+    function closeFullscreen() {
+        if (document.exitFullscreen) {
+            document.exitFullscreen();
+            compressionbtn.style.display = 'none';
 
-    </section>
-    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
-        integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
-        crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"
-        integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
-        crossorigin="anonymous"></script>
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
-    <script src="js/lan.js"></script>
+        } else if (document.webkitExitFullscreen) { /* Safari */
+            document.webkitExitFullscreen();
+        } else if (document.msExitFullscreen) { /* IE11 */
+            document.msExitFullscreen();
+        }
+    }
+</script>
 </body>
 
 </html>

+ 172 - 74
features.html

@@ -7,39 +7,76 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Ai_anchor_Features</title>
 
-    <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous"> -->
-    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
-        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"
+    integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
 
     <link rel="stylesheet" href="./style.css">
 </head>
 
-<body>
-<div style="overflow: hidden;">
-    <div class="ai-spokesgril features-nav"> 
-        <a style="text-decoration: none;color:#000; font-size: 32px;font-weight: 900; margin-top: 30px; margin-left: 15px;" href="./index.html">
-            <img class="me-5" style="width: 50px; margin-right: 15px;" src="./img/圖片1.png" alt="">
-            AI Spokesgirl
-        </a>
-        <div class="collapse navbar-collapse" id="navbarSupportedContent">
-            <ul class="navbar-nav ms-auto mb-2 mb-lg-0" style="list-style: none;font-size: 2rem;">
-                <li class="nav-item dropdown">
-                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                        中/En
-                    </a>
-                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown" style="padding: .5rem 0;">
-                        <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:en" onclick="changeLan(this);window.location.reload();" value="en" style="padding: .5rem 0;font-size: 1.8rem;">English</button></li>
-                        <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:zh" onclick="changeLan(this);window.location.reload();" value="zh" style="padding: .5rem 0;font-size: 1.8rem;">中文</button></li>
+<body id="top">
+<div style="overflow: hidden; position: relative;">
+    <div class="row px-0 mx-0">
+        <div class="col-lg-2 px-0">
+            <div class="card border-0">
+                <img style="width:14vw;" src="./img/about/home_六角.png" alt="...">
+                <div class="card-img-overlay d-flex justify-content-center align-items-center">
+                    <div>
+                        <a href="./index.html">
+                            <img class="home-btn"
+                                style="width: 70px; position: relative; right:1.5vw; bottom:20px;"
+                                src="./img/about/home_黑.png" alt="">
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="col-lg-9 px-0">
+            <div class="card border-0">
+                <img style="position: relative; right:20px;" class="img-fluid" src="./img/about/Bar.png"
+                    alt="">
+                <div class="card-img-overlay">
+                    <div class="mt-3 me-2">
+                        <h1 style="font-size:3rem;" class="fw-bold mb-0 text-white">簡介</h1>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="col-lg-1 px-0">
+            <!-- <nav style="margin-top: 40px;" class="navbar"> -->
+                <div style="margin-top: 40px;">
+                    <ul style="float: left;" class="navbar-nav mb-2 mb-lg-0 me-3">
+                        <li class="nav-item dropdown">
+                            <a class="nav-link dropdown-toggle" style="font-size: 18px;" href="#" id="navbarDropdown" role="button"
+                                data-bs-toggle="dropdown" aria-expanded="false">
+                                中/En
+                            </a>
+                            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+                                <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:en"
+                                        onclick="changeLan(this);window.location.reload();"
+                                        value="en">English</button>
+                                </li>
+                                <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:zh"
+                                        onclick="changeLan(this);window.location.reload();"
+                                        value="zh">中文</button></li>
+                            </ul>
+                        </li>
                     </ul>
-                </li>
-            </ul>
+                    <div style="float: left;" class="me-auto mt-2">
+                        <a id="expand" onclick="openFullscreen();" style="cursor: pointer;" class="border-0"><i
+                               style="font-size: 18px;" class="fas fa-expand text-dark"></i></a>
+                        <a id="compression" onclick="closeFullscreen();" style="cursor: pointer;"
+                            class="border-0"><i class="fas fa-compress text-dark"></i></a>
+                    </div>
+                </div>
+            <!-- </nav> -->
         </div>
     </div>
     <section class="sec-features" id="sec-features">
+       
         <div class="container text-center">
-            <h2 class="features-title"><strong>4</strong><lan set-lan="html:feature">大特色</lan></h2>
+            <!-- <h2 class="features-title"><strong>4</strong><lan set-lan="html:feature">大特色</lan></h2> -->
             <div class="row" style="position: relative;">
-                <img src="img/背景-橘霧.png" alt="" width="300px" class="features-orangel">
                 <div class="col-xs-12 col-md-6 col-lg-6">
                     <div class="features-imgfr">
                         <video autoplay muted loop>
@@ -48,21 +85,47 @@
                     </div>
                 </div>
                 <div class="col-xs-12 col-md-6 col-lg-6 features-col">
-                    <div class="features-block block-right">
-                        <span class="features-num">1</span>
-                        <div>
-                            <h3><lan set-lan="html:feature_no1_title1">輸入文字腳本及素材</lan><br><lan set-lan="html:feature_no1_title2">一鍵輸出合成影片</lan></h3>
-                            <ul class="features-list">
-                                <li set-lan="html:feature_no1_li1">只需等待數分鐘即產製完成</li>
-                                <li set-lan="html:feature_no1_li2">可上傳圖片或是影片作為背景</li>
-                                <li set-lan="html:feature_no1_li3">生成MP4檔</li>
-                            </ul>
+                    <div>
+                        <!-- <span class="features-num">1</span> -->
+                        <div class="row px-0 mx-0 mt-0">
+                            <div class="col-lg-4 pe-0">
+                                <img width="154" class="img-fluid" src="./img/组 6.png" alt="">
+                            </div>
+                            <div  class="col-lg-8 ps-0">
+                                <div style="margin-top: 100px;">
+                                    <h3 class="text-start" ><lan set-lan="html:feature_no1_title1">輸入文字腳本及素材</lan><br><lan set-lan="html:feature_no1_title2">一鍵輸出合成影片</lan></h3>
+                                    <ul class="features-list">
+                                        <li set-lan="html:feature_no1_li1">只需等待數分鐘即產製完成</li>
+                                        <li set-lan="html:feature_no1_li2">可上傳圖片或是影片作為背景</li>
+                                        <li set-lan="html:feature_no1_li3">生成MP4檔</li>
+                                    </ul>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
             </div>
             <div class="row" style="position: relative;">
-                <img src="img/背景-紫霧.png" alt="" width="300px" class="features-purpler">
+                <div class="col-xs-12 col-md-6 features-col">
+                    <div>
+                        <!-- <span class="features-num">2</span> -->
+                        <div class="row px-0 mx-0 mt-0">
+                            <div class="col-lg-8 d-flex justify-content-end">
+                                <div style="margin-top: 100px;">
+                                    <h3 set-lan="html:feature_no2_title">多位AI虛擬人物選擇</h3>
+                                    <ul class="features-list">
+                                        <li set-lan="html:feature_no2_li1">無人物肖像權問題</li>
+                                        <li set-lan="html:feature_no2_li2">人物表情、動作自然</li>
+                                        <li set-lan="html:feature_no2_li3">因應主題,選擇合適人物</li>
+                                    </ul>
+                                </div>
+                            </div>
+                            <div class="col-lg-4">
+                                <img class="img-fluid" width="154" src="./img/组 7.png" alt="">
+                            </div>
+                        </div>
+                    </div>
+                </div>
                 <div class="col-xs-12 col-md-6 d-block">
                     <div class="features-imgfr">
                         <video autoplay muted loop>
@@ -70,29 +133,16 @@
                         </video>
                     </div>
                 </div>
-                <div class="col-xs-12 col-md-6 features-col">
-                    <div class="features-block block-left">
-                        <span class="features-num">2</span>
-                        <div>
-                            <h3 set-lan="html:feature_no2_title">多位AI虛擬人物選擇</h3>
-                            <ul class="features-list">
-                                <li set-lan="html:feature_no2_li1">無人物肖像權問題</li>
-                                <li set-lan="html:feature_no2_li2">人物表情、動作自然</li>
-                                <li set-lan="html:feature_no2_li3">因應主題,選擇合適人物</li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-xs-12 col-md-6 d-md-block">
+              
+                <!-- <div class="col-xs-12 col-md-6 d-md-block">
                     <div class="features-imgfr">
                         <video autoplay muted loop>
                             <source src="img/官網2.mp4" type="video/mp4">
                         </video>
                     </div>
-                </div>
+                </div> -->
             </div>
             <div class="row" style="position: relative;">
-                <img src="img/背景-紫霧.png" alt="" width="300px" class="features-purplel">
                 <div class="col-xs-12 col-md-6">
                     <div class="features-imgfr">
                         <video autoplay muted loop>
@@ -101,22 +151,48 @@
                     </div>
                 </div>
                 <div class="col-xs-12 col-md-6 features-col">
-                    <div class="features-block block-right">
-                        <span class="features-num">3</span>
-                        <div>
-                            <h3 set-lan="html:feature_no3_title">投影片轉製為影片</h3>
-                            <ul class="features-list">
-                                <li set-lan="html:feature_no3_li1">輸入文字腳本及投影片連結
-                                    <br>一鍵完成影片
-                                </li>
-                                <li set-lan="html:feature_no3_li2">生成MP4檔</li>
-                            </ul>
+                    
+                    <div>
+                        <!-- <span class="features-num">3</span> -->
+                        <div class="row px-0 mx-0 mt-0">
+                            <div class="col-lg-4">
+                                <img width="154" class="img-fluid" src="./img/组 8.png" alt="">
+                            </div>
+                            <div class="col-lg-8">
+                                <div style="margin-top: 100px;">
+                                    <h3 class="text-start" set-lan="html:feature_no3_title">投影片轉製為影片</h3>
+                                    <ul class="features-list">
+                                        <li set-lan="html:feature_no3_li1">輸入文字腳本及投影片連結
+                                            <br>一鍵完成影片
+                                        </li>
+                                        <li set-lan="html:feature_no3_li2">生成MP4檔</li>
+                                    </ul>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
             </div>
             <div class="row" style="position: relative;">
-                <img src="img/背景-橘霧.png" alt="" width="300px" class="features-oranger">
+                <div class="col-xs-12 col-md-6 features-col">
+                    <div>
+                        <!-- <span class="features-num">4</span> -->
+                        <div class="row px-0 mx-0 mt-0">
+                            <div class="col-lg-8 d-flex justify-content-end">
+                                <div style="margin-top: 100px;">
+                                    <h3 set-lan="html:feature_no4_title">多語言支援</h3>
+                                    <ul class="features-list">
+                                        <li set-lan="html:feature_no4_li1">支援中英文內容</li>
+                                        <li set-lan="html:feature_no4_li2">可加入字幕</li>
+                                    </ul>
+                                </div>
+                            </div>
+                            <div class="col-lg-4">
+                                <img width="154" class="img-fluid" src="./img/组 9.png" alt="">
+                            </div>
+                        </div>
+                    </div>
+                </div>
                 <div class="col-xs-12 col-md-6 d-block">
                     <div class="features-imgfr">
                         <video autoplay muted loop>
@@ -124,30 +200,20 @@
                         </video>
                     </div>
                 </div>
-                <div class="col-xs-12 col-md-6 features-col">
-                    <div class="features-block block-left">
-                        <span class="features-num">4</span>
-                        <div>
-                            <h3 set-lan="html:feature_no4_title">多語言支援</h3>
-                            <ul class="features-list">
-                                <li set-lan="html:feature_no4_li1">支援中英文內容</li>
-                                <li set-lan="html:feature_no4_li2">可加入字幕</li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-xs-12 col-md-6 d-md-block">
+            
+                <!-- <div class="col-xs-12 col-md-6 d-md-block">
                     <div class="features-imgfr">
                         <video autoplay muted loop>
                             <source src="img/官網4.mp4" type="video/mp4">
                         </video>
                     </div>
-                </div>
+                </div> -->
             </div>
             <button class="btn-dark"
                 onclick="direct()"><lan set-lan="html:try_it_out">立即開始</lan></button>
         </div>
     </section>
+    <i style="font-size: 48px; position: absolute; bottom:50px; right:50px; color:#193179;" data-gt-target="#top" data-gt-duration="500" class="gotop fas fa-chevron-circle-up"></i>
 </div>
     <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
     integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
@@ -158,6 +224,38 @@
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
     <script src="js/lan.js"></script>
     <script>
+        $("*").each(function (index, element) {
+  // 此元素被點選後執行
+  $(this).click(function (e) {
+    // 取得被點選元素的屬性:data-gt-target
+    var target = $(this).attr("data-gt-target");
+    var duration = $(this).attr("data-gt-duration");
+    var offset = $(this).attr("data-gt-offset");
+
+    // JS 語法:判斷式
+    // if (條件) {程式區塊}
+    // 當條件成立,會執行程式區塊
+
+    // 如果 目標有資料 才會執行 { } 內的程式
+    // 避免出現 undefine (未定義 - 不存在的資料)
+    if (target) {
+      //console.log("目標:" + target);
+      //console.log("時間:" + duration);
+      //console.log("位移:" + offset);
+
+      // 上方位置 = 目標區塊.位移().上方位置
+      var top = $(target).offset().top;
+      //console.log("要前往元素的上方位置:" + top);
+
+      // 網頁元素.停止().動畫({ 上方捲動:指定元素 - 位移},持續時間)
+      // parseInt() 將文字轉為數字
+
+      $("html").stop().animate({
+        scrollTop: top - offset
+      }, parseInt(duration));
+    }
+  });
+});
     function debounce(func, wait = 20, immediate = true) {
           var timeout;
           return function() {

BIN
img/about/Bar.png


BIN
img/about/PC.png


BIN
img/about/home_六角.png


BIN
img/about/home_黑.png


BIN
img/about/slide.png


BIN
img/about/textgrp3.png


BIN
img/about/video.png


BIN
img/about/圖層 13.png


BIN
img/组 6.png


BIN
img/组 7.png


BIN
img/组 8.png


BIN
img/组 9.png


+ 82 - 23
style.css

@@ -269,17 +269,17 @@ p {
   font-family: "Roboto", Helvetica, Arial, sans-serif;
   font-weight: 900;
   line-height: 1.1;
-  color: #333333;
+  color: #e95412;
 }
 
 .sec-hero .hero-title {
-  font-size: 3.5rem;
+  font-size: 48px;
   letter-spacing: 1px;
   padding-top: 0rem;
 }
 
 .sec-hero .hero-txt {
-  font-size: 1.5em;
+  font-size: 30px;
   letter-spacing: 1px;
 }
 
@@ -288,8 +288,8 @@ p {
   outline: none;
   border-radius: 3rem;
   margin-top: 2rem;
-  padding: 1rem 2.5rem;
-  background: linear-gradient(20deg, #ea5413, #920783);
+  padding: 0.5rem 2.5rem;
+  background: #e95412;
   color: white;
   font-size: 1.8rem;
   -webkit-box-shadow: 1px 1px 5px 1px rgba(207, 207, 207, 0.534);
@@ -320,21 +320,41 @@ p {
   width: 80px;
 }
 
+.hero-slide {
+  width: 100px;
+  z-index: 3;
+  position: absolute;
+  top: 1%;
+  left: -1%;
+  -webkit-animation: floating2 5s infinite ease-in-out;
+          animation: floating2 5s infinite ease-in-out;
+}
+
 .hero-textgrp {
   z-index: 3;
   position: absolute;
-  left: 5%;
-  top: 10%;
+  left: -10%;
+  bottom: 10%;
   -webkit-animation: floating3 6s infinite 1s ease-in-out;
           animation: floating3 6s infinite 1s ease-in-out;
   width: 300px;
 }
 
+.hero-aips {
+  z-index: 3;
+  position: absolute;
+  right: 0%;
+  bottom: 10%;
+  -webkit-animation: floating3 6s infinite 1s ease-in-out;
+          animation: floating3 6s infinite 1s ease-in-out;
+  width: 250px;
+}
+
 .hero-video {
   z-index: 3;
   position: absolute;
-  right: 3%;
-  top: -5%;
+  right: 10%;
+  top: -10%;
   -webkit-animation: floating 8s infinite 1.5s ease-in-out;
           animation: floating 8s infinite 1.5s ease-in-out;
   width: 120px;
@@ -425,8 +445,8 @@ p {
             transform: translate(0px, 0);
   }
   65% {
-    -webkit-transform: translate(0px, 10px);
-            transform: translate(0px, 10px);
+    -webkit-transform: translate(0px, 30px);
+            transform: translate(0px, 30px);
   }
   to {
     -webkit-transform: translate(0, 0px);
@@ -440,8 +460,8 @@ p {
             transform: translate(0px, 0);
   }
   65% {
-    -webkit-transform: translate(0px, 10px);
-            transform: translate(0px, 10px);
+    -webkit-transform: translate(0px, 30px);
+            transform: translate(0px, 30px);
   }
   to {
     -webkit-transform: translate(0, 0px);
@@ -449,6 +469,13 @@ p {
   }
 }
 
+.nav-link {
+  border: none;
+  outline: none;
+  background-color: transparent;
+  color: black;
+}
+
 /* sec-features */
 .ai-spokesgril {
   display: -webkit-box;
@@ -531,8 +558,6 @@ p {
 
 .sec-features .features-col .features-block {
   position: absolute;
-  left: 10rem;
-  top: 6rem;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -541,11 +566,11 @@ p {
   transition: all 0.8s;
 }
 
-.sec-features .features-col .features-block h3 {
+.sec-features h3 {
   font-family: "Roboto", Helvetica, Arial, sans-serif;
   font-weight: 900;
   line-height: 1.1;
-  color: #333333;
+  color: #e95412;
 }
 
 .sec-features .features-col .block-right {
@@ -770,6 +795,10 @@ p {
   }
 }
 
+#compression {
+  display: none;
+}
+
 .home-page {
   position: relative;
   height: 100vh;
@@ -791,10 +820,6 @@ p {
   height: 33vh;
 }
 
-.home-page #compression {
-  display: none;
-}
-
 .home-page .homebutton-box {
   background-image: url(./img/BG_3png.png);
   background-size: cover;
@@ -843,17 +868,21 @@ p {
   }
 }
 
+.home-btn {
+  -webkit-filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(108deg) brightness(104%) contrast(104%);
+          filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(108deg) brightness(104%) contrast(104%);
+}
+
 .demo-btn {
   width: 90%;
   margin: 0 auto;
-  background: #3f4c72;
   font-size: 32px;
   padding: 10px 20px;
   text-decoration: none;
   color: white;
   border: none;
   display: block;
-  padding: 6rem 0;
+  padding: 3rem 0;
   text-align: center;
 }
 
@@ -861,6 +890,32 @@ p {
   color: white;
 }
 
+.demo-box {
+  background: #E2E2E2;
+  width: 90%;
+  margin: 0 auto;
+}
+
+.demo-box .demo-card {
+  padding: 4rem 30px;
+}
+
+.demo-box li {
+  font-size: 17px;
+}
+
+.demo-box .demo-CTA {
+  color: #fff;
+  padding: 15px 50px;
+  font-size: 24px;
+  -webkit-transition: 1s;
+  transition: 1s;
+}
+
+.demo-box .demo-CTA:hover {
+  opacity: 0.7;
+}
+
 .features-nav .dropdown-toggle::after {
   display: inline-block;
   margin-left: 0.255em;
@@ -901,4 +956,8 @@ p {
 .video-img {
   cursor: pointer;
 }
+
+.aboutpage {
+  height: 100vh;
+}
 /*# sourceMappingURL=style.css.map */

Những thai đổi đã bị hủy bỏ vì nó quá lớn
+ 0 - 0
style.css.map


+ 78 - 29
style.scss

@@ -297,18 +297,18 @@ p {
     font-family: "Roboto", Helvetica, Arial, sans-serif;
     font-weight: 900;
     line-height: 1.1;
-    color: #333333;
+    color: #e95412;
   }
 }
 
 .sec-hero .hero-title {
-  font-size: 3.5rem;
+  font-size: 48px;
   letter-spacing: 1px;
   padding-top: 0rem;
 }
 
 .sec-hero .hero-txt {
-  font-size: 1.5em;
+  font-size:30px;
   letter-spacing: 1px;
 }
 
@@ -317,8 +317,10 @@ p {
   outline: none;
   border-radius: 3rem;
   margin-top: 2rem;
-  padding: 1rem 2.5rem;
-  background: linear-gradient(20deg, #ea5413, #920783);
+  padding: 0.5rem 2.5rem;
+  // background: linear-gradient(20deg, #ea5413, #920783);
+  background:#e95412 ;
+
   color: white;
   font-size: 1.8rem;
   box-shadow: 1px 1px 5px 1px rgba(207, 207, 207, 0.534);
@@ -347,20 +349,36 @@ p {
   width: 80px;
 }
 
+.hero-slide{
+  width: 100px;
+  z-index: 3;
+  position: absolute;
+  top: 1%;
+  left: -1%;
+  animation: floating2 5s infinite ease-in-out;
+}
 .hero-textgrp {
   z-index: 3;
   position: absolute;
-  left: 5%;
-  top: 10%;
+  left: -10%;
+  bottom: 10%;
   animation: floating3 6s infinite 1s ease-in-out;
   width: 300px;
 }
+.hero-aips{
+  z-index: 3;
+  position: absolute;
+  right: 0%;
+  bottom: 10%;
+  animation: floating3 6s infinite 1s ease-in-out;
+  width: 250px;
+}
 
 .hero-video {
   z-index: 3;
   position: absolute;
-  right: 3%;
-  top: -5%;
+  right: 10%;
+  top: -10%;
   animation: floating 8s infinite 1.5s ease-in-out;
   width: 120px;
 }
@@ -412,12 +430,18 @@ p {
     transform: translate(0px, 0);
   }
   65% {
-    transform: translate(0px, 10px);
+    transform: translate(0px, 30px);
   }
   to {
     transform: translate(0, -0px);
   }
 }
+.nav-link {
+  border: none;
+  outline: none;
+  background-color: transparent;
+  color: black;
+}
 
 /* sec-features */
 .ai-spokesgril {
@@ -492,19 +516,21 @@ p {
 
 .sec-features .features-col .features-block {
   position: absolute;
-  left: 10rem;
-  top: 6rem;
+  // left: 10rem;
+  // top: 6rem;
   display: flex;
   opacity: 0;
   transition: all 0.8s;
+ 
+}
+.sec-features{
   h3 {
     font-family: "Roboto", Helvetica, Arial, sans-serif;
     font-weight: 900;
     line-height: 1.1;
-    color: #333333;
+    color:#e95412;
   }
 }
-
 .sec-features .features-col .block-right {
   transform: translateX(-30%) scale(0.95);
 }
@@ -655,7 +681,7 @@ p {
   }
 }
 :fullscreen {
-  #expand{
+  #expand {
     display: none;
   }
   .home-page {
@@ -670,6 +696,9 @@ p {
     }
   }
 }
+#compression {
+  display: none;
+}
 // 首頁
 .home-page {
   position: relative;
@@ -683,9 +712,7 @@ p {
   .home-box {
     height: 33vh;
   }
-  #compression{
-    display: none;
-  }
+ 
   .homebutton-box {
     background-image: url(./img/BG_3png.png);
     background-size: cover;
@@ -696,16 +723,14 @@ p {
         font-size: 32px;
         text-align: center;
         transition: 0.5s;
-
       }
       img {
         width: 100px;
         transition: 0.5s;
-
         filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(108deg) brightness(104%) contrast(104%);
       }
       &:hover {
-        h1{
+        h1 {
           font-size: 26px;
         }
         img {
@@ -733,13 +758,11 @@ p {
   //   animation-name: wheel;
   //   animation-duration: 10s;
   // }
+}
+.home-btn{
+  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(108deg) brightness(104%) contrast(104%);
   
-  // .paggy{
-  //   position: relative;
-  //   bottom:500px;
-  // }
 }
-
 // @keyframes wheel {
 //  0%{
 //    transform: rotate(0);
@@ -748,25 +771,47 @@ p {
 //   transform: rotate(10deg);
 // }
 // }
-// demo
 
+// demo
 .demo-btn {
   width: 90%;
   margin: 0 auto;
-  background: #3f4c72;
+  // background: #3f4c72;
   font-size: 32px;
   padding: 10px 20px;
   text-decoration: none;
   color: white;
   border: none;
   display: block;
-  padding: 6rem 0;
+  padding: 3rem 0;
   text-align: center;
   &:hover {
     color: white;
   }
 }
 
+.demo-box{
+  background:#E2E2E2;
+  width: 90%;
+  margin:0 auto ;
+  .demo-card{
+    padding: 4rem 30px;  
+  }
+  li{
+    font-size: 17px;
+  }
+  .demo-CTA{
+    color:#fff;
+    padding: 15px 50px;
+    font-size: 24px;
+    transition: 1s;
+    &:hover{
+      opacity: 0.7;
+    }
+  }
+
+}
+
 .features-nav {
   .dropdown-toggle {
     &::after {
@@ -812,3 +857,7 @@ p {
 .video-img {
   cursor: pointer;
 }
+
+.aboutpage{
+height:100vh;
+}

Một số tệp đã không được hiển thị bởi vì quá nhiều tập tin thay đổi trong này khác