Ai-Code-Lab/index.html at main · ShifaRabbani/Ai-Code-Lab · 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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI CodeLab | Next Gen Learning</title>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Modern Styles -->
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <!-- Custom Cursor -->
    <div id="custom-cursor"></div>

    <!-- Animated Mesh Gradient Background (The "Brain") -->
    <div class="mesh-bg">
        <div class="blob blob-1"></div>
        <div class="blob blob-2"></div>
        <div class="blob blob-3"></div>
    </div>

    <!-- Modern Extreme Navbar -->
    <nav>
        <div class="logo-container">
            <i class="fas fa-robot"></i>
            <span>CodeLab<span style="color:var(--primary)">.ai</span></span>
        </div>
        <div class="nav-links">
            <a href="index.html" class="active">Platform</a>
            <a href="courses.html">Syllabus</a>
            <a href="study.html">Resources</a>
            <a href="join.html">Community</a>
        </div>
        <div style="display:flex;gap:10px;">
            <a href="login.html" class="magnetic-btn" style="padding: 0.5rem 1.5rem; font-size: 0.9rem;"><span>Login</span></a>
        </div>
    </nav>

    <!-- Hero Section -->
    <section class="hero reveal visible">
        <h1 class="hover-target">
            Master the <span class="gradient-text">Future</span>
            <br>of Code & Intelligence
        </h1>
        <p>A premium, elite learning ecosystem designed directly for builders, engineers, and visionaries diving into Artificial Intelligence.</p>
        <div class="hero-actions hover-target">
            <a href="courses.html" class="magnetic-btn primary"><span>Explore Courses</span></a>
            <a href="join.html" class="magnetic-btn"><span>Join Community</span></a>
        </div>
    </section>

    <!-- Advanced Feature Grid -->
    <section>
        <h2 class="section-title reveal hover-target">Core Capabilities</h2>
        <div class="grid-3">
            <div class="tilt-card reveal hover-target" data-tilt>
                <div class="card-inner">
                    <i class="fas fa-layer-group card-icon"></i>
                    <h3>Deep Architecture</h3>
                    <p>Go beyond syntax. We cover advanced code architecture, system design, and production readiness for AI applications.</p>
                </div>
            </div>
            <div class="tilt-card reveal hover-target" data-tilt>
                <div class="card-inner">
                    <i class="fas fa-network-wired card-icon"></i>
                    <h3>Neural Networks</h3>
                    <p>Master the math and intuition behind modern Deep Learning, from transformers to custom sequential models.</p>
                </div>
            </div>
            <div class="tilt-card reveal hover-target" data-tilt>
                <div class="card-inner">
                    <i class="fas fa-microchip card-icon"></i>
                    <h3>Compute Scaling</h3>
                    <p>Learn how to scale up inference and training pipelines using distributed computing and cloud accelerators.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Secondary Elite Grid -->
    <section>
        <h2 class="section-title reveal hover-target">Real World Integrations</h2>
        <div class="grid-3">
            <div class="tilt-card reveal hover-target" data-tilt>
                <div class="card-inner">
                    <i class="fas fa-heartbeat card-icon"></i>
                    <h3>Autonomous Tech</h3>
                    <p>Building intelligence loops that can diagnose systems, route traffic, or operate hardware without human intervention.</p>
                </div>
            </div>
            <div class="tilt-card reveal hover-target" data-tilt>
                <div class="card-inner">
                    <i class="fas fa-chart-pie card-icon"></i>
                    <h3>Quantitative Finance</h3>
                    <p>Hedge engineering. Build low-latency prediction systems capable of reacting instantly to micro-trends.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Elite Founder Section -->
    <section>
        <h2 class="section-title reveal hover-target">Core Team</h2>
        <div style="display: flex; flex-wrap: wrap; gap: 2rem; justify-content: center;">
            <div class="founder-box reveal hover-target" style="flex: 1; min-width: 300px; flex-direction: column; text-align: center; padding: 2rem;">
                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSqyCLbQqyWQWEUFs6zGtH2ZHWHihl-5sdDWQ&s" alt="Shifa Rabbani" class="founder-img" style="margin: 0 auto 1.5rem auto;">
                <div class="founder-content">
                    <h3 style="font-size: 2rem;">Shifa Rabbani</h3>
                    <h4>Creator & Lead AI Instructor</h4>
                    <p class="founder-quote">"We aren't just writing scripts. We are crafting the logic that will define the next era of human-computer interaction. CodeLab.ai is built to forge elite engineers from the ground up."</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer>
        <div class="footer-newsletter reveal hover-target">
            <h2 style="font-size:2.5rem; margin-bottom: 2rem;">Join the Waiting List</h2>
            <form class="news-box">
                <input type="email" placeholder="example@engineering.ai" required>
                <button type="submit" class="hover-target">Request Access</button>
            </form>
        </div>

        <div class="footer-grid reveal">
            <div>
                <h2 class="footer-logo">CodeLab<span style="color:var(--primary)">.ai</span></h2>
                <p class="footer-p">The frontier of learning.</p>
                <div style="margin-top:2rem; display:flex; gap:1.5rem; font-size:1.5rem;">
                    <a href="#" class="hover-target"><i class="fab fa-github"></i></a>
                    <a href="#" class="hover-target"><i class="fab fa-linkedin"></i></a>
                    <a href="#" class="hover-target"><i class="fab fa-twitter"></i></a>
                </div>
            </div>
            <div class="footer-links">
                <h4>Ecosystem</h4>
                <a href="#" class="hover-target">Syllabus</a>
                <a href="#" class="hover-target">Research Library</a>
                <a href="#" class="hover-target">Discord Server</a>
            </div>
            <div class="footer-links">
                <h4>Platform</h4>
                <a href="#" class="hover-target">Privacy Protocol</a>
                <a href="#" class="hover-target">API Documentation</a>
                <a href="#" class="hover-target">System Status</a>
            </div>
        </div>
        <div style="text-align: center; border-top: 1px solid var(--glass-border); padding-top: 2rem; margin-top:4rem; color:var(--text-muted); font-size: 0.9rem;">
            &copy; 2026 CodeLab.ai Operations. All Rights Reserved.
        </div>
    </footer>

    <!-- Interactive Scripts -->
    <script src="script.js"></script>
</body>
</html>