功能新增

goto.js

@@ -19,145 +19,336 @@ $("#card-box").slick({
   infinite: false,
 });
 
-// 手機課程大綱彈跳視窗
-// 視窗一
+  // 手機課程大綱彈跳視窗
+  // 視窗一
+
+  $(".box-img01").click(function () {
+    $(".mobile01-1").fadeIn();
+    $(".mobile-box1").fadeIn();
+    $(".card-box-1").slick({
+      arrows: false,
+      slidesToShow: 1,
+      centerMode: true,
+      infinite: false,
+    });
+  });
+
+  $(".close").click(function () {
+    $(".mobile-box1").fadeOut();
+    $(".mobile01-1").fadeOut();
 
-$(".box-img01").click(function () {
-  $(".mobile01-1").fadeIn();
-  $(".mobile-box1").fadeIn();
-  $(".card-box-1").slick({
-    arrows: false,
-    slidesToShow: 1,
-    centerMode: true,
-    infinite: false,
   });
-});
 
-$(".close").click(function () {
-  $(".mobile-box1").fadeOut();
-  $(".mobile01-1").fadeOut();
 
-});
 
+  // 視窗二
+  $(".mobile01-2").fadeOut(0);
+  $(".mobile-box2").fadeOut(0);
 
+  $(".box-img02").click(function () {
+    $(".mobile01-2").fadeIn();
+    $(".mobile-box2").fadeIn();
+    $(".card-box-2").slick({
+      arrows: false,
+      slidesToShow: 1,
+      centerMode: true,
+      infinite: false,
+    });
+  });
 
-// 視窗二
-$(".mobile01-2").fadeOut(0);
-$(".mobile-box2").fadeOut(0);
+  $(".close").click(function () {
+    $(".mobile-box2").fadeOut();
+    $(".mobile01-2").fadeOut();
 
-$(".box-img02").click(function() {
-  $(".mobile01-2").fadeIn();
-  $(".mobile-box2").fadeIn();
-  $(".card-box-2").slick({
-    arrows: false,
-    slidesToShow: 1,
-    centerMode: true,
-    infinite: false,
   });
-});
 
-$(".close").click(function(){
-$(".mobile-box2").fadeOut();
-$(".mobile01-2").fadeOut();
 
-});
+  // 視窗三
+  $(".mobile01-3").fadeOut(0);
+  $(".mobile-box3").fadeOut(0);
 
+  $(".box-img03").click(function () {
+    $(".mobile01-3").fadeIn();
+    $(".mobile-box3").fadeIn();
+    $(".card-box-3").slick({
+      arrows: false,
+      slidesToShow: 1,
+      centerMode: true,
+      infinite: false,
+    });
+
+  });
+
+  $(".close").click(function () {
+    $(".mobile-box3").fadeOut();
+    $(".mobile01-3").fadeOut();
+
+  });
 
-// 視窗三
-$(".mobile01-3").fadeOut(0);
-$(".mobile-box3").fadeOut(0);
 
-$(".box-img03").click(function() {
-  $(".mobile01-3").fadeIn();
-  $(".mobile-box3").fadeIn();
-  $(".card-box-3").slick({
+  // 手機課程日程輪播
+  $("#card-box2").slick({
     arrows: false,
     slidesToShow: 1,
     centerMode: true,
     infinite: false,
   });
-  
-});
 
-$(".close").click(function(){
-$(".mobile-box3").fadeOut();
-$(".mobile01-3").fadeOut();
+  // 手機選單彈跳視窗
+  $("#menu-box2").hide();
+  $("#menu-box").hide();
 
-});
+  $("#menu-btn1").click(function () {
 
+    $("#menu-box").slideToggle("slow");
+    $("#menu-box2").slideToggle("slow");
 
-// 手機課程日程輪播
-$("#card-box2").slick({
-  arrows: false,
-  slidesToShow: 1,
-  centerMode: true,
-  infinite: false,
-});
+  });
+  $(".link").click(function () {
+    $("#menu-box").slideUp("slow", function () {
+      $("#menu-box2").slideUp("slow");
+      // Animation complete.
+    });
+  });
 
-// 手機選單彈跳視窗
-$("#menu-box2").hide();
-$("#menu-box").hide();
+  $("*").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));
+      }
+    });
+  });
 
