新增元素

index.html

@@ -41,7 +41,7 @@
                 <a href="https://hhh.com.tw/"> <img src="./img/logo-main-1-1.webp" alt=""></a>
             </div>
             <div id="link" class="col-md-10 col-lg-8">
-                <a data-gt-target="#trouble" data-gt-duration="800" data-gt-offset="-300">你有以下困擾嗎?</a>
+                <a data-gt-target="#trouble" data-gt-duration="800" data-gt-offset="0">你有以下困擾嗎?</a>
                 <a data-gt-target="#Course-list" data-gt-duration="500" data-gt-offset="0">精華課程大綱</a>
                 <a data-gt-target="#course-schedule" data-gt-duration="500" data-gt-offset="0">3Days上課日程</a>
                 <a data-gt-target="#information" data-gt-duration="500" data-gt-offset="0">收款資訊+客服資訊</a>
@@ -118,8 +118,11 @@
 
     <section id="trouble" class="container-fluid">
         <div id="content" class="row">
-            <img src="./img/91899837_L11.webp" class="col-12 order-2 col-md-7 order-md-2 col-lg-7 order-lg-1"
+            <img id="img01" src="./img/91899837_L11.webp" class="col-12 order-2 col-md-7 order-md-2 col-lg-7 order-lg-1"
                 style="padding:5vw 0;margin: 0;" alt="">
+            <img id="circle1" src="./img/circle1.png" alt="">
+            <img id="circle2" src="./img/circle2.png" alt="">
+            <img id="circle3" src="./img/circle3.png" alt="">
             <div id="trouble-text" class="col-12 order-1 col-md-5 order-md-2 col-lg-5 order-lg-2" style="margin: 0;">
                 <div class="text-box">
                     <p>Do You Have the following Problems</p>
@@ -761,7 +764,9 @@
                     <input type="text" id="company" name="organization" placeholder="公司名稱(必填, 詳答)">
                     <select name="position" id="profession" required>
                         <option value="" disabled selected="selected">職位</option>
-                        <option class="option">經理</option>
+                        <option class="option">室內設計師</option>
+                        <option class="option">非室內設計師</option>
+                        <option class="option">其他</option>
                     </select>
                     <input type="text" id="phone" name="phone" placeholder="連絡電話(必填, 詳答)" pattern="09\d{2}\d{6}" required>
                     <input type="email" id="email" name="email" placeholder="聯絡email(必填, 詳答)" required>
@@ -813,14 +818,16 @@
             </div>
         </div>
 
-        <!-- <div id="mobile-form" class="container-fluid" style="padding:0;margin: 0; ">
+        <div id="mobile-form" class="container-fluid" style="padding:0;margin: 0; ">
             <div id="form-card" class="row">
                 <form class="contact-form col-md-6">
                     <input type="text" id="name" name="name" placeholder="姓名(必填, 詳答)" required>
                     <input type="text" id="company" name="organization" placeholder="公司名稱(必填, 詳答)">
                     <select name="position" id="profession">
                         <option value="" disabled selected="selected">職位</option>
-                        <option class="option" value="type">經理</option>
+                        <option class="option">室內設計師</option>
+                        <option class="option">非室內設計師</option>
+                        <option class="option">其他</option>
                     </select>
                     <input type="text" id="phone" name="phone" placeholder="連絡電話(必填, 詳答)" pattern="09\d{2}\d{6}"
                         required>
@@ -840,7 +847,7 @@
                         loading="lazy"></iframe>
                 </div>
             </div>
-        </div> -->
+        </div>
     </section>
     <footer id="footer" class="container-fluid" style="padding:0;margin: 0; ">
         <p>幸福空間 版權所有 &copy;Gorgeous Space Go.Ltd. All Rights Reserved.</p>

style.css

@@ -18,6 +18,8 @@
 body {
   width: 100vw;
   background: #f4fffc;
+  position: relative;
+  z-index: -2;
 }
 
 body p {
@@ -352,6 +354,7 @@ body .arrow {
   padding-top: 10vw;
   background: #f4fffc;
   padding-bottom: 10vw !important;
+  position: relative;
 }
 
 @media screen and (max-width: 767px) {
@@ -366,14 +369,42 @@ body .arrow {
   }
 }
 
-#trouble img {
+#trouble #circle1 {
+  position: absolute;
+  width: 20vw;
+  top: 35vw;
+  right: 3vw;
+  z-index: 1;
+}
+
+#trouble #circle2 {
+  position: absolute;
+  top: 10vw;
+  left: 45vw;
+  width: 18vw;
+  z-index: 0;
+}
+
+#trouble #circle3 {
+  position: absolute;
+  top: 52vw;
+  width: 25vw;
+  left: 10vw;
+  z-index: 2;
+}
+
+#trouble #img01 {
   padding: 10vw 10vw;
   -o-object-fit: cover;
      object-fit: cover;
+  position: relative;
+  z-index: 1;
 }
 
 #trouble #trouble-text {
   padding-top: 20vw;
+  position: relative;
+  z-index: 1;
 }
 
 #trouble #trouble-text .text-box {

style.scss

@@ -25,6 +25,8 @@ $navbgcolor: #a9d0c5;
 body {
     width: 100vw;
     background: $bgcolor;
+    position: relative;
+    z-index: -2;
     p {
         color: #adadad;
     }
@@ -281,21 +283,48 @@ body {
     padding-top: 10vw;
     background: $bgcolor;
     padding-bottom: 10vw !important;
+    position: relative;
     @media screen and(max-width:$moblie) {
         padding-top: 30vw;
     }
     @media screen and(min-height:800px) {
         padding-top: 0vw;
     }
-    img {
+    #circle1{
+        position: absolute;
+        width: 20vw;
+        top:35vw;
+        right:3vw;
+        z-index:1;
+    }
+    #circle2{
+        position: absolute;
+        top:10vw;
+        left:45vw;
+        width:18vw;
+        z-index: 0;
+    }
+    #circle3{
+        position: absolute;
+        top:52vw;
+        width: 25vw;
+        left:10vw;
+        z-index: 2;
+    }
+
+    #img01{
         padding: 10vw 10vw;
         object-fit: cover;
+        position: relative;
+        z-index:1;
         @media screen and(max-width:$table) {
             // width: 60vw;
         }
     }
     #trouble-text {
         padding-top: 20vw;
+        position: relative;
+        z-index:1;
         .text-box {
             margin-left: 5vw;
             h1 {