This repository has been archived by the owner on Mar 16, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathTeam.html
419 lines (390 loc) · 14.4 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
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
<!DOCTYPE HTML>
<!--
Hyperspace by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Sandbox</title>
<link rel="stylesheet" href="css/animate.css">
<link rel="icon" href="images/purplelogo.png">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
<link rel="stylesheet" href="css/main.css" />
<!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
</head>
<style>
html,
body {
overflow-x: hidden;
font-family: "Lato";
}
body {
overflow-y: hidden;
}
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
/* Modal Content */
.modal-content {
position: relative;
background-image: url(images/pic03.jpg);
background-size: cover;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
text-align: center;
animation-duration: 0.4s;
border-radius: 25px;
color: white;
border: 1px solid white;
}
/* Add Animation */
@-webkit-keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
@keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: rgba(0, 0, 0, 0.3);
color: white;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
}
.modal-body {
padding: 2px 16px;
border-radius: 25px;
}
.modal-footer {
padding: 2px 16px;
background-color: rgba(0, 0, 0, 0.3);
color: white;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
}
.column {
float: left;
width: 33.33%;
padding: 10px;
/* Should be removed. Only for demonstration */
}
.row:after {
content: "";
display: table;
clear: both;
}
h2,
h3 {
text-align: center;
}
img {
cursor: pointer;
}
.frontprofilepic {
position: relative;
left: 35%;
border-radius: 50000px;
border: 5px solid rebeccapurple;
}
</style>
<body>
<!-- Header -->
<header id="header">
<a href="index.html" class="title"><img src="images/white-logo.png" alt="Avatar" style="width: 20%"></a>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="Team.html" class="active">Meet our Team!</a></li>
<li><a href="Login.html">Start Coding!</a></li>
</ul>
</nav>
</header>
<!-- Wrapper -->
<h1 class="major" style="text-align: center;">Meet our Team</h1>
<!-- Main -->
<section id="main" class="wrapper">
<div class="content row">
<div class="inner column animated bounceIn" onmouseover="change('sreec')" onmouseout="changeBack('sreec')" id="sreec">
<!--<span class="image fit"><img src="images/pic04.jpg" alt="" /></span>-->
<img src="images/sree.jpg" onclick="modalOpen('sreeModal')" alt="" width="30%" class="frontprofilepic" />
<h2>Sree Grandhe</h2>
<h3>Co-Founder and Co-CEO</h3>
</div>
<div id="aadhic" class="inner column animated bounceIn" onmouseover="change('aadhic')" onmouseout="changeBack('aadhic')">
<img src="images/image2.jpg" alt="" width="30%" class="frontprofilepic" onclick="modalOpen('aadhiModal')" />
<h2>Aadhithya Kannan</h2>
<h3>Co-Founder and Co-CEO</h3>
</div>
<div id="shivac" class="inner column animated bounceIn" onmouseover="change('shivac')" onmouseout="changeBack('shivac')">
<img src="images/Shiva.jpg" alt="" width="30%" class="frontprofilepic" onclick="modalOpen('shivaModal')" />
<h2>Shivashriganesh Mahato</h2>
<h3>Chief Technology Officer (CTO)</h3>
</div>
</div>
<div class="content row">
<div id="walterc" class="inner column animated bounceIn" onmouseover="change('walterc')" onmouseout="changeBack('walterc')">
<img src="images/Arya.jpg" alt="" width="30%" class="frontprofilepic" onclick="modalOpen('walterModal')" />
<h2>Walter Naranjo II</h2>
<h3>Chief Business Officer (CBO)</h3>
</div>
<div id="krishnac" class="inner column animated bounceIn" onmouseover="change('krishnac')" onmouseout="changeBack('krishnac')">
<img src="images/Krishna.jpg" alt="" width="30%" class="frontprofilepic" onclick="modalOpen('krishnaModal')" />
<h2>Krishna Ganesh</h2>
<h3>Chief Marketing Officer (CMO)</h3>
</div>
<div id="aryac" class="inner column animated bounceIn" onmouseover="change('aryac')" onmouseout="changeBack('aryac')">
<img src="images/Arya.jpg" alt="" width="30%" class="frontprofilepic" id="aryaButton" onclick="modalOpen('aryaModal')" />
<h2>Arya Saksena</h2>
<h3>Outreach Ambassador</h3>
</div>
</div>
<div class="content row">
<div id="govindc" class="inner column animated bounceIn" onmouseover="change('govindc')" onmouseout="changeBack('govindc')">
<img src="images/govindpic.jpg" alt="" width="30%" class="frontprofilepic" id="govindButton" onclick="modalOpen('govindModal')" />
<h2>Govind Joshi</h2>
<h3>Development Project Manager</h3>
</div>
<div id="riyac" class="inner column animated bounceIn" onmouseover="change('riyac')" onmouseout="changeBack('riyac')">
<img src="images/riyapic.png" alt="" width="30%" class="frontprofilepic" onclick="modalOpen('riyaModal')" />
<h2>Riya Chaudhary</h2>
<h3>Marketing Coordinator</h3>
</div>
<div id="klerc" class="inner column animated bounceIn" onmouseover="change('klerc')" onmouseout="changeBack('klerc')">
<img src="images/klerpic.jpg" alt="" width="30%" class="frontprofilepic" onclick="modalOpen('aryaModal')" />
<h2>Kler Teran</h2>
<h3>Outreach Ambassador</h3>
</div>
<div>
</section>
<div id="aadhiModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close" onclick="modalClose('aadhiModal')">×</span>
<h2>Aadhithya Kannan</h2>
</div>
<div class="modal-body">
<img src="images/image2.jpg" alt="" width="10%" height="50%" style="position: relative;border-radius: 1000px;border: 5px solid white;" />
<p>Aadhithya Kannan is an expert cyber security networker. He’s a fast learner and enjoys solving problems. He has a good design sense and is skilled in Material UI Design as well as efficient Back End programming. He leans towards minimal
design and focuses on function over frills. He’s passionate about software development and has created many websites and programs in the past.</p>
</div>
<div class="modal-footer">
<h3>Co-Founder, CEO, and Jumping Jacks Expert</h3>
</div>
</div>
</div>
<div id="walterModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close" onclick="modalClose('walterModal')">×</span>
<h2>Walter Naranjo II</h2>
</div>
<div class="modal-body">
<img src="images/image2.jpg" alt="" width="10%" height="50%" style="position: relative;border-radius: 1000px;border: 5px solid white;" />
<p>Walter Naranjo is skilled in Sales, Public Speaking, Management, Linguistic Translation, and Leadership. A strong business development professional, and talented musician, both fused in harmony to demonstrate outstanding communication and
leadership skills. An avid motivator and influencer, and most definitely ambitious entrepreneur.</p>
</div>
<div class="modal-footer">
<h3>Chief Business Officer and Music Enthusiast</h3>
</div>
</div>
</div>
<div id="aryaModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close" onclick="modalClose('aryaModal')">×</span>
<h2>Arya Saksena</h2>
</div>
<div class="modal-body">
<img src="images/Arya.jpg" alt="" width="10%" height="50%" style="position: relative;border-radius: 1000px;border: 5px solid white;" />
<p></p>
</div>
<div class="modal-footer">
<h3>Outreach Ambassador and Hippie</h3>
</div>
</div>
</div>
<div id="riyaModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close" onclick="modalClose('riyaModal')">×</span>
<h2>Riya Chaudhary</h2>
</div>
<div class="modal-body">
<img src="images/riyapic.png" alt="" width="10%" height="50%" style="position: relative;border-radius: 1000px;border: 5px solid white;" />
<p>Riya is an ardent learner and marketer. She has taken various business and marketing courses and participated in international career conferences. Apart from business, she has performed thorough scientific research with universities, ranging
from biodiversity to the opioid crisis. She now employs her passion for learning and marketing at Sandbox Systems to provide quality service to clients and spread awareness about the importance of coding and collaboration.</p>
</div>
<div class="modal-footer">
<h3>Marketing Coordinator and Traveller</h3>
</div>
</div>
</div>
<div id="sreeModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close" onclick="modalClose('sreeModal')">×</span>
<h2>Sree Grandhe</h2>
</div>
<div class="modal-body">
<img src="images/sree.jpg" alt="" width="10%" height="50%" style="position: relative;border-radius: 1000px;border: 5px solid white;" />
<p>Sree Grandhe is an avid inventor, software developer, and entrepreneur. He has designed and won many accolades for various technologies and innovations in fields ranging from Energy and Transportation to Consumer Technology. He has experience
in leadership and executive positions from various fields.</p>
</div>
<div class="modal-footer">
<h3>Co-Founder, CEO, and Coffee Enthusiast</h3>
</div>
</div>
</div>
<div id="krishnaModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close" onclick="modalClose('krishnaModal')">×</span>
<h2>Krishna Ganesh</h2>
</div>
<div class="modal-body">
<img src="images/Krishna.jpg" alt="" width="10%" height="50%" style="position: relative;border-radius: 1000px;border: 5px solid white;" />
<p>Krishna Ganesh is a junior at Round Rock High School who has been always been dedicated to business and more specifically, marketing. He has always loved the
passion of working to the latest trends for products, and figuring out how best to deliver the best product for the customer. He has been to DECA ICDC twice,
and has placed third in Principles of Marketing and finalized in top test score in Automotive Services Marketing. Now, he has decided to put his best skills to
Sandbox to spread the joy and rewards of coding to all markets around the globe.
</p>
</div>
<div class="modal-footer">
<h3>Business Consultant and Racecar Driver</h3>
</div>
</div>
</div>
<div id="shivaModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close" onclick="modalClose('shivaModal')">×</span>
<h2>Shiva Mahato</h2>
</div>
<div class="modal-body">
<img src="images/Shiva.jpg" alt="" width="10%" height="50%" style="position: relative;border-radius: 1000px;border: 5px solid white;" />
<p>Shiva Mahato is an experienced scientist and engineer who has worked in fields ranging from advanced physics based analysis of the human body to entertaining mobile games. He's known for his positive approach to many problems and keen problem
solving skills.</p>
</div>
<div class="modal-footer">
<h3>CTO and Master Wizard</h3>
</div>
</div>
</div>
<div id="govindModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<span class="close" onclick="modalClose('govindModal')">×</span>
<h2>Govind Joshi</h2>
</div>
<div class="modal-body">
<img src="images/govindpic.jpg" alt="" width="10%" height="50%" style="position: relative;border-radius: 1000px;border: 5px solid white;" />
<p>Govind Joshi is a computer engineer specializing in Java programming and network-based storage applications. He has worked in several different past projects involving android game design, web design, and has accumulated a pristine set of
leadership skills through his endeavors as the Drum Major of his high school band program and a Senior Patrol Leader in his Boy Scout Troop.</p>
</div>
<div class="modal-footer">
<h3>Developer and Wallclimber</h3>
</div>
</div>
</div>
<footer style="
color: white; text-align: center;
">© Sandbox Systems LLC 2019</footer>
</body>
<script>
function change(element) {
var temp = document.getElementById(element);
temp.className = "inner column animated tada";
}
function changeBack(element) {
var temp = document.getElementById(element);
temp.className = "inner column";
}
function modalOpen(alpha) {
var temp = document.getElementById(alpha);
temp.style.display = "block";
}
function modalClose(alpha) {
var temp = document.getElementById(alpha);
temp.style.display = "none";
}
</script>
<!-- Footer -->
<!--<footer id="footer" class="wrapper alt">
<div class="inner">
<ul class="menu">
<li>© Untitled. All rights reserved.</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
</ul>
</div>
</footer>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/util.js"></script>
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
<script src="assets/js/main.js"></script>