-$("#menu-btn1").click(function () {
+  // 避免動畫與使用者滾輪衝突
+  // html 在滾動滾輪時 停止 html 所有效果
+  $("html").on("mousewheel", function () {
+    $("html").stop();
+  });
 
-  $("#menu-box").slideToggle("slow");
-  $("#menu-box2").slideToggle("slow");
+  // gotop下滑效果
+  $(".arrow").hide();
+  $(window).scroll(function () {
+    var y = window.scrollY;
+
+    if (y > 10) {
+      $(".arrow").show();
+    } else {
+      $(".arrow").hide();
+    }
 
-});
-$(".link").click(function () {
-  $("#menu-box").slideUp("slow", function () {
-    $("#menu-box2").slideUp("slow");
-    // Animation complete.
   });
-});
 
-$("*").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));
-    }
+
+  $.fn.serializeObject = function () {
+    var o = {};
+    var a = this.serializeArray();
+    // o["id"] = 0;
+    // o["time_stamp"] = "";
+    $.each(a, function () {
+      if (o[this.name]) {
+        if (!o[this.name].push) {
+          o[this.name] = [o[this.name]];
+        }
+        o[this.name].push(this.value || '');
+      } else {
+        o[this.name] = this.value || '';
+      }
+    });
+
+    return o;
+  };
+
+  $(".contact-form").submit(function (e) {
+    /*	var formRef = $('#form1').serializeArray();
+      var jsonString = JSON.stringify(formRef);*/
+    var jsonInfo = $('.contact-form').serializeObject();
+    var jsonString = JSON.stringify(jsonInfo);
+    console.log(jsonString),
+      $.ajax({
+        type: 'POST',
+        url: 'http://172.105.205.52:8001/add_client_info',
+        data: jsonString,
+        dataType: 'json',
+
+
+        success: function (data) {
+          console.log('送出成功: ' + data);
+          alert("送出成功");
+          // if (data == 0) {
+          //   alert("送出成功");
+          // } else if (data == 1) {
+          //   alert("此email已填過表單");
+          // } else if (data == 2) {
+          //   alert("此phone已填過表單");
+          // } else if (data == 3) {
+          //   alert("此email、phone已填過表單");
+          // }
+          location.reload();
+        },
+        beforeSend: function () {
+          console.log('beforeSend');
+        },
+        complete: function () {
+          console.log('complete');
+        },
+        error: function (jqXHR, textStatus, errorThrown) {
+          console.log(JSON.stringify(jqXHR));
+          console.log("AJAX errr: " + textStatus + ' : ' + errorThrown);
+          console.log('送出失敗: ' + jqXHR.responseText);
+        }
+      });
+    return false;
   });
-});
 
-// 避免動畫與使用者滾輪衝突
-// html 在滾動滾輪時 停止 html 所有效果
-$("html").on("mousewheel", function () {
-  $("html").stop();
-});
-$(".arrow").hide();
-$(window).scroll(function () {
-  var y = window.scrollY;
+  $(function () {
 
-  if (y > 10) {
-    $(".arrow").show();
-  } else {
-    $(".arrow").hide();
-  }
+    $(".box1").hover(
+      function () {
+        $("#title1").html('課程1手機拍片');
+        $("#title1-1").html('知名媒體網站電視台店長');
 
-});
+      },
+
+      function () {
+        $("#title1").html('課程1');
+        $("#title1-1").html('手機拍片');
+
+      })
+  });
+
+  $(function () {
+
+    $(".box2").hover(
+      function () {
+        $("#title2").html('課程2社群營造');
+        $("#title2-1").html('資深數位廣告投手');
+
+      },
+
+      function () {
+        $("#title2").html('課程2');
+        $("#title2-1").html('社群營造');
+      })
+  });
+  $(function () {
+
+    $(".box3").hover(
+      function () {
+        $("#title3").html('課程3文案撰寫');
+        $("#title3-1").html('資深新聞媒體工作者');
+
+      },
+
+      function () {
+        $("#title3").html('課程3');
+        $("#title3-1").html('文案撰寫');
+      })
+  });
+
+  // 電腦版彈跳視窗
+  $("#Course-box01").fadeOut(0);
+  $(".Course-box01").fadeOut(0);
+
+  $("#Course-box02").fadeOut(0);
+  $(".Course-box01").fadeOut(0);
+
+  $("#Course-box03").fadeOut(0);
+  $(".Course-box01").fadeOut(0);
+
+  // 電腦版視窗一
+  $(".box1").click(function () {
+    $("#Course-box01").fadeIn();
+    $(".Course-box01").fadeIn();
+
+  });
+
+  $(".close").click(function () {
+    $("#Course-box01").fadeOut();
+    $(".Course-box01").fadeOut();
 
+  });
+
+  // 電腦版視窗二
+  $(".box2").click(function () {
+    $("#Course-box02").fadeIn();
+    $(".Course-box01").fadeIn();
+
+  });
+
+  $(".close").click(function () {
+    $("#Course-box02").fadeOut();
+    $(".Course-box01").fadeOut();
+
+  });
+
+  // 電腦版視窗三
+  $(".box3").click(function () {
+    $("#Course-box03").fadeIn();
+    $(".Course-box01").fadeIn();
+
+  });
+
+  $(".close").click(function () {
+    $("#Course-box03").fadeOut();
+    $(".Course-box01").fadeOut();
+
+  });
+
+  (function () {
+    const second = 1000,
+          minute = second * 60,
+          hour = minute * 60,
+          day = hour * 24;
+  
+    let birthday = "July 21, 2021 00:00:00",
+        countDown = new Date(birthday).getTime(),
+        x = setInterval(function() {    
+  
+          let now = new Date().getTime(),
+              distance = countDown - now;
+  
+          document.getElementById("days").innerText = Math.floor(distance / (day)),
+            document.getElementById("hours").innerText = Math.floor((distance % (day)) / (hour)),
+            document.getElementById("minutes").innerText = Math.floor((distance % (hour)) / (minute)),
+            document.getElementById("seconds").innerText = Math.floor((distance % (minute)) / second);
+  
+          //do something later when date is reached
+          if (distance < 0) {
+            let headline = document.getElementById("headline"),
+                countdown = document.getElementById("countdown"),
+                content = document.getElementById("content");
+  
+            headline.innerText = "It's my birthday!";
+            countdown.style.display = "none";
+            content.style.display = "block";
+  
+            clearInterval(x);
+          }
+          //seconds
+        }, 0)
+    }());

