新增課程、門市頁面

.vscode/settings.json

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

css/style.css

@@ -11,7 +11,7 @@
 }
 
 .crown {
-  color: #F7C728;
+  color: #f7c728;
   font-size: 20px;
 }
 
@@ -169,7 +169,7 @@
   font: 1.2rem 微軟正黑體;
   font-weight: 600;
   padding: 0.5rem 1rem;
-  margin: 5px  1rem;
+  margin: 5px 1rem;
   text-align: center;
   color: #ef7086;
   letter-spacing: 0;
@@ -179,6 +179,10 @@
   cursor: pointer;
 }
 
+.navbar-nav .nav-link:hover {
+  opacity: 0.7;
+}
+
 .slick-dotted.slick-slider {
   margin-bottom: 0px !important;
 }
@@ -200,18 +204,18 @@
   font-size: 16px;
   font-weight: 900;
   top: 15px;
-  content: '○';
+  content: "○";
   color: #82689d;
 }
 
 .banner-slide .slick-dots li.slick-active button:before {
-  opacity: .75;
+  opacity: 0.75;
   color: #82689d;
-  content: '●';
+  content: "●";
 }
 
 .violetbeauty_sec00 {
-  background: #F8F2F6;
+  background: #f8f2f6;
   padding: 80px 0;
   position: relative;
 }
@@ -257,32 +261,39 @@
   margin-top: 50px;
 }
 
-.violetbeauty_sec01, .violetbeauty_sec02 {
+.violetbeauty_sec01,
+.violetbeauty_sec02 {
   padding: 50px 0;
 }
 
-.violetbeauty_sec01 .slick-prev:before, .violetbeauty_sec02 .slick-prev:before {
+.violetbeauty_sec01 .slick-prev:before,
+.violetbeauty_sec02 .slick-prev:before {
   content: "";
 }
 
-.violetbeauty_sec01 .slick-next:before, .violetbeauty_sec02 .slick-next:before {
+.violetbeauty_sec01 .slick-next:before,
+.violetbeauty_sec02 .slick-next:before {
   content: "";
 }
 
-.violetbeauty_sec01 .violetbeauty_sec01_box, .violetbeauty_sec02 .violetbeauty_sec01_box {
+.violetbeauty_sec01 .violetbeauty_sec01_box,
+.violetbeauty_sec02 .violetbeauty_sec01_box {
   width: 80%;
   margin: 0 auto;
 }
 
-.violetbeauty_sec01 .violetbeauty_sec01_content, .violetbeauty_sec02 .violetbeauty_sec01_content {
+.violetbeauty_sec01 .violetbeauty_sec01_content,
+.violetbeauty_sec02 .violetbeauty_sec01_content {
   margin-top: 30px;
 }
 
-.violetbeauty_sec01 .violetbeauty_sec01_content .sec01_slide_item, .violetbeauty_sec02 .violetbeauty_sec01_content .sec01_slide_item {
+.violetbeauty_sec01 .violetbeauty_sec01_content .sec01_slide_item,
+.violetbeauty_sec02 .violetbeauty_sec01_content .sec01_slide_item {
   padding: 20px;
 }
 
-.violetbeauty_sec01 .violetbeauty_sec01_content .sec01_slide_item img, .violetbeauty_sec02 .violetbeauty_sec01_content .sec01_slide_item img {
+.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;
@@ -302,7 +313,7 @@
 }
 
 .violetbeauty_sec02 .violetbeauty_sec02_content .violetbeauty_sec02_sub_title {
-  font-family: 'Noto Sans TC', sans-serif;
+  font-family: "Noto Sans TC", sans-serif;
   font-size: 20px;
   font-weight: normal;
   color: #ef7086;
@@ -333,7 +344,7 @@
 
 .violetbeauty_sec02 .violetbeauty_service p {
   margin: 10px 0;
-  font-family: 'Noto Sans TC', sans-serif;
+  font-family: "Noto Sans TC", sans-serif;
   font-size: 16px;
   color: #ef7086;
   display: inline-block;
@@ -400,7 +411,7 @@
   background: #f4c0d0;
   color: #fff;
   font-size: 20px;
-  border-radius: .25rem;
+  border-radius: 0.25rem;
   text-align: center;
   vertical-align: middle;
 }
@@ -411,11 +422,12 @@
   border: 1px solid #f4c0d0;
 }
 
-.violetbeauty_sec03 .violetbeauty_contract_form #time, .violetbeauty_sec03 .violetbeauty_contract_form #datepicker {
+.violetbeauty_sec03 .violetbeauty_contract_form #time,
+.violetbeauty_sec03 .violetbeauty_contract_form #datepicker {
   width: 45%;
   padding: 10px 15px;
   border-radius: 3px;
-  margin: 10px  0px;
+  margin: 10px 0px;
   border: 1px solid rgba(0, 0, 0, 0.3);
 }
 
@@ -449,7 +461,7 @@
 }
 
 #footer {
-  background: #EDCDE1;
+  background: #edcde1;
 }
 
 #footer .footer_content_box {
@@ -503,8 +515,8 @@
   width: 47%;
   padding: 15px 20px;
   background: none;
-  color: #3F51B5;
-  border: 1px solid #3F51B5;
+  color: #3f51b5;
+  border: 1px solid #3f51b5;
   border-radius: 3px;
   -webkit-transition: 0.3s;
   transition: 0.3s;
@@ -513,11 +525,11 @@
 
 #footer .google_map a {
   text-decoration: none;
-  color: #3F51B5;
+  color: #3f51b5;
 }
 
 #footer .google_map:hover {
-  background: #3F51B5;
+  background: #3f51b5;
   color: #fff;
 }
 
@@ -529,8 +541,8 @@
   width: 45%;
   margin-left: 5%;
   padding: 15px 20px;
-  background: #52B448;
-  border: 1px solid #52B448;
+  background: #52b448;
+  border: 1px solid #52b448;
   color: #fff;
   border: none;
   border-radius: 3px;
@@ -546,11 +558,11 @@
 
 #footer .line_Reserve:hover {
   background: #fff;
-  color: #52B448;
+  color: #52b448;
 }
 
 #footer .line_Reserve:hover a {
-  color: #52B448;
+  color: #52b448;
 }
 
 .gototop {
@@ -566,4 +578,256 @@
   background: #f4c0d0;
   cursor: pointer;
 }
