Skip to content
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

Fix: Navbar Alignment and Explore More Consistency on Careers Page #3321

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Fix: Navbar Alignment and Explore More Consistency on Careers Page #3321

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
173 changes: 110 additions & 63 deletions careers.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -344,89 +344,136 @@
<div style="display: flex; justify-content: center;" class="container">
<div class="row">
<div style="display: flex; justify-content: center;;" class="">
<nav class="navbar navbar-expand-lg " style="display: flex;">
<!-- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="toggler-icon"></span>
<span class="toggler-icon"></span>
<span class="toggler-icon"></span>
</button> -->
<div class="collapse navbar-collapse sub-menu-bar" id="navbarSupportedContent" style="margin: auto; margin-left: -5px;">
<div class="icon1" >
<nav class="navbar navbar-expand-lg" style="display: flex; background-color: #2c3e50;">
<div class="collapse navbar-collapse sub-menu-bar" id="navbarSupportedContent">
<div class="icon1">
<a href="./index.html">
<img src="assets/images/FinvedaLogo.png" alt="icon.png" style="width: 11rem;">
<img src="./assets/images/FinvedaLogo.png" alt="Finveda Logo" style="width: 13rem;">
</a>
</div>
<ul id="nav" class="navbar-nav ml-auto" style="margin: auto;">
<li class="nav-item">
<a class="page-scroll" href="./index.html" style="color: rgb(237, 242, 244);">Home 🏡</a>
<a class="page-scroll" href="./index.html">
<i class="fas fa-home icon-hover" style="margin: 5px;"></i> Home
</a>
</li>
<li class="nav-item">
<a class="page-scroll" href="./about.html" style="color: rgb(237, 242, 244);">About Us 📖</a>
<a class="page-scroll" href="./about.html">
<i class="fas fa-info-circle icon-hover" style="margin: 5px;"></i> About Us
</a>
</li>
<li class="nav-item">
<a class="page-scroll" href="./trends.html" style="color: rgb(237, 242, 244);">Trends 📈</a>
</li>
<li class="nav-item">
<a class="page-scroll" href="./tools/sip.html" style="color: rgb(237, 242, 244);">Tools 🔧</a>
</li>
<li class="nav-item">
<a class="page-scroll" href="./blog.html" style="color: rgb(237, 242, 244);">Blogs 📰</a>
</li>
<li class="nav-item">
<a class="page-scroll" href="./finance.html" style="color: rgb(237, 242, 244);">Courses 📚</a>
</li>
<a class="page-scroll active-link" href="./careers.html">
<i class="fas fa-briefcase" style="margin: 5px;"></i> Career
</a>
</li>
<li class="nav-item">
<a class="page-scroll" href="./quiz.html" style="color: rgb(237, 242, 244);">Quiz 🤔</a>
<a class="page-scroll" href="./contact.html">
<i class="fas fa-envelope icon-hover" style="margin: 5px;"></i> Contact
</a>
</li>
<li class="nav-item">
<a class="page-scroll active-link" href="./careers.html" style="color: rgb(237, 242, 244);">Career 👔</a>
<a class="page-scroll" href="./faq.html">
<i class="fas fa-question-circle icon-hover" style="margin: 5px;"></i> Help
</a>
</li>
<li class="nav-item">
<a class="page-scroll" href="./contact.html" style="color: rgb(237, 242, 244);">Contact📞</a>
</li>
<li class="nav-item">
<a class="page-scroll" href="./faq.html" style="color: rgb(237, 242, 244);">Help 🙋‍♂️</a>
</li>
<li ><a class="page-scroll" href="./maps.html" style="color: rgb(237, 242, 244);" >MAPS 🗺️</a></li>
<li class="nav-item no-underline">
<a class="main-btn navbar-btn"
style="padding: 2px 20px; color: rgb(237, 242, 244);animation-duration: 0.4s;animation-name: ease;"
data-scroll-nav="0" href="./loginPage.html">Login/Register 💻</a>
<!-- Dropdown for Explore -->
<li class="nav-item dropdown" onmouseover="toggleDropdown(true)" onmouseout="toggleDropdown(false)">
<a class="page-scroll dropdown-toggle" href="#">
<i class="fas fa-chevron-down icon-hover" style="margin: 5px;"></i> Explore More
</a>
<ul class="dropdown-menu">
<li>
<a href="./finance.html">
<i class="fas fa-graduation-cap icon-hover" style="margin: 5px;"></i> Courses
</a>
</li>
<li><a href="./trends.html"><i class="fas fa-chart-line icon-hover" style="margin: 5px;"></i>
Trends</a></li>
<li><a href="./tools/sip.html"><i class="fas fa-tools icon-hover" style="margin: 5px;"></i>
Tools</a></li>
<li><a href="./blog.html"><i class="fas fa-blog icon-hover" style="margin: 5px;"></i> Blogs</a>
</li>
<li><a href="./quiz.html"><i class="fas fa-question icon-hover" style="margin: 5px;"></i> Quiz</a>
</li>
<li><a href="./Games/Games.html"><i class="fas fa-gamepad icon-hover" style="margin: 5px;"></i>
Games</a>
</li>
<li><a href="./maps.html"><i class="fas fa-map icon-hover" style="margin: 5px;"></i> MAPS</a></li>
</ul>
</li>
<!-- Navigation item placeholder for Login/Register or Logout button -->
<li class="nav-item no-underline" id="auth-btn-container">
<a class="main-btn navbar-btn" style="padding: 2px 20px;" data-scroll-nav="0"
href="./loginPage.html">
<i class="fas fa-user-circle icon-hover" style="margin: 5px;"></i> Login/Register
</a>
</li>
<li class="nav-item no-underline">
<button id="theme-toggle" class="theme-toggle" style="margin-right: 2px;">
🌙
<li class="nav-item no-underline align-self-center">
<button id="theme-toggle" class="theme-toggle">
<span>🌞</span>
</button>
</li>
</ul>
</div>
</nav>
</div>

