Yieni & Ross

package.json

@@ -3,14 +3,34 @@
   "version": "0.1.1",
   "private": true,
   "dependencies": {
+    "3": "^2.1.0",
+    "-": "0.0.1",
+    "axios": "^0.19.2",
+    "bootstrap": "^4.5.0",
+    "jquery": "^1.9.1",
     "react": "^16.13.1",
+    "react-bootstrap": "^1.0.1",
     "react-dom": "^16.13.1",
+    "react-router": "^5.2.0",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.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,242 @@
-.App {
+
+body {
+  margin-bottom: 0;
+}
+.input-group-append .btn {
+  background-color: #159585;
+  color: whitesmoke;
+}
+.camera img{
+  height: 65vh;
+  width: 100%;
+}
+.form-group{
+  margin: 10px;
+}
+.form-group button{
+  background-color: black;
+}
+.header {
+  padding-top: 2vh;
   text-align: center;
+  background: #159585;
+  color: whitesmoke;
+  height: 80px;
 }
 
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
+.header a{
+  color: whitesmoke;
+}
+
+.header a:hover{
+  color: #F5D5C9;
+  text-decoration: none;
+}
+
+.header h2{
+  font-family: 'MuseoModerno', cursive;
+  font-weight: 900;
+}
+
+.details{
+  text-align: center;
+}
+.note {
+  font-family: 'Open Sans', sans-serif;
+  background:#F5D5C9;
+  height: 100%;
+  text-align: center;
+  font-size: 25px;
+  color: rgb(99, 103, 104);
+  font-weight: 400; 
+  margin-bottom: 0;
+}
+.note h6{
+  margin-bottom: 2px;
+}
+.note p {
+  margin:2px;
+}
+.note button{
+  font-family: 'Open Sans', sans-serif;
+  margin: 2px;
+  background-color:whitesmoke;
+  color: rgb(99, 103, 104);
+  border-color:rgb(99, 103, 104);
+  border: solid 2px;
+}
+.navbar {
+  display: flex;
+  list-style: none;
+  background-color: rgb(99, 103, 104);
+  justify-content: center;
+  margin: 0;
+}
+
+.navbar a {
+  font-family: 'MuseoModerno', cursive;
+  color: whitesmoke;
+  padding: 14px 20px;
+  text-decoration: none;
+  text-align: center;
+  font-size: 20px;
+  font-weight: 300px;
+}
+
+.navbar a:hover {
+  text-decoration: none;
+  color: #F5D5C9;
+}
+/* Style the navigation bar links */
+.navbar ul {
+  list-style: none;
+}
+
+.row {  
+  display: flex;
+  flex-wrap: wrap;
+}
+
+@media screen and (max-width: 700px) {
+  .row, .navbar {   
+    flex-direction: column;
+  }
+}
+.table{
+  text-align: center;
+}
+
+.table th{
+  font-family: 'MuseoModerno', cursive;
+}
+table .btn{
+  margin-top: 6px;
+  background-color: #159585;
+  color: whitesmoke;
+  border-color: whitesmoke;
+}
+table .hover-row{
+  height: 20px;
+  font-family: 'Open Sans', sans-serif;
+}
+
+.movie-list {
+  display: flex;
+  flex-wrap: wrap;
+}
+.detail-outer-card{
+  background-color: whitesmoke;
+  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+  transition: 0.3s;
+  border-radius: 5px;
+  padding: 10px;
+  width: 40vw;
+  margin-right: auto;
+  margin-left: auto;
+  margin-top: 5%;
+  text-align: center;
+}
+.detail-card-info-text{
+  padding-top: 55%
+}
+.detail-card-info-text p{
+  font-weight: 500;
+  font-style: oblique;
+}
+
+.detail-card-container {
+  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+  transition: 0.3s;
+  height: 40vh;
+  border-radius: 10px;
+  background-color: #159585;
+  margin: 15px;
+  display: flex;
+  object-fit: cover;
+}
+
+.detail-card-container img {
+ width: 60%;
+ border-top-left-radius:  10px;
+ border-bottom-left-radius:  10px;
+}
+
+.detail-card-info {
+  width: 400px;
+  color: whitesmoke;
+  font-size: 15px;
+  text-align: center;
+  padding: 2px 16px;
+  font-family: 'MuseoModerno', cursive;
+  overflow-y: scroll;
+}
+
+.detail-card-info p {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.detail-outer-card button{
+  margin: 3px;
+}
+
+******
+.card-info-text p{
+  font-weight: 500;
+  font-style: oblique;
 }
 
-.App-header {
-  background-color: #222;
-  height: 150px;
-  padding: 20px;
-  color: white;
+.outer-card{
+  background-color: whitesmoke;
+  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+  transition: 0.3s;
+  border-radius: 5px;
+  padding: 10px;
+  width: 30%;
+  margin: 20px;
+  text-align: center;
+}
+.card-info-text{
+  padding-top: 55%
+}
+.outer-card button{
+  font-family: 'Open Sans', sans-serif;
+  background-color:white;
+  color: rgb(99, 103, 104);
+  border-color:rgb(99, 103, 104);
+  border: solid 2px;
+}
+.card-container {
+  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+  transition: 0.3s;
+  height: 40vh;
+  border-radius: 10px;
+  background-color: #159585;
+  margin: 15px;
+  display: flex;
+  object-fit: cover;
 }
 
-.App-title {
-  font-size: 1.5em;
+.card:hover {
+  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
 }
 
-.App-intro {
-  font-size: large;
+.card-container img {
+ width: 100%;
+ border-top-left-radius:  10px;
+ border-bottom-left-radius:  10px;
 }
 
-@keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+.card-info {
+  width: 400px;
+  color: whitesmoke;
+  font-size: 15px;
+  text-align: center;
+  padding: 2px 16px;
+  font-family: 'MuseoModerno', cursive;
+  overflow-y: scroll;
+}
+
+.card-info p {
+  font-family: 'Open Sans', sans-serif;
 }
+