/
team.html
194 lines (184 loc) · 7.39 KB
/
team.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
---
layout: default
permalink: /team/
---
<div class="container mt-5">
<h1 class="kk">Team Overview</h1>
<div class="row">
<div class="col-md-8">
<div class="row">
<!--Mission statement card-->
<div class="card card-kk mr-5">
<div class="card-heading">
Mission
</div>
<div class="card-body">
<p>
KnightKrawler’s mission is to foster future generations
of business and STEM leaders via FIRST. We provide
an avenue for students to develop critical thinking,
innovation, leadership, and collaboration skills while
demonstrating Gracious Professionalism both within and
outside the team.
</p>
</div>
</div>
<!--About Card-->
<div class="card card-kk mr-5 mt-3">
<div class="card-heading">
Team Summary
</div>
<div class="card-body">
<p>
2052 KnightKrawler was founded in 2007 by an Irondale student and Irondale math teacher.
Our first mentor from Medtronic helped the team get started, and they continue to mentor our current members.
Eighteen years later we have 34 students, 17 mentors, and 26 blue banners.
</p>
</div>
</div>
</div>
</div>
<!--Stats Bars-->
<div class="col-md-4">
<h2 class="text-center maroon">Team Statistics</h2>
<div class="progress-caption">Graduated Seniors Pursuing STEM Careers</div>
<div class="progress mb-2 gold-progress">
<div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100">64%</div>
</div>
<div class="progress-caption">New Members</div>
<div class="progress mb-2 gold-progress">
<div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="41" aria-valuemin="0" aria-valuemax="100">41%</div>
</div>
<div class="progress-caption">Female Students</div>
<div class="progress mb-2 gold-progress">
<div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">20%</div>
</div>
<div class="progress-caption">Female Students in Leadership Roles</div>
<div class="progress mb-2 gold-progress">
<div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="38" aria-valuemin="0" aria-valuemax="100">38%</div>
</div>
<div class="progress-caption">Build Students</div>
<div class="progress mb-2 gold-progress">
<div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>
</div>
<div class="progress-caption">Programming Students</div>
<div class="progress mb-2 gold-progress">
<div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="26" aria-valuemin="0" aria-valuemax="100">26%</div>
</div>
<div class="progress-caption">Media/Task Force Students</div>
<div class="progress mb-2 gold-progress">
<div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="29" aria-valuemin="0" aria-valuemax="100">29%</div>
</div>
<div class="progress-caption">Female Coaches/Mentors</div>
<div class="progress mb-2 gold-progress">
<div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="29" aria-valuemin="0" aria-valuemax="100">29%</div>
</div>
</div>
</div>
<!--Animates the stats bars when opening the page -->
<script type="text/javascript">
$('.progress-bar').css("width", "0%");
setTimeout (function() {
$('.progress-bar').css("width",function() {
return $(this).attr("aria-valuenow") + "%";
});
}, 1);
</script>
<div class="row"> <!--team image and pop-up code for it-->
<div class="col justify-content-center">
<p class="text-center">
<img src="/assets/images/Team/TeamDarkCropped2024.jpg" class="team-wide-photo mt-4 image-highlight" alt="KnightKrawler Team - 2024" onclick="showModal('myModal', '/assets/images/Team/TeamFull2024.jpg', 'KnightKrawler Team - 2024')" >
</p>
<div id="myModal" class="modal">
<span class="close" onclick="closeModal('myModal')">×</span>
<img class="modal-content" id="myModalImage">
<div class="modal-caption" id="myModalCaption"></div>
</div>
<script type="text/javascript" src="/assets/scripts/photomodal.js?refresh=2"></script>
</div>
</div>
<!--Core value cards -->
<h2 class="text-center maroon mt-3">KnightKrawler's Core Values</h2>
<div class="row no-gutters">
<div class="col-12 col-lg">
<div class="card core-value">
<div class="card-heading">
<div class="row align-items-center h-100">
<div class="col">
Gracious Professionalism
</div>
</div>
</div>
<div class="card-body">
<p>
Gracious Professionalism is where everyone is treated with respect and kindness, even when in direct competition.
</p>
</div>
</div>
</div>
<div class="col-12 col-lg">
<div class="card core-value">
<div class="card-heading">
<div class="row align-items-center h-100">
<div class="col">
Dedication
</div>
</div>
</div>
<div class="card-body">
<p>
A Dedicated person strives to be at every event and meeting. Not only do they attend, but they contribute meaningfully.
</p>
</div>
</div>
</div>
<div class="col-12 col-lg">
<div class="card core-value">
<div class="card-heading">
<div class="row align-items-center h-100">
<div class="col">
Innovation
</div>
</div>
</div>
<div class="card-body">
<p>
A team that Innovates tests out mulitple solutions to find the best way to solve a problem - from robot building to team comunication.
</p>
</div>
</div>
</div>
<div class="col-12 col-lg">
<div class="card core-value">
<div class="card-heading">
<div class="row align-items-center h-100">
<div class="col">
Structure
</div>
</div>
</div>
<div class="card-body">
<p>
A team with Structure is organized and comunicates well. Students should always know what to do next and how to ask for help.
</p>
</div>
</div>
</div>
<div class="col-12 col-lg">
<div class="card core-value">
<div class="card-heading">
<div class="row align-items-center h-100">
<div class="col">
Unflappable
</div>
</div>
</div>
<div class="card-body">
<p>
A person who is Unflappable stays cool under pressure. They solve problems quickly while being constructive.
</p>
</div>
</div>
</div>
</div>
</div>