-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
423 lines (333 loc) · 19.1 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
<!--
███████╗███████╗███████╗ ██████╗ ███████╗ █████╗ ████████╗██████╗ ██████╗ ██╗ ██╗ ██╗███╗ ██╗██╗████████╗██╗ █████╗ ████████╗██╗██╗ ██╗███████╗
██╔════╝██╔════╝██╔════╝ ██╔══██╗██╔════╝██╔══██╗╚══██╔══╝██╔══██╗██╔═══██╗╚██╗██╔╝ ██║████╗ ██║██║╚══██╔══╝██║██╔══██╗╚══██╔══╝██║██║ ██║██╔════╝
███████╗███████╗███████╗ ██████╔╝█████╗ ███████║ ██║ ██████╔╝██║ ██║ ╚███╔╝ ██║██╔██╗ ██║██║ ██║ ██║███████║ ██║ ██║██║ ██║█████╗
╚════██║╚════██║╚════██║ ██╔══██╗██╔══╝ ██╔══██║ ██║ ██╔══██╗██║ ██║ ██╔██╗ ██║██║╚██╗██║██║ ██║ ██║██╔══██║ ██║ ██║╚██╗ ██╔╝██╔══╝
███████║███████║███████║ ██████╔╝███████╗██║ ██║ ██║ ██████╔╝╚██████╔╝██╔╝ ██╗ ██║██║ ╚████║██║ ██║ ██║██║ ██║ ██║ ██║ ╚████╔╝ ███████╗
╚══════╝╚══════╝╚══════╝ ╚═════╝ ╚══════╝╚═╝ ╚═╝ ╚═╝ ╚═════╝ ╚═════╝ ╚═╝ ╚═╝ ╚═╝╚═╝ ╚═══╝╚═╝ ╚═╝ ╚═╝╚═╝ ╚═╝ ╚═╝ ╚═╝ ╚═══╝ ╚══════╝
GitHub: @enkr1 Instagram: @enkr1 YouTube: EnKr Beatbox
Developed by ENKR
-->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" href="images/logo/1616.svg" type="image/gif" sizes="16x16" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="referrer" content="origin" />
<meta property="og:image" content="https://enkr1.github.io/555beatbox/logo/with-text.png" />
<meta name="author" content="ENKR | Pang Jing Hui | 彭競辉 | @enkr1" />
<meta name="description" content="We are rising 555." />
<meta name="keywords"
content="enkr1, enkr, enkr beatbox, beatbox, singapore, singapore beatbox, asia beatboix, vonderie, vonderie beatbox, 555, 555 beatbox, 555 beatbox initiative, workshops, lessons, videos" />
<title>555 Beatbox Initiative</title>
<!-- Start of External -->
<link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css" />
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous" />
<!-- End of External -->
<link rel="stylesheet" href="css/style.css?v=1.2.0" />
<meta name="google-site-verification" content="wSUWWkv_QhNXB_N6r3rOSU2YlmmWxYBk6UWVlgu1q94" />
</head>
<preloader-component></preloader-component>
<!--
TODO: Create a new component
-->
<div class="main-nav-logo">
<a href="/">
<img src="images/logo/without-text.png" alt="555 Beatbox Initiative | Logo">
<!-- <p>555 Beatbox Initiative</p> -->
<!-- <svg width="115" height="102" viewBox="0 0 115 102" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M29.4 20.5C29.4 27.3 29.5333 32.1667 29.8 35.1C28.4 34.7667 23.7667 34.6 15.9 34.6H5.3L4.1 53.9C5.96667 52.9667 7.76667 52.2333 9.5 51.7C11.2333 51.1667 13.3333 50.9 15.8 50.9C21.6 50.9 26 52.3333 29 55.2C32 58 33.5 61.7 33.5 66.3C33.5 71.2333 31.8667 75.6333 28.6 79.5C25.4 83.4333 21.2333 86.4667 16.1 88.6C11.0333 90.7333 5.83333 91.8 0.5 91.8V90C4.56667 89.9333 8.36667 89.0333 11.9 87.3C15.5 85.5667 18.4 83 20.6 79.6C22.8667 76.2 24 72.1 24 67.3C24 63.1 22.9 59.8333 20.7 57.5C18.5 55.1 15.4 53.9 11.4 53.9C9.8 53.9 8.43333 54.0333 7.3 54.3C6.16667 54.5667 4.8 55 3.2 55.6L2.2 55L4.1 25.2C5.43333 25.4667 7.23333 25.6 9.5 25.6H20.8C22.6 25.6 23.9333 25.4667 24.8 25.2C25.7333 24.8667 26.3667 24.3667 26.7 23.7C27.0333 22.9667 27.3 21.9 27.5 20.5H29.4Z"
fill="#505050" />
<path
d="M70.9039 0.5C70.9039 7.3 71.0372 12.1667 71.3039 15.1C69.9039 14.7667 65.2706 14.6 57.4039 14.6H46.8039L45.6039 33.9C47.4706 32.9667 49.2706 32.2333 51.0039 31.7C52.7372 31.1667 54.8372 30.9 57.3039 30.9C63.1039 30.9 67.5039 32.3333 70.5039 35.2C73.5039 38 75.0039 41.7 75.0039 46.3C75.0039 51.2333 73.3706 55.6333 70.1039 59.5C66.9039 63.4333 62.7372 66.4667 57.6039 68.6C52.5372 70.7333 47.3372 71.8 42.0039 71.8V70C46.0706 69.9333 49.8706 69.0333 53.4039 67.3C57.0039 65.5667 59.9039 63 62.1039 59.6C64.3706 56.2 65.5039 52.1 65.5039 47.3C65.5039 43.1 64.4039 39.8333 62.2039 37.5C60.0039 35.1 56.9039 33.9 52.9039 33.9C51.3039 33.9 49.9372 34.0333 48.8039 34.3C47.6706 34.5667 46.3039 35 44.7039 35.6L43.7039 35L45.6039 5.2C46.9372 5.46667 48.7372 5.6 51.0039 5.6H62.3039C64.1039 5.6 65.4372 5.46667 66.3039 5.2C67.2372 4.86667 67.8706 4.36666 68.2039 3.69999C68.5372 2.96666 68.8039 1.9 69.0039 0.5H70.9039Z"
fill="#505050" />
<path
d="M110.408 30.5C110.408 37.3 110.541 42.1667 110.808 45.1C109.408 44.7667 104.774 44.6 96.9078 44.6H86.3078L85.1078 63.9C86.9745 62.9667 88.7745 62.2333 90.5078 61.7C92.2411 61.1667 94.3411 60.9 96.8078 60.9C102.608 60.9 107.008 62.3333 110.008 65.2C113.008 68 114.508 71.7 114.508 76.3C114.508 81.2333 112.874 85.6333 109.608 89.5C106.408 93.4333 102.241 96.4667 97.1078 98.6C92.0411 100.733 86.8411 101.8 81.5078 101.8V100C85.5745 99.9333 89.3745 99.0333 92.9078 97.3C96.5078 95.5667 99.4078 93 101.608 89.6C103.874 86.2 105.008 82.1 105.008 77.3C105.008 73.1 103.908 69.8333 101.708 67.5C99.5078 65.1 96.4078 63.9 92.4078 63.9C90.8078 63.9 89.4411 64.0333 88.3078 64.3C87.1745 64.5667 85.8078 65 84.2078 65.6L83.2078 65L85.1078 35.2C86.4411 35.4667 88.2411 35.6 90.5078 35.6H101.808C103.608 35.6 104.941 35.4667 105.808 35.2C106.741 34.8667 107.374 34.3667 107.708 33.7C108.041 32.9667 108.308 31.9 108.508 30.5H110.408Z"
fill="#505050" /> -->
</svg>
</a>
</div>
<body id="index-body" class="hide-all-in-body">
<header>
<div class="toggle-nav-bar">
<div class="menu-toggler">
<div class="bar start"></div>
<div class="bar middle"></div>
<div class="bar end"></div>
</div>
</div>
<nav class="top-nav">
<ul class="nav-list top-nav-list">
<div class="nav-link-container">
<li><a href="#home" class="nav-link">Home</a></li>
<li><a href="#about" class="nav-link">About Us</a></li>
<li><a href="#lesson" class="nav-link">Lessons</a></li>
<li><a href="#event" class="nav-link">Events</a></li>
<li><a href="#video" class="nav-link">Videos</a></li>
<li><a href="#contact" class="nav-link">Contact Us</a></li>
<li class="icon-li">
<a target="_blank" href="https://www.instagram.com/555beatboxsg/" class="icon-link">
<img src="images/social-media-icons/instagram-logo-coloured.svg" alt="555 Beatbox Initiative | Instagram">
</a>
<a target="_blank" href="https://www.facebook.com/555-Beatbox-Initiative-104202838540152" class="icon-link">
<img src="images/social-media-icons/facebook-logo-coloured.svg" alt="555 Beatbox Initiative | Facebook">
</a>
</li>
<p class="designedby">Designed and developed by ENKR</p>
</div>
<!-- <div class="top-media-social-icon-container"> -->
</div>
</ul>
</nav>
</header>
<!-- <div class="cursor"></div> -->
<div id="all-sections">
<section id="home" class="home home-section">
<div id="landing-section" class="landing-section">
<div id="landing-svg-container">
<svg-landing-component></svg-landing-component>
</div>
<!-- <nav class="landing-action">
<a class="action-btn bg-slide-to-right" target="_blank" href="https://github.com/enkr1">
<p class="action-text-1">my github</p>
</a>
<a class="action-btn explore-btn" href="#about">
<div class="scroll-down-anim">
<p class="action-text-2">explore</p>
</div>
</a>
<a class="action-btn bg-slide-to-left" href="portfolio">
<p class="action-text-3">my work</p>
</a>
</nav> -->
</div>
<!-- <leaves-component></leaves-component> -->
</section>
<section id="about" class="about about-section">
<div class="img-container">
<svg-about-component></svg-about-component>
</div>
<div class="container">
<div class="about-details">
<!-- <div class="about-heading"></div> -->
<div class="about-desc-container">
<div>
<p>
<!-- BIO -->
555 Beatbox Initiative represents the ever growing local beatbox scene here in Singapore. Everyone can
learn
beatboxing, and we aim to impart it to others, and prove just how easy it is to pick it up. Beatboxing
is
not just another art form; we believe that it can also serve as a guide to shape an individual’s
discipline,
passion and creativity.
</p>
</div>
</div>
<div class="discord-button-container" data-aos="flip-up" data-aos-delay="200">
<div>
<a target="_blank" href="https://discord.gg/csZukuUcN2" class="icon-link discord-button">
<img src="images/social-media-icons/discord-logo-coloured.svg" alt="555 Beatbox Initiative | Discord">
<p>Join our Discord Channel</p>
</a>
</div>
</div>
</div>
</div>
<!-- <div class="cursor"></div> -->
</section>
<!-- 1 = take the whole page of the section above -->
<!-- .5 = take the half of the page of the section above -->
<!-- <section class="transition-section">
<picture>
<img data-speed=".25"
src="https://media.discordapp.net/attachments/872089222356545566/872090804208939089/555_fam_001_compressed.jpg"
alt="555 Beatbox Initiative" class="img-parallax translate">
</picture>
</section> -->
<section id="lesson" class="lesson">
<!-- data-aos="zoom-out" data-aos-delay="500" -->
<div class="container">
<div class="section-heading">
<h1>Lessons</h1>
<swiper-lesson-component></swiper-lesson-component>
</div>
</div>
</section>
<!-- <section class="transition-section">
<picture>
<img data-speed=".5"
src="https://media.discordapp.net/attachments/872089222356545566/872090804208939089/555_fam_001_compressed.jpg"
alt="555 Beatbox Initiative" class="img-parallax translate">
</picture>
</section> -->
<section class="event" id="event">
<picture class="event-bg-picture">
<img src="images/backgrounds/black_brick_wall.png" alt="555 Black Brick Wall">
</picture>
<div class="container">
<swiper-event-component></swiper-event-component>
</div>
</section>
<section id="video" class="video">
<div class="container">
<div class="section-heading">
<h1>Videos</h1>
</div>
<swiper-video-component></swiper-video-component>
<!-- https://www.youtube.com/embed/dQw4w9WgXcQ -->
<!-- <a class="venobox" data-vbtype="iframe" href="https://www.youtube.com/embed/kU7LF5mYZkw">open iFrame</a> -->
<!-- <a class="venobox" data-vbtype="video" href="https://www.youtu.be/kU7LF5mYZkw">open iFrame</a>
<a class="venobox" data-autoplay="true" data-vbtype="video" href="https://youtu.be/d85gkOXeXG4">YouYbe</a>
<a class="venobox" data-autoplay="true" data-vbtype="iframe" href="videos/sample.mp4">SAMPLE</a> -->
<!-- <construction-component></construction-component> -->
<!-- <div id="pixlee_container"></div>
<script
type="text/javascript">window.PixleeAsyncInit = function () { Pixlee.init({ apiKey: '3Py_wjVSNahKKxY9AqgU' }); Pixlee.addSimpleWidget({ widgetId: '34203' }); };</script>
<script src="//instafeed.assets.pxlecdn.com/assets/pixlee_widget_1_0_0.js"></script> -->
<!-- REF: https://www.classynemesis.com/projects/ytembed/ -->
</div>
</section>
<section class="contact contact-section">
<div class="container" id="contact">
<div class="design-line-2">
<div class="design-line-1">
<div class="section-heading">
<h1>Contact</h1>
<p>Drop us a "beat"!</p>
</div>
<!-- <div class="info-anim">
<div class="info-anim-inner">
<h1>Web Design Service</h1>
<p>I do provide web design services!</p>
</div>
</div> -->
<!-- <div class="typing-area">
<p class="typing"></p>
</div> -->
<form class="contact-form" action="https://formspree.io/f/mdoylrqd" method="POST" name="form">
<div class="name-section">
<input type="text" id="contact-input-name" name="contact-input-name" pattern=".*\S.*"
onkeyup="this.setAttribute('value', this.value);" autocomplete="off" required />
<label class="label-name" for="contact-input-name">
<span class="content-name">Name</span>
</label>
</div>
<!-- autocomplete="off" -->
<div class="email-section">
<input type="email" id="contact-input-email" name="contact-input-email"
onkeyup="this.setAttribute('value', this.value);" autocomplete="off" required />
<label class="label-email" for="contact-input-email">
<span class="content-email">Email</span>
</label>
</div>
<div class="message-section">
<textarea name="contact-input-message" id="contact-input-message" rows="1" pattern="^\s?(?=\S).*"
onkeyup="this.setAttribute('value', this.value);" required></textarea>
<label class="label-message" for="contact-input-message">
<span class="content-message">Message</span>
</label>
</div>
<div data-aos="flip-right" data-aos-delay="100">
<input id="contact-form-submit-button" class="btn contact-submit-btn" type="submit" value="Submit" />
</div>
</form>
</div>
</div>
</div>
</section>
</div>
<div class="floating-social-media-container" data-aos="fade-up" data-aos-delay="1200">
<ul class="floating-social-media-list">
<li>
<a target="_blank" href="https://discord.gg/csZukuUcN2" class="">
<img src="images/social-media-icons/discord-logo-coloured.svg" alt="555 Beatbox Initiative | Discord">
</a>
</li>
<li>
<a target="_blank" href="https://www.instagram.com/555beatboxsg/" class="">
<img src="images/social-media-icons/instagram-logo-coloured.svg" alt="555 Beatbox Initiative | Instagram">
</a>
</li>
<li>
<a target="_blank" href="https://vt.tiktok.com/ZSerKduym/" class="">
<img src="images/social-media-icons/tiktok-logo-coloured.svg" alt="555 Beatbox Initiative | TikTok">
</a>
</li>
<li>
<a target="_blank" href="https://www.facebook.com/555-Beatbox-Initiative-104202838540152" class="">
<img src="images/social-media-icons/facebook-logo-coloured.svg" alt="555 Beatbox Initiative | Facebook">
</a>
</li>
<li>
<a target="_blank" href="https://www.youtube.com/channel/UC6jcQdnBe8A6nhaubvY6xNw" class="">
<img src="images/social-media-icons/youtube-logo-coloured.svg" alt="555 Beatbox Initiative | YouTube">
</a>
</li>
<li>
<a href="mailto:555beatboxsg@gmail.com" class="">
<img src="images/social-media-icons/envelope-logo-coloured.png" alt="555 Beatbox Initiative | Email">
</a>
</li>
</ul>
</div>
<footer-component></footer-component>
<script>
// // typing effects
// const landingtexts = [
// "Beatbox Mentoership Program Free Trial",
// "Couple's Beatbox Workshop",
// "555 Beatbox Discord Server",
// "Sign up now!",
// "Drop us an email",
// "Based in Singapore.",
// ];
// let count = 0;
// let index = 0;
// let currentText = "";
// let letter = "";
// let letterdone = false;
// (function type() {
// if (count === landingtexts.length) {
// count = 0;
// }
// currentText = landingtexts[count];
// letter = currentText.slice(0, ++index);
// document.querySelector(".typing").textContent = letter;
// if (letter.length === currentText.length) {
// count++;
// index = 0; // reset
// letterdone = true;
// }
// // one line check
// if (letterdone == false) {
// setTimeout(type, 100);
// } else {
// setTimeout(type, 800);
// letterdone = false;
// }
// })();
</script>
<!-- Start of External -->
<!--
TODO: Check for latest jQuery https://www.w3schools.com/jquery/jquery_get_started.asp
-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<!-- End of External -->
<script type="text/javascript" defer src="js/main.js"></script>
<script type="text/javascript" defer src="js/components/svg-landing.js"></script>
<script type="text/javascript" defer src="js/components/svg-about.js"></script>
<script type="text/javascript" defer src="js/components/preloader.js"></script>
<script type="text/javascript" defer src="js/components/swiper-event.js"></script>
<script type="text/javascript" defer src="js/components/swiper-lesson.js"></script>
<script type="text/javascript" defer src="js/components/swiper-video.js"></script>
<script type="text/javascript" defer src="js/components/footer.js"></script>
<script type="text/javascript" defer src="js/components/construction.js"></script>
</body>
</html>