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

調整排版、新增課程圖片

develop_Yu 2 years ago
parent
f44e984b61
commit
6aaaa10e58
45 changed files with 1142 additions and 223 deletions
Split View Show Diff Stats
  1. 260 0
      about.html
  2. 353 4
      css/style.css
  3. 0 0
      css/style.css.map
  4. 285 3
      css/style.scss
  5. 46 56
      facial.html
  6. 13 0
      facial.json
  7. BIN
      img/about-video.mp4
  8. BIN
      img/icon/001-line.png
  9. BIN
      img/icon/body-massage.png
  10. BIN
      img/icon/facebook-app-symbol.png
  11. BIN
      img/icon/facebook.png
  12. BIN
      img/icon/facial-treatment.png
  13. BIN
      img/icon/hair-treatment.png
  14. BIN
      img/icon/line.png
  15. BIN
      img/icon/spa.png
  16. BIN
      img/維生素育膚課程/1.jpg
  17. BIN
      img/維生素育膚課程/10.jpg
  18. BIN
      img/維生素育膚課程/11.jpg
  19. BIN
      img/維生素育膚課程/12.jpg
  20. BIN
      img/維生素育膚課程/13.jpg
  21. BIN
      img/維生素育膚課程/14.jpg
  22. BIN
      img/維生素育膚課程/15.jpg
  23. BIN
      img/維生素育膚課程/16.jpg
  24. BIN
      img/維生素育膚課程/17.jpg
  25. BIN
      img/維生素育膚課程/18.jpg
  26. BIN
      img/維生素育膚課程/19.jpg
  27. BIN
      img/維生素育膚課程/2.jpg
  28. BIN
      img/維生素育膚課程/20.jpg
  29. BIN
      img/維生素育膚課程/21.jpg
  30. BIN
      img/維生素育膚課程/22.jpg
  31. BIN
      img/維生素育膚課程/23.jpg
  32. BIN
      img/維生素育膚課程/24.jpg
  33. BIN
      img/維生素育膚課程/25.jpg
  34. BIN
      img/維生素育膚課程/3.jpg
  35. BIN
      img/維生素育膚課程/4.jpg
  36. BIN
      img/維生素育膚課程/5.jpg
  37. BIN
      img/維生素育膚課程/6.jpg
  38. BIN
      img/維生素育膚課程/7.jpg
  39. BIN
      img/維生素育膚課程/8.jpg
  40. BIN
      img/維生素育膚課程/9.jpg
  41. BIN
      img/螢幕擷取畫面 2022-04-21 204548.png
  42. 25 30
      js/index.js
  43. 48 59
      massage.html
  44. 9 0
      massage.json
  45. 103 71
      store.html

+ 260 - 0
about.html
View File 

@@ -0,0 +1,260 @@
 
+<!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">
 
+      <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="" target="_top">
 
+                  立即預約
 
+                </a>
 
+              </li>
 
+              <li class="nav-item">
 
+                <a class="nav-link" href="./store.html" target="_top">
 
+                  店家資訊
 
+                </a>
 
+              </li>
 
+            </ul>
 
+          </div>
 
+        </div>
 
+      </nav>
 
+    </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>
 
+
 
+    <div class="container about-content">
 
+      <!-- <div class="d-flex flex-column text-center" style="margin-top: 8%;">
 
+        <span class="pb-3 title">About</span>
 
+        <div class="bottom_line"></div>
 
+        <span style="letter-spacing: 3px;">關於紫晴</span>
 
+      </div> -->
 
+      <div class="container">
 
+        <div class="row align-items-center">
 
+          <div class="col-12 col-xl-6 mt-5 mt-lg-0 position-relative">
 
+            <div class="iframe-box">
 
+              <video src="./img/about-video.mp4" autoplay></video>
 
+            </div>
 
+            <div class="bg-item"></div>
 
+          </div>
 
+          <div class="col-12 col-xl-6 content-box">
 
+            <div class="d-flex flex-column text-center mt-5 mb-4">
 
+              <span class="pb-3 title">About</span>
 
+              <div class="bottom_line"></div>
 
+              <span class="fw-bold" style="letter-spacing: 3px;">關於紫晴</span>
 
+            </div>
 
+
 
+            <div class="container-fluid icon-box">
 
+              <div class="row g-4 mb-4 align-items-center">
 
+                <div class="col-6 d-flex align-items-center">
 
+                  <div class="icon-item">
 
+                    <img src="./img/icon/spa.png" alt="">
 
+                  </div>
 
+                  <span>放鬆的舒適空間</span>
 
+                </div>
 
+                <div class="col-6 d-flex align-items-center">
 
+                  <div class="icon-item">
 
+                    <img src="./img/icon/facial-treatment.png" alt="">
 
+                  </div>
 
+                  <span>精緻細膩的服務</span>
 
+                </div>
 
+                <div class="col-6 d-flex align-items-center">
 
+                  <div class="icon-item">
 
+                    <img src="./img/icon/body-massage.png" alt="">
 
+                  </div>
 
+                  <span>精湛的技術</span>
 
+                </div>
 
+                <div class="col-6 d-flex align-items-center">
 
+                  <div class="icon-item">
 
+                    <img src="./img/icon/hair-treatment.png" alt="">
 
+                  </div>
 
+                  <span>客製化的課程</span>
 
+                </div>
 
+              </div>
 
+            </div>
 
+
 
+            <p>我們提供療癒放鬆的舒適空間、精緻細膩的服務、精湛的技術、以及客製化的課程，針對您的膚質、膚況、需求規劃專屬於您的保養課程，為您量身打造令人驚嘆的美麗奇蹟，是我們永遠不變的經營方針。</p>
 
+          </div>
 
+        </div>
 
+      </div>
 
+
 
+    </div>
 
+
 
+    <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://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>
 
+              </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>

+ 353 - 4
css/style.css
View File 

@@ -461,7 +461,7 @@
 
 }
 
 
 #footer {
 
-  background: #edcde1;
 
+  background: #fff2f1;
 
 }
 
 
 #footer .footer_content_box {
 
@@ -565,6 +565,110 @@
 
   color: #52b448;
 
 }
 
 
+#footer-secondary {
 
+  background: #fff2f1;
 
+  color: #6c6c6c;
 
+}
 
+
 
+#footer-secondary .footer_content_box {
 
+  padding: 50px 0;
 
+  margin: 0 auto;
 
+  width: 80%;
 
+}
 
+
 
+@media (max-width: 767px) {
 
+  #footer-secondary .footer_content_box {
 
+    width: 85%;
 
+  }
 
+}
 
+
 
+#footer-secondary h3 {
 
+  font-size: 1rem;
 
+}
 
+
 