index.html

@@ -28,11 +28,10 @@
                 <a href="https://hhh.com.tw/"> <img src="./img/logo-main-1-1.webp" alt=""></a>
             </div>
             <div id="link" class="col-md-10 col-lg-8">
-                <a href="">首頁</a>
-                <a data-gt-target="#contact-us" data-gt-duration="800" data-gt-offset="-300">你有以下困擾嗎?</a>
-                <a data-gt-target="#feedback" data-gt-duration="500" data-gt-offset="0">精華課程大綱</a>
-                <a data-gt-target="#service-process" data-gt-duration="500" data-gt-offset="0">3Days上課日程</a>
-                <a data-gt-target="#service-process" data-gt-duration="500" data-gt-offset="0">收款資訊+客服資訊</a>
+                <a data-gt-target="#trouble" data-gt-duration="800" data-gt-offset="-300">你有以下困擾嗎?</a>
+                <a data-gt-target="#Course-list" data-gt-duration="500" data-gt-offset="0">精華課程大綱</a>
+                <a data-gt-target="#course-schedule" data-gt-duration="500" data-gt-offset="0">3Days上課日程</a>
+                <a data-gt-target="#information" data-gt-duration="500" data-gt-offset="0">收款資訊+客服資訊</a>
             </div>
             <img id="menu-btn1" src="./img/mobile-logo/menu.png" alt="">
         </div>
@@ -83,11 +82,24 @@
         <div class="banner1" class="container-fluid">
             <img id="bannertitle" src="./img/banner/banner-title.png" alt="">
             <h1>掌握關鍵三招，增粉再增變現能力</h1>
-            <img id="countdown" src="./img/banner/countdown.png" alt="">
+            <!-- <img id="countdown" src="./img/banner/countdown.png" alt=""> -->
+            <div class="container" style="margin: 0; padding: 0;">
+                <div id="countdown">
+                    <ul>
+                        <li><span id="days"></span><span id="unit0" style="padding-left: 5vw;" class="unit">DAYS</span>
+                        </li>
+                        <li><span id="hours"></span><span id="unit1" class="unit">HOURS</span></li>
+                        <li><span id="minutes"></span><span id="unit2" class="unit">MINUTES</span></li>
+                        <li><span id="seconds" style="border:none; padding-right: 0px;"></span><span
+                                class="unit">SECONDS</span></li>
+                    </ul>
+                </div>
+            </div>
             <!-- 手機背景 -->
             <img id="mobilecover" src="./img/banner/cover1webp.webp" alt="">
             <button class="btn">手刀報名</button>
         </div>
+
     </section>
     <img class="arrow" data-gt-target="#top" data-gt-duration="800" data-gt-offset="0" src="./img/gotop.png" alt="">
 
@@ -95,8 +107,7 @@
         <div id="content" class="row">
             <img src="./img/91899837_L11.webp" class="col-12 order-2 col-md-7 order-md-2 col-lg-7 order-lg-1"
                 style="padding:5vw 0;margin: 0;" alt="">
-            <div id="trouble-text" class="col-12 order-1 col-md-5 order-md-2 col-lg-5 order-lg-2"
-                style="margin: 0;">
+            <div id="trouble-text" class="col-12 order-1 col-md-5 order-md-2 col-lg-5 order-lg-2" style="margin: 0;">
                 <div class="text-box">
                     <p>Do You Have the following Problems</p>
                     <h1 class="title-main">你有以下困擾嗎?</h1>
@@ -125,34 +136,35 @@
         </div>
         <div id="Course-content">
             <div id="row" class="row">
-                <div class="box col-12 col-md-4">
-                    <h1>課程1</h1>
-                    <h2>手機拍片</h2>
+                <div class="box1 col-12 col-md-4">
+                    <h1 id="title1">課程1</h1>
+                    <h2 id="title1-1">手機拍片</h2>
                     <div class="box-img">
                         <img src="./img/Course-list/box1.png" alt="">
                     </div>
+                    <div id="teacher-name1"></div>
                     <div class="box-img2">
-
                         <img src="./img/Course-list/box11.png" style="padding-top:1.9vw ;" alt="">
                     </div>
                 </div>
