<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>
/* header / navbar */ .navbar position: sticky; top: 0; background: rgba(10, 12, 16, 0.92); backdrop-filter: blur(12px); z-index: 100; border-bottom: 1px solid rgba(79, 70, 229, 0.3); padding: 16px 0; .nav-container display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; .logo display: flex; align-items: center; gap: 12px; .logo-icon font-size: 32px; color: #818cf8; .logo h1 font-size: 1.8rem; font-weight: 800; letter-spacing: -0.5px; background: linear-gradient(135deg, #c7d2fe, #a5b4fc); background-clip: text; -webkit-background-clip: text; color: transparent; .nav-links display: flex; gap: 28px; list-style: none; .nav-links a text-decoration: none; color: #e2e8f0; font-weight: 500; transition: 0.2s; font-size: 1rem; .nav-links a:hover, .nav-links a.active color: #a5b4fc; border-bottom: 2px solid #4f46e5; padding-bottom: 4px; .btn-outline-light border: 1px solid #4f46e5; background: transparent; padding: 8px 20px; border-radius: 40px; color: #e2e8f0; font-weight: 600; cursor: pointer; transition: 0.2s; .btn-outline-light:hover background: #4f46e5; color: white; box-shadow: 0 4px 14px rgba(79, 70, 229, 0.4); guild website template free
<script> // Member data - feel free to modify with your own roster const membersData = [ name: "Thalorian", role: "Guild Master", avatarIcon: "fas fa-crown", bio: "The tactical mastermind, 10+ years raid leading." , name: "Vaelara", role: "Raid Leader", avatarIcon: "fas fa-eye", bio: "Shotcaller, analyst & mythic veteran." , name: "Grommash", role: "Main Tank", avatarIcon: "fas fa-shield-haltered", bio: "Unbreakable wall, always first into the fray." , name: "Lyrisse", role: "Heal Lead", avatarIcon: "fas fa-heart", bio: "Saves lives and parses pink. Literal angel." , name: "Kaelen", role: "Ranged Captain", avatarIcon: "fas fa-bow-arrow", bio: "Mage god with insane mechanics." , name: "Morvyn", role: "Officer", avatarIcon: "fas fa-book-dead", bio: "Recruitment & community vibes." , ]; border-bottom: 1px solid rgba(79
// 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'); ); ); padding: 16px 0
/* 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;
// 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' ); ); );