if (applyBtn) applyBtn.addEventListener('click', () => notifyFeature('Apply form would open here. Customize with your Google Form or Discord application.')); if (recruitApplyBtn) recruitApplyBtn.addEventListener('click', () => notifyFeature('Discord application channel: join our server and verify.')); if (discordNavBtn) discordNavBtn.addEventListener('click', () => notifyFeature('Join our official Discord → discord.gg/aethelgard (demo)'));
/* roster / members grid */ .members-grid display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 32px; margin-top: 20px; .member-card background: #11161f; border-radius: 28px; padding: 28px 20px; text-align: center; transition: all 0.25s ease; border: 1px solid #1e293b; .member-card:hover transform: translateY(-6px); border-color: #4f46e5; box-shadow: 0 20px 30px -12px rgba(0,0,0,0.5); .member-avatar font-size: 60px; background: #1e293b; width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; border-radius: 50%; color: #818cf8; .member-name font-size: 1.4rem; font-weight: 700; .member-role color: #818cf8; font-weight: 600; margin: 8px 0; font-size: 0.9rem; .member-bio font-size: 0.85rem; color: #94a3b8; margin-top: 12px; guild website template free
<!-- Roster / Members --> <section id="roster"> <div class="container"> <div class="section-title">🏅 Vanguard Council</div> <div class="section-sub">Meet the champions leading the charge</div> <div class="members-grid" id="membersContainer"> <!-- dynamic but also static default with JS? we fill both --> </div> </div> </section> if (applyBtn) applyBtn
body font-family: 'Inter', sans-serif; background: #0a0c10; color: #eef2ff; line-height: 1.5; scroll-behavior: smooth; We are adventurers, raiders, and strategists who believe
<!-- About / Lore section --> <section id="about"> <div class="container"> <div class="section-title">⚔️ The Aethelgard Oath</div> <div class="section-sub">Founded in 2021, we blend old-school spirit with competitive drive.</div> <div class="about-grid"> <div class="about-text"> <h3>From embers to eternity</h3> <p>Aethelgard was born from the dream of creating a guild where respect, skill, and camaraderie walk hand in hand. We are adventurers, raiders, and strategists who believe that every wipe is a lesson and every victory is shared.</p> <p>Our core values: <strong>integrity, loyalty, and excellence</strong>. Whether you’re a veteran or an aspiring mythic raider, you’ll find a home among wolves who fight as one pack.</p> <p>We maintain a friendly but focused environment — no toxicity, only constructive feedback and mutual growth.</p> </div> <div class="about-stats"> <div class="stat-item"> <div class="stat-number">97%</div> <div>Raid attendance rate</div> </div> <div class="stat-item"> <div class="stat-number">4.8/5</div> <div>Member satisfaction</div> </div> <div class="stat-item"> <div class="stat-number">120+</div> <div>Mythic+ clears / week</div> </div> </div> </div> </div> </section>
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('');