Sponsor init

src/assets/scss/sponsor.scss

@@ -0,0 +1,65 @@
+#sponsor {
+  line-height: 2em;
+
+  h2 {
+    line-height: normal;
+    font-size: 36pt;
+    color: #4e4e4e;
+  }
+
+  .main-container {
+    width: 75%;
+    margin: 0 auto;
+    padding-top: 240px;
+    padding-bottom: 240px;
+  }
+
+  .info-wrapper {
+    .content-wrapper {
+      display: flex;
+      flex-direction: row;
+      .info-left-button-wrapper {
+        padding-right: 160px;
+      }
+      .info-content {
+        p:not(:first-child) {
+          margin-top: 3em;
+        }
+      }
+      .info-right-button-wrapper {
+        padding-left: 160px;
+      }
+    }
+
+    .button-wrapper {
+      margin: 3em;
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+
+      .button {
+        color: white;
+        background: #1060ff;
+        margin-right: 30px;
+        margin-left: 30px;
+        padding: 0.33em 1em;
+        border-radius: 9487px;
+        box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5);
+      }
+    }
+  }
+
+  .deep-ploughing {
+    .image-wrapper {
+      margin-top: 8em;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+
+      img {
+        width: 307px;
+        height: 251px;
+      }
+    }
+  }
+}

src/pages/Sponsor.vue

@@ -1,11 +1,47 @@
 <template>
+  <div id="sponsor">
+    <div class="main-container">
+      <div class="info-wrapper">
+        <div class="content-wrapper">
+          <div class="info-left-button-wrapper"></div>
+          <div class="info-content">
+            <p>
+              SITCON
+              學生計算機年會為學生自發組成籌辦的研討會，秉持著以學生為主軸的核心價值，提供一個經驗交流與資訊技術實務分享的平台，進而達到「學以致用、教學相長」的目標。
+            </p>
+            <p>
+              維繫這樣的交流平台，需要多人的努力及貢獻，亦十分需要在資金上的支持。<br />
+              希望能藉由您的一份力量，來促成活動的舉行，讓更多學生能在舞台上展現自我成長。<br />
+              歡迎您參與贊助，支持 SITCON、讓我們將每年的活動辦得盡善盡美！
+            </p>
+          </div>
+          <div class="info-left-button-wrapper"></div>
+        </div>
+        <div class="button-wrapper">
+          <a class="button" href="#">個人贊助</a>
+          <a class="button" href="#">企業合作</a>
+        </div>
+      </div>
+      <div class="deep-ploughing">
+        <h2>深耕級</h2>
+        <div class="image-wrapper">
+          <img />
+          <img />
+          <img />
+        </div>
+      </div>
+       施工中。
+    </div>
+  </div>
 </template>
+
+<style lang="scss">
+@import "@/assets/scss/sponsor";
+</style>
+
 <script>
-import { Component, Prop, Vue } from 'vue-property-decorator';
+import { Component, Prop, Vue } from "vue-property-decorator";
 
-@Component({
+@Component({})
-})
+export default class Sponsor extends Vue {}
-export default class Sponsor extends Vue {
-
-}
 </script>