+#footer-secondary h3,
 
+#footer-secondary p {
 
+  letter-spacing: 2px;
 
+}
 
+
 
+#footer-secondary li a {
 
+  width: 100%;
 
+  text-align: left;
 
+  color: #6c6c6c;
 
+}
 
+
 
+#footer-secondary .navbar-nav {
 
+  width: auto;
 
+}
 
+
 
+#footer-secondary .navbar-nav .nav-link {
 
+  margin: 0;
 
+  padding: 0;
 
+  border-bottom: none;
 
+  -webkit-transition: all 0.2s;
 
+  transition: all 0.2s;
 
+}
 
+
 
+#footer-secondary .navbar-nav .nav-link:hover {
 
+  color: #ef7086;
 
+}
 
+
 
+#footer-secondary .navbar-nav .nav-item {
 
+  min-width: 105px;
 
+}
 
+
 
+@media (max-width: 767px) {
 
+  #footer-secondary .navbar-nav .nav-item {
 
+    min-width: auto;
 
+    width: 90px;
 
+  }
 
+  #footer-secondary .navbar-nav .nav-link {
 
+    font-size: 1rem;
 
+    text-align: center;
 
+  }
 
+}
 
+
 
+#footer-secondary .socail-link img {
 
+  image-rendering: -webkit-optimize-contrast;
 
+  -webkit-filter: invert(42%) sepia(0%) saturate(1863%) hue-rotate(226deg) brightness(100%) contrast(96%);
 
+          filter: invert(42%) sepia(0%) saturate(1863%) hue-rotate(226deg) brightness(100%) contrast(96%);
 
+}
 
+
 
+#footer-secondary .socail-link img:hover {
 
+  opacity: 0.8;
 
+}
 
+
 
+#footer-secondary .footer_text {
 
+  margin-top: 15px;
 
+}
 
+
 
+@media (max-width: 767px) {
 
+  #footer-secondary .footer_text p {
 
+    font-size: 0.85rem;
 
+  }
 
+}
 
+
 
+#footer-secondary .store_name {
 
+  color: #ef7086;
 
+}
 
+
 
+#footer-secondary .store {
 
+  width: 85%;
 
+  margin: 0 auto;
 
+}
 
+
 
+#footer-secondary .store p {
 
+  margin-top: 10px;
 
+}
 
+
 
+#footer-secondary .footer_logo img {
 
+  position: relative;
 
+  right: 30px;
 
+  width: 250px;
 
+  -o-object-fit: cover;
 
+     object-fit: cover;
 
+}
 
+
 
 .gototop {
 
   position: fixed;
 
   right: 3vw;
 
@@ -676,8 +780,8 @@
 
 }
 
 
 .facial-content .card:hover .img-box img {
 
-  -webkit-transform: scale(1.2, 1.2);
 
-          transform: scale(1.2, 1.2);
 
+  -webkit-transform: scale(1.1, 1.1);
 
+          transform: scale(1.1, 1.1);
 
 }
 
 
 .facial-content .badge {
 
@@ -691,8 +795,13 @@
 
 }
 
 
 .facial-content .img-box img {
 
+  width: 100%;
 
+  height: auto;
 
+  -o-object-fit: contain;
 
+     object-fit: contain;
 
   -webkit-transition: all 1s;
 
   transition: all 1s;
 
+  image-rendering: -webkit-optimize-contrast;
 
 }
 
 
 .modal-header {
 
@@ -781,6 +890,10 @@
 
   font-weight: bold;
 
 }
 
 
+.modal-body img {
 
+  image-rendering: -webkit-optimize-contrast;
 
+}
 
+
 
 /* 臉部課程-facial end */
 
 /* 門市資訊-store start */
 
 .store-banner {
 
@@ -793,10 +906,15 @@
 
 }
 
 
 .store-content {
 
-  margin: 100px;
 
+  margin: 150px auto;
 
   letter-spacing: 1px;
 
 }
 
 
+.store-content i {
 
+  color: #b2adae;
 
+  font-size: 20px;
 
+}
 
