navbar fixed, forntend from contribute fixed

src/App.js

@@ -1,5 +1,6 @@
 import logo from './logo.svg';
 import './App.css';
+import 'semantic-ui-css/semantic.min.css'
 import './Pages/Contribute/Init/Init.css';
 import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
 import Home from "./Pages/Home/home";
@@ -14,6 +15,7 @@ import CIVIL from "./Pages/CIVIL/civil";
 import Nomatch from "./Pages/Nomatch/Nomatch";
 import Navbar from "./components/Navbar/Navbar"
 
+
 function App() {
   return (
     <div>

src/Pages/Contribute/Init/Init.css

@@ -1,8 +1,8 @@
 .Init {
-    background-color: black;
+    background-color: #282c34;
 }
 .Input{
-    background-color:black !important;
+    background-color:#282c34 !important;
 }
 .ui.input>input{
     border: 1px solid #547CF5 !important;
@@ -11,12 +11,12 @@
 .ui.selection.dropdown{
     background:#547CF5 !important;
     border: 1px solid #547CF5 !important;
-    color: black !important;
+    color: #282c34 !important;
 }
 .ui.button{
     background:#547CF5 !important;
     font-weight: bold !important;
-    color: black !important;
+    color: #282c34 !important;
 }
 .ui.card, .ui.cards>.card {
     box-shadow: none !important;

src/Pages/Contribute/Init/Init.js

@@ -6,7 +6,7 @@ const Init = () => {
     const[next, setNext]= useState(false)
     return (
         <div 
-            style={{backgroundColor:"black"}}
+            style={{backgroundColor:"#13141C", zIndex:"1", position:"relative" }}
         >
         <Grid >
             <Grid.Row>
@@ -15,7 +15,7 @@ const Init = () => {
                 </Grid.Column>
             </Grid.Row>
             {!next &&
-            <Grid.Row>
+            <Grid.Row style={{paddingBottom:0}}>
                 <Grid.Column style={{marginLeft:"6rem"}}>   
                     <Form>
                         <div style={{fontFamily:"Sans-serif", color:"white", marginBottom:"0.6rem"}}>Name *</div>
@@ -57,10 +57,10 @@ const Init = () => {
                 </Grid.Column>
             </Grid.Row>}
             {next &&
-            <Grid.Row>
+            <Grid.Row >
                 <Grid.Column style={{marginLeft:"6rem"}}>   
                     <Form>
-                        <div style={{fontFamily:"Sans-serif", color:"white", marginBottom:"0.6rem", marginTop:"4rem"}}>Subject *</div>
+                        <div style={{fontFamily:"Sans-serif", color:"white", marginBottom:"0.6rem"}}>Subject *</div>
                         <Select 
                             required 
                             placeholder='Choose the subject'

src/Pages/Home/home.css

@@ -5,6 +5,9 @@ body{
     height: 100%;
     margin: 0;
     background-color: #13141C;
+    position: relative;
+    z-index: 1;
+
 }
 
 p{

src/Pages/Home/home.js

@@ -1,9 +1,11 @@
 import React from 'react';
 import './home.css';
+import Navbar from "../../components/Navbar/Navbar"
 
 function Home(){
     return (
-        <div id="container">    
+        <>
+        <div id="container" style={{marginLeft:"2rem"}}>    
         <h1 id="heythere">HEY THERE,</h1>
 
 
@@ -39,6 +41,7 @@ function Home(){
 
 
     </div>
+    </>
 
     )
 }

src/components/Navbar/Navbar.css

@@ -1,5 +1,5 @@
 .nav-bar {
-    position: absolute;
+    /* position: absolute; */
     height: 100%;
     width: 30%;
     left: -27%;
@@ -14,6 +14,8 @@
     grid-template-columns: 100% ;
     font-family: 'Poppins', sans-serif;
     padding-right: 20px;
+    z-index: 10000;
+    position: fixed;
 }
 
 .nav-bar .navigations {

src/components/Navbar/Navbar.js

@@ -1,7 +1,7 @@
 import './Navbar.css';
 
 function Navbar() {
-    return <div className="nav-bar">
+    return <div className="nav-bar" fluid>
         <div className="navigations">
             <div className="subject-links">
                 <div className="nav-link">