Home Explore Help
Register Sign In
choozmo
/
HHH_Course
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

修正部分功能

jeter20131220 3 years ago
parent
fae9fb6755
commit
779deee05b
5 changed files with 319 additions and 52 deletions
Unified View Show Diff Stats
  1. 14 10
      goto.js
  2. 15 15
      index.html
  3. 167 13
      style.css
  4. 0 0
      style.css.map
  5. 123 14
      style.scss

+ 14 - 10
goto.js
View File 

@@ -4,15 +4,17 @@ $(window).bind('scroll', function (e) {
 
 function parallaxScroll() {
 
 function parallaxScroll() {
 
   var scrolled = $(window).scrollTop();
 
   var scrolled = $(window).scrollTop();
 
   // 困擾
 
   // 困擾
 
-  $('#circle2').css('top', (350 - (scrolled * .2)) + 'px');
 
-  $('#circle3').css('top', (1000- (scrolled * .2)) + 'px');
 
-  $('#circle1').css('top', (650 - (scrolled * .2)) + 'px');
 
-// 課程大綱
 
-  $('#act1').css('top', (30 + (scrolled * .1)) + 'px');
 
-  $('#act2').css('top', (800 - (scrolled * .2)) + 'px');
 
-  $('#act3').css('top', (300 - (scrolled * .1)) + 'px');
 
-  $('#act4').css('top', (0 + (scrolled * .1)) + 'px');
 
-  $('#act5').css('top', (800 - (scrolled * .2)) + 'px');
 
+  if(screen.width>1024){
 
+    $('#circle2').css('top', (350 - (scrolled * .2)) + 'px');
 
+    $('#circle3').css('top', (1000- (scrolled * .2)) + 'px');
 
+    $('#circle1').css('top', (650 - (scrolled * .2)) + 'px');
 
+  // 課程大綱
 
+    $('#act1').css('top', (30 + (scrolled * .1)) + 'px');
 
+    $('#act2').css('top', (800 - (scrolled * .2)) + 'px');
 
+    $('#act3').css('top', (300 - (scrolled * .1)) + 'px');
 
+    $('#act4').css('top', (0 + (scrolled * .1)) + 'px');
 
+    $('#act5').css('top', (800 - (scrolled * .2)) + 'px');
 
+  }
 
 
 
 
 
 
 
@@ -23,6 +25,7 @@ $("#card-box").slick({
 
   slidesToShow: 1,
 
   slidesToShow: 1,
 
   centerMode: true,
 
   centerMode: true,
 
   infinite: false,
 
   infinite: false,
 
+  dots: true,
 
 });
 
 });
 
 
 
   // 手機課程大綱彈跳視窗
 
   // 手機課程大綱彈跳視窗
 
@@ -98,6 +101,7 @@ $("#card-box").slick({
 
     slidesToShow: 1,
 
     slidesToShow: 1,
 
     centerMode: true,
 
     centerMode: true,
 
     infinite: false,
 
     infinite: false,
 
+    dots: true,
 
   });
 
   });
 
 
 
   // 手機選單彈跳視窗
 
   // 手機選單彈跳視窗
 
