modify

css/style.css

@@ -32,6 +32,7 @@ body {
   box-shadow: 0px 8px 25px 5px #a8a8a8; }
   @media screen and (max-width: 576px) {
     .header {
+      background-image: url("../images/hero_m.webp");
       border-bottom-right-radius: 4rem;
       border-bottom-left-radius: 4rem;
       -webkit-border-bottom-right-radius: 4rem;
@@ -44,16 +45,18 @@ body {
     width: 163px;
     height: 67px;
     overflow: hidden;
-    background-image: url(../images/logo.svg);
+    background-image: url(../images/Logo@2x.webp);
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
-    transform: scale(1.4);
+    transform: scale(0.9);
     position: relative; }
     @media screen and (max-width: 576px) {
       .header__logo {
-        background-image: url(../images/Logo@2x.webp);
-        transform: scale(1); } }
+        width: 160px;
+        height: 65px;
+        background-image: url(../images/logo.svg);
+        transform: scale(1.6); } }
   .header__logo-box {
     padding: 1rem;
     padding-top: 0;
@@ -78,29 +81,6 @@ body {
     left: 50%;
     top: 50%;
     transform: translate(-50%, -60%); }
-    .header__text-box::after {
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
-      width: 125%;
-      height: 125%;
-      border-radius: 70%;
-      -webkit-border-radius: 70%;
-      -moz-border-radius: 70%;
-      content: ' ';
-      background: #E5A982;
-      opacity: .5;
-      mix-blend-mode: darken;
-      -webkit-filter: blur(80px);
-      -moz-filter: blur(80px);
-      -o-filter: blur(80px);
-      -ms-filter: blur(80px);
-      filter: blur(80px);
-      z-index: -1; }
-      @media screen and (max-width: 576px) {
-        .header__text-box::after {
-          opacity: .3; } }
     @media screen and (max-width: 576px) {
       .header__text-box {
         width: 98vw; } }
@@ -109,6 +89,12 @@ body {
       animation-duration: 2.5s;
       animation-name: fadein;
       animation-iteration-count: 1; }
+    .header__text-box .sub__box {
+      padding: .2rem .6rem;
+      background-color: rgba(226, 226, 226, 0.815);
+      font-weight: 600;
+      display: inline-block;
+      font-size: 1.05rem; }
     .header__text-box .pen__img {
       position: absolute;
       width: 110px;

index.html

@@ -21,7 +21,7 @@
     <meta property="og:type" content="website"/>
     <meta property="og:locale" content="zh_TW">
     <meta property="og:url" content="https://v.hhh.com.tw" />
-    <meta property="og:image" content="https://i.imgur.com/WYg4S24.jpg"/>
+    <meta property="og:image" content="https://i.imgur.com/uWsJBwp.jpg"/>
     <title>攜手走過疫情，幸福空間與設計師們一起邀請您打造家園</title>
 
     <link rel="icon" href="images/favicon.ico">
@@ -52,8 +52,9 @@
             <hr class="header__line">
         </div>
         <div class="header__text-box">
-            <img class="title__img d-none d-md-block" src="images/title_pc.webp" alt="">
-            <img class="title__img d-block d-md-none" src="images/title_pc.webp" alt="">
+            <img class="title__img d-none d-md-block" src="images/title.webp" alt="">
+            <img class="title__img d-block d-md-none" src="images/title.webp" alt="">
+            <div class="sub__box">精選全台設計師，簽約立享折抵！</div>
             <img class="pen__img" src="images/pencil.png">
         </div>
         <div class="header__polygon-box">
@@ -75,17 +76,15 @@
             <h3 class="regulation__box__title">活動辦法</h3>
             <div class="regulation__box__list">
                 <ol class="ps-0">
-                    <li>1. 民眾收到行銷訊息之後，至本行銷活動專屬頁面完成問券，以及個資填寫，即可收到本活動“折價券”。</li>
-                    <li>2. 與幸福空間平台上，“指定設計師”洽談，並且與設計師表示想要參加本活動，指定設計師一覽表如下。
+                    <li>1. 民眾收到行銷訊息後，至本活動專屬頁面完成問券、個資填寫，即可收到本活動“折價券”。</li>
+                    <li>2. 幸福空間平台上，與“指定設計師”洽談，並且與設計師表示想要參加本活動，指定設計師一覽表如下。
                     </li>
-                    <li>3. 與“指定設計師”簽約完成，並於合約簽訂時出示“折價券”，立享合約總金額再折5萬元！
-                    </li>
-                    <li>4. 設計師保留最終合約簽訂與否權利。</li>
-                    <li>5. 5萬元折價券可分別於設計約，以及工程約使用。</li>
-                    <li>6. 若僅簽訂設計合約，恕不適用本活動。</li>
-                    <li>7. 若設計師想主動提供屋主優惠，可邀請屋主參與活動，並獲得折價券。</li>
-                    <li>8. 活動時間：即日起至8/31為止，以合約簽訂時間為準。</li>
-                    <li>9. 幸福空間保有最終修改，變動，活動解釋以及取消本活動之權利，任何相關異動，將於幸福空間官網公布，不另行通知。</li>
+                    <li>3. 與“指定設計師”簽約完成，並於合約簽訂時出示“折價券”，立享合約總金額再折5萬元！</li>
+                    <li>4. 若僅簽訂設計合約，恕不適用本活動。</li>
+                    <li>5. 設計師保留最終合約簽訂與否權利。</li>
+                    <li>6. 若設計師想主動提供屋主優惠，可邀請屋主參與活動，並獲得折價券。</li>
+                    <li>7. 活動時間：即日起至2022/1/31為止，以合約簽訂時間為準。</li>
+                    <li>8. 幸福空間保有最終修改，變動，活動解釋以及取消本活動之權利，任何相關異動，將於幸福空間官網公布，不另行通知。</li>
                 </ol>
             </div>
         </div>

scss/main.scss

@@ -38,6 +38,7 @@ body {
     position: relative;
     box-shadow: 0px 8px 25px 5px rgb(168, 168, 168);
     @media screen and(max-width: 576px) {
+        background-image: url('../images/hero_m.webp');
         border-bottom-right-radius: 4rem;
         border-bottom-left-radius: 4rem;
         -webkit-border-bottom-right-radius: 4rem;
@@ -51,15 +52,17 @@ body {
         width: 163px;
         height: 67px;
         overflow: hidden;
-        background-image: url(../images/logo.svg);
+        background-image: url(../images/Logo@2x.webp);
         background-repeat: no-repeat;
         background-position: center;
         background-size: cover;
-        transform: scale(1.4);
+        transform: scale(.9);
         position: relative;
         @media screen and(max-width: 576px) {
-            background-image: url(../images/Logo@2x.webp);
-            transform: scale(1);
+            width: 160px;
+            height: 65px;
+            background-image: url(../images/logo.svg);
+            transform: scale(1.6);
         }
     }
     &__logo-box {
@@ -88,30 +91,6 @@ body {
         left: 50%;
         top: 50%;
         transform: translate(-50%, -60%);
-        &::after {
-            position: absolute;
-            left: 50%;
-            top: 50%;
-            transform: translate(-50%, -50%);
-            width:125%;
-            height: 125%;
-            border-radius: 70%;
-            -webkit-border-radius: 70%;
-            -moz-border-radius: 70%;
-            content: ' ';
-            background: #E5A982;
-            opacity: .5;
-            mix-blend-mode: darken;
-            -webkit-filter:blur(80px);
-            -moz-filter:blur(80px);
-            -o-filter:blur(80px);
-            -ms-filter:blur(80px);
-            filter:blur(80px);
-            z-index: -1;
-            @media screen and(max-width: 576px) {
-                opacity: .3;
-            }
-        }
         @media screen and(max-width: 576px) {
             width: 98vw;
         }
@@ -123,6 +102,13 @@ body {
             @media screen and(max-width: 576px) {
             }
         }
+        .sub__box {
+            padding: .2rem .6rem;
+            background-color: rgba(226, 226, 226, 0.815);
+            font-weight: 600;
+            display: inline-block;
+            font-size: 1.05rem;
+        }
         .pen__img {
             position: absolute;
             width: 110px;