Nav bar
This commit is contained in:
parent
c28b9b1132
commit
9ba229c153
Binary file not shown.
Binary file not shown.
@ -1,17 +1,19 @@
|
|||||||
import { useState } from 'react'
|
import { useState } from "react";
|
||||||
import reactLogo from './assets/react.svg'
|
import reactLogo from "./assets/react.svg";
|
||||||
import viteLogo from '/vite.svg'
|
import viteLogo from "/vite.svg";
|
||||||
import SignInUp from './components/login-logout/signInup'
|
import SignInUp from "./components/login-logout/signInup";
|
||||||
import './App.css'
|
import LandingPage from "./components/landing-page/homePage.jsx";
|
||||||
|
import "./App.css";
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
const [count, setCount] = useState(0)
|
const [count, setCount] = useState(0);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='containment'>
|
<div className="containment">
|
||||||
|
<LandingPage />
|
||||||
<SignInUp />
|
<SignInUp />
|
||||||
</div>
|
</div>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default App
|
export default App;
|
||||||
|
|||||||
@ -0,0 +1,46 @@
|
|||||||
|
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||||
|
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||||
|
<svg fill="#008985" height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
viewBox="0 0 512.01 512.01" xml:space="preserve">
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<path d="M477.765,373.495c-5.141-7.527-17.466-19.802-39.834-20.289c-17.809,4.379-36.815,11.154-54.572,21.35
|
||||||
|
c-22.308,12.805-39.21,29.108-51.014,48.507c-0.171,0.547-0.282,0.915-0.282,0.915c-1.24,6.458-1.018,12.471,0.154,17.74
|
||||||
|
c6.398,28.62,41.536,48.242,70.362,48.619c3.37,0.043,6.518-1.617,8.4-4.422c1.873-2.797,2.198-6.355,0.872-9.452l-17.415-40.629
|
||||||
|
l38.457-19.228l16.945,39.552c1.257,2.934,3.849,5.081,6.963,5.782c3.114,0.701,6.372-0.128,8.767-2.241
|
||||||
|
C489.287,438.904,494.949,398.548,477.765,373.495z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<path d="M405.659,334.089c-44.932-30.955-86.75-64.066-124.472-98.306l78.111-78.111c1.839-1.839,1.839-4.824,0-6.663
|
||||||
|
l-19.99-19.99c-1.839-1.839-4.824-1.839-6.663,0l-78.915,78.915c-30.647-29.938-58.079-60.525-81.464-91.147
|
||||||
|
c-2.027-2.652-5.885-2.523-7.861,0.163c-4.362,5.936-9.169,11.59-14.481,16.902c-10.35,10.35-22.402,19.511-36.105,27.371
|
||||||
|
c-8.793,5.055-18.005,9.358-27.354,13.027c-3.764,1.48-4.337,6.518-0.975,8.785c34.924,23.539,66.812,47.019,95.911,70.567
|
||||||
|
L56.074,380.928L10.86,399.755c-1.745,1.163-3.045,2.874-3.712,4.858l-6.663,19.99c-1.129,3.387-0.248,7.117,2.275,9.64
|
||||||
|
l53.314,53.314c2.523,2.523,6.261,3.404,9.64,2.275l19.99-6.663c1.984-0.659,3.695-1.967,4.858-3.712l18.809-45.223
|
||||||
|
l129.031-129.031c31.511,29.655,58.72,59.516,81.764,89.804c1.959,2.575,5.714,2.566,7.775,0.068
|
||||||
|
c2.942-3.593,6.056-7.074,9.392-10.401c10.358-10.35,22.41-19.519,36.113-27.38c9.965-5.722,20.469-10.512,31.092-14.49
|
||||||
|
C408.336,341.385,408.994,336.39,405.659,334.089z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<path d="M155.509,77.105c-6.39-28.62-41.536-48.242-70.362-48.619c-3.353-0.051-6.501,1.617-8.383,4.422
|
||||||
|
c-1.873,2.797-2.198,6.355-0.881,9.452l17.415,40.63l-38.457,19.228l-16.945-39.56c-1.266-2.925-3.849-5.081-6.963-5.782
|
||||||
|
c-3.114-0.701-6.372,0.128-8.767,2.241C-1.552,79.911-7.214,120.266,9.97,145.32c5.671,8.271,18.749,22.701,45.642,20.4
|
||||||
|
c15.952-4.379,32.615-10.735,48.285-19.742c22.804-13.096,39.988-29.826,51.8-49.799c-0.094-0.137-0.205-0.282-0.308-0.419
|
||||||
|
C155.56,95.213,156.681,82.374,155.509,77.105z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<path d="M509.251,141.026l-19.99-19.99c-0.821-0.59-1.634-1.172-2.455-1.771l-25.233-12.617c-5.337-5.611-6.543-9.255-8.04-13.814
|
||||||
|
c-1.659-5.021-3.729-11.265-10.914-18.45C383.761,15.528,316.171,5.443,257.194,46.731c-2.481,1.736-3.935,4.645-3.935,7.664
|
||||||
|
v26.653c0,3.165,1.702,6.047,4.354,7.801c2.634,1.745,6.099,2.002,9.007,0.761c24.959-10.589,48.619-20.623,78.043-4.414
|
||||||
|
l-4.285,12.856c-1.129,3.387-0.248,7.117,2.275,9.648l37.02,37.02c2.352,2.352,5.765,3.285,8.973,2.412
|
||||||
|
c9.007-2.429,18.963-0.393,26.285,6.236l12.591,25.182c0.59,0.821,1.172,1.634,1.771,2.455l19.99,19.99
|
||||||
|
c3.678,3.678,9.648,3.678,13.326,0l46.651-46.651C512.929,150.674,512.929,144.704,509.251,141.026z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.1 KiB |
@ -0,0 +1,6 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||||
|
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M14.5 8.5C14.5 9.88071 13.3807 11 12 11C10.6193 11 9.5 9.88071 9.5 8.5C9.5 7.11929 10.6193 6 12 6C13.3807 6 14.5 7.11929 14.5 8.5Z" fill="#008985"/>
|
||||||
|
<path d="M15.5812 16H8.50626C8.09309 16 7.87415 15.5411 8.15916 15.242C9.00598 14.3533 10.5593 13 12.1667 13C13.7899 13 15.2046 14.3801 15.947 15.2681C16.2011 15.5721 15.9774 16 15.5812 16Z" fill="#008985" stroke="#008985" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<circle cx="12" cy="12" r="10" stroke="#008985" stroke-width="2"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 748 B |
@ -0,0 +1,5 @@
|
|||||||
|
.landing_screen {
|
||||||
|
margin-top: 2rem;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
import NavBar from "./navBar";
|
||||||
|
import "./home-page.css";
|
||||||
|
|
||||||
|
export default function LandingPage() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<NavBar />
|
||||||
|
<article className="landing_screen">
|
||||||
|
<p>Welcome to the landing page !</p>
|
||||||
|
</article>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,24 @@
|
|||||||
|
import "./navStyleImpl.css";
|
||||||
|
import CezenBanner from "../login-logout/cezenBanar";
|
||||||
|
import operationsLogo from "../../assets/hammer-spanner-svgrepo-com.svg";
|
||||||
|
import profileLogo from "../../assets/profile-circle-svgrepo-com.svg";
|
||||||
|
|
||||||
|
export default function NavBar() {
|
||||||
|
return (
|
||||||
|
<nav className="navigation">
|
||||||
|
<div>
|
||||||
|
<CezenBanner className="cezen_banner_top" />
|
||||||
|
</div>
|
||||||
|
<div className="RHS_nav">
|
||||||
|
<div>
|
||||||
|
<img src={operationsLogo} />
|
||||||
|
operations
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<img src={profileLogo} />
|
||||||
|
profile
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,74 @@
|
|||||||
|
.navigation {
|
||||||
|
margin-top: 2rem;
|
||||||
|
background-color: #caf0f8;
|
||||||
|
font-size: 1.6rem;
|
||||||
|
padding: 1rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
gap: 2rem;
|
||||||
|
justify-content: space-between;
|
||||||
|
border-radius: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navigation span {
|
||||||
|
max-width: 4rem;
|
||||||
|
transition: all 1s;
|
||||||
|
margin-right: 0rem;
|
||||||
|
margin-left: 0rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navigation span:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
margin-right: 0.4rem;
|
||||||
|
margin-left: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cezen_banner_top {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cezen_banner_top h1 {
|
||||||
|
align-self: center;
|
||||||
|
font-size: 2rem;
|
||||||
|
/* font-weight: 500; */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* cezen */
|
||||||
|
.cezen_banner_top h1 span:first-child {
|
||||||
|
color: #008985;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* PBX */
|
||||||
|
.cezen_banner_top h1 span:last-child {
|
||||||
|
color: #1f3890;
|
||||||
|
}
|
||||||
|
|
||||||
|
.RHS_nav {
|
||||||
|
color: #1f3890;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
gap: 2.4rem;
|
||||||
|
align-items: center;
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin-right: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.RHS_nav div {
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-bottom: 0rem;
|
||||||
|
border-bottom: 0.4rem solid rgba(202, 240, 248, 0.3);
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.RHS_nav div img {
|
||||||
|
max-width: 2.2rem;
|
||||||
|
margin-right: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.RHS_nav div:hover {
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
|
border-bottom: 0.2rem solid rgba(0, 137, 133, 0.8);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
@ -1,16 +1,14 @@
|
|||||||
|
|
||||||
import cezenLogo from "../../assets/CezenLogo.svg";
|
import cezenLogo from "../../assets/CezenLogo.svg";
|
||||||
import './logo_and_text.css'
|
import "./logo_and_text.css";
|
||||||
|
|
||||||
export default function CezenBanner(){
|
export default function CezenBanner({ ...restOfIt }) {
|
||||||
|
return (
|
||||||
return (
|
<span {...restOfIt}>
|
||||||
<span className="cezen_banner">
|
<img src={cezenLogo} alt="cezen tech logo" />
|
||||||
<img src={cezenLogo} alt="cezen tech logo"/>
|
<h1>
|
||||||
<h1>
|
<span>Cezen</span>
|
||||||
<span>Cezen</span><span>PBX</span>
|
<span>PBX</span>
|
||||||
</h1>
|
</h1>
|
||||||
</span>
|
</span>
|
||||||
);
|
);
|
||||||
|
}
|
||||||
}
|
|
||||||
|
|||||||
@ -1,94 +1,88 @@
|
|||||||
section{
|
section {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
margin-bottom: 4rem;
|
margin-bottom: 4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.intro-page{
|
.intro-page {
|
||||||
margin-top: 3rem;
|
margin-top: 3rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 2rem;
|
gap: 2rem;
|
||||||
/* align-items: center; */
|
/* align-items: center; */
|
||||||
}
|
}
|
||||||
.cezen-logo{
|
.cezen-logo {
|
||||||
justify-items:center;
|
justify-items: center;
|
||||||
margin-right: 25rem;
|
margin-right: 25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.LHS {
|
||||||
.LHS{
|
background-color: #03045e;
|
||||||
background-color: #03045E;
|
justify-items: center;
|
||||||
justify-items: center;
|
padding: 5rem;
|
||||||
padding: 5rem;
|
text-transform: capitalize;
|
||||||
text-transform: capitalize;
|
color: #0096c7;
|
||||||
color: #0096C7;
|
border-top-left-radius: 2rem;
|
||||||
border-top-left-radius: 2rem;
|
border-bottom-left-radius: 2rem;
|
||||||
border-bottom-left-radius: 2rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.RHS{
|
.RHS {
|
||||||
background-color: #CAF0F8;
|
background-color: #caf0f8;
|
||||||
justify-items: center;
|
justify-items: center;
|
||||||
padding: 5rem;
|
padding: 5rem;
|
||||||
color: #03045E;
|
color: #03045e;
|
||||||
}
|
}
|
||||||
|
|
||||||
.RHS p{
|
.RHS p {
|
||||||
margin-top: 2rem;
|
margin-top: 2rem;
|
||||||
padding-left: 2rem;
|
padding-left: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.form-elements {
|
||||||
.form-elements{
|
display: flex;
|
||||||
display: flex;
|
flex-direction: column;
|
||||||
flex-direction: column;
|
gap: 4rem;
|
||||||
gap: 4rem;
|
padding: 2rem;
|
||||||
padding: 2rem;
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-elements div
|
.form-elements div {
|
||||||
{
|
font-size: 2.2rem;
|
||||||
font-size: 2.2rem;
|
align-items: start;
|
||||||
align-items:start;
|
display: flex;
|
||||||
display: flex;
|
flex-direction: column;
|
||||||
flex-direction: column;
|
gap: 1.4rem;
|
||||||
gap: 1.4rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-elements div label{
|
.form-elements div label {
|
||||||
padding-left: 1rem;
|
padding-left: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-elements div input{
|
.form-elements div input {
|
||||||
min-width: 30rem;
|
min-width: 30rem;
|
||||||
min-height: 4rem;
|
min-height: 4rem;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
font-size: 2.2rem;
|
font-size: 2.2rem;
|
||||||
border-radius: 0.35rem;
|
border-radius: 0.35rem;
|
||||||
border-width: 0;
|
border-width: 0;
|
||||||
background-color: #e7f8fc;
|
background-color: #e7f8fc;
|
||||||
}
|
}
|
||||||
|
|
||||||
form button{
|
form button {
|
||||||
margin-top: 4rem;
|
margin-top: 4rem;
|
||||||
background-color: #90E0EF;
|
background-color: #90e0ef;
|
||||||
color: #03045E;
|
color: #03045e;
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
padding: 1.2rem 1.6rem;
|
padding: 1.2rem 1.6rem;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
border-radius: 0.5rem;
|
border-radius: 0.5rem;
|
||||||
transition: all 0.3s;
|
transition: all 0.3s;
|
||||||
border: 0.3rem solid #03045E;
|
border: 0.3rem solid #03045e;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
form button:hover{
|
form button:hover {
|
||||||
background-color: #ADE8F4;
|
background-color: #ade8f4;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border: 0.3rem solid #ADE8F4;
|
border: 0.3rem solid #ade8f4;
|
||||||
|
}
|
||||||
}
|
|
||||||
|
|||||||
@ -1,27 +1,24 @@
|
|||||||
.cezen_banner{
|
.cezen_banner {
|
||||||
|
display: flex;
|
||||||
display: flex;
|
flex-direction: row;
|
||||||
flex-direction: row;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.cezen_banner h1{
|
.cezen_banner h1 {
|
||||||
align-self: center;
|
align-self: center;
|
||||||
font-size: 10rem;
|
font-size: 10rem;
|
||||||
/* font-weight: 500; */
|
/* font-weight: 500; */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* cezen */
|
/* cezen */
|
||||||
.cezen_banner h1 span:first-child{
|
.cezen_banner h1 span:first-child {
|
||||||
color: #008985;
|
color: #008985;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* PBX */
|
/* PBX */
|
||||||
.cezen_banner h1 span:last-child{
|
.cezen_banner h1 span:last-child {
|
||||||
color: #1F3890;
|
color: #1f3890;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
img{
|
max-width: 20rem;
|
||||||
max-width: 20rem;
|
}
|
||||||
}
|
|
||||||
|
|||||||
@ -2,6 +2,7 @@ import CezenBanner from "./cezenBanar";
|
|||||||
import SignUp from "./signUp";
|
import SignUp from "./signUp";
|
||||||
import LogIn from "./logIn";
|
import LogIn from "./logIn";
|
||||||
import "./form_styling.css";
|
import "./form_styling.css";
|
||||||
|
import "./logo_and_text.css";
|
||||||
// admin signup
|
// admin signup
|
||||||
|
|
||||||
export default function SignInUp() {
|
export default function SignInUp() {
|
||||||
@ -10,7 +11,7 @@ export default function SignInUp() {
|
|||||||
<>
|
<>
|
||||||
<div className="intro-page">
|
<div className="intro-page">
|
||||||
<div className="cezen-logo">
|
<div className="cezen-logo">
|
||||||
<CezenBanner />
|
<CezenBanner className="cezen_banner" />
|
||||||
</div>
|
</div>
|
||||||
<section>
|
<section>
|
||||||
<div className="LHS">
|
<div className="LHS">
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user