From d66c3d865fe5437d7810dc97f90da31fa7fe6c9b Mon Sep 17 00:00:00 2001 From: siddharth A Date: Sun, 20 Oct 2024 09:57:26 +0530 Subject: [PATCH] included nav bar in top deals --- topdeals/topdeals.html | 180 ++++++++++++++++++++++++++++++++++++++++- 1 file changed, 178 insertions(+), 2 deletions(-) diff --git a/topdeals/topdeals.html b/topdeals/topdeals.html index 2d415bdd..312ed13b 100644 --- a/topdeals/topdeals.html +++ b/topdeals/topdeals.html @@ -96,14 +96,190 @@ .book-now a:hover { background-color: #ff787d; } + /* navbar styles */ + body { + margin: 0; + font-family: Arial, sans-serif; +} + +.nav-container { + height: auto; + width: 100%; + display: flex; + justify-content: flex-start; + align-items: center; + position: fixed; + top: 0; + left: 0; + z-index: 9999; + background-color: #0a1e3f; + padding: 1rem 1rem; +} + +.newNav { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; +} + +.logo-container { + display: flex; + align-items: center; +} + +.sitelogo { + width: 40px; + height: auto; +} + +.nav__logo { + color: #ffffff; + text-decoration: none; + font-size: 24px; + margin-left: 10px; +} + +.navLinks { + display: flex; + list-style: none; + padding: 0; + gap: 1.2rem; + white-space: nowrap; +} + +.navLinks .link { + position: relative; +} + +.navLinks a { + color: #ffffff; + text-decoration: none; + padding: 10px 15px; + transition: background-color 0.3s ease, color 0.3s ease; +} + +.navLinks a:hover { + background-color: rgba(238, 130, 238, 0.8); + color: #ff6347; +} + +.active { + color: red !important; +} + +.dropdown-menu { + display: none; + position: absolute; + top: 100%; + background-color: #1f2532; + z-index: 999; + padding: 10px; +} + +.dropdown:hover .dropdown-menu { + display: block; +} + +.btn { + background-color: #ff6347; + color: white; + border: none; + padding: 10px 15px; + cursor: pointer; + border-radius: 40px; + transition: background-color 0.3s ease; +} + +.btn:hover { + background-color: #ff4500; +} + +.hamburger { + display: none; +} + +.line { + height: 3px; + width: 25px; + background-color: white; + margin: 4px 0; +} + +@media (max-width: 768px) { + .navLinks { + display: none; + flex-direction: column; + width: 100%; + position: absolute; + top: 60px; + left: 0; + background-color: #0a1e3f; + } + + .navLinks.active { + display: flex; + } + + .hamburger { + display: block; + } +} + + +
-

Top deals

-

"Don’t miss out on our exclusive top deals of the season! Whether you’re looking to upgrade your tech, refresh your wardrobe, or find the perfect gift, we’ve got you covered with unbeatable discounts across all categories. "

+



+

"Don’t miss out on our exclusive top deals of the season! Whether you’re looking to upgrade your tech, refresh your wardrobe, or find the perfect gift, we’ve got you covered with unbeatable discounts across all categories. "