-                <div class="box col-12 col-md-4">
-                    <h1>課程2</h1>
-                    <h2>社群營造</h2>
-                    <div class="box-img">
+                <div class="box2 col-12 col-md-4">
+                    <h1 id="title2">課程2</h1>
+                    <h2 id="title2-1">社群營造</h2>
+                    <div id="boximg1" class="box-img">
                         <img src="./img/Course-list/box2.png" alt="">
                     </div>
+                    <div id="teacher-name2"></div>
                     <div class="box-img2">
-
                         <img src="./img/Course-list/box12.png" style="padding-top:0.5vw" alt="">
                     </div>
                 </div>
-                <div class="box col-12 col-md-4">
-                    <h1>課程1</h1>
-                    <h2>文案撰寫</h2>
+                <div class="box3 col-12 col-md-4">
+                    <h1 id="title3">課程1</h1>
+                    <h2 id="title3-1">文案撰寫</h2>
                     <div class="box-img">
                         <img src="./img/Course-list/box3.png" alt="">
                     </div>
+                    <div id="teacher-name3"></div>
                     <div class="box-img2">
                         <img src="./img/Course-list/box13.png" style="padding-top:1vw" alt="">
                     </div>
@@ -240,8 +252,9 @@
                     <div class="card-title">1. 市場狀況</div>
                     <div>國人擁有社群帳號比例、</div>
                     <div>使用社群帳號頻率</div>
+                    <div style="opacity: 0;">1111</div>
                     <div class="box-img">
-                        <img src="./img/course-box02/box1.png" alt="">
+                        <img style="width: 12vw;" src="./img/course-box02/box1.png" alt="">
                     </div>
                     <div class="box-img2">
 
@@ -252,6 +265,7 @@
                     <div class="card-title">2. FB經營重要性</div>
                     <div>使用人數眾多、觸及率、</div>
                     <div>與實體結合度、帶動業績成長</div>
+                    <div style="opacity: 0;">1111</div>
                     <div class="box-img">
                         <img src="./img/course-box02/box2.png" alt="">
                     </div>
@@ -277,6 +291,7 @@
                     <div class="card-title">4. 經營規劃</div>
                     <div>主題規劃、小編個性、</div>
                     <div>ｃｕｅ表</div>
+                    <div style="opacity: 0;">1111</div>
                     <div class="box-img">
                         <img src="./img/course-box02/box4.png" alt="">
                     </div>
@@ -306,7 +321,7 @@
             <h1>文案撰寫，你可以學到</h1>
             <hr class="line" style="opacity: 1;">
             <div id="box03" class="row">
-                <div class="card col-lg-4">
+                <div class="card col-lg-5">
                     <div class="card-title">1. 掌握文字能力</div>
                     <div>用文案創造出</div>
                     <div>消費者心中畫面感</div>
@@ -318,7 +333,7 @@
                         <img src="./img/course-box03/box13.png" alt="">
                     </div>
                 </div>
-                <div class="card col-lg-4">
+                <div class="card col-lg-5">
                     <div class="card-title">2. 營造自己的風格差異性</div>
                     <div>從品牌屬性與定位</div>
                     <div>找出文案切入點</div>
@@ -330,7 +345,7 @@
                         <img src="./img/course-box03/box13.png" alt="">
                     </div>
                 </div>
-                <div class="card col-lg-4">
+                <div class="card col-lg-5">
                     <div class="card-title">3. 抓住受眾的心</div>
                     <div>找到自己的主要客群，</div>
                     <div>說他們想聽的</div>
@@ -347,44 +362,44 @@
     </section>
     <!-- 手機板課程大綱 -->
     <section id="mobile01" class="sec04 container-fluid" style="padding:0;margin: 0; ">
-            <p>Essential Course Syllabus</p>
-            <h1 class="title-main">精華課程大綱</h1>
-            <hr class="line" style="opacity: 1;">
-            <div id="card-box" class="row">
-                <div class="card col-8">
-                    <h1 class="card-title" style="font-weight: 900;">課程1手機拍片</h1>
-                    <h2>知名媒體網站電視台店長</h2>
-                    <div class="box-img01">
-                        <img src="./img/people.png" alt="">
-                    </div>
-                    <h1 class="name" style="font-family:追奇手寫體;">Vincent</h1>
-                    <div class="box-img2" style="padding: 0;">
-                        <img src="./img/Course-list/box11.png" style="padding-top:1vw" alt="">
-                    </div>
+        <p>Essential Course Syllabus</p>
+        <h1 class="title-main">精華課程大綱</h1>
+        <hr class="line" style="opacity: 1;">
+        <div id="card-box" class="row">
+            <div class="card col-8">
+                <h1 class="card-title" style="font-weight: 900;">課程1手機拍片</h1>
+                <h2>知名媒體網站電視台店長</h2>
+                <div class="box-img01">
+                    <img src="./img/people.png" alt="">
                 </div>