+
+/* banner */
+.facial-banner,
+.massage-banner,
+.store-banner {
+  padding: 150px 0;
+  position: relative;
+  background-size: cover;
+  background-repeat: no-repeat;
+  image-rendering: -webkit-optimize-contrast;
+}
+
+.facial-banner p,
+.massage-banner p,
+.store-banner p {
+  position: absolute;
+  right: 50%;
+  -webkit-transform: translate(50%, 50%);
+          transform: translate(50%, 50%);
+  font-size: 40px;
+  color: white;
+  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8);
+}
+
+/* 臉部課程-facial start */
+.facial-banner {
+  background-image: url(/img/banner-facial.jpg);
+  background-position: 25% 25%;
+}
+
+.facial-banner p {
+  bottom: 45%;
+}
+
+.facial-content {
+  margin: 100px auto;
+}
+
+.facial-content p {
+  margin: 0;
+  line-height: 32px;
+}
+
+.facial-content img {
+  height: 250px;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+.facial-content button {
+  display: none;
+  padding: 7px 30px;
+  position: absolute;
+  bottom: -20px;
+  right: 50%;
+  -webkit-transform: translate(50%, 0);
+          transform: translate(50%, 0);
+  color: #ffffff;
+  background-color: #ef7086;
+  white-space: nowrap;
+  font-weight: bold;
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
+}
+
+.facial-content button::after {
+  content: "";
+  display: inline-block;
+  vertical-align: middle;
+  width: 8px;
+  height: 8px;
+  margin: 0 0 2px 10px;
+  border: 1px solid #fff;
+  border-left: 0 none;
+  border-bottom: 0 none;
+  -webkit-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+
+.facial-content button:hover {
+  color: #ffffff;
+  background-color: #f4c0d0;
+}
+
+.facial-content .card {
+  cursor: pointer;
+  border: 1px solid #cccccc;
+}
+
+.facial-content .card .card-body {
+  padding: 10px 20px 20px;
+}
+
+.facial-content .card:hover button {
+  display: block;
+}
+
+.facial-content .card:hover .img-box img {
+  -webkit-transform: scale(1.2, 1.2);
+          transform: scale(1.2, 1.2);
+}
+
+.facial-content .badge {
+  height: 30px;
+  line-height: 1.9;
+  background-color: #ef7086;
+}
+
+.facial-content .img-box {
+  overflow: hidden;
+}
+
+.facial-content .img-box img {
+  -webkit-transition: all 1s;
+  transition: all 1s;
+}
+
+.modal-header {
+  border-bottom: none !important;
+}
+
+.modal-body {
+  letter-spacing: 1px;
+}
+
+.modal-body p {
+  line-height: 32px;
+}
+
+.modal-body h5 {
+  font-size: 25px;
+}
+
+.modal-body img {
+  border-radius: 20px;
+}
+
+.modal-body .price-box span {
+  font-size: 18px;
+  font-weight: bold;
+  color: #ef7086;
+}
+
+.modal-body .price-box span:last-child {
+  font-size: 16px;
+  font-weight: normal;
+  text-decoration: line-through;
+}
+
+.modal-body .recommend-item {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  border-top: 1px dashed #f4c0d0;
+}
+
+.modal-body .recommend-item span {
+  width: 100px;
+  padding: 10px;
+  margin: 25px 0 15px;
+  padding-left: 15px;
+  letter-spacing: 5px;
+  font-size: 16px;
+  color: #ffffff;
+  background-color: #ef7086;
+}
+
+.modal-body .recommend-item li {
+  margin: 5px 0;
+}
+
+.modal-body section {
+  height: 75%;
+}
+
+.time-box img {
+  width: 18px;
+  height: 18px;
+  margin-right: 5px;
+  image-rendering: -webkit-optimize-contrast;
+}
+
+.time-box p {
+  margin: 0;
+  font-size: 14px;
+  color: #ef7086;
+}
+
+.time-box span {
+  font-size: 20px;
+  font-weight: bold;
+}
+
+/* 臉部課程-facial end */
+/* 門市資訊-store start */
+.store-banner {
+  background-image: url(/img/banner-store.jpg);
+  background-position: 25% 30%;
+}
+
+.store-banner p {
+  bottom: 45%;
+}
+
+.store-content {
+  margin: 100px;
+  letter-spacing: 1px;
+}
+
+.store-content h3 {
+  margin-bottom: 20px;
+  font-weight: bold;
+  color: #ef7086;
+}
+
+.store-content img {
+  width: 100%;
+}
+
+.store-content .Down_line {
+  width: 230px;
+  margin-top: -20px;
+}
+
+/* 門市資訊-store end */
+/* 身體課程-massage start */
+.massage-banner {
+  background-image: url(/img/banner-massage.jpg);
+  background-position: center;
+}
+
+.massage-banner p {
+  bottom: 45%;
+}
+
+.massage-modal-item .modal-body .badge {
+  width: auto;
+  padding-left: 13px;
+  letter-spacing: 2px;
+}
+
+/* 身體課程-massage end */
 /*# sourceMappingURL=style.css.map */

css/style.scss

@@ -1,418 +1,403 @@
-*{
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
 
-$maincolor:#ef7086;
-$subcolor:#f4c0d0;
-#top{
-    overflow-x: hidden !important;
+$maincolor: #ef7086;
+$subcolor: #f4c0d0;
+#top {
+  overflow-x: hidden !important;
 }
-.crown{
-color:#F7C728;
-font-size: 20px;
+.crown {
+  color: #f7c728;
+  font-size: 20px;
 }
 .playbutton {
-    cursor: pointer;
-    position:absolute;
-    top:50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    z-index: 101;
-    transition: 0.3s;
-    &:hover{
-        opacity: 0.8;
-    }
+  cursor: pointer;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 101;
+  transition: 0.3s;
+  &:hover {
+    opacity: 0.8;
+  }
 }
 .likeSee__state {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-pack: justify;
-    -ms-flex-pack: justify;
-    justify-content: space-between;
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    align-items: center;
-    img{
-        width: 40px;
-     
-
-    }
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  img {
+    width: 40px;
+  }
 }
-.learn_more{
-    margin-top: 20px;
-    padding: 5px;
-    background: none;
-    color:$subcolor;
-    border-radius: 5px;
-    border:1px solid $subcolor;
-    // border:none;
-    transition: 0.3s;
-    &:hover{
-        color:#fff;
-        background:$subcolor;
-    }
+.learn_more {
+  margin-top: 20px;
+  padding: 5px;
+  background: none;
+  color: $subcolor;
+  border-radius: 5px;
+  border: 1px solid $subcolor;
+  // border:none;
+  transition: 0.3s;
+  &:hover {
+    color: #fff;
+    background: $subcolor;
+  }
 }
-.course_name_title{
-    font-size: 1.2rem;
-    color:$maincolor;
-    font-weight: 900;
+.course_name_title {
+  font-size: 1.2rem;
+  color: $maincolor;
+  font-weight: 900;
 }
-.course_name_text{
-    color:$subcolor;
-    margin-bottom: 5px;
-    font-size: 1rem;
+.course_name_text {
+  color: $subcolor;
+  margin-bottom: 5px;
+  font-size: 1rem;
 }
-.Discounted＿price{
-    font-size: 24px;
-    font-weight: 600;
+.Discounted＿price {
+  font-size: 24px;
+  font-weight: 600;
 }
-.violetbeauty_content_title{
-    color:$maincolor;
-    font-weight: 900;
-    font-size: 1.8rem;
+.violetbeauty_content_title {
+  color: $maincolor;
+  font-weight: 900;
+  font-size: 1.8rem;
 }
-.violetbeauty_content_text{
-    color:$maincolor;
-    font-size: 1rem;
+.violetbeauty_content_text {
+  color: $maincolor;
+  font-size: 1rem;
 }
 
-.features_title{
-    font-weight: 900;
-    letter-spacing: 2px;
-    font: 1.9375em "微軟正黑體";
-    line-height: 25px;
-    text-align: center;
-    color: $maincolor;
-    width: 100%;
-    margin-bottom: 1rem;
-
+.features_title {
+  font-weight: 900;
+  letter-spacing: 2px;
+  font: 1.9375em "微軟正黑體";
+  line-height: 25px;
+  text-align: center;
+  color: $maincolor;
+  width: 100%;
+  margin-bottom: 1rem;
 }
 
-.Down_line{
-    width: 300px;
-    object-fit: cover;
+.Down_line {
+  width: 300px;
+  object-fit: cover;
 }
-.card{
-    border: none;
-    .card-body{
-        padding: 0.1rem;
-        margin-top: 15px;
-    }
+.card {
+  border: none;
+  .card-body {
+    padding: 0.1rem;
+    margin-top: 15px;
+  }
 }
-.violetbeauty_CTA{
-    margin-top: 50px;
-    padding: 10px 50px;
-    border:1px solid $subcolor;
-    background:#fff;
-    border-radius: 30px;
-    color:$maincolor;
-    position: relative;
+.violetbeauty_CTA {
+  margin-top: 50px;
+  padding: 10px 50px;
+  border: 1px solid $subcolor;
+  background: #fff;
+  border-radius: 30px;
+  color: $maincolor;
+  position: relative;
+  transition: 0.5s;
+  a {
+    color: $maincolor;
+  }
+  .cta_flower {
+    position: absolute;
+    width: 60px;
+    left: -25px;
+    bottom: -10px;
     transition: 0.5s;
-    a{
-        color:$maincolor;
-    }
-    .cta_flower{
-        position: absolute;
-        width: 60px;
-        left: -25px;
-        bottom:-10px;
-        transition: 0.5s;
+  }
+  &:hover {
+    background: $maincolor;
+    a {
+      color: #fff;
     }
-    &:hover{
-        background:$maincolor;
-        a{
-            color:#fff;
-        }
-        color:#fff;
-        .cta_flower{
-          
-            transform: rotate(360deg);
-        }
+    color: #fff;
+    .cta_flower {
+      transform: rotate(360deg);
     }
-   
+  }
 }
 .navbar-nav {
-    flex-direction: row;
-    width: 70%;
-    margin: 0 auto;
-    .nav-link {
-        
-        font: 1.2rem 微軟正黑體;
-        font-weight: 600;
-        padding: 0.5rem 1rem;
-        margin:5px  1rem;
-        text-align: center;
-        color: $maincolor;
-        letter-spacing: 0;
-        border-bottom: 5px solid #ffffff;
-        box-sizing: border-box;
-        cursor: pointer;
+  flex-direction: row;
+  width: 70%;
+  margin: 0 auto;
+  .nav-link {
+    font: 1.2rem 微軟正黑體;
+    font-weight: 600;
+    padding: 0.5rem 1rem;
+    margin: 5px 1rem;
+    text-align: center;
+    color: $maincolor;
+    letter-spacing: 0;
+    border-bottom: 5px solid #ffffff;
+    box-sizing: border-box;
+    cursor: pointer;
+    &:hover {
+      opacity: 0.7;
     }
+  }
 }
-.slick-dotted.slick-slider{
-    margin-bottom: 0px !important;
+.slick-dotted.slick-slider {
+  margin-bottom: 0px !important;
 }
 
-.sec_content_right_text{
-    margin-top: 30px;
-    p{
-        margin-bottom: 0.5rem;
-        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: .75;
-            color: #82689d;;
-            content: '●';
-            
-        }
-    }
+.sec_content_right_text {
+  margin-top: 30px;
+  p {
+    margin-bottom: 0.5rem;
+    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: "●";
+    }
+  }
+}
 
+.violetbeauty_sec00 {
+  background: #f8f2f6;
+  padding: 80px 0;
+  position: relative;
+  .sec00_img1 {
+    left: 0px;
+    bottom: 20px;
+    width: 300px;
+    opacity: 0.8;
+  }
 
-.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);
-        
+  .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);
     }
-    .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;
-          
-           
-        }
-
+    .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%;
+.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_sec01_content{
-        margin-top: 30px;
-        .sec01_slide_item{
-            padding: 20px;
-            img{
-                // width: 180px;
-                height: 250px;
-                object-fit: cover;
-                margin: 0 auto;
-            }
-        }
-    }
+  }
 }
 
-.violetbeauty_sec02{
+.violetbeauty_sec02 {
+  background: $subcolor;
+  .card {
     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;
-        
-    //     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{
-    padding: 100px 0;
-    margin-bottom: 50px;
-    position: relative;
-    .sec03_img1{
-        position: absolute;
-        left:50px;
-        top:50px;
-        opacity: 0.5;
-    }
-    .sec03_img2{
-        position: absolute;
-        right:-120px;
-        width: 400px;
-        top:40%;
-        opacity: 0.5;
-        transform: rotate(-70deg);
-    }
-    .sec03_img3{
-        position: absolute;
-        right:0px;
-        opacity: 0.5;
-        width: 250px;
-        bottom: 50px;
-        transform:scaleX(-1) rotate(19deg);
-        -moz-transform:scaleX(-1) rotate(19deg);
-        -webkit-transform:scaleX(-1) rotate(19deg);
-        -o-transform:scaleX(-1) rotate(19deg);
-    }
-    .violetbeauty_sec03_box{
-        width: 75%;
-        margin: 0 auto;
-        .violetbeauty_sec03_content{
+  }
+  .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;
+
+  //     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 {
+  padding: 100px 0;
+  margin-bottom: 50px;
+  position: relative;
+  .sec03_img1 {
+    position: absolute;
+    left: 50px;
+    top: 50px;
+    opacity: 0.5;
+  }
+  .sec03_img2 {
+    position: absolute;
+    right: -120px;
+    width: 400px;
+    top: 40%;
+    opacity: 0.5;
+    transform: rotate(-70deg);
+  }
+  .sec03_img3 {
+    position: absolute;
+    right: 0px;
+    opacity: 0.5;
+    width: 250px;
+    bottom: 50px;
+    transform: scaleX(-1) rotate(19deg);
+    -moz-transform: scaleX(-1) rotate(19deg);
+    -webkit-transform: scaleX(-1) rotate(19deg);
+    -o-transform: scaleX(-1) rotate(19deg);
+  }
+  .violetbeauty_sec03_box {
+    width: 75%;
+    margin: 0 auto;
+    .violetbeauty_sec03_content {
       margin-top: 100px;
-        }
     }
- 
-    .violetbeauty_contract_form{
-   
-        width: 70%;
-        margin: 0 auto;
+  }
 
-        #submitbutton{
-            width: 100%;
-            margin: 16px auto;
-            border: none;
-            padding: 16px 12px;
-            background: $subcolor;
-            color: #fff;
-            font-size: 20px;
-            border-radius: .25rem;
-            text-align: center;
-            vertical-align: middle;
-            &:hover {
-                color: $subcolor;
-                background-color: #fff;
-                border:1px solid $subcolor;
-            }
-        }
-        #time,#datepicker{
-            width: 45%;
-            padding: 10px 15px;
-            border-radius: 3px;
-            margin: 10px  0px;
-            border: 1px solid rgba(0, 0, 0, 0.3);
-        }
-        #time{
-            margin-left: 8%;
-        }
-        #phone,
-        #email,
-        #loc,
-        #name,
-        #course_name {
-            width: 100%;
-            padding: 10px 15px;
-            font-size: 16px;
-            border-radius: 3px;
-            margin: 10px 0px;
-            border: 1px solid rgba(0, 0, 0, 0.3);
-        }
-    }
+  .violetbeauty_contract_form {
+    width: 70%;
+    margin: 0 auto;
 
+    #submitbutton {
+      width: 100%;
+      margin: 16px auto;
+      border: none;
+      padding: 16px 12px;
+      background: $subcolor;
+      color: #fff;
+      font-size: 20px;
+      border-radius: 0.25rem;
+      text-align: center;
+      vertical-align: middle;
+      &:hover {
+        color: $subcolor;
+        background-color: #fff;
+        border: 1px solid $subcolor;
+      }
+    }
+    #time,
+    #datepicker {
+      width: 45%;
+      padding: 10px 15px;
+      border-radius: 3px;
+      margin: 10px 0px;
+      border: 1px solid rgba(0, 0, 0, 0.3);
+    }
+    #time {
+      margin-left: 8%;
+    }
+    #phone,
+    #email,
+    #loc,
+    #name,
+    #course_name {
+      width: 100%;
+      padding: 10px 15px;
+      font-size: 16px;
+      border-radius: 3px;
+      margin: 10px 0px;
+      border: 1px solid rgba(0, 0, 0, 0.3);
+    }
+  }
 }
 // .violetbeauty_sec01{
 //     width: 80%;
@@ -421,12 +406,12 @@ font-size: 20px;
 //         width: 100%;
 //         height: auto;
 //         margin: 17px 0 0 0;
-    
+
 //     }
 //     .violetbeauty_sec01_content{
 //         margin-top: 30px;
 //         .sec01_content_left{
-     
+
 //             width: 85%;
 //             .sec01_content_box{
 //                 margin-top: 20%;
@@ -443,7 +428,7 @@ font-size: 20px;
 //                         letter-spacing: 3px;
 //                         font-weight:600
 //                     }
-                    
+
 //                 }
 //                 .sec01_content_text{
 //                     p{
@@ -460,126 +445,339 @@ font-size: 20px;
 //             }
 //         }
 //     }
-   
+
 // }
 
+.logo {
+  img {
+    width: 300px;
+    // height: 66px;
+    object-fit: cover;
+  }
+}
 
+.violetbeauty_logo {
+  width: 300px;
+  object-fit: cover;
+}
 
-.logo{
-    img{
-        width: 300px;
-        // height: 66px;
-        object-fit: cover;
+#footer {
+  background: #edcde1;
+  .footer_content_box {
+    padding: 100px 0;
+    margin: 0 auto;
+    width: 80%;
+  }
+  h3 {
+    font-size: 1.5rem;
+  }
+  p {
+    margin-bottom: 0.5rem;
+  }
+  .socail-link {
+    a {
+      margin-right: 8px;
+    }
+  }
+  .footer_text {
+    margin-top: 15px;
+  }
+  .socail-link {
+    margin-top: 30px;
+  }
+  .store_name {
+    color: $maincolor;
+  }
+  .store {
+    width: 85%;
+    margin: 0 auto;
+    p {
+      margin-top: 10px;
+    }
+  }
+  .footer_logo {
+    img {
+      position: relative;
+      right: 30px;
+      width: 300px;
+      object-fit: cover;
+    }
+  }
+  .google_map {
+    width: 47%;
+    padding: 15px 20px;
+    background: none;
+    color: #3f51b5;
+    border: 1px solid #3f51b5;
+    border-radius: 3px;
+    transition: 0.3s;
+    overflow-x: hidden;
+    a {
+      text-decoration: none;
+      color: #3f51b5;
+    }
+    &:hover {
+      background: #3f51b5;
+      color: #fff;
+      a {
+        color: #fff;
+      }
+    }
+  }
+  .line_Reserve {
+    width: 45%;
+    margin-left: 5%;
+    padding: 15px 20px;
+    background: #52b448;
+    border: 1px solid #52b448;
+    color: #fff;
+    border: none;
+    border-radius: 3px;
+    transition: 0.3s;
+    overflow-x: hidden;
+    a {
+      color: #fff;
+      text-decoration: none;
+    }
+    &:hover {
+      background: #fff;
+      color: #52b448;
+      a {
+        color: #52b448;
+      }
+    }
+  }
+}
 
-    }
+.gototop {
+  position: fixed;
+  right: 3vw;
+  bottom: 0.5vw;
+  z-index: 10;
+  border-radius: 80px;
+  font-size: 32px;
+  color: #fff;
+  width: 50px;
+  height: 50px;
+  background: $subcolor;
+  cursor: pointer;
 }
 
-.violetbeauty_logo{
-    width: 300px;
+/* banner */
+
+.facial-banner,
+.massage-banner,
+.store-banner {
+  padding: 150px 0;
+  position: relative;
+  background-size: cover;
+  background-repeat: no-repeat;
+  image-rendering: -webkit-optimize-contrast;
+  p {
+    position: absolute;
+    right: 50%;
+    transform: translate(50%, 50%);
+    font-size: 40px;
+    color: white;
+    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8);
+  }
+}
+
+/* 臉部課程-facial start */
+
+.facial-banner {
+  background-image: url(/img/banner-facial.jpg);
+  background-position: 25% 25%;
+  p {
+    bottom: 45%;
+  }
+}
+
+.facial-content {
+  margin: 100px auto;
+  p {
+    margin: 0;
+    line-height: 32px;
+  }
+  img {
+    height: 250px;
     object-fit: cover;
+  }
+  button {
+    display: none;
+    padding: 7px 30px;
+    position: absolute;
+    bottom: -20px;
+    right: 50%;
+    transform: translate(50%, 0);
+    color: #ffffff;
+    background-color: $maincolor;
+    white-space: nowrap;
+    font-weight: bold;
+    transition: all 0.3s;
+    &::after {
+      content: "";
+      display: inline-block;
+      vertical-align: middle;
+      width: 8px;
+      height: 8px;
+      margin: 0 0 2px 10px;
+      border: 1px solid #fff;
+      border-left: 0 none;
+      border-bottom: 0 none;
+      -moz-transform: rotate(45deg);
+      -ms-transform: rotate(45deg);
+      -webkit-transform: rotate(45deg);
+      transform: rotate(45deg);
+    }
+    &:hover {
+      color: #ffffff;
+      background-color: $subcolor;
+    }
+  }
+  .card {
+    cursor: pointer;
+    border: 1px solid #cccccc;
+    .card-body {
+      padding: 10px 20px 20px;
+    }
+    &:hover {
+      button {
+        display: block;
+      }
+      .img-box img {
+        transform: scale(1.2, 1.2);
+      }
+    }
+  }
+  .badge {
+    height: 30px;
+    line-height: 1.9;
+    background-color: $maincolor;
+  }
+  .img-box {
+    overflow: hidden;
+    img {
+      transition: all 1s;
+    }
+  }
 }
 
-#footer{
-    background:#EDCDE1;
-    .footer_content_box{
-        padding: 100px 0;
-        margin: 0 auto;
-        width: 80%;
-    }
-    h3{
-        font-size: 1.5rem;
-    }
-    p{
-        margin-bottom: 0.5rem;
-    }
-    .socail-link{
-        a{
-           margin-right: 8px;
-        }
-    }
-    .footer_text{
-        margin-top: 15px;
-    }
-    .socail-link{
-        margin-top: 30px;
-    }
-    .store_name{
-        color:$maincolor;
-    }
-    .store{
-        width: 85%;
-        margin: 0 auto;
-        p{
-            margin-top: 10px;
-        }
-    }
-    .footer_logo{
-        img{
-            position: relative;
-            right:30px;
-            width: 300px;
-            object-fit: cover;
-        }
-    }
-    .google_map{
-        width: 47%;
-        padding: 15px 20px;
-        background: none;
-        color:#3F51B5;
-        border:1px solid #3F51B5;
-        border-radius: 3px;
-        transition: 0.3s;
-        overflow-x: hidden;
-        a{
-            text-decoration: none;
-            color:#3F51B5;
-        }
-        &:hover{
-            background: #3F51B5;
-            color:#fff;
-            a{
-                
-                color:#fff;
-            }
-        }
-    }
-    .line_Reserve{
-        width: 45%;
-        margin-left: 5%;
-        padding: 15px 20px;
-        background: #52B448;
-        border:1px solid #52B448;
-        color:#fff;
-        border: none;
-        border-radius: 3px;
-        transition: 0.3s;
-        overflow-x: hidden;
-        a{
-            color:#fff;
-            text-decoration: none;
-        }
-        &:hover{
-            background: #fff;
-            color:#52B448;
-            a{
-                
-                color:#52B448;
-            }
-        }
+.modal-header {
+  border-bottom: none !important;
+}
+
+.modal-body {
+  letter-spacing: 1px;
+  p {
+    line-height: 32px;
+  }
+  h5 {
+    font-size: 25px;
+  }
+  img {
+    border-radius: 20px;
+  }
+  .price-box span {
+    font-size: 18px;
+    font-weight: bold;
+    color: $maincolor;
+    &:last-child {
+      font-size: 16px;
+      font-weight: normal;
+      text-decoration: line-through;
     }
+  }
+  .recommend-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border-top: 1px dashed $subcolor;
+    span {
+      width: 100px;
+      padding: 10px;
+      margin: 25px 0 15px;
+      padding-left: 15px;
+      letter-spacing: 5px;
+      font-size: 16px;
+      color: #ffffff;
+      background-color: $maincolor;
+    }
+    li {
+      margin: 5px 0;
+    }
+  }
+  section {
+    height: 75%;
+  }
 }
 
-.gototop {
-    position: fixed;
-    right: 3vw;
-    bottom: 0.5vw;
-    z-index: 10;
-    border-radius: 80px;
-    font-size: 32px;
-    color:#fff;
-    width: 50px;
-    height: 50px;
-    background: $subcolor;
-    cursor: pointer;
-   
-}
+.time-box {
+  img {
+    width: 18px;
+    height: 18px;
+    margin-right: 5px;
+    image-rendering: -webkit-optimize-contrast;
+  }
+  p {
+    margin: 0;
+    font-size: 14px;
+    color: $maincolor;
+  }
+  span {
+    font-size: 20px;
+    font-weight: bold;
+  }
+}
+
+/* 臉部課程-facial end */
+
+/* 門市資訊-store start */
+
+.store-banner {
+  background-image: url(/img/banner-store.jpg);
+  background-position: 25% 30%;
+  p {
+    bottom: 45%;
+  }
+}
+
+.store-content {
+  margin: 100px;
+  letter-spacing: 1px;
+  h3 {
+    margin-bottom: 20px;
+    font-weight: bold;
+    color: $maincolor;
+  }
+  img {
+    width: 100%;
+  }
+  .Down_line {
+    width: 230px;
+    margin-top: -20px;
+  }
+}
+
+/* 門市資訊-store end */
+
+/* 身體課程-massage start */
+
+.massage-banner {
+  background-image: url(/img/banner-massage.jpg);
+  background-position: center;
+  p {
+    bottom: 45%;
+  }
+}
+
+.massage-modal-item {
+  .modal-body .badge {
+    width: auto;
+    padding-left: 13px;
+    letter-spacing: 2px;
+  }
+}
+
+/* 身體課程-massage end */

facial.html

@@ -0,0 +1,229 @@
+<!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">
+
+  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+</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="" 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="" 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="facial-banner">
+      <!-- <img class="img-fluid" src="https://upload.cc/i1/2022/04/25/GThvcm.jpg" alt=""> -->
+      <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 facial-content">
+      <div class="row g-5 facial-content-item">
+        <!-- forLoop -->
+      </div>
+    </div>
+
+    <div class="facial-modal">
+      <!-- forLoop -->
+    </div>
+
+    <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>
+        </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>

facial.json

@@ -0,0 +1,106 @@
+[
+  {
+    "title": "維生素育膚課程",
+    "description": "維生素育膚術，打造的個人肌膚養護。有效智慧深層補水，讓皮膚所需的養分迅速吸收無負擔，讓肌膚充滿活力。",
+    "time": "50",
+    "price": "800",
+    "originalPrice": "1,200",
+    "recommend": "<ul><li>螨蟲肌膚、毛孔粗大</li><li>皮膚粗糙、凹疤多難清潔</li><li>針對咀嚼肌龐大</li><li>不自覺皺眉、法令紋深</li><li>皮膚代謝差</li></ul>"
+  },
+  {
+    "title": "二倍氧修護課程",
+    "description": "鎖水保濕，調理肌膚紋路，展現肌膚自然光澤。以一分鐘導入10公斤的氧氣順帶注入安瓶，讓保濕精華直達基底，立即為肌膚補充水份，使皮膚光滑細緻，充滿年輕光采。",
+    "time": "75",
+    "price": "1,600",
+    "originalPrice": "3,600",
+    "recommend": "<ul><li>螨蟲肌膚、毛孔粗大</li><li>皮膚粗糙、凹疤多難清潔</li><li>針對咀嚼肌龐大</li><li>不自覺皺眉、法令紋深</li><li>皮膚代謝差</li></ul>"
+  },
+  {
+    "title": "水行俠氫淨課程",
+    "description": "日本最夯氫氣洗潔臉部，抗氧化中和自由基，延緩肌膚老化。調理毛孔粗大，減少油脂分泌，加速粉刺與痘痘代謝，使皮膚充滿光澤，不粗造。",
+    "time": "75",
+    "price": "1,800",
+    "originalPrice": "6,600",
+    "recommend": "<ul><li>螨蟲肌膚、毛孔粗大</li><li>皮膚粗糙、凹疤多難清潔</li><li>針對咀嚼肌龐大</li><li>不自覺皺眉、法令紋深</li><li>皮膚代謝差</li></ul>"
+  },
+  {
+    "title": "粉刺淨化課程",
+    "description": "調整肌膚紋裡還原透亮，獨家清粉刺技術，用特殊的產品讓粉刺自動上浮，以自然柔軟的手法輕柔挑除，不破壞毛孔，讓粉刺清潔溜溜。",
+    "time": "60",
+    "price": "1,200",
+    "originalPrice": "1,600",
+    "recommend": "<ul><li>螨蟲肌膚、毛孔粗大</li><li>皮膚粗糙、凹疤多難清潔</li><li>針對咀嚼肌龐大</li><li>不自覺皺眉、法令紋深</li><li>皮膚代謝差</li></ul>"
+  },
+  {
+    "title": "極效四合一課程",
+    "description": "為本店招牌課程，結合二倍氧將皮膚充滿氧氣與養份，搭配韓國儀器刺激膠原增生達到毛孔細緻化的功效，做好完整保濕，肌膚就能柔軟、有彈性、明亮有光澤。",
+    "time": "90",
+    "price": "1,800",
+    "originalPrice": "6,800",
+    "recommend": "<ul><li>螨蟲肌膚、毛孔粗大</li><li>皮膚粗糙、凹疤多難清潔</li><li>針對咀嚼肌龐大</li><li>不自覺皺眉、法令紋深</li><li>皮膚代謝差</li></ul>"
+  },
+  {
+    "title": "極效淨白課程",
+    "description": "冷凍傳導是一種高科技的儀器運用電子冷熱半導體，使探頭前方能持續保持-15℃的低溫。能夠收縮毛孔、舒緩日曬後曬傷的肌膚、鎮定安撫肌膚、增加保養品的吸收效率、平衡肌膚油脂！",
+    "time": "75",
+    "price": "1,600",
+    "originalPrice": "3,600",
+    "recommend": "<ul><li>螨蟲肌膚、毛孔粗大</li><li>皮膚粗糙、凹疤多難清潔</li><li>針對咀嚼肌龐大</li><li>不自覺皺眉、法令紋深</li><li>皮膚代謝差</li></ul>"
+  },
+  {
+    "title": "幹細胞淡斑課程",
+    "description": "針對暗沉肌膚者特別研發有效抑制酪胺酸酶活性，減少黑色素形成及明亮均勻膚色，賦予肌膚白皙光澤，具備美白淡斑作用！",
+    "time": "75",
+    "price": "1,600",
+    "originalPrice": "3,600",
+    "recommend": "<ul><li>螨蟲肌膚、毛孔粗大</li><li>皮膚粗糙、凹疤多難清潔</li><li>針對咀嚼肌龐大</li><li>不自覺皺眉、法令紋深</li><li>皮膚代謝差</li></ul>"
+  },
+  {
+    "title": "液態皮秒課程",
+    "description": "由少女時代韓國皮膚管理師發明，能改善痘印、色素沈澱，刺激膠原蛋白增生、撫平肌膚，活化膚質狀況，自然光澤細緻感，上妝能更服貼，改善細紋斑點、蠟黃暗沉，拉提緊緻。",
+    "time": "60",
+    "price": "2,200",
+    "originalPrice": "8,800",
+    "recommend": "<ul><li>螨蟲肌膚、毛孔粗大</li><li>皮膚粗糙、凹疤多難清潔</li><li>針對咀嚼肌龐大</li><li>不自覺皺眉、法令紋深</li><li>皮膚代謝差</li></ul>"
+  },
+  {
+    "title": "淨妍晶靈課程",
+    "description": "使用晶靈磁石客製化精油深入肌底，成功改造循環，強化肌膚防禦、深層鎖定，徹底突破黑色素無限循環，讓黑！銷聲匿跡，回復健康肌膚。",
+    "time": "50",
+    "price": "1,499",
+    "originalPrice": "4,800",
+    "recommend": "<ul><li>螨蟲肌膚、毛孔粗大</li><li>皮膚粗糙、凹疤多難清潔</li><li>針對咀嚼肌龐大</li><li>不自覺皺眉、法令紋深</li><li>皮膚代謝差</li></ul>"
+  },
+  {
+    "title": "熱麻吉提拉課程",
+    "description": "使用獨家皇后拉提SPA霜，搭配熱麻吉儀，瞬間啟動筋膜層，刺激真皮層分泌更多新生膠原蛋白，填補鬆垮，紋路的空缺，激活肌膚深層支架，達到緊緻逆齡的功效。",
+    "time": "80",
+    "price": "2,200",
+    "originalPrice": "8,800",
+    "recommend": "<ul><li>螨蟲肌膚、毛孔粗大</li><li>皮膚粗糙、凹疤多難清潔</li><li>針對咀嚼肌龐大</li><li>不自覺皺眉、法令紋深</li><li>皮膚代謝差</li></ul>"
+  },
+  {
+    "title": "黃金亮眼課程",
+    "description": "獨家眼部磁力棒按摩手法，達到眼部減壓，減緩浮腫並緊緻眼部肌肉，客製化的眼部精華，讓疲倦的雙眼舒緩解除緊繃。",
+    "time": "30",
+    "price": "699",
+    "originalPrice": "1,800",
+    "recommend": "<ul><li>螨蟲肌膚、毛孔粗大</li><li>皮膚粗糙、凹疤多難清潔</li><li>針對咀嚼肌龐大</li><li>不自覺皺眉、法令紋深</li><li>皮膚代謝差</li></ul>"
+  },
+  {
+    "title": "虹鑽黑晶煥顏課程",
+    "description": "含有海綿微針晶體,放在皮膚上按摩，可以在數秒之內進入皮膚真皮層，改善膠原蛋白和彈力蛋白，對皮膚的油脂也有吸附性的改善。",
+    "time": "120",
+    "price": "3,999",
+    "originalPrice": "8,800",
+    "recommend": "<ul><li>青春痘、粉刺、毛孔粗大、痘疤</li><li>肌膚粗糙、皮膚色素不均</li><li>老化肌膚、黑斑</li></ul>"
+  },
+  {
+    "title": "小氣泡水嫩課程",
+    "description": "用納米級的水氣泡，真空負壓原理，形成真空迴路，可吸附皮膚髒污，將淺層粉刺無痛清除！",
+    "time": "70",
+    "price": "1,699",
+    "originalPrice": "6,600",
+    "recommend": "<ul><li>螨蟲肌膚、毛孔粗大</li><li>皮膚粗糙、凹疤多難清潔</li><li>針對咀嚼肌龐大</li><li>不自覺皺眉、法令紋深</li><li>皮膚代謝差</li></ul>"
+  }
+]

js/index.js

@@ -141,8 +141,235 @@ $(".learn_more").click(function () {
         }
         $('.modal-body').html(CourseContent);
       }
+    });
+});
 
 
-    });
+// facial.html
+
+$.ajax({
+  type: "GET",
+  url: "facial.json",
+  dataType: "json",
+  success: function (res) {
+    let facialList = [];
+    let facialModalList = [];
+    for (let i = 0; i < res.length; i++) {
+      let facialCardContent = `
+      <div class="col-12 col-md-6 col-lg-4">
+          <div class="card h-100">
+            <div class="img-box">
+              <img src="./img/violetbeauty/karelys-ruiz-PqyzuzFiQfY-unsplash.png" class="card-img-top" alt="...">
+            </div>
+            <div class="card-body">
+              <div class="d-flex justify-content-between">
+                <h5 class="badge">臉部課程</h5>
+                <div class="d-flex align-items-center time-box">
+                  <img src="./img/icon-time.png" alt="">
+                  <p><span>${res[i].time}</span>分鐘</p>
+                </div>
+              </div>
+              <h5 class="card-title fw-bold my-3">${res[i].title}</h5>
+              <p class="card-text">${res[i].description}</p>
+            </div>
+            <button type="button" class="btn" data-bs-toggle="modal" data-bs-target="#facial_modal_${i + 1}">
+              了解課程
+            </button>
+          </div>
+        </div>`;
+
+      let facialModalContent = `
+      <div class="modal fade" id="facial_modal_${i + 1}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
+      <div class="modal-dialog modal-dialog-centered modal-xl">
+        <div class="modal-content">
+          <div class="modal-header">
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          </div>
+          <div class="modal-body m-3 m-xl-5 mb-2 mb-lg-5">
+            <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%;">
+                </div>
+                <div class="col-12 col-lg-5 px-3 px-xl-5">
+                  <h5 class="fw-bold my-3">${res[i].title}</h5>
+                  <div class="d-flex justify-content-between my-4">
+                    <div class="d-flex flex-column price-box">
+                      <span>體驗價 $${res[i].price}</span>
+                      <span>原價 $${res[i].originalPrice}</span>
+                    </div>
+                    <div class="d-flex align-items-center time-box">
+                      <img src="./img/icon-time.png" alt="">
+                      <p><span>${res[i].time}</span>分鐘</p>
+                    </div>
+                  </div>
+                  <section class="d-flex flex-column justify-content-between">
+                    <p>${res[i].description}</p>
+                    <div class="recommend-item">
+                      <span class="badge">推薦</span>
+                      ${res[i].recommend}
+                    </div>
+                  </section>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>`;
+
+      facialList.push(facialCardContent);
+      facialModalList.push(facialModalContent);
+      $('.facial-content-item').html(facialList);
+      $('.facial-modal').html(facialModalList);
+    }
+  },
+  error: function (err) {
+    console.log('err', err);
+  }
+});
+
+// massage.html
 
