// active nav highlight on scroll (simple) const sections = ['about', 'roster', 'progress', 'join']; const navLinks = document.querySelectorAll('.nav-links a'); window.addEventListener('scroll', () => let current = ''; const scrollPos = window.scrollY + 150; sections.forEach(section => const el = document.getElementById(section); if (el) const offsetTop = el.offsetTop; const offsetHeight = el.offsetHeight; if (scrollPos >= offsetTop && scrollPos < offsetTop + offsetHeight) current = section; ); navLinks.forEach(link => link.classList.remove('active'); const href = link.getAttribute('href'); if (href === `#$current`) link.classList.add('active'); else if (current === '' && href === '#') link.classList.add('active'); ); );
<!-- Raid progress --> <section id="progress"> <div class="container"> <div class="section-title">📈 Progression Snapshot</div> <div class="section-sub">Current tier: Shadow of the Forsaken (Mythic)</div> <div class="progress-card"> <div class="raid-item"> <div class="raid-header"><span><i class="fas fa-skull"></i> Vault of the Ancients (Heroic)</span><span>8/8 H</span></div> <div class="progress-bar-bg"><div class="progress-fill" style="width: 100%"></div></div> </div> <div class="raid-item"> <div class="raid-header"><span><i class="fas fa-dragon"></i> Crucible of Storms (Mythic)</span><span>5/8 M</span></div> <div class="progress-bar-bg"><div class="progress-fill" style="width: 62%"></div></div> </div> <div class="raid-item"> <div class="raid-header"><span><i class="fas fa-crown"></i> Echoes of the Fallen (Mythic)</span><span>3/8 M</span></div> <div class="progress-bar-bg"><div class="progress-fill" style="width: 37%"></div></div> </div> <div class="raid-item"> <div class="raid-header"><span><i class="fas fa-trophy"></i> Mythic+ Rating (avg)</span><span>2870 io</span></div> <div class="progress-bar-bg"><div class="progress-fill" style="width: 78%"></div></div> </div> </div> </div> </section> guild website template free
<nav class="navbar"> <div class="container nav-container"> <div class="logo"> <i class="fas fa-dragon logo-icon"></i> <h1>ÆTHELGARD</h1> </div> <ul class="nav-links"> <li><a href="#" class="active">Home</a></li> <li><a href="#about">Lore</a></li> <li><a href="#roster">Roster</a></li> <li><a href="#progress">Raids</a></li> <li><a href="#join">Join</a></li> </ul> <button class="btn-outline-light" id="discordBtn"><i class="fab fa-discord"></i> Discord</button> </div> </nav> // active nav highlight on scroll (simple) const
/* section common */ section padding: 80px 0; .section-title text-align: center; font-size: 2.5rem; font-weight: 800; margin-bottom: 16px; .section-sub text-align: center; color: #9ca3af; max-width: 600px; margin: 0 auto 56px auto; const navLinks = document.querySelectorAll('.nav-links a')
.container max-width: 1280px; margin: 0 auto; padding: 0 24px;
function renderMembers() const container = document.getElementById('membersContainer'); if (!container) return; container.innerHTML = membersData.map(member => ` <div class="member-card"> <div class="member-avatar"><i class="$member.avatarIcon"></i></div> <div class="member-name">$member.name</div> <div class="member-role">$member.role</div> <div class="member-bio">$member.bio</div> </div> `).join('');