|link| Free - Guild Website Template
function notifyFeature(linkMsg) alert(`✨ $linkMsg — This is a demo template. Replace with your actual guild invite links!`);
<!-- 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>
/* about / lore card */ .about-grid display: flex; gap: 40px; flex-wrap: wrap; background: #11161f; border-radius: 32px; padding: 40px; border: 1px solid #1e293b; .about-text flex: 2; .about-text h3 font-size: 1.8rem; margin-bottom: 16px; .about-text p margin-bottom: 20px; color: #cbd5e6; .about-stats flex: 1; background: #0f131a; border-radius: 24px; padding: 24px; display: flex; flex-direction: column; gap: 24px; .stat-item text-align: center; .stat-number font-size: 2.5rem; font-weight: 800; color: #a5b4fc; guild website template free
// add some dynamic loading animation for progress bars function animateProgressBars() const fills = document.querySelectorAll('.progress-fill'); fills.forEach(fill => const width = fill.style.width; fill.style.width = '0%'; setTimeout(() => fill.style.transition = 'width 1s ease-out'; fill.style.width = width; , 200); ); // initial load renderMembers(); animateProgressBars();
<!-- Recruitment section --> <section id="join"> <div class="container"> <div class="recruit-box"> <h3><i class="fas fa-hand-peace"></i> Join the Warband</h3> <p style="max-width: 600px; margin: 0 auto 12px;">We are recruiting dedicated players for mythic raid progression & high M+ keys.</p> <div class="recruit-tags"> <span class="tag">🔥 Tank (Prot War / DH)</span> <span class="tag">✨ Healer (Prevoker / Disc)</span> <span class="tag">⚡ Ranged DPS (Mage/Lock)</span> <span class="tag">🛡️ Melee DPS (Rogue/Ret)</span> </div> <p style="margin-bottom: 28px; font-size: 0.9rem;">Raids: Wed/Thu 8pm-11pm EST | alt-friendly & social members welcome!</p> <button class="btn-secondary" id="recruitApplyBtn"><i class="fab fa-discord"></i> Apply via Discord</button> </div> </div> </section> </main> Whether you’re a veteran or an aspiring mythic
/* 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;
// general UI alerts / demo interactions (free template, but gives functional feedback) const applyBtn = document.getElementById('applyNowBtn'); const recruitApplyBtn = document.getElementById('recruitApplyBtn'); const discordNavBtn = document.getElementById('discordBtn'); only constructive feedback and mutual growth.<
<main> <!-- Hero --> <section class="hero"> <div class="container hero-grid"> <div class="hero-content"> <span class="hero-badge"><i class="fas fa-shield-alt"></i> Season of the Eclipse</span> <h2>Forged in <span class="hero-highlight">valor</span>, united by glory.</h2> <p>We are Aethelgard — a semi-hardcore guild seeking champions to conquer mythic raids, push keys, and build lasting brotherhood.</p> <div class="hero-buttons"> <button class="btn-primary" id="applyNowBtn"><i class="fas fa-scroll"></i> Apply now</button> <button class="btn-outline-light" id="rosterBtn">View roster →</button> </div> </div> <div class="hero-image"> <i class="fas fa-helmet-battle"></i> </div> </div> </section>