Strona główna Odkrywaj Pomoc
Zaloguj się
choozmo
/
violet-beauty
2
0
Forkuj 0
Pliki Problemy 0 Oczekujące zmiany 0 Wiki
Przeglądaj źródła

update

andy 3 lat temu
rodzic
6aaaa10e58
commit
5f668be254
22 zmienionych plików z 2714 dodań i 380 usunięć
Widok podzielony Pokaż statystyki zmian
  1. BIN
      .DS_Store
  2. 1 1
      .vscode/settings.json
  3. 40 6
      about.html
  4. 503 109
      css/style.css
  5. 0 0
      css/style.css.map
  6. 612 154
      css/style.scss
  7. 39 6
      facial.html
  8. BIN
      img/.DS_Store
  9. BIN
      img/1.png
  10. BIN
      img/2.png
  11. BIN
      img/3.png
  12. BIN
      img/arrownext.png
  13. BIN
      img/arrowprev.png
  14. BIN
      img/liana-mikah-4RTAF3Z-0zM-unsplash.jpg
  15. BIN
      img/spa.jpg
  16. BIN
      img/violetbeauty/43d9c2fee8037323b13304419d28e5e4_double.jpeg
  17. 878 0
      index-2.html
  18. 218 82
      index.html
  19. 51 10
      js/index.js
  20. 39 6
      massage.html
  21. 294 0
      reserve.html
  22. 39 6
      store.html

BIN
.DS_Store
Wyświetl plik


+ 1 - 1
.vscode/settings.json
Wyświetl plik 

@@ -1,3 +1,3 @@
 
 {
 
-  "liveServer.settings.port": 5502
 
+  "liveServer.settings.port": 5504
 
 }

+ 40 - 6
about.html
Wyświetl plik 

@@ -23,8 +23,8 @@
 
 
 <body>
 
   <div id="top" style="overflow-x: hidden;">
 
-    <!-- nav導覽頁 -->
 
-    <div class="container">
 
+    <!-- nav導覽頁-桌機 -->
 
+    <div class="container d-none d-md-block">
 
       <div class="text-center">
 
         <div class="logo"><a href="./"> <img
 
               src="https://img.holkee.com/site/upload/5ed5c6c4-77367dcbb-9908-96b7db46/15185cb9afae29fe563dae310d42def4_double.png"
 
@@ -50,7 +50,7 @@
 
                 </a>
 
               </li>
 
               <li class="nav-item">
 
-                <a class="nav-link" href="" target="_top">
 
+                <a class="nav-link" href="./reserve.html" target="_top">
 
                   立即預約
 
                 </a>
 
               </li>
 
@@ -64,6 +64,38 @@
 
         </div>
 
       </nav>
 
     </div>
 
+        <!-- 導覽頁手機 -->
 
+        <section id="Navigation" class="container-fluid d-md-none d-block" style="padding:0;margin: 0; ">
 
+          <div id="nav" class="row">
 
+            <div class="col-3">
 
+              <i id="menu-btn1" class="fas fa-bars menu ms-2"></i>
 
+            </div>
 
+            <div id="logo" class="col-9">
 
+              <a class="ms-4" href="./index.html"><img src="./img/violetbeauty/LOGO.png" alt=""></a>
 
+            </div>
 
+          </div>
 
+        </section>
 
+        <!-- 手機版彈跳視窗 -->
 
+        <div id="menu-box" class="container-fluid" style="padding:0;margin:0 ">
 
+          <div id="menu-box2">
 
+            <div id="menu1" class="menu-text"><a class="link" href="./facial.html" style="padding-top: 3vw;">臉部課程</a></div>
 
+            <div class="menu-text"><a href="./massage.html" class="link">身體課程</a></div>
 
+            <div class="menu-text"><a href="./about.html" class="link">關於我們</a></div>
 
+            <div class="menu-text"><a href="./reserve.html" class="link">立即預約</a></div>
 
+            <div class="menu-text"><a href="./store.html" class="link">店家資訊</a></div>
 
+            <!-- <div id="menu-link" class="row">
 
+                  <div class="menu-logo col-3"><a href="https://line.me/ti/p/%40ovs4341s"><img
 
+                              src="./img/mobile-logo/line.png" alt=""></a></div>
 
+                  <div class="menu-logo col-3"><a href="https://www.facebook.com/hhhfb"><img
 
+                              src="./img/mobile-logo/fb.png" alt=""></a></div>
 
+                  <div class="menu-logo col-3"><a href="https://www.instagram.com/gorgeous_space/"><img
 
+                              src="./img/mobile-logo/ig.png" alt=""></a></div>
 
+                  <div class="menu-logo col-3"><a href="https://www.youtube.com/user/gorgeousspace"><img
 
+                              src="./img/mobile-logo/youtube.png" alt=""></a></div>
 
+              </div> -->
 
+    
+          </div>
 
+        </div>
 
     <!-- banner -->
 
     <div class="store-banner">
 
       <p>關於我們</p>
 
@@ -180,11 +212,13 @@
 
               </div>
 
 
               <div class="socail-link d-flex ms-sm-auto mt-3 mt-sm-0">
 
-                <a href="https://www.facebook.com/hhhfb" class="me-3"><img src="./img/icon/facebook-app-symbol.png"
 
-                    alt=""></a>
 
-                <a href="https://line.me/ti/p/%40ovs4341s"><img src="./img/icon/001-line.png" alt=""></a>
 
+                <a href="https://page.line.me/237mozkf?openQrModal=true"><i
 
+                  style="font-size: 32px; color: #6C6C6C;" class="fab fa-line me-3"></i></a>
 
+              <a href="https://www.facebook.com/purple4700318/?ref=page_internal"><i
 
+                  style="font-size: 32px; color: #6C6C6C;" class="fab fa-facebook-square"></i></a>
 
               </div>
 
             </div>
 
+      
             <div class="footer_text d-flex flex-sm-row flex-column align-items-center justify-content-between mt-4">
 
               <p>「美的事物是永恆的喜悅」—紫晴企業社</p>
 
               <p>Copyright by 紫晴企業社</p>

+ 503 - 109
css/style.css
Wyświetl plik 

@@ -10,9 +10,15 @@
 
   overflow-x: hidden !important;
 
 }
 
 
-.crown {
 
-  color: #f7c728;
 
-  font-size: 20px;
 
+.violetbeauty_line {
 
+  margin: 0px auto 20px;
 
+  border: 1px solid transparent;
 
+  background: -webkit-gradient(linear, left top, right top, from(white), to(white)), -webkit-gradient(linear, left top, right top, from(#f4c0d0), to(#d76478));
 
+  background: linear-gradient(to right, white, white), linear-gradient(to right, #f4c0d0, #d76478);
 
+  background-clip: padding-box, border-box;
 
+  background-origin: padding-box, border-box;
 
+  width: 50px;
 
+  opacity: 1 !important;
 
 }
 
 
 .playbutton {
 
@@ -92,12 +98,12 @@
 
 }
 
 
 .features_title {
 
-  font-weight: 900;
 
+  font-weight: 300 !important;
 
   letter-spacing: 2px;
 
   font: 1.9375em "微軟正黑體";
 
   line-height: 25px;
 
   text-align: center;
 
-  color: #ef7086;
 
+  color: #333;
 
   width: 100%;
 
   margin-bottom: 1rem;
 
 }
 
@@ -167,11 +173,12 @@
 
 
 .navbar-nav .nav-link {
 
   font: 1.2rem 微軟正黑體;
 
-  font-weight: 600;
 
+  font-weight: 300 !important;
 
   padding: 0.5rem 1rem;
 
   margin: 5px 1rem;
 
   text-align: center;
 
-  color: #ef7086;
 
+  color: #9f9f9f;
 
+  color: #000;
 
   letter-spacing: 0;
 
   border-bottom: 5px solid #ffffff;
 
   -webkit-box-sizing: border-box;
 
@@ -180,7 +187,205 @@
 
 }
 
 
 .navbar-nav .nav-link:hover {
 
-  opacity: 0.7;
 
+  color: #ef7086;
 
+}
 
+
 
+#Navigation {
 
+  background: #fff;
 
+  opacity: 1;
 
+  height: 4.5vw;
 
+  width: 100vw !important;
 
+  position: fixed;
 
+  z-index: 100;
 
+}
 
+
 
+@media screen and (max-width: 1024px) {
 
+  #Navigation {
 
+    height: 8vw;
 
+  }
 
+}
 
+
 
+@media screen and (max-width: 767px) {
 
+  #Navigation {
 
+    height: 20vw;
 
+    position: fixed;
 
+    z-index: 5;
 
+  }
 
+}
 
+
 
+#Navigation .menu {
 
+  font-size: 28px;
 
+  margin-top: 30px;
 
+  color: #6c6c6c;
 
+}
 
+
 
+#Navigation #nav {
 
+  width: 100vw;
 
+  margin: 0 auto;
 
+}
 
+
 
+#Navigation #logo {
 
+  padding-top: 1vw;
 
+}
 
+
 
+@media screen and (max-width: 767px) {
 
+  #Navigation #logo {
 
+    padding-top: 2vw;
 
+  }
 
+}
 
+
 
+#Navigation #logo img {
 
+  width: 120px;
 
+}
 
+
 
+#Navigation #link {
 
+  text-align: right;
 
+  padding: 1.5vw 3vw;
 
+}
 
+
 
+@media screen and (max-width: 767px) {
 
+  #Navigation #link {
 
+    display: none;
 
+  }
 
+}
 
+
 
+#Navigation #link a {
 
+  text-decoration: none;
 
+  color: #000;
 
+  letter-spacing: 1px;
 
+  font-size: 0.9rem;
 
+  font-weight: 600;
 
+  cursor: pointer;
 
+  padding: 15px;
 
+  position: relative;
 
+}
 
+
 
+#Navigation #link a :hover {
 
+  opacity: 0.8;
 
+}
 
+
 
+#Navigation #link a:after {
 
+  content: "";
 
+  display: block;
 
+  width: 80%;
 
+  height: 3px;
 
+  background-color: #fff;
 
+  position: absolute;
 
+  left: 12%;
 
+  bottom: 0;
 
+  -webkit-transition: all 0.3s;
 
+  transition: all 0.3s;
 
+  opacity: 0;
 
+}
 
+
 
+#Navigation #link a:hover:after {
 
+  width: 80%;
 
+  opacity: 1;
 
+}
 
+
 
+#menu-box {
 
+  top: 20vw;
 
+  height: 25vh;
 
+  width: 100vw;
 
+  position: fixed;
 
+  z-index: 998;
 
+  overflow: hidden;
 
+  display: none;
 
+  background: rgba(0, 0, 0, 0.8);
 
+}
 
+
 
+@media screen and (min-width: 1025px) {
 
+  #menu-box {
 
+    display: none;
 
+  }
 
+}
 
+
 
+@media screen and (max-width: 767px) {
 
+  #menu-box {
 
+    height: 100vh;
 
+  }
 
+}
 
+
 
+@media screen and (max-width: 350px) {
 
+  #menu-box {
 
+    height: 55vh;
 
+  }
 
+}
 
+
 
+#menu-box hr {
 
+  display: inline-block;
 
+  margin: 0px auto !important;
 
+  width: 55vw;
 
+  background: #fff;
 
+  opacity: 1 !important;
 
+}
 
+
 
+#menu-box #menu-box2 {
 
+  width: 100vw;
 
+  height: 25vh;
 
+  background-color: #f4c0d0;
 
+  opacity: 0.95;
 
+  z-index: 999;
 
+  text-align: center;
 
+}
 
+
 
+@media screen and (max-width: 767px) {
 
+  #menu-box #menu-box2 {
 
+    height: 45vh;
 
+  }
 
+}
 
+
 
+@media screen and (max-width: 350px) {
 
+  #menu-box #menu-box2 {
 
+    height: 55vh;
 
+  }
 
+}
 
+
 
+#menu-box #menu-box2 #menu-link {
 
+  display: -ms-grid;
 
+  display: grid;
 
+  -ms-grid-columns: (1fr)[4];
 
+      grid-template-columns: repeat(4, 1fr);
 
+  width: 60vw;
 
+  margin: 0 auto;
 
+}
 
+
 
+#menu-box #menu-box2 .menu-logo {
 
+  opacity: 1;
 
+}
 
+
 
+#menu-box #menu-box2 .menu-logo img {
 
+  width: 7vw;
 
+}
 
+
 
+#menu-box #menu-box2 a {
 
+  display: inline-block;
 
+  text-decoration: none;
 
+  color: #fff;
 
+  font-size: 16px;
 
+  margin-top: 20px;
 
+  font-weight: 900;
 
+}
 
+
 
+@media screen and (max-width: 767px) {
 
+  #menu-box #menu-box2 a {
 
+    margin-top: 4vw;
 
+  }
 
+}
 
+
 
+#menu-box #menu-box2 .menu-text {
 
+  width: 70vw;
 
+  text-align: center;
 
+  margin-bottom: 10px;
 
+  border-bottom: 1px solid #fff;
 
+  margin: 0 auto;
 
+  padding-bottom: 10px;
 
+}
 
+
 
+@media screen and (max-width: 767px) {
 
+  #menu-box #menu-box2 .menu-text {
 
+    margin-bottom: 5px !important;
 
+  }
 
 }
 
 
 .slick-dotted.slick-slider {
 
@@ -196,53 +401,127 @@
 
   color: #ef7086;
 
 }
 
 
