forget password page

package.json

@@ -15,7 +15,8 @@
     "react-icons": "^3.11.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "^4.0.3",
-    "react-scroll": "^1.8.1"
+    "react-scroll": "^1.8.1",
+    "reactstrap": "^8.9.0"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.js

@@ -16,6 +16,7 @@ import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
 import SignUp from './Components/SignupLogin/SignUp';
 import Login from './Components/SignupLogin/Login';
 import PageNotFound from './Components/Error/PageNotFound';
+import Forget from './Components/Forget/Forget';
 
 function App() {
   return (
@@ -33,6 +34,7 @@ function App() {
           />
           <Route exact path="/signup" component={SignUp} />
           <Route exact path="/login" component={Login} />
+          <Route exact path="/forget" component={Forget}/>
           <Route
             exact
             path="/viewopportunity"

src/CSS/Forget.module.css

@@ -0,0 +1,79 @@
+.card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    width: 750px;
+    margin-top: 100px;
+    padding: 10px;
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+}
+
+h1 {
+    color: #008dc8;
+}
+
+Form {
+    padding-top: 20px;
+    padding-right: 40px;
+    padding-bottom: 10px;
+    padding-left: 40px;
+}
+
+.button {
+    position: relative;
+    /* float: right; */
+    margin-top: 20px;
+    /* margin-right: 10%; */
+    padding: 5px 30px 5px 30px;
+    color: #fff;
+    font-size: 20px;
+    text-align: center;
+    background-color: #008dc8;
+    border: none;
+    border-radius: 50px;
+    box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.7);
+    cursor: pointer;
+    transition: all 0.5s;
+}
+
+.button:hover {
+    text-decoration: none;
+    background: #55b1eb;
+    background-image: -webkit-linear-gradient(top, #55b1eb, #2389c4);
+    background-image: -moz-linear-gradient(top, #55b1eb, #2389c4);
+    background-image: -ms-linear-gradient(top, #55b1eb, #2389c4);
+    background-image: -o-linear-gradient(top, #55b1eb, #2389c4);
+    background-image: linear-gradient(to bottom, #55b1eb, #2389c4);
+}
+
+  /* make outline none when button gets clicked */
+.button:focus {
+    outline: none;
+}
+
+.card a {
+    color: #008dc8;
+    text-decoration: none !important;
+    cursor: pointer;
+}
+
+.card a:hover {
+    text-decoration: none;
+}
+
+.reactIcons {
+    cursor: pointer;
+}
+.inputitem {
+    font-size: 22px;
+    color: #000;
+    padding: 18px 22px;
+    font-size: 20px;
+    margin-bottom: 17px;
+    border-radius: 10px;
+    display: block;
+    width: 500px; 
+    height: 60px;
+    font-family: 'Montserrat', sans-serif; 
+}  

src/Components/Forget/Forget.js

@@ -0,0 +1,61 @@
+import React, { useState } from 'react';
+import styles from '../../CSS/Forget.module.css';
+import { Form, Card, Button, Row, InputGroup } from 'react-bootstrap';
+import { GoogleLogin } from 'react-google-login';
+import { BsEye, BsEyeSlash } from "react-icons/bs";
+import forget from '../Forget/forget.png' ;
+import Navbar from '../HomePage/Sections/Navbar';
+
+const Forget = () => {
+  const [showPassword, setShowPassword] = useState(false);
+  const handleShowPassword = () => setShowPassword(prevShowPassword => !prevShowPassword);
+
+  return (
+      <>
+      <Navbar/>
+    <Row className="justify-content-md-center">
+      <Card className={styles.card}><br></br>
+        <h1>Forget Password</h1>
+        <img src={forget} alt="forget " height="430px" width="500px" className="mt-3 img" />
+        <h4 className="text-muted">
+          ** Regenerate Password **
+        </h4>
+        <Form >
+          <Form.Group controlId="fname">
+            <Form.Control type="text" placeholder="Enter Your Name" className={styles.inputitem}/>
+          </Form.Group>
+
+          <Form.Group controlId="email">
+            <Form.Control type="email" placeholder="[email protected]" className={styles.inputitem} />
+          </Form.Group>
+
+          <Form.Group controlId="passWord">
+            <InputGroup>
+              <Form.Control type={showPassword ? 'text' : 'password'}  placeholder="Password" className={styles.inputitem}/>
+              <InputGroup.Append className={styles.reactIcons} onClick={handleShowPassword}>
+                <InputGroup.Text>
+                  {showPassword ? <BsEyeSlash /> : <BsEye />}
+                </InputGroup.Text>
+              </InputGroup.Append>
+            </InputGroup>
+          </Form.Group>
+
+          <Form.Group controlId="c_passWord">
+            <Form.Control type="password" placeholder="Confirm Password" className={styles.inputitem} />
+          </Form.Group>
+        </Form>
+        <Button size="md" className={styles.button}>
+        <a href="/login" style={{color:"white"}}>Submit</a>
+        </Button>
+
+        <p>OR</p>
+        <GoogleLogin buttonText="Sign in with Google" />
+        <br></br>
+      </Card>
+    </Row>
+    <br></br> <br></br>
+    </>
+  );
+};
+
+export default Forget;

src/Components/HomePage/Sections/Navbar.js

@@ -17,7 +17,7 @@ function navbar() {
       <Navbar.Collapse id="responsive-navbar-nav">
         <Nav className="ml-auto">
           <Link smooth={true} duration={1000} to="home">
-            <a className={styles.NavLinks}>Home</a>
+            <a className={styles.NavLinks} >Home</a>
           </Link>
           <Link smooth={true} offset={-90} duration={1000} to="about">
             <a className={styles.NavLinks}>About Us</a>

src/Components/SignupLogin/Login.js

@@ -29,7 +29,7 @@ const Login = () => {
               </InputGroup.Append>
             </InputGroup>
 
-            <a href="#">
+            <a href="/forget">
               <small>Forgot password ?</small>
             </a>
           </Form.Group>