@@ -197,7 +201,7 @@ $("#card-box").slick({
 
     console.log(jsonString),
 
     console.log(jsonString),
 
       $.ajax({
 
       $.ajax({
 
         type: 'POST',
 
         type: 'POST',
 
-        url: 'http://172.105.205.52:8003/add_client_info',
 
+        url: ' http://172.104.93.163:8003/add_client_info',
 
         data: jsonString,
 
         data: jsonString,
 
         dataType: 'json',
 
         dataType: 'json',

+ 15 - 15
index.html
View File 

@@ -34,7 +34,7 @@
 
     <link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon">
 
     <link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon">
 
 </head>
 
 </head>
 
 
 
-<body id="top">
 
+<body id="top"  class="container-fluid" style="padding:0;margin: 0; ">
 
     <section id="Navigation" class="container-fluid" style="padding:0;margin: 0; ">
 
     <section id="Navigation" class="container-fluid" style="padding:0;margin: 0; ">
 
         <div id="nav" class="row">
 
         <div id="nav" class="row">
 
             <div id="logo" class=" col-md-2 col-lg-4">
 
             <div id="logo" class=" col-md-2 col-lg-4">
 
@@ -54,13 +54,13 @@
 
     <div id="menu-box" class="container-fluid" style="padding:0;margin:0 ">
 
     <div id="menu-box" class="container-fluid" style="padding:0;margin:0 ">
 
         <div id="menu-box2">
 
         <div id="menu-box2">
 
             <div id="menu1" class="menu-text"><a class="link" data-gt-target="#trouble" data-gt-duration="500"
 
             <div id="menu1" class="menu-text"><a class="link" data-gt-target="#trouble" data-gt-duration="500"
 
-                    data-gt-offset="0" style="padding-top: 3vw;">你有以下困擾嗎?</a></div>
 
+                    data-gt-offset="" style="padding-top: 3vw;">你有以下困擾嗎?</a></div>
 
             <div class="menu-text"><a class="link" data-gt-target="#mobile01" data-gt-duration="800"
 
             <div class="menu-text"><a class="link" data-gt-target="#mobile01" data-gt-duration="800"
 
-                    data-gt-offset="0">精華課程大綱</a></div>
 
+                    data-gt-offset="50">精華課程大綱</a></div>
 
             <div class="menu-text"><a class="link" data-gt-target="#mobile02" data-gt-duration="500"
 
             <div class="menu-text"><a class="link" data-gt-target="#mobile02" data-gt-duration="500"
 
-                    data-gt-offset="0">3Days上課日程</a></div>
 
+                    data-gt-offset="55">3Days上課日程</a></div>
 
             <div class="menu-text"><a class="link" data-gt-target="#information-mobile" data-gt-duration="500"
 
             <div class="menu-text"><a class="link" data-gt-target="#information-mobile" data-gt-duration="500"
 
-                    data-gt-offset="-500">收款資訊+客服資訊</a></div>
 
+                    data-gt-offset="100">收款資訊+客服資訊</a></div>
 
             <hr>
 
             <hr>
 
             <div id="menu-link" class="row">
 
             <div id="menu-link" class="row">
 
                 <div class="menu-logo col-3"><a href="https://line.me/ti/p/%40ovs4341s"><img
 
                 <div class="menu-logo col-3"><a href="https://line.me/ti/p/%40ovs4341s"><img
 
@@ -107,7 +107,7 @@
 
                         <li><span id="hours"></span><span id="unit1" class="unit">HOURS</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="minutes"></span><span id="unit2" class="unit">MINUTES</span></li>
 
                         <li><span id="seconds" style="border:none; padding-right: 0px;"></span><span
 
                         <li><span id="seconds" style="border:none; padding-right: 0px;"></span><span
 
-                                class="unit">SECONDS</span></li>
 
+                              id="unit3"  class="unit">SECONDS</span></li>
 
                     </ul>
 
                     </ul>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
@@ -115,8 +115,8 @@
 
             <img id="mobilecover" src="./img/banner/cover1webp.webp" alt="">
 
             <img id="mobilecover" src="./img/banner/cover1webp.webp" alt="">
 
            <a href="https://payment.ecpay.com.tw/QuickCollect/PayData?N32WLQWLaAdbBZx3yj9fbNNQwxl%2bQ9z%2fkm2bPZqIDVk%3d"><button class="btn">手刀報名</button></a> 
            <a href="https://payment.ecpay.com.tw/QuickCollect/PayData?N32WLQWLaAdbBZx3yj9fbNNQwxl%2bQ9z%2fkm2bPZqIDVk%3d"><button class="btn">手刀報名</button></a> 
         </div>
 
         </div>
 
-
 
     </section>
 
     </section>
 
+    <a id="btn-a" href="https://payment.ecpay.com.tw/QuickCollect/PayData?N32WLQWLaAdbBZx3yj9fbNNQwxl%2bQ9z%2fkm2bPZqIDVk%3d"><button id="mobile-btn" class="btn">手刀報名</button></a> 
     <img class="arrow" data-gt-target="#top" data-gt-duration="800" data-gt-offset="0" src="./img/gotop.png" alt="">
 
     <img class="arrow" data-gt-target="#top" data-gt-duration="800" data-gt-offset="0" src="./img/gotop.png" alt="">
 
 
 
     <section id="trouble" class="container-fluid">
 
     <section id="trouble" class="container-fluid">
 
@@ -691,13 +691,13 @@
 
         <hr class="line" style="opacity: 1;">
 
         <hr class="line" style="opacity: 1;">
 
         <div id="card-box2" class="row">
 
         <div id="card-box2" class="row">
 
             <div class="box col-10">
 
             <div class="box col-10">
 
-                <div class="box1">
 
+                <div class="boxs-chedule1">
 
                     <h1>Day1上午</h1>
 
                     <h1>Day1上午</h1>
 
                     <div class="card" style="padding: 54px 42px;">
 
                     <div class="card" style="padding: 54px 42px;">
 
                         <div>手機拍片(一)</div>
 
                         <div>手機拍片(一)</div>
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 
-                <div class="box2">
 
+                <div class="boxs-chedule2">
 
                     <h1>Day1下午</h1>
 
                     <h1>Day1下午</h1>
 
                     <div class="card">
 
                     <div class="card">
 
                         <div>文案撰寫(一)</div>
 
                         <div>文案撰寫(一)</div>
 
@@ -705,16 +705,16 @@
 
                         <div>社群營造(一)</div>
 
                         <div>社群營造(一)</div>
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 
+                <img class="arrow-left" src="./img/course-schedule/arrow-right.png" alt="">
 
             </div>
 
             </div>
 
-            <img class="arrow-left" src="./img/course-schedule/arrow-right.png" alt="">
 
             <div class="box col-10">
 
             <div class="box col-10">
 
-                <div class="box1">
 
+                <div class="boxs-chedule1">
 
                     <h1>Day2上午</h1>
 
                     <h1>Day2上午</h1>
 
                     <div class="card" style="padding: 54px 42px;">
 
                     <div class="card" style="padding: 54px 42px;">
 
                         <div>手機拍片(二)</div>
 
                         <div>手機拍片(二)</div>
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 
-                <div class="box2">
 
+                <div class="boxs-chedule2">
 
                     <h1>Day2下午</h1>
 
                     <h1>Day2下午</h1>
 
                     <div class="card">
 
                     <div class="card">
 
                         <div>文案撰寫(二)</div>
 
                         <div>文案撰寫(二)</div>
 
@@ -722,16 +722,16 @@
 
                         <div>社群營造(二)</div>
 
                         <div>社群營造(二)</div>
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 
+                <img class="arrow-right" src="./img/course-schedule/arrow-right.png" alt="">
 
             </div>
 
             </div>
 
-            <img class="arrow-right" src="./img/course-schedule/arrow-right.png" alt="">
 
             <div class="box col-10">
 
             <div class="box col-10">
 
-                <div class="box1">
 
+                <div class="boxs-chedule1">
 
                     <h1>Day3上午</h1>
 
                     <h1>Day3上午</h1>
 
                     <div class="card" style="padding: 54px 42px;">
 
                     <div class="card" style="padding: 54px 42px;">
 
                         <div>手機拍片(三)</div>
 
                         <div>手機拍片(三)</div>
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 
-                <div class="box2">
 
+                <div class="boxs-chedule2">
 
                     <h1>Day3下午</h1>
 
                     <h1>Day3下午</h1>
 
                     <div class="card" style="padding: 42px 42px;">
 
                     <div class="card" style="padding: 42px 42px;">
 
                         <div>成果展示分享</div>
 
                         <div>成果展示分享</div>

+ 167 - 13
style.css
View File 

@@ -75,6 +75,37 @@ body .arrow {
 
   }
 
   }
 
 }
 
 }
 
 
 
+body #btn-a {
 
+  text-decoration: none;
 
+}
 
+
 
+body #btn-a #mobile-btn {
 
+  display: block;
 
+  margin: 0 auto;
 
+  margin-top: 1vw;
 
+  width: 60vw;
 
+  border-radius: 30px;
 
+  padding: 12px;
 
+  background: #fff;
 
+  color: #a9d0c5;
 
+  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
 
+          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
 
+  border: 3px solid #a9d0c5;
 
+  font-weight: 900;
 
+}
 
+
 
+@media screen and (max-width: 1024px) {
 
+  body #btn-a {
 
+    display: none;
 
+  }
 
+}
 
