Merge branch 'main' of https://github.com/sonejamohit/cluboCMS

sonejamohit · Apr 17, 2022 · 3cc00ae · 3cc00ae
2 parents cc7286a + 6721bed
commit 3cc00ae
Show file tree

Hide file tree

Showing 20 changed files with 1,232 additions and 367 deletions.
diff --git a/src/App.css b/src/App.css
@@ -4,6 +4,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
+
 }
 
 .App-logo {

diff --git a/src/App.js b/src/App.js
@@ -3,17 +3,18 @@ import './App.css';
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import Navbar from "./component/Navbar";
 import Home from './pages/home';
-import About from './pages/about';
+import Event from './pages/event';
 import Login from './pages/login';
 import Contact from './pages/contact';
 const App = () => {
+
   return (
     <div>
     <Router>
       <Navbar />
       <Routes>
         <Route exact path="/"  element={<Home/>} />
-        <Route  path="/about"  element={<About/>} />
+        <Route  path="/event"  element={<Event/>} />
         <Route  path="/login"  element={<Login/>} />
         <Route exact path="/contact"  element={<Contact/>} />
       </Routes>

diff --git a/src/clubo_.png b/src/clubo_.png
diff --git a/src/component/Navbar.js b/src/component/Navbar.js
@@ -1,4 +1,5 @@
 import React from "react";
+// import style from './nav.css';
 import {
   AppBar,
   Toolbar,
@@ -7,52 +8,90 @@ import {
   makeStyles,
 } from "@material-ui/core";
 import { Link } from "react-router-dom";
-
 const useStyles = makeStyles((theme) => ({
   navlinks: {
     marginLeft: theme.spacing(10),
     display: "flex",
   },
- logo: {
+  logo: {
+    position: "relative",
+    left: "50px",
+    fontSize: "30px",
     flexGrow: "1",
     cursor: "pointer",
+    color: "#e3e4e4",
+  },
+  toolbar: {
+    margin: "10px",
+    padding: "8px",
   },
   link: {
     textDecoration: "none",
-    color: "white",
-    fontSize: "20px",
-    marginLeft: theme.spacing(15),
+    display: "flex",
+    borderRadius: "20px",
+    color: "White",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: "14px",
+    paddingLeft: "18px",
+    paddingRight: "18px",
+    marginLeft: theme.spacing(8),
     "&:hover": {
-      color: "yellow",
-      borderBottom: "1px solid white",
+      color: "#7b92cd",
+      background: "#fff",
+      // margin: "13px",
+      // border: "1px solid white",
+      // paddingright: "3px",
+      transition: "300ms",
+      // Radius:"5px",
     },
   },
+  login: {
+    textDecoration: "none",
+    display: "flex",
+    color: "White",
+    background: "#7b92cd",
+    borderRadius: "14px",
+    fontSize: "14px",
+    padding: "8px",
+    marginLeft: theme.spacing(8),
+    "&:hover": {
+      color: "#000"
+    }
+  }
 }));
 
 function Navbar() {
   const classes = useStyles();
-
+  const [isOpen, setIsOpen] = React.useState(false);
+  const toggling = () => setIsOpen(!isOpen);
+  const logoStyle = {
+    height: "40px",
+    position: "absolute",
+    top: "12px",
+  }
   return (
-    <AppBar position="static">
+    <AppBar position="static" style={{ "background-color": "#3a3f6d" }}>
       <CssBaseline />
       <Toolbar>
+        <img src="https://i.ibb.co/sstDvs9/clubo.png" alt="clubo" style={logoStyle}></img>
         <Typography variant="h4" className={classes.logo}>
-          Clubo
+          <a>CMS</a>
         </Typography>
-          <div className={classes.navlinks}>
-            <Link to="/" className={classes.link}>
-              Home
-            </Link>
-            <Link to="/about" className={classes.link}>
-              About
-            </Link>
-            <Link to="/contact" className={classes.link}>
-              Contact
-            </Link>
-            <Link to="/login" className={classes.link}>
-              Login/SignUp
-            </Link>
-          </div>
+        <div className={classes.navlinks}>
+          <Link to="/" className={classes.link}>
+            Home
+          </Link>
+          <Link to="/event" className={classes.link}>
+            Events
+          </Link>
+          <Link to="/contact" className={classes.link}>
+            Members
+          </Link>
+          <Link to="/login" className={classes.login} >
+            Login/SignUp
+          </Link>
+        </div>
       </Toolbar>
     </AppBar>
   );

diff --git a/src/index.css b/src/index.css
@@ -8,6 +8,7 @@ body {
 }
 .highlight {
   color:red;
+  border-radius: 0px;
 }
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',