頁面內容修正

goto.js

@@ -77,6 +77,18 @@ $(".box-img01").click(function () {
     dots: true,
   });
 });
+$("#sec01-1").click(function () {
+  $(".mobile01-1").fadeIn();
+  $(".mobile-box1").fadeIn();
+  $(".card-box-1").slick({
+    arrows: false,
+    slidesToShow: 1,
+    centerMode: true,
+    infinite: false,
+    dots: true,
+  });
+});
+
 
 $(".close").click(function () {
   $(".mobile-box1").fadeOut();
@@ -102,6 +114,18 @@ $(".box-img02").click(function () {
   });
 });
 
+$("#sec01-2").click(function () {
+  $(".mobile01-2").fadeIn();
+  $(".mobile-box2").fadeIn();
+  $(".card-box-2").slick({
+    arrows: false,
+    slidesToShow: 1,
+    centerMode: true,
+    infinite: false,
+    dots: true,
+  });
+});
+
 $(".close").click(function () {
   $(".mobile-box2").fadeOut();
   $(".mobile01-2").fadeOut();
@@ -126,6 +150,19 @@ $(".box-img03").click(function () {
 
 });
 
+$("#sec01-3").click(function () {
+  $(".mobile01-3").fadeIn();
+  $(".mobile-box3").fadeIn();
+  $(".card-box-3").slick({
+    arrows: false,
+    slidesToShow: 1,
+    centerMode: true,
+    infinite: false,
+    dots: true,
+  });
+
+});
+
 $(".close").click(function () {
   $(".mobile-box3").fadeOut();
   $(".mobile01-3").fadeOut();
@@ -356,7 +393,7 @@ $(function () {
   $(".box2").hover(
     function () {
       $("#title2").html('課程2數位行銷與社群');
-      $("#title2-1").html('資深數位廣告投手');
+      $("#title2-1").html('品牌行銷實戰經驗業務經理');
       $("#title2-2").html('Ruby');
     },
 

index.html

@@ -106,11 +106,10 @@
     </div>
     <!-- banner -->
     <section id="banner" class="container-fluid" style="margin: 0; padding: 0;">
-        <div class=""></div>
+
         <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=""> -->
             <div class="container" style="margin: 0; padding: 0;">
                 <div id="countdown">
                     <ul>
@@ -122,7 +121,10 @@
                 </div>
             </div>
             <!-- 手機背景 -->
-            <img id="mobilecover" src="./img/banner/cover1webp.webp" alt="">
+            <div style="text-align: center;">
+                <img id="mobilecover" src="./img/banner/cover1webp.webp" alt="">
+            </div>
+            
             <a data-gt-target="#information" data-gt-duration="500" data-gt-offset="70"><button
                     class="btn">手刀報名</button></a>
         </div>
@@ -412,22 +414,22 @@
         <h1 class="title-main">精華課程大綱</h1>
         <hr class="line" style="opacity: 1;">
         <div id="card-box" class="row">
-            <div class="card ">
+            <div id="sec01-1" class="card ">
                 <h1 class="card-title" style="font-weight: 900;">課程1手機拍片</h1>
                 <h2>知名媒體網站電視台店長</h2>
                 <div class="box-img01">
                     <img src="./img/people/people1.jpg" alt="">
                 </div>
-                <h1 class="name" style="font-family:追奇手寫體;">Vincent</h1>
+                <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 class="more">了解更多</div>
 
                 </div>
             </div>
-            <div class="card ">
-                <h1 class="card-title" style="font-weight: 900;">課程2社群營造</h1>
-                <h2>資深數位廣告投手</h2>
+            <div id="sec01-2" class="card ">
+                <h1 class="card-title" style="font-weight: 900;">課程2數位行銷與社群</h1>
+                <h2>品牌行銷實戰經驗業務經理</h2>
                 <div class="box-img02">
                     <img src="./img/people/people2.jpg" alt="">
                 </div>
@@ -437,7 +439,7 @@
                     <div class="more">了解更多</div>
                 </div>
             </div>
-            <div class="card ">
+            <div id="sec01-3" class="card ">
                 <h1 class="card-title" style="font-weight: 900;">課程3文案撰寫</h1>
                 <h2>資深新聞媒體工作者</h2>
                 <div class="box-img03">
@@ -668,7 +670,7 @@
                 <div class="schedule-box col-md-4">
                     <h1>Day1上午</h1>
                     <div class="content-box">
-                        <div>社群營造(一)</div>
+                        <div>數位行銷與社群(一)</div>
                     </div>
                 </div>
                 <div class="schedule-box col-md-4">
@@ -686,7 +688,7 @@
                 <div class="schedule-box col-md-4">
                     <h1>Day1下午</h1>
                     <div class="content-box">
-                        <div>社群營造(一)</div>
+                        <div>數位行銷與社群(二)</div>
                     </div>
                 </div>
                 <div class="schedule-box col-md-4">
@@ -769,7 +771,7 @@
             <div><span style="font-weight: 900;">截止報名日:</span>2021/10/01 23:59 (逾時不候!)</div>
             <div><span style="font-weight: 900;">開課日期:</span>暫定為10月底，詳細日期將另行通知</div>
             <div><span style="font-weight: 900;">開課地點:</span>於LINE私密群組中即時LIVE開課!</div>
-            <div><span style="font-weight: 900;">三日精華課程超值費用:</span>NT$80,000</div>
+            <div><span style="font-weight: 900;">三日精華課程超值費用:</span>NT$30,000</div>
             <div><span style="font-weight: 900;">報名流程:請點擊<a style="color:#70b2a0;"
                         target="_blank"
                         href="https://p.ecpay.com.tw/3AEB8E0">繳費連結</a>(可刷卡/ATM匯款)完成付款後，填寫底下報名表並送出，將有專人與您聯繫!</span>
@@ -829,7 +831,7 @@
                 <div><span style="font-weight: 900;">截止報名日:</span>2021/10/01 23:59 (逾時不候!)</div>
                 <div><span style="font-weight: 900;">開課日期:</span>暫定為10月底，詳細日期將另行通知</div>
                 <div><span style="font-weight: 900;">開課地點:</span>於LINE私密群組中即時LIVE開課!</div>
-                <div><span style="font-weight: 900;">三日精華課程超值費用:</span>NT$80000</div>
+                <div><span style="font-weight: 900;">三日精華課程超值費用:</span>NT$30000</div>
                 <div><span style="font-weight: 900;">報名流程:請點擊<a style="color:#70b2a0;"
                             target="_blank"
                             href="https://p.ecpay.com.tw/3AEB8E0">繳費連結</a>(可刷卡/ATM匯款)完成付款後，填寫底下報名表並送出，將有專人與您聯繫!</span>

style.css

@@ -88,7 +88,6 @@ body #btn-a {
 body #btn-a #mobile-btn {
   display: block;
   margin: 0 auto;
-  margin-top: 10vw;
   width: 60vw;
   border-radius: 30px;
   padding: 12px;
@@ -318,7 +317,7 @@ body #btn-a #mobile-btn:hover {
 @media screen and (max-width: 767px) {
   #banner {
     background-image: none;
-    height: 95vh;
+    height: 100vh;
     padding-bottom: 30vw;
   }
 }
@@ -366,28 +365,22 @@ body #btn-a #mobile-btn:hover {
   }
 }
 
-@media screen and (min-width: 1025px) {
-  #banner .banner1 #mobilecover {
-    display: none;
-  }
+#banner .banner1 #mobilecover {
+  -o-object-fit: cover;
+     object-fit: cover;
+  width: 100vw;
+  display: block;
+  position: absolute;
+  top: 35vw;
+  z-index: -1;
 }
 
-@media screen and (max-width: 1024px) {
+@media screen and (min-width: 1025px) {
   #banner .banner1 #mobilecover {
     display: none;
   }
 }
 
-@media screen and (max-width: 767px) {
-  #banner .banner1 #mobilecover {
-    display: block;
-    width: 100vw;
-    position: absolute;
-    top: 35vw;
-    z-index: -1;
-  }
-}
-
 @media screen and (max-width: 350px) {
   #banner .banner1 #mobilecover {
     top: 35vw;
@@ -932,6 +925,7 @@ body #btn-a #mobile-btn:hover {
   margin-top: -25px;
   font-weight: 900;
   color: #fff;
+  cursor: pointer;
 }
 
 #Course-list #Course-content .box1 h1,

style.scss

@@ -79,7 +79,6 @@ body {
         #mobile-btn {
             display: block;
             margin: 0 auto;
-            margin-top: 10vw;
             width: 60vw;
             border-radius: 30px;
             padding: 12px;
@@ -253,8 +252,9 @@ body {
     }
     @media screen and(max-width:$moblie) {
         background-image: none;
-        height: 95vh;
+        height: 100vh;
         padding-bottom: 30vw;
+      
     }
 
     @media screen and(min-height:750px) {
@@ -285,19 +285,16 @@ body {
         }
         // 手機背景
         #mobilecover {
+            object-fit: cover;
+            width: 100vw;
+            display: block;
+            position: absolute;
+            top: 35vw;
+          
+            z-index: -1;
             @media screen and(min-width:$desktop) {
                 display: none;
             }
-            @media screen and(max-width:$table) {
-                display: none;
-            }
-            @media screen and(max-width:$moblie) {
-                display: block;
-                width: 100vw;
-                position: absolute;
-                top: 35vw;
-                z-index: -1;
-            }
             @media screen and(max-width:350px) {
                 top: 35vw;
                 padding-top: 12vw;
@@ -696,6 +693,7 @@ body {
                     margin-top: -25px;
                     font-weight: 900;
                     color: #fff;
+                    cursor: pointer;
                 }
             }
             h1 {