+
 
+@media screen and (min-width: 1025px) {
 
+  body #btn-a {
 
+    display: none;
 
+  }
 
+}
 
+
 
 #Navigation {
 
 #Navigation {
 
   background: #a9d0c5;
 
   background: #a9d0c5;
 
   height: 4.5vw;
 
   height: 4.5vw;
 
@@ -187,6 +218,12 @@ body .arrow {
 
   }
 
   }
 
 }
 
 }
 
 
 
+@media screen and (max-width: 1024px) {
 
+  #Navigation #menu-btn1 {
 
+    display: none;
 
+  }
 
+}
 
+
 
 #banner {
 
 #banner {
 
   background-size: cover;
 
   background-size: cover;
 
   background-repeat: no-repeat;
 
   background-repeat: no-repeat;
 
@@ -214,6 +251,12 @@ body .arrow {
 
   text-decoration: none;
 
   text-decoration: none;
 
 }
 
 }
 
 
 
+@media screen and (max-width: 1024px) {
 
+  #banner .banner1 {
 
+    width: 70vw;
 
+  }
 
+}
 
+
 
 @media screen and (max-width: 767px) {
 
 @media screen and (max-width: 767px) {
 
   #banner .banner1 {
 
   #banner .banner1 {
 
     width: 100vw;
 
     width: 100vw;
 
@@ -234,6 +277,12 @@ body .arrow {
 
   }
 
   }
 
 }
 
 }
 
 
 
