-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
440 lines (407 loc) · 17.9 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
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
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hip Hip Meets IT</title>
<meta name="description" content="A tech experiment in cultural outreach.">
<meta name="keywords" content="Hip Hop, IT, Cultural Outreach, Code, SWCTA">
<meta name="viewport" content="width=device-width, initial-scale=1" minimal-ui>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/font-awesome.min.css"/>
<!-- Typekit -->
<script src="//use.typekit.net/mdt8xnz.js"></script>
<script>try{Typekit.load();}catch(e){}</script>
<!-- Scripts -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/blocs.js"></script>
<script src="js/main.js"></script>
<!-- Favicons -->
<link rel="apple-touch-icon" sizes="57x57" href="apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="favicon-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="favicon-160x160.png" sizes="160x160">
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32">
<meta name="msapplication-TileColor" content="#ffc40d">
<meta name="msapplication-TileImage" content="mstile-144x144.png">
</head>
<body>
<!-- Main container -->
<div class="page-container">
<nav class="navbar navbar-default navbar-fixed-top site-navigation" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right center-block">
<li><a href="#bloc-2">About</a></li>
<li><a href="#exhibits">Exhibits</a></li>
<li><a href="#bloc-4">Importance of Code</a></li>
<li><a href="#bloc-5">Guest Speakers</a></li>
<li><a href="#bloc-6">Resources</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- Hero Bloc -->
<div id="hero-bloc" class="bloc hero bg-header-background d-bloc">
<div class="v-center text-center">
<div class="vc-content">
<h1 class=" text-left tc-6">
HIP HOP<br>
<span>MEETS</span> IT
</h1>
<p class="text-left tc-6">A tech experiment in cultural outreach</p>
<br /><br /><br />
<!--<a href="index.html" class="btn-wire btn btn-xl">Get Started</a>-->
<!-- Down Arrow -->
<a id="scroll-hero" class="btn-dwn" href="#">
<span class="fa fa-chevron-down"></span>
</a>
</div>
</div>
</div>
<!-- Hero Bloc END -->
<!-- bloc-2 -->
<div class="bloc l-bloc" id="bloc-2">
<div class="row bloc-banner-container">
<div class="col-sm-5 bloc-banner">
<h2>About</h2>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-12">
<h2 class="mg-md">
Event <span>Overview</span>
</h2>
</div>
</div>
<div class="row voffset">
<div class="col-sm-6">
<p class="text-left">
Culture is a strong part of people's lives. It influences their views, their values, their humor, their hopes, their loyalties, and their worries and fears. So when you are working with people and building relationships with them, it helps to have some perspective and understanding of their cultures.
</p>
</div>
<div class="col-sm-6">
<p class="text-left">
If cultural groups join forces, they will be more effective in reaching common goals than if each group operates in isolation. Each of us can build the kinds of communities we dream of.
</p>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<h3 class="mg-md">
Where
</h3>
<p class="">
Southwest Career and Technical Academy
</p>
</div>
<div class="col-sm-4">
<h3 class="mg-md">
When
</h3>
<p class="">
November 24th & November 25th<br />8:00 am - 1:00 pm
</p>
</div>
<div class="col-sm-4">
<h3 class="mg-md">
Why
</h3>
<p class="text-left">
To bring together two polar opposites, computers and dancing. We wanted to get away from social stereotypes in both areas and bring together two things that wouldn't normally coincide.
</p>
</div>
</div>
</div>
</div>
<!-- bloc-2 END -->
<div id="exhibits">
<div class="row bloc-banner-container">
<div class="col-sm-7 bloc-banner pull-right">
<h2>Exhibits</h2>
</div>
</div>
<section class="cd-faq">
<ul class="cd-faq-categories">
<li><a class="selected" href="#mobile">Sophomore Workshops</a></li>
<li><a href="#basics">Junior Exhibits</a></li>
<li><a href="#account">Senior Workshops</a></li>
</ul> <!-- cd-faq-categories -->
<div class="cd-faq-items">
<ul id="mobile" class="cd-faq-group">
<li class="cd-faq-title"><h2>Sophomore Workshops</h2></li>
<li>
<a class="cd-faq-trigger" href="#0">Making your own Mixtape Cover</a>
<div class="cd-faq-content">
<p>We will teach our visitors how to use the basics of Photoshop including layer styles, selection tools, cropping and text to create their very own mixtape cover. This will show an easy way to manipulate an image in Photoshop while incorporating a “modern,” interesting feel to the workshop.</p>
</div> <!-- cd-faq-content -->
</li>
<li>
<a class="cd-faq-trigger" href="#0">Dancing on the World</a>
<div class="cd-faq-content">
<p>Participants will be completing three activities within Photoshop and Illustrator, using a variety of tools to edit and manipulate a photo of themselves. They will be changing the background and adding other details in Illustrator. Groups will be creating a photo to put themselves anywhere on the world which has a fun feeling to it.</p>
</div> <!-- cd-faq-content -->
</li>
<li>
<a class="cd-faq-trigger" href="#0">Creating a Logo Workshop</a>
<div class="cd-faq-content">
<p>We will be using Illustrator and teaching the basics of Illustrator such as the pen tool, gradients, transparencies, shapes, etc. After teaching Illustrator, we will have students design a new logo for their dance group or a personal logo using the techniques we taught. We will teach for 10 minutes and let them work for 35. We are going to make an instructional video on Illustrator and walk them through it.</p>
</div> <!-- cd-faq-content -->
</li>
</ul> <!-- cd-faq-group -->
<ul id="basics" class="cd-faq-group">
<li class="cd-faq-title"><h2>Junior Exhibits</h2></li>
<li>
<a class="cd-faq-trigger" href="#0">How to make Infographics</a>
<div class="cd-faq-content">
<p>We will teach students how to utilize infographics, the purpose of them, and how we use graphics to educate people while appealing to their design senses. We will display an infographic on infographics in order to convey the importance and usefulness of them. They will then learn how to create one themselves and practice.</p>
</div> <!-- cd-faq-content -->
</li>
<li>
<a class="cd-faq-trigger" href="#0">Drawing with Sketchbook Express</a>
<div class="cd-faq-content">
<p>Sketchbook Express is a free drawing application available on tablets and mobile devices. In this exhibition, students will learn how to use Sketchbook Express and its many features, such as layers, the different brushes, and other settings in the application. They will learn how to blend using different types of brushes and color values. Learning this application will enhance the student’s painting and drawing skills, preparing them for a future of art.</p>
</div> <!-- cd-faq-content -->
</li>
<li>
<a class="cd-faq-trigger" href="#0">Pixelated</a>
<div class="cd-faq-content">
<p>The students will be learning about multiple topics ranging from how their eyes work to how their computer screens display information. In order to give the kids a hands-on experience, there will be a light grid setup with which they can create pictures using LED lights. After doing so, they will also have the chance to view our graphic media showcasing how the lights they were playing with work, how their eyes perceive and interpret light, and how these lights relate to our computer screens.</p>
</div> <!-- cd-faq-content -->
</li>
<li>
<a class="cd-faq-trigger" href="#0">Elements of a Logo</a>
<div class="cd-faq-content">
<p>A logo is a key element in branding yourself or your company. We will teach students the basics of logo design by explaining the elements and components involved in creating a logo. We will show them the process of choosing a design and a color scheme in detail.</p>
</div> <!-- cd-faq-content -->
</li>
<li>
<a class="cd-faq-trigger" href="#0">LED Cube</a>
<div class="cd-faq-content">
<p>During the exhibit, we will relate to programming by displaying an LED cube. We will start to explain what an LED cube is and how you create and use it. We will then explain that programming the LED cube is similar to coding a website. Depending on your code, the cube will light in a certain pattern or color depending on what type you have. This relates to web design because, when you code a website, you’re step by step telling the browser what information you’re trying to display. The cube is similar because we use a programming language called Arduino to program to club to our certain liking.</p>
</div> <!-- cd-faq-content -->
</li>
</ul> <!-- cd-faq-group -->
<ul id="account" class="cd-faq-group">
<li class="cd-faq-title"><h2>Senior Workshops</h2></li>
<li>
<a class="cd-faq-trigger" href="#0">Let’s Flap</a>
<div class="cd-faq-content">
<p>In this workshop, the students were introduced to the world of coding through a hands on activity. They were able to understand the code of the popular app, Flappy Bird, using a series of blocks that reflect the real HTML coding that makes the app work.</p>
</div> <!-- cd-faq-content -->
</li>
<li>
<a class="cd-faq-trigger" href="#0">Coding Creativity</a>
<div class="cd-faq-content">
<p>In this workshop, students will learn to code simple instructions for the site to follow. The game “The Artist” will teach them that codes allow them to transfer their creativity to technology devices. They will get to draw different patterns and shapes through simple Javascript concepts.</p>
</div> <!-- cd-faq-content -->
</li>
<li>
<a class="cd-faq-trigger" href="#0">APP-ly Yourself</a>
<div class="cd-faq-content">
<p>In this workshop, students will be introduced to important computer science topics beginning with the "Binary Bracelets" hands on activity. Then, they will be allowed to explore Hour of Code with TouchDevelop and make apps with the guides.</p>
</div> <!-- cd-faq-content -->
</li>
</ul> <!-- cd-faq-group -->
</div> <!-- cd-faq-items -->
<a href="#0" class="cd-close-panel">Close</a>
</section> <!-- cd-faq -->
</div>
<!-- bloc-4 -->
<div class="bloc d-bloc" id="bloc-4">
<div class="row bloc-banner-container">
<div class="col-sm-7 bloc-banner pull-left">
<h2>Importance of Code</h2>
</div>
</div>
<div class="container bloc-md">
<div class="row">
<div class="col-sm-12 col-md-8 col-md-offset-2">
<h3>So, Why Should I Learn to Code?</h3>
<p class="text-left">
As technology grows every day with new devices coming out so quickly, coding is becoming more important especially if you want a job in technology. Any of your favorite apps or websites are all made by teams of coders who spent hours creating enjoyment in which you can access at any time. Coding is like learning a new language but once you get the hang of it, it becomes second nature at leaves you with endless possibilities for a career or even just as a hobby.
</p>
</div>
</div>
<div class="row">
<div class="col-sm-2 col-md-offset-5">
<img src="img/william.png" class="img-responsive img-circle" alt='' />
</div>
</div>
<p class="text-center ">
<strong>Will.i.am</strong>
</p>
<h3 class="text-center ">
<i>" Here we are, 2013, we all depend on technology to communicate, to bank, and none of us know how to read and write code. It’s important for these kids right now, starting at 8 years old to read and write code."</i>
</h3>
</div>
</div>
<!-- bloc-4 END -->
<!-- bloc-5 -->
<div class="bloc d-bloc" id="bloc-5">
<div class="row bloc-banner-container">
<div class="col-sm-7 bloc-banner pull-right">
<h2>Guest Speakers</h2>
</div>
</div>
<div class="container bloc-sm">
<div class="row text-center">
<div class="col-sm-4">
<img src="img/anthony-cardona.png" alt="Anthony Cardona" width="170" height="170">
<h3>Anthony<br>Cardona</h3>
<p>Dancer</p>
</div>
<div class="col-sm-4">
<img src="img/dana-ayles.png" alt="Dana Ayles" width="170" height="170">
<h3>Dana Ayles</h3>
<p>Tech Entrepreneur</p>
</div>
<div class="col-sm-4">
<img src="img/kim-do.png" alt="Kim Do" width="170" height="170">
<h3>Kim Do</h3>
<p>Sabakon</p>
<i class="quote">"We recognize that with every new generation, teens and young adults are not only interested in being consumers but also becoming producers. Our vision is to privde them with opporitunities to make their fantasies come to life."</i>
</div>
</div>
</div>
</div>
<!-- bloc-5 END -->
<!-- bloc-6 -->
<div class="bloc l-bloc" id="bloc-6">
<div class="row bloc-banner-container">
<div class="col-sm-7 bloc-banner pull-left">
<h2>Resources</h2>
</div>
</div>
<div class="container bloc-lg">
<div class="row">
<div class="col-sm-3">
<div class="text-center">
<a href="http://www.teamtreehouse.com">
<img src="img/team-treehouse.png" alt="Team Treehouse" width="92" height="92"/>
</a>
</div>
<h3 class="text-center mg-md">
<a href="http://www.teamtreehouse.com">
Team Treehouse
</a>
</h3>
<p class="text-center">
Learn to code from some of the best instructors from around the world.<br /><strong>*Costs Money</strong>
</p>
</div>
<div class="col-sm-3">
<div class="text-center">
<a href="http://code.org">
<img src="img/code-org.png" alt="Code.org" width="92" height="92"/>
</a>
</div>
<h3 class="text-center mg-md">
<a href="http://code.org">
Code.org
</a>
</h3>
<p class="text-center">
This is an organization that helps young developers into a career of Computer Science.
</p>
</div>
<div class="col-sm-3">
<div class="text-center">
<a href="http://codecademy.com">
<img src="img/codecademy.png" alt="Codecademy" width="92" height="92"/>
</a>
</div>
<h3 class="text-center mg-md">
<a href="http://codecademy.com">
Codecademy
</a>
</h3>
<p class="text-center">
Learn to code for free online.
</p>
</div>
<div class="col-sm-3">
<div class="text-center">
<a href="http://cultureshockdance.org/lasvegas/">
<img src="img/cultureshock.png" alt="Culture Shock" width="92" height="92"/>
</a>
</div>
<h3 class="text-center mg-md">
<a href="http://cultureshockdance.org/lasvegas/">
Culture Shock
</a>
</h3>
<p class="text-center">
Learn to perform hip-hop dancing.
</p>
</div>
</div>
</div>
</div>
<!-- bloc-6 END -->
<!-- bloc-7 -->
<div class="bloc d-bloc" id="bloc-7">
<div class="container bloc-lg">
<div class="row">
<div class="col-sm-6">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3226.2671619268995!2d-115.2469738!3d36.03818520000001!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80c8c87af5827d2b%3A0xe4c0ebf12c27fea!2s7050+W+Shelbourne+Ave%2C+Las+Vegas%2C+NV+89113!5e0!3m2!1sen!2sus!4v1418150867507" width="570" height="399" style="border:0;height:399px;" class="img-responsive"></iframe>
</div>
<div class="col-sm-6">
<h2 class="mg-lg">
Event Location
</h2>
<h3 class="mg-sm">
Southwest Career and Technical Academy
</h3>
<p class="mg-lg">
7050 W. Shelbourne Ave.<br />Las Vegas, NV 89113
</p><a href="https://goo.gl/maps/BsuYZ" class="btn btn-d btn-lg" target="_blank">Open on Google Maps</a>
</div>
</div>
</div>
<div id="active-object">
</div>
</div>
<!-- bloc-7 END -->
<footer class="bloc l-bloc site-footer" id="bloc-8">
<div class="container bloc-sm">
<div class="col-sm-12 col-md-8 col-md-offset-2">
<p class="text-center">
Made by Class of 2016 Web Design |
<a href="http://swcta.net">Southwest Career & Technical Academy</a>
</p>
</div>
</div>
</footer>
</div>
<!-- Main container END -->
<a href="#0" class="cd-top">Top</a>
<script>
$('nav a').click(function(){
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top - 85}, 500);
return false;
});
</script>
</body>
</html>