+
 
 .store-content h3 {
 
   margin-bottom: 20px;
 
   font-weight: bold;
 
@@ -805,6 +923,24 @@
 
 
 .store-content img {
 
   width: 100%;
 
+  border-radius: 20px 0 0 20px;
 
+}
 
+
 
+@media (max-width: 767px) {
 
+  .store-content img {
 
+    border-radius: 20px 20px 0 0;
 
+  }
 
+}
 
+
 
+.store-content .info-box {
 
+  width: 270px;
 
+  margin: auto;
 
+}
 
+
 
+@media (max-width: 375px) {
 
+  .store-content .info-box {
 
+    width: 100%;
 
+  }
 
 }
 
 
 .store-content .Down_line {
 
@@ -812,6 +948,98 @@
 
   margin-top: -20px;
 
 }
 
 
+.store-content .row {
 
+  margin: 15%;
 
+  border: 1px solid #f4c0d0;
 
+  border-radius: 20px;
 
+}
 
+
 
+@media (max-width: 1200px) {
 
+  .store-content .row {
 
+    margin: 10%;
 
+  }
 
+}
 
+
 
+@media (max-width: 992px) {
 
+  .store-content .row {
 
+    margin: 0px;
 
+  }
 
+}
 
+
 
+.store-content .google_map {
 
+  width: 100%;
 
+  padding: 7px 15px;
 
+  margin-top: 1px;
 
+  background: none;
 
+  color: #3f51b5;
 
+  border: 1px solid #3f51b5;
 
+  border-radius: 3px;
 
+  -webkit-transition: 0.3s;
 
+  transition: 0.3s;
 
+  font-size: 15px;
 
+  letter-spacing: 1px;
 
+  overflow-x: hidden;
 
+}
 
+
 
+.store-content .google_map a {
 
+  text-decoration: none;
 
+  color: #3f51b5;
 
+}
 
+
 
+.store-content .google_map:hover {
 
+  background: #3f51b5;
 
+  color: #fff;
 
+}
 
+
 
+.store-content .google_map:hover a {
 
+  color: #fff;
 
+}
 
+
 
+.store-content .line_Reserve {
 
+  width: 100%;
 
+  margin-left: 10%;
 
+  padding: 8px 15px;
 
+  background: #52b448;
 
+  color: #fff;
 
+  border: 1px solid #52b448;
 
+  border-radius: 5px;
 
+  -webkit-transition: 0.3s;
 
+  transition: 0.3s;
 
+  font-size: 15px;
 
+  letter-spacing: 1px;
 
+  overflow-x: hidden;
 
+}
 
+
 
+.store-content .line_Reserve a {
 
+  color: #fff;
 
+  text-decoration: none;
 
+}
 
+
 
+.store-content .line_Reserve:hover {
 
+  background: #fff;
 
+  color: #52b448;
 
+}
 
+
 
+.store-content .line_Reserve:hover a {
 
+  color: #52b448;
 
+}
 
+
 
+@media (max-width: 575px) {
 
+  .store-content .line_Reserve {
 
+    margin-left: 0;
 
+    margin-top: 5%;
 
+  }
 
+}
 
+
 
+@media (max-width: 992px) {
 
+  .store-content p {
 
+    font-size: 0.9rem;
 
+  }
 
+  .store-content h3 {
 
+    font-size: 1.3rem;
 
+  }
 
+}
 
+
 
 /* 門市資訊-store end */
 
 /* 身體課程-massage start */
 
 .massage-banner {
 
@@ -830,4 +1058,125 @@
 
 }
 
 
 /* 身體課程-massage end */
 
+/* 關於我們-about start */
 
+.about-content {
 
+  margin-bottom: 100px;
 
+}
 
+
 
+.about-content p {
 
+  padding: 0 60px;
 
+  line-height: 35px;
 
+  text-align: justify;
 
+}
 
+
 
+.about-content .title {
 
+  font-size: 30px;
 
+  letter-spacing: 3px;
 
+  font-weight: bold;
 
+}
 
+
 
+.about-content .container {
 
+  margin: 15% 5%;
 
+}
 
+
 
+.about-content .bg-item {
 
+  height: 120%;
 
+  background-color: #fff2f1;
 
+  position: absolute;
 
+  z-index: -1;
 
+  bottom: -10%;
 
+  left: -5%;
 
+  width: 90%;
 
+}
 
+
 
+.about-content .iframe-box {
 
+  position: relative;
 
+  width: 100%;
 
+  height: 0;
 
+  padding-bottom: 73%;
 
+}
 
+
 
+.about-content .iframe-box video {
 
+  position: absolute;
 
+  top: 0;
 
+  left: 0;
 
+  width: 100%;
 
+  height: 100%;
 
+  -webkit-box-shadow: 0 0 10px rgba(32, 32, 32, 0.25);
 
+          box-shadow: 0 0 10px rgba(32, 32, 32, 0.25);
 
+}
 
+
 
+.about-content .icon-box .row {
 
+  padding: 0 30px;
 
+}
 
+
 
+@media (max-width: 1200px) {
 
+  .about-content .icon-box .row {
 
+    padding-left: 13%;
 
+  }
 
+}
 
+
 
+@media (max-width: 768px) {
 
+  .about-content .icon-box .row {
 
+    padding: 0;
 
+  }
 
+}
 
+
 
+.about-content .icon-box .col-6 {
 
+  -webkit-box-orient: horizontal;
 
+  -webkit-box-direction: normal;
 
+      -ms-flex-direction: row;
 
+          flex-direction: row;
 
+}
 
+
 
+@media (max-width: 767px) {
 
+  .about-content .icon-box .col-6 {
 
+    -webkit-box-orient: vertical;
 
+    -webkit-box-direction: normal;
 
+        -ms-flex-direction: column;
 
+            flex-direction: column;
 
+  }
 
+}
 
+
 
+.about-content .icon-box img {
 
+  width: 50px;
 
+  image-rendering: -webkit-optimize-contrast;
 
+  -webkit-filter: invert(71%) sepia(13%) saturate(3318%) hue-rotate(302deg) brightness(90%) contrast(110%);
 
+          filter: invert(71%) sepia(13%) saturate(3318%) hue-rotate(302deg) brightness(90%) contrast(110%);
 
+}
 
+
 
+.about-content .icon-box span {
 
+  margin: 15px;
 
+  font-weight: bold;
 
+}
 
+
 
+.about-content .icon-box .icon-item {
 
+  padding: 15px;
 
+  margin: auto 0;
 
+  border: 1px solid #f4c0d0;
 
+  border-radius: 100%;
 
+}
 
+
 
+@media (max-width: 1200px) {
 
+  .about-content .container {
 
+    margin: 10% auto;
 
+  }
 
+  .about-content .container p {
 
+    padding: 0;
 
+  }
 
+  .about-content .content-box {
 
+    margin-top: 100px;
 
+  }
 
+}
 
+
 
+/* 關於我們-about end */
 
+.bottom_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;
 
+}
 
 /*# sourceMappingURL=style.css.map */

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


+ 285 - 3
css/style.scss
View File 

@@ -462,7 +462,7 @@ $subcolor: #f4c0d0;
 
 }
 
 
 #footer {
 
-  background: #edcde1;
 
+  background: #fff2f1;
 
   .footer_content_box {
 
     padding: 100px 0;
 
     margin: 0 auto;
 
@@ -549,6 +549,93 @@ $subcolor: #f4c0d0;
 
   }
 
 }
 
 
+#footer-secondary {
 
+  background: #fff2f1;
 
+  color: #6c6c6c;
 
+  .footer_content_box {
 
+    padding: 50px 0;
 
+    margin: 0 auto;
 
+    width: 80%;
 
+    @media (max-width: 767px) {
 
+      width: 85%;
 
+    }
 
+  }
 
+  h3 {
 
+    font-size: 1rem;
 
+  }
 
+  h3,
 
+  p {
 
+    letter-spacing: 2px;
 
+  }
 
+  li a {
 
+    width: 100%;
 
+    text-align: left;
 
+    color: #6c6c6c;
 
+  }
 
+  .navbar-nav {
 
+    width: auto;
 
+    .nav-link {
 
+      margin: 0;
 
+      padding: 0;
 
+      border-bottom: none;
 
+      transition: all 0.2s;
 
+      &:hover {
 
+        color: $maincolor;
 
+      }
 
+    }
 
+    .nav-item {
 
+      min-width: 105px;
 
+    }
 
+    @media (max-width: 767px) {
 
+      .nav-item {
 
+        min-width: auto;
 
+        width: 90px;
 
+      }
 
+      .nav-link {
 
+        font-size: 1rem;
 
+        text-align: center;
 
+      }
 
+    }
 
+  }
 
+  .socail-link {
 
+    img {
 
+      image-rendering: -webkit-optimize-contrast;
 
+      filter: invert(42%) sepia(0%) saturate(1863%) hue-rotate(226deg) brightness(100%) contrast(96%);
 
+      &:hover {
 
+        // #ef7086
 
+        // filter: invert(66%) sepia(60%) saturate(2844%) hue-rotate(307deg) brightness(99%) contrast(90%);
 
+        opacity: 0.8;
 
+      }
 
+    }
 
+  }
 
