Merge pull request #2 from kritisoni19/master

add home comp and fix UI issue

Author: sanjeev0007

src/Home.js

@@ -0,0 +1,11 @@
+import React from "react";
+
+function Home(){
+    return(
+        <>
+            <h2 style={{color:'red',color: '#ffaa09', fontSize: '40px', fontWeight: '900',textAlign:'center'}}> Let's Play!</h2>
+        </>
+    )
+}
+
+export default Home;

src/index.css

@@ -1,7 +1,6 @@
 body {
   font: 14px "Century Gothic", Futura, sans-serif;
   margin-top: 130px;
-  margin-left: 520px;
   background-image: url(image/ppp.jpg);
   background-position: center;
   background-repeat: no-repeat;
@@ -24,6 +23,8 @@ ul {
   font-size: 40px;
   color: white;
   font-weight: 800;
+  background: black;
+  padding: 10px;
 }
 
 .square {
@@ -85,6 +86,10 @@ ul {
 .game {
   display: flex;
   flex-direction: row;
+  width: 500px;
+  margin: 0 auto;
+  align-items: center;
+  justify-content: center;
 }
 
 .game-info {

src/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
+import Home from './Home';
 
 function Square(props) {
     return (
@@ -107,18 +108,24 @@ class Game extends React.Component {
                 <div className="game-board">
                     <Board />
                 </div>
-                <div className="game-info">
-                    <div>{/* status */}</div>
-                    <ol>{/* TODO */}</ol>
-                </div>
+                {/* <div className="game-info">
+                    <div> status </div>
+                    <ol> TODO </ol>
+                </div> */}
             </div>
         );
     }
 }
 
+
 // ========================================
 
 ReactDOM.render(
-    <Game />,
+    <>
+    <Home/>
+      <Game />
+    
+    </>
+  ,
     document.getElementById('root')
 );