Programming-Club-Curtin-Colombo.github.io/events.html at main · Programming-Club-Curtin-Colombo/Programming-Club-Curtin-Colombo.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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Events by Programming Club - Curtin University Colombo. KRYPTA 2026, industry sessions, and industry visits.">
  <meta name="theme-color" content="#0a0a0f">
  <title>Events - Programming Club</title>
  <link rel="icon" type="image/png" href="favicon.png">
  <link rel="stylesheet" href="styles.css">
  <script>(function(){try{var t=localStorage.getItem('theme');if(!t){t=(window.matchMedia&&window.matchMedia('(prefers-color-scheme: light)').matches)?'light':'dark';}if(t==='light'){document.documentElement.setAttribute('data-theme','light');}}catch(e){}})();</script>
</head>
<body>
  <!-- Navigation -->
  <nav role="navigation" aria-label="Main navigation">
    <div class="nav-container">
      <a href="index.html" class="logo" aria-label="Programming Club home">
        <img src="branding/logo.png" alt="Programming Club logo" class="logo-img">
        <span>Programming Club</span>
      </a>
      <div class="nav-menu">
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="events.html">Events</a></li>
          <li><a href="workshops.html">Workshops</a></li>
          <li><a href="projects.html">Projects</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
        <div class="nav-social" aria-label="Programming Club social media">
          <a href="mailto:pc.curtincolombo@gmail.com" class="nav-icon" aria-label="Email Programming Club"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg></a>
          <a href="https://www.linkedin.com/company/programming-club-curtin-colombo" class="nav-icon" target="_blank" rel="noopener noreferrer" aria-label="Programming Club on LinkedIn"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg></a>
          <a href="https://www.instagram.com/programming_club_cc" class="nav-icon" target="_blank" rel="noopener noreferrer" aria-label="Programming Club on Instagram"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg></a>
        </div>
      </div>
      <div class="nav-controls">
        <button class="theme-toggle" aria-label="Toggle light and dark theme" aria-pressed="false">
          <svg class="icon-sun" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M6.76 4.84l-1.8-1.79-1.41 1.41 1.79 1.79 1.42-1.41zM1 10.5h3v2H1v-2zm10-9.95h2V3.5h-2V.55zm7.45 3.91l1.41-1.41 1.79 1.79-1.41 1.41-1.79-1.79zm-1.41 13.7l1.79 1.8 1.41-1.41-1.8-1.79-1.4 1.4zM20 10.5h3v2h-3v-2zm-8-5c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm-1 16.95h2V19.5h-2v2.95zm-7.45-3.91l-1.41 1.41 1.79 1.79 1.41-1.41-1.79-1.79z"/></svg>
          <svg class="icon-moon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 3a9 9 0 1 0 9 9c0-.46-.04-.92-.1-1.36a5.389 5.389 0 0 1-4.4 2.26 5.403 5.403 0 0 1-3.14-9.8c-.44-.06-.9-.1-1.36-.1z"/></svg>
        </button>
        <button class="menu-toggle" aria-label="Toggle menu" aria-expanded="false">
          ☰
        </button>
      </div>
    </div>
  </nav>

  <!-- Header with spacing for fixed nav -->
  <div class="nav-spacer"></div>

  <!-- Events Section -->
  <section>
    <h2>Events</h2>
    <p class="section-intro">
      From our flagship competition to industry sessions and visits, our events connect students with the wider tech community and each other.
    </p>

    <div class="cards-grid">
      <!-- KRYPTA 2026 -->
      <article class="card feature-card">
        <div class="date">🏆 Flagship Event | 2026</div>
        <h3>KRYPTA 2026</h3>
        <p>Our flagship dual-track competition - a Buildathon for building functional software products and a Capture The Flag (CTF) track for cybersecurity challenges. Open to students across Curtin Colombo.</p>
        <div class="tags">
          <span class="tag">Buildathon</span>
          <span class="tag">CTF</span>
          <span class="tag">Competition</span>
          <span class="tag">Flagship</span>
        </div>
        <p class="card-link">
          <a href="https://krypta-2026.vercel.app/?utm_source=programming-club-website&amp;utm_medium=referral&amp;utm_campaign=krypta-2026" target="_blank" rel="noopener noreferrer">Visit the official KRYPTA 2026 website →</a>
        </p>
      </article>

      <!-- Industry Sessions -->
      <article class="card">
        <div class="date">🎤 Ongoing | Internal</div>
        <h3>Industry Sessions</h3>
        <p>Talks and Q&amp;A sessions with professionals from the tech industry. Members hear about real-world work, emerging trends, and career pathways in software, cyber and beyond.</p>
        <div class="tags">
          <span class="tag">Talks</span>
          <span class="tag">Career</span>
          <span class="tag">Networking</span>
          <span class="tag">Internal</span>
        </div>
      </article>

      <!-- Industry Visits -->
      <article class="card">
        <div class="date">🚌 Ongoing | Internal</div>
        <h3>Industry Visits</h3>
        <p>Organised visits to tech companies and workplaces, giving members a first-hand look at how the industry operates and the chance to connect with practitioners on site.</p>
        <div class="tags">
          <span class="tag">Site Visits</span>
          <span class="tag">Exposure</span>
          <span class="tag">Internal</span>
        </div>
      </article>
    </div>

    <!-- CTA Section -->
    <div class="cta-box cta-inline">
      <h3 class="cta-heading">Want to take part?</h3>
      <p class="cta-text">
        Follow us on social media or reach out to stay updated on KRYPTA 2026, industry sessions, and upcoming visits.
      </p>
      <a href="contact.html" class="btn">Contact Us</a>
    </div>
  </section>

  <!-- Footer -->
  <footer>
    <div class="footer-grid">
      <div class="footer-col footer-brand">
        <div class="footer-logos">
          <img src="branding/ccsg-white.png" alt="Curtin Colombo Student Guild logo" class="footer-logo footer-logo-ccsg ccsg-dark">
          <img src="branding/ccsg-black.png" alt="Curtin Colombo Student Guild logo" class="footer-logo footer-logo-ccsg ccsg-light">
          <span class="footer-logo-separator">|</span>
          <img src="branding/logo.png" alt="Programming Club logo" class="footer-logo">
        </div>
        <p class="footer-about">The officially recognised student club for tech at Curtin University Colombo - computer science, software engineering, cybersecurity and networking.</p>
      </div>
      <div class="footer-col">
        <h4 class="footer-heading">Quick Links</h4>
        <ul class="footer-links">
          <li><a href="index.html">Home</a></li>
          <li><a href="events.html">Events</a></li>
          <li><a href="workshops.html">Workshops</a></li>
          <li><a href="projects.html">Projects</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </div>
      <div class="footer-col">
        <h4 class="footer-heading">Legal</h4>
        <ul class="footer-links">
          <li><a href="terms.html">Terms &amp; Conditions</a></li>
          <li><a href="privacy.html">Privacy Policy</a></li>
        </ul>
      </div>
      <div class="footer-col">
        <h4 class="footer-heading">Connect</h4>
        <div class="footer-social" aria-label="Programming Club social media">
          <a href="mailto:pc.curtincolombo@gmail.com" class="nav-icon" aria-label="Email Programming Club"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg></a>
          <a href="https://www.linkedin.com/company/programming-club-curtin-colombo" class="nav-icon" target="_blank" rel="noopener noreferrer" aria-label="Programming Club on LinkedIn"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg></a>
          <a href="https://www.instagram.com/programming_club_cc" class="nav-icon" target="_blank" rel="noopener noreferrer" aria-label="Programming Club on Instagram"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg></a>
        </div>
      </div>
    </div>
    <div class="footer-bottom">
      <p>&copy; 2026 Programming Club - Curtin University Colombo. All rights reserved.</p>
      <p class="footer-sub">Build with &lt;3</p>
    </div>
  </footer>

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