-.banner-slide .slick-dots {
 
-  bottom: 30px;
 
+@media screen and (max-width: 767px) {
 
+  .banner-slide {
 
+    padding-top: 60px;
 
+  }
 
 }
 
 
-.banner-slide .slick-dots li button:before {
 
+.news {
 
+  margin: 100px 0px;
 
+}
 
+
 
+.news .news-slide {
 
+  width: 80%;
 
+  margin: 0 auto;
 
+}
 
+
 
+@media screen and (max-width: 767px) {
 
+  .news .news-slide {
 
+    width: 95%;
 
+  }
 
+}
 
+
 
+.news .news-slide .slick-prev, .news .news-slide .slick-next {
 
+  width: 50px;
 
+  -o-object-fit: cover;
 
+     object-fit: cover;
 
+  height: auto;
 
+  -webkit-filter: invert(52%) sepia(75%) saturate(602%) hue-rotate(306deg) brightness(102%) contrast(87%);
 
+          filter: invert(52%) sepia(75%) saturate(602%) hue-rotate(306deg) brightness(102%) contrast(87%);
 
+}
 
+
 
+@media screen and (max-width: 767px) {
 
+  .news .news-slide .slick-prev, .news .news-slide .slick-next {
 
+    width: 30px;
 
+  }
 
+}
 
+
 
+.news .news-slide .slick-prev {
 
+  left: -50px;
 
+}
 
+
 
+@media screen and (max-width: 767px) {
 
+  .news .news-slide .slick-prev {
 
+    display: none;
 
+  }
 
+}
 
+
 
+.news .news-slide .slick-next {
 
+  right: -50px;
 
+}
 
+
 
+@media screen and (max-width: 767px) {
 
+  .news .news-slide .slick-next {
 
+    display: none;
 
+  }
 
+}
 
+
 
+.news .news-slide .banner-slide-item img {
 
+  padding: 10px;
 
+  width: 100% !important;
 
+}
 
+
 
+@media screen and (max-width: 767px) {
 
+  .news .news-slide .banner-slide-item img {
 
+    padding: 0px;
 
+  }
 
+}
 
+
 
+.news .news-slide .slick-dots {
 
+  bottom: -15px;
 
+}
 
+
 
+.news .news-slide .slick-dots li button:before {
 
   font-size: 16px;
 
   font-weight: 900;
 
   top: 15px;
 
   content: "○";
 
-  color: #82689d;
 
+  color: #ef7086;
 
 }
 
 
-.banner-slide .slick-dots li.slick-active button:before {
 
+.news .news-slide .slick-dots li.slick-active button:before {
 
   opacity: 0.75;
 
-  color: #82689d;
 
+  color: #ef7086;
 
   content: "●";
 
 }
 
 
 .violetbeauty_sec00 {
 
-  background: #f8f2f6;
 
-  padding: 80px 0;
 
+  overflow: hidden;
 
+  background-size: cover;
 
+  background-attachment: fixed;
 
+  background-position: left center;
 
+  background-repeat: no-repeat;
 
   position: relative;
 
 }
 
 
-.violetbeauty_sec00 .sec00_img1 {
 
-  left: 0px;
 
-  bottom: 20px;
 
-  width: 300px;
 
-  opacity: 0.8;
 
+@media screen and (max-width: 767px) {
 
+  .violetbeauty_sec00 {
 
+    background-position: right center;
 
+  }
 
 }
 
 
-.violetbeauty_sec00 .sec00_img2 {
 
-  right: 0px;
 
-  top: 50px;
 
-  width: 180px;
 
-  opacity: 0.8;
 
-  -webkit-transform: rotate(-90deg);
 
-          transform: rotate(-90deg);
 
+.violetbeauty_sec00 .bg {
 
+  background: rgba(0, 0, 0, 0.4);
 
+  width: 100%;
 
+  height: 100%;
 
+  padding: 100px 0;
 
 }
 
 
-.violetbeauty_sec00 .sec00_img3 {
 
-  right: 100px;
 
-  bottom: 80px;
 
-  width: 60px;
 
-  opacity: 0.5;
 
-  -webkit-transform: rotate(-30deg);
 
-          transform: rotate(-30deg);
 
+.violetbeauty_sec00 hr {
 
+  background: #fff;
 
+  opacity: 1 !important;
 
+  height: 1px;
 
+  width: 40px;
 
+  margin: 15px auto;
 
+}
 
+
 
+.violetbeauty_sec00 p {
 
+  color: #fff;
 
+}
 
+
 
+.violetbeauty_sec00 h4 {
 
+  color: #fff;
 
 }
 
 
 .violetbeauty_sec00 .violetbeauty_sec00_box {
 
@@ -250,108 +529,109 @@
 
   margin: 0 auto;
 
 }
 
 
+@media screen and (max-width: 767px) {
 
+  .violetbeauty_sec00 .violetbeauty_sec00_box {
 
+    width: 90%;
 
+  }
 
+}
 
+
 
 .violetbeauty_sec00 .violetbeauty_sec00_box .sec00_content_left_img {
 
-  width: 60%;
 
+  width: 70%;
 
   -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
 
           box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
 
 }
 
 
-.violetbeauty_sec00 .violetbeauty_sec00_box .sec00_content_right {
 
-  text-align: center;
 
-  margin-top: 50px;
 
+@media screen and (max-width: 767px) {
 
+  .violetbeauty_sec00 .violetbeauty_sec00_box .sec00_content_left_img {
 
+    width: 80%;
 
+  }
 
 }
 
 
-.violetbeauty_sec01,
 
-.violetbeauty_sec02 {
 
-  padding: 50px 0;
 
+.violetbeauty_sec00 .violetbeauty_sec00_box .sec00_content_right {
 
+  text-align: center;
 
+  margin-top: 30px;
 
 }
 
 
-.violetbeauty_sec01 .slick-prev:before,
 
-.violetbeauty_sec02 .slick-prev:before {
 
-  content: "";
 
+.violetbeauty_sec00 .violetbeauty_sec00_box .sec00_content_right p {
 
+  margin-bottom: 0.8rem;
 
 }
 
 
-.violetbeauty_sec01 .slick-next:before,
 
-.violetbeauty_sec02 .slick-next:before {
 
-  content: "";
 
+.sec01＿course {
 
+  background: #fff2f1;
 
 }
 
 
-.violetbeauty_sec01 .violetbeauty_sec01_box,
 
-.violetbeauty_sec02 .violetbeauty_sec01_box {
 
-  width: 80%;
 
-  margin: 0 auto;
 
+.sec02＿course {
 
+  background: #fff;
 
 }
 
 
-.violetbeauty_sec01 .violetbeauty_sec01_content,
 
-.violetbeauty_sec02 .violetbeauty_sec01_content {
 
-  margin-top: 30px;
 
+.sec01＿course, .sec02＿course {
 
+  padding: 50px 0;
 
 }
 
 
-.violetbeauty_sec01 .violetbeauty_sec01_content .sec01_slide_item,
 
-.violetbeauty_sec02 .violetbeauty_sec01_content .sec01_slide_item {
 
-  padding: 20px;
 
+.sec01＿course .sec01＿course_box, .sec02＿course .sec01＿course_box {
 
+  width: 80%;
 
+  margin: 0 auto;
 
+  background: #fff;
 
 }
 
 
-.violetbeauty_sec01 .violetbeauty_sec01_content .sec01_slide_item img,
 
-.violetbeauty_sec02 .violetbeauty_sec01_content .sec01_slide_item img {
 
-  height: 250px;
 
-  -o-object-fit: cover;
 
-     object-fit: cover;
 
-  margin: 0 auto;
 
+@media screen and (max-width: 767px) {
 
+  .sec01＿course .sec01＿course_box, .sec02＿course .sec01＿course_box {
 
+    width: 90%;
 
+  }
 
 }
 
 
-.violetbeauty_sec02 {
 
-  background: #f4c0d0;
 
+.sec01＿course .sec01＿course_box .sec01＿course_text, .sec02＿course .sec01＿course_box .sec01＿course_text {
 
+  text-align: center;
 
+  padding: 15px 5.6%;
 
+  margin-top: 80px;
 
 }
 
 
-.violetbeauty_sec02 .card {
 
-  background: #f4c0d0;
 
+@media screen and (max-width: 767px) {
 
+  .sec01＿course .sec01＿course_box .sec01＿course_text, .sec02＿course .sec01＿course_box .sec01＿course_text {
 
+    padding: 15px 2.8%;
 
+  }
 
 }
 
 
-.violetbeauty_sec02 .violetbeauty_sec02_content {
 
-  margin-top: 30px;
 
+.sec01＿course .sec01＿course_box .sec01＿course_text del, .sec02＿course .sec01＿course_box .sec01＿course_text del {
 
+  font-size: 1.2rem;
 
+  color: #888;
 
 }
 
 
-.violetbeauty_sec02 .violetbeauty_sec02_content .violetbeauty_sec02_sub_title {
 
-  font-family: "Noto Sans TC", sans-serif;
 
-  font-size: 20px;
 
-  font-weight: normal;
 
+.sec01＿course .sec01＿course_box .sec01＿course_text span, .sec02＿course .sec01＿course_box .sec01＿course_text span {
 
   color: #ef7086;
 
+  font-size: 1.6rem;
 
 }
 
 
-.violetbeauty_sec02 .violetbeauty_sec02_content b {
 
-  width: 10px;
 
-  height: 10px;
 
-  background: #ef7086;
 
-  -webkit-transform: rotate(45deg);
 
-          transform: rotate(45deg);
 
-  margin: 1rem 0;
 
-  display: inline-block;
 
+@media screen and (max-width: 767px) {
 
+  .sec01＿course .sec01＿course_box .sec01＿course_text span, .sec02＿course .sec01＿course_box .sec01＿course_text span {
 
+    font-size: 1.4rem;
 
+  }
 
 }
 
 
-.violetbeauty_sec02 .sec02_slide_item {
 
-  padding: 30px;
 
+.sec01＿course .sec01＿course_box .sec01＿course_text p, .sec02＿course .sec01＿course_box .sec01＿course_text p {
 
+  font-size: 14px;
 
+  color: #555;
 
+  padding: 15px 0 0;
 
 }
 
 
-.violetbeauty_sec02 .violetbeauty_service_img img {
 
-  width: 290px;
 
-  height: 290px;
 
-  -o-object-fit: cover;
 
-     object-fit: cover;
 
-  border-radius: 50%;
 
-  margin: 0 auto;
 
+.sec01＿course .sec01＿course_box .sec01＿course_text .submitbutton, .sec02＿course .sec01＿course_box .sec01＿course_text .submitbutton {
 
+  width: 80%;
 
+  margin: 20px auto;
 
+  border: none;
 
+  padding: 10px 12px;
 
+  background: #f4c0d0;
 
+  color: #fff;
 
+  font-size: 20px;
 
+  border-radius: 0.25rem;
 
+  text-align: center;
 
+  vertical-align: middle;
 
+  border: 1px solid #f4c0d0;
 
 }
 
 
-.violetbeauty_sec02 .violetbeauty_service p {
 
-  margin: 10px 0;
 
-  font-family: "Noto Sans TC", sans-serif;
 
-  font-size: 16px;
 
-  color: #ef7086;
 
-  display: inline-block;
 
-  width: 90%;
 
-  border-bottom: 1px dashed #ef7086;
 
-  padding: 0.5rem 0;
 
-  cursor: pointer;
 
+.sec01＿course .sec01＿course_box .sec01＿course_text .submitbutton:hover, .sec02＿course .sec01＿course_box .sec01＿course_text .submitbutton:hover {
 
+  color: #f4c0d0;
 
+  background-color: #fff;
 
+  border: 1px solid #f4c0d0;
 
 }
 
 
 .violetbeauty_sec03 {
 
@@ -394,16 +674,34 @@
 
   margin: 0 auto;
 
 }
 
 
+@media screen and (max-width: 767px) {
 
+  .violetbeauty_sec03 .violetbeauty_sec03_box {
 
+    width: 90%;
 
+  }
 
+}
 
+
 
 .violetbeauty_sec03 .violetbeauty_sec03_box .violetbeauty_sec03_content {
 
   margin-top: 100px;
 
 }
 
 
+@media screen and (max-width: 767px) {
 
+  .violetbeauty_sec03 .violetbeauty_sec03_box .violetbeauty_sec03_content {
 
+    margin-top: 50px;
 
+  }
 
+}
 
+
 
 .violetbeauty_sec03 .violetbeauty_contract_form {
 
   width: 70%;
 
   margin: 0 auto;
 
 }
 
 
-.violetbeauty_sec03 .violetbeauty_contract_form #submitbutton {
 
+@media screen and (max-width: 767px) {
 
+  .violetbeauty_sec03 .violetbeauty_contract_form {
 
+    width: 90%;
 
+  }
 
+}
 
+
 
+.violetbeauty_sec03 .violetbeauty_contract_form .submitbutton {
 
   width: 100%;
 
   margin: 16px auto;
 
   border: none;
 
@@ -416,7 +714,7 @@
 
   vertical-align: middle;
 
 }
 
 
-.violetbeauty_sec03 .violetbeauty_contract_form #submitbutton:hover {
 
+.violetbeauty_sec03 .violetbeauty_contract_form .submitbutton:hover {
 
   color: #f4c0d0;
 
   background-color: #fff;
 
   border: 1px solid #f4c0d0;
 
@@ -462,19 +760,36 @@
 
 
 #footer {
 
   background: #fff2f1;
 
+  color: #6c6c6c;
 
+}
 
+
 
+#footer .phone {
 
+  -webkit-transform: rotate(100deg);
 
+          transform: rotate(100deg);
 
 }
 
 
 #footer .footer_content_box {
 
-  padding: 100px 0;
 
+  padding: 50px 0;
 
   margin: 0 auto;
 
   width: 80%;
 
 }
 
 
-#footer h3 {
 
-  font-size: 1.5rem;
 
+@media screen and (max-width: 767px) {
 
+  #footer .footer_content_box {
 
+    width: 90%;
 
+  }
 
+}
 
+
 
+#footer .footer_content_box li a {
 
+  width: 100%;
 
+  text-align: left;
 
+  color: #6c6c6c;
 
 }
 
 
-#footer p {
 
+#footer .footer_content_box .border_line {
 
+  margin-top: 30px;
 
+  background: #ccc;
 
+  opacity: 1 !important;
 
   margin-bottom: 0.5rem;
 
 }
 
 
@@ -482,16 +797,73 @@
 
   margin-right: 8px;
 
 }
 
 
+@media screen and (max-width: 767px) {
 
+  #footer .footer_text_box {
 
+    width: 80%;
 
+    margin: 0 auto;
 
+  }
 
+}
 
+
 
+#footer .footer_text_box h3 {
 
+  font-size: 1rem;
 
+}
 
+
 
+#footer .footer_text_box h3,
 
+#footer .footer_text_box p {
 
+  letter-spacing: 2px;
 
+}
 
+
 
+#footer .footer_text_box .navbar-nav {
 
+  width: auto;
 
+}
 
+
 
+#footer .footer_text_box .navbar-nav .nav-link {
 
+  margin: 0;
 
+  padding: 0;
 
+  border-bottom: none;
 
+  -webkit-transition: all 0.2s;
 
+  transition: all 0.2s;
 
+  font-size: 1rem;
 
+  text-align: center;
 
+}
 
+
 
+#footer .footer_text_box .navbar-nav .nav-link:hover {
 
+  color: #ef7086;
 
+}
 
+
 
+#footer .footer_text_box .navbar-nav .nav-item {
 
+  margin-right: 20px;
 
+  margin-bottom: 10px;
 
+  min-width: auto;
 
+}
 
+
 
 #footer .footer_text {
 
   margin-top: 15px;
 
 }
 
 
+@media screen and (max-width: 767px) {
 
+  #footer .footer_text {
 
+    font-size: 0.85rem;
 
+  }
 
+}
 
+
 
 #footer .socail-link {
 
   margin-top: 30px;
 
 }
 
 
-#footer .store_name {
 
-  color: #ef7086;
 
+@media screen and (max-width: 767px) {
 
+  #footer .socail-link {
 
+    text-align: center;
 
+  }
 
+}
 
+
 
+#footer .socail-link a {
 
+  -webkit-transition: 0.3s;
 
+  transition: 0.3s;
 
+}
 
+
 
+#footer .socail-link a:hover {
 
+  opacity: 0.8;
 
 }
 
 
 #footer .store {
 
@@ -499,10 +871,26 @@
 
   margin: 0 auto;
 
 }
 
 
+@media screen and (max-width: 767px) {
 
+  #footer .store {
 
+    margin-top: 50px;
 
+  }
 
+}
 
+
 
 #footer .store p {
 
   margin-top: 10px;
 
 }
 
 
+#footer .store h3 {
 
+  font-size: 1.5rem;
 
+  font-weight: 300 !important;
 
+}
 
+
 
+#footer .store p {
 
+  margin-bottom: 0.5rem;
 
+  font-weight: 300 !important;
 
+}
 
+
 
 #footer .footer_logo img {
 
   position: relative;
 
   right: 30px;
 
@@ -747,6 +1135,12 @@
 
   transition: all 0.3s;
 
 }
 
 
+@media screen and (max-width: 767px) {
 
+  .facial-content button {
 
+    display: block;
 
+  }
 
+}
 
+
 
 .facial-content button::after {
 
   content: "";
 
   display: inline-block;

Plik diff jest za duży
+ 0 - 0
css/style.css.map


+ 612 - 154
css/style.scss
Wyświetl plik 

@@ -6,13 +6,22 @@
 
 
 $maincolor: #ef7086;
 
 $subcolor: #f4c0d0;
 
+$desktop: 1025px;
 
+$table: 1024px;
 
+$moblie: 767px;
 
 #top {
 
   overflow-x: hidden !important;
 
 }
 
-.crown {
 
-  color: #f7c728;
 
-  font-size: 20px;
 
+.violetbeauty_line{
 
+  margin: 0px auto 20px;
 
+  border: 1px solid transparent;
 
+  background: linear-gradient(to right, white, white), linear-gradient(to right, $subcolor, #d76478);
 
+  background-clip: padding-box, border-box;
 
+  background-origin: padding-box, border-box;
 
+  width: 50px;
 
+  opacity: 1 !important;
 
 }
 
+
 
 .playbutton {
 
   cursor: pointer;
 
   position: absolute;
 
@@ -78,12 +87,13 @@ $subcolor: #f4c0d0;
 
 }
 
 
 .features_title {
 
-  font-weight: 900;
 
+  font-weight: 300 !important;
 
+ 
   letter-spacing: 2px;
 
   font: 1.9375em "微軟正黑體";
 
   line-height: 25px;
 
   text-align: center;
 
-  color: $maincolor;
 
+  color: #333;
 
   width: 100%;
 
   margin-bottom: 1rem;
 
 }
 
@@ -135,20 +145,180 @@ $subcolor: #f4c0d0;
 
   margin: 0 auto;
 
   .nav-link {
 
     font: 1.2rem 微軟正黑體;
 
-    font-weight: 600;
 
+    font-weight: 300 !important;
 
     padding: 0.5rem 1rem;
 
     margin: 5px 1rem;
 
     text-align: center;
 
-    color: $maincolor;
 
+    color: #9f9f9f;
 
+    color:#000;
 
     letter-spacing: 0;
 
     border-bottom: 5px solid #ffffff;
 
     box-sizing: border-box;
 
     cursor: pointer;
 
     &:hover {
 
-      opacity: 0.7;
 
+      color:$maincolor;
 
     }
 
   }
 
 }
 
+// 手機導覽頁
 
+#Navigation {
 
+  background: #fff;
 
+  opacity: 1;
 
+  height: 4.5vw;
 
+  width: 100vw !important;
 
+  position: fixed;
 
+  z-index: 100;
 
+
 
+  @media screen and(max-width:$table) {
 
+      height: 8vw;
 
+  }
 
+  @media screen and(max-width:$moblie) {
 
+      height: 20vw;
 
+      position: fixed;
 
+      z-index: 5;
 
+    }
 
+    .menu{
 
+      font-size: 28px;
 
+      margin-top: 30px;
 
+      color: #6c6c6c;
 
+    }
 
+
 
+  #nav {
 
+      width: 100vw;
 
+      margin: 0 auto;
 
+  }
 
+
 
+  //    rwd要注意高度
 
+  #logo {
 
+      padding-top: 1vw;
 
+      @media screen and(max-width:$moblie) {
 
+          padding-top: 2vw;
 
+      }
 
+
 
+      img {
 
+          width: 120px;
 
+      }
 
+  }
 
+  #link {
 
+      text-align: right;
 
+      padding: 1.5vw 3vw;
 
+     
+      @media screen and(max-width:$moblie) {
 
+          display: none;
 
+      }
 
+
 
+      a {
 
+          text-decoration: none;
 
+          color: #000;
 
+          letter-spacing: 1px;
 
+          font-size: 0.9rem;
 
+          font-weight: 600;
 
+          cursor: pointer;
 
+          padding: 15px;
 
+          position: relative;
 
+          :hover {
 
+              opacity: 0.8;
 
+          }
 
+          &:after {
 
+              content: "";
 
+              display: block;
 
+              width: 80%;
 
+              height: 3px;
 
+              background-color: #fff;
 
+              position: absolute;
 
+              left: 12%;
 
+              bottom: 0;
 
+              transition: all 0.3s;
 
+              opacity: 0;
 
+          }
 
+          &:hover:after {
 
+              width: 80%;
 
+              opacity: 1;
 
+          }
 
+        
+      }
 
+  }
 
+}
 
+// 手機彈跳視窗
 
+#menu-box {
 
+  top: 20vw;
 
+  height: 25vh;
 
+  width: 100vw;
 
+  position: fixed;
 
+  z-index: 998;
 
+  overflow: hidden;
 
+  display: none;
 
+  background: rgba(0,0,0,0.8);
 
+  @media screen and(min-width:$desktop) {
 
+      display: none;
 
+  }
 
+  @media screen and(max-width:$moblie) {
 
+      height: 100vh;
 
+  }
 
+  @media screen and(max-width:350px) {
 
+      height: 55vh;
 
+  }
 
+
 
+  hr {
 
+      display: inline-block;
 
+      margin: 0px auto !important;
 
+      width: 55vw;
 
+      background: #fff;
 
+      opacity: 1 !important;
 
+  }
 
+  #menu-box2 {
 
+      width: 100vw;
 
+      height: 25vh;
 
+      background-color: $subcolor;
 
+      opacity: 0.95;
 
+      z-index: 999;
 
+      text-align: center;
 
