programmer.github.io/mp.html at main · programmer/programmer.github.io · 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
160
161
162
163
164
165
166
167
168
169
170
171
172
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>PointA Tutorials</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="styles.css" />
  <link rel="icon" href="favicon.ico">
</head>
<body>
  <div class="background-glow"></div>
  <header class="site-header">
    <div class="brand">PointA</div>
    <nav class="nav-links">
      <a href="#stories">Guides</a>
      <a href="blogs.html">Blogs</a>
      <a href="#contact">Contact</a>
    </nav>
    <a class="pill" href="#contact">Let’s talk</a>
  </header>

  <main>
    <section class="hero" data-animate>
      <div class="hero__copy">
        <p class="eyebrow">Post-secondary made simple</p>
        <h1>Your starting point for college and university success.</h1>
        <p class="lede">From applications to essays to choosing the right program, PointA walks you step by step through every part of getting into post-secondary without the stress.</p>
        <div class="hero__cta">
          <a class="pill pill--primary" href="#stories">Explore tutorials</a>
          <a class="pill pill--ghost" href="#contact">Ask a question</a>
        </div>
      </div>
      <figure class="hero__visual" data-pop>
        <img src="greta-600x.png" alt="Student collage" />
        <div class="floating-tag">applications</div>
        <div class="floating-tag floating-tag--alt">planning</div>
      </figure>
    </section>

    <section class="badge-trail" aria-hidden="true">
      <div class="badge">no fluff</div>
      <div class="badge">step by step</div>
      <div class="badge">authentic guidance</div>
      <div class="badge">student first</div>
      <div class="badge">practical skills</div>
    </section>

    <section class="feature" data-animate>

      <div class="feature__copy">
        <p class="eyebrow">Learn at your pace</p>
        <h2>Tutorials that turn big decisions into clear steps.</h2>
        <p>Whether you are choosing programs, figuring out OUAC or OCAS, or preparing your supplemental applications, each lesson expands as you scroll. Clear and simple, never overwhelming.</p>
        <ul class="chips">
          <li>Short breakdowns</li>
          <li>Visual explanations</li>
          <li>Real examples</li>
        </ul>
      </div>
    </section>

    <section class="grid" id="stories">
      <div class="grid__header">
        <p class="eyebrow">Latest guides</p>
        <h2>Start with what matters most</h2>
      </div>

      <div class="grid__items">


        <article class="card" data-pop>
          <div class="card__media">
            <img src="guide-1-600x.png" alt="Choosing the right program" />
          </div>
          <div class="card__body">
            <p class="eyebrow">Applications</p>
            <h3>How to choose the right program</h3>
            <p>A simple framework for comparing schools, programs, and outcomes. Clear reasoning, no filler.</p>
          </div>
        </article>


        <article class="card" data-pop>
          <div class="card__media">
            <img src="guide-2-600x.png" alt="Writing a personal statement" />
          </div>
          <div class="card__body">
            <p class="eyebrow">Essays and Supplements</p>
            <h3>Writing a strong personal statement</h3>
            <p>Tips, templates, and sample paragraphs to help you explain your story without sounding forced.</p>
          </div>
        </article>

        <article class="card" data-pop>
          <div class="card__media">
            <img src="guide-3-600x.png" alt="Financial aid planning" />
          </div>
          <div class="card__body">
            <p class="eyebrow">Financial Aid</p>
            <h3>OSAP, scholarships, and budgeting</h3>
            <p>A student friendly explanation of funding, eligibility, and the most common mistakes to avoid.</p>
          </div>
        </article>

      </div>
    </section>

    <section class="values" id="values" data-animate>
      <div class="values__content">
        <p class="eyebrow">Our approach</p>
        <h2>Guidance that feels supportive and calm</h2>
        <div class="pill-list">
          <span class="pill pill--primary">Clarity</span>
          <span class="pill">Confidence</span>
          <span class="pill pill--ghost">Direction</span>
          <span class="pill">Accessibility</span>
        </div>
        <p>PointA is designed to remove confusion around post-secondary. We turn complicated systems into easy steps so you can focus on choosing the right path, not decoding the process.</p>
      </div>
      <div class="values__art">

      </div>
    </section>

    <section class="contact" id="contact" data-animate>
      <div class="contact__copy">
        <p class="eyebrow">Need some guidance?</p>
        <h2>Ask us anything about the process</h2>
        <p>Whether you feel lost or just want a second opinion, send your question. We reply with honesty, clarity, and zero judgment.</p>
        <form class="contact__form">
          <label>
            Name
            <input type="text" placeholder="Your name" required />
          </label>
          <label>
            Email
            <input type="email" placeholder="you@example.com" required />
          </label>
          <label>
            What do you need help with?
            <textarea placeholder="Tell us your question" rows="3"></textarea>
          </label>
          <button type="submit" class="pill pill--primary">Send</button>
        </form>
      </div>
      <div class="contact__aside">
        <div class="sticky-note" data-pop>
          <p>"PointA helped me feel confident. Their guides made everything easier."</p>
          <span>Happy student</span>
        </div>
      </div>
    </section>
  </main>

  <footer class="site-footer">
    <p>Helping students move forward. © 2025 PointA</p>
    <div class="socials">
      <a href="https://www.instagram.com" target="_blank" rel="noreferrer">IG</a>
      <a href="https://www.tiktok.com" target="_blank" rel="noreferrer">TikTok</a>
      <a href="mailto:hello@pointa.tips">Email</a>
    </div>
  </footer>

  <script src="script.js"></script>
</body>
</html>