Working on UI

app/store.component.css

+#pic {
+  width: 70%;
+}
+
 #signups {
   color: #00a4d9;
 }
@@ -40,6 +44,10 @@ sup {
   border-color: #008dbb;
 }
 
+.btn-secondary {
+  color: #00a4d9;
+}
+
 #requirements-wrapper {
   background-color: #eceeef;
   margin-top: 2rem;

app/store.component.html

 <nav class="navbar navbar-toggleable-md fixed-top navbar-light bg-faded">
-  <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
-  </a>
-  <!--<a class="navbar-brand" href="#"></a>-->
+  <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
+    </a>
+    <!--<a class="navbar-brand" href="#"></a>-->
 
-  <div class="collapse navbar-collapse" id="navbarsExampleDefault">
-    <ul class="navbar-nav mr-auto">
-      <li class="nav-item active">
-        <a class="nav-link" href="#">首页 <span class="sr-only">(current)</span></a>
-      </li>
-      <li class="nav-item">
-        <a class="nav-link" href="https://ygobbs.com/" target="_blank">社区</a>
-      </li>
-    </ul>
+    <div class="collapse navbar-collapse" id="navbarsExampleDefault">
+      <ul class="navbar-nav mr-auto">
+        <li class="nav-item active">
+          <a class="nav-link" href="#">首页 <span class="sr-only">(current)</span></a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="https://ygobbs.com/" target="_blank">社区</a>
+        </li>
+      </ul>
+    </div>
   </div>
 </nav>
 
@@ -31,10 +32,11 @@
           <a class="btn btn-primary btn-lg" href="https://wudizhanche.mycard.moe/download?platform=win32" role="button">立即安装</a>
         </p>
         <p>
-          萌卡平台支持 <a href="https://wudizhanche.mycard.moe/download?platform=win32">Windows</a> 与 <a href="https://wudizhanche.mycard.moe/download?platform=darwin">Mac</a> 操作系统。</p>
+          萌卡平台支持 <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">
-        <img src="http://i.zgjm.org/uploads/allimg/140118/1334551250-0.jpg">
+      <div class="col" id="pic">
+        <img src="images/MyCardProduct.png">
       </div>
     </div>
   </div>

styles.css

@@ -4,3 +4,12 @@ body {
   padding-top: 2rem;
   font-size: 15px;
 }
+
+.bg-faded {
+  background: linear-gradient( to bottom, #f7f7f7, #eee );
+}
+
+.jumbotron {
+  /*background: linear-gradient( to bottom, #f7f7f7, #eee );*/
+  background: linear-gradient( 150deg, #f0c3c2, #e0efd1, #9ae2d3 );
+}