+@media screen and (max-width: 1024px) {
 
+  #banner .banner1 #mobilecover {
 
+    display: none;
 
+  }
 
+}
 
+
 
 @media screen and (max-width: 767px) {
 
 @media screen and (max-width: 767px) {
 
   #banner .banner1 #mobilecover {
 
   #banner .banner1 #mobilecover {
 
     display: block;
 
     display: block;
 
@@ -293,10 +342,15 @@ body .arrow {
 
   font-weight: 900;
 
   font-weight: 900;
 
 }
 
 }
 
 
 
+@media screen and (max-width: 1024px) {
 
+  #banner .banner1 .btn {
 
+    width: 20vw;
 
+  }
 
+}
 
+
 
 @media screen and (max-width: 767px) {
 
 @media screen and (max-width: 767px) {
 
   #banner .banner1 .btn {
 
   #banner .banner1 .btn {
 
-    width: 60vw;
 
-    margin-top: 110vw;
 
+    display: none;
 
   }
 
   }
 
 }
 
 }
 
 
 
@@ -314,6 +368,12 @@ body .arrow {
 
           flex-direction: column;
 
           flex-direction: column;
 
 }
 
 }
 
 
 
+@media screen and (max-width: 1024px) {
 
+  .social-icons {
 
+    left: 30px;
 
+  }
 
+}
 
+
 
 .social-icons a {
 
 .social-icons a {
 
   text-decoration: none;
 
   text-decoration: none;
 
   display: block;
 
   display: block;
 
@@ -369,7 +429,7 @@ body .arrow {
 
 
 
 @media screen and (max-width: 767px) {
 
 @media screen and (max-width: 767px) {
 
   #trouble {
 
   #trouble {
 
-    padding-top: 30vw;
 
+    padding-top: 10vw;
 
   }
 
   }
 
 }
 
 }
 
 
 
@@ -841,6 +901,12 @@ body .arrow {
 
   position: relative;
 
   position: relative;
 
 }
 
 }
 
 
 
+@media screen and (min-width: 768px) {
 
+  .sec04 {
 
+    display: none;
 
+  }
 
+}
 
+
 
 .sec04 .element1 {
 
 .sec04 .element1 {
 
   position: absolute;
 
   position: absolute;
 
   top: 150vw;
 
   top: 150vw;
 
@@ -862,6 +928,30 @@ body .arrow {
 
   background-position: 40% 50%;
 
   background-position: 40% 50%;
 
 }
 
 }
 
 
 
+.sec04 #card-box .slick-dots {
 
+  margin-top: 50px;
 
+}
 
+
 
+.sec04 #card-box .slick-dots li {
 
+  margin: 0 10px;
 
+}
 
+
 
+.sec04 #card-box .slick-dots button {
 
+  margin-top: 10px;
 
+  display: block;
 
+  width: 30px;
 
+  height: 3px;
 
+  padding: 0;
 
+  border: none;
 
+  border-radius: 0%;
 
+  background-color: #d9d9d9;
 
+  text-indent: -9999px;
 
+}
 
+
 
+.sec04 #card-box .slick-dots li.slick-active button {
 
+  background-color: #fce49d;
 
+}
 
+
 
 .sec04 #card-box .card {
 
 .sec04 #card-box .card {
 
   text-align: center;
 
   text-align: center;
 
   margin: 0px 10px;
 
   margin: 0px 10px;
 
@@ -1341,6 +1431,12 @@ body .arrow {
 
   position: relative;
 
   position: relative;
 
 }
 
 }
 
 
 
+@media screen and (min-width: 768px) {
 
+  .sec05 {
 
+    display: none;
 
+  }
 
+}
 
+
 
 .sec05 .element2 {
 
 .sec05 .element2 {
 
   position: absolute;
 
   position: absolute;
 
   width: 70vw;
 
   width: 70vw;
 
@@ -1373,6 +1469,29 @@ body .arrow {
 
   position: relative;
 
   position: relative;
 
 }
 
 }
 
 
 
+.sec05 #card-box2 .slick-dots {
 
+  margin-top: 10px;
 
+}
 
+
 
+.sec05 #card-box2 .slick-dots li {
 
+  margin: 0 10px;
 
+}
 
+
 
+.sec05 #card-box2 .slick-dots button {
 
+  display: block;
 
+  width: 30px;
 
+  height: 3px;
 
+  padding: 0;
 
+  border: none;
 
+  border-radius: 0%;
 
+  background-color: #d9d9d9;
 
+  text-indent: -9999px;
 
+}
 
+
 
+.sec05 #card-box2 .slick-dots li.slick-active button {
 
+  background-color: #fce49d;
 
