violetbeauty v1

css/style.css

@@ -0,0 +1,502 @@
+@charset "UTF-8";
+* {
+  margin: 0;
+  padding: 0;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+
+.playbutton {
+  cursor: pointer;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+  z-index: 101;
+  -webkit-transition: 0.3s;
+  transition: 0.3s;
+}
+
+.playbutton:hover {
+  opacity: 0.8;
+}
+
+.learn_more {
+  margin-top: 20px;
+  padding: 5px;
+  background: none;
+  color: #CC7DB7;
+  border-radius: 5px;
+  border: 1px solid #CC7DB7;
+  -webkit-transition: 0.3s;
+  transition: 0.3s;
+}
+
+.learn_more:hover {
+  color: #fff;
+  background: #CC7DB7;
+}
+
+.course_name_title {
+  font-size: 1.2rem;
+  color: #9C27B0;
+  font-weight: 900;
+}
+
+.course_name_text {
+  color: #CC7DB7;
+  margin-bottom: 5px;
+  font-size: 1rem;
+}
+
+.Discounted＿price {
+  font-size: 24px;
+  font-weight: 600;
+}
+
+.violetbeauty_content_title {
+  color: #9C27B0;
+  font-weight: 900;
+  font-size: 1.8rem;
+}
+
+.violetbeauty_content_text {
+  color: #9C27B0;
+  font-size: 1rem;
+}
+
+.violetbeauty_content_text {
+  color: #9C27B0;
+  font-size: 1rem;
+}
+
+.features_title {
+  font-weight: 900;
+  letter-spacing: 2px;
+  font: 1.9375em "微軟正黑體";
+  line-height: 25px;
+  text-align: center;
+  color: #452767;
+  width: 100%;
+  margin-bottom: 1rem;
+}
+
+.Down_line {
+  width: 300px;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+.card {
+  border: none;
+}
+
+.card .card-body {
+  padding: 0.1rem;
+  margin-top: 15px;
+}
+
+.violetbeauty_CTA {
+  margin-top: 50px;
+  padding: 10px 50px;
+  border: 1px solid #CC7DB7;
+  background: #fff;
+  border-radius: 30px;
+  color: #9C27B0;
+  position: relative;
+  -webkit-transition: 0.5s;
+  transition: 0.5s;
+}
+
+.violetbeauty_CTA a {
+  color: #9C27B0;
+}
+
+.violetbeauty_CTA .cta_flower {
+  position: absolute;
+  width: 60px;
+  left: -25px;
+  bottom: -10px;
+  -webkit-transition: 0.5s;
+  transition: 0.5s;
+}
+
+.violetbeauty_CTA:hover {
+  background: #9C27B0;
+  color: #fff;
+}
+
+.violetbeauty_CTA:hover a {
+  color: #fff;
+}
+
+.violetbeauty_CTA:hover .cta_flower {
+  -webkit-transform: rotate(360deg);
+          transform: rotate(360deg);
+}
+
+.navbar-nav {
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  width: 70%;
+  margin: 0 auto;
+}
+
+.navbar-nav .nav-link {
+  font: 1.2rem 微軟正黑體;
+  font-weight: 600;
+  padding: 0.5rem 1rem;
+  margin: 5px  1rem;
+  text-align: center;
+  color: #9C27B0;
+  letter-spacing: 0;
+  border-bottom: 5px solid #ffffff;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  cursor: pointer;
+}
+
+.slick-dotted.slick-slider {
+  margin-bottom: 0px !important;
+}
+
+.sec_content_right_text {
+  margin-top: 30px;
+}
+
+.sec_content_right_text p {
+  margin-bottom: 0.5rem;
+  color: #9C27B0;
+}
+
+.banner-slide .slick-dots {
+  bottom: 30px;
+}
+
+.banner-slide .slick-dots li button:before {
+  font-size: 16px;
+  font-weight: 900;
+  top: 15px;
+  content: '○';
+  color: #82689d;
+}
+
+.banner-slide .slick-dots li.slick-active button:before {
+  opacity: .75;
+  color: #82689d;
+  content: '●';
+}
+
+.violetbeauty_sec00 {
+  background: #F8F2F6;
+  padding: 80px 0;
+  position: relative;
+}
+
+.violetbeauty_sec00 .sec00_img1 {
+  left: 0px;
+  bottom: 20px;
+  width: 300px;
+  opacity: 0.8;
+}
+
+.violetbeauty_sec00 .sec00_img2 {
+  right: 0px;
+  top: 50px;
+  width: 180px;
+  opacity: 0.8;
+  -webkit-transform: rotate(-90deg);
+          transform: rotate(-90deg);
+}
+
+.violetbeauty_sec00 .sec00_img3 {
+  right: 100px;
+  bottom: 80px;
+  width: 60px;
+  opacity: 0.5;
+  -webkit-transform: rotate(-30deg);
+          transform: rotate(-30deg);
+}
+
+.violetbeauty_sec00 .violetbeauty_sec00_box {
+  width: 80%;
+  margin: 0 auto;
+}
+
+.violetbeauty_sec00 .violetbeauty_sec00_box .sec00_content_left_img {
+  width: 60%;
+  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+          box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+}
+
+.violetbeauty_sec00 .violetbeauty_sec00_box .sec00_content_right {
+  text-align: center;
+  margin-top: 50px;
+}
+
+.violetbeauty_sec01, .violetbeauty_sec02 {
+  padding: 50px 0;
+}
+
+.violetbeauty_sec01 .slick-prev:before, .violetbeauty_sec02 .slick-prev:before {
+  content: "";
+}
+
+.violetbeauty_sec01 .slick-next:before, .violetbeauty_sec02 .slick-next:before {
+  content: "";
+}
+
+.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 {
+  margin-top: 30px;
+}
+
+.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 {
+  -o-object-fit: cover;
+     object-fit: cover;
+  margin: 0 auto;
+}
+
+.violetbeauty_sec02 {
+  background: #F8F2F6;
+}
+
+.violetbeauty_sec02 .card {
+  background: #F8F2F6;
+}
+
+.violetbeauty_sec03 {
+  padding: 100px 0;
+  margin-bottom: 50px;
+  position: relative;
+}
+
+.violetbeauty_sec03 .sec03_img1 {
+  position: absolute;
+  left: 50px;
+  top: 50px;
+  opacity: 0.5;
+}
+
+.violetbeauty_sec03 .sec03_img2 {
+  position: absolute;
+  right: -120px;
+  width: 400px;
+  top: 40%;
+  opacity: 0.5;
+  -webkit-transform: rotate(-70deg);
+          transform: rotate(-70deg);
+}
+
+.violetbeauty_sec03 .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 .violetbeauty_sec03_box {
+  width: 75%;
+  margin: 0 auto;
+}
+
+.violetbeauty_sec03 .violetbeauty_sec03_box .violetbeauty_sec03_content {
+  margin-top: 100px;
+}
+
+.violetbeauty_sec03 .violetbeauty_contract_form {
+  width: 70%;
+  margin: 0 auto;
+}
+
+.violetbeauty_sec03 .violetbeauty_contract_form #submitbutton {
+  width: 100%;
+  margin: 16px auto;
+  border: none;
+  padding: 16px 12px;
+  background: #CC7DB7;
+  color: #fff;
+  font-size: 20px;
+  border-radius: .25rem;
+  text-align: center;
+  vertical-align: middle;
+}
+
+.violetbeauty_sec03 .violetbeauty_contract_form #submitbutton:hover {
+  color: #CC7DB7;
+  background-color: #fff;
+  border: 1px solid #CC7DB7;
+}
+
+.violetbeauty_sec03 .violetbeauty_contract_form #time, .violetbeauty_sec03 .violetbeauty_contract_form #datepicker {
+  width: 45%;
+  padding: 10px 15px;
+  border-radius: 3px;
+  margin: 10px  0px;
+  border: 1px solid rgba(0, 0, 0, 0.3);
+}
+
+.violetbeauty_sec03 .violetbeauty_contract_form #time {
+  margin-left: 8%;
+}
+
+.violetbeauty_sec03 .violetbeauty_contract_form #phone,
+.violetbeauty_sec03 .violetbeauty_contract_form #email,
+.violetbeauty_sec03 .violetbeauty_contract_form #loc,
+.violetbeauty_sec03 .violetbeauty_contract_form #name,
+.violetbeauty_sec03 .violetbeauty_contract_form #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);
+}
+
+.logo img {
+  width: 300px;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+.violetbeauty_logo {
+  width: 300px;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+#footer {
+  background: #EDCDE1;
+}
+
+#footer .footer_content_box {
+  padding: 100px 0;
+  margin: 0 auto;
+  width: 80%;
+}
+
+#footer h3 {
+  font-size: 1.5rem;
+}
+
+#footer p {
+  margin-bottom: 0.5rem;
+}
+
+#footer .socail-link a {
+  margin-right: 8px;
+}
+
+#footer .footer_text {
+  margin-top: 15px;
+}
+
+#footer .socail-link {
+  margin-top: 30px;
+}
+
+#footer .store_name {
+  color: #9C27B0;
+}
+
+#footer .store {
+  width: 85%;
+  margin: 0 auto;
+}
+
+#footer .store p {
+  margin-top: 10px;
+}
+
+#footer .footer_logo img {
+  position: relative;
+  right: 30px;
+  width: 300px;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+#footer .google_map {
+  width: 47%;
+  padding: 15px 20px;
+  background: none;
+  color: #3F51B5;
+  border: 1px solid #3F51B5;
+  border-radius: 3px;
+  -webkit-transition: 0.3s;
+  transition: 0.3s;
+  overflow-x: hidden;
+}
+
+#footer .google_map a {
+  text-decoration: none;
+  color: #3F51B5;
+}
+
+#footer .google_map:hover {
+  background: #3F51B5;
+  color: #fff;
+}
+
+#footer .google_map:hover a {
+  color: #fff;
+}
+
+#footer .line_Reserve {
+  width: 45%;
+  margin-left: 5%;
+  padding: 15px 20px;
+  background: #52B448;
+  border: 1px solid #52B448;
+  color: #fff;
+  border: none;
+  border-radius: 3px;
+  -webkit-transition: 0.3s;
+  transition: 0.3s;
+  overflow-x: hidden;
+}
+
+#footer .line_Reserve a {
+  color: #fff;
+  text-decoration: none;
+}
+
+#footer .line_Reserve:hover {
+  background: #fff;
+  color: #52B448;
+}
+
+#footer .line_Reserve:hover 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: #CC7DB7;
+  cursor: pointer;
+}
+/*# sourceMappingURL=style.css.map */