+$.ajax({
+  type: "GET",
+  url: "massage.json",
+  dataType: "json",
+  success: (res) => {
+    let massageList = [];
+    let massageModalList = [];
+    let contentList = [
+      `<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="...">
+          </div>
+          <div class="card-body">
+            <div class="d-flex justify-content-between">
+              <h5 class="badge">身體課程</h5>
+              <div class="d-flex align-items-center time-box">
+                <img src="./img/icon-time.png" alt="">
+                <p><span>60</span>分鐘／<span>120</span>分鐘</p>
+              </div>
+            </div>
+            <h5 class="card-title fw-bold my-3">波動舒活經絡課程</h5>
+            <p class="card-text">久坐、久站或長期的姿勢不良，讓妳經常腰酸背痛嗎？手技搭配儀器，不再是單純肌肉放鬆，針對氣血循環，功力深厚的技巧，專業的儀器走向，完全放鬆你的身心靈。</p>
+          </div>
+          <button type="button" class="btn" data-bs-toggle="modal" data-bs-target="#massageModal_1">
+            了解課程
+          </button>
+        </div>
+      </div>`,
+      `<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="...">
+          </div>
+          <div class="card-body">
+            <div class="d-flex justify-content-between">
+              <h5 class="badge">身體課程</h5>
+              <div class="d-flex align-items-center time-box">
+                <img src="./img/icon-time.png" alt="">
+                <p><span>40</span>分鐘／<span>60</span>分鐘／<span>80</span>分鐘</p>
+              </div>
+            </div>
+              <h5 class="card-title fw-bold my-3">五行氣穴課程</h5>
+              <p class="card-text">藉由中醫理論五行學說，透過美容師手勁與技巧將阻塞處舒展，達到通筋通便活絡氣血效應，達到陰陽流暢，全程手技，使用原始原點精油，刺激身體各部位穴點，與一般經絡按摩較不同！愛按摩的你絕不能錯過。</p>
+            </div>
+            <button type="button" class="btn" data-bs-toggle="modal" data-bs-target="#massageModal_2">
+              了解課程
+            </button>
+          </div>
+      </div>`,
+      `<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="...">
+          </div>
+          <div class="card-body">
+            <h5 class="badge">身體課程</h5>
+            <h5 class="card-title fw-bold my-3">半永久熱蠟除毛</h5>
+            <p class="card-text">擾人的毛髮交給我們，容易悶熱滋生細菌造成異味，妳的救星！熱蠟是所有技術中最低疼痛感，能讓毛髮生長延緩，達到重生毛髮越來越細軟，甚至無毛。</p>
+          </div>
+          <button type="button" class="btn" data-bs-toggle="modal" data-bs-target="#massageModal_3">
+            了解課程
+          </button>
+        </div>
+      </div>`];
+    for (let i = 0; i < res.length; i++) {
+      let massageCardContent = `
+      <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="...">
+          </div>
+          <div class="card-body">
+            <div class="d-flex justify-content-between">
+              <h5 class="badge">身體課程</h5>
+              <div class="d-flex align-items-center time-box">
+                <img src="./img/icon-time.png" alt="">
+                <p><span>${res[i].time}</span>分鐘</p>
+              </div>
+            </div>
+            <h5 class="card-title fw-bold my-3">${res[i].title}</h5>
+            <p class="card-text">${res[i].description}</p>
+          </div>
+          <button type="button" class="btn" data-bs-toggle="modal" data-bs-target="#massage_modal_${i + 1}">
+            了解課程
+          </button>
+        </div>
+      </div>`;
+
+      let massageModalContent = `
+      <div class="modal fade" id="massage_modal_${i + 1}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered modal-xl">
+          <div class="modal-content">
+            <div class="modal-header">
+              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body m-3 mb-2 mb-lg-5">
+              <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%;">
+                  </div>
+                  <div class="col-12 col-lg-5 px-3 px-xl-5">
+                    <h5 class="fw-bold my-3">${res[i].title}</h5>
+                    <div class="d-flex justify-content-between my-4">
+                      <div class="d-flex flex-column price-box">
+                        <span>體驗價 $${res[i].price}</span>
+                        <span>原價 $${res[i].originalPrice}</span>
+                      </div>
+                      <div class="d-flex align-items-center time-box">
+                        <img src="./img/icon-time.png" alt="">
+                        <p><span>${res[i].time}</span>分鐘</p>
+                      </div>
+                    </div>
+                    <section class="d-flex flex-column justify-content-between">
+                      <p>${res[i].description}</p>
+                      <div class="recommend-item">
+                        <span class="badge">推薦</span>
+                        ${res[i].recommend}
+                      </div>
+                    </section>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>`;
+
+      massageList.push(massageCardContent);
+      massageModalList.push(massageModalContent);
+      // 合併陣列
+      const massageArray = contentList.concat(massageList);
+
+      $('.massage-content-item').html(massageArray);
+      $('.massage-modal').html(massageModalList);
+    }
+  },
+  error: function (err) {
+    console.log('err', err);
+  }
 });