-                <div class="card col-8">
-                    <h1 class="card-title" style="font-weight: 900;">課程2社群營造</h1>
-                    <h2>資深數位廣告投手</h2>
-                    <div class="box-img02">
-                        <img src="./img/people.png" alt="">
-                    </div>
-                    <h1 class="name" style="font-family:追奇手寫體;">John</h1>
-                    <div class="box-img2">
-                        <img src="./img/Course-list/box12.png" style="padding-top:1vw" alt="">
-                    </div>
+                <h1 class="name" style="font-family:追奇手寫體;">Vincent</h1>
+                <div class="box-img2" style="padding: 0;">
+                    <img src="./img/Course-list/box11.png" style="padding-top:1vw" alt="">
                 </div>
-                <div class="card col-8">
-                    <h1 class="card-title" style="font-weight: 900;">課程3文案撰寫</h1>
-                    <h2>資深新聞媒體工作者</h2>
-                    <div class="box-img03">
-                        <img src="./img/people.png" alt="">
-                    </div>
-                    <h1 class="name" style="font-family:追奇手寫體;">Jennifer</h1>
-                    <div class="box-img2">
-                        <img src="./img/Course-list/box13.png" style="padding-top:1vw" alt="">
-                    </div>
+            </div>
+            <div class="card col-8">
+                <h1 class="card-title" style="font-weight: 900;">課程2社群營造</h1>
+                <h2>資深數位廣告投手</h2>
+                <div class="box-img02">
+                    <img src="./img/people.png" alt="">
+                </div>
+                <h1 class="name" style="font-family:追奇手寫體;">John</h1>
+                <div class="box-img2">
+                    <img src="./img/Course-list/box12.png" style="padding-top:1vw" alt="">
+                </div>
+            </div>
+            <div class="card col-8">
+                <h1 class="card-title" style="font-weight: 900;">課程3文案撰寫</h1>
+                <h2>資深新聞媒體工作者</h2>
+                <div class="box-img03">
+                    <img src="./img/people.png" alt="">
+                </div>
+                <h1 class="name" style="font-family:追奇手寫體;">Jennifer</h1>
+                <div class="box-img2">
+                    <img src="./img/Course-list/box13.png" style="padding-top:1vw" alt="">
                 </div>
             </div>
+        </div>
     </section>
     <!-- 課程彈跳視窗-手機板 -->
     <section class="mobile01-1" class="container-fluid">
@@ -403,7 +418,7 @@
                             <img style="width: 42vw;" src="./img/course-box/box1.png" alt="">
                         </div>
                         <div class="box-img2">
-                            <img  src="./img/Course-list/box11.png" alt="">
+                            <img src="./img/Course-list/box11.png" alt="">
                         </div>
                     </div>
                     <div class="card col-6">
@@ -414,7 +429,7 @@
                             <img src="./img/course-box/box2.png" alt="">
                         </div>
                         <div class="box-img2">
-    
+
                             <img src="./img/Course-list/box11.png" alt="">
                         </div>
                     </div>
@@ -426,7 +441,7 @@
                             <img src="./img/course-box/box3.png" alt="">
                         </div>
                         <div class="box-img2">
-    
+
                             <img src="./img/Course-list/box11.png" alt="">
                         </div>
                     </div>
@@ -438,7 +453,7 @@
                             <img src="./img/course-box/box4.png" alt="">
                         </div>
                         <div class="box-img2">
-    
+
                             <img src="./img/Course-list/box11.png" alt="">
                         </div>
                     </div>
@@ -450,7 +465,7 @@
                             <img style="width: 42vw;" src="./img/course-box/box5.png" alt="">
                         </div>
                         <div class="box-img2">
-    
+
                             <img src="./img/Course-list/box11.png" alt="">
                         </div>
                     </div>
@@ -473,7 +488,7 @@
                             <img style="width: 42vw;" src="./img/course-box/box1.png" alt="">
                         </div>
                         <div class="box-img2">
-                            <img  src="./img/Course-list/box11.png" alt="">
+                            <img src="./img/Course-list/box11.png" alt="">
                         </div>
                     </div>
                     <div class="card col-6">
@@ -484,7 +499,7 @@
                             <img src="./img/course-box/box2.png" alt="">
                         </div>
                         <div class="box-img2">
-    
+
                             <img src="./img/Course-list/box11.png" alt="">
                         </div>
                     </div>
@@ -496,7 +511,7 @@
                             <img src="./img/course-box/box3.png" alt="">
                         </div>
                         <div class="box-img2">
-    
+
                             <img src="./img/Course-list/box11.png" alt="">
                         </div>
                     </div>
@@ -508,7 +523,7 @@
                             <img src="./img/course-box/box4.png" alt="">
                         </div>
                         <div class="box-img2">
-    
+
                             <img src="./img/Course-list/box11.png" alt="">
                         </div>
                     </div>
@@ -520,7 +535,7 @@
                             <img style="width: 42vw;" src="./img/course-box/box5.png" alt="">
                         </div>
                         <div class="box-img2">
-    
+
                             <img src="./img/Course-list/box11.png" alt="">
                         </div>
                     </div>
