Sandeep kumar murmu

package.json

@@ -3,9 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@material-ui/core": "^4.12.3",
     "@testing-library/jest-dom": "^5.16.3",
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^0.26.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "5.0.0",

public/index.html

@@ -5,6 +5,10 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
+    <script
+      src="https://kit.fontawesome.com/0bb612f9ca.js"
+      crossorigin="anonymous"
+    ></script>
     <meta
       name="description"
       content="Web site created using create-react-app"

src/App.js

@@ -1,23 +1,12 @@
-import logo from './logo.svg';
-import './App.css';
+// import logo from './logo.svg';
+// import "./App.css";
+import { Header } from "./components/header/Header";
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <Header />
+      conncted
     </div>
   );
 }

src/components/header/css/debounce.css

@@ -0,0 +1,31 @@
+.debounce_img img {
+  height: 80px;
+  width: 60px;
+}
+
+.debounce {
+  border: 1px solid white;
+}
+.debounce_img,
+.debounce_title {
+  border-bottom: 1px solid rgb(87, 79, 79);
+}
+.debounce_title p {
+  margin-left: 5px;
+}
+
+.debounce_button button {
+  background-color: rgb(200, 132, 15);
+  border: none;
+  width: 100px;
+  height: 40px;
+  border-radius: 4px;
+  transition: 0.5s;
+}
+
+.debounce_title p:hover {
+  text-decoration: underline;
+}
+.debounce_button button:hover {
+  background-color: rgb(97, 64, 8);
+}

src/components/header/css/header.css

@@ -0,0 +1,180 @@
+* {
+  margin: 0;
+  padding: 0%;
+  background-color: black;
+}
+input {
+  border: none;
+  background-color: white;
+}
+a {
+  background-color: black;
+}
+.logoYellow {
+  margin-top: 0.3%;
+  width: 60px;
+
+  height: 45px;
+}
+.menuLogo {
+  width: 8%;
+}
+.menuContainer {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  column-gap: 4px;
+  text-decoration: none;
+  width: 70px;
+  height: 30px;
+  color: white;
+  padding-left: 3px;
+  padding-right: 1px;
+  border-radius: 4px;
+  transition: 0.2s;
+  margin-top: 18%;
+  margin-left: 15%;
+}
+
+.mainContainer {
+  margin: auto;
+  /* border: 1px solid green; */
+  /* height: ; */
+  display: flex;
+  flex-direction: row;
+  background-color: transparent;
+  justify-content: space-around;
+  position: relative;
+  max-width: 80%;
+}
+.search {
+  margin-top: 0.1%;
+  margin-left: 1%;
+  padding-left: 8px;
+  padding-right: 8px;
+  display: flex;
+  flex-direction: row;
+  height: 35px;
+  background-color: white;
+  border-radius: 4px;
+  width: 55%;
+  margin-top: 1%;
+}
+
+.searchIcon {
+  margin-left: 5%;
+  margin-top: 1.3%;
+  display: block;
+  background-color: white;
+}
+.searchOption {
+  display: grid;
+  text-align: center;
+  margin-top: 0.5%;
+  background-color: white;
+}
+#movie {
+  background-color: white;
+}
+#searchInput {
+  margin-left: 1%;
+  width: 90%;
+}
+#after {
+  display: none;
+}
+.imdbBlack,
+.WatchList {
+  background-color: black;
+  color: white;
+  width: 80px;
+  height: 30px;
+  display: grid;
+  align-items: center;
+  text-align: center;
+  margin-top: 1%;
+  border-radius: 4px;
+}
+.imdbBlack p {
+  font-weight: bold;
+}
+#imdbBlack_option {
+  width: 40px;
+  background-color: black;
+  color: white;
+  border: none;
+  font-weight: bold;
+}
+
+.menuContainer:hover,
+.imdbBlack:hover,
+.imdbBlack p:hover {
+  background-color: rgb(65, 59, 59);
+}
+
+#after {
+  margin: 0;
+  padding: 1%;
+}
+
+.mainContainer_after {
+  display: none;
+}
+.mainContainer_after {
+  background-color: black;
+
+  /* padding-left: 4px;
+  padding-right: 4px; */
+}
+
+.left {
+  /* border: 1px solid white; */
+  width: 30%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+}
+.right {
+  /* border: 1px solid white; */
+  width: 50%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+}
+.select_after {
+  border: none;
+  font-weight: bold;
+}
+.p_after_container,
+.search_after_container {
+  display: grid;
+  text-align: center;
+  align-items: center;
+}
+.search_after {
+  margin-top: 10%;
+}
+.menu_container {
+  margin-top: 10%;
+}
+.debounce_table {
+  /* border: 1px solid white; */
+  position: relative;
+  z-index: 30px;
+  transition: 1s;
+  margin-left: 25.29%;
+}
+
+
+@media only screen and (max-width: 600px) {
+  .mainContainer {
+    display: none;
+  }
+  .mainContainer_after {
+    display: block;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    color: white;
+  }
+}

src/components/header/css/menu.css

@@ -0,0 +1,57 @@
+* {
+  padding: 0;
+  margin: 0;
+}
+
+.row_1 {
+  margin: auto;
+  margin-top: 3%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  max-width: 78%;
+}
+
+.colum_head_left img {
+  width: 80px;
+}
+.colum_head_right button {
+  width: 58px;
+  height: 58px;
+  background-color: yellow;
+  border-radius: 40px;
+  color: rgb(122, 35, 35);
+  font-weight: bold;
+}
+.row_2 {
+  display: flex;
+  flex-direction: row;
+  max-width: 75%;
+  justify-content: space-between;
+  margin: auto;
+}
+.colunm {
+  padding-top: 2%;
+  display: flex;
+  flex-direction: column;
+  color: white;
+}
+ul {
+  list-style-type: none;
+  line-height: 40px;
+}
+
+li:hover {
+  text-decoration: underline;
+}
+.row_in {
+  padding-top: 8%;
+}
+.icon {
+  width: 60px;
+  height: 60px;
+  background-color: green;
+}
+h2{
+  color: rgb(170, 127, 8);
+}