Guild Website Template Free [best] -
<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>
<!-- 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> guild website template free
<!-- Raid progress --> <section id="progress"> <div class="container"> <div class="section-title">📈 Progression Snapshot</div> <div class="section-sub">Current tier: Shadow of the Forsaken (Mythic)</div> <div class="progress-card"> <div class="raid-item"> <div class="raid-header"><span><i class="fas fa-skull"></i> Vault of the Ancients (Heroic)</span><span>8/8 H</span></div> <div class="progress-bar-bg"><div class="progress-fill" style="width: 100%"></div></div> </div> <div class="raid-item"> <div class="raid-header"><span><i class="fas fa-dragon"></i> Crucible of Storms (Mythic)</span><span>5/8 M</span></div> <div class="progress-bar-bg"><div class="progress-fill" style="width: 62%"></div></div> </div> <div class="raid-item"> <div class="raid-header"><span><i class="fas fa-crown"></i> Echoes of the Fallen (Mythic)</span><span>3/8 M</span></div> <div class="progress-bar-bg"><div class="progress-fill" style="width: 37%"></div></div> </div> <div class="raid-item"> <div class="raid-header"><span><i class="fas fa-trophy"></i> Mythic+ Rating (avg)</span><span>2870 io</span></div> <div class="progress-bar-bg"><div class="progress-fill" style="width: 78%"></div></div> </div> </div> </div> </section> </div> </div> </footer> <
/* 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; !-- Roster / Members -->
// 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' ); ); );
/* footer */ footer background: #07090e; padding: 48px 0 24px; border-top: 1px solid #1e293b; margin-top: 40px; .footer-grid display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; margin-bottom: 40px; .footer-col h4 font-size: 1.2rem; margin-bottom: 16px; color: #cbd5e1; .footer-col p, .footer-col a color: #94a3b8; text-decoration: none; display: block; margin-bottom: 8px; .social-icons i font-size: 24px; margin-right: 16px; transition: 0.2s; color: #94a3b8; .social-icons i:hover color: #a5b4fc; .copyright text-align: center; padding-top: 24px; border-top: 1px solid #1e293b; font-size: 0.85rem; color: #5b6e8c;
.container max-width: 1280px; margin: 0 auto; padding: 0 24px;