@media (max-width: 800px) .hero-content h2 font-size: 2.3rem; .nav-container flex-direction: column; .nav-links gap: 20px; .hero-grid flex-direction: column-reverse; text-align: center; .hero-content p margin-left: auto; margin-right: auto; .hero-buttons justify-content: center; .section-title font-size: 2rem; </style> </head> <body>
<!-- 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>
/* 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; guild website template free
function notifyFeature(linkMsg) alert(`✨ $linkMsg — This is a demo template. Replace with your actual guild invite links!`);
// 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'); ); ); @media (max-width: 800px)
<!-- 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>
<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> Forged by champions, open source template
body font-family: 'Inter', sans-serif; background: #0a0c10; color: #eef2ff; line-height: 1.5; scroll-behavior: smooth;