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."
@@ -44,7 +45,8 @@
     "CardAction1":"安装萌立方ACG平台",
     "CardAction2":"欢迎勾搭合作",
     "CardAction3":"加入萌立方社区",
-    "CardAction4":"其他功能目标",
+    "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;
+}
+