+      @media screen and(max-width:$moblie) {
 
+          height: 45vh;
 
+      }
 
+      @media screen and(max-width:350px) {
 
+          height: 55vh;
 
+      }
 
+
 
+      #menu-link {
 
+          display: grid;
 
+          grid-template-columns: repeat(4, 1fr);
 
+          width: 60vw;
 
+          margin: 0 auto;
 
+      }
 
+      .menu-logo {
 
+          opacity: 1;
 
+          img {
 
+              width: 7vw;
 
+          }
 
+      }
 
+
 
+      a {
 
+          display: inline-block;
 
+          text-decoration: none;
 
+          color: #fff;
 
+          font-size: 16px;
 
+          margin-top: 20px;
 
+          font-weight: 900;
 
+          @media screen and(max-width:$moblie) {
 
+              margin-top: 4vw;
 
+          }
 
+      }
 
+
 
+      .menu-text {
 
+          width: 70vw;
 
+          text-align: center;
 
+          margin-bottom: 10px;
 
+          border-bottom: 1px solid #fff;
 
+          margin: 0 auto;
 
+          padding-bottom: 10px;
 
+          @media screen and(max-width:$moblie) {
 
+              margin-bottom: 5px !important;
 
+          }
 
+      }
 
+  }
 
+}
 
+
 
 .slick-dotted.slick-slider {
 
   margin-bottom: 0px !important;
 
 }
 
@@ -160,160 +330,366 @@ $subcolor: #f4c0d0;
 
     color: $maincolor;
 
   }
 
 }
 
