Skip to content

Styled navbar properly for pricing plans page. #1052

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Akashshelke07 merged 1 commit into from
Nov 5, 2025
Merged

Styled navbar properly for pricing plans page. #1052

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
137 changes: 71 additions & 66 deletions src/pages/pricing.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Pricing Plans | VehiGo</title>
<link rel="stylesheet" href="../../assets/css/style.css" />

<link rel="stylesheet" href="../../assets/styles/pricing-help.css" />
<link
rel="stylesheet"
Expand Down Expand Up @@ -59,6 +59,38 @@
}

/* Navbar Styling (match home) */
/* Make sure everything stays in one horizontal line */
.header .navbar {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
flex-wrap: nowrap !important;
width: 100% !important;
}

/* Align navbar brand, links, and theme toggle neatly */
.header .navbar .navbar-collapse {
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
flex-grow: 1 !important;
}

/* Prevent wrapping of nav items */
.header .navbar .navbar-nav {
display: flex !important;
align-items: center !important;
gap: 12px !important;
flex-wrap: nowrap !important;
}



/* Optional: Prevent wrapping of all items together */
.header .navbar * {
white-space: nowrap !important;
}

.header {
background: linear-gradient(
135deg,
Expand Down Expand Up @@ -91,7 +123,7 @@
.nav-link {
color: #374151 !important;
font-weight: 500 !important;
padding: 10px 15px !important;
padding: 16px 15px !important;
border-radius: 8px !important;
transition: all 0.3s ease !important;
position: relative !important;
Expand All @@ -111,42 +143,23 @@

/* Theme Toggle Button */
.theme-toggle-btn {
border-radius: 25px !important;
padding: 10px 20px !important;
font-size: 14px !important;
font-weight: 600 !important;
transition: all 0.3s ease !important;
border: 2px solid #e5e7eb !important;
background: linear-gradient(
135deg,
#ffffff 0%,
#f9fafb 100%
) !important;
color: #374151 !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
border: none !important;
border-radius: 25px !important;
margin-right: 5px;
padding: 10px 25px !important;
font-weight: 700 !important;
color: white !important;
transition: all 0.3s ease !important;
box-shadow: 0 2px 8px rgba(37, 100, 235, 0.3) !important;
}

.theme-toggle-btn:hover {
transform: translateY(-2px) !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
border-color: #2563eb !important;
background: linear-gradient(
135deg,
#f0f9ff 0%,
#e0f2fe 100%
) !important;
color: #2563eb !important;
}
.theme-toggle-btn.btn-outline-light {
border-color: rgba(255, 255, 255, 0.3) !important;
background: rgba(255, 255, 255, 0.1) !important;
color: white !important;
backdrop-filter: blur(10px) !important;
}
.theme-toggle-btn.btn-outline-light:hover {
background: rgba(255, 255, 255, 0.2) !important;
border-color: rgba(255, 255, 255, 0.5) !important;
color: white !important;
box-shadow: 0 4px 15px rgba(0,0,0,0.15) !important;
}



/* Hero Section Styles */
.pricing-hero {
Expand Down Expand Up @@ -612,36 +625,28 @@
filter: brightness(0) invert(1);
}

/* Fix login button visibility in dark mode */
.dark-theme .btn-vehigo {
background: #3b82f6 !important;
color: white !important;
border: 1px solid #3b82f6 !important;
}

.dark-theme .btn-vehigo:hover {
background: #2563eb !important;
border-color: #2563eb !important;
color: white !important;
}


/* Ensure the login button has proper styling in light mode as well */
/* Login Button */
.btn-vehigo {
background: #2563eb;
color: white;
border: 1px solid #2563eb;
padding: 8px 16px;
border-radius: 8px;
text-decoration: none;
transition: all 0.3s ease;
}
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
border: none !important;
border-radius: 25px !important;
margin-right: 5px;
padding: 10px 20px !important;
font-weight: 600 !important;
color: white !important;
transition: all 0.3s ease !important;
box-shadow: 0 2px 8px rgba(37, 100, 235, 0.3) !important;
text-decoration: none;
}

.btn-vehigo:hover {
background: #1d4ed8;
border-color: #1d4ed8;
color: white;
transform: translateY(-1px);
}
.btn-vehigo:hover {
transform: translateY(-2px) !important;
box-shadow: 0 4px 15px rgba(37, 100, 235, 0.4) !important;
background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%) !important;
}
</style>
</head>
<body>
Expand Down Expand Up @@ -706,7 +711,7 @@
class="btn btn-outline-secondary theme-toggle-btn"
type="button"
>
<i class="fa-solid fa-gear"></i><span class="label">Light</span>
<span class="label">Light</span>
</button>
</li>

Expand Down Expand Up @@ -967,13 +972,13 @@ <h4>Stay in the loop</h4>
themeToggle.classList.remove("btn-outline-secondary");
themeToggle.classList.add("btn-outline-light");
themeToggle.innerHTML =
'<i class="fa-solid fa-gear"></i><span class="label">Light</span>';
'<span class="label">Light</span>';
} else {
document.body.classList.remove("dark-theme");
themeToggle.classList.remove("btn-outline-light");
themeToggle.classList.add("btn-outline-secondary");
themeToggle.innerHTML =
'<i class="fa-solid fa-gear"></i><span class="label">Dark</span>';
'<span class="label">Dark</span>';
}
themeToggle.addEventListener("click", function (e) {
e.preventDefault();
Expand All @@ -984,14 +989,14 @@ <h4>Stay in the loop</h4>
themeToggle.classList.remove("btn-outline-light");
themeToggle.classList.add("btn-outline-secondary");
themeToggle.innerHTML =
'<i class="fa-solid fa-gear"></i><span class="label">Dark</span>';
'<span class="label">Dark</span>';
} else {
document.body.classList.add("dark-theme");
localStorage.setItem("theme", "dark");
themeToggle.classList.remove("btn-outline-secondary");
themeToggle.classList.add("btn-outline-light");
themeToggle.innerHTML =
'<i class="fa-solid fa-gear"></i><span class="label">Light</span>';
'<span class="label">Light</span>';
}
});
} else {
Expand Down