massage.html

@@ -0,0 +1,407 @@
+<!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="" 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="massage-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 facial-content">
+      <div class="row g-5 massage-content-item">
+        <!-- forLoop -->
+      </div>
+    </div>
+
+    <!-- Modal -->
+
+    <div class="modal fade massage-modal-item" id="massageModal_1" tabindex="-1" aria-labelledby="exampleModalLabel"
+      aria-hidden="true">
+      <div class="modal-dialog modal-dialog-centered modal-xl">
+        <div class="modal-content">
+          <div class="modal-header">
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          </div>
+          <div class="modal-body m-3 mb-2 mb-lg-5">
+            <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%;">
+                </div>
+                <div class="col-12 col-lg-5 px-3 px-xl-5">
+                  <h5 class="fw-bold my-3">波動舒活經絡課程</h5>
+                  <p class="mb-2">課程分為：</p>
+                  <div class="d-flex justify-content-between">
+                    <div class="d-flex flex-column price-box">
+                      <p class="m-0 fw-bold">① 波動舒活背部</p>
+                      <span>體驗價 $1,200</span>
+                      <span>原價 $3,600</span>
+                    </div>
+                    <div class="d-flex align-items-center time-box">
+                      <img src="./img/icon-time.png" alt="">
+                      <p><span>60</span>分鐘</p>
+                    </div>
+                  </div>
+                  <div class="d-flex justify-content-between my-3">
+                    <div class="d-flex flex-column price-box">
+                      <p class="m-0 fw-bold">② 波動舒活全背</p>
+                      <span>體驗價 $1,800</span>
+                      <span>原價 $8,800</span>
+                    </div>
+                    <div class="d-flex align-items-center time-box">
+                      <img src="./img/icon-time.png" alt="">
+                      <p><span>120</span>分鐘</p>
+                    </div>
+                  </div>
+                  <section class="d-flex flex-column justify-content-between">
+                    <p>久坐、久站或長期的姿勢不良，讓妳經常腰酸背痛嗎？手技搭配儀器，不再是單純肌肉放鬆，針對氣血循環，功力深厚的技巧，專業的儀器走向，完全放鬆你的身心靈。</p>
+                    <div class="recommend-item">
+                      <span class="badge">適合有這樣困擾的你</span>
+                      <ul>
+                        <li>久站久坐生活忙碌的人</li>
+                        <li>經常疲勞提不起精神</li>
+                        <li>經常肩頸不適、腰痠背痛</li>
+                        <li>身體水腫不易代謝</li>
+                        <li>工作壓力大，平時睡眠品質不佳</li>
+                      </ul>
+                    </div>
+                  </section>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="modal fade massage-modal-item" id="massageModal_2" tabindex="-1" aria-labelledby="exampleModalLabel"
+      aria-hidden="true">
+      <div class="modal-dialog modal-dialog-centered modal-xl">
+        <div class="modal-content">
+          <div class="modal-header">
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          </div>
+          <div class="modal-body mb-2 mb-lg-4">
+            <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%;">
+                </div>
+                <div class="col-12 col-lg-5 px-3 px-xl-5">
+                  <h5 class="fw-bold my-3">五行氣穴課程</h5>
+                  <p class="mb-2">課程分為：</p>
+                  <div class="d-flex justify-content-between">
+                    <div class="d-flex flex-column price-box">
+                      <p class="m-0 fw-bold">① 五行氣穴背部</p>
+                      <span>體驗價 $1,288</span>
+                      <span>原價 $4,400</span>
+                    </div>
+                    <div class="d-flex align-items-center time-box">
+                      <img src="./img/icon-time.png" alt="">
+                      <p><span>40</span>分鐘</p>
+                    </div>
+                  </div>
+                  <div class="d-flex justify-content-between my-3">
+                    <div class="d-flex flex-column price-box">
+                      <p class="m-0 fw-bold">② 五行氣穴全背</p>
+                      <span>體驗價 $1,800</span>
+                      <span>原價 $6,600</span>
+                    </div>
+                    <div class="d-flex align-items-center time-box">
+                      <img src="./img/icon-time.png" alt="">
+                      <p><span>60</span>分鐘</p>
+                    </div>
+                  </div>
+                  <div class="d-flex justify-content-between my-3">
+                    <div class="d-flex flex-column price-box">
+                      <p class="m-0 fw-bold">③ 五行氣穴全身</p>
+                      <span>體驗價 $2,200</span>
+                      <span>原價 $8,800</span>
+                    </div>
+                    <div class="d-flex align-items-center time-box">
+                      <img src="./img/icon-time.png" alt="">
+                      <p><span>80</span>分鐘</p>
+                    </div>
+                  </div>
+                  <section class="d-flex flex-column justify-content-between">
+                    <p>久坐、久站或長期的姿勢不良，讓妳經常腰酸背痛嗎？手技搭配儀器，不再是單純肌肉放鬆，針對氣血循環，功力深厚的技巧，專業的儀器走向，完全放鬆你的身心靈。</p>
+                    <div class="recommend-item">
+                      <span class="badge">適合有這樣困擾的你</span>
+                      <ul>
+                        <li>不喜歡使用儀器</li>
+                        <li>有三高，時常頭痛身體不適</li>
+                        <li>姿勢不良、腰痠背痛</li>
+                        <li>身體水腫不易代謝</li>
+                        <li>工作壓力大，平時睡眠品質不佳</li>
+                      </ul>
+                    </div>
+                  </section>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="modal fade massage-modal-item" id="massageModal_3" tabindex="-1" aria-labelledby="exampleModalLabel"
+      aria-hidden="true">
+      <div class="modal-dialog modal-dialog-centered modal-xl">
+        <div class="modal-content">
+          <div class="modal-header">
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          </div>
+          <div class="modal-body m-3 mb-2 mb-lg-5">
+            <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%;">
+                </div>
+                <div class="col-12 col-lg-5 px-3 px-xl-5">
+                  <h5 class="fw-bold my-3">半永久熱蠟除毛</h5>
+                  <p class="mb-2">課程分為：</p>
+                  <div class="d-flex justify-content-between">
+                    <div class="d-flex flex-column price-box">
+                      <p class="m-0 fw-bold">① 腋下熱蠟除毛</p>
+                      <span>體驗價 $699</span>
+                      <span>原價 $800</span>
+                    </div>
+                  </div>
+                  <div class="d-flex justify-content-between my-3">
+                    <div class="d-flex flex-column price-box">
+                      <p class="m-0 fw-bold">② 雙腿熱蠟除毛</p>
+                      <span>體驗價 $3,000</span>
+                      <span>原價 $5,800</span>
+                    </div>
+                  </div>
+                  <section class="d-flex flex-column justify-content-between">
+                    <p>擾人的毛髮交給我們，容易悶熱滋生細菌造成異味，妳的救星！熱蠟是所有技術中最低疼痛感，能讓毛髮生長延緩，達到重生毛髮越來越細軟，甚至無毛。</p>
+                    <div class="recommend-item">
+                      <span class="badge">適合有這樣困擾的你</span>
+                      <ul>
+                        <li>私密處異味，容易感染的人</li>
+                        <li>毛髮過於旺盛，容易卡味道的人</li>
+                        <li>毛髮過長，不美觀，影響生活的人</li>
+                        <li>伴侶不喜歡你身上的毛髮的人</li>
+                        <li>要準備去海邊的穿比基尼的人</li>
+                      </ul>
+                    </div>
+                  </section>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+
+    <div class="massage-modal">
+      <!-- forLoop -->
+    </div>
+
+
+    <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>
+        </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>

