更新首頁圖片

css/style.css

@@ -594,6 +594,7 @@
   text-align: center;
   padding: 15px 5.6%;
   margin-top: 80px;
+  letter-spacing: 1px;
 }
 
 @media screen and (max-width: 767px) {
@@ -655,6 +656,7 @@
   padding: 100px 0;
   margin-bottom: 50px;
   position: relative;
+  letter-spacing: 1px;
 }
 
 .violetbeauty_sec03 .sec03_img1 {
@@ -789,6 +791,7 @@
   padding: 50px 0;
   margin: 0 auto;
   width: 80%;
+  letter-spacing: 1px;
 }
 
 @media screen and (max-width: 767px) {
@@ -917,8 +920,8 @@
 }
 
 #footer .google_map {
-  width: 47%;
-  padding: 15px 20px;
+  width: 100%;
+  padding: 14px 20px;
   background: none;
   color: #3f51b5;
   border: 1px solid #3f51b5;
@@ -943,8 +946,7 @@
 }
 
 #footer .line_Reserve {
-  width: 45%;
-  margin-left: 5%;
+  width: 100%;
   padding: 15px 20px;
   background: #52b448;
   border: 1px solid #52b448;

css/style.scss

@@ -648,6 +648,7 @@ $moblie: 767px;
       text-align: center;
       padding: 15px 5.6%;
       margin-top: 80px;
+      letter-spacing: 1px;
       @media screen and(max-width:$moblie) {
         padding: 15px 2.8%;
       }
@@ -693,6 +694,7 @@ $moblie: 767px;
   padding: 100px 0;
   margin-bottom: 50px;
   position: relative;