+}
 
+
 
 .sec05 #card-box2 .arrow-left {
 
 .sec05 #card-box2 .arrow-left {
 
   position: absolute;
 
   position: absolute;
 
   left: 76vw;
 
   left: 76vw;
 
@@ -1406,39 +1525,39 @@ body .arrow {
 
 }
 
 }
 
 
 
 .sec05 #card-box2 .box {
 
 .sec05 #card-box2 .box {
 
-  padding-bottom: 20vw !important;
 
+  padding-bottom: 5vw !important;
 
 }
 
 }
 
 
 
-.sec05 #card-box2 .box .box1 {
 
+.sec05 #card-box2 .box .boxs-chedule1 {
 
   padding-bottom: 20vw;
 
   padding-bottom: 20vw;
 
 }
 
 }
 
 
 
-.sec05 #card-box2 .box .box1 h1 {
 
+.sec05 #card-box2 .box .boxs-chedule1 h1 {
 
   color: #70b2a0;
 
   color: #70b2a0;
 
   text-shadow: 0.5px 0.5px 2px rgba(0, 0, 0, 0.3);
 
   text-shadow: 0.5px 0.5px 2px rgba(0, 0, 0, 0.3);
 
 }
 
 }
 
 
 
-.sec05 #card-box2 .box .box2 h1 {
 
+.sec05 #card-box2 .box .boxs-chedule2 h1 {
 
   color: #fff;
 
   color: #fff;
 
   text-shadow: 0.5px 0.5px 2px rgba(0, 0, 0, 0.3);
 
   text-shadow: 0.5px 0.5px 2px rgba(0, 0, 0, 0.3);
 
 }
 
 }
 
 
 
-.sec05 #card-box2 .box .box1,
 
-.sec05 #card-box2 .box .box2 {
 
+.sec05 #card-box2 .box .boxs-chedule1,
 
+.sec05 #card-box2 .box .boxs-chedule2 {
 
   margin: 0px 30px;
 
   margin: 0px 30px;
 
   color: #646464;
 
   color: #646464;
 
   font-weight: 900;
 
   font-weight: 900;
 
 }
 
 }
 
 
 
-.sec05 #card-box2 .box .box1 h1,
 
-.sec05 #card-box2 .box .box2 h1 {
 
+.sec05 #card-box2 .box .boxs-chedule1 h1,
 
+.sec05 #card-box2 .box .boxs-chedule2 h1 {
 
   padding-bottom: 5vw;
 
   padding-bottom: 5vw;
 
   font-family: "Noto Sans TC", sans-serif;
 
   font-family: "Noto Sans TC", sans-serif;
 
   font-weight: 600;
 
   font-weight: 600;
 
 }
 
 }
 
 
 
-.sec05 #card-box2 .box .box1 .card,
 
-.sec05 #card-box2 .box .box2 .card {
 
+.sec05 #card-box2 .box .boxs-chedule1 .card,
 
+.sec05 #card-box2 .box .boxs-chedule2 .card {
 
   padding: 30px 20px;
 
   padding: 30px 20px;
 
   border: 2px solid #707070 !important;
 
   border: 2px solid #707070 !important;
 
   -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
 
   -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
 
@@ -1564,6 +1683,12 @@ body .arrow {
 
   }
 
   }
 
 }
 
 }
 
 
 
+@media screen and (min-width: 768px) {
 
+  #information-mobile {
 
+    display: none;
 
+  }
 
+}
 
+
 
 #information-mobile .information {
 
 #information-mobile .information {
 
   padding: 20vw 0px;
 
   padding: 20vw 0px;
 
   text-align: left;
 
   text-align: left;
 
@@ -1788,6 +1913,12 @@ body .arrow {
 
   width: 85vw;
 
   width: 85vw;
 
 }
 
 }
 
 
 
+@media screen and (max-width: 1024px) {
 
+  .container #countdown {
 
+    width: 70vw;
 
+  }
 
+}
 
+
 
 @media screen and (max-width: 767px) {
 
 @media screen and (max-width: 767px) {
 
   .container #countdown {
 
   .container #countdown {
 
     width: 100vw;
 
     width: 100vw;
 
@@ -1831,6 +1962,16 @@ li #seconds {
 
   padding: 0 45px;
 
   padding: 0 45px;
 
 }
 
 }
 
 
 
+@media screen and (max-width: 1024px) {
 
+  li #days,
 
+  li #hours,
 
+  li #minutes,
 
+  li #seconds {
 
+    font-size: 4rem;
 
+    padding: 0 25px;
 
+  }
 
+}
 