+  .footer_text {
 
+    margin-top: 15px;
 
+    @media (max-width: 767px) {
 
+      p {
 
+        font-size: 0.85rem;
 
+      }
 
+    }
 
+  }
 
+  .store_name {
 
+    color: $maincolor;
 
+  }
 
+  .store {
 
+    width: 85%;
 
+    margin: 0 auto;
 
+    p {
 
+      margin-top: 10px;
 
+    }
 
+  }
 
+  .footer_logo {
 
+    img {
 
+      position: relative;
 
+      right: 30px;
 
+      width: 250px;
 
+      object-fit: cover;
 
+    }
 
+  }
 
+}
 
+
 
 .gototop {
 
   position: fixed;
 
   right: 3vw;
 
@@ -646,7 +733,7 @@ $subcolor: #f4c0d0;
 
         display: block;
 
       }
 
       .img-box img {
 
-        transform: scale(1.2, 1.2);
 
+        transform: scale(1.1, 1.1);
 
       }
 
     }
 
   }
 
@@ -658,7 +745,11 @@ $subcolor: #f4c0d0;
 
   .img-box {
 
     overflow: hidden;
 
     img {
 
+      width: 100%;
 
+      height: auto;
 
+      object-fit: contain;
 
       transition: all 1s;
 
+      image-rendering: -webkit-optimize-contrast;
 
     }
 
   }
 
 }
 
@@ -731,6 +822,10 @@ $subcolor: #f4c0d0;
 
   }
 
 }
 
 
+.modal-body img {
 
+  image-rendering: -webkit-optimize-contrast;
 
+}
 
+
 
 /* 臉部課程-facial end */
 
 
 /* 門市資訊-store start */
 
@@ -744,8 +839,12 @@ $subcolor: #f4c0d0;
 
 }
 
 
 .store-content {
 
-  margin: 100px;
 
+  margin: 150px auto;
 
   letter-spacing: 1px;
 
+  i {
 
+    color: #b2adae;
 
+    font-size: 20px;
 
+  }
 
   h3 {
 
     margin-bottom: 20px;
 
     font-weight: bold;
 
@@ -753,11 +852,94 @@ $subcolor: #f4c0d0;
 
   }
 
   img {
 
     width: 100%;
 
+    border-radius: 20px 0 0 20px;
 
+    @media (max-width: 767px) {
 
+      border-radius: 20px 20px 0 0;
 
+    }
 
+  }
 
+  .info-box {
 
+    width: 270px;
 
+    margin: auto;
 
+    @media (max-width: 375px) {
 
+      width: 100%;
 
+    }
 
   }
 
   .Down_line {
 
     width: 230px;
 
     margin-top: -20px;
 
   }
 
+  .row {
 
+    margin: 15%;
 
+    border: 1px solid #f4c0d0;
 
+    border-radius: 20px;
 
+    @media (max-width: 1200px) {
 
+      margin: 10%;
 
+    }
 
+    @media (max-width: 992px) {
 
+      margin: 0px;
 
+    }
 
+  }
 
+  .google_map {
 
+    width: 100%;
 
+    padding: 7px 15px;
 
+    margin-top: 1px;
 
+    background: none;
 
+    color: #3f51b5;
 
+    border: 1px solid #3f51b5;
 
+    border-radius: 3px;
 
+    -webkit-transition: 0.3s;
 
+    transition: 0.3s;
 
+    font-size: 15px;
 
+    letter-spacing: 1px;
 
+    overflow-x: hidden;
 
+    a {
 
+      text-decoration: none;
 
+      color: #3f51b5;
 
+    }
 
+    &:hover {
 
+      background: #3f51b5;
 
+      color: #fff;
 
+      a {
 
+        color: #fff;
 
+      }
 
+    }
 
+  }
 
+  .line_Reserve {
 
+    width: 100%;
 
+    margin-left: 10%;
 
+    padding: 8px 15px;
 
+    background: #52b448;
 
+    color: #fff;
 
+    border: 1px solid #52b448;
 
+    border-radius: 5px;
 
+    transition: 0.3s;
 
+    font-size: 15px;
 
+    letter-spacing: 1px;
 
+    overflow-x: hidden;
 
+    a {
 
+      color: #fff;
 
+      text-decoration: none;
 
+    }
 
+    &:hover {
 
+      background: #fff;
 
+      color: #52b448;
 
+      a {
 
+        color: #52b448;
 
+      }
 
+    }
 
+    @media (max-width: 575px) {
 
+      margin-left: 0;
 
+      margin-top: 5%;
 
+    }
 
+  }
 
+  @media (max-width: 992px) {
 
+    p {
 
+      font-size: 0.9rem;
 
+    }
 
+    h3 {
 
+      font-size: 1.3rem;
 
+    }
 
+  }
 
 }
 
 
 /* 門市資訊-store end */
 
@@ -781,3 +963,103 @@ $subcolor: #f4c0d0;
 
 }
 
 
 /* 身體課程-massage end */
 
+
 
+/* 關於我們-about start */
 
+
 
+.about-content {
 
+  margin-bottom: 100px;
 
+  p {
 
+    padding: 0 60px;
 
+    line-height: 35px;
 
+    text-align: justify;
 
+  }
 
+  .title {
 
+    font-size: 30px;
 
+    letter-spacing: 3px;
 
+    font-weight: bold;
 
+  }
 
+  .container {
 
+    margin: 15% 5%;
 
+  }
 
+  .bg-item {
 
+    height: 120%;
 
+    background-color: #fff2f1;
 
+    position: absolute;
 
+    z-index: -1;
 
+    bottom: -10%;
 
+    left: -5%;
 
+    width: 90%;
 
+  }
 
+
 
+  .iframe-box {
 
+    position: relative;
 
+    width: 100%;
 
+    height: 0;
 
+    padding-bottom: 73%;
 
+  }
 
+
 
+  .iframe-box video {
 
+    position: absolute;
 
+    top: 0;
 
+    left: 0;
 
+    width: 100%;
 
+    height: 100%;
 
+    box-shadow: 0 0 10px rgba(32, 32, 32, 0.25);
 
+  }
 
+
 
+  .icon-box {
 
+    .row {
 
+      padding: 0 30px;
 
+      @media (max-width: 1200px) {
 
+        padding-left: 13%;
 
+      }
 
+      @media (max-width: 768px) {
 
+        padding: 0;
 
+      }
 
+    }
 
+    .col-6 {
 
+      flex-direction: row;
 
+      @media (max-width: 767px) {
 
+        flex-direction: column;
 
+      }
 
+    }
 
+    img {
 
+      width: 50px;
 
+      image-rendering: -webkit-optimize-contrast;
 
+      filter: invert(71%) sepia(13%) saturate(3318%) hue-rotate(302deg) brightness(90%) contrast(110%);
 
+    }
 
+    span {
 
+      margin: 15px;
 
+      font-weight: bold;
 
+    }
 
+    .icon-item {
 
+      padding: 15px;
 
+      margin: auto 0;
 
+      border: 1px solid $subcolor;
 
+      border-radius: 100%;
 
+    }
 
+  }
 
+
 
+  @media (max-width: 1200px) {
 
+    .container {
 
+      margin: 10% auto;
 
+      p {
 
+        padding: 0;
 
+      }
 
+    }
 
+    .content-box {
 
+      margin-top: 100px;
 
+    }
 
+  }
 
+}
 
