diff --git a/src/Components/Content.css b/src/Components/Content.css deleted file mode 100644 index e88cd6a..0000000 --- a/src/Components/Content.css +++ /dev/null @@ -1,191 +0,0 @@ -.content { - max-width: 1250px; - width: 90%; - margin: 75px auto 0; - height: 100%; - display: flex; - padding: 0 0 250px; -} -a { - text-decoration: none; -} -.content .content-text { - order: 1; - width: 45%; -} -.content .content-image { - order: 2; - margin-left: 30px; - width: 55%; - text-align: right; -} -.content img { - width: 577px; - filter: drop-shadow(4px 4px 50px #6ba0d2); -} -.text-header { - font-size: 80px; - line-height: 73px; - letter-spacing: -0.9px; - margin: 35px 0 60px; -} -.click { - background: linear-gradient(145deg, #528adb 42.81%, #4c259e 57.76%); - background-clip: text; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; -} -.text-content { - color: #787878; - font-size: 19.5px; - font-weight: 400; - line-height: 25px; - margin-bottom: 60px; - letter-spacing: -0.3px; -} -.text-read-more-button { - padding: 15px 30px; - border-radius: 18px; - background-color: #1a3cb5; - color: white; - font-size: 18px; -} -.read-more-container:hover .text-read-more-button { - background-color: #122a80; - cursor: pointer; -} - -@media screen and (max-width: 1250px) { - .content { - padding: 0 0 100px; - } - .content img { - width: 90%; - filter: drop-shadow(4px 4px 50px #6ba0d2); - } - .text-header { - font-size: 65px; - line-height: 58px; - letter-spacing: -1.5px; - margin: 15px 0 40px; - } - .click { - background: linear-gradient(145deg, #528adb 42.81%, #4c259e 57.76%); - background-clip: text; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - } - .text-content { - color: #787878; - font-size: 15.5px; - font-weight: 400; - line-height: 21px; - margin-bottom: 45px; - letter-spacing: -0.3px; - } - .text-read-more-button { - padding: 10px 25px; - border-radius: 13px; - background-color: #1a3cb5; - color: white; - font-size: 15.5px; - } -} - -@media screen and (max-width: 1023px) { - .content { - max-width: 1250px; - display: block; - } - .content .content-text { - order: none; - width: 100%; - } - .content .content-image { - order: none; - margin-left: 0px; - width: 100%; - text-align: center; - } - .content img { - width: 85%; - } - .text-header { - text-align: center; - font-size: 70px; - line-height: 63px; - letter-spacing: -3.5px; - margin: 80px 0 60px; - } - .click { - background: linear-gradient(145deg, #528adb 42.81%, #4c259e 57.76%); - background-clip: text; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - } - .text-content { - color: #787878; - font-size: 24px; - font-weight: 400; - line-height: 35px; - margin-bottom: 80px; - letter-spacing: -0.3px; - } - .read-more-container { - text-align: center; - } - .text-read-more-button { - padding: 20px 35px; - border-radius: 18px; - font-size: 25px; - } -} - -@media screen and (max-width: 666px) { - .content { - max-width: 1250px; - display: block; - } - .content .content-text { - order: none; - width: 100%; - } - .content .content-image { - order: none; - margin-left: 0px; - width: 100%; - text-align: center; - } - .content img { - width: 95%; - } - .text-header { - text-align: center; - font-size: 50px; - line-height: 48px; - letter-spacing: -1.5px; - margin: 65px 0 25px; - } - .click { - background: linear-gradient(145deg, #528adb 42.81%, #4c259e 57.76%); - background-clip: text; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - } - .text-content { - color: #787878; - font-size: 14.5px; - font-weight: 400; - line-height: 21px; - margin-bottom: 40px; - letter-spacing: -0.3px; - } - .read-more-container { - text-align: center; - } - .text-read-more-button { - padding: 10px 25px; - border-radius: 12px; - font-size: 15.5px; - } -} diff --git a/src/Components/Content.jsx b/src/Components/Content.jsx index 041f6b5..20883be 100644 --- a/src/Components/Content.jsx +++ b/src/Components/Content.jsx @@ -1,29 +1,38 @@ -import './Content.css' - import contentImage from '../assets/lock_pass.png' function Content() { return ( <> -
-
- lock_pass_icon +
+
+ lock_pass_icon
-
-
+
+
Think before
- you click. + you{' '} + + click + + .
-
+
Started with a few people having cyber safety in mind, the chapter now boasts a big gathering of members and associates alike. Join us on our mission to make cyberspace a safer place!
-
- + diff --git a/src/Components/Navbar.css b/src/Components/Navbar.css deleted file mode 100644 index f4861c2..0000000 --- a/src/Components/Navbar.css +++ /dev/null @@ -1,289 +0,0 @@ -.nav { - display: flex; - max-width: 1250px; - width: 90%; - height: 74px; - margin: 24px auto; - justify-content: space-between; -} -a { - text-decoration: none; -} -.logo img { - height: 74px; -} -.nav-mobile-window { - display: none; -} -.nav-buttons { - width: fit-content; - height: 74px; - position: relative; - background: rgba(222.06, 222.06, 222.06, 0.4); - border-radius: 20px; - overflow: hidden; - backdrop-filter: blur(100px); - padding: 0 15px; - display: inline-flex; -} -.nav-buttons .icon-container { - align-items: center; - background-color: #bbb; - height: 50px; - padding: 15px; - margin: 11px 0; - margin-right: 15px; - border-radius: 10px; -} -.nav-buttons a:first-of-type .icon-container { - margin-left: 0 !important; -} -.nav-buttons a:last-of-type .icon-container { - margin-right: 15px; -} -.active { - background-color: #88b7fd !important; -} -.nav-buttons a .icon-container:hover { - background-color: #a7a6a6; -} -.nav-buttons a { - color: white; -} -.nav-buttons .open-source-button { - background-color: #1a3cb5; - width: fit-content; - padding-top: 14px; - padding-bottom: 13px; - padding-left: 36px; - padding-right: 35px; - border-radius: 25px; - margin: 12px 0; - overflow: hidden; - justify-content: center; - align-items: center; - gap: 13px; - display: inline-flex; -} -.nav-buttons .open-source-button:hover { - background-color: #122a80; - cursor: pointer; -} -.nav .mode-toggle .toggle-button-container { - margin-top: 19px; - width: fit-content; - height: fit-content; - display: inline-flex; - padding: 5px 7px; - align-items: center; - border-radius: 50px; - background: rgba(222, 222, 222, 0.4); - backdrop-filter: blur(50px); -} -.nav .mode-toggle .toggle-button-container { - cursor: pointer; -} -.menu { - display: none; -} -.mode-button { - height: fit-content; - padding: 4px 12px; - border-radius: 50px; -} -.mode-button:hover { - background-color: #dfdfdf; -} -.mode-button svg { - fill: black; -} -.mode-active { - background-color: black !important; - height: fit-content; - padding: 4px 12px; -} -.mode-active svg { - fill: white; -} - -@media screen and (max-width: 1023px) { - .nav { - height: 52px; - } - .logo img { - height: 62px; - } - .nav-buttons-container, - .mode-toggle { - display: none; - } - .nav-mobile-window { - display: block; - } - /* Hamburger */ - .menu { - background-color: transparent; - border: none; - cursor: pointer; - display: flex; - padding: 0; - margin-top: 8px; - } - .line { - fill: none; - stroke: #0251b9; - stroke-width: 6; - transition: - stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1), - stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1); - } - .line1 { - stroke-dasharray: 60 207; - stroke-width: 6; - } - .line2 { - stroke-dasharray: 60 60; - stroke-width: 6; - } - .line3 { - stroke-dasharray: 60 207; - stroke-width: 6; - } - .closed .line1, - .closed .line3 { - stroke-dasharray: 60 207; - } - .closed .line2 { - stroke-dasharray: 60 60; - } - .opened .line1 { - stroke-dasharray: 90 207; - stroke-dashoffset: -134; - } - .opened .line2 { - stroke-dasharray: 1 60; - stroke-dashoffset: -15; - } - .opened .line3 { - stroke-dasharray: 90 207; - stroke-dashoffset: -134; - } - .nav-mobile-window { - position: absolute; /* Change position to absolute */ - top: 1; - width: 300px; - right: 0; - margin-right: 28px; - background-color: white; - box-shadow: 0 0 50px 5px rgb(165, 165, 165); - border-radius: 22px; - z-index: 999; - overflow-y: auto; /* Enable vertical scrolling */ - max-height: calc(100vh - 2rem); /* Limit max height to viewport height */ - } - .nav-mobile-window nav { - padding: 30px 35px; - } - .nav-mobile-window nav ul { - list-style-type: none; - margin: 0; - padding: 0; - } - nav ul li svg { - height: 25px; - } - .nav-mobile-window a { - font-size: 20px; - color: #2460ba; - font-weight: 600; - padding-top: 14px; - display: flex; - align-items: center; - } - .nav-mobile-window a div:last-of-type { - margin-left: 20px; - } - .nav-mobile-window nav ul li { - margin-bottom: 20px; - } - nav .mode-toggle-mobile .toggle-button-container { - margin-top: 19px; - width: fit-content; - height: fit-content; - display: inline-flex; - margin-left: 0; - padding: 5px 7px; - align-items: center; - border-radius: 50px; - background: rgba(222, 222, 222, 0.4); - backdrop-filter: blur(50px); - } - .mode-button { - height: 18px; - padding: 4px 15px; - border-radius: 50px; - } -} - -@media screen and (max-width: 816px) { - .logo img { - height: 62px; - } -} - -@media screen and (max-width: 666px) { - .nav { - height: 42px; - } - .logo img { - height: 42px; - } - .menu { - margin: 0; - } -} - -@media screen and (max-width: 350px) { - .nav-mobile-window { - position: absolute; /* Change position to absolute */ - top: 1; - width: fit-content; - right: 0; - margin-right: 20px; - background-color: white; - box-shadow: 0 0 50px 5px rgb(165, 165, 165); - border-radius: 22px; - z-index: 999; - overflow-y: auto; /* Enable vertical scrolling */ - } - .nav-mobile-window nav { - padding: 20px 30px; - } - .nav-mobile-window nav ul li { - margin-bottom: 15px; - } -} - -@media screen and (max-height: 550px) { - .nav-mobile-window { - max-height: 375px; - } -} - -@media screen and (max-height: 475px) { - .nav-mobile-window { - max-height: 250px; - } -} - -@media screen and (max-height: 350px) { - .nav-mobile-window { - max-height: 180px; - } -} - -@media screen and (max-height: 270px) { - .nav-mobile-window { - max-height: 150px; - } -} diff --git a/src/Components/Navbar.jsx b/src/Components/Navbar.jsx index 5d48963..7d3f695 100644 --- a/src/Components/Navbar.jsx +++ b/src/Components/Navbar.jsx @@ -1,5 +1,4 @@ -import './Navbar.css' -import { useState, useEffect, useCallback } from 'react' +import { useState, useEffect, useCallback, useRef } from 'react' import logo from '../assets/cyscom_logo.png' @@ -15,15 +14,9 @@ import leaderboard_icon_mobile from '../assets/nav/nav-mobile/nav_leaderboard_ic import blogs_icon_mobile from '../assets/nav/nav-mobile/nav_blogs_icon.svg' import open_source_icon_mobile from '../assets/nav/nav-mobile/nav_open_source_icon.svg' -function Navbar() { - // Function to toggle dark mode - // const [darkMode, setDarkMode] = useState(false) - // const toggleDarkMode = () => { - // setDarkMode(!darkMode) - // } - - // Function to open hamburger menu and window containing navigation options +const Navbar = () => { const [isOpen, setIsOpen] = useState(false) + const mobileMenu = useRef(null) const [isNavBarVisible, setIsNavBarVisible] = useState(false) const toggleMenu = useCallback(() => { @@ -34,14 +27,7 @@ function Navbar() { useEffect(() => { const handleClickOutside = (event) => { - const icon = document.querySelector('.menu') - const navWindow = document.querySelector('.nav-mobile-window') - - if ( - isOpen && - !navWindow.contains(event.target) && - !icon.contains(event.target) - ) { + if (isOpen && !mobileMenu.current.contains(event.target)) { toggleMenu() } } @@ -53,186 +39,119 @@ function Navbar() { }, [isOpen, toggleMenu]) return ( - <> - - - +
Open Source
+ + + + + )} + ) } diff --git a/src/index.css b/src/index.css index 02fa463..68d3bee 100644 --- a/src/index.css +++ b/src/index.css @@ -15,3 +15,45 @@ code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; } + +.line { + fill: none; + stroke: #0251b9; + stroke-width: 6; + transition: + stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1), + stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1); +} +.line1 { + stroke-dasharray: 60 207; + stroke-width: 6; +} +.line2 { + stroke-dasharray: 60 60; + stroke-width: 6; +} +.line3 { + stroke-dasharray: 60 207; + stroke-width: 6; +} + +.closed .line1, +.closed .line3 { + stroke-dasharray: 60 207; +} +.closed .line2 { + stroke-dasharray: 60 60; +} + +.opened .line1 { + stroke-dasharray: 90 207; + stroke-dashoffset: -134; +} +.opened .line2 { + stroke-dasharray: 1 60; + stroke-dashoffset: -15; +} +.opened .line3 { + stroke-dasharray: 90 207; + stroke-dashoffset: -134; +}