-
Notifications
You must be signed in to change notification settings - Fork 35
/
index.html
340 lines (324 loc) · 17.8 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta property="og:url" content="https://bellshade.github.io/" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Bellshade - Learn with Our Community" />
<meta property="og:description" content="Komunitas untuk mengelola dan menulis kode untuk proyek pendidikan sumber terbuka Indonesia" />
<meta property="og:image" content="https://raw.githubusercontent.com/reacto11mecha/bellshade.github.io/gh-pages/og_img.png" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;800;900&display=swap" rel="stylesheet" />
<link rel="shortcut icon" href="/favicon.ico" />
<title>Bellshade - Learn with Our Community</title>
<meta name="description" content="Komunitas untuk mengelola dan menulis kode untuk proyek pendidikan sumber terbuka Indonesia" />
<meta property="og:locale" content="id_ID" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Bellshade - Learn with Our Community" />
<meta property="og:description" content="Komunitas untuk mengelola dan menulis kode untuk proyek pendidikan sumber terbuka Indonesia" />
<meta property="og:image" content="https://cdn.statically.io/img/media.discordapp.net/w=800/attachments/891222600422936616/892682527720996884/unknown.png" />
<meta property="og:image:width" content="800" />
<meta property="og:image:height" content="856" />
<meta name="twitter:card" content="summary_large_image" />
</head>
<body class="bg-gray-100 dark:bg-gray-900 dark:text-white">
<!-- Wrapper -->
<div class="container max-w-6xl mx-auto">
<!-- Navbar -->
<nav class="z-10 fixed left-0 right-0 flex flex-wrap lg:flex-nowrap items-center justify-evenly w-full py-2 px-5 lg:px-32 bg-white dark:bg-black">
<div class="flex flex-row justify-between md:justify-start">
<a class="lg:hidden lg:inline-block lg:w-auto px-3 py-2 mt-2.5 rounded text-gray-700 md:mt-6 md:mr-32">
<div class="flex items-center justify-start w-full mb-1" id="toggle">
<label for="toggleB" class="flex items-center cursor-pointer">
<!-- toggle -->
<div class="relative">
<!-- input -->
<input type="checkbox" id="toggleB" class="sr-only" />
<div class="doticon w-11 h-11 rounded-full transition"></div>
</div>
</label>
</div>
</a>
<a href="#" class="p-2 md:-mr-4 mr-4 flex items-center">
<img class="w-30 lg:w-60 lg:h-16 md:h-24 md:w-auto h-16" src="/nav-logo-light2.png" id="navImg" alt="bellshade" title="Bellshade - Learn with Our Community" />
</a>
<button
class="inline-flex md:ml-32 p-2 dark:bg-black dark:text-white text-gray-700 bg-gray-100 text-lg hover:bg-gray-900 rounded lg:hidden ml-auto mr-1 hover:text-white outline-none nav-toggler w-11 h-11 mt-4 md:mt-8"
data-target="#navigation"
>
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16">
<path
fill-rule="evenodd"
d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"
/>
</svg>
</button>
</div>
<div class="hidden w-full lg:inline-flex lg:flex-grow lg:w-full lg:justify-center lg:ml-0" id="navigation">
<div class="lg:inline-flex lg:flex-row lg:w-auto w-full lg:items-center items-start text-lg flex flex-col lg:h-auto">
<a href="#homes" class="dark:text-white dark:hover:bg-white dark:hover:text-black lg:inline-flex lg:w-auto w-full px-3 py-2 rounded text-gray-700 items-center justify-center hover:bg-gray-900 hover:text-white">
<span>Home</span>
</a>
<a href="#about" class="dark:text-white dark:hover:bg-white dark:hover:text-black lg:inline-flex lg:w-auto w-full px-3 py-2 rounded text-gray-700 items-center justify-center hover:bg-gray-900 hover:text-white">
<span>About</span>
</a>
<a href="#" class="dark:text-white dark:hover:bg-white dark:hover:text-black lg:inline-flex lg:w-auto w-full px-3 py-2 rounded text-gray-700 items-center justify-center hover:bg-gray-900 hover:text-white">
<span>Projects</span>
</a>
<a href="#team" class="dark:text-white dark:hover:bg-white dark:hover:text-black lg:inline-flex lg:w-auto w-full px-3 py-2 rounded text-gray-700 items-center justify-center hover:bg-gray-900 hover:text-white">
<span>Our Team</span>
</a>
<a href="#" class="dark:text-white dark:hover:bg-white dark:hover:text-black lg:inline-flex lg:w-auto w-full px-3 py-2 rounded text-gray-700 items-center justify-center hover:bg-gray-900 hover:text-white">
<span>Contact</span>
</a>
<a
href="https://github.com/bellshade"
target="_blank"
rel="noopener noreferrer"
class="lg:hidden text-white inline-block px-4 py-1 bg-blue-600 text-lg hover:bg-gray-900 rounded lg:right-8 hover:text-white outline-none lg:absolute"
>Github</a
>
</div>
</div>
<a class="hidden lg:inline-block lg:w-auto w-full px-3 py-2 rounded text-gray-700 mt-2">
<div class="flex items-center justify-center w-full mb-1" id="toggle">
<label for="toggleLg" class="flex items-center cursor-pointer">
<!-- toggle -->
<div class="relative">
<!-- input -->
<input type="checkbox" id="toggleLg" class="sr-only" />
<!-- line -->
<div class="block bg-gray-600 w-14 h-8 rounded-full" id="line"></div>
<!-- dot -->
<div class="dot absolute left-1 top-1 bg-white w-6 h-6 rounded-full transition"></div>
</div>
</label>
</div>
</a>
<a
href="https://github.com/bellshade"
target="_blank"
rel="noopener noreferrer"
class="hidden text-white lg:inline-block px-4 py-1 lg:ml-4 bg-blue-600 text-lg hover:bg-gray-900 rounded lg:right-8 hover:text-white outline-none"
>Github</a
>
</nav>
<!-- Landing -->
<main id="homes" class="h-full lg:flex lg:flex-col lg:justify-center group">
<svg aria-hidden="true" class="absolute w-0 h-0 overflow-hidden" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-cross" viewBox="0 0 32 32">
<title>close</title>
<path
d="M31.7 25.7L22 16l9.7-9.7a1 1 0 0 0 0-1.4L27.1.3a1 1 0 0 0-1.4 0L16 10 6.3.3a1 1 0 0 0-1.4 0L.3 4.9a1 1 0 0 0 0 1.4L10 16 .3 25.7a1 1 0 0 0 0 1.4l4.6 4.6a1 1 0 0 0 1.4 0L16 22l9.7 9.7a1 1 0 0 0 1.4 0l4.6-4.6a1 1 0 0 0 0-1.4z"
/>
</symbol>
</defs>
</svg>
<!-- Carousel -->
<div class="page" data-modal-state="closed">
<div class="container-page flex flex-col">
<div class="flex items-center justify-center pt-16 pb-5 mt-20">
<h1 class="tagline font-extrabold uppercase text-center">
Learn with Our <br />
Community
</h1>
</div>
<div class="card-slider">
<div class="card-wrapper">
<article class="card">
<picture class="card__background">
<img src="src/img/templates/carousel/js-500x350.jpg" />
</picture>
<div class="card__category">Basic</div>
<h3
class="card__title"
data-repo="Javascript"
data-description="Repositori ini berisi kumpulan dari berbagai macam script struktur data dan algoritma yang diimplementasikan dengan menggunakan bahasa pemrograman Javascript."
>
Pengenalan Javascript
</h3>
<button class="card__button px-3 py-1 rounded">Let's Go! »</button>
</article>
</div>
<div class="card-wrapper">
<article class="card">
<picture class="card__background">
<img src="src/img/templates/carousel/ts-500x350.jpg" />
</picture>
<div class="card__category">Basic</div>
<h3
class="card__title"
data-repo="Typescript"
data-description="Repositori ini berisi kumpulan dari berbagai macam script struktur data, algoritma, analisis matematika dan sebagainya yang diimplementasikan dengan menggunakan bahasa pemrograman TypeScript."
>
Pengenalan Typescript
</h3>
<button class="card__button px-3 py-1 rounded">Let's Go! »</button>
</article>
</div>
<div class="card-wrapper">
<article class="card">
<picture class="card__background">
<img src="src/img/templates/carousel/php-500x350.jpg" />
</picture>
<div class="card__category">Basic</div>
<h3
class="card__title"
data-repo="PHP"
data-description="Repositori ini berisi kumpulan dari berbagai macam contoh struktur data, algoritma dan komputasi matematika yang diimplementasikan dengan menggunakan bahasa pemrograman PHP."
>
Pengenalan PHP
</h3>
<button class="card__button px-3 py-1 rounded">Let's Go! »</button>
</article>
</div>
<div class="card-wrapper">
<article class="card">
<picture class="card__background">
<img src="src/img/templates/carousel/python-500x350.jpg" />
</picture>
<div class="card__category">Basic</div>
<h3
class="card__title"
data-repo="Python"
data-description="Repositori ini berisi kumpulan dari berbagai macam contoh struktur data, algoritma dan komputasi matematika yang diimplementasikan dengan menggunakan bahasa pemrograman Python."
>
Pengenalan Python
</h3>
<button class="card__button px-3 py-1 rounded">Let's Go! »</button>
</article>
</div>
<div class="card-wrapper">
<article class="card">
<picture class="card__background">
<img src="src/img/templates/carousel/cpp-500x350.jpg" />
</picture>
<div class="card__category">Basic</div>
<h3
class="card__title"
data-repo="CPP"
data-description="Repositori ini berisi kumpulan dari berbagai macam script struktur data, algoritma, analisis matematika dan sebagainya yang diimplementasikan dengan menggunakan bahasa pemrograman C++."
>
Pengenalan C++
</h3>
<button class="card__button px-3 py-1 rounded">Let's Go! »</button>
</article>
</div>
<div class="card-wrapper">
<article class="card">
<picture class="card__background">
<img src="src/img/templates/carousel/go-500x350.jpg" />
</picture>
<div class="card__category">Basic</div>
<h3
class="card__title"
data-repo="Golang"
data-description="Repositori ini berisi kumpulan dari berbagai macam contoh struktur data, algoritma dan komputasi matematika yang diimplementasikan dengan menggunakan bahasa pemrograman Go."
>
Pengenalan Golang
</h3>
<button class="card__button px-3 py-1 rounded">Let's Go! »</button>
</article>
</div>
<div class="card-wrapper">
<article class="card">
<picture class="card__background">
<img src="src/img/templates/carousel/java-500x350.jpg" />
</picture>
<div class="card__category">Basic</div>
<h3
class="card__title"
data-repo="Java"
data-description="Repositori ini berisi kumpulan dari berbagai macam contoh struktur data, algoritma dan komputasi matematika yang diimplementasikan dengan menggunakan bahasa pemrograman Java."
>
Pengenalan Java
</h3>
<button class="card__button px-3 py-1 rounded">Let's Go! »</button>
</article>
</div>
</div>
</div>
<div class="overlay"></div>
<div class="modal-wrapper flex">
<div class="modal dark:bg-gray-900 dark:text-gray-100">
<button class="modal__close-button" type="button">
<svg class="icon icon-cross">
<use xlink:href="#icon-cross"></use>
</svg>
</button>
<div class="modal__scroll-area">
<header class="modal__header">
<div class="card__background">
<img class="card__background-image" />
</div>
</header>
<main class="modal__content">
<div class="modal__category"></div>
<h1 class="modal__title"></h1>
<br />
<p class="modal__description"></p>
<div class="text-center py-2">Ayo, tunggu apa lagi?</div>
<div class="flex justify-center">
<a href="" target="_blank" rel="noopener noreferrer" class="modal__anchor card__button px-3 py-1 rounded justify-center"><span>Let's Go!</span> <span>»</span></a>
</div>
</main>
</div>
</div>
</div>
</div>
</main>
<!-- About -->
<main id="about" class="px-4 group">
<div class="flex items-center justify-center flex-col mb-44 xs:mb-52 sm:mb-60 md:mb-44 lg:mb-52">
<h1 class="text-6xl dark:text-white font-extrabold tracking-wide">Get to know Us</h1>
<div class="w-36 h-3.5 bg-blue-600 dark:bg-blue-300 mt-2 rounded-xl"></div>
</div>
<div class="grid md:grid-cols-2 justify-items-center items-start gap-y-40 xs:gap-y-52 md:gap-0">
<div class="about-card sm:w-4/5 -mt-4 bg-blue-600 dark:bg-blue-300 rounded-2xl px-12 pb-16">
<div class="flex justify-center" style="margin-top: -35%">
<img src="src/img/hero.png" class="w-4/6 md:w-4/5 rounded-full border-8 border-solid border-blue-600 dark:border-blue-300" />
</div>
<div class="text-white dark:text-gray-900">
<h2 class="text-3xl md-text-4xl font-extrabold mt-10 mb-4">The Community</h2>
<p class="font-medium">
Bellshade adalah organisasi yang bergerak di bidang edukasi dan bersifat sumber terbuka (open source). Bellshade dikelola dan berada di bawah naungan komunitas Web Programming UNPAS (WPU).
</p>
</div>
</div>
<div class="about-card sm:w-4/5 bg-blue-600 dark:bg-blue-300 rounded-2xl px-12 pb-16">
<div class="flex justify-center" style="margin-top: -35%">
<img src="src/img/hero.png" class="w-4/6 md:w-4/5 rounded-full border-8 border-solid border-blue-600 dark:border-blue-300" />
</div>
<div class="text-white dark:text-gray-900">
<h2 class="text-3xl md-text-4xl font-extrabold mt-10 mb-4">Our Motivation</h2>
<p class="font-medium">
Nama Bellshade sendiri diambil dari bahasa Inggris yang berarti "penutup lampu belajar" yang mengarahkan cahaya dari lampu agar fokus pada tujuan dan tepat sasaran. Dengan nama ini, Bellshade diharapkan dapat
menjadi wadah untuk menerangi dan mengarahkan serta memberikan ilmu kepada orang yang membutuhkan, terutama di bidang teknologi.
</p>
</div>
</div>
</div>
</main>
<!-- Team -->
<main id="team" class="mt-24 block group">
<div class="h-full text-center">
<div class="w-full mb-8">
<h1 class="text-6xl font-extrabold top-0">Meet Our Team</h1>
</div>
<div id="members" class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5"></div>
</div>
</main>
<footer class="bg-blue-600 dark:bg-blue-300 dark:text-black text-white mt-24 rounded-t-2xl text-center p-4">
<h1 class="mb-2 text-xl font-bold">Bellshade</h1>
<p>© 2021 Bellshade. All rights reserved</p>
</footer>
</div>
<!-- JScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.1/web-animations.min.js"></script>
<script type="module" src="/main.js"></script>
</body>
</html>