+
 
+/* 關於我們-about end */
 
+
 
+.bottom_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;
 
+}

+ 46 - 56
facial.html
View File 

@@ -37,7 +37,7 @@
 
           <div class="navbar-collapse navbar-center" id="navbarSupportedContent">
 
             <ul class="navbar-nav justify-content-center">
 
               <li class="nav-item">
 
-                <a class="nav-link" href="" target="_top">
 
+                <a class="nav-link" href="./facial.html" target="_top">
 
                   臉部課程
 
                 </a>
 
               </li>
 
@@ -47,7 +47,7 @@
 
                 </a>
 
               </li>
 
               <li class="nav-item">
 
-                <a class="nav-link" href="" target="_top">
 
+                <a class="nav-link" href="./about.html" target="_top">
 
                   關於我們
 
                 </a>
 
               </li>
 
@@ -86,10 +86,10 @@
 
       <!-- forLoop -->
 
     </div>
 
 
-    <footer id="footer">
 
+    <footer id="footer-secondary">
 
       <div class="footer_content_box">
 
-        <div class="row">
 
-          <div class="col-md-4">
 
+        <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
 
@@ -100,66 +100,56 @@
 
               <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 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="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 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>
 
               </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">

+ 13 - 0
facial.json
View File 

@@ -5,6 +5,7 @@
 
     "time": "50",
 
     "price": "800",
 
     "originalPrice": "1,200",
 
+    "image": "./img/維生素育膚課程/1.jpg",
 
     "recommend": "<ul><li>螨蟲肌膚、毛孔粗大</li><li>皮膚粗糙、凹疤多難清潔</li><li>針對咀嚼肌龐大</li><li>不自覺皺眉、法令紋深</li><li>皮膚代謝差</li></ul>"
 
   },
 
   {
 
@@ -13,6 +14,7 @@
 
     "time": "75",
 
     "price": "1,600",
 
     "originalPrice": "3,600",
 
+    "image": "./img/維生素育膚課程/3.jpg",
 
     "recommend": "<ul><li>螨蟲肌膚、毛孔粗大</li><li>皮膚粗糙、凹疤多難清潔</li><li>針對咀嚼肌龐大</li><li>不自覺皺眉、法令紋深</li><li>皮膚代謝差</li></ul>"
 
   },
 
   {
 
@@ -21,6 +23,7 @@
 
     "time": "75",
 
     "price": "1,800",
 
     "originalPrice": "6,600",
 
+    "image": "./img/維生素育膚課程/5.jpg",
 
     "recommend": "<ul><li>螨蟲肌膚、毛孔粗大</li><li>皮膚粗糙、凹疤多難清潔</li><li>針對咀嚼肌龐大</li><li>不自覺皺眉、法令紋深</li><li>皮膚代謝差</li></ul>"
 
   },
 
   {
 
@@ -29,6 +32,7 @@
 
     "time": "60",
 
     "price": "1,200",
 
     "originalPrice": "1,600",
 
+    "image": "./img/維生素育膚課程/2.jpg",
 
     "recommend": "<ul><li>螨蟲肌膚、毛孔粗大</li><li>皮膚粗糙、凹疤多難清潔</li><li>針對咀嚼肌龐大</li><li>不自覺皺眉、法令紋深</li><li>皮膚代謝差</li></ul>"
 
   },
 
   {
 
@@ -37,6 +41,7 @@
 
     "time": "90",
 
     "price": "1,800",
 
     "originalPrice": "6,800",
 
+    "image": "./img/維生素育膚課程/25.jpg",
 
     "recommend": "<ul><li>螨蟲肌膚、毛孔粗大</li><li>皮膚粗糙、凹疤多難清潔</li><li>針對咀嚼肌龐大</li><li>不自覺皺眉、法令紋深</li><li>皮膚代謝差</li></ul>"
 
   },
 
   {
 
@@ -45,6 +50,7 @@
 
     "time": "75",
 
     "price": "1,600",
 
     "originalPrice": "3,600",
 
+    "image": "./img/維生素育膚課程/12.jpg",
 
     "recommend": "<ul><li>螨蟲肌膚、毛孔粗大</li><li>皮膚粗糙、凹疤多難清潔</li><li>針對咀嚼肌龐大</li><li>不自覺皺眉、法令紋深</li><li>皮膚代謝差</li></ul>"
 
   },
 
   {
 
@@ -53,6 +59,7 @@
 
     "time": "75",
 
     "price": "1,600",
 
     "originalPrice": "3,600",
 
+    "image": "./img/維生素育膚課程/7.jpg",
 
     "recommend": "<ul><li>螨蟲肌膚、毛孔粗大</li><li>皮膚粗糙、凹疤多難清潔</li><li>針對咀嚼肌龐大</li><li>不自覺皺眉、法令紋深</li><li>皮膚代謝差</li></ul>"
 
   },
 
   {
 
@@ -61,6 +68,7 @@
 
     "time": "60",
 
     "price": "2,200",
 
     "originalPrice": "8,800",
 
+    "image": "./img/維生素育膚課程/15.jpg",
 
     "recommend": "<ul><li>螨蟲肌膚、毛孔粗大</li><li>皮膚粗糙、凹疤多難清潔</li><li>針對咀嚼肌龐大</li><li>不自覺皺眉、法令紋深</li><li>皮膚代謝差</li></ul>"
 
   },
 
   {
 
@@ -69,6 +77,7 @@
 
     "time": "50",
 
     "price": "1,499",
 
     "originalPrice": "4,800",
 
+    "image": "./img/維生素育膚課程/13.jpg",
 
     "recommend": "<ul><li>螨蟲肌膚、毛孔粗大</li><li>皮膚粗糙、凹疤多難清潔</li><li>針對咀嚼肌龐大</li><li>不自覺皺眉、法令紋深</li><li>皮膚代謝差</li></ul>"
 
   },
 
   {
 
@@ -77,6 +86,7 @@
 
     "time": "80",
 
     "price": "2,200",
 
     "originalPrice": "8,800",
 
+    "image": "./img/維生素育膚課程/8.jpg",
 
     "recommend": "<ul><li>螨蟲肌膚、毛孔粗大</li><li>皮膚粗糙、凹疤多難清潔</li><li>針對咀嚼肌龐大</li><li>不自覺皺眉、法令紋深</li><li>皮膚代謝差</li></ul>"
 
   },
 
   {
 
@@ -85,6 +95,7 @@
 
     "time": "30",
 
     "price": "699",
 
     "originalPrice": "1,800",
 
+    "image": "./img/維生素育膚課程/6.jpg",
 
     "recommend": "<ul><li>螨蟲肌膚、毛孔粗大</li><li>皮膚粗糙、凹疤多難清潔</li><li>針對咀嚼肌龐大</li><li>不自覺皺眉、法令紋深</li><li>皮膚代謝差</li></ul>"
 
   },
 
   {
 
@@ -93,6 +104,7 @@
 
     "time": "120",
 
     "price": "3,999",
 
     "originalPrice": "8,800",
 
+    "image": "./img/維生素育膚課程/10.jpg",
 
     "recommend": "<ul><li>青春痘、粉刺、毛孔粗大、痘疤</li><li>肌膚粗糙、皮膚色素不均</li><li>老化肌膚、黑斑</li></ul>"
 
   },
 
   {
 
@@ -101,6 +113,7 @@
 
     "time": "70",
 
     "price": "1,699",
 
     "originalPrice": "6,600",
 
+    "image": "./img/維生素育膚課程/24.jpg",
 
     "recommend": "<ul><li>螨蟲肌膚、毛孔粗大</li><li>皮膚粗糙、凹疤多難清潔</li><li>針對咀嚼肌龐大</li><li>不自覺皺眉、法令紋深</li><li>皮膚代謝差</li></ul>"
 
   }
 
 ]