-.banner-slide {
 
-  .slick-dots {
 
-    bottom: 30px;
 
-    li {
 
-      // margin-top: -50px;
 
-      // 上右下左
 
-
 
-      button:before {
 
-        font-size: 16px;
 
-        font-weight: 900;
 
-        top: 15px;
 
-        content: "○";
 
-        color: #82689d;
 
-      }
 
-    }
 
-    li.slick-active button:before {
 
-      opacity: 0.75;
 
-      color: #82689d;
 
-      content: "●";
 
-    }
 
+.banner-slide{
 
+  @media screen and(max-width:$moblie) {
 
+    padding-top: 60px;
 
   }
 
 }
 
+.news{
 
+  margin: 100px 0px;
 
+.news-slide {
 
+ width: 80%;
 
+ margin:0 auto ;
 
+ @media screen and(max-width:$moblie) {
 
+  width: 95%;
 
+}
 
+ .slick-prev,.slick-next{
 
+ width: 50px;
 
+ object-fit: cover;
 
+ height: auto;
 
+ filter: invert(52%) sepia(75%) saturate(602%) hue-rotate(306deg) brightness(102%) contrast(87%);
 
+ @media screen and(max-width:$moblie) {
 
+  width: 30px;
 
+}
 
+ }
 
+ .slick-prev{
 
+   left:-50px;
 
+   @media screen and(max-width:$moblie) {
 
+    
+    display: none;
 
+  }
 
+ }
 
+ .slick-next{
 
+   right:-50px;
 
+   @media screen and(max-width:$moblie) {
 
+    display: none;
 
+  }
 
+ }
 
+//  .slick-prev:before{
 
+//    content: "〈";
 
+//    color:#000;
 
+//    font-size: 72px;
 
+//    font-weight: 900;
 
+//   right:100px;
 
+//   z-index: 900;
 
+//   }
 
+
 
+
 
+ .banner-slide-item{
 
+  
+     img{
 
+   padding: 10px;
 
+   width: 100% !important;
 
+   @media screen and(max-width:$moblie) {
 
+    padding: 0px;
 
+  }
 
+ }
 
+ }
 
+ .slick-dots {
 
+ bottom:-15px;
 
+   li {
 
+     // margin-top: -50px;
 
+     // 上右下左
 
+
 
+     button:before {
 
+       font-size: 16px;
 
+       font-weight: 900;
 
+       top: 15px;
 
+       content: "○";
 
+       color: $maincolor;
 
+     }
 
+   }
 
+   li.slick-active button:before {
 
+     opacity: 0.75;
 
+     color: $maincolor;
 
+     content: "●";
 
+   }
 
+ }
 
+}
 
+}
 
 
 .violetbeauty_sec00 {
 
-  background: #f8f2f6;
 
-  padding: 80px 0;
 
+  overflow: hidden;
 
+  background-size: cover;
 
+  background-attachment: fixed;
 
+  background-position: left center;
 
+  background-repeat: no-repeat;
 
   position: relative;
 
-  .sec00_img1 {
 
-    left: 0px;
 
-    bottom: 20px;
 
-    width: 300px;
 
-    opacity: 0.8;
 
+  @media screen and(max-width:$moblie) {
 
+    // background-attachment: inherit;
 
+    background-position: right center;
 
   }
 
-
 
-  .sec00_img2 {
 
-    right: 0px;
 
-    top: 50px;
 
-    width: 180px;
 
-    opacity: 0.8;
 
-    transform: rotate(-90deg);
 
+ 
+  .bg {
 
+    background: rgba(0,0,0,0.40);
 
+    width: 100%;
 
+    height: 100%;
 
+    padding: 100px 0;
 
   }
 
-  .sec00_img3 {
 
-    right: 100px;
 
-    bottom: 80px;
 
-    width: 60px;
 
-    opacity: 0.5;
 
-    transform: rotate(-30deg);
 
+hr{
 
+  
+  background: #fff;
 
+  opacity: 1 !important;
 
+  height: 1px;
 
+  width: 40px;
 
+  margin: 15px auto;
 
+}
 
+p{
 
+color:#fff;
 
+}
 
+h4{
 
+color:#fff;
 
+}
 
+.violetbeauty_sec00_box {
 
+  width: 80%;
 
+  margin: 0 auto;
 
+  @media screen and(max-width:$moblie) {
 
+    width: 90%;
 
   }
 
-  .violetbeauty_sec00_box {
 
-    width: 80%;
 
-    margin: 0 auto;
 
-    .sec00_content_left_img {
 
-      width: 60%;
 
-      box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
 
+  .sec00_content_left_img {
 
+    width: 70%;
 
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
 
+    @media screen and(max-width:$moblie) {
 
+      width: 80%;
 
     }
 
-    .sec00_content_right {
 
-      text-align: center;
 
-      margin-top: 50px;
 
+  }
 
+  .sec00_content_right {
 
+    text-align: center;
 
+    margin-top: 30px;
 
+    p{
 
+      margin-bottom: 0.8rem;
 
     }
 
   }
 
 }
 
+}
 
+//  .slick-prev:before{
 
+//    content: "〈";
 
+//    color:#000;
 
+//    font-size: 72px;
 
+//    font-weight: 900;
 
+//   right:100px;
 
+//   z-index: 900;
 
+//   }
 
+
 
+
 
+
 
+// .banner-slide {
 
+//   .slick-dots {
 
+//     bottom: 30px;
 
+//     li {
 
+//       // margin-top: -50px;
 
+//       // 上右下左
 
+
 
+//       button:before {
 
+//         font-size: 16px;
 
+//         font-weight: 900;
 
+//         top: 15px;
 
+//         content: "○";
 
+//         color: #82689d;
 
+//       }
 
+//     }
 
+//     li.slick-active button:before {
 
+//       opacity: 0.75;
 
+//       color: #82689d;
 
+//       content: "●";
 
+//     }
 
+//   }
 
+// }
 
+
 
+// .violetbeauty_sec00 {
 
+//   background: #f8f2f6;
 
+//   padding: 80px 0;
 
+//   position: relative;
 
+//   .sec00_img1 {
 
+//     left: 0px;
 
+//     bottom: 20px;
 
+//     width: 300px;
 
+//     opacity: 0.8;
 
+//   }
 
+
 
+//   .sec00_img2 {
 
+//     right: 0px;
 
+//     top: 50px;
 
+//     width: 180px;
 
+//     opacity: 0.8;
 
+//     transform: rotate(-90deg);
 
+//   }
 
+//   .sec00_img3 {
 
+//     right: 100px;
 
+//     bottom: 80px;
 
+//     width: 60px;
 
+//     opacity: 0.5;
 
+//     transform: rotate(-30deg);
 
+//   }
 
+//   .violetbeauty_sec00_box {
 
+//     width: 80%;
 
+//     margin: 0 auto;
 
+//     .sec00_content_left_img {
 
+//       width: 60%;
 
+//       box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
 
+//     }
 
+//     .sec00_content_right {
 
+//       text-align: center;
 
+//       margin-top: 50px;
 
+//     }
 
+//   }
 
+// }
 
+
 
+// .violetbeauty_sec01,
 
+// .violetbeauty_sec02 {
 
+//   padding: 50px 0;
 
+//   .slick-prev:before {
 
+//     content: "";
 
+//   }
 
+//   .slick-next:before {
 
+//     content: "";
 
+//   }
 
+//   .violetbeauty_sec01_box {
 
+//     width: 80%;
 
+//     margin: 0 auto;
 
+//   }
 
+//   .violetbeauty_sec01_content {
 
+//     margin-top: 30px;
 
+//     .sec01_slide_item {
 
+//       padding: 20px;
 
+//       img {
 
+//         // width: 180px;
 
+//         height: 250px;
 
+//         object-fit: cover;
 
+//         margin: 0 auto;
 
+//       }
 
+//     }
 
+//   }
 
+// }
 
+
 
+// .violetbeauty_sec02 {
 
+//   background: $subcolor;
 
+//   .card {
 
+//     background: $subcolor;
 
+//   }
 
+//   .violetbeauty_sec02_content {
 
+//     margin-top: 30px;
 
+//     .violetbeauty_sec02_sub_title {
 
+//       font-family: "Noto Sans TC", sans-serif;
 
+//       font-size: 20px;
 
+//       font-weight: normal;
 
+//       color: $maincolor;
 
+//     }
 
+//     b {
 
+//       width: 10px;
 
+//       height: 10px;
 
+//       background: $maincolor;
 
+//       transform: rotate(45deg);
 
+//       margin: 1rem 0;
 
+//       display: inline-block;
 
+//     }
 
+//   }
 
+//   .sec02_slide_item {
 
+//     padding: 30px;
 
+//   }
 
+//   .violetbeauty_service_img {
 
+//     img {
 
+//       width: 290px;
 
+//       height: 290px;
 
+//       object-fit: cover;
 
+//       border-radius: 50%;
 
+//       margin: 0 auto;
 
+//     }
 
+//   }
 
+//   .violetbeauty_service p {
 
+//     margin: 10px 0;
 
+//     font-family: "Noto Sans TC", sans-serif;
 
+//     font-size: 16px;
 
+//     color: $maincolor;
 
+//     display: inline-block;
 
+//     width: 90%;
 
+//     border-bottom: 1px dashed $maincolor;
 
+//     padding: 0.5rem 0;
 
+//     cursor: pointer;
 
+//   }
 
+//   // .violetbeauty_service_item,p{
 
+//   //     margin: 10px 0;
 
+//   //     font-family: 'Noto Sans TC', sans-serif;
 
+//   //     font-size: 16px;
 
+//   //     color: #CC7DB7;
 
+//   //     display: inline-block;
 
+//   //     width: 100%;
 
+//   //     border-bottom: 1px dashed $maincolor;
 
 
-.violetbeauty_sec01,
 
-.violetbeauty_sec02 {
 
+//   //     padding:0 1rem;
 
+//   //     display: -webkit-box;
 
+//   //     display: -ms-flexbox;
 
+//   //     display: flex;
 
+//   //     -webkit-box-pack: justify;
 
+//   //     -ms-flex-pack: justify;
 
+//   //     justify-content: space-around;;
 
+//   //     -webkit-box-align: center;
 
+//   //     -ms-flex-align: center;
 
+//   //     align-items: center;
 
+//   // }
 
+// }
 
+
 
+.sec01＿course{
 
+  background: #fff2f1;
 
+}
 
+.sec02＿course{
 
+  background: #fff;
 
+}
 
+.sec01＿course,.sec02＿course{
 
+  // margin:80px 0;
 
   padding: 50px 0;
 
-  .slick-prev:before {
 
-    content: "";
 
-  }
 
-  .slick-next:before {
 
-    content: "";
 
-  }
 
-  .violetbeauty_sec01_box {
 
+  // background: #fff2f1;
 
+  .sec01＿course_box{
 
     width: 80%;
 
     margin: 0 auto;
 
-  }
 
-  .violetbeauty_sec01_content {
 
-    margin-top: 30px;
 
-    .sec01_slide_item {
 
-      padding: 20px;
 
-      img {
 
-        // width: 180px;
 
-        height: 250px;
 
-        object-fit: cover;
 
-        margin: 0 auto;
 
-      }
 
-    }
 
-  }
 
-}
 
-
 
-.violetbeauty_sec02 {
 
-  background: $subcolor;
 
-  .card {
 
-    background: $subcolor;
 
-  }
 
-  .violetbeauty_sec02_content {
 
-    margin-top: 30px;
 
-    .violetbeauty_sec02_sub_title {
 
-      font-family: "Noto Sans TC", sans-serif;
 
-      font-size: 20px;
 
-      font-weight: normal;
 
-      color: $maincolor;
 
+    background: #fff;
 
+    @media screen and(max-width:$moblie) {
 
+      width: 90%;
 
     }
 
-    b {
 
-      width: 10px;
 
-      height: 10px;
 
-      background: $maincolor;
 
-      transform: rotate(45deg);
 
-      margin: 1rem 0;
 
-      display: inline-block;
 
-    }
 
-  }
 
-  .sec02_slide_item {
 
-    padding: 30px;
 
-  }
 
-  .violetbeauty_service_img {
 
-    img {
 
-      width: 290px;
 
-      height: 290px;
 
-      object-fit: cover;
 
-      border-radius: 50%;
 
-      margin: 0 auto;
 
+    .sec01＿course_text{
 
+      text-align: center;
 
+      padding: 15px 5.6%;
 
+      margin-top: 80px;
 
+      @media screen and(max-width:$moblie) {
 
+        padding: 15px 2.8%;
 
+      }
 
+      del{
 
+        font-size: 1.2rem;
 
+        color:#888;
 
+      }
 
+      span{
 
+        color:#ef7086;
 
+        font-size: 1.6rem;
 
+        @media screen and(max-width:$moblie) {
 
+          font-size: 1.4rem;
 
+        }
 
+      }
 
+      p{
 
+        font-size: 14px;
 
+        color: #555;
 
+        padding: 15px 0 0;
 
+      }
 
+      .submitbutton{
 
+        width: 80%;
 
+        margin: 20px auto;
 
+        border: none;
 
+        padding: 10px 12px;
 
+        background: $subcolor;
 
+        color: #fff;
 
+        font-size: 20px;
 
+        border-radius: 0.25rem;
 
+        text-align: center;
 
+        vertical-align: middle;
 
+        border: 1px solid $subcolor;
 
+        &:hover {
 
+          color: $subcolor;
 
+          background-color: #fff;
 
+          border: 1px solid $subcolor;
 
+        }
 
+      }
 
     }
 
   }
 
-  .violetbeauty_service p {
 
-    margin: 10px 0;
 
-    font-family: "Noto Sans TC", sans-serif;
 
-    font-size: 16px;
 
-    color: $maincolor;
 
-    display: inline-block;
 
-    width: 90%;
 
-    border-bottom: 1px dashed $maincolor;
 
-    padding: 0.5rem 0;
 
-    cursor: pointer;
 
-  }
 
-  // .violetbeauty_service_item,p{
 
-  //     margin: 10px 0;
 
-  //     font-family: 'Noto Sans TC', sans-serif;
 
-  //     font-size: 16px;
 
-  //     color: #CC7DB7;
 
-  //     display: inline-block;
 
-  //     width: 100%;
 
-  //     border-bottom: 1px dashed $maincolor;
 
-
 
-  //     padding:0 1rem;
 
-  //     display: -webkit-box;
 
-  //     display: -ms-flexbox;
 
-  //     display: flex;
 
-  //     -webkit-box-pack: justify;
 
-  //     -ms-flex-pack: justify;
 
-  //     justify-content: space-around;;
 
-  //     -webkit-box-align: center;
 
-  //     -ms-flex-align: center;
 
-  //     align-items: center;
 
-  // }
 
+  
 }
 
 
 .violetbeauty_sec03 {
 
@@ -348,16 +724,24 @@ $subcolor: #f4c0d0;
 
   .violetbeauty_sec03_box {
 
     width: 75%;
 
     margin: 0 auto;
 
+    @media screen and(max-width:$moblie) {
 
+      width: 90%;
 
+    }
 
     .violetbeauty_sec03_content {
 
       margin-top: 100px;
 
+      @media screen and(max-width:$moblie) {
 
+        margin-top: 50px;
 
+      }
 
     }
 
   }
 
 
   .violetbeauty_contract_form {
 
     width: 70%;
 
     margin: 0 auto;
 
-
 
-    #submitbutton {
 
+    @media screen and(max-width:$moblie) {
 
+      width: 90%;
 
+    }
 
+    .submitbutton {
 
       width: 100%;
 
       margin: 16px auto;
 
       border: none;
 
@@ -462,38 +846,109 @@ $subcolor: #f4c0d0;
 
 }
 
 
 #footer {
 
+  // background: #edcde1;
 
   background: #fff2f1;
 
+  color: #6c6c6c;
 
+   .phone{
 
+      transform: rotate(100deg);
 
+    }
 
   .footer_content_box {
 
-    padding: 100px 0;
 
+    padding: 50px 0;
 
     margin: 0 auto;
 
     width: 80%;
 
+    @media screen and(max-width:$moblie) {
 
+      width: 90%;
 
+    }
 
+    li a {
 
+      width: 100%;
 
+      text-align: left;
 
+      color: #6c6c6c;
 
+    }
 
+    .border_line{
 
+      margin-top: 30px;
 
+      background: #ccc;
 
+      opacity: 1 !important;
 
+      margin-bottom: 0.5rem;
 
+    }
 
   }
 
-  h3 {
 
-    font-size: 1.5rem;
 
-  }
 
-  p {
 
-    margin-bottom: 0.5rem;
 
-  }
 
+ 
   .socail-link {
 
+  
     a {
 
       margin-right: 8px;
 
     }
 
+   
+  }
 
+  .footer_text_box{
 
+    @media screen and(max-width:$moblie) {
 
+     width: 80%;
 
+     margin:0 auto ;
 
+     }
 
+     h3 {
 
+      font-size: 1rem;
 
+    }
 
+    h3,
 
+    p {
 
+      letter-spacing: 2px;
 
+    }
 
+    .navbar-nav {
 
+      width: auto;
 
+      .nav-link {
 
+        margin: 0;
 
+        padding: 0;
 
+        border-bottom: none;
 
+        transition: all 0.2s;
 
+        font-size: 1rem;
 
+        text-align: center;
 
+        &:hover {
 
+          color: $maincolor;
 
+        }
 
+      }
 
+      .nav-item {
 
+        // width: 80px;
 
+        margin-right: 20px;
 
+        margin-bottom: 10px;
 
+        min-width: auto;
 
+      }
 
+    }
 
   }
 
   .footer_text {
 
     margin-top: 15px;
 
+    @media screen and(max-width:$moblie) {
 
+      font-size: 0.85rem;
 
+      }
 
+  
   }
 
   .socail-link {
 
     margin-top: 30px;
 
+    @media screen and(max-width:$moblie) {
 
+    text-align: center; 
+    }
 
+  a{
 
+    transition: 0.3s;
 
+    &:hover{
 
+      opacity: 0.8;
 
+    }
 
   }
 
-  .store_name {
 
-    color: $maincolor;
 
   }
 
   .store {
 
     width: 85%;
 
     margin: 0 auto;
 
+    @media screen and(max-width:$moblie) {
 
+     margin-top: 50px;
 
+    }
 
     p {
 
       margin-top: 10px;
 
     }
 
+ 
+    h3 {
 
+      font-size: 1.5rem;
 
+      font-weight: 300 !important;
 
+    }
 
+    p {
 
+      margin-bottom: 0.5rem;
 
+      font-weight: 300 !important;
 
+    }
 
   }
 
   .footer_logo {
 
     img {
 
@@ -702,6 +1157,9 @@ $subcolor: #f4c0d0;
 
     white-space: nowrap;
 
     font-weight: bold;
 
     transition: all 0.3s;
 
+    @media screen and(max-width:$moblie) {
 
+      display: block;
 
+    }
 
     &::after {
 
       content: "";
 
       display: inline-block;

+ 39 - 6
facial.html
Wyświetl plik 

@@ -25,8 +25,8 @@
 
 
 <body>
 
   <div id="top" style="overflow-x: hidden;">
 
-    <!-- nav導覽頁 -->
 
-    <div class="container">
 
+    <!-- nav導覽頁-桌機 -->
 
+    <div class="container d-none d-md-block">
 
       <div class="text-center">
 
         <div class="logo"><a href="./"> <img
 
               src="https://img.holkee.com/site/upload/5ed5c6c4-77367dcbb-9908-96b7db46/15185cb9afae29fe563dae310d42def4_double.png"
 
@@ -52,7 +52,7 @@
 
                 </a>
 
               </li>
 
               <li class="nav-item">
 
-                <a class="nav-link" href="" target="_top">
 
+                <a class="nav-link" href="./reserve.html" target="_top">
 
                   立即預約
 
                 </a>
 
               </li>
 
@@ -66,6 +66,38 @@
 
         </div>
 
       </nav>
 
     </div>
 
+        <!-- 導覽頁手機 -->
 
+        <section id="Navigation" class="container-fluid d-md-none d-block" style="padding:0;margin: 0; ">
 
+          <div id="nav" class="row">
 
+            <div class="col-3">
 
+              <i id="menu-btn1" class="fas fa-bars menu ms-2"></i>
 
+            </div>
 
+            <div id="logo" class="col-9">
 
+              <a class="ms-4" href="./index.html"><img src="./img/violetbeauty/LOGO.png" alt=""></a>
 
+            </div>
 
+          </div>
 
+        </section>
 
+        <!-- 手機版彈跳視窗 -->
 
+        <div id="menu-box" class="container-fluid" style="padding:0;margin:0 ">
 
+          <div id="menu-box2">
 
+            <div id="menu1" class="menu-text"><a class="link" href="./facial.html" style="padding-top: 3vw;">臉部課程</a></div>
 
+            <div class="menu-text"><a href="./massage.html" class="link">身體課程</a></div>
 
+            <div class="menu-text"><a href="./about.html" class="link">關於我們</a></div>
 
+            <div class="menu-text"><a href="./reserve.html" class="link">立即預約</a></div>
 
+            <div class="menu-text"><a href="./store.html" class="link">店家資訊</a></div>
 
+            <!-- <div id="menu-link" class="row">
 
+                  <div class="menu-logo col-3"><a href="https://line.me/ti/p/%40ovs4341s"><img
 
+                              src="./img/mobile-logo/line.png" alt=""></a></div>
 
+                  <div class="menu-logo col-3"><a href="https://www.facebook.com/hhhfb"><img
 
+                              src="./img/mobile-logo/fb.png" alt=""></a></div>
 
+                  <div class="menu-logo col-3"><a href="https://www.instagram.com/gorgeous_space/"><img
 
+                              src="./img/mobile-logo/ig.png" alt=""></a></div>
 
+                  <div class="menu-logo col-3"><a href="https://www.youtube.com/user/gorgeousspace"><img
 
+                              src="./img/mobile-logo/youtube.png" alt=""></a></div>
 
+              </div> -->
 
+    
+          </div>
 
+        </div>
 
     <!-- banner -->
 
     <div class="facial-banner">
 
       <!-- <img class="img-fluid" src="https://upload.cc/i1/2022/04/25/GThvcm.jpg" alt=""> -->
 
@@ -136,9 +168,10 @@
 
               </div>
 
 
               <div class="socail-link d-flex ms-sm-auto mt-3 mt-sm-0">
 
-                <a href="https://www.facebook.com/hhhfb" class="me-3"><img src="./img/icon/facebook-app-symbol.png"
 
-                    alt=""></a>
 
-                <a href="https://line.me/ti/p/%40ovs4341s"><img src="./img/icon/001-line.png" alt=""></a>
 
+                <a href="https://page.line.me/237mozkf?openQrModal=true"><i
 
+                  style="font-size: 32px; color: #6C6C6C;" class="fab fa-line me-3"></i></a>
 
+              <a href="https://www.facebook.com/purple4700318/?ref=page_internal"><i
 
+                  style="font-size: 32px; color: #6C6C6C;" class="fab fa-facebook-square"></i></a>
 
               </div>
 
             </div>
 
             <div class="footer_text d-flex flex-sm-row flex-column align-items-center justify-content-between mt-4">

BIN
img/.DS_Store
Wyświetl plik


BIN
img/1.png
Wyświetl plik


BIN
img/2.png
Wyświetl plik


BIN
img/3.png
Wyświetl plik


BIN
img/arrownext.png
Wyświetl plik


BIN
img/arrowprev.png
Wyświetl plik


BIN
img/liana-mikah-4RTAF3Z-0zM-unsplash.jpg
Wyświetl plik


BIN
img/spa.jpg
Wyświetl plik


BIN
img/violetbeauty/43d9c2fee8037323b13304419d28e5e4_double.jpeg
Wyświetl plik


+ 878 - 0
index-2.html
Wyświetl plik 

@@ -0,0 +1,878 @@
 
+<!DOCTYPE html>
 
+<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>紫晴plus+問題性肌膚的護膚</title>
 
+
 
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"
 
+    integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
 
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
 
+    integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
 
+  <!-- Add the slick-theme.css if you want default styling -->
 
+  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
 
+  <!-- Add the slick-theme.css if you want default styling -->
 
+  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" />
 
+  <!-- <link rel="stylesheet" href="css/jquery-ui.css"> -->
 
+  <!-- <link rel="stylesheet" href="/assets/css/swiper.min.css"> -->
 
+  <!-- <link rel="stylesheet" type="text/css" href="css/slick.css" />
 
+    <link rel="stylesheet" type="text/css" href="css/slick-theme.css" /> -->
 
+
 
+  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
 
+
 
+  <link rel="stylesheet" href="css/style.css">
 
+</head>
 
+
 
+<body>
 
+  <div id="top" style="overflow-x: hidden;">
 
+    <!-- nav導覽頁 -->
 
+    <div class="container">
 
+      <div class="text-center">
 
+        <div class="logo"><a href="./"> <img
 
+              src="https://img.holkee.com/site/upload/5ed5c6c4-77367dcbb-9908-96b7db46/15185cb9afae29fe563dae310d42def4_double.png"
 
+              alt=""> </a> </div>
 
+      </div>
 
+      <nav class="navbar">
 
+        <div class="container-fluid">
 
+          <div class="navbar-collapse navbar-center" id="navbarSupportedContent">
 
+            <ul class="navbar-nav justify-content-center">
 
+              <li class="nav-item">
 
+                <a class="nav-link" href="./facial.html" target="_top">
 
+                  臉部課程
 
+                </a>
 
+              </li>
 
+              <li class="nav-item">
 
+                <a class="nav-link" href="" target="_top">
 
+                  身體課程
 
+                </a>
 
+              </li>
 
+              <li class="nav-item">
 
+                <a class="nav-link" href="" target="_top">
 
+                  關於我們
 
+                </a>
 
+              </li>
 
+              <li class="nav-item">
 
+                <a class="nav-link" href="" target="_top">
 
+                  立即預約
 
+                </a>
 
+              </li>
 
+              <li class="nav-item">
 
+                <a class="nav-link" href="./store.html" target="_top">
 
+                  店家資訊
 
+                </a>
 
+              </li>
 
+              <!-- <li class="nav-item">
 
+                <a class="nav-link" href="index.asp?url=101&amp;cno=6" target="_top">
 
+                  優惠活動
 
+                </a>
 
+              </li>
 
+              <li class="nav-item">
 
+                <a class="nav-link" id="navbarDropdown" data-gt-target="#violetbeauty_sec00_CTA" data-gt-duration="800"
 
+                  data-gt-offset="-80">
 
+                  影片介紹
 
+                </a>
 
+
 
+                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
 
+                  <div class="multi-column">
 
+                    <ul class="multi-column-dropdown">
 
+                      <li><a href="wb_product00.asp#a33" target="_top"><img src="Pic/ProductItem/15826239140033.png">
 
+                          <p>清潔卸妝</p>
 
+                        </a>
 
+                      </li>
 
+                      <li><a href="wb_product00.asp#a32" target="_top"><img src="Pic/ProductItem/15826239250032.png">
 
+                          <p>保濕呵護</p>
 
+                        </a>
 
+                      </li>
 
+                      <li><a href="wb_product00.asp#a31" target="_top"><img src="Pic/ProductItem/15711600350031.png">
 
+                          <p>精華保養</p>
 
+                        </a>
 
+                      </li>
 
+                      <li><a href="wb_product00.asp#a30" target="_top"><img src="Pic/ProductItem/15711599120030.png">
 
+                          <p>白皙防曬</p>
 
+                        </a>
 
+                      </li>
 
+                      <li><a href="wb_product00.asp#a28" target="_top"><img src="Pic/ProductItem/15711598340028.png">
 
+                          <p>眼唇保養</p>
 
+                        </a>
 
+                      </li>
 
+                      <li><a href="wb_product00.asp#a29" target="_top"><img src="Pic/ProductItem/15711597460029.png">
 
+                          <p>身體保養</p>
 
+                        </a>
 
+                      </li>
 
+                      <li><a href="wb_product00.asp#a27" target="_top"><img src="Pic/ProductItem/16280772210027.png">
 
+                          <p>居家保養</p>
 
+                        </a>
 
+                      </li>
 
+                      <li><a href="wb_product00.asp#a40" target="_top"><img src="Pic/ProductItem/16280145730040.png">
 
+                          <p>普羅旺斯精油</p>
 
+                        </a>
 
+                      </li>
 
+                    </ul>
 
+                    <div class="clearfix"></div>
 
+                  </div>
 
+                </div>
 
+              </li> -->
 
+              <!-- <li class="nav-item">
 
+                <a class="nav-link" data-gt-target="#violetbeauty_sec01_CTA" data-gt-duration="800" data-gt-offset="">
 
+                  SPA課程
 
+                </a>
 
+              </li>
 
+              <li class="nav-item">
 
+                <a class="nav-link" data-gt-target="#violetbeauty_sec02_CTA" data-gt-duration="800" data-gt-offset="">
 
+                  美體護理
 
+                </a>
 
+              </li>
 
+              <li class="nav-item">
 
+                <a class="nav-link" data-gt-target="#footer" data-gt-duration="800" data-gt-offset="">
 
+                  門市資訊
 
+                </a>
 
+              </li>
 
+              <li class="nav-item">
 
+                <a class="nav-link" data-gt-target="#violetbeauty_sec03_CTA" data-gt-duration="800"
 
+                  data-gt-offset="-80">
 
+                  報名體驗
 
+                </a>
 
+              </li> -->
 
+
 
+            </ul>
 
+          </div>
 
+        </div>
 
+      </nav>
 
+    </div>
 
+    <!-- banner首圖 -->
 
+    <div class="banner-slide">
 
+      <div class="banner-slide-item">
 
+        <img class="img-fluid" src="./img/banner.jpeg" alt="">
 
+      </div>
 
+      <div class="banner-slide-item">
 
+        <img class="img-fluid" src="./img/banner.jpeg" alt="">
 
+      </div>
 
+      <div class="banner-slide-item">
 
+        <img class="img-fluid" src="./img/banner.jpeg" alt="">
 
+      </div>
 
+      <div class="banner-slide-item">
 
+        <img class="img-fluid" src="./img/banner.jpeg" alt="">
 
+      </div>
 
+      <div class="banner-slide-item">
 
+        <img class="img-fluid" src="./img/banner.jpeg" alt="">
 
+      </div>
 
+      <div class="banner-slide-item">
 
+        <img class="img-fluid" src="./img/banner.jpeg" alt="">
 
+      </div>
 
+    </div>
 
+    <div class="gototop text-center" data-gt-target="#top" data-gt-duration="500" data-gt-offset="0">
 
+      <i class="fas fa-chevron-up"></i>
 
+    </div>
 
+    <!-- s00 -->
 
+    <section id="violetbeauty_sec00_CTA" class="violetbeauty_sec00">
 
+      <div class="violetbeauty_sec00_box">
 
+        <div class="row px-0 mx-0">
 
+          <div class="col-md-6">
 
+            <div style="position: relative;">
 
+              <div class="text-center">
 
+                <img class="playbutton play-pc" data-info="wBxQJns1MKY" data-bs-target="#yt-video"
 
+                  data-bs-toggle="modal" src="./img/Icon awesome-play-circle.png" alt="" width="50">
 
+              </div>
 
+              <div class="sec00_content_left text-center">
 
+                <img class="sec00_content_left_img" src="./img/violetbeauty/sec00.jpg" alt="">
 
+              </div>
 
+            </div>
 
+          </div>
 
+          <div class="col-md-5">
 
+            <div class="sec00_content_right">
 
+              <h2 class="violetbeauty_content_title">韓國小氣泡水嫩課程</h2>
 
+              <img class="Down_line" src="./img/line.png" alt="">
 
+              <div class="sec_content_right_text">
 
+                <p class="text-center">清潔角質層，改善黑頭粉刺，</p>
 
+                <p class="text-center">驅除油脂汙垢，使皮膚通透有光澤，</p>
 
+                <p class="text-center">提供持久的含水量，使皮膚濕潤、細膩有光澤。</p>
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+      <!-- <img style="position: absolute;" class="sec00_img1" src="./img/sec00_img1.png" alt="">
 
+      <img style="position: absolute;" class="sec00_img2" src="./img/sec00_img2.png" alt="">
 
+      <img style="position: absolute;" class="sec00_img3" src="./img/flower.png" alt=""> -->
 
+
 
+
 
+    </section>
 
+    <!-- sec01區塊 -->
 
+    <section id="violetbeauty_sec01_CTA" class="violetbeauty_sec01">
 
+      <div class="violetbeauty_sec01_box">
 
+        <div class="features">
 
+          <div class="features_title fw-bold">SPA課程</div>
 
+          <div class="text-center">
 
+            <img class="Down_line" src="./img/line.png" alt="">
 
+          </div>
 
+        </div>
 
+        <div class="violetbeauty_sec01_content">
 
+          <div class="violetbeauty_sec01_slide">
 
+
 
+            <div class="card sec01_slide_item">
 
+              <img class="img-fluid" src="./img/violetbeauty/sec00.jpg" class="card-img-top" alt="...">
 
+              <div class="card-body">
 
+                <p class="course_name_title">韓國 小氣泡水嫩課程</p>
 
+                <div class="course_name_text d-flex">
 
+                  <div style="width: 60%;">
 
+                    <span>
 
+                      體驗價
 
+                    </span>
 
+                    <span class="Discounted＿price">
 
+                      $1,699
 
+                    </span>
 
+                    <p style="text-decoration:line-through;">
 
+                      原價：$6,600
 
+                    </p>
 
+                  </div>
 
+                  <div style="width: 40%;" class="text-end">
 
+                    <button type="button" class="learn_more" data-info="1" data-bs-target="#course_int"
 
+                      data-bs-toggle="modal">詳細資訊</button>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="card sec01_slide_item">
 
+              <img class="img-fluid" src="./img/violetbeauty/slide02.png" class="card-img-top" alt="...">
 
+              <div class="card-body">
 
+                <p class="course_name_title">四合一護膚課程</p>
 
+                <div class="course_name_text d-flex">
 
+                  <div style="width: 60%;">
 
+                    <span>
 
+                      體驗價
 
+                    </span>
 
+                    <span class="Discounted＿price">
 
+                      $1,800
 
+                    </span>
 
+                    <p style="text-decoration:line-through;">
 
+                      原價：$3,600
 
+                    </p>
 
+                  </div>
 
+                  <div style="width: 40%;" class="text-end">
 
+                    <button type="button" class="learn_more" data-info="2" data-bs-target="#course_int"
 
+                      data-bs-toggle="modal">詳細資訊</button>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="card sec01_slide_item">
 
+              <img class="img-fluid" src="./img/violetbeauty/slide3.png" class="card-img-top" alt="...">
 
+              <div class="card-body">
 
+                <p class="course_name_title">五行氣穴調理課程</p>
 
+                <div class="course_name_text d-flex">
 
+                  <div style="width: 60%;">
 
+                    <span>
 
+                      體驗價
 
+                    </span>
 
+                    <span class="Discounted＿price">
 
+                      $1,288
 
+                    </span>
 
+                    <p style="text-decoration:line-through;">
 
+                      原價：$4,400
 
+                    </p>
 
+                  </div>
 
+                  <div style="width: 40%;" class="text-end">
 
+                    <button type="button" class="learn_more" data-info="3" data-bs-target="#course_int"
 
+                      data-bs-toggle="modal">詳細資訊</button>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+
 
+            <div class="card sec01_slide_item">
 
+              <img class="img-fluid" src="./img/violetbeauty/slide4.png" class="card-img-top" alt="...">
 
+              <div class="card-body">
 
+                <p class="course_name_title">液態皮秒課程</p>
 
+                <div class="course_name_text d-flex">
 
+                  <div style="width: 60%;">
 
+                    <span>
 
+                      體驗價
 
+                    </span>
 
+                    <span class="Discounted＿price">
 
+                      $2,200
 
+                    </span>
 
+                    <p style="text-decoration:line-through;">
 
+                      原價：$8,800
 
+                    </p>
 
+                  </div>
 
+                  <div style="width: 40%;" class="text-end">
 
+                    <button type="button" class="learn_more" data-info="4" data-bs-target="#course_int"
 
+                      data-bs-toggle="modal">詳細資訊</button>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="card sec01_slide_item">
 
+              <img class="img-fluid" src="./img/violetbeauty/slide5.jpg" class="card-img-top" alt="...">
 
+              <div class="card-body">
 
+                <p class="course_name_title">煥顏淨化課程</p>
 
+                <div class="course_name_text d-flex">
 
+                  <div style="width: 60%;">
 
+                    <span>
 
+                      體驗價
 
+                    </span>
 
+                    <span class="Discounted＿price">
 
+                      $1,200
 
+                    </span>
 
+                    <p style="text-decoration:line-through;">
 
+                      原價：$1,499
 
+                    </p>
 
+                  </div>
 
+                  <div style="width: 40%;" class="text-end">
 
+                    <button type="button" class="learn_more" data-info="5" data-bs-target="#course_int"
 
+                      data-bs-toggle="modal">詳細資訊</button>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="card sec01_slide_item">
 
+              <img class="img-fluid" src="./img/violetbeauty/slide6.jpg" class="card-img-top" alt="...">
 
+              <div class="card-body">
 
+                <p class="course_name_title">極效淨白課程</p>
 
+                <div class="course_name_text d-flex">
 
+                  <div style="width: 60%;">
 
+                    <span>
 
+                      體驗價
 
+                    </span>
 
+                    <span class="Discounted＿price">
 
+                      $1,600
 
+                    </span>
 
+                    <p style="text-decoration:line-through;">
 
+                      原價：$2,200
 
+                    </p>
 
+                  </div>
 
+                  <div style="width: 40%;" class="text-end">
 
+                    <button type="button" class="learn_more" data-info="6" data-bs-target="#course_int"
 
+                      data-bs-toggle="modal">詳細資訊</button>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="card sec01_slide_item">
 
+              <img class="img-fluid" src="./img/violetbeauty/slide7.jpg" class="card-img-top" alt="...">
 
+              <div class="card-body">
 
+                <p class="course_name_title">波動舒活經絡課程</p>
 
+                <div class="course_name_text d-flex">
 
+                  <div style="width: 60%;">
 
+                    <span>
 
+                      體驗價
 
+                    </span>
 
+                    <span class="Discounted＿price">
 
+                      $1,200
 
+                    </span>
 
+                    <p style="text-decoration:line-through;">
 
+                      原價：$6,800
 
+                    </p>
 
+                  </div>
 
+                  <div style="width: 40%;" class="text-end">
 
+                    <button type="button" class="learn_more" data-info="7" data-bs-target="#course_int"
 
+                      data-bs-toggle="modal">詳細資訊</button>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="card sec01_slide_item">
 
+              <img class="img-fluid" src="./img/violetbeauty/slide8.jpg" class="card-img-top" alt="...">
 
+              <div class="card-body">
 
+                <p class="course_name_title">淨透無暇美背</p>
 
+                <div class="course_name_text d-flex">
 
+                  <div style="width: 60%;">
 
+                    <span>
 
+                      體驗價
 
+                    </span>
 
+                    <span class="Discounted＿price">
 
+                      $2,200
 
+                    </span>
 
+                    <p style="text-decoration:line-through;">
 
+                      原價：$6,600
 
+                    </p>
 
+                  </div>
 
+                  <div style="width: 40%;" class="text-end">
 
+                    <button type="button" class="learn_more" data-info="8" data-bs-target="#course_int"
 
+                      data-bs-toggle="modal">詳細資訊</button>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="card sec01_slide_item">
 
+              <img class="img-fluid" src="./img/violetbeauty/slide9.jpg" class="card-img-top" alt="...">
 
+              <div class="card-body">
 
+                <p class="course_name_title">五行水晶能量岩盤浴</p>
 
+                <div class="course_name_text d-flex">
 
+                  <div style="width: 60%;">
 
+                    <span>
 
+                      體驗價
 
+                    </span>
 
+                    <span class="Discounted＿price">
 
+                      $800
 
+                    </span>
 
+                    <p style="text-decoration:line-through;">
 
+                      原價：$1,200
 
+                    </p>
 
+                  </div>
 
+                  <div style="width: 40%;" class="text-end">
 
+                    <button type="button" class="learn_more" data-info="9" data-bs-target="#course_int"
 
+                      data-bs-toggle="modal">詳細資訊</button>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+
 
+
 
+          </div>
 
+        </div>
 
+        <div class="text-center">
 
+          <button class="violetbeauty_CTA" data-gt-target="#violetbeauty_sec03_CTA" data-gt-duration="800"
 
+            data-gt-offset="-80">
 
+            <!-- <img class="cta_flower" src="./img/flower.png" alt=""> -->
 
+            立即體驗
 
+          </button>
 
+
 
+        </div>
 
+      </div>
 
+    </section>
 
+    <!-- sec02區塊 -->
 
+    <section id="violetbeauty_sec02_CTA" class="violetbeauty_sec02">
 
+      <div class="violetbeauty_sec01_box">
 
+        <div class="features">
 
+          <div class="features_title fw-bold">紫晴的服務</div>
 
+          <div class="text-center">
 
+            <img class="Down_line" src="./img/line.png" alt="">
 
+          </div>
 
+        </div>
 
+        <div class="violetbeauty_sec02_content">
 
+          <div class="violetbeauty_sec02_slide">
 
+            <div class="card sec02_slide_item">
 
+              <div class="text-center">
 
+                <p class="violetbeauty_sec02_sub_title text-center mb-0">想抗痘看這裡</p>
 
+                <b></b>
 
+              </div>
 
+              <br>
 
+              <div class="violetbeauty_service_img">
 
+                <img src="./img/violetbeauty/karelys-ruiz-PqyzuzFiQfY-unsplash.png" class="card-img-top" alt="...">
 
+              </div>
 
+              <div class="card-body">
 
+                <div class="violetbeauty_service text-center">
 
+                  <p>粉刺淨化課程</p>
 
+                  <p>戰鬥調理課程</p>
 
+                  <p>小氣泡水嫩課程</p>
 
+                  <p><i class="fas fa-crown crown me-1"></i>虹鑽黑晶煥顏課程</p>
 
+
 
+                  <!-- <div class="violetbeauty_service_item">
 
+                                        <div>
 
+                                            <p>粉刺淨化課程</p>
 
+                                        </div>
 
+                                        <div>
 
+                                            <p style="text-decoration:line-through;">原價$1,600</p>
 
+                                            <p>體驗價$1,200</p>
 
+                                        </div>
 
+                                    </div>
 
+                                    <div class="violetbeauty_service_item">
 
+                                        <div>
 
+                                            <p>粉刺淨化課程</p>
 
+                                        </div>
 
+                                        <div>
 
+                                            <p style="text-decoration:line-through;">原價$1,600</p>
 
+                                            <p>體驗價$1,200</p>
 
+                                        </div>
 
+                                    </div>
 
+                                    <div class="violetbeauty_service_item">
 
+                                        <div>
 
+                                            <p>粉刺淨化課程</p>
 
+                                        </div>
 
+                                        <div>
 
+                                            <p style="text-decoration:line-through;">原價$1,600</p>
 
+                                            <p>體驗價$1,200</p>
 
+                                        </div>
 
+                                    </div>
 
+                                    <div class="violetbeauty_service_item">
 
+                                        <div>
 
+                                            <p>粉刺淨化課程</p>
 
+                                        </div>
 
+                                        <div>
 
+                                            <p style="text-decoration:line-through;">原價$1,600</p>
 
+                                            <p>體驗價$1,200</p>
 
+                                        </div>
 
+                                    </div> -->
 
+                </div>
 
+
 
+              </div>
 
+            </div>
 
+            <div class="card sec02_slide_item">
 
+              <div class="text-center">
 
+                <p class="violetbeauty_sec02_sub_title text-center mb-0">想抗老看這裡</p>
 
+                <b></b>
 
+              </div>
 
+
 
+              <br>
 
+              <div class="violetbeauty_service_img">
 
+                <img src="./img/violetbeauty/8214cab8eddae493f172395f85071a34_large.jpg" class="card-img-top" alt="...">
 
+              </div>
 
+              <div class="card-body">
 
+                <div class="violetbeauty_service text-center">
 
+                  <p>熱麻吉提拉課程</p>
 
+                  <p>黃金亮眼課程</p>
 
+
 
+                </div>
 
+
 
+              </div>
 
+            </div>
 
+            <div class="card sec02_slide_item">
 
+              <div class="text-center">
 
+                <p class="violetbeauty_sec02_sub_title text-center mb-0">想美白看這裡</p>
 
+                <b></b>
 
+              </div>
 
+
 
+              <br>
 
+              <div class="violetbeauty_service_img">
 
+                <img src="./img/violetbeauty/4c853fd801ce5bf2c5c0e40b388ff64c_large.jpg" class="card-img-top" alt="...">
 
+              </div>
 
+              <div class="card-body">
 
+                <div class="violetbeauty_service text-center">
 
+                  <p>幹細胞淡斑課程</p>
 
+                  <p>極效淨白課程</p>
 
+                  <p><i class="fas fa-crown crown me-1"></i>液態皮秒課程</p>
 
+                  <p>淨妍晶靈課程</p>
 
+                </div>
 
+
 
+              </div>
 
+            </div>
 
+            <div class="card sec02_slide_item">
 
+              <div class="text-center">
 
+                <p class="violetbeauty_sec02_sub_title text-center mb-0">想保濕看這裡</p>
 
+                <b></b>
 
+              </div>
 
+
 
+              <br>
 
+              <div class="violetbeauty_service_img">
 
+                <img src="./img/violetbeauty/a407cb758ade8bfa6fcea9248d3d21c8_large.jpg" class="card-img-top" alt="...">
 
+              </div>
 
+              <div class="card-body">
 
+                <div class="violetbeauty_service text-center">
 
+                  <p>維生素育膚課程</p>
 
+                  <p>二倍氧修復課程</p>
 
+                  <p>水行俠氫淨課程</p>
 
+                  <p><i class="fas fa-crown crown me-1"></i>即效四合一課程</p>
 
+
 
+                </div>
 
+
 
+              </div>
 
+            </div>
 
+            <div class="card sec02_slide_item">
 
+              <div class="text-center">
 
+                <p class="violetbeauty_sec02_sub_title text-center mb-0">什麼都想看這裡</p>
 
+                <b></b>
 
+              </div>
 
+
 
+              <br>
 
+              <div class="violetbeauty_service_img">
 
+                <img src="./img/violetbeauty/7e5af8ac92b653fb86cefa833a040988_large.jpg" class="card-img-top" alt="...">
 
+              </div>
 
+              <div class="card-body">
 
+                <div class="violetbeauty_service text-center">
 
+                  <p>虹鑽黑晶煥顏課程+四合一</p>
 
+                  <p>液態皮秒+幹細胞</p>
 
+                  <p>四合一+液態皮秒</p>
 
+                  <p>熱麻吉+黃金亮眼</p>
 
+
 
+                </div>
 
+
 
+              </div>
 
+            </div>
 
+            <div class="card sec02_slide_item">
 
+              <div class="text-center">
 
+                <p class="violetbeauty_sec02_sub_title text-center mb-0">特殊護理</p>
 
+                <b></b>
 
+              </div>
 
+
 
+              <br>
 
+              <div class="violetbeauty_service_img">
 
+                <img src="./img/violetbeauty/engin-akyurt-g-m8EDc4X6Q-unsplash.png" class="card-img-top" alt="...">
 
+              </div>
 
+              <div class="card-body">
 
+                <div class="violetbeauty_service text-center">
 
+                  <p>MTS特殊護理課程</p>
 
+                  <p>除痣護理課程</p>
 
+
 
+
 
+                </div>
 
+
 
+              </div>
 
+            </div>
 
+          </div>
 
+
 
+
 
+        </div>
 
+      </div>
 
+      <!-- <div class="text-center">
 
+                <button class="violetbeauty_CTA" data-gt-target="#violetbeauty_sec03_CTA" data-gt-duration="800"
 
+                    data-gt-offset=""><img class="cta_flower" src="./img/flower.png" alt="">立即體驗</button>
 
+
 
+            </div> -->
 
+    </section>
 
+    <!-- sec01區塊 -->
 
+    <section id="violetbeauty_sec03_CTA" class="violetbeauty_sec03">
 
+      <!-- <img class="sec03_img1" src="./img/flower.png" alt=""> -->
 
+
 
+      <div class="violetbeauty_sec03_box">
 
+        <div class="features">
 
+          <div class="features_title fw-bold">報名體驗課程</div>
 
+          <div class="text-center">
 
+            <img class="Down_line" src="./img/line.png" alt="">
 
+          </div>
 
+        </div>
 
+        <div class="sec_content_right_text">
 
+          <p class="text-center">為您提供最合適的服務，讓我們用最短的時間。</p>
 
+          <p class="text-center">有效改善您困擾已久的肌膚問題</p>
 
+        </div>
 
+
 
+        <div class="violetbeauty_sec03_content">
 
+          <div class="row mx-0 px-0">
 
+            <div class="col-md-6">
 
+              <img class="img-fluid" src="./img/Screen Shot 2022-04-06 at 下午2.38.37.png" alt="">
 
+            </div>
 
+            <div class="col-md-6">
 
+              <div class="violetbeauty_contract_form">
 
+                <p class="text-danger">提前預約時間為3天，若需安排近期時間請加入官方LINE</p>
 
+                <input type="text" name="name" id="name" placeholder="請輸入姓名" required>
 
+                <input type="text" name="phone" id="phone" placeholder="請輸入電話">
 
+                <select name="loc" id="loc" required>
 
+                  <option value="" disabled selected="selected">預約體驗的店家</option>
 
+                  <option class="option" value="紫晴plus+大溪店">紫晴plus+大溪店</option>
 
+                  <option class="option" value="紫晴plus+龍潭店">紫晴plus+龍潭店</option>
 
+                </select>
 
+
 
+                <select name="course_name" required="" class="user-invalid valueMissing" id="course_name">
 
+                  <option value="">想要體驗的課程</option>
 
+                  <option value="韓國小氣泡水嫩課程 /70分">韓國小氣泡水嫩課程 /70分</option>
 
+                  <option value="四合一護膚課程 /90分">四合一護膚課程 /90分</option>
 
+                  <option value="液態皮秒課程 /60分">液態皮秒課程 /60分</option>
 
+                  <option value="五行氣穴調理課程 /40分">五行氣穴調理課程 /40分</option>
 
+                  <option value="煥顏淨化課程 /60分">煥顏淨化課程 /60分</option>
 
+                  <option value="極效淨白課程 /75分">極效淨白課程 /75分</option>
 
+                  <option value="波動經絡背部課程 /60分">波動經絡背部課程 /60分</option>
 
+                  <option value="淨透無暇美背 /80分">淨透無暇美背 /80分</option>
 
+                  <option value="五行水晶能量岩盤浴 /40分">五行水晶能量岩盤浴 /40分</option>
 
+                </select>
 
+                <input name="prefer_date" class="datepicker" type="date" id="datepicker" placeholder="預選裝修日期" required>
 
+                <input name="prefer_date" class="time" type="time" id="time" placeholder="想要體驗的時間" required>
 
+                <div class="form-btn">
 
+                  <button id="submitbutton" class="btn" style="opacity: 1;" type="submit">立即預約
 
+                    ></button>
 
+                </div>
 
+              </div>
 
+            </div>
 
+
 
+          </div>
 
+        </div>
 
+      </div>
 
+      <!-- <img class="sec03_img2" src="./img/sec03_img2.png" alt="">
 
+      <img class="sec03_img3" src="./img/sec03_img3.png" alt=""> -->
 
+
 
+    </section>
 
+
 
+    <footer id="footer">
 
+      <div class="footer_content_box">
 
+        <div class="row">
 
+          <div class="col-md-4">
 
+            <div class="footer_logo">
 
+              <a href="./">
 
+                <img
 
+                  src="https://img.holkee.com/site/upload/5ed5c6c4-77367dcbb-9908-96b7db46/15185cb9afae29fe563dae310d42def4_double.png"
 
+                  alt=""> </a>
 
+            </div>
 
+            <div class="footer_text">
 
+              <h3>紫晴美妍坊 plus+</h3>
 
+              <h3>問題性肌膚的護膚專家</h3>
 
+            </div>
 
+            <div class="footer_text">
 
+              <p>美的事物是永恆的喜悅</p>
 
+              <p>紫晴企業社</p>
 
+            </div>
 
+            <div class="socail-link">
 
+              <a href="https://www.facebook.com/hhhfb"><img src="./img/Icon awesome-line.png" alt=""></a>
 
+              <a href="https://line.me/ti/p/%40ovs4341s"><img src="./img/Icon metro-facebook.png" alt=""></a>
 
+            </div>
 
+          </div>
 
+          <div class="col-md-4">
 
+            <div class="store">
 
+              <h3 class="store_name mb-5 fw-bold">紫晴plus+大溪店</h3>
 
+              <img class="img-fluid" src="./img/violetbeauty/store1.jpg" alt="">
 
+              <div class="mt-3">
 
+                <p><i style="font-size: 24px;" class="fas fa-map-marker-alt me-3"></i>桃園市大溪區仁善街108-11號
 
+                </p>
 
+                <p><i style="font-size: 24px;" class="fas fa-phone me-3"></i>03-3808198</p>
 
+                <p><i style="font-size: 24px;" class="fas fa-clock me-3"></i>10:00-20:00</p>
 
+              </div>
 
+              <div class="mt-4">
 
+                <a target="_blank" style="text-decoration: none;"
 
+                  href="https://www.google.com.tw/maps/place/335%E6%A1%83%E5%9C%92%E5%B8%82%E5%A4%A7%E6%BA%AA%E5%8D%80%E4%BB%81%E5%96%84%E8%A1%97108-11%E8%99%9F/@24.9093929,121.2812614,17z/data=!3m1!4b1!4m5!3m4!1s0x346818684fc613c5:0xd24fceb417e6322f!8m2!3d24.9093929!4d121.2834501">
 
+                  <button class="google_map">
 
+                    Google地圖 >
 
+                  </button>
 
+                </a>
 
+                <a target="_blank" href="https://line.me/R/ti/p/%2540qlo9716l">
 
+                  <button class="line_Reserve">
 
+                    LINE預約 >
 
+                  </button>
 
+                </a>
 
+              </div>
 
+            </div>
 
+          </div>
 
+          <div class="col-md-4">
 
+            <div class="store">
 
+              <h3 class="store_name mb-5 fw-bold">紫晴plus+龍潭店</h3>
 
+              <img class="img-fluid" src="./img/violetbeauty/store2.jpg" alt="">
 
+              <div class="mt-3">
 
+                <p><i style="font-size: 24px;" class="fas fa-map-marker-alt me-3"></i>桃園市龍潭區百年路7號</p>
 
+                <p><i style="font-size: 24px;" class="fas fa-phone me-3"></i>03-4700318</p>
 
+                <p><i style="font-size: 24px;" class="fas fa-clock me-3"></i>10:00-20:00</p>
 
+              </div>
 
+              <div class="mt-4">
 
+                <a target="_blank" style="text-decoration: none;"
 
+                  href="https://www.google.com.tw/maps/place/%E6%A1%83%E5%9C%92%E5%B8%82%E5%A4%A7%E6%BA%AA%E5%8D%80%E4%BB%81%E5%96%84%E8%A1%97108-11%E8%99%9F">
 
+                  <button class="google_map">Google地圖 ></button>
 
+                </a>
 
+
 
+                <a target="_blank" style="text-decoration: none;" href="https://line.me/R/ti/p/%2540qlo9716l">
 
+                  <button class="line_Reserve">LINE預約 ></button>
 
+                </a>
 
+              </div>
 
+            </div>
 
+          </div>
 
+
 
+        </div>
 
+      </div>
 
+
 
+    </footer>
 
+    <div class="closeplay modal fade" id="yt-video" tabindex="-1" aria-labelledby="exampleModalLabel1"
 
+      aria-hidden="true">
 
+      <div class="modal-dialog modal-lg">
 
+        <div class="modal-content bg-transparent border-0">
 
+          <div class="modal-header border-0">
 
+            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
 
+          </div>
 
+          <div id="video-modal" class="modal-body">
 
+            <style>
 
+              .embed-container {
 
+                position: relative;
 
+                padding-bottom: 56.25%;
 
+                height: 0;
 
+                overflow: hidden;
 
+                max-width: 100%;
 
+              }
 
+
 
+              .embed-container iframe,
 
+              .embed-container object,
 
+              .embed-container embed {
 
+                position: absolute;
 
+                top: 0;
 
+                left: 0;
 
+                width: 100%;
 
+                height: 100%;
 
+              }
 
+            </style>
 
+            <div class='embed-container'><iframe class='youtube-video' src='https://www.youtube.com/embed//XlPxHa9BcKY'
 
+                frameborder='0' allowfullscreen height="394" allow="autoplay;"></iframe></div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+
 
+
 
+    <div class="closeplay modal fade" id="course_int" tabindex="-1" aria-labelledby="exampleModalLabel1"
 
+      aria-hidden="true">
 
+      <div class="modal-dialog modal-lg">
 
+        <div class="modal-content  border-0">
 
+          <div class="modal-header border-0">
 
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
 
+          </div>
 
+          <div id="video-modal" class="modal-body pb-5">
 
+            <!-- <div class="course_detail py-3">
 
+                                <div class="row">
 
+                                    <div class="col-md-7">
 
+                                        <div class="course_detail_img mt-3">
 
+                                            <img class="img-fluid"
 
+                                                src="https://img.holkee.com/site/upload/5ed5c6c4-77367dcbb-9908-96b7db46/fb3d64b06a36b796bbf5b60fe02cd5c5_double.jpg"
 
+                                                alt="">
 
+                                        </div>
 
+                                    </div>
 
+                                    <div class="col-md-5">
 
+                                        <div class="course_detail_text">
 
+                                            <div class="features_title fw-bold text-start">韓國小氣泡水嫩課程</div>
 
+    
+    
+                                            <div class="sec_content_right_text">
 
+                                                <p>原價6600 體驗1699 /70分
 
+                                                    採用納米級的水氣泡，配合真空負壓原理，形成真空迴路，將超細微小氣泡和水分充分結合，通過特殊設計的螺旋形吸頭直接作用於皮膚，且能夠保持超細微小氣泡長時間接觸皮膚，促進剝離作用。
 
+                                                </p>
 
+                                                <p>潔角質層，改善黑頭粉刺，驅除油脂汙垢，使皮膚通透有光澤，提供持久的含水量，使皮膚濕潤、細膩有光澤。</p>
 
+                                            </div>
 
+                                        </div>
 
+                                        <div class="text-center">
 
+                                            <button class="violetbeauty_CTA mt-4"><a style="text-decoration: none;"
 
+                                                    target="_blank" href="https://line.me/R/ti/p/%2540qlo9716l"><img
 
+                                                        class="cta_flower" src="./img/flower.png" alt="">立即體驗</a></button>
 
+                                        </div>
 
+                                    </div>
 
+                                </div>
 
+                            </div> -->
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </div>
 
+  </div>
 
+  <!-- <section>
 
+        <div class="container-fluid violetbeauty_sec01">
 
+            <div class="features">
 
+                <div class="features_title fw-bold">紫晴美妍坊 plus 問題性肌膚的護膚專家</div>
 
+            </div>
 
+    
+            <div class="violetbeauty_sec01_content">
 
+                <div class="row mx-0 px-0">
 
+                    <div class="col-md-6">
 
+                        <div class="sec01_content_left">
 
+                            <div class="sec01_content_box">
 
+                                <div class="sec01_content_title_1 mb-3">Lorem ipsum</div>
 
+                                <div class="sec01_content_title_2 mb-3">
 
+                                    <h3>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Id, animi amet</h3>
 
+                                </div>
 
+                                <div class="sec01_content_text">
 
+                                    <p class="text-secondary">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Id, animi amet. Sapiente dolorum incidunt aut ratione architecto ab sint iste ullam magnam, alias laboriosam nobis.</p>
 
+                                    
+
 
+                                </div>
 
+                            </div>
 
+                        </div>
 
+
 
+                    </div>
 
+                    <div class="col-md-6">
 
+                        <div class="sec01_content_right">
 
+                          <img class="sec01_content_img" src="./img/Screen Shot 2022-04-06 at 下午2.38.37.png" alt="">
 
+                        </div>
 
+                    </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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
 
+
 
+  <script async defer src="js/index.js"></script>
 
+</body>
 
+
 
+</html>

+ 218 - 82
index.html
Wyświetl plik 

@@ -27,8 +27,8 @@
 
 
 <body>
 
   <div id="top" style="overflow-x: hidden;">
 
-    <!-- nav導覽頁 -->
 
-    <div class="container">
 
+    <!-- nav導覽頁桌機 -->
 
+    <div class="container d-none d-md-block">
 
       <div class="text-center">
 
         <div class="logo"><a href="./"> <img
 
               src="https://img.holkee.com/site/upload/5ed5c6c4-77367dcbb-9908-96b7db46/15185cb9afae29fe563dae310d42def4_double.png"
 
@@ -44,17 +44,17 @@
 
                 </a>
 
               </li>
 
               <li class="nav-item">
 
-                <a class="nav-link" href="" target="_top">
 
+                <a class="nav-link" href="./massage.html" target="_top">
 
                   身體課程
 
                 </a>
 
               </li>
 
               <li class="nav-item">
 
-                <a class="nav-link" href="" target="_top">
 
+                <a class="nav-link" href="./about.html" target="_top">
 
                   關於我們
 
                 </a>
 
               </li>
 
               <li class="nav-item">
 
-                <a class="nav-link" href="" target="_top">
 
+                <a class="nav-link" href="./reserve.html" target="_top">
 
                   立即預約
 
                 </a>
 
               </li>
 
@@ -141,53 +141,96 @@
 
         </div>
 
       </nav>
 
     </div>
 
-    <!-- banner首圖 -->
 
-    <div class="banner-slide">
 
-      <div class="banner-slide-item">
 
-        <img class="img-fluid" src="./img/banner.jpeg" alt="">
 
-      </div>
 
-      <div class="banner-slide-item">
 
-        <img class="img-fluid" src="./img/banner.jpeg" alt="">
 
-      </div>
 
-      <div class="banner-slide-item">
 
-        <img class="img-fluid" src="./img/banner.jpeg" alt="">
 
-      </div>
 
-      <div class="banner-slide-item">
 
-        <img class="img-fluid" src="./img/banner.jpeg" alt="">
 
+    <!-- 導覽頁手機 -->
 
+    <section id="Navigation" class="container-fluid d-md-none d-block" style="padding:0;margin: 0; ">
 
+      <div id="nav" class="row">
 
+        <div class="col-3">
 
+          <i id="menu-btn1" class="fas fa-bars menu ms-2"></i>
 
+        </div>
 
+        <div id="logo" class="col-9">
 
+          <a class="ms-4" href="./index.html"><img src="./img/violetbeauty/LOGO.png" alt=""></a>
 
+        </div>
 
       </div>
 
-      <div class="banner-slide-item">
 
-        <img class="img-fluid" src="./img/banner.jpeg" alt="">
 
+    </section>
 
+    <!-- 手機版彈跳視窗 -->
 
+    <div id="menu-box" class="container-fluid" style="padding:0;margin:0 ">
 
+      <div id="menu-box2">
 
+        <div id="menu1" class="menu-text"><a class="link" href="./facial.html" style="padding-top: 3vw;">臉部課程</a></div>
 
+        <div class="menu-text"><a href="./massage.html" class="link">身體課程</a></div>
 
+        <div class="menu-text"><a href="./about.html" class="link">關於我們</a></div>
 
+        <div class="menu-text"><a href="./reserve.html" class="link">立即預約</a></div>
 
+        <div class="menu-text"><a href="./store.html" class="link">店家資訊</a></div>
 
+        <!-- <div id="menu-link" class="row">
 
+              <div class="menu-logo col-3"><a href="https://line.me/ti/p/%40ovs4341s"><img
 
+                          src="./img/mobile-logo/line.png" alt=""></a></div>
 
+              <div class="menu-logo col-3"><a href="https://www.facebook.com/hhhfb"><img
 
+                          src="./img/mobile-logo/fb.png" alt=""></a></div>
 
+              <div class="menu-logo col-3"><a href="https://www.instagram.com/gorgeous_space/"><img
 
+                          src="./img/mobile-logo/ig.png" alt=""></a></div>
 
+              <div class="menu-logo col-3"><a href="https://www.youtube.com/user/gorgeousspace"><img
 
+                          src="./img/mobile-logo/youtube.png" alt=""></a></div>
 
+          </div> -->
 
+
 
       </div>
 
+    </div>
 
+    <!-- banner首圖 -->
 
+    <div class="banner-slide">
 
       <div class="banner-slide-item">
 
         <img class="img-fluid" src="./img/banner.jpeg" alt="">
 
       </div>
 
     </div>
 
+    <!-- 最新消息 -->
 
+    <section class="news">
 
+      <div class="features_title">優惠活動</div>
 
+
 
+      <hr class="violetbeauty_line">
 
+      <div class="news-slide">
 
+        <div class="banner-slide-item">
 
+          <img class="img-fluid" src="./img/1.png" alt="">
 
+
 
+        </div>
 
+        <div class="banner-slide-item">
 
+          <img class="img-fluid" src="./img/2.png" alt="">
 
+
 
+        </div>
 
+        <div class="banner-slide-item">
 
+          <img class="img-fluid" src="./img/3.png" alt="">
 
+
 
+        </div>
 
+      </div>
 
+    </section>
 
+
 
     <div class="gototop text-center" data-gt-target="#top" data-gt-duration="500" data-gt-offset="0">
 
       <i class="fas fa-chevron-up"></i>
 
     </div>
 
     <!-- s00 -->
 
-    <section id="violetbeauty_sec00_CTA" class="violetbeauty_sec00">
 
-      <div class="violetbeauty_sec00_box">
 
-        <div class="row px-0 mx-0">
 
-          <div class="col-md-6">
 
-            <div style="position: relative;">
 
-              <div class="text-center">
 
-                <img class="playbutton play-pc" data-info="wBxQJns1MKY" data-bs-target="#yt-video"
 
-                  data-bs-toggle="modal" src="./img/Icon awesome-play-circle.png" alt="" width="50">
 
-              </div>
 
-              <div class="sec00_content_left text-center">
 
-                <img class="sec00_content_left_img" src="./img/violetbeauty/sec00.jpg" alt="">
 
+    <section id="violetbeauty_sec00_CTA" class="violetbeauty_sec00"
 
+      style="background-image: url(./img/liana-mikah-4RTAF3Z-0zM-unsplash.jpg); visibility: visible;">
 
+      <div class="bg">
 
+        <div class="violetbeauty_sec00_box">
 
+          <div class="row px-0 mx-0">
 
+            <div class="col-md-5">
 
+              <div style="position: relative;">
 
+                <div class="text-center">
 
+                  <img class="playbutton play-pc" data-info="wBxQJns1MKY" data-bs-target="#yt-video"
 
+                    data-bs-toggle="modal" src="./img/Icon awesome-play-circle.png" alt="" width="50">
 
+                </div>
 
+                <div class="sec00_content_left text-center">
 
+                  <img class="sec00_content_left_img" src="./img/violetbeauty/sec00.jpg" alt="">
 
+                </div>
 
               </div>
 
             </div>
 
-          </div>
 
-          <div class="col-md-5">
 
-            <div class="sec00_content_right">
 
-              <h2 class="violetbeauty_content_title">韓國小氣泡水嫩課程</h2>
 
-              <img class="Down_line" src="./img/line.png" alt="">
 
-              <div class="sec_content_right_text">
 
-                <p class="text-center">清潔角質層，改善黑頭粉刺，</p>
 
-                <p class="text-center">驅除油脂汙垢，使皮膚通透有光澤，</p>
 
-                <p class="text-center">提供持久的含水量，使皮膚濕潤、細膩有光澤。</p>
 
+            <div class="col-md-6 px-0">
 
+              <div class="sec00_content_right">
 
+                <h4>韓國小氣泡水嫩課程</h4>
 
+                <hr>
 
+                <div>
 
+                  <p>採用納米級的水氣泡，配合真空負壓原理，形成真空迴路。</p>
 
+                  <p>將超細微小氣泡和水分充分結合，通過特殊設計的螺旋形吸頭直接作用於皮膚。</p>
 
+                  <p>且能夠保持超細微小氣泡長時間接觸皮膚，促進剝離作用。</p>
 
+                  <p>清潔角質層，改善黑頭粉刺，驅除油脂汙垢，使皮膚通透有光澤，</p>
 
+                  <p>提供持久的含水量，使皮膚濕潤、細膩有光澤。</p>
 
+                </div>
 
               </div>
 
             </div>
 
           </div>
 
@@ -199,13 +242,12 @@
 
 
 
     </section>
 
-    <!-- sec01區塊 -->
 
-    <section id="violetbeauty_sec01_CTA" class="violetbeauty_sec01">
 
+
 
+    <!-- <section id="violetbeauty_sec01_CTA" class="violetbeauty_sec01">
 
       <div class="violetbeauty_sec01_box">
 
         <div class="features">
 
           <div class="features_title fw-bold">SPA課程</div>
 
           <div class="text-center">
 
-            <img class="Down_line" src="./img/line.png" alt="">
 
           </div>
 
         </div>
 
         <div class="violetbeauty_sec01_content">
 
@@ -426,15 +468,16 @@
 
         <div class="text-center">
 
           <button class="violetbeauty_CTA" data-gt-target="#violetbeauty_sec03_CTA" data-gt-duration="800"
 
             data-gt-offset="-80">
 
-            <!-- <img class="cta_flower" src="./img/flower.png" alt=""> -->
 
+
 
             立即體驗
 
           </button>
 
 
         </div>
 
       </div>
 
-    </section>
 
-    <!-- sec02區塊 -->
 
-    <section id="violetbeauty_sec02_CTA" class="violetbeauty_sec02">
 
+    </section> -->
 
+
 
+
 
+    <!-- <section id="violetbeauty_sec02_CTA" class="violetbeauty_sec02">
 
       <div class="violetbeauty_sec01_box">
 
         <div class="features">
 
           <div class="features_title fw-bold">紫晴的服務</div>
 
@@ -460,7 +503,7 @@
 
                   <p>小氣泡水嫩課程</p>
 
                   <p><i class="fas fa-crown crown me-1"></i>虹鑽黑晶煥顏課程</p>
 
 
-                  <!-- <div class="violetbeauty_service_item">
 
+                  <div class="violetbeauty_service_item">
 
                                         <div>
 
                                             <p>粉刺淨化課程</p>
 
                                         </div>
 
@@ -495,7 +538,7 @@
 
                                             <p style="text-decoration:line-through;">原價$1,600</p>
 
                                             <p>體驗價$1,200</p>
 
                                         </div>
 
-                                    </div> -->
 
+                                    </div>
 
                 </div>
 
 
               </div>
 
@@ -606,22 +649,70 @@
 
 
         </div>
 
       </div>
 
-      <!-- <div class="text-center">
 
+      <div class="text-center">
 
                 <button class="violetbeauty_CTA" data-gt-target="#violetbeauty_sec03_CTA" data-gt-duration="800"
 
                     data-gt-offset=""><img class="cta_flower" src="./img/flower.png" alt="">立即體驗</button>
 
 
-            </div> -->
 
+            </div>
 
+    </section> -->
 
+    <section class="sec02＿course">
 
+      <div class="sec01＿course_box">
 
+        <div class="sec01_course_item">
 
+          <div class="row px-0 mx-0">
 
+            <div class="col-md-5 px-0 mx-0">
 
+              <div class="sec01＿course_text">
 
+                <h2 class="features_title">臉部課程</h2>
 
+                <hr class="violetbeauty_line">
 
+                <del>原價 NT$ 3000</del> <span>NT$<strong>1200</strong>/ 60分鐘</span>
 
+
 
+                <p>-&nbsp; 紫晴美妍坊 plus+養生美容SPA專屬體驗 每人限乙次&nbsp;&nbsp;-&nbsp;</p>
 
+                <p>定期臉部SPA保養，使皮膚更年輕、亮澤、有彈性</p>
 
+                <a style="text-decoration: none; color:#fff;" href="./facial.html">
 
+                  <button class="btn submitbutton" style="opacity: 1;" type="submit">了解詳情></button>
 
+                </a>
 
+              </div>
 
+            </div>
 
+            <div class="col-md-7 px-0">
 
+              <img class="img-fluid" src="./img/violetbeauty/43d9c2fee8037323b13304419d28e5e4_double.jpeg" alt="">
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </div>
 
     </section>
 
-    <!-- sec01區塊 -->
 
+    <section class="sec01＿course">
 
+      <div class="sec01＿course_box">
 
+        <div class="sec01_course_item">
 
+          <div class="row px-0 mx-0">
 
+            <div class="col-md-7 px-0">
 
+              <img class="img-fluid" src="./img/spa.jpg" alt="">
 
+            </div>
 
+            <div class="col-md-5 px-0 mx-0">
 
+              <div class="sec01＿course_text">
 
+                <h2 class="features_title">身體課程</h2>
 
+                <hr class="violetbeauty_line">
 
+                <del>原價 NT$ 3000</del> <span>NT$<strong>1200</strong>/ 60分鐘</span>
 
+
 
+                <p>-&nbsp; 紫晴美妍坊 plus+養生美容SPA專屬體驗 每人限乙次&nbsp;&nbsp;-&nbsp;</p>
 
+
 
+                <p>純手工全身舒壓勻體養生SPA，被動式的運動，<br>
 
+                  使身體從頭到腳、從內到外，放鬆、解壓、健康、美麗SPA。</p>
 
+                <a style="text-decoration: none; color:#fff;" href="./massage.html">
 
+                  <button class="btn submitbutton" style="opacity: 1;" type="submit">了解詳情></button>
 
+                </a>
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </section>
 
+
 
     <section id="violetbeauty_sec03_CTA" class="violetbeauty_sec03">
 
       <!-- <img class="sec03_img1" src="./img/flower.png" alt=""> -->
 
 
       <div class="violetbeauty_sec03_box">
 
         <div class="features">
 
-          <div class="features_title fw-bold">報名體驗課程</div>
 
-          <div class="text-center">
 
-            <img class="Down_line" src="./img/line.png" alt="">
 
-          </div>
 
+          <div class="features_title">報名體驗課程</div>
 
+          <hr class="violetbeauty_line">
 
         </div>
 
         <div class="sec_content_right_text">
 
           <p class="text-center">為您提供最合適的服務，讓我們用最短的時間。</p>
 
@@ -659,7 +750,7 @@
 
                 <input name="prefer_date" class="datepicker" type="date" id="datepicker" placeholder="預選裝修日期" required>
 
                 <input name="prefer_date" class="time" type="time" id="time" placeholder="想要體驗的時間" required>
 
                 <div class="form-btn">
 
-                  <button id="submitbutton" class="btn" style="opacity: 1;" type="submit">立即預約
 
+                  <button class="btn submitbutton" style="opacity: 1;" type="submit">立即預約
 
                     ></button>
 
                 </div>
 
               </div>
 
@@ -677,23 +768,63 @@
 
       <div class="footer_content_box">
 
         <div class="row">
 
           <div class="col-md-4">
 
-            <div class="footer_logo">
 
-              <a href="./">
 
-                <img
 
-                  src="https://img.holkee.com/site/upload/5ed5c6c4-77367dcbb-9908-96b7db46/15185cb9afae29fe563dae310d42def4_double.png"
 
-                  alt=""> </a>
 
-            </div>
 
-            <div class="footer_text">
 
-              <h3>紫晴美妍坊 plus+</h3>
 
-              <h3>問題性肌膚的護膚專家</h3>
 
-            </div>
 
-            <div class="footer_text">
 
-              <p>美的事物是永恆的喜悅</p>
 
-              <p>紫晴企業社</p>
 
-            </div>
 
-            <div class="socail-link">
 
-              <a href="https://www.facebook.com/hhhfb"><img src="./img/Icon awesome-line.png" alt=""></a>
 
-              <a href="https://line.me/ti/p/%40ovs4341s"><img src="./img/Icon metro-facebook.png" alt=""></a>
 
+            <div class="footer_text_box">
 
+              <div class="d-flex flex-column">
 
+                <div class="mb-5">
 
+                  <div class="footer_logo">
 
+                    <a href="./">
 
+                      <img
 
+                        src="https://img.holkee.com/site/upload/5ed5c6c4-77367dcbb-9908-96b7db46/15185cb9afae29fe563dae310d42def4_double.png"
 
+                        alt=""> </a>
 
+                  </div>
 
+                  <div class="footer_text">
 
+                    <h3>紫晴美妍坊 plus+</h3>
 
+                    <h3>問題性肌膚的護膚專家</h3>
 
+                  </div>
 
+                </div>
 
+                <div class="w-100">
 
+                  <div class="d-flex flex-row flex-column pb-4">
 
+                    <div class="d-flex flex-row flex-column">
 
+                      <ul class="navbar-nav m-0">
 
+                        <li class="nav-item">
 
+                          <a class="nav-link" href="./facial.html" target="_top">
 
+                            臉部課程
 
+                          </a>
 
+                        </li>
 
+                        <li class="nav-item">
 
+                          <a class="nav-link" href="./massage.html" target="_top">
 
+                            身體課程
 
+                          </a>
 
+                        </li>
 
+                        <li class="nav-item">
 
+                          <a class="nav-link" href="./about.html" target="_top">
 
+                            關於我們
 
+                          </a>
 
+                        </li>
 
+                      </ul>
 
+                      <ul class="navbar-nav m-0 mt-3 mt-sm-0">
 
+                        <li class="nav-item">
 
+                          <a class="nav-link" href="" target="_top">
 
+                            立即預約
 
+                          </a>
 
+                        </li>
 
+                        <li class="nav-item">
 
+                          <a class="nav-link" href="./store.html" target="_top">
 
+                            店家資訊
 
+                          </a>
 
+                        </li>
 
+                      </ul>
 
+                    </div>
 
+
 
+                    <div class="socail-link">
 
+                      <a href="https://page.line.me/237mozkf?openQrModal=true"><i
 
+                          style="font-size: 32px; color: #6C6C6C;" class="fab fa-line me-3"></i></a>
 
+                      <a href="https://www.facebook.com/purple4700318/?ref=page_internal"><i
 
+                          style="font-size: 32px; color: #6C6C6C;" class="fab fa-facebook-square"></i></a>
 
+                    </div>
 
+                  </div>
 
+                </div>
 
+              </div>
 
             </div>
 
           </div>
 
           <div class="col-md-4">
 
@@ -701,10 +832,10 @@
 
               <h3 class="store_name mb-5 fw-bold">紫晴plus+大溪店</h3>
 
               <img class="img-fluid" src="./img/violetbeauty/store1.jpg" alt="">
 
               <div class="mt-3">
 
-                <p><i style="font-size: 24px;" class="fas fa-map-marker-alt me-3"></i>桃園市大溪區仁善街108-11號
 
+                <p><i style="font-size: 20px; color: #6C6C6C;" class="fas fa-map-marker-alt me-3"></i>桃園市大溪區仁善街108-11號
 
                 </p>
 
-                <p><i style="font-size: 24px;" class="fas fa-phone me-3"></i>03-3808198</p>
 
-                <p><i style="font-size: 24px;" class="fas fa-clock me-3"></i>10:00-20:00</p>
 
+                <p><i style="font-size: 20px; color: #6C6C6C;" class="fas fa-phone me-3 phone"></i>03-3808198</p>
 
+                <p><i style="font-size: 20px; color: #6C6C6C;" class="fas fa-clock me-3"></i>10:00-20:00</p>
 
               </div>
 
               <div class="mt-4">
 
                 <a target="_blank" style="text-decoration: none;"
 
@@ -726,9 +857,9 @@
 
               <h3 class="store_name mb-5 fw-bold">紫晴plus+龍潭店</h3>
 
               <img class="img-fluid" src="./img/violetbeauty/store2.jpg" alt="">
 
               <div class="mt-3">
 
-                <p><i style="font-size: 24px;" class="fas fa-map-marker-alt me-3"></i>桃園市龍潭區百年路7號</p>
 
-                <p><i style="font-size: 24px;" class="fas fa-phone me-3"></i>03-4700318</p>
 
-                <p><i style="font-size: 24px;" class="fas fa-clock me-3"></i>10:00-20:00</p>
 
+                <p><i style="font-size: 20px; color: #6C6C6C;" class="fas fa-map-marker-alt me-3"></i>桃園市龍潭區百年路7號</p>
 
+                <p><i style="font-size: 20px; color: #6C6C6C;" class="fas fa-phone me-3 phone"></i>03-4700318</p>
 
+                <p><i style="font-size: 20px; color: #6C6C6C;" class="fas fa-clock me-3"></i>10:00-20:00</p>
 
               </div>
 
               <div class="mt-4">
 
                 <a target="_blank" style="text-decoration: none;"
 
@@ -742,8 +873,13 @@
 
               </div>
 
             </div>
 
           </div>
 
-
 
+          <hr class="border_line">
 
+          <div class="footer_text d-flex flex-sm-row flex-column align-items-center justify-content-between">
 
+            <p>「美的事物是永恆的喜悅」—紫晴企業社</p>
 
+            <p>Copyright by 紫晴企業社</p>
 
+          </div>
 
         </div>
 
+
 
       </div>
 
 
     </footer>
 
@@ -774,7 +910,7 @@
 
                 height: 100%;
 
               }
 
             </style>
 
-            <div class='embed-container'><iframe class='youtube-video' src='https://www.youtube.com/embed//XlPxHa9BcKY'
 
+            <div class='embed-container'><iframe class='youtube-video' src='https://www.youtube.com/embed//'
 
                 frameborder='0' allowfullscreen height="394" allow="autoplay;"></iframe></div>
 
           </div>
 
         </div>

+ 51 - 10
js/index.js
Wyświetl plik 

@@ -10,6 +10,8 @@ $(window).scroll(function () {
 
 
 });
 
 
+
 
+
 
 $("*").each(function (index, element) {
 
   // 此元素被點選後執行
 
   $(this).click(function (e) {
 
@@ -43,6 +45,45 @@ $("*").each(function (index, element) {
 
   });
 
 });
 
 
+// 手機選單彈跳視窗
 
+$("#menu-box2").hide();
 
+$("#menu-box").hide();
 
+
 
+
 
+
 
+$("#menu-btn1").click(function () {
 
+  $(this).toggleClass( "fa-times" );
 
+  $("#menu-box").fadeToggle(500);
 
+  $("#menu-box2").fadeToggle(500); 
+});
 
+$("#menu-box").click(function () {
 
+  // let myDiv = document.getElementById('menu-btn1');
 
+  // myDiv.className = "fas fa-bars menu ms-2";
 
+  $("#menu-box").fadeToggle(500);
 
+  $("#menu-box2").fadeToggle(500);
 
+
 
+});
 
+// $(".link").click(function () {
 
+//   $("#menu-box").slideUp("slow", function () {
 
+//     $("#menu-box2").slideUp("slow");
 
+//     // Animation complete.
 
+//   });
 
+// });
 
+
 
+
 
+$(".news-slide").slick({
 
+  dots: true,
 
+  // autoplay: true,
 
+  arrows: true,
 
+  slidesToShow: 1,
 
+  slidesToScroll: 1,
 
+  autoplaySpeed: 7000,
 
+  initialSlide: 0,
 
+  infinite: true,
 
+  prevArrow:"<img class='prev slick-prev' src='./img/arrowprev.png'>",
 
+  nextArrow:"<img class='next slick-next' src='./img/arrownext.png'>"
 
+});
 
+
 
 // 避免動畫與使用者滾輪衝突
 
 // html 在滾動滾輪時 停止 html 所有效果
 
 $("html").on("mousewheel", function () {
 
@@ -64,16 +105,16 @@ $('#yt-video').on('hidden.bs.modal', function () {
 
 
 
 
-$(".banner-slide").slick({
 
-  dots: true,
 
-  autoplay: true,
 
-  arrows: false,
 
-  slidesToShow: 1,
 
-  slidesToScroll: 1,
 
-  autoplaySpeed: 7000,
 
-  initialSlide: 0,
 
-  infinite: true,
 
-});
 
+// $(".banner-slide").slick({
 
+//   dots: true,
 
+//   autoplay: true,
 
+//   arrows: false,
 
+//   slidesToShow: 1,
 
+//   slidesToScroll: 1,
 
+//   autoplaySpeed: 7000,
 
+//   initialSlide: 0,
 
+//   infinite: true,
 
+// });
 
 
 $(".violetbeauty_sec01_slide").slick({

+ 39 - 6
massage.html
Wyświetl plik 

@@ -23,8 +23,8 @@
 
 
 <body>
 
   <div id="top" style="overflow-x: hidden;">
 
-    <!-- nav導覽頁 -->
 
-    <div class="container">
 
+    <!-- nav導覽頁-桌機 -->
 
+    <div class="container d-none d-md-block">
 
       <div class="text-center">
 
         <div class="logo"><a href="./"> <img
 
               src="https://img.holkee.com/site/upload/5ed5c6c4-77367dcbb-9908-96b7db46/15185cb9afae29fe563dae310d42def4_double.png"
 
@@ -50,7 +50,7 @@
 
                 </a>
 
               </li>
 
               <li class="nav-item">
 
-                <a class="nav-link" href="" target="_top">
 
+                <a class="nav-link" href="./reserve.html" target="_top">
 
                   立即預約
 
                 </a>
 
               </li>
 
@@ -64,6 +64,38 @@
 
         </div>
 
       </nav>
 
     </div>
 
+        <!-- 導覽頁手機 -->
 
+        <section id="Navigation" class="container-fluid d-md-none d-block" style="padding:0;margin: 0; ">
 
+          <div id="nav" class="row">
 
+            <div class="col-3">
 
+              <i id="menu-btn1" class="fas fa-bars menu ms-2"></i>
 
+            </div>
 
+            <div id="logo" class="col-9">
 
+              <a class="ms-4" href="./index.html"><img src="./img/violetbeauty/LOGO.png" alt=""></a>
 
+            </div>
 
+          </div>
 
+        </section>
 
+        <!-- 手機版彈跳視窗 -->
 
+        <div id="menu-box" class="container-fluid" style="padding:0;margin:0 ">
 
+          <div id="menu-box2">
 
+            <div id="menu1" class="menu-text"><a class="link" href="./facial.html" style="padding-top: 3vw;">臉部課程</a></div>
 
+            <div class="menu-text"><a href="./massage.html" class="link">身體課程</a></div>
 
+            <div class="menu-text"><a href="./about.html" class="link">關於我們</a></div>
 
+            <div class="menu-text"><a href="./reserve.html" class="link">立即預約</a></div>
 
+            <div class="menu-text"><a href="./store.html" class="link">店家資訊</a></div>
 
+            <!-- <div id="menu-link" class="row">
 
+                  <div class="menu-logo col-3"><a href="https://line.me/ti/p/%40ovs4341s"><img
 
+                              src="./img/mobile-logo/line.png" alt=""></a></div>
 
+                  <div class="menu-logo col-3"><a href="https://www.facebook.com/hhhfb"><img
 
+                              src="./img/mobile-logo/fb.png" alt=""></a></div>
 
+                  <div class="menu-logo col-3"><a href="https://www.instagram.com/gorgeous_space/"><img
 
+                              src="./img/mobile-logo/ig.png" alt=""></a></div>
 
+                  <div class="menu-logo col-3"><a href="https://www.youtube.com/user/gorgeousspace"><img
 
+                              src="./img/mobile-logo/youtube.png" alt=""></a></div>
 
+              </div> -->
 
+    
+          </div>
 
+        </div>
 
     <!-- banner -->
 
     <div class="massage-banner">
 
       <p>身體課程</p>
 
@@ -316,9 +348,10 @@
 
               </div>
 
 
               <div class="socail-link d-flex ms-sm-auto mt-3 mt-sm-0">
 
-                <a href="https://www.facebook.com/hhhfb" class="me-3"><img src="./img/icon/facebook-app-symbol.png"
 
-                    alt=""></a>
 
-                <a href="https://line.me/ti/p/%40ovs4341s"><img src="./img/icon/001-line.png" alt=""></a>
 
+                <a href="https://page.line.me/237mozkf?openQrModal=true"><i
 
+                  style="font-size: 32px; color: #6C6C6C;" class="fab fa-line me-3"></i></a>
 
+              <a href="https://www.facebook.com/purple4700318/?ref=page_internal"><i
 
+                  style="font-size: 32px; color: #6C6C6C;" class="fab fa-facebook-square"></i></a>
 
               </div>
 
             </div>
 
             <div class="footer_text d-flex flex-sm-row flex-column align-items-center justify-content-between mt-4">

+ 294 - 0
reserve.html
Wyświetl plik 

@@ -0,0 +1,294 @@
 
+<!DOCTYPE html>
 
+<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>紫晴plus+問題性肌膚的護膚</title>
 
+
 
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"
 
+    integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
 
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
 
+    integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
 
+  <!-- Add the slick-theme.css if you want default styling -->
 
+  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
 
+  <!-- Add the slick-theme.css if you want default styling -->
 
+  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" />
 
+  <!-- fontawesome -->
 
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"
 
+    integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
 
+  <link rel="stylesheet" href="css/style.css">
 
+</head>
 
+
 
+<body>
 
+  <div id="top" style="overflow-x: hidden;">
 
+    <!-- nav導覽頁-桌機 -->
 
+    <div class="container d-none d-md-block">
 
+      <div class="text-center">
 
+        <div class="logo"><a href="./"> <img
 
+              src="https://img.holkee.com/site/upload/5ed5c6c4-77367dcbb-9908-96b7db46/15185cb9afae29fe563dae310d42def4_double.png"
 
+              alt=""> </a> </div>
 
+      </div>
 
+      <nav class="navbar">
 
+        <div class="container-fluid">
 
+          <div class="navbar-collapse navbar-center" id="navbarSupportedContent">
 
+            <ul class="navbar-nav justify-content-center">
 
+              <li class="nav-item">
 
+                <a class="nav-link" href="./facial.html" target="_top">
 
+                  臉部課程
 
+                </a>
 
+              </li>
 
+              <li class="nav-item">
 
+                <a class="nav-link" href="./massage.html" target="_top">
 
+                  身體課程
 
+                </a>
 
+              </li>
 
+              <li class="nav-item">
 
+                <a class="nav-link" href="./about.html" target="_top">
 
+                  關於我們
 
+                </a>
 
+              </li>
 
+              <li class="nav-item">
 
+                <a class="nav-link" href="./reserve.html" target="_top">
 
+                  立即預約
 
+                </a>
 
+              </li>
 
+              <li class="nav-item">
 
+                <a class="nav-link" href="./store.html" target="_top">
 
+                  店家資訊
 
+                </a>
 
+              </li>
 
+            </ul>
 
+          </div>
 
+        </div>
 
+      </nav>
 
+    </div>
 
+    <!-- 導覽頁手機 -->
 
+    <section id="Navigation" class="container-fluid d-md-none d-block" style="padding:0;margin: 0; ">
 
+      <div id="nav" class="row">
 
+        <div class="col-3">
 
+          <i id="menu-btn1" class="fas fa-bars menu ms-2"></i>
 
+        </div>
 
+        <div id="logo" class="col-9">
 
+          <a class="ms-4" href="./index.html"><img src="./img/violetbeauty/LOGO.png" alt=""></a>
 
+        </div>
 
+      </div>
 
+    </section>
 
+    <!-- 手機版彈跳視窗 -->
 
+    <div id="menu-box" class="container-fluid" style="padding:0;margin:0 ">
 
+      <div id="menu-box2">
 
+        <div id="menu1" class="menu-text"><a class="link" href="./facial.html" style="padding-top: 3vw;">臉部課程</a></div>
 
+        <div class="menu-text"><a href="./massage.html" class="link">身體課程</a></div>
 
+        <div class="menu-text"><a href="./about.html" class="link">關於我們</a></div>
 
+        <div class="menu-text"><a href="./reserve.html" class="link">立即預約</a></div>
 
+        <div class="menu-text"><a href="./store.html" class="link">店家資訊</a></div>
 
+        <!-- <div id="menu-link" class="row">
 
+                  <div class="menu-logo col-3"><a href="https://line.me/ti/p/%40ovs4341s"><img
 
+                              src="./img/mobile-logo/line.png" alt=""></a></div>
 
+                  <div class="menu-logo col-3"><a href="https://www.facebook.com/hhhfb"><img
 
+                              src="./img/mobile-logo/fb.png" alt=""></a></div>
 
+                  <div class="menu-logo col-3"><a href="https://www.instagram.com/gorgeous_space/"><img
 
+                              src="./img/mobile-logo/ig.png" alt=""></a></div>
 
+                  <div class="menu-logo col-3"><a href="https://www.youtube.com/user/gorgeousspace"><img
 
+                              src="./img/mobile-logo/youtube.png" alt=""></a></div>
 
+              </div> -->
 
+
 
+      </div>
 
+    </div>
 
+    <!-- banner -->
 
+    <div class="store-banner">
 
+      <p>立即預約</p>
 
+    </div>
 
+
 
+    <div class="gototop text-center" data-gt-target="#top" data-gt-duration="500" data-gt-offset="0">
 
+      <i class="fas fa-chevron-up"></i>
 
+    </div>
 
+
 
+    <section id="violetbeauty_sec03_CTA" class="violetbeauty_sec03">
 
+      <!-- <img class="sec03_img1" src="./img/flower.png" alt=""> -->
 
+
 
+      <div class="violetbeauty_sec03_box">
 
+        <div class="features">
 
+          <div class="features_title">報名體驗課程</div>
 
+          <hr class="violetbeauty_line">
 
+        </div>
 
+        <div class="sec_content_right_text">
 
+          <p class="text-center">為您提供最合適的服務，讓我們用最短的時間。</p>
 
+          <p class="text-center">有效改善您困擾已久的肌膚問題</p>
 
+        </div>
 
+
 
+        <div class="violetbeauty_sec03_content">
 
+          <div class="row mx-0 px-0">
 
+            <div class="col-md-6">
 
+              <img class="img-fluid" src="./img/Screen Shot 2022-04-06 at 下午2.38.37.png" alt="">
 
+            </div>
 
+            <div class="col-md-6">
 
+              <div class="violetbeauty_contract_form">
 
+                <p class="text-danger">提前預約時間為3天，若需安排近期時間請加入官方LINE</p>
 
+                <input type="text" name="name" id="name" placeholder="請輸入姓名" required>
 
+                <input type="text" name="phone" id="phone" placeholder="請輸入電話">
 
+                <select name="loc" id="loc" required>
 
+                  <option value="" disabled selected="selected">預約體驗的店家</option>
 
+                  <option class="option" value="紫晴plus+大溪店">紫晴plus+大溪店</option>
 
+                  <option class="option" value="紫晴plus+龍潭店">紫晴plus+龍潭店</option>
 
+                </select>
 
+
 
+                <select name="course_name" required="" class="user-invalid valueMissing" id="course_name">
 
+                  <option value="">想要體驗的課程</option>
 
+                  <option value="韓國小氣泡水嫩課程 /70分">韓國小氣泡水嫩課程 /70分</option>
 
+                  <option value="四合一護膚課程 /90分">四合一護膚課程 /90分</option>
 
+                  <option value="液態皮秒課程 /60分">液態皮秒課程 /60分</option>
 
+                  <option value="五行氣穴調理課程 /40分">五行氣穴調理課程 /40分</option>
 
+                  <option value="煥顏淨化課程 /60分">煥顏淨化課程 /60分</option>
 
+                  <option value="極效淨白課程 /75分">極效淨白課程 /75分</option>
 
+                  <option value="波動經絡背部課程 /60分">波動經絡背部課程 /60分</option>
 
+                  <option value="淨透無暇美背 /80分">淨透無暇美背 /80分</option>
 
+                  <option value="五行水晶能量岩盤浴 /40分">五行水晶能量岩盤浴 /40分</option>
 
+                </select>
 
+                <input name="prefer_date" class="datepicker" type="date" id="datepicker" placeholder="預選裝修日期" required>
 
+                <input name="prefer_date" class="time" type="time" id="time" placeholder="想要體驗的時間" required>
 
+                <div class="form-btn">
 
+                  <button class="btn submitbutton" style="opacity: 1;" type="submit">立即預約
 
+                    ></button>
 
+                </div>
 
+              </div>
 
+            </div>
 
+
 
+          </div>
 
+        </div>
 
+      </div>
 
+      <!-- <img class="sec03_img2" src="./img/sec03_img2.png" alt="">
 
+      <img class="sec03_img3" src="./img/sec03_img3.png" alt=""> -->
 
+
 
+    </section>
 
+
 
+    <footer id="footer-secondary">
 
+      <div class="footer_content_box">
 
+        <div class="d-flex flex-lg-row flex-column align-items-center">
 
+          <div class="mb-5 mb-lg-0 ms-5">
 
+            <div class="footer_logo">
 
+              <a href="./">
 
+                <img
 
+                  src="https://img.holkee.com/site/upload/5ed5c6c4-77367dcbb-9908-96b7db46/15185cb9afae29fe563dae310d42def4_double.png"
 
+                  alt=""> </a>
 
+            </div>
 
+            <div class="footer_text">
 
+              <h3>紫晴美妍坊 plus+</h3>
 
+              <h3>問題性肌膚的護膚專家</h3>
 
+            </div>
 
+          </div>
 
+          <div class="w-100">
 
+            <div class="d-flex flex-sm-row flex-column align-items-center pb-4" style="border-bottom: 1px solid #ccc;">
 
+              <div class="d-flex flex-sm-row flex-column align-items-sm-end justify-content-center">
 
+                <ul class="navbar-nav m-0">
 
+                  <li class="nav-item">
 
+                    <a class="nav-link" href="./facial.html" target="_top">
 
+                      臉部課程
 
+                    </a>
 
+                  </li>
 
+                  <li class="nav-item">
 
+                    <a class="nav-link" href="./massage.html" target="_top">
 
+                      身體課程
 
+                    </a>
 
+                  </li>
 
+                  <li class="nav-item">
 
+                    <a class="nav-link" href="./about.html" target="_top">
 
+                      關於我們
 
+                    </a>
 
+                  </li>
 
+                </ul>
 
+                <ul class="navbar-nav m-0 mt-3 mt-sm-0">
 
+                  <li class="nav-item">
 
+                    <a class="nav-link" href="" target="_top">
 
+                      立即預約
 
+                    </a>
 
+                  </li>
 
+                  <li class="nav-item">
 
+                    <a class="nav-link" href="./store.html" target="_top">
 
+                      店家資訊
 
+                    </a>
 
+                  </li>
 
+                </ul>
 
+              </div>
 
+
 
+              <div class="socail-link d-flex ms-sm-auto mt-3 mt-sm-0">
 
+                <a href="https://page.line.me/237mozkf?openQrModal=true"><i
 
+                  style="font-size: 32px; color: #6C6C6C;" class="fab fa-line me-3"></i></a>
 
+              <a href="https://www.facebook.com/purple4700318/?ref=page_internal"><i
 
+                  style="font-size: 32px; color: #6C6C6C;" class="fab fa-facebook-square"></i></a>
 
+              </div>
 
+            </div>
 
+            <div class="footer_text d-flex flex-sm-row flex-column align-items-center justify-content-between mt-4">
 
+              <p>「美的事物是永恆的喜悅」—紫晴企業社</p>
 
+              <p>Copyright by 紫晴企業社</p>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </footer>
 
+
 
+    <div class="closeplay modal fade" id="yt-video" tabindex="-1" aria-labelledby="exampleModalLabel1"
 
+      aria-hidden="true">
 
+      <div class="modal-dialog modal-lg">
 
+        <div class="modal-content bg-transparent border-0">
 
+          <div class="modal-header border-0">
 
+            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
 
+          </div>
 
+          <div id="video-modal" class="modal-body">
 
+            <style>
 
+              .embed-container {
 
+                position: relative;
 
+                padding-bottom: 56.25%;
 
+                height: 0;
 
+                overflow: hidden;
 
+                max-width: 100%;
 
+              }
 
+
 
+              .embed-container iframe,
 
+              .embed-container object,
 
+              .embed-container embed {
 
+                position: absolute;
 
+                top: 0;
 
+                left: 0;
 
+                width: 100%;
 
+                height: 100%;
 
+              }
 
+            </style>
 
+            <div class='embed-container'><iframe class='youtube-video' src='https://www.youtube.com/embed//XlPxHa9BcKY'
 
+                frameborder='0' allowfullscreen height="394" allow="autoplay;"></iframe></div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+
 
+
 
+    <div class="closeplay modal fade" id="course_int" tabindex="-1" aria-labelledby="exampleModalLabel1"
 
+      aria-hidden="true">
 
+      <div class="modal-dialog modal-lg">
 
+        <div class="modal-content  border-0">
 
+          <div class="modal-header border-0">
 
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
 
+          </div>
 
+          <div id="video-modal" class="modal-body pb-5">
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </div>
 
+  </div>
 
+
 
+  <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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
 
+
 
+  <script async defer src="js/index.js"></script>
 
+</body>
 
+
 
+</html>

+ 39 - 6
store.html
Wyświetl plik 

@@ -23,8 +23,8 @@
 
 
 <body>
 
   <div id="top" style="overflow-x: hidden;">
 
-    <!-- nav導覽頁 -->
 
-    <div class="container">
 
+    <!-- nav導覽頁-桌機 -->
 
+    <div class="container d-none d-md-block">
 
       <div class="text-center">
 
         <div class="logo"><a href="./"> <img
 
               src="https://img.holkee.com/site/upload/5ed5c6c4-77367dcbb-9908-96b7db46/15185cb9afae29fe563dae310d42def4_double.png"
 
@@ -50,7 +50,7 @@
 
                 </a>
 
               </li>
 
               <li class="nav-item">
 
-                <a class="nav-link" href="" target="_top">
 
+                <a class="nav-link" href="./reserve.html" target="_top">
 
                   立即預約
 
                 </a>
 
               </li>
 
@@ -64,6 +64,38 @@
 
         </div>
 
       </nav>
 
     </div>
 
+    <!-- 導覽頁手機 -->
 
+    <section id="Navigation" class="container-fluid d-md-none d-block" style="padding:0;margin: 0; ">
 
+      <div id="nav" class="row">
 
+        <div class="col-3">
 
+          <i id="menu-btn1" class="fas fa-bars menu ms-2"></i>
 
+        </div>
 
+        <div id="logo" class="col-9">
 
+          <a class="ms-4" href="./index.html"><img src="./img/violetbeauty/LOGO.png" alt=""></a>
 
+        </div>
 
+      </div>
 
+    </section>
 
+    <!-- 手機版彈跳視窗 -->
 
+    <div id="menu-box" class="container-fluid" style="padding:0;margin:0 ">
 
+      <div id="menu-box2">
 
+        <div id="menu1" class="menu-text"><a class="link" href="./facial.html" style="padding-top: 3vw;">臉部課程</a></div>
 
+        <div class="menu-text"><a href="./massage.html" class="link">身體課程</a></div>
 
+        <div class="menu-text"><a href="./about.html" class="link">關於我們</a></div>
 
+        <div class="menu-text"><a href="./reserve.html" class="link">立即預約</a></div>
 
+        <div class="menu-text"><a href="./store.html" class="link">店家資訊</a></div>
 
+        <!-- <div id="menu-link" class="row">
 
+                  <div class="menu-logo col-3"><a href="https://line.me/ti/p/%40ovs4341s"><img
 
+                              src="./img/mobile-logo/line.png" alt=""></a></div>
 
+                  <div class="menu-logo col-3"><a href="https://www.facebook.com/hhhfb"><img
 
+                              src="./img/mobile-logo/fb.png" alt=""></a></div>
 
+                  <div class="menu-logo col-3"><a href="https://www.instagram.com/gorgeous_space/"><img
 
+                              src="./img/mobile-logo/ig.png" alt=""></a></div>
 
+                  <div class="menu-logo col-3"><a href="https://www.youtube.com/user/gorgeousspace"><img
 
+                              src="./img/mobile-logo/youtube.png" alt=""></a></div>
 
+              </div> -->
 
+
 
+      </div>
 
+    </div>
 
     <!-- banner -->
 
     <div class="store-banner">
 
       <p>店家資訊</p>
 
@@ -192,9 +224,10 @@
 
               </div>
 
 
               <div class="socail-link d-flex ms-sm-auto mt-3 mt-sm-0">
 
-                <a href="https://www.facebook.com/hhhfb" class="me-3"><img src="./img/icon/facebook-app-symbol.png"
 
-                    alt=""></a>
 
-                <a href="https://line.me/ti/p/%40ovs4341s"><img src="./img/icon/001-line.png" alt=""></a>
 
+                <a href="https://page.line.me/237mozkf?openQrModal=true"><i
 
+                  style="font-size: 32px; color: #6C6C6C;" class="fab fa-line me-3"></i></a>
 
+              <a href="https://www.facebook.com/purple4700318/?ref=page_internal"><i
 
+                  style="font-size: 32px; color: #6C6C6C;" class="fab fa-facebook-square"></i></a>
 
               </div>
 
             </div>
 
             <div class="footer_text d-flex flex-sm-row flex-column align-items-center justify-content-between mt-4">

Niektóre pliki nie zostały wyświetlone z powodu dużej ilości zmienionych plików