Ports - Ari and Amy W

.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,30 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "axios": "^0.19.0",
+    "bootstrap": "^4.3.1",
+    "dotenv": "^8.0.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,69 @@
-.App {
-  text-align: center;
+.nav {
+  font-family: 'Nunito', sans-serif;
+  margin-block-end: 1em;
+  justify-content: flex-start;
+}
+
+.nav-item {
+  padding: 10px;
+  font-size: 1.25em;
 }
 
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
+
+
+#search-button {
+  border: 1px solid white;
 }
 
-.App-header {
-  background-color: #222;
-  height: 150px;
-  padding: 20px;
+.nav-link {
   color: white;
 }
 
-.App-title {
-  font-size: 1.5em;
+.nav-link:hover {
+  background-color: white;
+  color: #007bff;
+  border-radius: 0.25rem;
+}
+
+section {
+  margin-top: 1rem;
+  font-family: 'Nunito', sans-serif;
+}
+
+.checkout {
+  margin-top: 1rem;
+  margin-left: 2rem;
+  list-style-type: none;
+  width: 400px;
+  border: 1px solid lightgrey;
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+  border-radius: 0.25em;
+  font-family: 'Nunito', sans-serif;
+  font-size: 1.25em;
+}
+
+li {
+  margin-bottom: 1.5rem;
+}
+
+.homepage {
+  text-align: center;
+  font-family: 'Nunito', sans-serif;
+}
+
+.homepage__title {
+  font-weight: bolder;
+}
+
+.homepage-p {
+  font-size: 1.5rem;
 }
 
-.App-intro {
-  font-size: large;
+img {
+  border-radius: 0.25rem;
 }
 
-@keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+.error {
+  margin-top: 5rem;
 }