<button class="mobile-menu-toggle" aria-label="Toggle navigation menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</button>
<nav class="main-nav">
<ul class="nav-links">
<li><a href="index.html" class="active">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="daily-ajo.html">Daily Ajo</a></li>
<li><a href="weekly-ajo.html">Weekly Ajo</a></li>
<li><a href="monthly-ajo.html">Monthly Ajo</a></li>
<li><a href="personal-savings.html">Personal Savings</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
<div class="nav-auth">
<a href="login.html" class="btn-login">Login</a>
<a href="register.html" class="btn-register">Register</a>
</div>
</nav>
</div>
<style>
:root {
--primary-color: #0F2C59;
--secondary-color: #1A5F7A;
--accent-color: #C5A059;
--text-color: #333333;
--bg-color: #FFFFFF;
--light-bg: #F8F9FA;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.site-header {
background-color: var(--bg-color);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
position: sticky;
top: 0;
z-index: 1000;
width: 100%;
}
.header-container {
max-width: 1200px;
margin: 0 auto;
padding: 1rem 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo-text {
font-size: 1.5rem;
font-weight: 700;
color: var(--primary-color);
text-decoration: none;
letter-spacing: 0.5px;
}
.main-nav {
display: flex;
align-items: center;
gap: 2rem;
}
.nav-links {
list-style: none;
display: flex;
align-items: center;
gap: 1.5rem;
}
.nav-links a {
text-decoration: none;
color: var(--text-color);
font-size: 0.95rem;
font-weight: 500;
transition: color 0.3s ease;
}
.nav-links a:hover,
.nav-links a.active {
color: var(--accent-color);
}
.nav-auth {
display: flex;
align-items: center;
gap: 1rem;
}
.btn-login {
text-decoration: none;
color: var(--primary-color);
font-weight: 600;
font-size: 0.95rem;
padding: 0.5rem 1rem;
transition: color 0.3s ease;
}
.btn-login:hover {
color: var(--accent-color);
}
.btn-register {
text-decoration: none;
background-color: var(--primary-color);
color: white;
font-weight: 600;
font-size: 0.95rem;
padding: 0.6rem 1.2rem;
border-radius: 4px;
transition: background-color 0.3s ease;
}
.btn-register:hover {
background-color: var(--secondary-color);
}
.mobile-menu-toggle {
display: none;
background: none;
border: none;
cursor: pointer;
padding: 0.5rem;
}
.mobile-menu-toggle .bar {
display: block;
width: 25px;
height: 3px;
background-color: var(--primary-color);
margin: 5px 0;
transition: 0.3s;
}
@media (max-width: 992px) {
.mobile-menu-toggle {
display: block;
}
.main-nav {
position: fixed;
top: 70px;
left: -100%;
width: 100%;
height: calc(100vh - 70px);
background-color: var(--bg-color);
flex-direction: column;
justify-content: flex-start;
padding: 2rem;
gap: 2rem;
transition: 0.3s ease-in-out;
box-shadow: 0 10px 10px rgba(0,0,0,0.05);
overflow-y: auto;
}
.main-nav.active {
left: 0;
}
.nav-links {
flex-direction: column;
width: 100%;
text-align: center;
gap: 1.2rem;
}
.nav-links a {
font-size: 1.1rem;
}
.nav-auth {
flex-direction: column;
width: 100%;
gap: 1rem;
}
.btn-login, .btn-register {
width: 100%;
text-align: center;
padding: 0.8rem;
}
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
const mobileMenuToggle = document.querySelector('.mobile-menu-toggle');
const mainNav = document.querySelector('.main-nav');
mobileMenuToggle.addEventListener('click', function() {
mainNav.classList.toggle('active');
});
});
</script>
<nav class="main-nav" id="mainNav">
<ul class="nav-links">
<li><a href="index.html" class="active">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="daily-ajo.html">Daily Ajo</a></li>
<li><a href="weekly-ajo.html">Weekly Ajo</a></li>
<li><a href="monthly-ajo.html">Monthly Ajo</a></li>
<li><a href="personal-savings.html">Personal Savings</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
<div class="nav-auth">
<a href="login.html" class="btn-login">Login</a>
<a href="register.html" class="btn-register">Register</a>
</div>
</nav>
<button class="mobile-menu-toggle" id="mobileMenuToggle" aria-label="Toggle Navigation">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</button>
<button class="menu-toggle" aria-label="Toggle Navigation" aria-expanded="false">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</button>
<nav class="main-nav">
<ul class="nav-links">
<li><a href="index.html" class="active">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="daily-ajo.html">Daily Ajo</a></li>
<li><a href="weekly-ajo.html">Weekly Ajo</a></li>
<li><a href="monthly-ajo.html">Monthly Ajo</a></li>
<li><a href="personal-savings.html">Personal Savings</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
<div class="nav-auth">
<a href="login.html" class="btn-login">Login</a>
<a href="register.html" class="btn-register">Register</a>
</div>
</nav>
Connect with our team today to discover how our daily, weekly, and monthly packages or rotational Ajo schemes can help you reach your financial goals. Reach out through WhatsApp or send us a message to begin building your secure financial future now.
We are here to help you navigate your savings journey. Reach out to our friendly team for support with your personal savings or Ajo schemes today.
