From bdf73e5b6b8d0076faab524e495bf0fb833710d5 Mon Sep 17 00:00:00 2001 From: Ayush <99096397+ayush4345@users.noreply.github.com> Date: Tue, 27 Feb 2024 13:49:08 +0530 Subject: [PATCH] added responsive navbar --- package.json | 2 + pnpm-lock.yaml | 175 ++++++++++++++++++++++++ src/app/globals.css | 12 ++ src/app/team/page.js | 83 +++++------ src/components/Navbar/.txt | 1 - src/components/Navbar/Navbar.js | 131 +++++++++++++----- src/components/Navbar/Navbar.module.css | 125 ++++++++++++----- src/components/about.js | 12 +- src/components/hero.js | 8 +- 9 files changed, 430 insertions(+), 119 deletions(-) delete mode 100644 src/components/Navbar/.txt diff --git a/package.json b/package.json index 31970a9..76ab531 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,8 @@ "react-icons": "^5.0.1", "react-markdown": "^9.0.1", "react-paginate": "^8.2.0", + "react-query": "^3.39.3", + "react-responsive": "^9.0.2", "tailwind": "^4.0.0", "tailwind-merge": "^2.2.1", "tailwindcss": "^3.4.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c926e51..130de19 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -89,6 +89,12 @@ dependencies: react-paginate: specifier: ^8.2.0 version: 8.2.0(react@18.2.0) + react-query: + specifier: ^3.39.3 + version: 3.39.3(react-dom@18.2.0)(react@18.2.0) + react-responsive: + specifier: ^9.0.2 + version: 9.0.2(react@18.2.0) tailwind: specifier: ^4.0.0 version: 4.0.0 @@ -965,6 +971,11 @@ packages: safe-buffer: 5.1.2 dev: false + /big-integer@1.6.52: + resolution: {integrity: sha512-QxD8cf2eVqJOOz63z6JIN9BzvVs/dlySa5HGSBH5xtR8dPteIRQnBxxKqkNTiT6jbDTF6jAfrd4oMcND9RGbQg==} + engines: {node: '>=0.6'} + dev: false + /binary-extensions@2.2.0: resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==} engines: {node: '>=8'} @@ -1019,6 +1030,13 @@ packages: - supports-color dev: false + /brace-expansion@1.1.11: + resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==} + dependencies: + balanced-match: 1.0.2 + concat-map: 0.0.1 + dev: false + /brace-expansion@2.0.1: resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==} dependencies: @@ -1032,6 +1050,19 @@ packages: fill-range: 7.0.1 dev: false + /broadcast-channel@3.7.0: + resolution: {integrity: sha512-cIAKJXAxGJceNZGTZSBzMxzyOn72cVgPnKx4dc6LRjQgbaJUQqhy5rzL3zbMxkMWsGKkv2hSFkPRMEXfoMZ2Mg==} + dependencies: + '@babel/runtime': 7.23.9 + detect-node: 2.1.0 + js-sha3: 0.8.0 + microseconds: 0.2.0 + nano-time: 1.0.0 + oblivious-set: 1.0.0 + rimraf: 3.0.2 + unload: 2.2.0 + dev: false + /browserslist@4.23.0: resolution: {integrity: sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==} engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7} @@ -1237,6 +1268,10 @@ packages: - supports-color dev: false + /concat-map@0.0.1: + resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==} + dev: false + /content-disposition@0.5.2: resolution: {integrity: sha512-kRGRZw3bLlFISDBgwTSA1TMBFN6J6GWDeubmDE3AF+3+yXL8hTWv8r5rkLbqYXY4RjPk/EzHnClI3zQf1cFmHA==} engines: {node: '>= 0.6'} @@ -1316,6 +1351,10 @@ packages: util.promisify: 1.0.0 dev: false + /css-mediaquery@0.1.2: + resolution: {integrity: sha512-COtn4EROW5dBGlE/4PiKnh6rZpAPxDeFLaEEwt4i10jpDMFt2EhQGS79QmmrO+iKCHv0PU/HrOWEhijFd1x99Q==} + dev: false + /cssesc@3.0.0: resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==} engines: {node: '>=4'} @@ -1409,6 +1448,10 @@ packages: engines: {node: '>= 0.8', npm: 1.2.8000 || >= 1.4.16} dev: false + /detect-node@2.1.0: + resolution: {integrity: sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==} + dev: false + /devlop@1.1.0: resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==} dependencies: @@ -1936,6 +1979,10 @@ packages: engines: {node: '>= 0.6'} dev: false + /fs.realpath@1.0.0: + resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==} + dev: false + /fsevents@2.3.3: resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==} engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0} @@ -2016,6 +2063,17 @@ packages: path-scurry: 1.10.1 dev: false + /glob@7.2.3: + resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==} + dependencies: + fs.realpath: 1.0.0 + inflight: 1.0.6 + inherits: 2.0.4 + minimatch: 3.1.2 + once: 1.4.0 + path-is-absolute: 1.0.1 + dev: false + /globalthis@1.0.3: resolution: {integrity: sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==} engines: {node: '>= 0.4'} @@ -2215,6 +2273,10 @@ packages: - debug dev: false + /hyphenate-style-name@1.0.4: + resolution: {integrity: sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==} + dev: false + /iconv-lite@0.4.23: resolution: {integrity: sha512-neyTUVFtahjf0mB3dZT77u+8O0QB89jFdnBkd5P1JgYPbPaia3gXXOVL2fq8VyU2gMMD7SaN7QukTB/pmXYvDA==} engines: {node: '>=0.10.0'} @@ -2229,6 +2291,13 @@ packages: safer-buffer: 2.1.2 dev: false + /inflight@1.0.6: + resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==} + dependencies: + once: 1.4.0 + wrappy: 1.0.2 + dev: false + /inherits@2.0.3: resolution: {integrity: sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==} dev: false @@ -2467,6 +2536,10 @@ packages: hasBin: true dev: false + /js-sha3@0.8.0: + resolution: {integrity: sha512-gF1cRrHhIzNfToc802P800N8PpXS+evLLXfsVpowqmAFR9uwbi89WvXg2QspOmXL8QL86J4T1EpFu+yUkwJY3Q==} + dev: false + /js-tokens@4.0.0: resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==} dev: false @@ -2640,6 +2713,19 @@ packages: react: 18.2.0 dev: false + /match-sorter@6.3.4: + resolution: {integrity: sha512-jfZW7cWS5y/1xswZo8VBOdudUiSd9nifYRWphc9M5D/ee4w4AoXLgBEdRbgVaxbMuagBPeUC5y2Hi8DO6o9aDg==} + dependencies: + '@babel/runtime': 7.23.9 + remove-accents: 0.5.0 + dev: false + + /matchmediaquery@0.3.1: + resolution: {integrity: sha512-Hlk20WQHRIm9EE9luN1kjRjYXAQToHOIAHPJn9buxBwuhfTHoKUcX+lXBbxc85DVQfXYbEQ4HcwQdd128E3qHQ==} + dependencies: + css-mediaquery: 0.1.2 + dev: false + /mdast-util-definitions@5.1.2: resolution: {integrity: sha512-8SVPMuHqlPME/z3gqVwWY4zVXn8lqKv/pAhC57FuJ40ImXyBpmO5ukh98zB2v7Blql2FiHjHv9LVztSIqjY+MA==} dependencies: @@ -3433,6 +3519,10 @@ packages: picomatch: 2.3.1 dev: false + /microseconds@0.2.0: + resolution: {integrity: sha512-n7DHHMjR1avBbSpsTBj6fmMGh2AGrifVV4e+WYc3Q9lO+xnSZ3NyhcBND3vzzatt05LFhoKFRxrIyklmLlUtyA==} + dev: false + /mime-db@1.52.0: resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==} engines: {node: '>= 0.6'} @@ -3461,6 +3551,12 @@ packages: hasBin: true dev: false + /minimatch@3.1.2: + resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==} + dependencies: + brace-expansion: 1.1.11 + dev: false + /minimatch@9.0.3: resolution: {integrity: sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==} engines: {node: '>=16 || 14 >=14.17'} @@ -3515,6 +3611,12 @@ packages: thenify-all: 1.6.0 dev: false + /nano-time@1.0.0: + resolution: {integrity: sha512-flnngywOoQ0lLQOTRNexn2gGSNuM9bKj9RZAWSzhQ+UJYaAFG9bac4DW9VHjUAzrOaIcajHybCTHe/bkvozQqA==} + dependencies: + big-integer: 1.6.52 + dev: false + /nanoid@3.3.7: resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==} engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} @@ -3667,6 +3769,10 @@ packages: safe-array-concat: 1.1.0 dev: false + /oblivious-set@1.0.0: + resolution: {integrity: sha512-z+pI07qxo4c2CulUHCDf9lcqDlMSo72N/4rLUpRXf6fu+q8vjt8y0xS+Tlf8NTJDdTXHbdeO1n3MlbctwEoXZw==} + dev: false + /on-finished@2.3.0: resolution: {integrity: sha512-ikqdkGAAyf/X/gPhXGvfgAytDZtDbr+bkNUJ0N9h5MI/dmdgCs3l6hoHrcUv41sRKew3jIwrp4qQDXiK99Utww==} engines: {node: '>= 0.8'} @@ -3686,6 +3792,12 @@ packages: engines: {node: '>= 0.8'} dev: false + /once@1.4.0: + resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==} + dependencies: + wrappy: 1.0.2 + dev: false + /parse-entities@4.0.1: resolution: {integrity: sha512-SWzvYcSJh4d/SGLIOQfZ/CoNv6BTlI6YEQ7Nj82oDVnRpwe/Z/F1EMx42x3JAOwGBlCjeCH0BRJQbQ/opHL17w==} dependencies: @@ -3708,6 +3820,11 @@ packages: resolution: {integrity: sha512-+TXdhKCySpJDynCxgAPoGVyAkiK3QPusQ63/BdU5t68QcYzyU6zkP/T7F3gkMQBVUYqdWEADKa6Kx5zg8QIKrg==} dev: false + /path-is-absolute@1.0.1: + resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==} + engines: {node: '>=0.10.0'} + dev: false + /path-key@3.1.1: resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==} engines: {node: '>=8'} @@ -4021,6 +4138,38 @@ packages: react: 18.2.0 dev: false + /react-query@3.39.3(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-nLfLz7GiohKTJDuT4us4X3h/8unOh+00MLb2yJoGTPjxKs2bc1iDhkNx2bd5MKklXnOD3NrVZ+J2UXujA5In4g==} + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: '*' + react-native: '*' + peerDependenciesMeta: + react-dom: + optional: true + react-native: + optional: true + dependencies: + '@babel/runtime': 7.23.9 + broadcast-channel: 3.7.0 + match-sorter: 6.3.4 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: false + + /react-responsive@9.0.2(react@18.2.0): + resolution: {integrity: sha512-+4CCab7z8G8glgJoRjAwocsgsv6VA2w7JPxFWHRc7kvz8mec1/K5LutNC2MG28Mn8mu6+bu04XZxHv5gyfT7xQ==} + engines: {node: '>=0.10'} + peerDependencies: + react: '>=16.8.0' + dependencies: + hyphenate-style-name: 1.0.4 + matchmediaquery: 0.3.1 + prop-types: 15.8.1 + react: 18.2.0 + shallow-equal: 1.2.1 + dev: false + /react@18.2.0: resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==} engines: {node: '>=0.10.0'} @@ -4139,6 +4288,10 @@ packages: vfile: 6.0.1 dev: false + /remove-accents@0.5.0: + resolution: {integrity: sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A==} + dev: false + /requires-port@1.0.0: resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==} dev: false @@ -4162,6 +4315,13 @@ packages: engines: {iojs: '>=1.0.0', node: '>=0.10.0'} dev: false + /rimraf@3.0.2: + resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==} + hasBin: true + dependencies: + glob: 7.2.3 + dev: false + /run-parallel@1.2.0: resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==} dependencies: @@ -4332,6 +4492,10 @@ packages: resolution: {integrity: sha512-dexizf3hB7d4Jq6Cd0d/NYQiqgEqIfZIpuMfwPfvSb6h06DZKmHyUe55jYwpHC12R42wpqXO6ouhiBpRzIcD/g==} dev: false + /shallow-equal@1.2.1: + resolution: {integrity: sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==} + dev: false + /shebang-command@2.0.0: resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==} engines: {node: '>=8'} @@ -4946,6 +5110,13 @@ packages: unist-util-visit-parents: 6.0.1 dev: false + /unload@2.2.0: + resolution: {integrity: sha512-B60uB5TNBLtN6/LsgAf3udH9saB5p7gqJwcFfbOEZ8BcBHnGwCf6G/TGiEqkRAxX7zAFIUtzdrXQSdL3Q/wqNA==} + dependencies: + '@babel/runtime': 7.23.9 + detect-node: 2.1.0 + dev: false + /unpipe@1.0.0: resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==} engines: {node: '>= 0.8'} @@ -5179,6 +5350,10 @@ packages: strip-ansi: 7.1.0 dev: false + /wrappy@1.0.2: + resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==} + dev: false + /ws@6.2.0: resolution: {integrity: sha512-deZYUNlt2O4buFCa3t5bKLf8A7FPP/TVjwOeVNpw818Ma5nk4MLXls2eoEGS39o8119QIYxTrTDoPQ5B/gTD6w==} peerDependencies: diff --git a/src/app/globals.css b/src/app/globals.css index a499ce5..61c7511 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -6,6 +6,18 @@ --foreground-rgb: 0, 0, 0; --background-start-rgb: 214, 219, 220; --background-end-rgb: 255, 255, 255; + --header-height: 1rem; + --first-color: hsl(28, 88%, 62%); + --title-color: hsl(290, 66%, 39%); + --text-color: hsl(291, 52%, 37%); + --body-color: hsl(0, 0%, 6%); + --body-font: "Montserrat", sans-serif; + --second-font: "Dancing Script", cursive; + --h2-font-size: 1.25rem; + --small-font-size: 0.813rem; + --font-semi-bold: 600; + --z-tooltip: 10; + --z-fixed: 100; } body { diff --git a/src/app/team/page.js b/src/app/team/page.js index 1cc4729..5e893fb 100644 --- a/src/app/team/page.js +++ b/src/app/team/page.js @@ -107,51 +107,52 @@ const Home = () => { return ( <> -
-