@@ -544,7 +559,7 @@
                             <img style="width: 42vw;" src="./img/course-box/box1.png" alt="">
                         </div>
                         <div class="box-img2">
-                            <img  src="./img/Course-list/box11.png" alt="">
+                            <img src="./img/Course-list/box11.png" alt="">
                         </div>
                     </div>
                     <div class="card col-6">
@@ -555,7 +570,7 @@
                             <img src="./img/course-box/box2.png" alt="">
                         </div>
                         <div class="box-img2">
-    
+
                             <img src="./img/Course-list/box11.png" alt="">
                         </div>
                     </div>
@@ -567,7 +582,7 @@
                             <img src="./img/course-box/box3.png" alt="">
                         </div>
                         <div class="box-img2">
-    
+
                             <img src="./img/Course-list/box11.png" alt="">
                         </div>
                     </div>
@@ -579,7 +594,7 @@
                             <img src="./img/course-box/box4.png" alt="">
                         </div>
                         <div class="box-img2">
-    
+
                             <img src="./img/Course-list/box11.png" alt="">
                         </div>
                     </div>
@@ -591,7 +606,7 @@
                             <img style="width: 42vw;" src="./img/course-box/box5.png" alt="">
                         </div>
                         <div class="box-img2">
-    
+
                             <img src="./img/Course-list/box11.png" alt="">
                         </div>
                     </div>
@@ -731,11 +746,12 @@
                 <form class="contact-form col-md-6">
                     <input type="text" id="name" name="name" placeholder="姓名(必填, 詳答)" required>
                     <input type="text" id="company" name="organization" placeholder="公司名稱(必填, 詳答)">
-                    <select name="position" id="profession">
+                    <select name="position" id="profession" required>
                         <option value="" disabled selected="selected">職位</option>
+                        <option class="option">經理</option>
                     </select>
-                    <input type="text" id="phone" name="phone" placeholder="連絡電話(必填, 詳答)" required>
-                    <input type="text" id="email" name="email" placeholder="聯絡email(必填, 詳答)" required>
+                    <input type="text" id="phone" name="phone" placeholder="連絡電話(必填, 詳答)" pattern="09\d{2}\d{6}" required>
+                    <input type="email" id="email" name="email" placeholder="聯絡email(必填, 詳答)" required>
                     <input type="text" id="pay" name="cert_last5" placeholder="已匯款, 後五碼是(選填, 詳答)">
                     <textarea name="where_learn" id="message" cols="50" rows="3"
                         placeholder="是怎麼知道這個課程的(選填, 詳答)"></textarea> </textarea>
@@ -784,20 +800,22 @@
             </div>
         </div>
 
-        <div id="mobile-form" class="container-fluid" style="padding:0;margin: 0; ">
+        <!-- <div id="mobile-form" class="container-fluid" style="padding:0;margin: 0; ">
             <div id="form-card" class="row">
                 <form class="contact-form col-md-6">
                     <input type="text" id="name" name="name" placeholder="姓名(必填, 詳答)" required>
-                    <input type="text" id="company" name="company" placeholder="公司名稱(必填, 詳答)">
-                    <select name="profession" id="profession">
+                    <input type="text" id="company" name="organization" placeholder="公司名稱(必填, 詳答)">
+                    <select name="position" id="profession">
                         <option value="" disabled selected="selected">職位</option>
+                        <option class="option" value="type">經理</option>
                     </select>
-                    <input type="text" id="phone" name="phone" placeholder="連絡電話(必填, 詳答)" required>
-                    <input type="text" id="email" name="email" placeholder="聯絡email(必填, 詳答)" required>
-                    <input type="text" id="pay" name="pay" placeholder="已匯款, 後五碼是(選填, 詳答)">
-                    <textarea name="message" id="message" cols="50" rows="3"
+                    <input type="text" id="phone" name="phone" placeholder="連絡電話(必填, 詳答)" pattern="09\d{2}\d{6}"
+                        required>
+                    <input type="email" id="email" name="email" placeholder="聯絡email(必填, 詳答)" required>
+                    <input type="text" id="pay" name="cert_last5" placeholder="已匯款, 後五碼是(選填, 詳答)">
+                    <textarea name="where_learn" id="message" cols="50" rows="3"
                         placeholder="是怎麼知道這個課程的(選填, 詳答)"></textarea> </textarea>
-                    <textarea name="message" id="message1" cols="50" rows="3" placeholder="為甚麼想報名(選填, 詳答)"></textarea>
+                    <textarea name="why_sign" id="message1" cols="50" rows="3" placeholder="為甚麼想報名(選填, 詳答)"></textarea>
                     <div class="form-btn">
                         <input class="btn" style="opacity: 1;" type="submit" value="SEND">
                     </div>
@@ -809,7 +827,7 @@
                         loading="lazy"></iframe>
                 </div>
             </div>
-        </div>
+        </div> -->
     </section>
     <footer id="footer" class="container-fluid" style="padding:0;margin: 0; ">
         <p>幸福空間 版權所有 &copy;Gorgeous Space Go.Ltd. All Rights Reserved.</p>

