initial commit

kartikth40 · Jun 4, 2021 · 36f0168 · 36f0168
1 parent 9fd992f
commit 36f0168
Show file tree

Hide file tree

Showing 22 changed files with 282 additions and 250 deletions.
diff --git a/.gitignore b/.gitignore
@@ -13,6 +13,7 @@
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local

diff --git a/README.md b/README.md
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "movies-info-site",
+  "name": "movie-town",
   "version": "0.1.0",
   "private": true,
   "dependencies": {

diff --git a/public/index.html b/public/index.html
@@ -2,42 +2,13 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
     <title>React App</title>
+    <link rel="stylesheet" href="./style.css" />
+    <script src="../src/index.js" type="text/jsx" defer></script>
   </head>
   <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
diff --git a/public/robots.txt b/public/robots.txt
diff --git a/public/style.css b/public/style.css
@@ -0,0 +1,144 @@
+@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap");
+
+html {
+  font-size: 20px;
+}
+body {
+  font-family: "Quicksand", sans-serif;
+  color: white;
+  background-color: #343434;
+  margin: 0;
+}
+
+.app-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.header {
+  position: fixed;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 90vw;
+  top: 2%;
+  padding: 0 1rem;
+  border-radius: 4rem;
+  margin-bottom: 1rem;
+  z-index: 2;
+  background-color: #555555;
+  box-shadow: 0 5px rgb(70, 70, 70);
+}
+
+.title {
+  font-weight: bold;
+  padding: 0.5rem;
+  cursor: pointer;
+}
+.search-box input {
+  color: rgba(255, 255, 255, 0.5);
+  background-color: rgba(70, 70, 70, 0.534);
+  border-radius: 10px;
+  padding: 5px 10px;
+  outline: none;
+  border: none;
+}
+.movie-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin-top: 3rem;
+}
+
+.movie-card {
+  position: relative;
+  width: 10rem;
+  margin: 0.5rem;
+  border-radius: 5px;
+  overflow: hidden;
+}
+
+.movie-poster img {
+  max-width: 100%;
+  height: 15rem;
+  object-fit: cover;
+}
+
+.movie-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  min-height: 100%;
+  background-color: #7e7e7e2c;
+  padding: 0.5rem;
+}
+
+.movie-info h1 {
+  font-size: 0.7rem;
+}
+
+.movie-info span {
+  font-size: 0.7rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #7e7e7e2d;
+  padding: 0.1rem;
+  border-radius: 50%;
+  width: 2rem;
+  min-width: 2rem;
+  height: 2rem;
+  margin-left: 0.5rem;
+  box-shadow: 2px 2px 5px rgb(51, 51, 51);
+}
+.overview {
+  font-size: 0.7rem;
+  background-color: grey;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  overflow: auto;
+  max-height: 100%;
+  border-radius: 5px 5px 0 0;
+  padding: 0 1rem 0;
+  transform: translateY(105%);
+}
+
+.movie-card:hover .overview {
+  transition: transform 0.5s ease-in-out;
+  transform: translateY(0);
+}
+
+.tag {
+  font-weight: bold;
+}
+.green {
+  color: rgb(0, 255, 0);
+}
+
+.orange {
+  color: orange;
+}
+
+.red {
+  color: rgb(255, 66, 66);
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #d6dee1;
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: #a8bbbf;
+}
diff --git a/src/App.css b/src/App.css
diff --git a/src/App.js b/src/App.js
diff --git a/src/App.test.js b/src/App.test.js