Skip to content

Commit 038cb73

Browse files
harshalhonde21harshalhonde21
committed
update navbar and footer
1 parent 8c6820f commit 038cb73

18 files changed

+1643
-196
lines changed

‎1Application-frontend/package-lock.json

+1,149-81
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎1Application-frontend/package.json

+6-1
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,13 @@
1010
"preview": "vite preview"
1111
},
1212
"dependencies": {
13+
"@emotion/react": "^11.11.1",
14+
"@emotion/styled": "^11.11.0",
15+
"@mui/icons-material": "^5.14.13",
16+
"@mui/material": "^5.14.13",
1317
"react": "^18.2.0",
14-
"react-dom": "^18.2.0"
18+
"react-dom": "^18.2.0",
19+
"react-router-dom": "^6.16.0"
1520
},
1621
"devDependencies": {
1722
"@types/react": "^18.2.15",

‎1Application-frontend/src/App.css

-42
This file was deleted.

‎1Application-frontend/src/App.jsx

+23-5
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,30 @@
1-
import { Fragment, useState } from 'react'
2-
import './App.css'
1+
import { Fragment } from "react";
2+
import { Routes, Route } from "react-router-dom";
3+
import Navbar from "./Component/Navbar";
4+
import Footer from "./Component/Footer";
5+
import Home from "./pages/Home";
6+
import About from "./pages/About";
7+
import Contact from "./pages/Contact";
8+
import Team from "./pages/Team";
9+
import Project from "./pages/Projects";
10+
import Profile from "./pages/Profile";
11+
import "./index.css";
312

413
function App() {
514
return (
615
<Fragment>
7-
<h1 style={{color:'white'}}>Javascript-Mini-Project integrations</h1>
16+
<Navbar />
17+
<Routes>
18+
<Route path="/" element={<Home />} />
19+
<Route path="/about" element={<About />} />
20+
<Route path="/projects" element={<Project />} />
21+
<Route path="/contact" element={<Contact />} />
22+
<Route path="/team" element={<Team />} />
23+
<Route path="/profile" element={<Profile />} />
24+
</Routes>
25+
<Footer />
826
</Fragment>
9-
)
27+
);
1028
}
1129

12-
export default App
30+
export default App;

‎1Application-frontend/src/Component/Footer.jsx

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import { Fragment } from "react";
2+
import '../CSS/Footer.css';
3+
import { Facebook, Twitter, Instagram, LinkedIn} from '@mui/icons-material'; // Import the shoes icon
4+
5+
const Footer = () => {
6+
return (
7+
<Fragment>
8+
<footer className="footer">
9+
<div className="section">
10+
<h2>Thinks Well Javascript Projects</h2>
11+
<div className="email-signup">
12+
<input type="email" placeholder="Enter Your Email" />
13+
<button>Get in touch with us & know us</button>
14+
</div>
15+
</div>
16+
17+
<div className="section">
18+
<h2>Routes</h2>
19+
<ul>
20+
<li>About Us</li>
21+
<li>Services</li>
22+
<li>Get In Touch</li>
23+
<div className="social-icons">
24+
<Facebook />
25+
<Twitter />
26+
<Instagram />
27+
<LinkedIn />
28+
</div>
29+
</ul>
30+
</div>
31+
32+
<div className="section">
33+
<h2>About Us</h2>
34+
<z>Our github</z>
35+
<z>Github stars</z>
36+
<z>Repositories</z>
37+
</div>
38+
39+
<div className="section">
40+
<h2>License</h2>
41+
<ul>
42+
<li>MIT License</li>
43+
<li>Code of Conduct</li>
44+
<li>Contributors</li>
45+
</ul>
46+
</div>
47+
</footer>
48+
</Fragment>
49+
);
50+
};
51+
52+
export default Footer;

