From 9d0e1996ffe4a54d0340301cbad3f7c7103729e7 Mon Sep 17 00:00:00 2001 From: ARJUN AGARWAL <123585663+sahhoArjun097@users.noreply.github.com> Date: Fri, 4 Oct 2024 17:55:28 +0530 Subject: [PATCH] remove extra spacing --- src/Educ.js | 4 +- src/Hom.js | 271 +++++++++++++++++++++++++------------------------- src/Nabar.css | 166 ++++++++++++++++++++++++------- src/Nabar.js | 24 +++-- 4 files changed, 282 insertions(+), 183 deletions(-) diff --git a/src/Educ.js b/src/Educ.js index 2646e06..b6d1ef7 100644 --- a/src/Educ.js +++ b/src/Educ.js @@ -143,9 +143,7 @@ Turn lessons into adventures with activity-based discovery. - + diff --git a/src/Hom.js b/src/Hom.js index 3d4c4ed..5f04bc8 100644 --- a/src/Hom.js +++ b/src/Hom.js @@ -1,6 +1,6 @@ import React from 'react' import './Hom.css' -import {Navigate} from 'react-router-dom' +import { Navigate } from 'react-router-dom' import { MDBCard, MDBCardTitle, @@ -10,150 +10,149 @@ import { MDBRow, MDBCol } from 'mdb-react-ui-kit'; - function Hom () { - const [goToEduc,setGoToEduc] = React.useState(false); - if (goToEduc) - { - return ; - } - return ( - - +function Hom() { + const [goToEduc, setGoToEduc] = React.useState(false); + if (goToEduc) { + return ; + } + return ( + +
-
-
- - -
- -
-
-
-
-

Dive into the World of Knowledge, Skills and Wisdom

-
- -
- -
- - - - - - - -
- Education -
-
- - Get complete understanding of concepts. Adapt life skills. - Gain general knowledge and enjoy activity based learning. - -
-
- -
- - - - - - - - - -
-
- - - - - - - -
- Career -
-
- - Explore Career opportunities and make yourself ready for employment in various fields. - Learn how to build your own startup and become a successful Entrepreneur - -
-
- -
-
- -
- - - - - - - - -
-
- - - - - - - -
- Loans and Grants +
+
+ + +
+ +
- - Complete information about loans, grants and scholarships. Simple procedure and steps to apply easily. - -
-
- -
- - - - +
+
+

Dive into the World of Knowledge, Skills and Wisdom

+
+
+
+ + + + + + + +
+ Education +
+
+ + Get complete understanding of concepts. Adapt life skills. + Gain general knowledge and enjoy activity based learning. + +
+
+ +
- -
- + + + + -
-
-
-
- - -
- -
+ + +
+ + + + + + + +
+ Career +
+
+ + Explore Career opportunities and make yourself ready for employment in various fields. + Learn how to build your own startup and become a successful Entrepreneur + +
+
+ +
+
+ +
+ + + + + + + + +
+
+ + + + + + + +
+ Loans and Grants +
+
+ + Complete information about loans, grants and scholarships. Simple procedure and steps to apply easily. + +
+
+ +
+ + + + + + + + +
+ + + + + + + + + + + + + ); } - + export default Hom; diff --git a/src/Nabar.css b/src/Nabar.css index 7fa99ef..412c6aa 100644 --- a/src/Nabar.css +++ b/src/Nabar.css @@ -1,48 +1,138 @@ -/* Navbar.css (CSS) */ +/* Nabar.css */ + +/* General styles for the navbar */ .navbar { + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px 20px; + background-color: #333; + color: white; + position: sticky; + top: 0; + z-index: 100; + width: 100%; +} + +/* Logo styles */ +.logo img { + height: 50px; +} + +/* Hamburger Menu */ +.hamburger { + display: none; + flex-direction: column; + cursor: pointer; +} + +.hamburger .bar { + width: 25px; + height: 3px; + background-color: #fff; + margin: 4px; + transition: 0.4s; +} + +/* Change hamburger into "X" on click */ +.change { + transform: rotate(45deg) translate(5px, 5px); +} + +.hamburger .change + .bar { + opacity: 0; +} + +.hamburger .change + .change { + transform: rotate(-45deg) translate(5px, -5px); +} + +/* Navbar links */ +.nav-links { + display: flex; + list-style: none; + gap: 20px; +} + +.nav-links li { + font-size: 18px; +} + +.nav-links a { + color: white; + text-decoration: none; +} + +.nav-links a:hover { + text-decoration: underline; +} + +/* Auth buttons (Login and Sign Up) */ +.auth-buttons { + display: flex; + gap: 10px; +} + +.auth-buttons .btn { + padding: 8px 15px; + border: none; + cursor: pointer; + font-size: 16px; +} + +.auth-buttons .btn-danger { + background-color: #dc3545; + color: white; +} + +.auth-buttons .btn-primary { + background-color: #007bff; + color: white; +} + +/* Mobile Styles */ +@media (max-width: 768px) { + .hamburger { display: flex; - justify-content: space-between; - align-items: center; - padding: 2 rem ; - background-color: black; - color: white; } - - .logo img{ - height : 50px; - width :200; + + .nav-links, + .auth-buttons { + position: absolute; + top: 60px; + left: 0; + width: 100%; + background-color: #333; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 15px; + height: 0; + overflow: hidden; + transition: height 0.3s ease-in-out; } - - .nav-links { - list-style : none ; - display: flex; + + .nav-links.open, + .auth-buttons.open { + height: 200px; } - + .nav-links li { - margin-right: 1rem; - padding: 0.5rem ,1rem; - } - - .nav-links a { - text-decoration: none; - color: white; + font-size: 24px; } - - .auth-buttons button { - margin-left: 1rem; - padding: 0.5rem 1rem ; - cursor: pointer; + + .auth-buttons .btn { + width: 100%; } - - .sign-up { - background-color: #4CAF50; - color: white; - border: none; +} + +/* Tablet Styles */ +@media (min-width: 769px) and (max-width: 1024px) { + .nav-links { + gap: 15px; } - - .sign-in { - background-color: #2196F3; - color: white; - border: none; + + .auth-buttons .btn { + padding: 7px 12px; } - \ No newline at end of file +} diff --git a/src/Nabar.js b/src/Nabar.js index 59967ea..94d9283 100644 --- a/src/Nabar.js +++ b/src/Nabar.js @@ -1,8 +1,9 @@ -import React from 'react'; +import React, { useState } from 'react'; import { useNavigate } from 'react-router-dom'; import './Nabar.css'; function Nabar() { + const [isMobileMenuOpen, setMobileMenuOpen] = useState(false); const navigate = useNavigate(); const handleLogin = () => { @@ -13,17 +14,29 @@ function Nabar() { navigate('/refer'); }; + const toggleMobileMenu = () => { + setMobileMenuOpen(!isMobileMenuOpen); + }; + return (