BIN
img/about-video.mp4
View File


BIN
img/icon/001-line.png
View File


BIN
img/icon/body-massage.png
View File


BIN
img/icon/facebook-app-symbol.png
View File


BIN
img/icon/facebook.png
View File


BIN
img/icon/facial-treatment.png
View File


BIN
img/icon/hair-treatment.png
View File


BIN
img/icon/line.png
View File


BIN
img/icon/spa.png
View File


BIN
img/維生素育膚課程/1.jpg
View File


BIN
img/維生素育膚課程/10.jpg
View File


BIN
img/維生素育膚課程/11.jpg
View File


BIN
img/維生素育膚課程/12.jpg
View File


BIN
img/維生素育膚課程/13.jpg
View File


BIN
img/維生素育膚課程/14.jpg
View File


BIN
img/維生素育膚課程/15.jpg
View File


BIN
img/維生素育膚課程/16.jpg
View File


BIN
img/維生素育膚課程/17.jpg
View File


BIN
img/維生素育膚課程/18.jpg
View File


BIN
img/維生素育膚課程/19.jpg
View File


BIN
img/維生素育膚課程/2.jpg
View File


BIN
img/維生素育膚課程/20.jpg
View File


BIN
img/維生素育膚課程/21.jpg
View File


BIN
img/維生素育膚課程/22.jpg
View File


BIN
img/維生素育膚課程/23.jpg
View File


BIN
img/維生素育膚課程/24.jpg
View File


BIN
img/維生素育膚課程/25.jpg
View File


BIN
img/維生素育膚課程/3.jpg
View File


BIN
img/維生素育膚課程/4.jpg
View File


BIN
img/維生素育膚課程/5.jpg
View File


BIN
img/維生素育膚課程/6.jpg
View File


BIN
img/維生素育膚課程/7.jpg
View File


BIN
img/維生素育膚課程/8.jpg
View File


BIN
img/維生素育膚課程/9.jpg
View File


BIN
img/螢幕擷取畫面 2022-04-21 204548.png
View File


+ 25 - 30
js/index.js
View File 

@@ -114,30 +114,25 @@ $(".learn_more").click(function () {
 
           console.log(msg[i]);
 
           CourseContent = `
 
           <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="${msg[i].CourseImg}" alt="">
 
-                      </div>
 
-                  </div>
 
-                  <div class="col-md-5">
 
-                      <div class="course_detail_text">
 
-                          <div class="features_title fw-bold text-start">${msg[i].CourseTitle}</div>
 
-
 
-
 
-                          <div class="sec_content_right_text">
 
-                              <p>${msg[i].Coursetext}</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 class="row">
 
+            <div class="col-md-7">
 
+              <div class="course_detail_img mt-3">
 
+                <img class="img-fluid" src="${msg[i].CourseImg}" alt="">
 
+              </div>
 
+            </div>
 
+            <div class="col-md-5">
 
+              <div class="course_detail_text">
 
+                <div class="features_title fw-bold text-start">${msg[i].CourseTitle}</div>
 
+                  <div class="sec_content_right_text">
 
+                    <p>${msg[i].Coursetext}</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>`
 
         }
 
         $('.modal-body').html(CourseContent);
 
       }
 
