The-Forge/index.html at main · skullxcode/The-Forge · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Forge - Design System</title>
    <link rel="icon" type="image/x-icon" href="favicon.png">
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
    <link href='https://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet'>
    <link href='https://fonts.googleapis.com/css?family=Lato:900' rel='stylesheet' type='text/css'>
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap" rel="stylesheet">
</head>
<body>
    <header>
        <nav id="global-navbar">
            <div id="global-navbar-icons">
                <a href="index.html"><img src="logo.png" alt="" id="global-navbar-img"></a>
            </div>
            <div id="global-navbar-links-section">
                <a href="index.html" class="global-navbar-links">Home</a>
                <a href="colors.html" class="global-navbar-links">Colors</a>
                <a href="foundations.html" class="global-navbar-links">Foundations</a>
                <a href="components.html" class="global-navbar-links">Components</a>
                <a href="utilities.html" class="global-navbar-links">Utilities</a>
            </div>
        </nav>
    </header>
    <main class="main-section">
        <section class="hero">
            <div class="hero-section">
                <h1 class="hero-title">The Forge <br>Design System</h1>
                <p class="hero-subtitle">The Forge provides all the tools, components, and guidelines you need to build unified and high-quality websites.</p>
                <a href="colors.html" class="btn btn-primary">Get Started</a>
            </div>
        </section>
        <section class="principles">
            <h1>Guiding Principles</h1>
            <div class="principles-container">
            <div class="cards">
                <h3 class="cards-title">Modular</h3>
                <p class="cards-content">Build complex UIs by composing small, reusable components. Each piece is independent and works with others.</p>
            </div>
            <div class="cards">
                <h3 class="cards-title">Accessible</h3>
                <p class="cards-content">Designed with usability for all users in mind from the start, following modern accessibility standards.</p>
            </div>
            <div class="cards">
                <h3 class="cards-title">Consistent</h3>
                <p class="cards-content">A single source of components to ensure brand and UX consistency across all platforms and products.</p>
            </div>
            </div>
        </section>
    </main>
    <footer>
        <div class="quick-links-container">
        <h3>Quick Links</h3>
            <div class="quick-links">
                <a href="index.html">Home</a>
                <a href="colors.html">Colors</a>
                <a href="foundations.html">Foundations</a>
                <a href="components.html">Components</a>
                <a href="utilities.html">Utilities</a>
                <a href="#" class="back-to-top">Back to Top ↑</a>
            </div>
        </div>
        <div class="trademark">
            <p>© 2025 The Forge. A project by skullxcode.</p>
        </div>
    </footer>
</body>
</html>