+
 
 @media screen and (max-width: 767px) {
 
 @media screen and (max-width: 767px) {
 
   li #days,
 
   li #days,
 
   li #hours,
 
   li #hours,
 
@@ -1853,6 +1994,13 @@ li .unit {
 
   padding-left: 4vw;
 
   padding-left: 4vw;
 
 }
 
 }
 
 
 
+@media screen and (max-width: 1024px) {
 
+  li .unit {
 
+    right: 2vw;
 
+    top: 6vw;
 
+  }
 
+}
 
+
 
 @media screen and (max-width: 767px) {
 
 @media screen and (max-width: 767px) {
 
   li .unit {
 
   li .unit {
 
     letter-spacing: 1px;
 
     letter-spacing: 1px;
 
@@ -1875,6 +2023,12 @@ li .unit {
 
   }
 
   }
 
 }
 
 }
 
 
 
+@media screen and (max-width: 1024px) {
 
+  li #unit3 {
 
+    left: -2vw;
 
+  }
 
+}
 
+
 
 li #unit0 {
 
 li #unit0 {
 
   right: 5vw;
 
   right: 5vw;
 
 }
 
 }

File diff suppressed because it is too large
+ 0 - 0
style.css.map


+ 123 - 14
style.scss
View File 

@@ -69,8 +69,31 @@ body {
 
         }
 
         }
 
     }
 
     }
 
 
 
-    // 元素
 
+    // 手機板按鈕
 
+    #btn-a {
 
+        text-decoration: none;
 
+        #mobile-btn {
 
+            display: block;
 
+            margin: 0 auto;
 
+            margin-top: 1vw;
 
+            width: 60vw;
 
+            border-radius: 30px;
 
+            padding: 12px;
 
+            background: #fff;
 
+            color: #a9d0c5;
 
+            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
 
+            border: 3px solid #a9d0c5;
 
+            font-weight: 900;
 
+        }
 
+        @media screen and(max-width:$table) {
 
+            display: none;
 
+        }
 
+        @media screen and(min-width:$desktop) {
 
+            display: none;
 
+        }
 
+    }
 
 }
 
 }
 
+// 主選單
 
 #Navigation {
 
 #Navigation {
 
     background: $navbgcolor;
 
     background: $navbgcolor;
 
     height: 4.5vw;
 
     height: 4.5vw;
 
@@ -153,12 +176,16 @@ body {
 
         top: 1vw;
 
         top: 1vw;
 
         width: 18vw;
 
         width: 18vw;
 
         z-index: 6;
 
         z-index: 6;
 
+
 
         @media screen and(min-width:$desktop) {
 
         @media screen and(min-width:$desktop) {
 
             display: none;
 
             display: none;
 
         }
 
         }
 
+        @media screen and(max-width:$table) {
 
+            display: none;
 
+        }
 
     }
 
     }
 
 }
 
 }
 
-
 
+// 主視覺
 
 #banner {
 
 #banner {
 
     background-size: cover;
 
     background-size: cover;
 
     background-repeat: no-repeat;
 
     background-repeat: no-repeat;
 