css/style.scss

@@ -0,0 +1,501 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+$mainclolr:#9C27B0;
+.playbutton {
+    cursor: pointer;
+    position:absolute;
+    top:50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 101;
+    transition: 0.3s;
+    &:hover{
+        opacity: 0.8;
+    }
+}
+.learn_more{
+    margin-top: 20px;
+    padding: 5px;
+    background: none;
+    color:#CC7DB7;
+    border-radius: 5px;
+    border:1px solid #CC7DB7;
+    // border:none;
+    transition: 0.3s;
+    &:hover{
+        color:#fff;
+        background:#CC7DB7;
+    }
+}
+.course_name_title{
+    font-size: 1.2rem;
+    color:$mainclolr;
+    font-weight: 900;
+}
+.course_name_text{
+    color:#CC7DB7;
+    margin-bottom: 5px;
+    font-size: 1rem;
+}
+.Discounted＿price{
+    font-size: 24px;
+    font-weight: 600;
+}
+.violetbeauty_content_title{
+    color:$mainclolr;
+    font-weight: 900;
+    font-size: 1.8rem;
+}
+.violetbeauty_content_text{
+    color:$mainclolr;
+    font-size: 1rem;
+}
+.violetbeauty_content_text{
+    color:$mainclolr;
+    font-size: 1rem;
+}
+.features_title{
+    font-weight: 900;
+    letter-spacing: 2px;
+    font: 1.9375em "微軟正黑體";
+    line-height: 25px;
+    text-align: center;
+    color: #452767;
+    width: 100%;
+    margin-bottom: 1rem;
+
+}
+
+.Down_line{
+    width: 300px;
+    object-fit: cover;
+}
+.card{
+    border: none;
+    .card-body{
+        padding: 0.1rem;
+        margin-top: 15px;
+    }
+}
+.violetbeauty_CTA{
+    margin-top: 50px;
+    padding: 10px 50px;
+    border:1px solid #CC7DB7;
+    background:#fff;
+    border-radius: 30px;
+    color:#9C27B0;
+    position: relative;
+    transition: 0.5s;
+    a{
+        color:#9C27B0;
+    }
+    .cta_flower{
+        position: absolute;
+        width: 60px;
+        left: -25px;
+        bottom:-10px;
+        transition: 0.5s;
+    }
+    &:hover{
+        background:#9C27B0;
+        a{
+            color:#fff;
+        }
+        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: $mainclolr;
+        letter-spacing: 0;
+        border-bottom: 5px solid #ffffff;
+        box-sizing: border-box;
+        cursor: pointer;
+    }
+}
+.slick-dotted.slick-slider{
+    margin-bottom: 0px !important;
+}
+
+.sec_content_right_text{
+    margin-top: 30px;
+    p{
+        margin-bottom: 0.5rem;
+        color:$mainclolr;
+    }
+}
+.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: '●';
+            
+        }
+    }
+}
+
+
+
+.violetbeauty_sec00{
+    background: #F8F2F6;
+    padding:80px 0;
+    position: relative;
+    .sec00_img1{
+        left:0px;
+        bottom:20px;
+        width: 300px;
+        opacity: 0.8;
+    }
+
+    .sec00_img2{
+        right:0px;
+        top:50px;
+        width: 180px;
+        opacity: 0.8;
+        transform: rotate(-90deg);
+    }
+    .sec00_img3{
+        right:100px;
+        bottom:80px;
+        width: 60px;
+        opacity: 0.5;
+        transform: rotate(-30deg);
+        
+    }
+    .violetbeauty_sec00_box{
+        width: 80%;
+        margin:0 auto ;
+        .sec00_content_left_img{
+            width: 60%;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+        }
+        .sec00_content_right{
+            text-align: center;
+            margin-top: 50px;
+          
+           
+        }
+
+    }
+    
+}
+
+.violetbeauty_sec01,.violetbeauty_sec02{
+    padding:50px 0;
+    .slick-prev:before{
+        content:"";
+    }
+    .slick-next:before{
+        content:"";
+    }
+    .violetbeauty_sec01_box{
+        width: 80%;
+        margin: 0 auto;
+    }
+    .violetbeauty_sec01_content{
+        margin-top: 30px;
+        .sec01_slide_item{
+            padding: 20px;
+            img{
+                // width: 180px;
+                // height: 250px;
+                object-fit: cover;
+                margin: 0 auto;
+            }
+        }
+    }
+}
+
+.violetbeauty_sec02{
+    background: #F8F2F6;
+    .card{
+        background: #F8F2F6;
+    }
+}
+
+.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: #CC7DB7;
+            color: #fff;
+            font-size: 20px;
+            border-radius: .25rem;
+            text-align: center;
+            vertical-align: middle;
+            &:hover {
+                color: #CC7DB7;
+                background-color: #fff;
+                border:1px solid #CC7DB7;
+            }
+        }
+        #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%;
+//     margin:0 auto ;
+//     .features{
+//         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%;
+//                 .sec01_content_title_1{
+//                     color: #452767;
+//                     font-size: 3.5rem;
+//                     text-align: center;
+//                 }
+//                 .sec01_content_title_2{
+//                     h3{
+//                         font-size:1.6rem ;
+//                         text-align: center;
+//                         color: #452767;
+//                         letter-spacing: 3px;
+//                         font-weight:600
+//                     }
+                    
+//                 }
+//                 .sec01_content_text{
+//                     p{
+//                         font-size: 1.2rem;
+//                         text-align: center;
+//                     }
+//                 }
+//             }
+//         }
+//         .sec01_content_right{
+//             .sec01_content_img{
+//             width: 100%;
+//             // margin: 0 auto;
+//             }
+//         }
+//     }
+   
+// }
+
+
+
+.logo{
+    img{
+        width: 300px;
+        // height: 66px;
+        object-fit: cover;
+
+    }
+}
+
+.violetbeauty_logo{
+    width: 300px;
+    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:$mainclolr;
+    }
+    .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: #CC7DB7;
+    cursor: pointer;
+   
+}