<script>
const toggleButton = document.getElementById('theme-toggle');
var body = document.body;
var currentTheme = localStorage.getItem('theme');
<li class="nav-item no-underline align-self-center">
<button id="theme-toggle" class="theme-toggle">
<span>🌞</span>
</button>
</li>

if (currentTheme === 'dark') {
body.classList.add('dark-mode');
toggleButton.classList.add('dark');
toggleButton.textContent = '🌞';

<script>
// Function to initialize theme based on localStorage
function initializeTheme() {
const body = document.body;
const toggleButton = document.getElementById('theme-toggle');
const currentTheme = localStorage.getItem('theme');

// Apply saved theme
if (currentTheme === 'dark') {
body.classList.add('dark-mode');
toggleButton.classList.add('dark');
toggleButton.querySelector('span').textContent = '🌙'; // Dark mode icon
} else {
toggleButton.querySelector('span').textContent = '🌞'; // Light mode icon
}
}

// Call initializeTheme on page load
document.addEventListener('DOMContentLoaded', () => {
initializeTheme();

const toggleButton = document.getElementById('theme-toggle');
const body = document.body;

// Event listener for theme toggle
toggleButton.addEventListener('click', () => {
body.classList.toggle('dark-mode');
toggleButton.classList.toggle('dark');

// Update icon and save theme
if (body.classList.contains('dark-mode')) {
toggleButton.querySelector('span').textContent = '🌙'; // Dark mode icon
localStorage.setItem('theme', 'dark');
} else {
toggleButton.querySelector('span').textContent = '🌞'; // Light mode icon
localStorage.setItem('theme', 'light');
}

loadShow(); // Call any additional function if needed
});
});

// Function placeholder for additional operations (if needed)
function loadShow() {
// Additional actions can go here
}
</script>

toggleButton.addEventListener('click', function () {
body.classList.toggle('dark-mode');
toggleButton.classList.toggle('dark');

// Update button icon based on mode
if (body.classList.contains('dark-mode')) {
toggleButton.textContent = '🌞'; // Light mode icon
localStorage.setItem('theme', 'dark');
} else {
toggleButton.textContent = '🌙'; // Dark mode icon
localStorage.setItem('theme', 'light');
}
});
</script>
</div>
<div class="">
<!-- Login Modal -->
Expand Down Expand Up @@ -1152,7 +1199,7 @@ <h2>Jobs in Finance</h2>
}

/* Theme toggle button */
#theme-toggle {
/* #theme-toggle {
position: fixed;
top: 20px;
right: 20px;
Expand All @@ -1168,7 +1215,7 @@ <h2>Jobs in Finance</h2>

#theme-toggle.dark {
background: #8e44ad;
}
} */

</style>

Expand Down