about.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>ScriptGuild — About</title>
  <link rel="icon" href="images/icon.png">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Syne:wght@400;600;700;800&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="styles/base.css">
  <!-- Font Awesome -->
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
  />
  <link rel="stylesheet" href="styles/about.css">

</head>
<body>
  <nav>
    <a href="/" class="nav-logo">Script<span>Guild</span></a>
    <div class="nav-toggle" onclick="toggleNav()" id="hamburger">
      <span></span><span></span><span></span>
    </div>
    <ul class="nav-links" id="navLinks">
      <li><a href="/" class="">home</a></li>
      <li><a href="about" class="active">about</a></li>
      <li><a href="projects" class="">projects</a></li>
      <li><a href="join" class="">join</a></li>
      <li><a href="contact" class="">contact</a></li>
    </ul>
  </nav>

  <main>
    
<div class="about-hero fade-up">
  <p class="section-tag">About Us</p>
  <h1>The Guild</h1>
  <p class="lead">
    ScriptGuild is an organization founded in 2023 by 2 people who wanted
    to build stuff that can help people. We write code, make games, and create tools.
  </p>
</div>

<!-- Founders -->
<div class="founders-section">
  <p class="section-tag fade-up">The Founders</p>
  <h2 class="fade-up delay-1">Who started it all</h2>

  <div class="founders-grid">
    <a href="https://github.com/synthfax" target="_blank" rel="noopener" class="founder-card fade-up delay-2">
      <div class="founder-avatar">S</div>
      <div class="founder-handle">github.com/synthfax</div>
      <h3>Synthfax</h3>
      <p>Developer and Co-Founder of ScriptGuild</p>
    </a>

    <a href="https://github.com/rgb.cat" target="_blank" rel="noopener" class="founder-card fade-up delay-3">
      <div
        class="founder-avatar"
        style="background: linear-gradient(135deg, #ff6b6b, #ffd93d, #6bcb77, #4d96ff);"
      >
        R
      </div>
      <div class="founder-handle">github.com/rgb-cat</div>
      <h3>RGB CAT</h3>
      <p>Developer and Co-Founder of ScriptGuild</p>
    </a>
  </div>
</div>

<!-- Divider -->
<div style="max-width:1100px; margin: 0 auto; padding: 0 2rem;">
  <div class="divider"></div>
</div>

<!-- Socials -->
<div class="socials-section">
  <p class="section-tag fade-up">Find Us Online</p>
  <h2 class="fade-up delay-1">Our Socials</h2>
  <p class="fade-up delay-2">
    We're active across a bunch of platforms.
  </p>

  <div class="socials-grid fade-up delay-3">

    <a class="social-link" href="https://instagram.com/scriptguild" target="_blank" rel="noopener">
      <span class="social-icon">
        <i class="fab fa-instagram"></i>
      </span>
      ScriptGuild (Instagram)
    </a>

    <a class="social-link" href="https://facebook.com/scriptguild" target="_blank" rel="noopener">
      <span class="social-icon">
        <i class="fab fa-facebook"></i>
      </span>
      ScriptGuild (Facebook)
    </a>

    <a class="social-link" href="https://tiktok.com/@scriptguild" target="_blank" rel="noopener">
      <span class="social-icon">
        <i class="fab fa-tiktok"></i>
      </span>
      ScriptGuild (TikTok)
    </a>

    <a class="social-link" href="https://youtube.com/@scriptguild" target="_blank" rel="noopener">
      <span class="social-icon">
        <i class="fab fa-youtube"></i>
      </span>
      ScriptGuild (YouTube)
    </a>

    <a class="social-link" href="mailto:scriptguild.mail@gmail.com">
      <span class="social-icon">
        <i class="fas fa-envelope"></i>
      </span>
      ScriptGuild (Gmail)
    </a>

    <a class="social-link" href="https://github.com/scriptguild" target="_blank" rel="noopener">
      <span class="social-icon">
        <i class="fab fa-github"></i>
      </span>
      ScriptGuild (GitHub)
    </a>

    <a class="social-link" href="https://www.reddit.com/user/ScriptGuild-TEAM/" target="_blank" rel="noopener">
      <span class="social-icon">
        <i class="fab fa-reddit"></i>
      </span>
      ScriptGuild (Reddit)
    </a>

    <a class="social-link" href="https://x.com/scriptguild" target="_blank" rel="noopener">
      <span class="social-icon">
        <i class="fab fa-x-twitter"></i>
      </span>
      ScriptGuild (X)
    </a>

    <a class="social-link" href="https://github.com/scriptguild-csd" target="_blank" rel="noopener">
      <span class="social-icon">
        <i class="fab fa-github"></i>
      </span>
      ScriptGuild CSD (GitHub)
    </a>

    <a class="social-link" href="https://facebook.com/chronoversa" target="_blank" rel="noopener">
      <span class="social-icon">
        <i class="fab fa-facebook"></i>
      </span>
      Chronoversa Games (Facebook)
    </a>

    <a class="social-link" href="https://chronoversa-games.itch.io/" target="_blank" rel="noopener">
      <span class="social-icon">
        <i class="fab fa-itch-io"></i>
      </span>
      Chronoversa Games (Itch.io)
    </a>

  </div>
</div>

  </main>

  <footer>
    <p>© 2026 ScriptGuild</p>
  </footer>

  <script>
    function toggleNav() {
      document.getElementById('navLinks').classList.toggle('open');
    }
  </script>
  
</body>
</html>