From c560c5487f92437d3cb218476a75697cf0c57388 Mon Sep 17 00:00:00 2001 From: SatyaJaiss Date: Sun, 6 Oct 2024 02:35:27 +0530 Subject: [PATCH 1/2] Updated Responsiveness I have updated the responsiveness of the page, now they are responsive to all screen sizes. Also added a hamburger button to show the menu --- src/components/Footer/footer.css | 30 ++++++++++ src/components/Navbar/Navbar.css | 94 +++++++++++++++++++++++++++++++- src/components/Navbar/Navbar.js | 28 ++++++++-- src/pages/Home/Hom.css | 35 ++++++++++++ 4 files changed, 181 insertions(+), 6 deletions(-) diff --git a/src/components/Footer/footer.css b/src/components/Footer/footer.css index c40bfae..7df22ba 100644 --- a/src/components/Footer/footer.css +++ b/src/components/Footer/footer.css @@ -245,3 +245,33 @@ hr { 50% { transform: translateY(-10px); } 100% { transform: translateY(0px); } } + +/* Media Queries for Footer */ +@media (max-width: 768px) { + .footer-content { + flex-direction: column; /* Stack footer content vertically */ + align-items: flex-start; /* Align items to the start */ + } + + .footer-socials { + text-align: left; /* Align socials to the left */ + margin-top: 20px; /* Add margin for spacing */ + } + + .footer-buttons { + flex-direction: column; /* Stack buttons vertically */ + gap: 10px; /* Reduce gap for smaller screens */ + } + + .footer-title { + font-size: 24px; /* Reduce title size */ + } + + .footer-description { + font-size: 14px; /* Reduce description size */ + } + + .copyright { + font-size: 12px; /* Reduce copyright size */ + } +} diff --git a/src/components/Navbar/Navbar.css b/src/components/Navbar/Navbar.css index 843a4a5..6873cd9 100644 --- a/src/components/Navbar/Navbar.css +++ b/src/components/Navbar/Navbar.css @@ -1,8 +1,9 @@ -/* Nabar.css */ +/* Navbar.css */ .navbar { background-color: #ffffff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); padding: 16px; + position: relative; /* Ensure positioning context for absolute elements */ } .container { @@ -32,4 +33,95 @@ .nav-links a:hover { color: #4299e1; +} + +/* Improved Hamburger Button Styles */ +.navbar-toggle { + background-color: #4299e1; /* Background color */ + border: none; /* Remove default button border */ + border-radius: 5px; /* Rounded corners */ + cursor: pointer; /* Change cursor to pointer */ + font-size: 24px; /* Increase font size for visibility */ + color: #ffffff; /* Text color */ + padding: 10px 15px; /* Padding for better touch area */ + transition: background-color 0.3s ease, transform 0.2s ease; /* Transition for effects */ +} + +/* Hover Effect for Hamburger Button */ +.navbar-toggle:hover { + background-color: #357ae8; /* Darker shade on hover */ + transform: scale(1.05); /* Slightly scale up on hover */ +} + +/* Menu Styles */ +.nav-menu { + position: fixed; /* Fixed position for sliding effect */ + top: 0; + right: -250px; /* Start off-screen */ + width: 200px; /* Width of the menu */ + height: 30%; /* Full height */ + background-color: #ffffff; /* Background color */ + box-shadow: -2px 0 5px rgba(0, 0, 0, 0.3); /* Shadow for depth */ + transition: right 0.3s ease; /* Transition for sliding effect */ + z-index: 10; /* Ensure it appears above other content */ + border-radius: 10px; +} + +/* Active Menu */ +.nav-menu.active { + right: 0; /* Slide in */ +} + +/* Improved Close Button Styles */ +.close-button { + /* background-color: #ff4d4d; */ + border: none; /* Remove default button background */ + border-radius: 5px; /* Rounded corners */ + font-size: 30px; /* Increase font size for visibility */ + color: #ffffff; /* White color for the close button */ + cursor: pointer; /* Change cursor to pointer */ + position: absolute; /* Position it in the menu */ + /* top: 20px; */ + right: 20px; /* Position from the right */ + /* padding: 2px 2px; */ + transition: background-color 0.3s ease, transform 0.2s ease; /* Transition for effects */ +} + +/* Hover Effect for Close Button */ +.close-button:hover { + /* Darker red on hover */ + transform: scale(1.1); /* Slightly scale up on hover */ +} + +/* Media Queries for Navbar */ +@media (max-width: 768px) { + .container { + justify-content: space-between; /* Ensure space between logo and hamburger */ + } + + .nav-links { + flex-direction: column; /* Stack links vertically */ + align-items: flex-start; /* Align links to the start */ + display: flex; /* Show links by default in the menu */ + width: 100%; /* Full width for mobile */ + padding: 16px 0; /* Add padding */ + background-color: #ffffff; /* Background color for dropdown */ + position: absolute; /* Positioning for dropdown */ + top: 60px; /* Position below the navbar */ + left: 0; /* Align to the left */ + z-index: 10; /* Ensure it appears above other content */ + } + + .navbar.active .nav-links { + display: flex; /* Show links when navbar is active */ + } + + .container { + flex-direction: row; /* Ensure logo and hamburger are in a row */ + align-items: center; /* Center align items vertically */ + } + + .navbar-toggle { + margin-left: auto; /* Push the hamburger button to the right */ + } } \ No newline at end of file diff --git a/src/components/Navbar/Navbar.js b/src/components/Navbar/Navbar.js index b831d02..39720f3 100644 --- a/src/components/Navbar/Navbar.js +++ b/src/components/Navbar/Navbar.js @@ -1,15 +1,33 @@ -import React from "react"; +import React, { useState } from "react"; import "./Navbar.css"; function Navbar() { + const [isActive, setIsActive] = useState(false); + + const toggleNavbar = () => { + setIsActive(!isActive); + }; + + const closeNavbar = () => { + setIsActive(false); + }; + return ( -