Guild Website Template Free [hot] Here
// 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'); ); );
<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> guild website template free
<footer> <div class="container"> <div class="footer-grid"> <div class="footer-col"> <h4>ÆTHELGARD</h4> <p>Victory through unity.</p> <div class="social-icons"> <i class="fab fa-twitter"></i> <i class="fab fa-discord"></i> <i class="fab fa-twitch"></i> <i class="fab fa-youtube"></i> </div> </div> <div class="footer-col"> <h4>Quick links</h4> <a href="#">Guild rules</a> <a href="#">Raid schedule</a> <a href="#">Apply form</a> <a href="#">Merch store</a> </div> <div class="footer-col"> <h4>Contact</h4> <p><i class="fas fa-envelope"></i> council@aethelgard.gg</p> <p><i class="fab fa-discord"></i> discord.gg/aethelgard</p> <p><i class="fas fa-calendar-alt"></i> Raid nights: Wed/Thu</p> </div> </div> <div class="copyright"> © 2025 Aethelgard Gaming. Forged by champions, open source template. All rights reserved. </div> </div> </footer> // active nav highlight on scroll (simple) const
/* 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; background: radial-gradient(circle at 10% 30%