cc-website/index.html at main · Colonial-Coders/cc-website · 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
<!-- im pretty sure like 99% of this site was ai generated by alfredo a while ago, im just making qol improvements --ale -->

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- ale was here-->
    <!-- alf was here-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Colonial Coders</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" integrity="sha512-2SwdPD6INVrV/lHTZbO2nodKhrnDdJK9/kg2XD1r9uGqPo1cUbujc+IYdlYdEErWNu69gVcYgdxlmVmzTWnetw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="a.styles.css">
</head>
<body>
    <div class="parallax"></div>
    <div class="header">
        <div class="social-icons">
            <a href="https://www.instagram.com/chs.coders" target="_blank" class="social-icon instagram"></a>
            <a href="mailto:presidents@colonialcoders.com" class="social-icon email"></a>
        </div>
        <h1>Colonial Coders</h1>
        <p>Tuesday and Thursday<br>Room 6-213<br>2:30pm to 4:30pm</p>
        <a id="joinbtn" href="https://docs.google.com/forms/d/e/1FAIpQLSdDlnaJWDCJ0-xlbWbrdKBaXNIeRN19U0yEbVF-tk4HTgFwIw/viewform" target="_blank">
            <button type="button" class="join-btn">Join Us</button>
        </a>
    </div>

    <div class="content-section">
        <h2 class="highlight">NO EXPERIENCE NEEDED</h2>
        <div class="cubes">
            <div class="cube">
                <img src="code.jpg" alt="Programming">
                <h3>Programming</h3>
                <p>Practice & Learn Python</p>
                <p>Lessons on python from the basics to advanced. Work on practice problems and go to Lockheed CodeQuest competitions.</p>
            </div>
            <div class="cube">
                <img src="cyber.jpg" alt="Cyber Security">
                <h3>Cyber Security</h3>
                <p>Gain Cyber Security Skills</p>
                <p>Learn Cyber skills and methodology. Go to Cyber Lunch competitions, Cyber Quest, and Capture The Flag competitions.</p>
            </div>
            <div class="cube">
                <img src="game.jpg" alt="Game Development">
                <h3>Game Development</h3>
                <p>Learn to Use Unity and C#</p>
                <p>Learn how to use C# and Unity game engine to create video games. Learn the development process and take part in club Game Jams competitions.</p>
            </div>
            <div class="cube">
                <img src="wed.jpeg" alt="Website Design">
                <h3>Website Design</h3>
                <p>Practice HTML, CSS and JS</p>
                <p>Learn how to create your own websites. Lesson on HTML, CSS, and JS for website development and practice design process.</p>
            </div>
        </div>
    </div>

    <div class="content-section officers">
        <h2 class="highlight">Our Officers</h2>
        <div class="officer-grid">
            <h1>WIP</h1>
        </div>
    </div>


    <div class="photo-section">
        <h2> </h2>
        <button class="arrow left-arrow">&#10094;</button> <!-- Left arrow -->
        <div class="photo-slider">
            <img src="gg.png" class="slider-photo" style="display: none;">
        </div>
        <button class="arrow right-arrow">&#10095;</button> <!-- Right arrow -->
    </div>


    <div class="events-section">
        <h2>Upcoming Events</h2>
        <div class="event">
            <img src="pq.png" alt="Event 1">
            <div class="event-text">
                <h3>Code Quest Lockheed Martin</h3>
                <p>Use your skills learn in Python to answer coding challeges, at Lockheed Martin</p>
            </div>
        </div>
        <div class="event">
            <img src="cy.png" alt="Event 2">
            <div class="event-text">
                <h3>Cyber Quest Lockheed Martin</h3>
                <p>Learn the ropes of cyber security, use your knowledge to face cyber challeges base on hold field</p>
            </div>
        </div>
        <div class="event">
            <img src="cl.png" alt="Event 3">
            <div class="event-text">
                <h3>Cyber Lunch</h3>
                <p>A CTF, (Capture The Flag) with your learn skill in offensive cyber security practice ethical hacking</p>
            </div>
        </div>
        <div class="event">
            <img src="workbench.jpg" title="i know it looks out of place shut up">
            <div class="event-text">
                <h3>Make A Build</h3>
                <p>Practice your creative by create a tool, with limit in budget and dimensional limits</p>
            </div>
        </div>
        <div class="event">
            <img src="gg.png" alt="Event 5">
            <div class="event-text">
                <h3>Game Jams</h3>
                <p>Earn the opportunity to create a themed game with your team.</p>
            </div>
        </div>
    </div>

    <div class="qa-section">
        <h2>FAQ</h2>
        <div class="qa-item">
            <button class="qa-button">Who are the Colonial Coders?</button>
            <div class="qa-content">
                <p>Colonial Coders is a club dedicated to helping students interested in a technology related career expand their network and learn new skills.</p>
            </div>
        </div>
        <div class="qa-item">
            <button class="qa-button">How can I join?</button>
            <div class="qa-content">
                <p>Fill out the form, or attend our meeting held every Tuesday and Thursday (varies sometimes), room 6-213, from 2:30pm to 4:30pm.</p>
            </div>
        </div>
        <div class="qa-item">
            <button class="qa-button">What do I get from joining?</button>
            <div class="qa-content">
                <p>You gain opportunities to meet professionals, earn experience, and possibly get paid!</p>
            </div>
        </div>
        <div class="qa-item">
            <button class="qa-button">What if I don't know how to code?</button>
            <div class="qa-content">
                <p>No worries, we will teach you from the ground up.</p>
            </div>
        </div>
        <div class="qa-item">
            <button class="qa-button">Do I have to show up to every meeting?</button>
            <div class="qa-content">
                <p>It is recommended, if that's not possible we do 1 on 1s. No one gets left behind.</p>
            </div>
        </div>
    </div>


    <footer>
        <p>&copy; 2025 Colonial Coders. All rights reserved.</p>
    </footer>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="a.scripts.js"></script>
    <!-- <div class="parallax"></div> commented out, wtf is parallax??? -->

</body>
</html>