acm-workshop-git-github-session/index.html at main · PEC-CSS/acm-workshop-git-github-session · 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
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="theme-color" content="#fff8f3">
  <meta name="description" content="A little profile card for the PEC ACM Git and GitHub workshop.">
  <title>Our Git Clubhouse — PEC ACM</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="slide">
    <header class="topbar">
      <a class="brand" href="#home" aria-label="PEC ACM"><span class="brand-mark">a</span><span>PEC <b>ACM</b></span></a>
      <span class="top-note">OUR LITTLE CORNER OF GITHUB <span class="branch-glyph" aria-hidden="true">⎇</span></span>
      <span class="edition">GIT WORKSHOP · 2026</span>
    </header>

    <section class="welcome" id="home" aria-labelledby="page-title">
      <div class="welcome-copy">
        <p class="eyebrow"><span>♡</span> HEY, YOU MADE IT!</p>
        <h1 id="page-title">Meet our<br><span>Git</span> crew<svg class="title-git" viewBox="0 0 32 40" aria-hidden="true"><path d="M9 7v26M9 15h7a8 8 0 0 1 8 8"/><circle cx="9" cy="7" r="3"/><circle cx="9" cy="33" r="3"/><circle cx="24" cy="25" r="3"/></svg></h1>
        <p class="subtitle">A little profile, a first contribution, and a new friend in the community.</p>
        <div class="mini-note"><span>✎</span> Pick a branch, make it yours, and add your details!</div>
      </div>

      <div class="doodle doodle-branch" aria-hidden="true"><svg viewBox="0 0 32 40"><path d="M9 7v26M9 15h7a8 8 0 0 1 8 8"/><circle cx="9" cy="7" r="3"/><circle cx="9" cy="33" r="3"/><circle cx="24" cy="25" r="3"/></svg></div>
      <div class="doodle doodle-code" aria-hidden="true">&lt;/&gt;</div>
      <div class="doodle doodle-heart" aria-hidden="true">♡</div>

      <article class="profile-card" aria-label="Student profile template">
        <div class="card-top"><span><i></i><i></i><i></i> PEC ACM · COMMUNITY CARD</span><span class="card-number">NO. 001</span></div>
        <div class="card-content">
          <div class="avatar-wrap">
            <div class="avatar" aria-hidden="true"><svg viewBox="0 0 32 40"><path d="M9 7v26M9 15h7a8 8 0 0 1 8 8"/><circle cx="9" cy="7" r="3"/><circle cx="9" cy="33" r="3"/><circle cx="24" cy="25" r="3"/></svg></div>
            <span class="avatar-caption">your<br>vibe!</span>
          </div>
          <div class="identity">
            <p class="hello">HELLO, WORLD! I'M</p>

            <h2><!-- write your name -->Your Name<span class="cursor">_</span></h2>
            <p class="tagline">future Git pro in the making <span>♡</span></p>
          </div>
        </div>
        <div class="details">

          <div class="detail"><span class="detail-icon">✎</span><div><p>STUDENT ID</p><strong><!-- write your student id -->Your SID</strong></div></div>

          <div class="detail"><span class="detail-icon branch-icon">⎇</span><div><p>BRANCH</p><strong><!-- write your branch -->Your branch</strong></div></div>

          <div class="detail college"><span class="detail-icon college-icon">⌂</span><div><p>COLLEGE</p><strong><!-- write your college name -->Your college</strong></div></div>
        </div>
        <div class="card-bottom"><span><i></i> READY TO CONTRIBUTE</span><span class="bottom-commit" aria-hidden="true">●</span></div>
      </article>
    </section>

    <footer class="footer"><span>MADE WITH <b>♡</b> BY PEC ACM</span><span>ONE NAME · ONE BRANCH · ONE COMMUNITY</span></footer>
  </main>
</body>
</html>