@@ -156,10 +151,10 @@ $.ajax({
 
     let facialModalList = [];
 
     for (let i = 0; i < res.length; i++) {
 
       let facialCardContent = `
 
-      <div class="col-12 col-md-6 col-lg-4">
 
+      <div class="col-12 col-md-6 col-xl-4">
 
           <div class="card h-100">
 
             <div class="img-box">
 
-              <img src="./img/violetbeauty/karelys-ruiz-PqyzuzFiQfY-unsplash.png" class="card-img-top" alt="...">
 
+              <img src="${res[i].image}" class="card-img-top" alt="...">
 
             </div>
 
             <div class="card-body">
 
               <div class="d-flex justify-content-between">
 
@@ -189,7 +184,7 @@ $.ajax({
 
             <div class="container-fluid">
 
               <div class="row align-items-center">
 
                 <div class="col-12 col-lg-7">
 
-                  <img src="./img/violetbeauty/sec00.jpg" alt="" style="width: 100%;">
 
+                  <img src="${res[i].image}" alt="" style="width: 100%; box-shadow: 0 0 10px rgb(32 32 32 / 25%);">
 
                 </div>
 
                 <div class="col-12 col-lg-5 px-3 px-xl-5">
 
                   <h5 class="fw-bold my-3">${res[i].title}</h5>
 
@@ -242,7 +237,7 @@ $.ajax({
 
       `<div class="col-12 col-md-6 col-xl-4">
 
         <div class="card h-100">
 
           <div class="img-box">
 
-            <img src="./img/violetbeauty/karelys-ruiz-PqyzuzFiQfY-unsplash.png" class="card-img-top" alt="...">
 
+            <img src="./img/維生素育膚課程/4.jpg" class="card-img-top" alt="...">
 
           </div>
 
           <div class="card-body">
 
             <div class="d-flex justify-content-between">
 
@@ -263,7 +258,7 @@ $.ajax({
 
       `<div class="col-12 col-md-6 col-xl-4">
 
         <div class="card h-100">
 
           <div class="img-box">
 
-            <img src="./img/violetbeauty/karelys-ruiz-PqyzuzFiQfY-unsplash.png" class="card-img-top" alt="...">
 
+            <img src="./img/維生素育膚課程/14.jpg" class="card-img-top" alt="...">
 
           </div>
 
           <div class="card-body">
 
             <div class="d-flex justify-content-between">
 
@@ -284,7 +279,7 @@ $.ajax({
 
       `<div class="col-12 col-md-6 col-xl-4">
 
         <div class="card h-100">
 
           <div class="img-box">
 
-            <img src="./img/violetbeauty/karelys-ruiz-PqyzuzFiQfY-unsplash.png" class="card-img-top" alt="...">
 
+            <img src="./img/維生素育膚課程/11.jpg" class="card-img-top" alt="...">
 
           </div>
 
           <div class="card-body">
 
             <h5 class="badge">身體課程</h5>
 
@@ -301,7 +296,7 @@ $.ajax({
 
       <div class="col-12 col-md-6 col-xl-4">
 
         <div class="card h-100">
 
           <div class="img-box">
 
-            <img src="./img/violetbeauty/karelys-ruiz-PqyzuzFiQfY-unsplash.png" class="card-img-top" alt="...">
 
+            <img src="${res[i].image}" class="card-img-top" alt="...">
 
           </div>
 
           <div class="card-body">
 
             <div class="d-flex justify-content-between">
 
@@ -331,7 +326,7 @@ $.ajax({
 
               <div class="container-fluid">
 
                 <div class="row align-items-center">
 
                   <div class="col-12 col-lg-7">
 
-                    <img src="./img/violetbeauty/sec00.jpg" alt="" style="width: 100%;">
 
+                    <img src="${res[i].image}" alt="" style="width: 100%; box-shadow: 0 0 10px rgb(32 32 32 / 25%);">
 
                   </div>
 
                   <div class="col-12 col-lg-5 px-3 px-xl-5">
 
                     <h5 class="fw-bold my-3">${res[i].title}</h5>

+ 48 - 59
massage.html
View File 

@@ -45,7 +45,7 @@
 
                 </a>
 
               </li>
 
               <li class="nav-item">
 
-                <a class="nav-link" href="" target="_top">
 
+                <a class="nav-link" href="./about.html" target="_top">
 
                   關於我們
 
                 </a>
 
               </li>
 
@@ -92,7 +92,7 @@
 
             <div class="container-fluid">
 
               <div class="row align-items-center">
 
                 <div class="col-12 col-lg-7">
 
-                  <img src="./img/violetbeauty/sec00.jpg" alt="" style="width: 100%;">
 
+                  <img src="./img/維生素育膚課程/4.jpg" alt="" style="width: 100%; box-shadow: 0 0 10px rgb(32 32 32 / 25%);">
 
                 </div>
 
                 <div class="col-12 col-lg-5 px-3 px-xl-5">
 
                   <h5 class="fw-bold my-3">波動舒活經絡課程</h5>
 
@@ -151,7 +151,7 @@
 
             <div class="container-fluid">
 
               <div class="row align-items-center">
 
                 <div class="col-12 col-lg-7">
 
-                  <img src="./img/violetbeauty/sec00.jpg" alt="" style="width: 100%;">
 
+                  <img src="./img/維生素育膚課程/14.jpg" alt="" style="width: 100%; box-shadow: 0 0 10px rgb(32 32 32 / 25%);">
 
                 </div>
 
                 <div class="col-12 col-lg-5 px-3 px-xl-5">
 
                   <h5 class="fw-bold my-3">五行氣穴課程</h5>
 
@@ -221,7 +221,7 @@
 
             <div class="container-fluid">
 
               <div class="row align-items-center">
 
                 <div class="col-12 col-lg-7">
 
-                  <img src="./img/violetbeauty/sec00.jpg" alt="" style="width: 100%;">
 
+                  <img src="./img/維生素育膚課程/11.jpg" alt="" style="width: 100%; box-shadow: 0 0 10px rgb(32 32 32 / 25%);">
 
                 </div>
 
                 <div class="col-12 col-lg-5 px-3 px-xl-5">
 
                   <h5 class="fw-bold my-3">半永久熱蠟除毛</h5>
 
@@ -266,11 +266,10 @@
 
       <!-- forLoop -->
 
     </div>
 
 
-
 
-    <footer id="footer">
 
+    <footer id="footer-secondary">
 
       <div class="footer_content_box">
 
-        <div class="row">
 
-          <div class="col-md-4">
 
+        <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
 
@@ -281,66 +280,56 @@
 
               <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 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="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 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>
 
               </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">

+ 9 - 0
massage.json
View File 

@@ -5,6 +5,7 @@
 
     "time": "15",
 
     "price": "599",
 
     "originalPrice": "1,200",
 
+    "image": "./img/維生素育膚課程/17.jpg",
 
     "recommend": "<ul><li>臉部缺氧性暗沉</li><li>容易頭痛、頭脹、頭皮水腫</li><li>長期面對電腦、姿勢不良者</li><li>有肩頸痠痛困擾、容易精神緊繃</li></ul>"
 
   },
 
   {
 
@@ -13,6 +14,7 @@
 
     "time": "20",
 
     "price": "699",
 
     "originalPrice": "1,200",
 
+    "image": "./img/維生素育膚課程/23.jpg",
 
     "recommend": "<ul><li>姿勢不良，有五十肩</li><li>容易肩頸痠痛，緊繃</li><li>長期面對電腦、姿勢不良者</li><li>有肩頸痠痛困擾、容易精神緊繃</li></ul>"
 
   },
 
   {
 
@@ -21,6 +23,7 @@
 
     "time": "20",
 
     "price": "699",
 
     "originalPrice": "3,600",
 
+    "image": "./img/維生素育膚課程/19.jpg",
 
     "recommend": "<ul><li>容易手麻、手部循環不佳</li><li>肩頸背酸痛、五十肩、水牛肩</li><li>腋下容易腫漲、淋巴阻塞</li><li>調理上胸腔呼吸系統</li></ul>"
 
   },
 
   {
 
@@ -29,6 +32,7 @@
 
     "time": "30",
 
     "price": "999",
 
     "originalPrice": "2,000",
 
+    "image": "./img/維生素育膚課程/20.jpg",
 
     "recommend": "<ul><li>長期坐辦公室，有駝背習慣</li><li>心肺功能變差、氣喘、呼吸系統過敏</li><li>經常胸悶、喘不過氣</li><li>經常莫名咳嗽卻不知道原因</li></ul>"
 
   },
 
   {
 
@@ -37,6 +41,7 @@
 
     "time": "40",
 
     "price": "1,600",
 
     "originalPrice": "3,600",
 
+    "image": "./img/維生素育膚課程/21.jpg",
 
     "recommend": "<ul><li>長期穿有鋼圈、較緊的內衣</li><li>經期前後會有腫、脹、痛的現象</li><li>沒有做胸部定期檢查、害羞看醫生</li><li>沒有運動習慣</li><li>哺乳期，乳腺經常阻塞</li><li>有乳癌家族病史</li></ul>"
 
   },
 
   {
 
@@ -45,6 +50,7 @@
 
     "time": "20",
 
     "price": "800",
 
     "originalPrice": "2,600",
 
+    "image": "./img/維生素育膚課程/16.jpg",
 
     "recommend": "<ul><li>外食族、纖維質缺乏者</li><li>胃部機能、腸道功能弱者</li><li>晚睡、熬夜者經常便秘者</li><li>小腹明顯者一久坐、少運動者</li><li>代謝循環差長時間待在冷氣房</li></ul>"
 
   },
 
   {
 
@@ -53,6 +59,7 @@
 
     "time": "50",
 
     "price": "1,800",
 
     "originalPrice": "3,600",
 
+    "image": "./img/維生素育膚課程/9.jpg",
 
     "recommend": "<ul><li>腳部腫脹、水腫</li><li>腿部容易酸痛、肌肉僵硬</li><li>機能退化關節痠痛</li><li>下半身循環不良、容易手腳冰冷</li></ul>"
 
   },
 
   {
 
@@ -61,6 +68,7 @@
 
     "time": "40",
 
     "price": "1,288",
 
     "originalPrice": "4,400",
 
+    "image": "./img/維生素育膚課程/18.jpg",
 
     "recommend": "<ul><li>手腳冰冷、婦科經常不適</li><li>月經週期不規律</li><li>改善/舒緩經前症候群不適</li><li>月經後護理排除老廢物質</li></ul>"
 
   },
 
   {
 
@@ -69,6 +77,7 @@
 
     "time": "30",
 
     "price": "800",
 
     "originalPrice": "1,200",
 
+    "image": "./img/維生素育膚課程/22.jpg",
 
     "recommend": "<ul><li>手腳冰冷、腰痠背痛</li><li>下半身肥胖、身體代謝差者</li><li>睡眠品質不佳、水腫、便秘</li><li>悶熱、不出汗、關節酸痛</li><li>感冒傷風、胃脹、經期不順體質的人</li></ul>"
 
   }
 
 ]

+ 103 - 71
store.html
View File 

@@ -45,7 +45,7 @@
 
                 </a>
 
               </li>
 
               <li class="nav-item">
 
-                <a class="nav-link" href="" target="_top">
 
+                <a class="nav-link" href="./about.html" target="_top">
 
                   關於我們
 
                 </a>
 
               </li>
 
@@ -74,36 +74,78 @@
 
     </div>
 
 
     <div class="container store-content">
 
-      <div class="row g-5 align-items-center">
 
-        <div class="col-7">
 
-          <img src="./img/violetbeauty/store1.jpg" alt="">
 
+      <div class="row g-5 flex-md-row flex-column align-items-center justify-content-center"
 
+        style="margin-bottom: 50px;">
 
+        <div class="col-md-6 col-12 m-0 p-0">
 
+          <img src="./img/violetbeauty/store1.jpg" alt="" class="store-img01">
 
         </div>
 
-        <div class="col-5">
 
+        <div class="col-md-6 col-12 text-center m-auto py-4 py-md-0">
 
           <h3>紫晴plus+大溪店</h3>
 
-          <img class="Down_line" src="./img/line.png" alt="">
 
-          <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 class="bottom_line"></div>
 
+          <div class="text-start info-box">
 
+            <p><i class="fas fa-map-marker-alt me-3"></i>桃園市大溪區仁善街108-11號
 
+            </p>
 
+            <p><i class="fas fa-phone me-3"></i>03-3808198</p>
 
+            <p><i class="fas fa-clock me-3"></i>10:00-20:00</p>
 
+            <!-- <span class="d-flex">
 
+              <i class="fas fa-solid fa-globe me-3"></i>
 
+              <a href="http://nav.cx/duKKQnC">http://nav.cx/duKKQnC</a>
 
+            </span> -->
 
+            <div class="d-flex flex-sm-row flex-column 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="http://nav.cx/duKKQnC">
 
+                <button class="line_Reserve">
 
+                  LINE 預約 >
 
+                </button>
 
+              </a>
 
+            </div>
 
+          </div>
 
         </div>
 
-        <div class="col-7">
 
+      </div>
 
+
 
+      <div class="row g-5 flex-md-row flex-column align-items-center justify-content-center mt-0">
 
+        <div class="col-md-6 col-12 m-0 p-0">
 
           <img src="./img/violetbeauty/store2.jpg" alt="">
 
         </div>
 
-        <div class="col-5">
 
+        <div class="col-md-6 col-12 text-center m-auto py-4 py-md-0">
 
           <h3>紫晴plus+龍潭店</h3>
 
-          <img class="Down_line" src="./img/line.png" alt="">
 
-          <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 class="bottom_line"></div>
 
+          <div class="text-start info-box">
 
+            <p><i class="fas fa-map-marker-alt me-3"></i>桃園市龍潭區百年路7號
 
+            </p>
 
+            <p><i class="fas fa-phone me-3"></i>03-4700318</p>
 
+            <p><i class="fas fa-clock me-3"></i>10:00-20:00</p>
 
+            <!-- <span class="d-flex">
 
+              <i class="fas fa-solid fa-globe me-3"></i>
 
+              <a href="https://line.me/R/ti/p/%2540qlo9716l">https://line.me/R/ti/p/%2540qlo9716l</a>
 
+            </span> -->
 
+            <div class="d-flex flex-sm-row flex-column 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" href="https://line.me/R/ti/p/%2540qlo9716l">
 
+                <button class="line_Reserve">
 
+                  LINE 預約 >
 
+                </button>
 
+              </a>
 
+            </div>
 
+          </div>
 
         </div>
 
       </div>
 
     </div>
 
 
-    <footer id="footer">
 
+    <footer id="footer-secondary">
 
       <div class="footer_content_box">
 
-        <div class="row">
 
-          <div class="col-md-4">
 
+        <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
 
@@ -114,66 +156,56 @@
 
               <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 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="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 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>
 
               </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">

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