‎1Application-frontend/src/Component/Navbar.jsx

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import { Fragment, useState } from "react";
2+
import { NavLink } from "react-router-dom";
3+
import "../CSS/Navbar.css";
4+
import AccountBoxIcon from "@mui/icons-material/AccountBox";
5+
import MenuIcon from "@mui/icons-material/Menu";
6+
import CloseIcon from "@mui/icons-material/Close";
7+
8+
const Navbar = () => {
9+
const [menuOpen, setMenuOpen] = useState(false);
10+
11+
const toggleMenu = () => {
12+
setMenuOpen(!menuOpen);
13+
};
14+
15+
return (
16+
<Fragment>
17+
<nav>
18+
<div className={`main-component ${menuOpen ? "menu-open show" : ""}`}>
19+
<div className="head-main">
20+
<h3 style={{ marginTop: "1rem" }}>
21+
Thinks Well
22+
<br />
23+
<span>JAVASCRIPT PROJECTS</span>
24+
</h3>
25+
</div>
26+
<div className="routes">
27+
<ul className={`navbar_list ${menuOpen ? "menu-opens" : ""}`}>
28+
<li style={{ color: "rgb(41, 6, 241)" }}>
29+
<NavLink to="/">Home</NavLink>
30+
</li>
31+
<li>
32+
<NavLink to="/about">About</NavLink>
33+
</li>
34+
<li>
35+
<NavLink to="/projects">Projects</NavLink>
36+
</li>
37+
<li>
38+
<NavLink to="/contact">Contact</NavLink>
39+
</li>
40+
<li>
41+
<NavLink to="/team">Tech Team</NavLink>
42+
</li>
43+
<li><NavLink to="/profile"><AccountBoxIcon
44+
className="btn1"
45+
style={{ color: "rgb(41, 6, 241)" }}
46+
/></NavLink></li>
47+
</ul>
48+
<div className="button" onClick={toggleMenu}>
49+
{menuOpen ? (
50+
<CloseIcon
51+
className="icon1"
52+
style={{ fontSize: "2rem", color: "rgb(70, 11, 70)" }}
53+
/>
54+
) : (
55+
<MenuIcon
56+
style={{
57+
fontSize: "2rem",
58+
color: "rgb(70, 11, 70)",
59+
zIndex: "-1",
60+
}}
61+
/>
62+
)}
63+
</div>
64+
</div>
65+
</div>
66+
</nav>
67+
</Fragment>
68+
);
69+
};
70+
71+
export default Navbar;

‎1Application-frontend/src/Css/Footer.css

+96
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Croissant+One&family=Inconsolata:wght@200;900&family=Rubik:wght@300&display=swap");
2+
3+
:root {
4+
--color-2: black;
5+
--color-6: whitesmoke;
6+
7+
/* font family */
8+
9+
--font-1: "Bebas Neue", sans-serif;
10+
--font-2: "Croissant One", cursive;
11+
--font-inconsolata: "Inconsolata", monospace;
12+
--font-rubik: "Rubik", sans-serif;
13+
}
14+
15+
/* Footer.css */
16+
.footer {
17+
display: flex;
18+
flex-wrap: wrap;
19+
gap: 130px;
20+
background-color: var(--color-2);
21+
color: var(--color-6);
22+
padding: 85px 35px 35px 35px;
23+
}
24+
25+
.section {
26+
display: flex;
27+
flex-direction: column;
28+
}
29+
30+
z {
31+
font-family: var(--font-2);
32+
font-size: 1rem;
33+
}
34+
35+
.section h2 {
36+
font-family: var(--font-1);
37+
font-size: 1.5rem;
38+
margin-bottom: 10px;
39+
}
40+
41+
.email-signup {
42+
display: flex;
43+
flex-direction: column;
44+
}
45+
46+
.email-signup input[type="email"] {
47+
padding: 10px;
48+
margin-bottom: 10px;
49+
border: none;
50+
}
51+
52+
.email-signup button {
53+
background-color: var(--color-1);
54+
color: var(--color-6);
55+
padding: 10px;
56+
border: none;
57+
cursor: pointer;
58+
border: 1px solid var(--color-6);
59+
}
60+
61+
.email-signup button:hover {
62+
background-color: var(--color-3);
63+
}
64+
65+
ul {
66+
list-style: none;
67+
padding: 0;
68+
}
69+
70+
ul li {
71+
margin-bottom: 5px;
72+
font-family: var(--font-2);
73+
font-size: 1rem;
74+
}
75+
76+
.social-icons {
77+
display: flex;
78+
gap: 10px;
79+
font-size: 1.5rem;
80+
margin-top: 10px;
81+
}
82+
83+
.social-icons svg {
84+
color: var(--color-6);
85+
cursor: pointer;
86+
}
87+
88+
.social-icons svg:hover {
89+
color: rgb(255, 0, 251);
90+
}
91+
92+
@media (max-width: 768px) {
93+
.footer {
94+
gap: 50px;
95+
}
96+
}

‎1Application-frontend/src/Css/Home.css

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.home-container {
2+
width: 95vw;
3+
min-height: 100vh;
4+
position: relative;
5+
background: linear-gradient(to left, var(--color-4), var(--color-5));
6+
padding: 6rem 3.5rem;
7+
display: flex;
8+
}

0 commit comments

Comments
 (0)