@@ -176,9 +203,12 @@ body {
 
         padding-top: 10vw;
 
         padding-top: 10vw;
 
         padding-bottom: 5vw;
 
         padding-bottom: 5vw;
 
         text-align: center;
 
         text-align: center;
 
-        a{
 
+        a {
 
             text-decoration: none;
 
             text-decoration: none;
 
         }
 
         }
 
+        @media screen and(max-width:$table) {
 
+            width: 70vw;
 
+        }
 
         @media screen and(max-width:$moblie) {
 
         @media screen and(max-width:$moblie) {
 
             width: 100vw;
 
             width: 100vw;
 
             padding-bottom: 10vw;
 
             padding-bottom: 10vw;
 
@@ -187,10 +217,14 @@ body {
 
         @media screen and(max-width:350px) {
 
         @media screen and(max-width:350px) {
 
             padding-top: 20vw;
 
             padding-top: 20vw;
 
         }
 
         }
 
+        // 手機背景
 
         #mobilecover {
 
         #mobilecover {
 
             @media screen and(min-width:$desktop) {
 
             @media screen and(min-width:$desktop) {
 
                 display: none;
 
                 display: none;
 
             }
 
             }
 
+            @media screen and(max-width:$table) {
 
+                display: none;
 
+            }
 
             @media screen and(max-width:$moblie) {
 
             @media screen and(max-width:$moblie) {
 
                 display: block;
 
                 display: block;
 
                 width: 100vw;
 
                 width: 100vw;
 
@@ -235,9 +269,11 @@ body {
 
             box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
 
             box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
 
             border: 3px solid #a9d0c5;
 
             border: 3px solid #a9d0c5;
 
             font-weight: 900;
 
             font-weight: 900;
 
+            @media screen and(max-width:$table) {
 
+                width: 20vw;
 
+            }
 
             @media screen and(max-width:$moblie) {
 
             @media screen and(max-width:$moblie) {
 
-                width: 60vw;
 
-                margin-top: 110vw;
 
+                display: none;
 
             }
 
             }
 
         }
 
         }
 
     }
 
     }
 
@@ -249,6 +285,9 @@ body {
 
     z-index: 10;
 
     z-index: 10;
 
     display: flex;
 
     display: flex;
 
     flex-direction: column;
 
     flex-direction: column;
 
+    @media screen and(max-width:$table) {
 
+        left: 30px;
 
+    }
 
     a {
 
     a {
 
         text-decoration: none;
 
         text-decoration: none;
 
         display: block;
 
         display: block;
 
@@ -288,14 +327,14 @@ body {
 
         }
 
         }
 
     }
 
     }
 
 }
 
 }
 
-
 
+// 困擾
 
 #trouble {
 
 #trouble {
 
     padding-top: 10vw;
 
     padding-top: 10vw;
 
     background: $bgcolor;
 
     background: $bgcolor;
 
     padding-bottom: 5vw !important;
 
     padding-bottom: 5vw !important;
 
     overflow: hidden;
 
     overflow: hidden;
 
     @media screen and(max-width:$moblie) {
 
     @media screen and(max-width:$moblie) {
 
-        padding-top: 30vw;
 
+        padding-top: 10vw;
 
     }
 
     }
 
     @media screen and(min-height:800px) {
 
     @media screen and(min-height:800px) {
 
         padding-top: 0vw;
 
         padding-top: 0vw;
 
@@ -620,7 +659,9 @@ body {
 
     color: $title-color;
 
     color: $title-color;
 
     overflow: hidden;
 
     overflow: hidden;
 
     position: relative;
 
     position: relative;
 
-
 
+    @media screen and(min-width:768px) {
 
+        display: none;
 
+    }
 
     .element1 {
 
     .element1 {
 
         position: absolute;
 
         position: absolute;
 
         top: 150vw;
 
         top: 150vw;
 
@@ -637,6 +678,30 @@ body {
 
         background-size: cover;
 
         background-size: cover;
 
         background-repeat: no-repeat;
 
         background-repeat: no-repeat;
 
         background-position: 40% 50%;
 
         background-position: 40% 50%;
 
+        .slick-dots {
 
+            margin-top: 50px;
 
+
 
+            li {
 
+                margin: 0 10px;
 
+            }
 
+
 
+            button {
 
+                margin-top: 10px;
 
+                display: block;
 
+                width: 30px;
 
+                height: 3px;
 
+                padding: 0;
 
+                border: none;
 
+                border-radius: 0%;
 
+                background-color: #d9d9d9;
 
+
 
+                text-indent: -9999px;
 
+            }
 
+
 
+            li.slick-active button {
 
+                background-color: #fce49d;
 
+            }
 
+        }
 
         .card {
 
         .card {
 
             text-align: center;
 
             text-align: center;
 
             margin: 0px 10px;
 
             margin: 0px 10px;
 
@@ -868,6 +933,9 @@ body {
 
     padding-bottom: 8rem !important;
 
     padding-bottom: 8rem !important;
 
     overflow: hidden;
 
     overflow: hidden;
 
     position: relative;
 
     position: relative;
 
+    @media screen and(min-width:768px) {
 
+        display: none;
 
+    }
 
     .element2 {
 
     .element2 {
 
         position: absolute;
 
         position: absolute;
 
         width: 70vw;
 
         width: 70vw;
 
@@ -891,6 +959,29 @@ body {
 
         background-repeat: no-repeat;
 
         background-repeat: no-repeat;
 
         background-position: 50% 50%;
 
         background-position: 50% 50%;
 
         position: relative;
 
         position: relative;
 
+        .slick-dots {
 
+            margin-top: 10px;
 
+
 
+            li {
 
+                margin: 0 10px;
 
+            }
 
+
 
+            button {
 
+                display: block;
 
+                width: 30px;
 
+                height: 3px;
 
+                padding: 0;
 
+                border: none;
 
+                border-radius: 0%;
 
+                background-color: #d9d9d9;
 
+
 
+                text-indent: -9999px;
 
+            }
 
+
 
+            li.slick-active button {
 
+                background-color: #fce49d;
 
+            }
 
+        }
 
         .arrow-left {
 
         .arrow-left {
 
             position: absolute;
 
             position: absolute;
 
             left: 76vw;
 
             left: 76vw;
 
@@ -916,22 +1007,22 @@ body {
 
             }
 
             }
 
         }
 
         }
 
         .box {
 
         .box {
 
-            padding-bottom: 20vw !important;
 
-            .box1 {
 
+            padding-bottom: 5vw !important;
 
+            .boxs-chedule1 {
 
                 padding-bottom: 20vw;
 
                 padding-bottom: 20vw;
 
                 h1 {
 
                 h1 {
 
                     color: #70b2a0;
 
                     color: #70b2a0;
 
                     text-shadow: 0.5px 0.5px 2px rgba(0, 0, 0, 0.3);
 
                     text-shadow: 0.5px 0.5px 2px rgba(0, 0, 0, 0.3);
 
                 }
 
                 }
 
             }
 
             }
 
-            .box2 {
 
+            .boxs-chedule2 {
 
                 h1 {
 
                 h1 {
 
                     color: #fff;
 
                     color: #fff;
 
                     text-shadow: 0.5px 0.5px 2px rgba(0, 0, 0, 0.3);
 
                     text-shadow: 0.5px 0.5px 2px rgba(0, 0, 0, 0.3);
 
                 }
 
                 }
 
             }
 
             }
 
-            .box1,
 
-            .box2 {
 
+            .boxs-chedule1,
 
+            .boxs-chedule2 {
 
                 margin: 0px 30px;
 
                 margin: 0px 30px;
 
                 color: $title-color;
 
                 color: $title-color;
 
                 font-weight: 900;
 
                 font-weight: 900;
 
@@ -1045,6 +1136,9 @@ body {
 
     @media screen and(min-width:$desktop) {
 
     @media screen and(min-width:$desktop) {
 
         display: none;
 
         display: none;
 
     }
 
     }
 
+    @media screen and(min-width:768px) {
 
+        display: none;
 
+    }
 
     .information {
 
     .information {
 
         padding: 20vw 0px;
 
         padding: 20vw 0px;
 
         text-align: left;
 
         text-align: left;
 
@@ -1227,6 +1321,9 @@ body {
 
     margin: 0 !important;
 
     margin: 0 !important;
 
     #countdown {
 
     #countdown {
 
         width: 85vw;
 
         width: 85vw;
 
+        @media screen and(max-width:$table) {
 
+            width: 70vw;
 
+        }
 
         @media screen and(max-width:$moblie) {
 
         @media screen and(max-width:$moblie) {
 
             width: 100vw;
 
             width: 100vw;
 
         }
 
         }
 
@@ -1262,6 +1359,10 @@ li {
 
         text-shadow: 0.5px 0.5px 5px rgba(0, 0, 0, 0.3);
 
         text-shadow: 0.5px 0.5px 5px rgba(0, 0, 0, 0.3);
 
         border-right: 2px solid #fff;
 
         border-right: 2px solid #fff;
 
         padding: 0 45px;
 
         padding: 0 45px;
 
+        @media screen and(max-width:$table) {
 
+            font-size: 4rem;
 
+            padding: 0 25px;
 
+        }
 
         @media screen and(max-width:$moblie) {
 
         @media screen and(max-width:$moblie) {
 
             font-size: 2.5rem;
 
             font-size: 2.5rem;
 
             padding: 0 5vw 0 1vw;
 
             padding: 0 5vw 0 1vw;
 
@@ -1271,13 +1372,16 @@ li {
 
         position: absolute;
 
         position: absolute;
 
         text-align: center;
 
         text-align: center;
 
         top: 4.5vw;
 
         top: 4.5vw;
 
-
 
         display: block;
 
         display: block;
 
         font-size: 1rem;
 
         font-size: 1rem;
 
         color: #000;
 
         color: #000;
 
         font-weight: 600;
 
         font-weight: 600;
 
         letter-spacing: 3px;
 
         letter-spacing: 3px;
 
         padding-left: 4vw;
 
         padding-left: 4vw;
 
+        @media screen and(max-width:$table) {
 
+            right: 2vw;
 
+            top: 6vw;
 
+        }
 
         @media screen and(max-width:$moblie) {
 
         @media screen and(max-width:$moblie) {
 
             letter-spacing: 1px;
 
             letter-spacing: 1px;
 
             top: 8vw;
 
             top: 8vw;
 
@@ -1293,6 +1397,11 @@ li {
 
             font-size: 12px;
 
             font-size: 12px;
 
         }
 
         }
 
     }
 
     }
 
+    #unit3 {
 
+        @media screen and(max-width:$table) {
 
+            left: -2vw;
 
+        }
 
+    }
 
     #unit0 {
 
     #unit0 {
 
         right: 5vw;
 
         right: 5vw;
 
         @media screen and(max-width:$moblie) {
 
         @media screen and(max-width:$moblie) {

Some files were not shown because too many files changed in this diff