diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx index 1113a43..e4350c1 100644 --- a/src/components/Footer/Footer.jsx +++ b/src/components/Footer/Footer.jsx @@ -1,27 +1,60 @@ import React from "react"; -import "./Footer.css"; -import { FaInstagram } from "react-icons/fa"; -import { FaGithub } from "react-icons/fa"; -import { FaDiscord } from "react-icons/fa"; -import {Link} from 'react-router-dom'; +import { FaInstagram, FaGithub, FaDiscord } from "react-icons/fa"; +import { Link } from 'react-router-dom'; const Footer = () => { const currentYear = new Date().getFullYear(); return ( -
-
-

© {currentYear} JIIT Open-Source Developer Circle. All rights reserved.

-
+ ); }; export default Footer; + diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css index f7281f0..623a9d3 100644 --- a/src/components/Header/Header.css +++ b/src/components/Header/Header.css @@ -1,15 +1,3 @@ -.joinS { - font-size: 2rem; - font-weight: bold; - background-image: linear-gradient(-45deg, #ff0081, #ffd600, #ff6f00); - background-size: 300%; - background-clip: text; - color: transparent; - animation: gradientAnimation 5s ease-in-out infinite; - transition: transform 0.3s ease, text-shadow 0.3s ease; - text-shadow: 0 0 4px rgba(255, 255, 255, 0.7); -} - @keyframes gradientAnimation { 0% { background-position: 0% 50%; @@ -22,112 +10,36 @@ } } -.joinS:hover { - transform: scale(1.1); - text-shadow: 0 0 15px rgba(255, 255, 255, 1); -} - -.header { - display: flex; - justify-content: space-between; - position: fixed; - width: 98.5vw; - background-color: transparent; - backdrop-filter: blur(5px); - transition: background-color 0.3s ease-in-out, - backdrop-filter 0.3s ease-in-out; - z-index: 999; - padding: 0.5em; -} - -.header1 { - display: flex; - gap: 1em; - padding-left: 1em; - background-color: transparent; - backdrop-filter: blur(5px); - transition: background-color 0.3s ease-in-out, - backdrop-filter 0.3s ease-in-out; -} -.links1 { - color: rgb(216, 216, 216); - text-decoration: none; - cursor: pointer; - background-color: transparent; - backdrop-filter: blur(5px); - transition: background-color 0.3s ease-in-out, - backdrop-filter 0.3s ease-in-out; -} -.links1:hover { - color: white; -} - -.header2 { - display: flex; - align-items: center; - gap: 1em; - cursor: pointer; - padding-left: 2em; - background-color: transparent; - backdrop-filter: blur(5px); - transition: background-color 0.3s ease-in-out, - backdrop-filter 0.3s ease-in-out; -} -.header2 > a { - background-color: transparent; - backdrop-filter: blur(5px); - transition: background-color 0.3s ease-in-out, - backdrop-filter 0.3s ease-in-out; -} - -.links2 { - color: rgb(216, 216, 216); - background-color: transparent; - backdrop-filter: blur(5px); - transition: background-color 0.3s ease-in-out, - backdrop-filter 0.3s ease-in-out; +.join-society { + font-size: 1.5rem; + font-weight: bold; + background-image: linear-gradient(-45deg, #ff0081, #ffd600, #ff6f00); + background-size: 300%; + background-clip: text; + -webkit-background-clip: text; + color: transparent; + animation: gradientAnimation 5s ease-in-out infinite; + transition: transform 0.3s ease, text-shadow 0.3s ease; + text-shadow: 0 0 4px rgba(255, 255, 255, 0.7); + padding: 0.5rem 1rem; + border-radius: 0.375rem; } -.links2:hover { - color: white; +.join-society:hover { + transform: scale(1.1); + text-shadow: 0 0 15px rgba(255, 255, 255, 1); } -.icons { - font-size: 22px; - background-color: transparent; - backdrop-filter: blur(5px); - transition: background-color 0.3s ease-in-out, - backdrop-filter 0.3s ease-in-out; +@media (max-width: 768px) { + .join-society { + font-size: 1.25rem; + } } -@media (min-width: 320px) and (max-width: 450px) { - .header1 { - display: flex; - gap: 0.5em; - padding-top: 0.75em; - } - .links1 { - font-size: 0.9em; - } - .header { - width: 100%; - gap: 3em; - } - .joinS { - font-size: 0.8rem; - font-weight: bold; - width: 6em; - padding-top: 0.2em; - } - .header2 > a { - background-color: transparent; - backdrop-filter: blur(5px); - transition: background-color 0.3s ease-in-out, - backdrop-filter 0.3s ease-in-out; - font-size: 0.8em; - } - .links2 { - font-size: 0.5em; - background-color: white; +@media (max-width: 768px) { + .join-society { + font-size: 1rem; + padding: 0.25rem 0.5rem; } } + diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx index 37dba35..97995ca 100644 --- a/src/components/Header/Header.jsx +++ b/src/components/Header/Header.jsx @@ -1,45 +1,106 @@ -import React from "react"; -import "./Header.css"; -import { FaInstagram } from "react-icons/fa"; -import { FaGithub } from "react-icons/fa"; -import { FaDiscord } from "react-icons/fa"; -import { Link } from "react-router-dom"; +import React, { useState, useEffect } from 'react'; +import { Link } from 'react-router-dom'; +import { FaInstagram, FaGithub, FaDiscord, FaBars, FaTimes } from 'react-icons/fa'; +import './Header.css' +const Navbar = () => { + const [isOpen, setIsOpen] = useState(false); + const [scrolled, setScrolled] = useState(false); + + useEffect(() => { + const handleScroll = () => { + const isScrolled = window.scrollY > 10; + if (isScrolled !== scrolled) { + setScrolled(isScrolled); + } + }; + + document.addEventListener('scroll', handleScroll); + return () => { + document.removeEventListener('scroll', handleScroll); + }; + }, [scrolled]); + + const toggleMenu = () => { + setIsOpen(!isOpen); + }; -function Header() { return ( -
-
- -

Home

- - -

Events

- - -

Resources

- + ); -} +}; + +export default Navbar; -export default Header;