diff --git a/about us.html b/about us.html index e0f11053..ed0d5d2a 100644 --- a/about us.html +++ b/about us.html @@ -29,12 +29,15 @@ top: 0; left: 0; right: 0; - background: rgba(0, 0, 0, 0.95); - backdrop-filter: blur(15px); + background: rgba(255, 255, 255, 0.1); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); z-index: 1000; padding: 1.2rem 0; transform: translateY(-100%); animation: slideDown 0.8s ease-out 0.3s forwards; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); + border-bottom: 1px solid rgba(255, 255, 255, 0.2); transition: all 0.3s ease; } @@ -68,7 +71,7 @@ } .nav-links a { - color: white; + color: rgb(16, 15, 15); text-decoration: none; font-weight: 500; padding: 0.5rem 0; diff --git a/home.css b/home.css index 71e029e6..d599f099 100644 --- a/home.css +++ b/home.css @@ -19,13 +19,17 @@ body { /* Navigation Styles */ .navbar { - background: black; + background: rgba(149, 149, 149, 0.298); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); padding: 1rem 0; position: fixed; width: 100%; top: 0; z-index: 1000; - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); + border-bottom: 1px solid rgba(255, 255, 255, 0.1); + position: fixed; } .nav-container { @@ -77,23 +81,28 @@ body { .btn-login { background: transparent; - color: #ffd700; - border: 2px solid #ffd700; + color: #db596f; + border: 2px solid #db596f; + transition: 0.3s ease-in-out; } .btn-login:hover { - background: #ffd700; - color: black; + background: #db596f; + color: white; + transform: scale(1.1); } .btn-signup { background: #ff9933; color: white; + border: 2px solid #ff9933; + transition: 0.3s ease-in-out; } .btn-signup:hover { - background: #ffae42; - transform: translateY(-2px); + background: white; + color: #ff9933; + transform: scale(1.06); } /* Navbar effect on scroll */ @@ -103,7 +112,7 @@ body { .navbar.scrolled { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); - background-color: rgba(0, 0, 0, 0.85); + background-color: rgba(93, 93, 93, 0.377); backdrop-filter: blur(10px); }