Guild Website Template Free ~upd~ Direct

/* recruitment */ .recruit-box background: linear-gradient(145deg, #0f172a, #0a0f1a); border-radius: 40px; padding: 48px 32px; text-align: center; border: 1px solid #334155; .recruit-box h3 font-size: 2rem; margin-bottom: 16px; .recruit-tags display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 28px 0; .tag background: #1e293b; padding: 8px 18px; border-radius: 40px; font-size: 0.9rem; font-weight: 500; .btn-secondary background: transparent; border: 2px solid #818cf8; padding: 12px 32px; border-radius: 40px; font-weight: bold; color: white; cursor: pointer; transition: 0.2s; .btn-secondary:hover background: #818cf8; color: #0a0c10;

// 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'); guild website template free

<!-- 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> /* recruitment */

// smooth scroll for anchor links document.querySelectorAll('.nav-links a, #rosterBtn, .btn-outline-light[href="#"]').forEach(anchor => anchor.addEventListener('click', function(e) const href = this.getAttribute('href'); if (href && href.startsWith('#')) e.preventDefault(); const targetId = href.substring(1); const targetElement = document.getElementById(targetId); if (targetElement) targetElement.scrollIntoView( behavior: 'smooth', block: 'start' ); else if (this.id === 'rosterBtn') e.preventDefault(); const rosterSection = document.getElementById('roster'); if (rosterSection) rosterSection.scrollIntoView( behavior: 'smooth' ); ); ); padding: 48px 32px