|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8" /> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" /> |
|
|
<title>Shelleng Team for Change (STC)</title> |
|
|
<link rel="stylesheet" href="style.css" /> |
|
|
<style> |
|
|
|
|
|
@keyframes fadeInUp { |
|
|
from { |
|
|
opacity: 0; |
|
|
transform: translateY(30px); |
|
|
} |
|
|
to { |
|
|
opacity: 1; |
|
|
transform: translateY(0); |
|
|
} |
|
|
} |
|
|
|
|
|
.hero-overlay { |
|
|
animation: fadeInUp 1.5s ease-out; |
|
|
} |
|
|
|
|
|
.nav-toggle.active::before { |
|
|
content: "✖"; |
|
|
} |
|
|
|
|
|
.watermark { |
|
|
color: rgba(255, 255, 255, 0.15); |
|
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.nav-links { |
|
|
width: 100%; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
|
|
|
<div class="watermark">STC</div> |
|
|
|
|
|
|
|
|
<div id="preloader"><div class="loader"></div></div> |
|
|
|
|
|
|
|
|
<div class="navbar"> |
|
|
<div class="nav-left"> |
|
|
<div class="nav-logo">SHELLENG TEAM FOR CHANGE (STC)</div> |
|
|
</div> |
|
|
<button class="nav-toggle" onclick="toggleMenu()" id="navToggle">☰</button> |
|
|
<ul class="nav-links" id="navLinks"> |
|
|
<li><a href="index.html">Home</a></li> |
|
|
<li><a href="register.html">Apply Now</a></li> |
|
|
<li><a href="about.html">About</a></li> |
|
|
<li><a href="contact.html">Contact</a></li> |
|
|
<li><a href="admin.html">Admin</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
|
|
|
<section class="hero"> |
|
|
<div class="hero-overlay"> |
|
|
<h1>SHELLENG TEAM FOR CHANGE (STC)</h1> |
|
|
<p>Empowering Youth Through Innovation and Unity</p> |
|
|
<a href="register.html" class="btn">Apply Now</a> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="leadership"> |
|
|
<h2>Our Leadership</h2> |
|
|
<div class="leadership-grid"> |
|
|
<div class="leader-card"> |
|
|
<h3>Patron</h3> |
|
|
<p>Alh. Mal. Abdulrahman Isa<br><small>(Dan Isan Shelleng, District Head of Shelleng)</small></p> |
|
|
</div> |
|
|
<div class="leader-card"> |
|
|
<h3>President</h3> |
|
|
<p>Mohammed Al'amin Abdulrahman Dasong</p> |
|
|
</div> |
|
|
<div class="leader-card"> |
|
|
<h3>Secretary</h3> |
|
|
<p>Abdullahi ibn Abdullahi</p> |
|
|
</div> |
|
|
<div class="leader-card"> |
|
|
<h3>Financial Secretary</h3> |
|
|
<p>Abubakar Abdullahi</p> |
|
|
</div> |
|
|
<div class="leader-card"> |
|
|
<h3>Organizing Secretary</h3> |
|
|
<p>Yusuf Bala Abbas</p> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer> |
|
|
<p>Email: <a href="mailto:maaidasong@gmail.com">maaidasong@gmail.com</a> | Phone: 09077426767</p> |
|
|
<p>© 2025 Shelleng Team for Change. All Rights Reserved.</p> |
|
|
</footer> |
|
|
|
|
|
|
|
|
<script> |
|
|
function toggleMenu() { |
|
|
const nav = document.getElementById("navLinks"); |
|
|
const toggle = document.getElementById("navToggle"); |
|
|
nav.classList.toggle("show"); |
|
|
toggle.classList.toggle("active"); |
|
|
} |
|
|
|
|
|
function hidePreloader() { |
|
|
const preloader = document.getElementById("preloader"); |
|
|
if (preloader) { |
|
|
preloader.style.opacity = "0"; |
|
|
setTimeout(() => preloader.style.display = "none", 500); |
|
|
} |
|
|
} |
|
|
|
|
|
window.addEventListener("load", hidePreloader); |
|
|
setTimeout(hidePreloader, 5000); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
