Add Background and adjust

i18n.json

@@ -11,7 +11,7 @@
     "CardTitle1": "Enter the Doujin World",
     "CardTitle2": "For all Doujin Believers",
     "CardTitle3": "No Longer Alone",
-    "CardTitle4": "MoeCube Brings Light to the Darkness",
+    "CardTitle4": "Bring Light to the Darkness",
     "CardContent1":"New to Doujin world? No problem!\nMoeCube is the best place for you!\nNo more finding doujins games from ten different websites!\nMoeCube collect the best doujins for you!\n( Yes! We also make our own doujin games too! )",
     "CardContent2":"If you are a doujin creator like us,\nyou may meet the same problem as we do.\nDoujin is hard, lonely and lack of modern platform,\nMoeCube is born to solve this problem.\nLet's get together and make doujin better!",    
     "CardContent3":"MoeCube connects people togehter.\nWe'll have communities, chatrooms, friends systems...etc.\nHere, meet the friend you like will be easy.\nWe wish you will no longer feel lonely!",
@@ -19,7 +19,8 @@
     "CardAction1":"Download",
     "CardAction2":"Contact Us (Offer Help, Cooperation)",
     "CardAction3":"MoeCube Community",           
-    "CardAction4":"See other Will-Have Functions",
+    "CardAction4":"Give us suggestions",
+    "WillHaveFunctions":"See other Will-Have Functions",
     "Welcome":"Welcome to MoeCube",
     "IsRegisted":" player is registered.",
     "IsPlaying":" player is playing."
@@ -43,8 +44,9 @@
     "CardContent4":"萌立方从诞生起就考虑到了为同人服务的复杂性与个性化需求，\n于是萌立方为满足各种奇奇怪怪需求而开发了许多的黑科技！\n这些点点滴滴的积累，或许就能够带动同人产业革新哦！\n已实装黑科技功能: \n",
     "CardAction1":"安装萌立方ACG平台",
     "CardAction2":"欢迎勾搭合作",
-    "CardAction3":"加入萌立方社区",           
-    "CardAction4":"其他功能目标",
+    "CardAction3":"加入萌立方社区",
+    "CardAction4":"向萌立方许愿新功能",
+    "WillHaveFunctions":"其他功能目标",
     "Welcome":"欢迎加入萌立方!",
     "IsRegisted":"位萌新已加入萌立方",
     "IsPlaying":"位爱的战士正在线进行游戏"

src/App.css

@@ -16,18 +16,19 @@
 }
 
 .App-Poster {
-  width: 100%; 
+  margin-top: 10px;
+  width: 295px; 
   height: auto;
   max-width: 100%; 
 }
 
-.App-Poster-Content .ant-btn {
-  margin: 1.2rem 0
-}
-
 .App-Content1 {
-  padding: 50px;
-  background: #333;
+  margin-top: 64px;
+  height:450px;
+  background: url(../public/FrontPageBackGround.jpg) 100%/cover;
+  background-position: center;
+  overflow:hidden;
+  width:100%;
 }
 
 .App-Content2 {
@@ -59,19 +60,29 @@
 .font-C-Gray{
     color:#ccc;
 }
+
+.App-Poster-Content
+{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
 .App-Poster-Content .title{
-  font-size: 2.5rem; 
-  padding: .8rem 0;
+  margin-top: -20px;
+  margin-bottom: -5px;
+  font-size: 1.3rem;
   color: #eee
 }
 .App-Poster-Content a{
-  padding: 0 .5vw
+  padding: 0 .5vw;
+  margin-top: 8px
 }
 
 .App-Poster-Content .title .sub{
-   font-size: 1rem;
+   font-size: 0.7rem;
    color: #eee;
-   padding: 0 1vw
+   padding: 0 0.4vw
 }
 
 .ant-layout-content>p{
@@ -92,3 +103,8 @@
   padding-bottom:0px;
 }
 
+#Card4Button
+{
+  margin-top: 50px;
+}
+