Guild Website Template Free Hot! -
<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>
<!-- 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> guild website template free
// 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'); <main> <
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)')); !-- Hero -->
/* hero section */ .hero padding: 80px 0 100px; background: radial-gradient(circle at 10% 30%, rgba(79,70,229,0.15), transparent 70%); .hero-grid display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 40px; .hero-content flex: 1; .hero-badge background: rgba(79,70,229,0.2); display: inline-block; padding: 6px 16px; border-radius: 40px; font-size: 0.85rem; font-weight: 600; color: #a5b4fc; margin-bottom: 20px; border: 1px solid rgba(79,70,229,0.5); .hero-content h2 font-size: 3.4rem; font-weight: 800; line-height: 1.2; margin-bottom: 20px; .hero-highlight color: #818cf8; border-bottom: 3px solid #4f46e5; display: inline-block; .hero-content p font-size: 1.2rem; color: #cbd5e1; max-width: 550px; margin-bottom: 32px; .hero-buttons display: flex; gap: 16px; flex-wrap: wrap; .btn-primary background: #4f46e5; padding: 12px 28px; border-radius: 40px; font-weight: 700; border: none; color: white; cursor: pointer; transition: 0.2s; font-size: 1rem; .btn-primary:hover background: #6366f1; transform: translateY(-2px); box-shadow: 0 10px 20px -5px #4f46e5; .hero-image flex: 1; text-align: center; .hero-image i font-size: 220px; color: #2d2f48; filter: drop-shadow(0 0 12px #4f46e5); opacity: 0.8;
