Added Login Page Component

package.json

@@ -3,6 +3,8 @@
  "version": "0.1.0",
  "private": true,
  "dependencies": {
+ "@material-ui/core": "^4.11.0",
+ "@material-ui/icons": "^4.9.1",
  "@testing-library/jest-dom": "^4.2.4",
  "@testing-library/react": "^9.3.2",
  "@testing-library/user-event": "^7.1.2",

public/index.html

@@ -31,6 +31,8 @@
  src="https://use.fontawesome.com/releases/v5.12.1/js/all.js"
  ></script>
 
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
+
  <!-- Bootstrap Scripts -->
  <script
  src="https://code.jquery.com/jquery-3.4.1.slim.min.js"

src/App.css

@@ -25,6 +25,11 @@
  pointer-events: none;
 }
 
+.login-logo{
+ height: 13vmin;
+ pointer-events: none;
+}
+
 @media (prefers-reduced-motion: no-preference) {
  .App-logo {
  animation: App-logo-spin infinite 20s linear;

src/App.js

@@ -1,10 +1,11 @@
 import React from "react";
-import './App.css'
+import './App.css';
 import Footer from "../src/Components/Footer";
 import Navbar from "../src/Components/Navbar/Navbar";
-import Img from "../src/Components/Img.png"
+import Img from "../src/Components/Img.png";
 import background from "../src/Components/images/show_everyone.jpeg";
-import Maincard from "../src/MainpageCards/Maincard"
+import Maincard from "../src/MainpageCards/Maincard";
+import SignInSide from "./Components/login/logIn"; // Login Page Component
 
 function App() {
  return (
@@ -13,10 +14,16 @@ function App() {
  <Navbar></Navbar>
  <img className="image" src={background} alt="background-image" />
  </div>
+
  <div>
  <Maincard></Maincard>
  <br></br>
  </div>
+
+ <div>
+ <SignInSide></SignInSide>
+ </div>
+
  <div className="page-container">
  <div className="content-wrap"></div>
  <div className="Footer-img" style={{backgroundImage: `url(${Img})`}}>