MatrixTutoringAcademy/pricing.html at main · mitraboga/MatrixTutoringAcademy · 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
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Pricing - AI-Native CS Foundations</title>
  <link rel="icon" type="image/png" href="assets/MTA_Favicon.png" />
  <style>
    :root { --bg: oklch(97% 0.004 95); --fg: oklch(24% 0.004 260); --accent: oklch(29% 0.07 265); --highlight: oklch(77% 0.15 82); --surface: white; font-family: 'Helvetica Neue', -apple-system, system-ui, sans-serif; }
    body { margin: 0; background: var(--bg); color: var(--fg); }
    main { width: min(100% - 32px, 960px); margin: 0 auto; padding: 48px 0 80px; }
    a { color: var(--accent); font-weight: 800; text-decoration: none; }
    h1 { font-size: clamp(44px, 9vw, 92px); line-height: .9; letter-spacing: -.05em; text-transform: uppercase; margin: 42px 0 24px; }
    .price { border: 1px solid var(--fg); background: var(--fg); color: var(--bg); padding: 36px; border-radius: 4px; }
    strong { color: var(--highlight); font-size: clamp(72px, 12vw, 140px); line-height: .85; letter-spacing: -.06em; }
    .book { display: inline-flex; margin-block-start: 18px; padding: 14px 18px; border: 1px solid var(--highlight); border-radius: 999px; color: var(--highlight); text-transform: uppercase; letter-spacing: .08em; font-size: 13px; }
  </style>
</head>
<body>
  <main>
    <a href="index.html#pricing">Back to landing pricing</a>
    <h1>Pricing</h1>
    <section class="price">
      <strong>$30</strong>
      <p>CAD per hour. Flexible structure, weekend cohort model, approximately 80+ guided hours across 5 months.</p>
      <a class="book" href="calendar.html">Join the next cohort</a>
    </section>
  </main>
</body>
</html>