-
-
- {teamMembers.map((member, index) => ( -
-
- Profile -
-
-

{member.name}

-

{member.role}

-
- - - +

+

Our Team

+
+
+ {teamMembers.map((member, index) => ( +
+
+ Profile
+
+

{member.name}

+

{member.role}

+
+ + + +
+
+
-
-
- ))} + ))} +
-
-
+
); }; diff --git a/src/components/Navbar/.txt b/src/components/Navbar/.txt deleted file mode 100644 index 2ae4764..0000000 --- a/src/components/Navbar/.txt +++ /dev/null @@ -1 +0,0 @@ -NAVBAR \ No newline at end of file diff --git a/src/components/Navbar/Navbar.js b/src/components/Navbar/Navbar.js index 181f5cc..3360744 100644 --- a/src/components/Navbar/Navbar.js +++ b/src/components/Navbar/Navbar.js @@ -1,51 +1,118 @@ -import styles from "./Navbar.module.css"; -import Image from 'next/image'; +"use client" + +import React, { useState } from "react"; import Link from "next/link"; +import { IoClose, IoMenu } from "react-icons/io5"; +import styles from "./Navbar.module.css"; +import { useMediaQuery } from "react-responsive"; -export default function Navbar() { +const Navbar = () => { + const [isMenuOpen, setIsMenuOpen] = useState(false); + const isMobile = useMediaQuery({ maxWidth: "1150px" }); + const toggleMenu = () => { + setIsMenuOpen(!isMenuOpen); + }; + const closeMobileMenu = () => { + if (isMobile) { + setIsMenuOpen(false); + } + }; return ( - <> - - + ); -} \ No newline at end of file +}; + +export default Navbar \ No newline at end of file diff --git a/src/components/Navbar/Navbar.module.css b/src/components/Navbar/Navbar.module.css index af7811e..e869f15 100644 --- a/src/components/Navbar/Navbar.module.css +++ b/src/components/Navbar/Navbar.module.css @@ -1,36 +1,91 @@ - .navbar { - background-color: white; - padding: 15px 30px; - font-family: 'Poppins', sans-serif; - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); +.header { + position: fixed; + width: 100%; + top: 0; + left: 0; + background-color: transparent; + z-index: var(--z-fixed); +} + +.nav { + display: flex; + align-items: center; + justify-content: space-between; + position: relative; + height: var(--header-height); + margin: 1rem; + margin-top: 1.5rem; +} + +.nav__logo { + color: var(--first-color); + transition: color 0.4s; + font-size: var(--h2-font-size); + font-family: var(--second-font); +} + +.nav__toggle, +.nav__close { + font-size: 1.5rem; + color: var(--title-color); + cursor: pointer; +} + +.nav__cta { + background-color: var(--first-color); + color: var(--title-color); + border: none; + border-radius: 4px; + cursor: pointer; + transition: background-color 0.3s ease; + padding: 0.75rem 1.5rem; +} + +.nav__list { + display: flex; + flex-direction: column; + row-gap: 2.5rem; +} + +.nav__link { + color: var(--title-color); + font-weight: var(--font-semi-bold); + transition: color 0.4s; +} + +.nav__link:hover { + color: var(--first-color); +} + +.nav__close { + position: absolute; + top: 1rem; + right: 1.5rem; +} + +.show_menu { + right: 0; +} + +.nav__list__web { + display: flex; + flex-direction: row; + column-gap: 2.5rem; + align-items: center; + list-style-type: none; + padding: 0px; +} + +@media screen and (max-width: 1150px) { + .nav__menu { + position: fixed; + top: 0; + background-color: hsla(0, 0%, 6%, 0.2); + backdrop-filter: blur(16px); + -webkit-backdrop-filter: blur(16px); + width: 150px; + height: 100%; + padding: 6rem 3rem 0; + transition: right 0.4s; } - - .container { - display: flex; - align-items: center; - justify-content: space-between; - } - - .navbarNav { - list-style: none; - display: flex; - gap: 30px; - margin: 0; - } - - .navLink { - text-decoration: none; - color: black; - font-weight: bold; - font-size: 18px; - transition: color 0.3s ease, background-color 0.3s ease; - padding: 10px 15px; - border-radius: 5px; - } - - .navLink:hover { - color: whitesmoke; - background-color: purple; - border: 2px solid white; - box-sizing: border-box; - } \ No newline at end of file + } \ No newline at end of file diff --git a/src/components/about.js b/src/components/about.js index c51dc31..50e535e 100644 --- a/src/components/about.js +++ b/src/components/about.js @@ -10,22 +10,22 @@ export default function About() {

We are a team of passionate programmers who believe in building a better world for everyone.

-
-
- +
+
+
Noteworthy technology acquisitions 2021

Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.

-
+
Noteworthy technology acquisitions 2021

Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.

-
- +
+
diff --git a/src/components/hero.js b/src/components/hero.js index c176632..08af428 100644 --- a/src/components/hero.js +++ b/src/components/hero.js @@ -4,10 +4,10 @@ import Typewriter from 'typewriter-effect'; export default function Hero() { return ( <> -
+
{/* */} -
-
+
+

Your potential.
Our passion.

@@ -22,7 +22,7 @@ export default function Hero() {

We are a team of motivated students pledged to promote technological growth accross the globe.

-
+
iet-logo