+  letter-spacing: 1px;
   .sec03_img1 {
     position: absolute;
     left: 50px;
@@ -853,6 +855,7 @@ $moblie: 767px;
     padding: 50px 0;
     margin: 0 auto;
     width: 80%;
+    letter-spacing: 1px;
     @media screen and(max-width:$moblie) {
       width: 90%;
     }
@@ -953,8 +956,8 @@ $moblie: 767px;
     }
   }
   .google_map {
-    width: 47%;
-    padding: 15px 20px;
+    width: 100%;
+    padding: 14px 20px;
     background: none;
     color: #3f51b5;
     border: 1px solid #3f51b5;
@@ -974,8 +977,7 @@ $moblie: 767px;
     }
   }
   .line_Reserve {
-    width: 45%;
-    margin-left: 5%;
+    width: 100%;
     padding: 15px 20px;
     background: #52b448;
     border: 1px solid #52b448;

index.html

@@ -186,15 +186,15 @@
       <hr class="violetbeauty_line">
       <div class="news-slide">
         <div class="banner-slide-item">
-          <img class="img-fluid" src="./img/1.png" alt="">
+          <img class="img-fluid" src="./img/1.jpg" alt="">
 
         </div>
         <div class="banner-slide-item">
-          <img class="img-fluid" src="./img/2.png" alt="">
+          <img class="img-fluid" src="./img/2.jpg" alt="">
 
         </div>
         <div class="banner-slide-item">
-          <img class="img-fluid" src="./img/3.png" alt="">
+          <img class="img-fluid" src="./img/3.jpg" alt="">
 
         </div>
       </div>
@@ -663,12 +663,12 @@
               <div class="sec01＿course_text">
                 <h2 class="features_title">臉部課程</h2>
                 <hr class="violetbeauty_line">
-                <del>原價 NT$ 3000</del> <span>NT$<strong>1200</strong>/ 60分鐘</span>
+                <del>原價 NT$ 3000</del> <span class="ms-1">NT$<strong>1200</strong> / 60分鐘</span>
 
                 <p>-&nbsp; 紫晴美妍坊 plus+養生美容SPA專屬體驗 每人限乙次&nbsp;&nbsp;-&nbsp;</p>
                 <p>定期臉部SPA保養，使皮膚更年輕、亮澤、有彈性</p>
                 <a style="text-decoration: none; color:#fff;" href="./facial.html">
-                  <button class="btn submitbutton" style="opacity: 1;" type="submit">了解詳情></button>
+                  <button class="btn submitbutton" style="opacity: 1;" type="submit">了解詳情&nbsp;&nbsp;></button>
                 </a>
               </div>
             </div>
@@ -690,14 +690,14 @@
               <div class="sec01＿course_text">
                 <h2 class="features_title">身體課程</h2>
                 <hr class="violetbeauty_line">
-                <del>原價 NT$ 3000</del> <span>NT$<strong>1200</strong>/ 60分鐘</span>
+                <del>原價 NT$ 3000</del> <span class="ms-1">NT$<strong>1200</strong> / 60分鐘</span>
 
                 <p>-&nbsp; 紫晴美妍坊 plus+養生美容SPA專屬體驗 每人限乙次&nbsp;&nbsp;-&nbsp;</p>
 
                 <p>純手工全身舒壓勻體養生SPA，被動式的運動，<br>
                   使身體從頭到腳、從內到外，放鬆、解壓、健康、美麗SPA。</p>
                 <a style="text-decoration: none; color:#fff;" href="./massage.html">
-                  <button class="btn submitbutton" style="opacity: 1;" type="submit">了解詳情></button>
+                  <button class="btn submitbutton" style="opacity: 1;" type="submit">了解詳情&nbsp;&nbsp;></button>
                 </a>
               </div>
             </div>
@@ -720,9 +720,9 @@
         </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 class="row mx-0 px-0 align-items-center">
+            <div class="col-md-6 mb-4 mb-md-0">
+              <img class="img-fluid" src="./img/collage.png" alt="">
             </div>
             <div class="col-md-6">
               <div class="violetbeauty_contract_form">
@@ -750,8 +750,7 @@
                 <input name="prefer_date" class="datepicker" type="date" id="datepicker" placeholder="預選裝修日期" required>
                 <input name="prefer_date" class="time" type="time" id="time" placeholder="想要體驗的時間" required>
                 <div class="form-btn">
-                  <button class="btn submitbutton" style="opacity: 1;" type="submit">立即預約
-                    ></button>
+                  <button class="btn submitbutton" style="opacity: 1;" type="submit">立即預約&nbsp;&nbsp;></button>
                 </div>
               </div>
             </div>
@@ -766,11 +765,11 @@
 
     <footer id="footer">
       <div class="footer_content_box">
-        <div class="row">
-          <div class="col-md-4">
+        <div class="row align-items-center">
+          <div class="col-md-12 col-lg-4">
             <div class="footer_text_box">
-              <div class="d-flex flex-column">
-                <div class="mb-5">
+              <div class="d-flex flex-column align-items-center">
+                <div class="mb-5 ms-5">
                   <div class="footer_logo">
                     <a href="./">
                       <img
@@ -783,7 +782,7 @@
                   </div>
                 </div>
                 <div class="w-100">
-                  <div class="d-flex flex-row flex-column pb-4">
+                  <div class="d-flex flex-row flex-column align-items-center pb-4">
                     <div class="d-flex flex-row flex-column">
                       <ul class="navbar-nav m-0">
                         <li class="nav-item">
@@ -827,7 +826,7 @@
               </div>
             </div>
           </div>
-          <div class="col-md-4">
+          <div class="col-md-6 col-lg-4">
             <div class="store">
               <h3 class="store_name mb-5 fw-bold">紫晴plus+大溪店</h3>
               <img class="img-fluid" src="./img/violetbeauty/store1.jpg" alt="">
@@ -837,22 +836,26 @@
                 <p><i style="font-size: 20px; color: #6C6C6C;" class="fas fa-phone me-3 phone"></i>03-3808198</p>
                 <p><i style="font-size: 20px; color: #6C6C6C;" class="fas fa-clock me-3"></i>10:00-20:00</p>
               </div>
-              <div class="mt-4">
-                <a target="_blank" style="text-decoration: none;"
-                  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 class="row mt-4">
+                <div class="col-sm-6 pe-sm-0">
+                  <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>
+                </div>
+                <div class="col-sm-6 pe-sm-0 mt-3 mt-sm-0">
+                  <a target="_blank" href="https://line.me/R/ti/p/%2540qlo9716l">
+                    <button class="line_Reserve">
+                      LINE預約 >
+                    </button>
+                  </a>
+                </div>
               </div>
             </div>
           </div>
-          <div class="col-md-4">
+          <div class="col-md-6 col-lg-4">
             <div class="store">
               <h3 class="store_name mb-5 fw-bold">紫晴plus+龍潭店</h3>
               <img class="img-fluid" src="./img/violetbeauty/store2.jpg" alt="">
@@ -861,15 +864,18 @@
                 <p><i style="font-size: 20px; color: #6C6C6C;" class="fas fa-phone me-3 phone"></i>03-4700318</p>
                 <p><i style="font-size: 20px; color: #6C6C6C;" class="fas fa-clock me-3"></i>10:00-20:00</p>
               </div>
-              <div class="mt-4">
-                <a target="_blank" style="text-decoration: none;"
-                  href="https://www.google.com.tw/maps/place/%E6%A1%83%E5%9C%92%E5%B8%82%E5%A4%A7%E6%BA%AA%E5%8D%80%E4%BB%81%E5%96%84%E8%A1%97108-11%E8%99%9F">
-                  <button class="google_map">Google地圖 ></button>
-                </a>
-
-                <a target="_blank" style="text-decoration: none;" href="https://line.me/R/ti/p/%2540qlo9716l">
-                  <button class="line_Reserve">LINE預約 ></button>
-                </a>
+              <div class="row mt-4">
+                <div class="col-sm-6 pe-sm-0">
+                  <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>
+                </div>
+                <div class="col-sm-6 pe-sm-0 mt-3 mt-sm-0">
+                  <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>