massage.json

@@ -0,0 +1,74 @@
+[
+  {
+    "title": "頂輪頭部紓壓課程",
+    "description": "頭部減壓、活力補氧、防止腦退化、溫熱微循環，柔潤的雙手輕撫妳緊繃的頭部壓力與神經，增進記憶力，舒緩您頭部的不適及壓力。",
+    "time": "15",
+    "price": "599",
+    "originalPrice": "1,200",
+    "recommend": "<ul><li>臉部缺氧性暗沉</li><li>容易頭痛、頭脹、頭皮水腫</li><li>長期面對電腦、姿勢不良者</li><li>有肩頸痠痛困擾、容易精神緊繃</li></ul>"
+  },
+  {
+    "title": "肩頸氣穴護理課程",
+    "description": "長期維持同一姿勢時，會讓肩頸氣血不通，而鬱結的氣結就會堆積在肩頸的位置，適時按壓肩井穴有助排解氣結。肩頸疏鬆，使放鬆心情、達到抒解壓力的功效。",
+    "time": "20",
+    "price": "699",
+    "originalPrice": "1,200",
+    "recommend": "<ul><li>姿勢不良，有五十肩</li><li>容易肩頸痠痛，緊繃</li><li>長期面對電腦、姿勢不良者</li><li>有肩頸痠痛困擾、容易精神緊繃</li></ul>"
+  },
+  {
+    "title": "晶靈好手氣課程",
+    "description": "好手氣透過獨家晶靈磁石按摩手法，讓您的手臂加速循環，能舒緩手的緊繃感，使手臂線條柔順，讓你感到放鬆。",
+    "time": "20",
+    "price": "699",
+    "originalPrice": "3,600",
+    "recommend": "<ul><li>容易手麻、手部循環不佳</li><li>肩頸背酸痛、五十肩、水牛肩</li><li>腋下容易腫漲、淋巴阻塞</li><li>調理上胸腔呼吸系統</li></ul>"
+  },
+  {
+    "title": "森呼吸上胸護理",
+    "description": "針對上呼吸道、氣短、胸悶上胸部脹，獨家的按摩技術，讓您不再常常嘆氣，讓您心胸自在深呼吸。",
+    "time": "30",
+    "price": "999",
+    "originalPrice": "2,000",
+    "recommend": "<ul><li>長期坐辦公室，有駝背習慣</li><li>心肺功能變差、氣喘、呼吸系統過敏</li><li>經常胸悶、喘不過氣</li><li>經常莫名咳嗽卻不知道原因</li></ul>"
+  },
+  {
+    "title": "胸腺調理課程",
+    "description": "專業人員檢測您的胸腺、乳房，獨家的手法，調節您胸腺循環、提升身體保護能力，使你您的心胸豁然開朗。",
+    "time": "40",
+    "price": "1,600",
+    "originalPrice": "3,600",
+    "recommend": "<ul><li>長期穿有鋼圈、較緊的內衣</li><li>經期前後會有腫、脹、痛的現象</li><li>沒有做胸部定期檢查、害羞看醫生</li><li>沒有運動習慣</li><li>哺乳期，乳腺經常阻塞</li><li>有乳癌家族病史</li></ul>"
+  },
+  {
+    "title": "腸道淨化課程",
+    "description": "中醫說：「養腸周就是養生，養好腸周不生病」。<br>腸胃人之根本，氣血生化之源，滋養著五臟六腑及整個身體的運行。一旦受損，不僅身體細胞吸收不到養份，更會影響其它臟腑，小到感冒大到腫瘤，都與腸胃息息相關。透過腹腔按摩手法搭配精油，照顧您的腸胃達到美容保健功效。",
+    "time": "20",
+    "price": "800",
+    "originalPrice": "2,600",
+    "recommend": "<ul><li>外食族、纖維質缺乏者</li><li>胃部機能、腸道功能弱者</li><li>晚睡、熬夜者經常便秘者</li><li>小腹明顯者一久坐、少運動者</li><li>代謝循環差長時間待在冷氣房</li></ul>"
+  },
+  {
+    "title": "輕盈甦腿課程",
+    "description": "深層舒展腿部肌 肉線條，放鬆僵硬肌肉同時調整體態，讓下半身擺脫囤積重量的疲累。<br>搭配客製化精油，按摩手法與溫熱儀器，使精油能量滲透肌膚底層，深層舒展放鬆僵硬肌肉，還給您漫步雲端的輕盈感。",
+    "time": "50",
+    "price": "1,800",
+    "originalPrice": "3,600",
+    "recommend": "<ul><li>腳部腫脹、水腫</li><li>腿部容易酸痛、肌肉僵硬</li><li>機能退化關節痠痛</li><li>下半身循環不良、容易手腳冰冷</li></ul>"
+  },
+  {
+    "title": "暖宮護理課程",
+    "description": "由內而外的保養，順著腹部來回循環按摩，溫暖您的腹部，適合長期保養。過獨家專業手感暖腹按摩，調理女性生理平衡，降低老化速度與預防更年期不適症狀。",
+    "time": "40",
+    "price": "1,288",
+    "originalPrice": "4,400",
+    "recommend": "<ul><li>手腳冰冷、婦科經常不適</li><li>月經週期不規律</li><li>改善/舒緩經前症候群不適</li><li>月經後護理排除老廢物質</li></ul>"
+  },
+  {
+    "title": "五行能量岩盤浴",
+    "description": "岩盤浴是藉由天然的能量水晶放射岀遠紅外線，達到以身體流汗的方式，促進代謝。岩盤當中釋放的天然負離子，有還原氧化作用，可將體內多餘的水分及不需要的東西排出，除了排汗，還有促進新陳代謝的效果。",
+    "time": "30",
+    "price": "800",
+    "originalPrice": "1,200",
+    "recommend": "<ul><li>手腳冰冷、腰痠背痛</li><li>下半身肥胖、身體代謝差者</li><li>睡眠品質不佳、水腫、便秘</li><li>悶熱、不出汗、關節酸痛</li><li>感冒傷風、胃脹、經期不順體質的人</li></ul>"
+  }
+]

store.html

@@ -0,0 +1,240 @@
+<!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="" 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 store-content">
+      <div class="row g-5 align-items-center">
+        <div class="col-7">
+          <img src="./img/violetbeauty/store1.jpg" alt="">
+        </div>
+        <div class="col-5">
+          <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>
+        <div class="col-7">
+          <img src="./img/violetbeauty/store2.jpg" alt="">
+        </div>
+        <div class="col-5">
+          <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>
+      </div>
+    </div>
+
+    <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>
+        </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>