|
|
|
/* roster / members grid */ .members-grid display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 32px; margin-top: 20px;
<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." , ]; guild website template free
.raid-header display: flex; justify-content: space-between; margin-bottom: 10px; font-weight: 600; /* roster / members grid */
.member-avatar font-size: 60px; background: #1e293b; width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; border-radius: 50%; color: #818cf8; role: "Guild Master"
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> <title>Aethelgard | Guild of Champions</title> <!-- Google Fonts & simple reset --> <link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,600;14..32,700;14..32,800&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> <style> * margin: 0; padding: 0; box-sizing: border-box;
/* hero section */ .hero padding: 80px 0 100px; background: radial-gradient(circle at 10% 30%, rgba(79,70,229,0.15), transparent 70%);
<nav class="navbar"> <div class="container nav-container"> <div class="logo"> <i class="fas fa-dragon logo-icon"></i> <h1>ÆTHELGARD</h1> </div> <ul class="nav-links"> <li><a href="#" class="active">Home</a></li> <li><a href="#about">Lore</a></li> <li><a href="#roster">Roster</a></li> <li><a href="#progress">Raids</a></li> <li><a href="#join">Join</a></li> </ul> <button class="btn-outline-light" id="discordBtn"><i class="fab fa-discord"></i> Discord</button> </div> </nav>