Adjust UI

app/store.component.css

-#pic {
-  width: 70%;
+.navbar-brand {
+  height: 50px;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  padding-right: 0.5rem;
+  font-size: 1.5rem;
 }
 
-#signups {
-  color: #00a4d9;
+.navbar {
+  border-bottom: 1px solid #dddddd;
+  box-shadow: 0 0 20px rgba(0, 0, 0, .1);
+  font-size: 1.25rem;
+}
+
+#pic {
+  width: 100%;
 }
 
 #online {
@@ -18,14 +28,20 @@
   padding-top: .5rem;
 }
 
+#title {
+  padding-top: 4rem;
+  padding-left: 4rem;
+}
+
 .col-md-6 {
-  box-shadow: 0 0 30px rgba(0,0,0,.1);
+  box-shadow: 0 0 30px rgba(0, 0, 0, .1);
   border: 1px solid #ccc;
   border-radius: 10px;
   margin: 0.5%;
   padding-top: 1rem;
   flex: 0 0 48%;
 }
+
 h2 {
   /*background: linear-gradient( to bottom, #f7f7f7, #eee );*/
   padding: .5rem;
@@ -48,12 +64,6 @@ sup {
   color: #00a4d9;
 }
 
-#requirements-wrapper {
-  background-color: #eceeef;
-  margin-top: 2rem;
-  padding: 2rem 0;
-}
-
 #signups-wrapper {
   margin-bottom: 0;
 }
@@ -61,21 +71,63 @@ sup {
 #requirements {
   font-size: 14px;
 }
+
 #setup {
   font-size: 1.5rem;
 }
-/*#main > div:nth-child(1) {*/
-  /*border-left: 4px solid #aae5ff;*/
-/*}*/
 
-/*#main > div:nth-child(2) {*/
-  /*border-left: 4px solid #a8ffab;*/
-/*}*/
+#main-wrapper {
+  z-index: 1;
+  position: relative;
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+  box-shadow: 0 0 20px rgba(0, 0, 0, .1);
+  background: linear-gradient( to bottom, #f7f7f7, #eee );
+}
 
-/*#main > div:nth-child(3) {*/
-  /*border-left: 4px solid #ffaabe;*/
-/*}*/
+#requirements-wrapper {
+  z-index: 2;
+  position: relative;
+  background: linear-gradient( to bottom, #f7f7f7, #eee );
+  padding: 4rem 0;
+  box-shadow: 0 0 20px rgba(0, 0, 0, .1);
+}
+
+#main > div:nth-child(1) {
+  border-top: 4px solid #9acfe6;
+  background-color: rgba(255, 255, 255, 0.5);
+}
+
+#main > div:nth-child(2) {
+  border-top: 4px solid #9ACFE6;
+  background-color: rgba(255, 255, 255, 0.5);
+}
+
+#main > div:nth-child(3) {
+  border-top: 4px solid #9ACFE6;
+  background-color: rgba(255, 255, 255, 0.5);
+}
 
-/*#main > div:nth-child(4) {*/
-  /*border-left: 4px solid #fffc9e;*/
-/*}*/
+#main > div:nth-child(4) {
+  border-top: 4px solid #9ACFE6;
+  background-color: rgba(255, 255, 255, 0.5);
+}
+
+#footer-wrapper {
+  z-index: 3;
+  position: relative;
+  box-shadow: 0 0 20px rgba(0, 0, 0, .1);
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  background: linear-gradient( to bottom, #f7f7f7, #eee );
+}
+
+#footer {
+  text-align: right;
+  border: 1px solid #eeeeee;
+  border-radius: 10px;
+  padding-top: 1rem;
+  padding-left: 2rem;
+  padding-right: 2rem;
+  box-shadow: inset 0 0 10px rgba(0, 0, 0, .05);
+}

app/store.component.html

-<nav class="navbar navbar-toggleable-md fixed-top navbar-light bg-faded">
+<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
   <div class="container">
     <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
     <a class="navbar-brand" href="#">
-      <img src="https://mycard.moe/logo_60.png" width="30" height="30" class="d-inline-block align-top" alt=""> MyCard
+      <img src="https://mycard.moe/logo_60.png" width="40" height="40" class="d-inline-block align-center" alt=""> MyCard
     </a>
     <!--<a class="navbar-brand" href="#"></a>-->
 
@@ -25,7 +25,7 @@
 <div class="jumbotron">
   <div class="container">
     <div class="row">
-      <div class="col">
+      <div class="col-md-5" id="title">
         <h1 class="display-3">萌卡<sup class="titileBeta">BETA</sup></h1>
         <p>MyCard 同人游戏平台</p>
         <p>
@@ -35,14 +35,14 @@
           萌卡平台支持 <a href="https://wudizhanche.mycard.moe/download?platform=win32">Windows</a> 与
           <a href="https://wudizhanche.mycard.moe/download?platform=darwin">Mac</a> 操作系统。</p>
       </div>
-      <div class="col" id="pic">
-        <img src="images/MyCardProduct.png">
+      <div class="col">
+        <img id="pic" src="images/MyCardProduct.png">
       </div>
     </div>
   </div>
 </div>
-
-<div class="container">
+<div id="main-wrapper">
+  <div class="container">
     <!-- Example row of columns -->
     <div class="row" id="main">
 
@@ -109,6 +109,7 @@
         <p><a class="btn btn-secondary" href="#" role="button">其他功能目标 &raquo;</a></p>
       </div>
     </div>
+  </div>
 </div>
 <div id="requirements-wrapper">
   <div class="container">
@@ -129,10 +130,13 @@
     </div>
   </div>
 </div>
-<div class="container">
-  <hr>
-
+<div id="footer-wrapper">
+  <div class="container">
     <footer>
-    <p>&copy; MyCard 2017</p>
+      <div id="footer">
+        <p>&copy; MyCard 2017 all right reserved.</p>
+      </div>
     </footer>
+  </div>
 </div>
+

styles.css

 /* Move down content because we have a fixed navbar that is 50px tall */
 body {
   font-family: -apple-system, Arial, 'Source Sans Pro', "Microsoft YaHei", 'Microsoft JhengHei', "WenQuanYi Micro Hei", sans-serif;
-  padding-top: 2rem;
   font-size: 15px;
 }
 
@@ -10,6 +9,7 @@ body {
 }
 
 .jumbotron {
-  /*background: linear-gradient( to bottom, #f7f7f7, #eee );*/
-  background: linear-gradient( 150deg, #f0c3c2, #e0efd1, #9ae2d3 );
+  background: linear-gradient( to bottom, #f7f7f7, #eee );
+  border-radius:unset;
+  margin-bottom:unset;
 }