style.scss

@@ -12,6 +12,7 @@ $title-color: #646464;
 $bgcolor: #f4fffc;
 $navbgcolor: #a9d0c5;
 @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap");
 @font-face {
     font-family: 追奇手寫體;
     src: url(./drechifont-proportional.ttf);
@@ -66,7 +67,6 @@ body {
     height: 4.5vw;
     width: 100vw !important;
 
-
     @media screen and(max-width:$table) {
         height: 8vw;
     }
@@ -86,7 +86,7 @@ body {
     #logo {
         padding-top: 0.5vw;
         @media screen and(max-width:$moblie) {
-            padding-top:0;
+            padding-top: 0;
         }
 
         img {
@@ -155,7 +155,6 @@ body {
     background-repeat: no-repeat;
     background-position: center;
     background-image: url(./img/banner/coverwebp.webp);
-
     position: relative;
 
     @media screen and(max-width:$moblie) {
@@ -165,8 +164,9 @@ body {
     }
     .banner1 {
         width: 85vw;
-        padding-top: 5vw;
-        padding-bottom: 10vw;
+        padding-top: 10vw;
+        padding-bottom: 5vw;
+        text-align: center;
         @media screen and(max-width:$moblie) {
             width: 100vw;
             padding-bottom: 10vw;
@@ -195,7 +195,7 @@ body {
             font-size: 28px;
             font-weight: 900;
             color: #555555;
-            margin: 5vw 0px;
+            margin: 3vw 0px;
             text-align: center;
             @media screen and(max-width:$moblie) {
                 font-size: 0.8rem;
@@ -210,15 +210,7 @@ body {
                 margin: 0 auto;
             }
         }
-        #countdown {
-            display: block;
-            margin: 0 auto;
-            width: 40vw;
-            @media screen and(max-width:$moblie) {
-                width: 90vw;
-                margin: 0 auto;
-            }
-        }
+
         .btn {
             display: block;
             margin: 0 auto;
@@ -296,7 +288,7 @@ body {
         padding-top: 0vw;
     }
     img {
-        padding:10vw 10vw;
+        padding: 10vw 10vw;
         object-fit: cover;
         @media screen and(max-width:$table) {
             // width: 60vw;
@@ -305,7 +297,7 @@ body {
     #trouble-text {
         padding-top: 20vw;
         .text-box {
-             margin-left: 5vw;
+            margin-left: 5vw;
             h1 {
                 padding-bottom: 3vw !important;
                 @media screen and(max-width:$moblie) {
@@ -403,15 +395,32 @@ body {
         position: absolute;
         top: 15vw;
         left: 20vw;
-        .box {
+        .box1,
+        .box2,
+        .box3 {
             width: 20vw;
             background: #fff;
             border-radius: 8px;
             margin: 10px;
+            &:hover {
+                h2 {
+                    font-size: 1.3rem;
+                }
+
+                .box-img {
+                    padding-top: 0.95vw;
+                    img {
+                        opacity: 0;
+                    }
+                    background-image: url(./img/people.png);
+                    background-size: contain;
+                    background-repeat: no-repeat;
+                }
+            }
             .box-img {
                 margin: 20px;
                 img {
-                    padding:3vw 0px;
+                    padding: 3vw 0px;
                     width: 10vw;
                     object-fit: cover;
                 }
@@ -447,14 +456,16 @@ body {
 #Course-box03 {
     background-color: rgba(0, 0, 0, 0.8);
     width: 100vw;
+    height: 100vh;
     z-index: 8;
-    padding: 100px 50px 100px 50px;
-    position: relative;
-    display: none;
+    padding: 50px 50px 100px 50px;
+    position: fixed;
+    top: 0vw;
+display: none;
     .close {
         position: absolute;
         right: 3vw;
-        top: 5vw;
+        top: 1vw;
     }
     .Course-box01 {
         background: #fff;
@@ -472,7 +483,7 @@ body {
         #box03 {
             width: 85vw;
             margin: 10px auto;
-            padding: 10px 0px 80px 0px;
+            padding: 10px 0px 80px 0px !important;
 
             .card {
                 width: 16vw;
@@ -482,24 +493,25 @@ body {
                 background: #fff;
                 border-radius: 8px;
                 border: none !important;
-
+                padding-left: 0 !important;
+                padding-right: 0 !important;
                 .card-title {
                     padding: 30px 0px 20px 0px;
                     font-weight: 900;
                     color: #414346;
                     font-size: 1.1rem;
                 }
-                img {
-                    padding: 90px 30px 0px 30px;
-                }
+
                 .box-img {
                     img {
+                        padding: 90px 30px 0px 30px;
                         width: 10.5vw;
-                        height: 13.4vw;
+                        height: 13vw;
                     }
                 }
                 .box-img2 {
                     img {
+                        padding: 90px 30px 0px 30px;
                         width: 12vw;
                     }
                 }
@@ -507,6 +519,12 @@ body {
         }
     }
 }
+
+#Course-box03 {
+    .card {
+        width: 25vw !important;
+    }
+}
 // 手機板課程大綱
 .sec04 {
     text-align: center;
@@ -553,21 +571,25 @@ body {
     }
 }
 // 課程大綱彈跳視窗手機板
-.mobile01-1,.mobile01-2,.mobile01-3{
+.mobile01-1,
+.mobile01-2,
+.mobile01-3 {
     width: 100vw;
     height: 100vh;
     background-color: rgba(0, 0, 0, 0.8);
     position: fixed;
-    top:0vw;
+    top: 0vw;
     z-index: 10;
-    padding: 15vw  5vw 21vw 5vw ;
+    padding: 15vw 5vw 21vw 5vw;
     overflow: hidden;
     margin: 0 !important;
     display: none;
     @media screen and(min-width:$desktop) {
         display: none;
     }
-    .mobile-box1,.mobile-box2,.mobile-box3{
+    .mobile-box1,
+    .mobile-box2,
+    .mobile-box3 {
         .close {
             position: absolute;
             right: 5vw;
@@ -586,8 +608,10 @@ body {
                 font-size: 2.5rem;
                 color: #414346;
             }
-    
-            .card-box-1,.card-box-2,.card-box-3{
+
+            .card-box-1,
+            .card-box-2,
+            .card-box-3 {
                 padding: 1vw 20px 5vw 20px;
                 @media screen and(max-width:350px) {
                     padding: 1vw 0px 7vw 0px;
@@ -595,7 +619,7 @@ body {
                 .card {
                     text-align: center;
                     margin: 0px 10px;
-                 
+
                     // border: none !important;
                     .card-title {
                         padding-top: 1rem;
@@ -603,7 +627,7 @@ body {
                         color: #414346;
                         font-size: 1.3rem;
                     }
-                  
+
                     img {
                         margin: 0 auto;
                     }
@@ -611,7 +635,7 @@ body {
                         img {
                             width: 40vw;
                             height: 53vw;
-                            padding:  15vw 10vw ;
+                            padding: 15vw 10vw;
                         }
                     }
                     .box-img2 {
@@ -859,13 +883,11 @@ body {
                 padding-top: 0.8vw;
             }
         }
-        #information-02{
+        #information-02 {
             @media screen and(max-width:350px) {
-                padding-left :0 !important;;
-               
+                padding-left: 0 !important;
             }
         }
-
     }
     #mobile-form {
         #form-card {
@@ -906,7 +928,6 @@ body {
                     background: #fff;
                     color: #a9d0c5;
                     font-family: "Noto Sans TC", sans-serif;
-                    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
                     font-weight: 900;
                     box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
                     border: 3px solid #a9d0c5;
@@ -1012,3 +1033,96 @@ body {
         }
     }
 }
+
+// 計數器
+
+.container {
+    padding: 0 !important;
+    margin: 0 !important;
+    #countdown {
+        width: 85vw;
+        @media screen and(max-width:$moblie) {
+            width: 100vw;
+         }
+        @media screen and(max-width:400px) {
+            width: 100vw;
+        }
+        ul {
+            padding-left: 0 !important;
+           
+        }
+    }
+}
+
+h1 {
+    font-weight: normal;
+    letter-spacing: 0.125rem;
+    text-transform: uppercase;
+}
+
+li {
+    display: inline-block;
+    list-style-type: none;
+    text-transform: uppercase;
+    padding-left: 0 !important;
+position: relative;
+    #days,
+    #hours,
+    #minutes,
+    #seconds {
+        font-size: 6rem;
+        font-family: "Roboto", sans-serif !important;
+        font-weight: 900;
+        color: #fff;
+        text-shadow: 0.5px 0.5px 5px rgba(0, 0, 0, 0.3);
+        border-right: 2px solid #fff;
+        padding: 0 45px;
+        @media screen and(max-width:$moblie) {
+            font-size: 2.5rem;
+            padding: 0 5vw 0 1vw;
+        }
+    }
+    .unit {
+        position: absolute;
+        text-align: center;
+        top: 4.5vw;
+        display: block;
+        font-size: 1rem;
+        color: #000;
+        font-weight: 600;
+        letter-spacing: 3px;
+        padding-left: 4vw;
+        @media screen and(max-width:$moblie) {
+            letter-spacing: 1px;
+            top: 8vw;
+            padding-left: 0vw;
+            transform: scale(0.83, 0.83);
+            font-size: 12px;
+        }
+        @media screen and(max-width:400px) {
+            letter-spacing: 1px;
+            top: 9vw;
+            padding-left: 0vw;
+            transform: scale(0.6, 0.6);
+            font-size: 12px;
+        }
+    }
+    #unit0{
+        right:9vw;
+    }
+}
+
+@media all and (max-width: 768px) {
+    h1 {
+        font-size: 1.5rem;
+    }
+
+    li {
+        font-size: 1.125rem;
+        padding: 0.75rem;
+    }
+
+    li span {
+        font-size: 3.375rem;
+    }
+}