index.html

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

js/index.js

@@ -0,0 +1,86 @@
+$(".gototop").hide();
+$(window).scroll(function () {
+  var y = window.scrollY;
+
+  if (y > 10) {
+    $(".gototop").show();
+  } else {
+    $(".gototop").hide();
+  }
+
+});
+
+$("*").each(function (index, element) {
+    // 此元素被點選後執行
+    $(this).click(function (e) {
+      // 取得被點選元素的屬性：data-gt-target
+      var target = $(this).attr("data-gt-target");
+      var duration = $(this).attr("data-gt-duration");
+      var offset = $(this).attr("data-gt-offset");
+  
+      // JS 語法：判斷式
+      // if (條件) {程式區塊}
+      // 當條件成立，會執行程式區塊
+  
+      // 如果 目標有資料 才會執行 { } 內的程式
+      // 避免出現 undefine (未定義 - 不存在的資料)
+      if (target) {
+        //console.log("目標：" + target);
+        //console.log("時間：" + duration);
+        //console.log("位移：" + offset);
+  
+        // 上方位置 = 目標區塊.位移().上方位置
+        var top = $(target).offset().top;
+        //console.log("要前往元素的上方位置：" + top);
+  
+        // 網頁元素.停止().動畫({ 上方捲動：指定元素 - 位移}，持續時間)
+        // parseInt() 將文字轉為數字
+  
+        $("html").stop().animate({
+          scrollTop: top - offset
+        }, parseInt(duration));
+      }
+    });
+  });
+  
+  // 避免動畫與使用者滾輪衝突
+  // html 在滾動滾輪時 停止 html 所有效果
+  $("html").on("mousewheel", function () {
+    $("html").stop();
+  });
+
+$(".playbutton").click(function () {
+    var videosrc = $(this).data("info");
+    $('.youtube-video').attr('src', `https://www.youtube.com/embed//${videosrc}?autoplay=1`);
+  });
+  
+  $(".btn-close").click(function () {
+    $('.youtube-video').attr('src', ``);
+  });
+  
+  $('#yt-video').on('hidden.bs.modal', function () {
+    $('.youtube-video').attr('src', ``);
+  });
+
+$(".banner-slide").slick({
+    dots: true,
+    autoplay: true,
+    arrows: false,
+    slidesToShow: 1,
+    slidesToScroll: 1,
+    autoplaySpeed: 7000,
+    initialSlide: 0,
+    infinite: true,
+});
+
+$(".violetbeauty_sec01_slide").slick({
+ 
+    slidesToShow: 4,
+    slidesToScroll: 1,
+    infinite: true,
+    // centerMode: true,
+    arrows: true,
+    prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 32px;color: #CC7DB7;transform: translateY(-10px);"></i></button>',
+    nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 32px;color: #CC7DB7;transform: translateY(-10px);"></i></button>'
+});
+