-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
207 lines (189 loc) · 13 KB
/
index.html
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
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
<!DOCTYPE html>
<html lang="en">
<title>LIT Cybersecurity</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
<style>
body,h1,h2,h3,h4,h5 {font-family: "Poppins", sans-serif}
body {font-size:16px;}
.w3-half img{margin-bottom:-6px;margin-top:16px;opacity:0.8;cursor:pointer}
.w3-half img:hover{opacity:1}
</style>
<body>
<!-- Sidebar/menu -->
<nav class="w3-sidebar w3-black w3-collapse w3-top w3-large w3-padding" style="z-index:3;width:300px;font-weight:bold;"
id="mySidebar"><br>
<a href="javascript:void(0)" onclick="w3_close()" class="w3-button w3-hide-large w3-display-topleft"
style="width:100%;font-size:22px">Close Menu</a>
<div class="w3-container">
<h3><b>LIT<br>Cyber</b></h3>
</div>
<div class="w3-bar-block">
<a href="#" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Home</a>
<a href="#showcase" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Workshops</a>
<a href="#services" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">CTF</a>
<a href="#mailing" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Mailing List</a>
<a href="#contact" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Contact</a>
</div>
</nav>
<!-- Top menu on small screens -->
<header style="background-color: black; color: white;" class="w3-container w3-top w3-hide-large w3-xlarge w3-padding">
<a href="javascript:void(0)" class="w3-button w3-margin-right"
onclick="w3_open()">☰</a>
<span>LIT Cyber</span>
</header>
<!-- Overlay effect when opening sidebar on small screens -->
<div class="w3-overlay w3-hide-large" onclick="w3_close()" style="cursor:pointer"
title="close side menu" id="myOverlay"></div>
<!-- !PAGE CONTENT! -->
<div class="w3-main" style="margin-left:340px;margin-right:40px">
<!-- Header -->
<div class="w3-container" style="margin-top:80px" id="showcase">
<h1 class="w3-jumbo"><b>LIT Cyber</b></h1>
<div>
Leadership in Technology is a student-run club at Pasadena City College. It aims to empower students considering technology careers with leadership skills while contributing educational resources to the surrounding community.
</div>
<h1 class="w3-xxxlarge text-blue"><b>Workshops.</b></h1>
<hr style="width:50px;border:5px solid #3689f4" class="w3-round">
<div>Leadership in Technology is working with <a style="white-space: nowrap" href="https://womenscyberjutsu.org/"> Women's Society of Cyberjutsu</a> to produce a series of cybersecurity workshops targeting beginners. Each workshop aims to introduce a fun topic and allow attendies to compete in a mini-competition to win a related prize. Click to register for free!</div>
</div>
<!-- Photo grid (modal) -->
<div class="workshop-grid">
<a href="https://www.eventbrite.com/e/cybersecurity-workshop-intro-to-linux-tickets-61021421715" target="_blank">
<div class="card">
<div class="card-image">
<!-- eh I'm leaving the urls in here in case we need the original image -->
<!-- <img src="https://images.unsplash.com/photo-1531417666976-ed2bdbeb043b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=5184&q=80 5184w"/> -->
<img src="images/LINUX_POST_OPTIM.gif"/>
</div>
<div class="card-content">
<span class="card-title">Intro to Linux</span>
<p class="w3-opacity">May 11th, 5:00 pm</p>
If you are looking for a career in computer science or computer information systems, a deeper knowledge of the Linux operating system is essential. In this workshop, you will learn some basic Linux concepts and commands to help you get started! Follow the link to learn about your instructors with over 35 years of experience between them!
</div>
</div>
</a>
<a href="https://www.eventbrite.com/e/cybersecurity-workshop-wifi-hacking-tickets-61009577288" target="_blank">
<div class="card">
<div class="card-image">
<!-- eh I'm leaving the urls in here in case we need the original image -->
<!-- <img src="https://images.unsplash.com/photo-1531417666976-ed2bdbeb043b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=5184&q=80 5184w"/> -->
<img src="images/wifi_cracking.jpg"/>
</div>
<div class="card-content">
<span class="card-title">Wi-Fi Hacking Workshop</span>
<p class="w3-opacity">May 4th, 5:00 pm</p>
Have you ever wondered how hard it is to hack the password to a Wi-Fi network? Come to our workshop to learn the basics of password cracking, get hands-on by cracking a target Wi-Fi network, and compete with fellow students in a Wi-Fi hacking game to win a prize!
Your instructor, Kody Kinzie, is a Wi-Fi security researcher who specializes in wireless hacking, and designed the game we’ll be playing in this workshop.
</div>
</div>
</a>
<a href="https://www.eventbrite.com/e/cybersecurity-workshop-lock-picking-tickets-59405105269" target="_blank">
<div class="card">
<div class="card-image">
<!-- eh I'm leaving the urls in here in case we need the original image -->
<!-- <img src="https://images.unsplash.com/photo-1531417666976-ed2bdbeb043b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=5184&q=80 5184w"/> -->
<img src="images/lockpicking_small.jpg"/>
</div>
<div class="card-content">
<span class="card-title">Lock Picking</span>
<p class="w3-opacity">March 31, 1:00 pm</p>
An attacker who has gained physical access to a machine can do much more damage in much less time. We explore the importance of physical security and demonstrate just how easy it is to get somewhere you shouldn't.
Your instructor, Datagram, is a computer security consultant and forensic locksmith.
</div>
</div>
</a>
<!-- <a href="#" target="_blank"> -->
<div class="card">
<div class="card-image">
<!-- eh I'm leaving the urls in here in case we need the original image -->
<!-- <img src="https://images.unsplash.com/photo-1477949331575-2763034b5fb5?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80"/> -->
<img src="images/rubberducky_small.jpg"/>
</div>
<div class="card-content">
<span class="card-title">USB Rubber Duckies</span>
<p class="w3-opacity">TBD</p>
Don't leave your computer unattended; someone could hack it in under ten seconds! A USB Rubber Ducky disguises itself as an innocent USB drive but injects keystrokes at lightning-fast speed. In this workshop, you will learn how to write scripts for one of the most infamous hardware hacking devices on the market.
Beginner friendly!
</div>
</div>
<!-- </a> -->
</div>
More coming soon!
<!-- Modal for full size images on click-->
<div id="modal01" class="w3-modal w3-black" style="padding-top:0"
onclick="this.style.display='none'">
<span class="w3-button w3-black w3-xxlarge w3-display-topright">×</span>
<div class="w3-modal-content w3-animate-zoom w3-center w3-transparent w3-padding-64">
<img id="img01" class="w3-image">
<p id="caption"></p>
</div>
</div>
<!-- Capture the Flag -->
<div class="w3-container" id="services" style="margin-top:75px">
<h1 class="w3-xxxlarge text-blue"><b>Capture the Flag.</b></h1>
<hr style="width:50px;border:5px solid #3689f4" class="w3-round">
<p>What is Capture the Flag?</p>
<p>On June 1st, 2019, Leadership in Technology and Women's Society of Cyberjutsu will be hosting a cybersecurity capture the flag event. This is a game in which teams compete to complete various cybersecurity related challenges. Prizes will be awarded to the best teams! Want a competitive edge? The challenges will be based from lessons learned during the workshops!
</p>
<img src="https://images.unsplash.com/photo-1534488972407-5a4aa1e47d83?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80" class="single-image"/>
</div>
<!-- Mailing List -->
<div class="w3-container" id="mailing" style="margin-top:75px">
<h1 class="w3-xxxlarge text-blue"><b>Mailing List.</b></h1>
<hr style="width:50px;border:5px solid #3689f4" class="w3-round">
<p>Want to take part? Sign ups will get notified when we add workshops and other events to our website!</p>
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSd-_Ee8p2CiUa_CRUKpc4prZpuKTnovNeeub0SvS5DiEHEWeQ/viewform?embedded=true" width="640" height="632" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>
</div>
<!-- Contact -->
<div class="w3-container" id="contact" style="margin-top:75px">
<h1 class="w3-xxxlarge text-blue"><b>Contact.</b></h1>
<hr style="width:50px;border:5px solid #3689f4" class="w3-round">
<p>Questions or comments? Email us at [email protected]</p>
<form>
<div class="w3-section">
<label>Name</label>
<input id="name" class="w3-input w3-border" type="text" name="Name"
required>
</div>
<div class="w3-section">
<label>Message</label>
<input id="message" class="w3-input w3-border" type="text" name="Message"
required>
</div>
<button onclick="window.open(`mailto:[email protected]/?subject=${document.getElementById('message').value}&body=${document.getElementById('name').value}`);" type="submit" style="background-color: #3689f4" class="w3-button w3-block w3-padding-large w3-margin-bottom">Send
Message</button>
</form>
</div>
<!-- End page content -->
</div>
<!-- W3.CSS Container -->
<div class="w3-light-grey w3-container w3-padding-32" style="margin-top:75px;padding-right:58px">
<p class="w3-right">Made with <span style="color: #e25555;">♥</span>
at <a href="https://litpcc.com/" title="LITPCC" target="_blank" class="w3-hover-opacity">LITPCC</a></p>
</div>
<script>
// Script to open and close sidebar
function w3_open() {
document.getElementById( "mySidebar" ).style.display = "block";
document.getElementById( "myOverlay" ).style.display = "block";
}
function w3_close() {
document.getElementById( "mySidebar" ).style.display = "none";
document.getElementById( "myOverlay" ).style.display = "none";
}
// Modal Image Gallery
function onClick( element ) {
document.getElementById( "img01" ).src = element.src;
document.getElementById( "modal01" ).style.display = "block";
var captionText = document.getElementById( "caption" );
captionText.innerHTML = element.alt;
}
</script>
</body>
</html>