generated from moonelysian/webpack-boilerplate
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
555 lines (553 loc) · 29.4 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
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
<!DOCTYPE html>
<html>
<head>
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div>
<div class="index-section">
<div>
<div class="index" data-index="1">
<svg
class="index-icon active"
viewBox="0 0 100 100"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M95 50C95 74.8528 74.8528 95 50 95C25.1472 95 5 74.8528 5 50C5 25.1472 25.1472 5 50 5C74.8528 5 95 25.1472 95 50Z"
stroke="black"
stroke-width="12"
/>
</svg>
</div>
<div class="index" data-index="2">
<svg
class="index-icon"
viewBox="0 0 100 100"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M95 50C95 74.8528 74.8528 95 50 95C25.1472 95 5 74.8528 5 50C5 25.1472 25.1472 5 50 5C74.8528 5 95 25.1472 95 50Z"
stroke="black"
stroke-width="12"
/>
</svg>
</div>
<div class="index" data-index="3">
<svg
class="index-icon"
viewBox="0 0 100 100"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M95 50C95 74.8528 74.8528 95 50 95C25.1472 95 5 74.8528 5 50C5 25.1472 25.1472 5 50 5C74.8528 5 95 25.1472 95 50Z"
stroke="black"
stroke-width="12"
/>
</svg>
</div>
<div class="index" data-index="4">
<svg
class="index-icon"
viewBox="0 0 100 100"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M95 50C95 74.8528 74.8528 95 50 95C25.1472 95 5 74.8528 5 50C5 25.1472 25.1472 5 50 5C74.8528 5 95 25.1472 95 50Z"
stroke="black"
stroke-width="12"
/>
</svg>
</div>
</div>
</div>
<div class="page-section">
<!-- 로고 -->
<div class="page">
<div class="smile-section hidden">
<img class="smile" src="<%=require('./src/image/smile.svg') %>" />
<img class="smile" src="<%=require('./src/image/smile.svg') %>" />
<img class="smile" src="<%=require('./src/image/smile.svg') %>" />
<img class="smile" src="<%=require('./src/image/smile.svg') %>" />
<img class="smile" src="<%=require('./src/image/smile.svg') %>" />
<img class="smile" src="<%=require('./src/image/smile.svg') %>" />
</div>
<div class="logo-section">
<div class="clickme" style="display: flex">
<svg
width="200"
height="150"
viewBox="0 0 300 300"
fill="none"
xmlns="http://www.w3.org/2000/svg"
style="margin: -100px auto 10px; transform: rotate(-36deg)"
>
<path
d="M97.0299 206.393C97.2631 208.034 98.7819 209.174 100.422 208.941L127.154 205.141C128.794 204.908 129.935 203.389 129.701 201.749C129.468 200.109 127.949 198.968 126.309 199.201L102.548 202.579L99.1702 178.818C98.937 177.177 97.4182 176.037 95.7778 176.27C94.1375 176.503 92.9967 178.022 93.2299 179.662L97.0299 206.393ZM139.64 148.198L97.6013 204.169L102.399 207.773L144.437 151.802L139.64 148.198Z"
fill="#fff"
/>
<path
d="M102.678 99.6902L106.911 103.516C105.968 104.294 104.954 104.829 103.869 105.121C102.789 105.404 101.657 105.416 100.473 105.157C99.2974 104.903 98.0149 104.278 96.6257 103.283C95.284 102.322 94.2529 101.397 93.5321 100.508C92.825 99.6171 92.349 98.6634 92.1041 97.647C91.8649 96.6227 91.8329 95.6026 92.008 94.5868C92.1832 93.571 92.7172 92.44 93.6101 91.1936C94.5429 89.8917 95.5415 88.9674 96.606 88.4206C97.3865 88.0187 98.2377 87.7696 99.1596 87.6733C100.087 87.569 100.937 87.6071 101.709 87.7876C102.932 88.0754 104.282 88.7482 105.759 89.8061C107.823 91.2849 109.13 92.7801 109.681 94.2919C110.239 95.8094 110.228 97.435 109.646 99.1688L104.651 96.5087C104.894 95.8665 104.923 95.2739 104.735 94.731C104.561 94.1858 104.156 93.6858 103.521 93.2308C102.719 92.6563 101.861 92.4797 100.946 92.7009C100.044 92.9199 99.175 93.6128 98.3389 94.7798C97.5939 95.8197 97.2741 96.7859 97.3795 97.6784C97.4849 98.5708 97.9187 99.29 98.6808 99.836C99.3159 100.291 99.9644 100.509 100.626 100.491C101.296 100.478 101.98 100.211 102.678 99.6902ZM118.646 92.1915L123.504 95.6722L110.997 113.129L106.139 109.648L118.646 92.1915ZM126.779 98.0183L131.625 101.491L129.262 104.789L124.416 101.317L126.779 98.0183ZM123.332 102.829L128.179 106.301L119.118 118.947L114.272 115.475L123.332 102.829ZM135.186 122.98L139.419 126.806C138.476 127.585 137.463 128.119 136.377 128.411C135.297 128.694 134.165 128.706 132.981 128.447C131.806 128.193 130.523 127.569 129.134 126.573C127.792 125.612 126.761 124.687 126.04 123.798C125.333 122.907 124.857 121.954 124.612 120.937C124.373 119.913 124.341 118.893 124.516 117.877C124.691 116.861 125.225 115.73 126.118 114.484C127.051 113.182 128.05 112.258 129.114 111.711C129.895 111.309 130.746 111.06 131.668 110.964C132.595 110.859 133.445 110.897 134.217 111.078C135.44 111.366 136.79 112.039 138.267 113.096C140.331 114.575 141.638 116.07 142.189 117.582C142.747 119.1 142.736 120.725 142.155 122.459L137.159 119.799C137.403 119.157 137.431 118.564 137.243 118.021C137.069 117.476 136.664 116.976 136.029 116.521C135.228 115.947 134.369 115.77 133.454 115.991C132.552 116.21 131.683 116.903 130.847 118.07C130.102 119.11 129.782 120.076 129.888 120.969C129.993 121.861 130.427 122.58 131.189 123.126C131.824 123.581 132.473 123.8 133.134 123.781C133.804 123.769 134.488 123.502 135.186 122.98ZM150.987 115.362L155.941 118.911L149.491 127.914L156.114 126.316L162.08 130.59L154.369 131.769L153.282 143.423L147.816 139.508L148.89 132.601L145.789 133.082L143.434 136.368L138.48 132.819L150.987 115.362ZM171.987 137.688L176.512 140.93L175.19 142.775C176.392 142.472 177.44 142.393 178.332 142.54C179.232 142.692 180.15 143.104 181.087 143.775C182.095 144.497 182.765 145.247 183.097 146.025C183.428 146.803 183.527 147.679 183.394 148.653C184.748 148.374 185.843 148.312 186.681 148.467C187.524 148.615 188.406 149.019 189.327 149.678C190.685 150.651 191.454 151.815 191.636 153.171C191.824 154.519 191.304 156.05 190.075 157.764L184.385 165.707L179.526 162.226L184.688 155.022C185.097 154.45 185.29 153.946 185.267 153.509C185.255 152.839 185.006 152.331 184.522 151.984C183.95 151.574 183.342 151.451 182.697 151.613C182.052 151.776 181.402 152.314 180.748 153.227L176.073 159.752L171.215 156.271L176.206 149.305C176.604 148.75 176.842 148.35 176.921 148.106C177.045 147.714 177.048 147.332 176.931 146.96C176.819 146.579 176.592 146.267 176.251 146.022C175.695 145.624 175.088 145.508 174.43 145.672C173.771 145.837 173.097 146.4 172.409 147.36L167.785 153.814L162.927 150.334L171.987 137.688ZM204.986 172.718L195.269 165.757C194.799 166.597 194.594 167.327 194.655 167.947C194.731 168.831 195.146 169.542 195.9 170.083C196.376 170.424 196.914 170.629 197.513 170.698C197.883 170.735 198.356 170.671 198.93 170.506L203.39 174.368C201.75 175.114 200.214 175.396 198.784 175.212C197.36 175.021 195.683 174.234 193.754 172.852C192.079 171.652 190.929 170.474 190.304 169.317C189.685 168.152 189.424 166.831 189.523 165.352C189.635 163.87 190.189 162.435 191.184 161.046C192.6 159.069 194.377 157.922 196.516 157.603C198.662 157.291 200.85 157.934 203.081 159.532C204.891 160.829 206.123 162.126 206.779 163.425C207.434 164.723 207.663 166.089 207.466 167.521C207.269 168.953 206.573 170.503 205.379 172.17L204.986 172.718ZM201.72 166.864C202.296 165.859 202.522 165.006 202.4 164.306C202.285 163.611 201.894 163.024 201.227 162.547C200.457 161.995 199.623 161.86 198.724 162.141C198.158 162.312 197.565 162.746 196.945 163.443L201.72 166.864ZM216.063 161.985L221.243 165.697L218.394 169.674L211.669 176.947L208.466 174.652L213.214 165.963L216.063 161.985ZM206.798 175.295L211.632 178.759L208.569 183.034L203.735 179.57L206.798 175.295Z"
fill="#fff"
/>
</svg>
</div>
<img
class="logo smile hidden"
src="<%=require('./src/image/smile.svg') %>"
/>
<img class="logo" src="<%=require('./src/image/s.png') %>" />
<img class="logo" src="<%=require('./src/image/u.png') %>" />
<img
class="logo"
data-text="r"
src="<%=require('./src/image/r.png') %>"
/>
<img
class="logo hidden"
data-text="l"
src="<%=require('./src/image/l.png') %>"
/>
<img class="logo" src="<%=require('./src/image/f.png') %>" />
<img class="logo" src="<%=require('./src/image/ex.png') %>" />
</div>
</div>
<!-- 사전 준비 -->
<div class="page">
<div class="section">
<div class="background"></div>
<div class="checklist">
<svg
width="100%"
height="20"
viewBox="0 0 82 10"
fill="none"
xmlns="http://www.w3.org/2000/svg"
style="margin-top: 20px"
>
<path
d="M6.59766 5.49023L8.92383 6.19336C8.76758 6.8457 8.52148 7.39062 8.18555 7.82812C7.84961 8.26562 7.43164 8.5957 6.93164 8.81836C6.43555 9.04102 5.80273 9.15234 5.0332 9.15234C4.09961 9.15234 3.33594 9.01758 2.74219 8.74805C2.15234 8.47461 1.64258 7.99609 1.21289 7.3125C0.783203 6.62891 0.568359 5.75391 0.568359 4.6875C0.568359 3.26562 0.945312 2.17383 1.69922 1.41211C2.45703 0.646484 3.52734 0.263672 4.91016 0.263672C5.99219 0.263672 6.8418 0.482422 7.45898 0.919922C8.08008 1.35742 8.54102 2.0293 8.8418 2.93555L6.49805 3.45703C6.41602 3.19531 6.33008 3.00391 6.24023 2.88281C6.0918 2.67969 5.91016 2.52344 5.69531 2.41406C5.48047 2.30469 5.24023 2.25 4.97461 2.25C4.37305 2.25 3.91211 2.49219 3.5918 2.97656C3.34961 3.33594 3.22852 3.90039 3.22852 4.66992C3.22852 5.62305 3.37305 6.27734 3.66211 6.63281C3.95117 6.98438 4.35742 7.16016 4.88086 7.16016C5.38867 7.16016 5.77148 7.01758 6.0293 6.73242C6.29102 6.44727 6.48047 6.0332 6.59766 5.49023ZM10.2305 0.410156H12.8848V3.41602H15.7852V0.410156H18.4512V9H15.7852V5.52539H12.8848V9H10.2305V0.410156ZM20.209 0.410156H27.3223V2.24414H22.8691V3.60938H27V5.36133H22.8691V7.05469H27.4512V9H20.209V0.410156ZM34.6055 5.49023L36.9316 6.19336C36.7754 6.8457 36.5293 7.39062 36.1934 7.82812C35.8574 8.26562 35.4395 8.5957 34.9395 8.81836C34.4434 9.04102 33.8105 9.15234 33.041 9.15234C32.1074 9.15234 31.3438 9.01758 30.75 8.74805C30.1602 8.47461 29.6504 7.99609 29.2207 7.3125C28.791 6.62891 28.5762 5.75391 28.5762 4.6875C28.5762 3.26562 28.9531 2.17383 29.707 1.41211C30.4648 0.646484 31.5352 0.263672 32.918 0.263672C34 0.263672 34.8496 0.482422 35.4668 0.919922C36.0879 1.35742 36.5488 2.0293 36.8496 2.93555L34.5059 3.45703C34.4238 3.19531 34.3379 3.00391 34.248 2.88281C34.0996 2.67969 33.918 2.52344 33.7031 2.41406C33.4883 2.30469 33.248 2.25 32.9824 2.25C32.3809 2.25 31.9199 2.49219 31.5996 2.97656C31.3574 3.33594 31.2363 3.90039 31.2363 4.66992C31.2363 5.62305 31.3809 6.27734 31.6699 6.63281C31.959 6.98438 32.3652 7.16016 32.8887 7.16016C33.3965 7.16016 33.7793 7.01758 34.0371 6.73242C34.2988 6.44727 34.4883 6.0332 34.6055 5.49023ZM38.2383 0.410156H40.8926V3.65625L43.6758 0.410156H47.2031L44.0742 3.65039L47.3438 9H44.0742L42.2637 5.4668L40.8926 6.90234V9H38.2383V0.410156ZM52.2305 0.410156H54.8848V6.88477H59.0273V9H52.2305V0.410156ZM60.3398 0.410156H63V9H60.3398V0.410156ZM64.4473 6.1582L66.9727 6C67.0273 6.41016 67.1387 6.72266 67.3066 6.9375C67.5801 7.28516 67.9707 7.45898 68.4785 7.45898C68.8574 7.45898 69.1484 7.37109 69.3516 7.19531C69.5586 7.01562 69.6621 6.80859 69.6621 6.57422C69.6621 6.35156 69.5645 6.15234 69.3691 5.97656C69.1738 5.80078 68.7207 5.63477 68.0098 5.47852C66.8457 5.2168 66.0156 4.86914 65.5195 4.43555C65.0195 4.00195 64.7695 3.44922 64.7695 2.77734C64.7695 2.33594 64.8965 1.91992 65.1504 1.5293C65.4082 1.13477 65.793 0.826172 66.3047 0.603516C66.8203 0.376953 67.5254 0.263672 68.4199 0.263672C69.5176 0.263672 70.3535 0.46875 70.9277 0.878906C71.5059 1.28516 71.8496 1.93359 71.959 2.82422L69.457 2.9707C69.3906 2.58398 69.25 2.30273 69.0352 2.12695C68.8242 1.95117 68.5312 1.86328 68.1562 1.86328C67.8477 1.86328 67.6152 1.92969 67.459 2.0625C67.3027 2.19141 67.2246 2.34961 67.2246 2.53711C67.2246 2.67383 67.2891 2.79688 67.418 2.90625C67.543 3.01953 67.8398 3.125 68.3086 3.22266C69.4688 3.47266 70.2988 3.72656 70.7988 3.98438C71.3027 4.23828 71.668 4.55469 71.8945 4.93359C72.125 5.3125 72.2402 5.73633 72.2402 6.20508C72.2402 6.75586 72.0879 7.26367 71.7832 7.72852C71.4785 8.19336 71.0527 8.54688 70.5059 8.78906C69.959 9.02734 69.2695 9.14648 68.4375 9.14648C66.9766 9.14648 65.9648 8.86523 65.4023 8.30273C64.8398 7.74023 64.5215 7.02539 64.4473 6.1582ZM72.9785 0.410156H81.0469V2.53125H78.3398V9H75.6855V2.53125H72.9785V0.410156Z"
fill="black"
/>
</svg>
<a class="checklist-item" href="#tickets">
<svg
width="20"
height="20"
viewBox="0 0 100 100"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M95 50C95 74.8528 74.8528 95 50 95C25.1472 95 5 74.8528 5 50C5 25.1472 25.1472 5 50 5C74.8528 5 95 25.1472 95 50Z"
fill="#F3A251"
stroke="black"
stroke-width="10"
/>
<path
class="check-icon"
d="M27.4468 46.5L44.1041 65.4604L70.9469 34"
stroke="black"
stroke-width="10"
/>
</svg>
<p>티켓 챙기기</p>
</a>
<a class="checklist-item" href="#playlist">
<svg
width="20"
height="20"
viewBox="0 0 100 100"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M95 50C95 74.8528 74.8528 95 50 95C25.1472 95 5 74.8528 5 50C5 25.1472 25.1472 5 50 5C74.8528 5 95 25.1472 95 50Z"
fill="#F3A251"
stroke="black"
stroke-width="10"
/>
<path
class="check-icon"
d="M27.4468 46.5L44.1041 65.4604L70.9469 34"
stroke="black"
stroke-width="10"
/>
</svg>
<p>플리로 예열하기</p>
</a>
<a class="checklist-item" href="#singalong">
<svg
width="20"
height="20"
viewBox="0 0 100 100"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M95 50C95 74.8528 74.8528 95 50 95C25.1472 95 5 74.8528 5 50C5 25.1472 25.1472 5 50 5C74.8528 5 95 25.1472 95 50Z"
fill="#F3A251"
stroke="black"
stroke-width="10"
/>
<path
class="check-icon"
d="M27.4468 46.5L44.1041 65.4604L70.9469 34"
stroke="black"
stroke-width="10"
/>
</svg>
<p>응원법 익히기</p>
</a>
<a class="checklist-item" href="#shutter">
<svg
width="20"
height="20"
viewBox="0 0 100 100"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M95 50C95 74.8528 74.8528 95 50 95C25.1472 95 5 74.8528 5 50C5 25.1472 25.1472 5 50 5C74.8528 5 95 25.1472 95 50Z"
fill="#F3A251"
stroke="black"
stroke-width="10"
/>
<path
class="check-icon"
d="M27.4468 46.5L44.1041 65.4604L70.9469 34"
stroke="black"
stroke-width="10"
/>
</svg>
<p>셔터 타임 📷</p>
</a>
<a class="checklist-item" href="#clothes">
<svg
width="20"
height="20"
viewBox="0 0 100 100"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M95 50C95 74.8528 74.8528 95 50 95C25.1472 95 5 74.8528 5 50C5 25.1472 25.1472 5 50 5C74.8528 5 95 25.1472 95 50Z"
fill="#F3A251"
stroke="black"
stroke-width="10"
/>
<path
class="check-icon"
d="M27.4468 46.5L44.1041 65.4604L70.9469 34"
stroke="black"
stroke-width="10"
/>
</svg>
<p>가벼운 옷 입기</p>
</a>
<a class="checklist-item" href="#cute">
<svg
width="20"
height="20"
viewBox="0 0 100 100"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M95 50C95 74.8528 74.8528 95 50 95C25.1472 95 5 74.8528 5 50C5 25.1472 25.1472 5 50 5C74.8528 5 95 25.1472 95 50Z"
fill="#F3A251"
stroke="black"
stroke-width="10"
/>
<path
class="check-icon"
d="M27.4468 46.5L44.1041 65.4604L70.9469 34"
stroke="black"
stroke-width="10"
/>
</svg>
<p>귀여운거 보기</p>
</a>
<a class="checklist-item" href="#awe">
<svg
width="20"
height="20"
viewBox="0 0 100 100"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M95 50C95 74.8528 74.8528 95 50 95C25.1472 95 5 74.8528 5 50C5 25.1472 25.1472 5 50 5C74.8528 5 95 25.1472 95 50Z"
fill="#F3A251"
stroke="black"
stroke-width="10"
/>
<path
class="check-icon"
d="M27.4468 46.5L44.1041 65.4604L70.9469 34"
stroke="black"
stroke-width="10"
/>
</svg>
<p>경외심</p>
</a>
<a class="checklist-item" href="#photozone">
<svg
width="20"
height="20"
viewBox="0 0 100 100"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M95 50C95 74.8528 74.8528 95 50 95C25.1472 95 5 74.8528 5 50C5 25.1472 25.1472 5 50 5C74.8528 5 95 25.1472 95 50Z"
fill="#F3A251"
stroke="black"
stroke-width="10"
/>
<path
class="check-icon"
d="M27.4468 46.5L44.1041 65.4604L70.9469 34"
stroke="black"
stroke-width="10"
/>
</svg>
<p>포토존에서 사진 찍기</p>
</a>
</div>
</div>
<div class="section">
<div class="confetti-section">
<img
class="confetti"
src="<%=require('./src/image/yellow.png') %>"
/>
<img
class="confetti"
src="<%=require('./src/image/white.png') %>"
/>
<img
class="confetti"
src="<%=require('./src/image/green.png') %>"
/>
<img
class="confetti"
src="<%=require('./src/image/white.png') %>"
/>
<img
class="confetti"
src="<%=require('./src/image/green.png') %>"
/>
<img
class="confetti"
src="<%=require('./src/image/pink.png') %>"
/>
<img
class="confetti"
src="<%=require('./src/image/yellow.png') %>"
/>
<img
class="confetti"
src="<%=require('./src/image/pink.png') %>"
/>
<img
class="confetti"
src="<%=require('./src/image/green.png') %>"
/>
</div>
<div class="items">
<img width="500" src="<%=require('./src/image/plz.svg') %>" />
</div>
<div class="items" id="tickets">
<div>
<img
width="560"
src="<%=require('./src/image/tickets.png') %>"
/>
<div class="image-comment">막콘때는 폴꾸도 해갔다🌊</div>
</div>
</div>
<div class="items" id="playlist">
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/jga3FDFWpQQ"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</div>
<div class="items" id="singalong">
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/RZ7mly7Jao8"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</div>
<div id="shutter" class="items">
<div>
<img
width="560"
src="<%=require('./src/image/shutter.gif') %>"
/>
<div class="image-comment">살 빼지마요🐷</div>
</div>
</div>
<div id="clothes" class="items">
<div>
<img
width="560"
src="<%=require('./src/image/clothes.svg') %>"
/>
<div class="image-comment">고신사랑해</div>
</div>
</div>
<div id="cute" class="items">
<div>
<img width="560" src="<%=require('./src/image/cute.png') %>" />
</div>
</div>
<div id="awe" class="items">
<div>
<img width="560" src="<%=require('./src/image/awe.png') %>" />
</div>
</div>
<div id="photozone" class="items">
<div>
<img width="560" src="<%=require('./src/image/pic.png') %>" />
<div class="image-comment">
MD 입고 사진 찍는거 까먹었지만 포토존 존예😭
</div>
</div>
</div>
</div>
</div>
<!-- 셋리별 후기 -->
<div class="page">
<div class="scroll-spy">
<p class="intro-text">A few days ago, during...</p>
<!-- <div class="star-wars-intro"> -->
<div class="setlist-review">
<div class="main-logo">
<img src="<%=require('./src/image/setlist.svg') %>" />
</div>
<div class="main-content">
<div class="title-content">
<div class="content-body">
<div class="setlist">Intro + 이제 나와라 고백</div>
<div class="setlist">Prince</div>
<div class="review">어...? 집에..벌써..가여..?</div>
</div>
<div class="content-body">
<div class="setlist">나만 알고싶다</div>
<div class="setlist">이렇게 행복해</div>
<div class="review">
콘트라베이스 치는 면호..그걸 보는 나..그저..극락..
</div>
<div class="setlist">123</div>
<div class="review">
대놓고 끼부리는 빵배..난 거기 완전 넘어갔다..
</div>
</div>
<div class="content-body">
<div class="setlist">Surf! 메들리</div>
<div class="review">
점점 춤을 더 잘추고 악기팀 보컬 실력도 점점 좋아진다. 2521
빵배 노래 너무 잘하는데 VCR때문에 너무 웃겼다.
</div>
<div class="setlist">있어주면</div>
<div class="review">
영상 볼 땐 나도 막 웃었는데 막상해보니까 너무 찰떡인데요
</div>
</div>
<div class="content-body">
<div class="setlist">자꾸 생각나</div>
<div class="setlist">연애 같은걸 하니까</div>
<div class="setlist">잊어야해</div>
<div class="review">
잊어야해 부르는 빵배를 보면 진짜 개안하는거 같다..너무
잘생겼어..
</div>
</div>
<div class="content-body">
<div class="setlist">행복</div>
<div class="review">
가끔 가아아끄으음 가아아아아ㅏ아ㅏㅏ 끄으으음 음 떨어지지
않게 조심!
</div>
<div class="review">근데..끝..아니져..?</div>
</div>
<div class="content-body">
<div class="setlist">살 빼지마요</div>
<div class="review">
첫콘 땐 셔터 타임이라 다들 크게 떼창을 안 해서 아쉬웠지만
막콘 때 한풀이
</div>
<div class="setlist">AAA</div>
<div class="review">
이전 VCR은 AAA를 위한 빌드업이었다.
</div>
</div>
<div class="content-body">
<div class="setlist">가을목이</div>
<div class="review">
박자 맞춰서 뛰기 연습삼아 뛰어보라고 할 때 홉홉
소리내지않기(근데 자동으로 소리가 나와요..)
</div>
</div>
<div class="content-body">
<div class="setlist">고백직전</div>
<div class="setlist">리코타치즈샐러드</div>
<div class="setlist">우리,여행</div>
<div class="review">
아뉘 첫콘 때 우리가 ㅠㅠㅠ 가지마요했는데 빵배씨 얄밉게
끝낼껀데에에에에엥 하고 끝내버려서 진짜??진짜?? 끝이라고??
어리둥절 하고 나와서 톡핑 받았는데.. 막콘 땐 두곡 더
불러줬다 ㅎㅎ 역시 막콘이 최고야
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="page">
<div>
집에와서 한 일..폴꾸..영상 다시 다 찾아보기..친구랑 약속 파토나자마자
막콘 현장예매 문의하기.. 막콘 끝나고 오자마자 콘서트 왜 끝났는지
의문을 가지며 오열하기
</div>
<div id="twitch-embed"></div>
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/f91XBzL1ksE"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</div>
</div>
</body>
<script src="https://player.twitch.tv/js/embed/v1.js"></script>
<!-- Create a Twitch.Player object. This will render within the placeholder div -->
<script type="text/javascript">
new Twitch.Player('twitch-embed', {
video: '1515574369',
width: 560,
height: 315,
autoplay: false,
});
</script>
</html>