navbar.js
import react from "react";
import { Link } from "react-router-dom";
import { Nav, NavLink, NavMenu, NavBtn, NavBtnLink } from "./NavbarElements";
const Navbar = () => {
return (
<>
<Nav>
<NavMenu>
<NavLink as={Link} to={"/"}>
Home
</NavLink>
<NavLink as={Link} to={"/about"}>
About
</NavLink>
<NavLink as={Link} to={"/help"}>
{" "}
Help{" "}
</NavLink>
<NavLink as={Link} to={"/signup"}>
Sign up
</NavLink>
{/* Second Nav */}
{/* <NavBtnLink to='/sign-in'>Sign In</NavBtnLink> */}
</NavMenu>
<NavBtn>
<NavBtnLink as={Link} to="/signin">
Sign In
</NavBtnLink>
</NavBtn>
</Nav>
</>
);
};
export default Navbar;
NavbarElements.js
//import { FaBars } from 'react-icons/fa';
import { NavLink as Link } from "react-router-dom";
import styled from "styled-components";
export const Nav = styled.nav`
background: #000a0b;
height: 50px;
display: flex;
justify-content: space-between;
padding: 0.2rem calc((100vw - 1000px) / 2);
z-index: 12;
/* Third Nav */
/* justify-content: flex-start; */
`;
export const NavLink = styled(Link)`
color: #fff;
display: flex;
align-items: center;
text-decoration: none;
padding: 0 1rem;
height: 100%;
cursor: pointer;
&.active {
color: #000000;
}
`;
//export const Bars = styled(FaBars)`
// display: none;
// color: #808080;
// @media screen and (max-width: 768px) {
// display: block;
// position: absolute;
// top: 0;
// right: 0;
//transform: translate(-100%, 75%);
// font-size: 1.8rem;
// cursor: pointer;
// }
//`;
export const NavMenu = styled.div`
display: flex;
align-items: center;
margin-right: -24px;
/* Second Nav */
/* margin-right: 24px; */
/* Third Nav */
/* width: 100vw;
white-space: nowrap; */
@media screen and (max-width: 768px) {
display: none;
}
`;
export const NavBtn = styled.nav`
display: flex;
align-items: center;
margin-right: 24px;
/* Third Nav */
/* justify-content: flex-end;
width: 100vw; */
@media screen and (max-width: 768px) {
display: none;
}
`;
export const NavBtnLink = styled(Link)`
border-radius: 4px;
background: #808080;
padding: 10px 22px;
color: #000000;
outline: none;
border: none;
cursor: pointer;
transition: all 0.2s ease-in-out;
text-decoration: none;
/* Second Nav */
margin-left: 24px;
&:hover {
transition: all 0.2s ease-in-out;
background: #fff;
color: #808080;
}
`;
App.js
import "./App.css";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Home from "./Pages/home";
import Help from "./Pages/help";
import Signup from "./Pages/signup";
import About from "./Pages/about";
import Signin from "./Pages/signin";
import Login from "./Pages/login";
function App() {
return (
<div className="App">
<div>
<Router>
<Routes>
<Route path="/" element={<Home/>}/>
<Route path="/about" element={<About/>}/>
<Route path="/help" element={<Help/>}/>
<Route path="/signup" element={<Signup/>}/>
<Route path="/signin" element={<Signin/>}/>
<Route path="/login" element={<Login/>}/>
</Routes>
</Router>
</div>
</div>
);
}
export default App;
App.css
.App {
width: 100%;
height: 100%;
}
h1 {
color: #000;
}
.span {
background-image: url(/src/images/13.jpg);
background-size: cover;
height: 100vh;
width: 10vw;
}
.Box {
display: flex;
flex-direction: column;
width: 30%;
margin-left: 60%;
border: 2px solid rgb(202, 192, 192);
border-radius: 12px;
box-shadow: 1px 3px 1px #9e9e9e;
height: 80%;
padding: 10px;
text-align: center;
position: absolute;
background-size: cover;
margin-top: 50px;
background-image: url(/src/images/15.jpg);
}
.Box:hover {
box-shadow: 0 8px 16px 0 slategrey;
}
.Box1 {
background-image: url(/src/images/logo.png);
background-size: cover;
width: 160px;
height: 150px;
margin-left: 5%;
position: absolute;
margin-top: 5%;
}
.Box2 {
position: absolute;
margin-top: 18%;
margin-left: 5%;
}
.text1 {
color: aliceblue;
font-size: large;
}
.par {
color: rgb(35, 204, 30);
}
.par:hover {
color: rgb(51, 136, 48);
}
.Avatar {
margin: auto;
}
.signup {
display: flex;
flex-direction: column;
justify-content: center;
width: 420px;
border: 2px solid rgb(235, 221, 221);
border-radius: 15px;
box-shadow: 1px 3px 4px #9e9e9e;
margin-top: 5%;
position: absolute;
background-color: blanchedalmond;
margin-left: 35%;
}
.butt {
text-align: center;
margin-bottom: 20px;
}
.Box3 {
background-image: url(/src/images/logo.png);
background-size: cover;
width: 160px;
height: 150px;
margin-left: 5%;
position: absolute;
margin-top: 5%;
}
.span1 {
background-image: url(/src/images/13.jpg);
background-size: cover;
height: 100vh;
width: 100vw;
}
.form {
width: 30%;
margin-left: 65%;
border: 2px solid rgb(202, 192, 192);
border-radius: 12px;
box-shadow: 1px 3px 1px #9e9e9e;
height: 80%;
position: absolute;
background-size: cover;
margin-top: 50px;
background-image: url(/src/images/12.jpeg);
}
.text2 {
color: #fff;
font-size: medium;
}
.head {
height: auto;
}
.footer {
position: relative;
margin-top: 110px;
width: 100vw;
height: 60vh;
}
.h1 {
text-align: center;
}
.table {
border: 2px solid rgb(10, 10, 10);
}
.td {
border: 2px solid rgb(10, 10, 10);
}
0 Comments