Sockets-Bita-Rosalyn

.gitignore

@@ -15,6 +15,7 @@
 .env.development.local
 .env.test.local
 .env.production.local
+.env
 
 npm-debug.log*
 yarn-debug.log*

package.json

@@ -3,14 +3,28 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "axios": "^0.19.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
+    "react-router-dom": "^5.0.1",
     "react-scripts": "3.0.1"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
   }
 }

src/App.css

@@ -1,28 +1,41 @@
 .App {
+  background-color: white;
   text-align: center;
 }
 
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
-}
-
 .App-header {
   background-color: #222;
-  height: 150px;
-  padding: 20px;
+  padding-bottom: 0.5rem;
   color: white;
+  position: fixed;
+  width: 100%;
+  z-index: 100;
+}
+
+.App-main {
+  padding-top: 8rem;
+  padding-bottom: 5rem;
+  text-align: center;
+  background-color: #a4af69;
+  font-size: 12px;
 }
 
-.App-title {
-  font-size: 1.5em;
+.App-title a {
+  text-align: center;
+  color: #fff;
+  text-decoration: none;
 }
 
-.App-intro {
-  font-size: large;
+.movie-display {
+  max-width: 50rem;
+  margin: auto;
+  font-size: 12px;
 }
 
-@keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+.movie-body {
+  display: grid;
+  grid-template-columns: 100px 100px 100px;
+  grid-gap: 10px;
+  background-color: #fff;
+  color: #444;
 }