[build] build scss for intro

src/assets/scss/CFP/intro.scss

@@ -1,8 +1,11 @@
+$fontFamily: Noto Sans TC;
+$fontColor:  #226BB4;
+
 // General settings: 
 //    font-size and paragraph spacing for headers and paragraph text
 #cfp-intro {
-
-  padding: 96px 0;
+  margin-top: 90px;
+  padding: 96px 0 0 0;
 
   h1,
   h2,
@@ -36,7 +39,11 @@
     font-weight: 900;
   }
 }
-
+.introduction{
+    height: 2250px;
+    overflow: hidden;
+    padding-bottom: 0;
+}
 // Utiliy
 #cfp-intro {
   .mr-2 {
@@ -54,10 +61,30 @@
   .box-back {
     // margin-top: -120px;
     // width: 880px;
-    margin-bottom: 2em;
+    margin-bottom: -40em;
+    font-family: $fontFamily;
+    color: $fontColor;
 
+    width: 700px;
+    padding: 20px;
+
+    .first-box {
+      transform: rotate(15deg);
+      box-shadow: 0 3px 12px 0 rgba(89,120,206,.56);
+      border-radius: 30px;
+      position: relative;
+      bottom: 550px;
+      right: 50px;
+      z-index: 0;
+    }
+    .introd-text {
+      position: relative;
+      top: 200px;
+      left: 150px;
+      z-index: 2;
+    }
     .about-sitcon {
-      margin-bottom: 2em;
+      margin-bottom: 0 auto 2em;
     }
 
     .past-sitcon {
@@ -93,15 +120,51 @@
     }
   }
 
+  .box-bluearea {
+    width: 150vw;
+    height: 450px;
+    background: rgba(34, 107, 180,1);
+    right: 25%;
+    position:relative;
+    z-index: -1;
+    transform: rotate(15deg);
+    opacity: 1;
+  }
+
   .box-back2 {
     // width: 760px;
+    font-family: $fontFamily;
+    color: $fontColor;
+
+    width: 900px;
+    padding: 20px;
+    height: 2200px;
 
     .about-topic {
       margin-bottom: 2em;
+      position:relative;
+      bottom: 75px;
+      z-index: 2;
+      left: 50px;
+    }
+
+    .second-box {
+        transform: rotate(15deg);
+        box-shadow: 0 3px 12px 0 rgba(89,120,206,.56);
+        border-radius: 30px;
+        position: relative;
+        bottom: 1100px;
+        right: 120px;
+        z-index: 0;
     }
 
     .cfp-deadline {
       margin-bottom: 2em;
+      margin-bottom: 2em;
+      position:relative;
+      z-index: 2;
+      left: 50px;
+      bottom: 75px;
       .cfp-deadline-content {
         margin-top: -1.5em;
         display: flex;
@@ -111,10 +174,15 @@
     }
 
     .give-me-money {
+      position:relative;
+      z-index: 2;
+      left: 50px;
+      bottom: 75px;
       .whisper {
         font-weight: 900;
         font-size: 1.25em;
         margin-bottom: 0.5em;
+        
       }
     }
   }

src/assets/scss/footer.scss

@@ -92,6 +92,9 @@ $fontFamily: Noto Sans CJK TC, monospace;
   padding-top: 45px;
   padding-bottom: 45px;
 
+  position: relative;
+  z-index: 2;
+
   .footer-left {
     display: inline-flex;
     flex-direction: column;

src/components/CFP/Intro.vue

@@ -2,6 +2,7 @@
   <main class="introduction-container">
     <div class="introduction">
       <div class="box-back box">
+        <div class="introd-text">
         <div class="about-sitcon">
           <h2>關於 SITCON</h2>
           <p>
@@ -66,9 +67,14 @@
             >
           </div>
         </div>
+        </div>
+        <svg width="1000" height="950" class="first-box"><rect width="1500" height="1200" style="fill: rgb(255, 255, 255);"></rect></svg>
+      </div>
+<!-- ==================================================================================================== -->
+      <div class="box-bluearea">
       </div>
-
       <div class="box-back2 box">
+      <div class="introd-text">
         <div class="topic-intro">
           <div class="about-topic">
             <h2>2021 年會主題</h2>
@@ -97,8 +103,8 @@
               >
             </div>
           </div>
+          </div>
         </div>
-
         <div class="give-me-money">
           <p class="whisper">最後...</p>
           <h2>SITCON 贊助徵求</h2>
@@ -126,7 +132,9 @@
               >個人贊助方案</a
             >
           </div>
+          
         </div>
+        <svg width="1100" height="1200" class="second-box"><rect width="1500" height="1500" style="fill: rgb(255, 255, 255);"></rect></svg>
       </div>
     </div>
   </main>