From 8377bfa82451bc3850e066bcd6c77a88b31c53a2 Mon Sep 17 00:00:00 2001 From: divyanshii10 <149924007+divyanshii10@users.noreply.github.com> Date: Fri, 24 Jan 2025 22:55:55 +0530 Subject: [PATCH] navbar enhanced --- index.html | 197 +++++++++++++++-------------------- navigateToPages/aboutus.html | 181 ++++++++++++++------------------ navigateToPages/contact.html | 101 +++++++----------- style.css | 42 +++----- 4 files changed, 213 insertions(+), 308 deletions(-) diff --git a/index.html b/index.html index 67489ee..16288fd 100644 --- a/index.html +++ b/index.html @@ -71,129 +71,98 @@ -
- -
- -
- - - - - -
- - - +
+ + + -
- +
+ + +
- +
- + + + +
+
diff --git a/navigateToPages/aboutus.html b/navigateToPages/aboutus.html index 1f8ebbb..ebd0f57 100644 --- a/navigateToPages/aboutus.html +++ b/navigateToPages/aboutus.html @@ -72,121 +72,94 @@
-
- -
- - + +
+ + + + +
+ + +
+ +
+
+ +
+

diff --git a/navigateToPages/contact.html b/navigateToPages/contact.html index 8e59d4a..1072423 100644 --- a/navigateToPages/contact.html +++ b/navigateToPages/contact.html @@ -75,53 +75,21 @@
-
- -
- + +
- - - +
+ - -
-
diff --git a/style.css b/style.css index d1dbbdb..b65f888 100644 --- a/style.css +++ b/style.css @@ -60,21 +60,6 @@ header{ } - -/*navbar*/ - - .navbar-list { - list-style-type: none; - margin: 0; - padding: 0; - color: white; - } - - .navbar-list li { - display: inline-block; - color: white; - } - /* Dark Mode */ @media (prefers-color-scheme: dark) { .header { @@ -89,15 +74,14 @@ header{ /*-----navbar------*/ .navbar{ - display: flex; - flex-direction: row; - align-items: center; - gap: 40px; + display: flex; + justify-content: space-between; + align-items: center; } .navbar-list{ list-style-type: none; - margin: 0; - padding: 0; + margin: 10px; + padding: 10px; display: flex; } @@ -203,12 +187,13 @@ header{ .left{ display: flex; - gap: 20px; + align-items:center; + gap:1rem; } .right{ display: flex; - gap: 12px; + gap: 1rem; } .group { @@ -317,7 +302,8 @@ header{ background: linear-gradient(to right, #0f0c29, #302b63, #24243e); border: none; letter-spacing: 0.05em; - border-radius: 16px; + /* border-radius: 16px; */ + text-decoration: none; } @@ -329,8 +315,12 @@ header{ .sign-up:hover,.log-in:hover span { transform: translateX(7px); } - - + + .right.hideOnSmallScreen{ + display:flex; + justify-content: flex-end; + align-items: center; + } /*------theme toggler------**/ .theme-switch { --toggle-size: 15px;