demo頁面高度調整

demo.html

@@ -72,18 +72,20 @@
       <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 set-lan="html:make_video_txt1">文字轉影片，輕鬆完成</li>
-                  <li set-lan="html:make_video_txt2">無需演員及相機，一鍵生成影片</li>
-                </ul>
+            <div style="background: #E2E2E2;" class="h-100">
+              <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 set-lan="html:make_video_txt1">文字轉影片，輕鬆完成</li>
+                    <li set-lan="html:make_video_txt2">無需演員及相機，一鍵生成影片</li>
+                  </ul>
+                </div>
               </div>
               <div class="text-center">
                 <button style="background:#193179;" class="demo-CTA border-0 mb-5" set-lan="html:try_it_out" onclick="direct()">開始製作</button>
@@ -91,19 +93,23 @@
             </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>
-            </a>
-            <div class="demo-box">
-              <div class="demo-card">
-                <ul>
-                  <li set-lan="html:make_video_auto_txt">輸入主題詞，一鍵自動完成影片</li>
-                </ul>
+            <div style="background: #E2E2E2;" class="h-100">
+              <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>
+              </a>
+              <div class="demo-box">
+                <div class="demo-card">
+                  <ul>
+                    <li set-lan="html:make_video_auto_txt">輸入主題詞，一鍵自動完成影片</li>
+                    <li style="opacity: 0;" set-lan="html:make_video_auto_txt">輸入主題詞，一鍵自動完成影片</li>
+
+                  </ul>
+                </div>
               </div>
               <div class="text-center">
                 <button style="background:#193179;" class="demo-CTA border-0 mb-5" set-lan="html:try_it_out" onclick="direct()">開始製作</button>
@@ -111,15 +117,17 @@
             </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 style="background: #E2E2E2;" class="h-100">
+              <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>

style.css

@@ -732,6 +732,14 @@ p {
   color: #fff;
   background: #3C57A7;
   font-size: 28px;
+  -webkit-transition: 0.5s;
+  transition: 0.5s;
+}
+
+.video-int .video-btn:hover {
+  color: #3C57A7;
+  background: #fff;
+  border: 1px solid #3C57A7;
 }
 
 ::-webkit-scrollbar-track {
@@ -887,8 +895,6 @@ p {
 }
 
 .demo-btn {
-  width: 90%;
-  margin: 0 auto;
   font-size: 32px;
   padding: 10px 20px;
   text-decoration: none;
@@ -917,7 +923,7 @@ p {
   font-size: 17px;
 }
 
-.demo-box .demo-CTA {
+.demo-CTA {
   color: #fff;
   padding: 15px 50px;
   font-size: 24px;
@@ -925,7 +931,7 @@ p {
   transition: 1s;
 }
 
-.demo-box .demo-CTA:hover {
+.demo-CTA:hover {
   opacity: 0.7;
 }
 
@@ -944,7 +950,8 @@ p {
   cursor: pointer;
   position: fixed;
   bottom: 50px;
-  right: 50px;
+  right: 150px;
+  color: #193179;
 }
 
 .sec-video {

style.scss

@@ -680,6 +680,12 @@ p {
       color:#fff;
       background: #3C57A7;
       font-size: 28px;
+      transition: 0.5s;
+      &:hover{
+        color:#3C57A7;
+        background: #fff;
+        border:1px solid #3C57A7;
+      }
     
   }
 }
@@ -791,8 +797,8 @@ p {
 
 // demo
 .demo-btn {
-  width: 90%;
-  margin: 0 auto;
+  // width: 90%;
+  // margin: 0 auto;
   // background: #3f4c72;
   font-size: 32px;
   padding: 10px 20px;
@@ -817,16 +823,16 @@ p {
   li{
     font-size: 17px;
   }
-  .demo-CTA{
-    color:#fff;
-    padding: 15px 50px;
-    font-size: 24px;
-    transition: 1s;
-    &:hover{
-      opacity: 0.7;
-    }
+  
+}
+.demo-CTA{
+  color:#fff;
+  padding: 15px 50px;
+  font-size: 24px;
+  transition: 1s;
+  &:hover{
+    opacity: 0.7;
   }
-
 }
 
 .features-nav {
@@ -850,7 +856,8 @@ p {
   cursor: pointer;
   position: fixed;
   bottom: 50px;
-  right: 50px;
+  right: 150px;
+  color: #193179;
 }
 
 .sec-video {

usecases.html

@@ -167,8 +167,11 @@
                     </div>
         </div>
         </section>
-        <img id='gotop' class="btn-gotop" width="50" data-gt-target="#top" data-gt-duration="500" data-gt-offset="0" src="./img/go-up.png"
-        alt="">
+        <!-- <img id='gotop' class="btn-gotop" width="50" data-gt-target="#top" data-gt-duration="500" data-gt-offset="0" src="./img/go-up.png"
+        alt=""> -->
+       
+        <i style="font-size: 48px; position: fixed; bottom:50px; right:50px; color:#193179; cursor: pointer; z-index: 100;"
+        data-gt-target="#top" data-gt-duration="500" class="btn-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"
@@ -195,6 +198,7 @@
                 scrollTop: 0
             }, 500)
         });
+
         //   openFullscreen();
         var expandbtn = document.getElementById("expand");
         var compressionbtn = document.getElementById("compression");