-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmember.html
339 lines (336 loc) · 17.8 KB
/
member.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
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bunnies Page</title>
<link rel="shortcut icon" type="image/x-icon" href="/assets/images/common/favicon.ico" />
<link rel="stylesheet" href="/assets/css/tailwindcss.output.css" />
<link rel="stylesheet" href="/assets/css/member.css" />
</head>
<body class="cursor-[url('/assets/images/common/cursor/bunnie.png'),_default] bg-zinc-950 text-white">
<!-- s: 헤더 -->
<header class="container relative z-50 mx-auto flex h-40 w-full flex-wrap items-center justify-between max-md:px-5">
<nav class="flex flex-wrap justify-between font-cafe text-4xl max-md:w-full md:gap-20">
<a href="/" class="hover:font-cafe-fill">Main</a>
<a href="/member.html" class="font-cafe-fill hover:font-cafe-fill">Team</a>
<a href="/album.html" class="hover:font-cafe-fill">Albums</a>
</nav>
<!-- s: SNS -->
<div class="flex items-center justify-between gap-4 max-md:hidden">
<a href="https://play.google.com/store/apps/details?id=co.weverse.phoning&hl=ko&pli=1" target="_blank">
<img src="/assets/images/header/homeMenuicon1.svg" alt="phoning" class="h-6 w-6" />
</a>
<a href="https://x.com/NewJeans_ADOR" target="_blank">
<img src="/assets/images/header/homeMenuicon2.svg" alt="x" class="h-6 w-6" />
</a>
<a href="https://www.instagram.com/newjeans_official/" target="_blank">
<img src="/assets/images/header/homeMenuicon3.svg" alt="insta" class="h-6 w-6" />
</a>
<a href="https://www.facebook.com/official.newjeans/?locale=gn_PY" target="_blank">
<img src="/assets/images/header/homeMenuicon4.svg" alt="facebook" class="h-6 w-6" />
</a>
<a href="https://www.youtube.com/channel/UCMki_UkHb4qSc0qyEcOHHJw" target="_blank">
<img src="/assets/images/header/homeMenuicon5.svg" alt="youtube" class="h-6 w-6" />
</a>
</div>
<!-- e: SNS -->
</header>
<!-- e: 헤더 -->
<!-- s: 포토카드 -->
<div class="w-full flex-wrap">
<!--멤버들 페이지별 리스트 묶음-->
<div id="photo-wrap" class="photo-grid container relative mx-auto h-[640px] break-keep">
<div class="photo-move font-lotte text-6xl">
<bunton
type="button"
id="prev-btn"
class="photo-move-btn absolute left-3 top-1/2 z-50 hidden -translate-y-1/2 max-lg:block">
<
</bunton>
<bunton
type="button"
id="next-btn"
class="photo-move-btn absolute right-3 top-1/2 z-50 hidden -translate-y-1/2 max-lg:block">
>
</bunton>
</div>
<!--민지 이미지 페이지-->
<div class="team-photo-page team-photo-minji-page">
<div class="team-photo minji-photo1">
<img class="Team-photo-minji-1" src="assets/images/member/minji/team-photo-minji_01.png" />
<span class="imtext">화창하고 시원한 바람이 부는 신선한 날씨를 좋아한다.</span>
</div>
<div class="team-photo minji-photo2">
<img class="team-photo-minji-2" src="assets/images/member/minji/team-photo-minji_02.png" />
<span class="imtext">똑똑하다는 칭찬을 들을 때 가장 기분이 좋다고 한다.</span>
</div>
<div class="team-photo minji-photo3">
<img class="team-photo-minji-3" src="assets/images/member/minji/team-photo-minji_03.png" />
<span class="imtext">
곰돌이상, 강아지상의 온미녀 느낌이 강하다. 여기서 비롯된 대표적인 별명이 곰아지이다.
</span>
</div>
<div class="team-photo minji-photo4">
<img class="team-photo-minji-4" src="assets/images/member/minji/team-photo-minji_04.png" />
<span class="imtext">뉴진스엔 공식적인 팀내 포지션이 없지만 민지가 사실상 리더 역할을 수행한다.</span>
</div>
<div class="team-photo minji-photo5">
<img class="team-photo-minji-5" src="assets/images/member/minji/team-photo-minji_05.png" />
<span class="imtext">
좋아하는 동물은 토끼, 강아지, 나비, 곰이며, 모두 닮았다고 들어본 동물들이라고 한다.
</span>
</div>
<div class="team-photo minji-photo6">
<img class="team-photo-minji-6" src="assets/images/member/minji/team-photo-minji_06.png" />
<span class="imtext">만약 운동선수가 된다면 테니스 선수가 됐을 것이라고 한다.</span>
</div>
<div class="team-photo minji-photo7">
<img class="team-photo-minji-7" src="assets/images/member/minji/team-photo-minji_07.png" />
<span class="imtext">
김민지
<br />
2004년 5월 7일
<br />
ESTJ
</span>
</div>
</div>
<!--하니 이미지 페이지-->
<div class="team-photo-page team-photo-hanni-page hidden">
<div class="team-photo hanni-photo1">
<img class="team-photo-hanni-1" src="assets/images/member/hanni/team-photo-hanni_01.png" />
<span class="imtext">그룹 내 유일한 외국인 멤버로, 호주와 베트남의 복수국적이다.</span>
</div>
<div class="team-photo hanni-photo2">
<img class="team-photo-hanni-2" src="assets/images/member/hanni/team-photo-hanni_02.png" />
<span class="imtext">특기는 어디서든 빨리 잠드는 것.</span>
</div>
<div class="team-photo hanni-photo3">
<img class="team-photo-hanni-3" src="assets/images/member/hanni/team-photo-hanni_03.png" />
<span class="imtext">무대에 오르기 전 징크스로 긴장을 덜 하기 위해 반지를 많이 만진다고 말했다.</span>
</div>
<div class="team-photo hanni-photo4">
<img class="team-photo-hanni-4" src="assets/images/member/hanni/team-photo-hanni_04.png" />
<span class="imtext">민지와 함께 빵을 사랑한다.</span>
</div>
<div class="team-photo hanni-photo5">
<img class="team-photo-hanni-5" src="assets/images/member/hanni/team-photo-hanni_05.png" />
<span class="imtext">우쿨렐레, 기타, 피아노를 연주할 줄 안다.</span>
</div>
<div class="team-photo hanni-photo6">
<img class="team-photo-hanni-6" src="assets/images/member/hanni/team-photo-hanni_06.png" />
<span class="imtext">2022년 10월 28일, 데뷔 약 3개월 만에 GUCCI의 글로벌 앰버서더로 발탁되었다.</span>
</div>
<div class="team-photo hanni-photo7">
<img class="team-photo-hanni-7" src="assets/images/member/hanni/team-photo-hanni_07.png" />
<span class="imtext">
하니
<br />
2004년 5월 7일
<br />
INFP
</span>
</div>
</div>
<!--다니엘 이미지 페이지-->
<div class="team-photo-page team-photo-dani-page hidden">
<div class="team-photo dani-photo1">
<img class="team-photo-dani-1" src="assets/images/member/dani/team-photo-dani_01.png" />
<span class="imtext">'다니'라는 애칭으로 불리는 것을 가장 좋아한다고 한다.</span>
</div>
<div class="team-photo dani-photo2">
<img class="team-photo-dani-2" src="assets/images/member/dani/team-photo-dani_02.png" />
<span class="imtext">민트초코를 좋아하는 민초단이다. 또한 호불호가 갈리는 하와이안 피자도 좋아한다.</span>
</div>
<div class="team-photo dani-photo3">
<img class="team-photo-dani-3" src="assets/images/member/dani/team-photo-dani_03.png" />
<span class="imtext">한백혼혈로, 아버지는 백인계 호주인이고 어머니는 한국인이다.</span>
</div>
<div class="team-photo dani-photo4">
<img class="team-photo-dani-4" src="assets/images/member/dani/team-photo-dani_04.png" />
<span class="imtext">성숙하고 청아한 음색이 특징으로, 넓은 보컬 레인지와 톤의 다양성이 큰 장점이다.</span>
</div>
<div class="team-photo dani-photo5">
<img class="team-photo-dani-5" src="assets/images/member/dani/team-photo-dani_05.png" />
<span class="imtext">웃을 때와 무표정일 때의 인상이 매우 다른 편이다.</span>
</div>
<div class="team-photo dani-photo6">
<img class="team-photo-dani-6" src="assets/images/member/dani/team-photo-dani_06.png" />
<span class="imtext">멤버들이 모두 기피하는 생강 과자를 먹고 맛있다 할 정도로 할머니 입맛이다.</span>
</div>
<div class="team-photo dani-photo7">
<img class="team-photo-dani-7" src="assets/images/member/dani/team-photo-dani_07.png" />
<span class="imtext">
다니엘
<br />
2004년 5월 7일
<br />
ENFP
</span>
</div>
</div>
<!--해린 이미지 페이지-->
<div class="team-photo-page team-photo-haerin-page hidden">
<div class="team-photo haerin-photo1">
<img class="team-photo-haerin-1" src="assets/images/member/haerin/team-photo-haerin_01.png" />
<span class="imtext">가장 좋아하는 과일은 복숭아와 아보카도이다.</span>
</div>
<div class="team-photo haerin-photo2">
<img class="team-photo-haerin-2" src="assets/images/member/haerin/team-photo-haerin_02.png" />
<span class="imtext">하와이안 피자를 좋아한다. 생선을 좋아하며, 회 또한 매우 좋아한다.</span>
</div>
<div class="team-photo haerin-photo3">
<img class="team-photo-haerin-3" src="assets/images/member/haerin/team-photo-haerin_03.png" />
<span class="imtext">자신과 가장 잘 어울리는 호그와트 기숙사는 래번클로일 것 같다고 한다.</span>
</div>
<div class="team-photo haerin-photo4">
<img class="team-photo-haerin-4" src="assets/images/member/haerin/team-photo-haerin_04.png" />
<span class="imtext">본인의 헤어스타일은 앞머리 있는 생머리를 선호한다고 한다.</span>
</div>
<div class="team-photo haerin-photo5">
<img class="team-photo-haerin-5" src="assets/images/member/haerin/team-photo-haerin_05.png" />
<span class="imtext">운동선수가 된다면 탁구 선수가 됐을 것이라고 한다.</span>
</div>
<div class="team-photo haerin-photo6">
<img class="team-photo-haerin-6" src="assets/images/member/haerin/team-photo-haerin_06.png" />
<span class="imtext">팀에서 유일하게 바삭한 시리얼보다는 눅눅한 시리얼을 더 선호한다.</span>
</div>
<div class="team-photo haerin-photo7">
<img class="team-photo-haerin-7" src="assets/images/member/haerin/team-photo-haerin_07.png" />
<span class="imtext">
해린
<br />
2006년 5월 15일
<br />
INTP
</span>
</div>
</div>
<!--혜인 이미지 페이지-->
<div class="team-photo-page team-photo-hyein-page hidden">
<div class="team-photo hyein-photo1">
<img class="team-photo-hyein-1" src="assets/images/member/hyein/team-photo-hyein_01.png" />
<span class="imtext">NewJeans 데뷔조에는 가장 마지막으로 합류했다.</span>
</div>
<div class="team-photo hyein-photo2">
<img class="team-photo-hyein-2" src="assets/images/member/hyein/team-photo-hyein_02.png" />
<span class="imtext">
강아지를 좋아한다. 리트리버를 가장 좋아하고 비숑도 자기주장이 강하게 생겨서 맘에 든다고 한다.
</span>
</div>
<div class="team-photo hyein-photo3">
<img class="team-photo-hyein-3" src="assets/images/member/hyein/team-photo-hyein_03.png" />
<span class="imtext">
무서운 걸 싫어하고 겁이 많다. 무서운 영화, 소설은 잘 때 자꾸 떠올라서 잘 못 본다고 한다.
</span>
</div>
<div class="team-photo hyein-photo4">
<img class="team-photo-hyein-4" src="assets/images/member/hyein/team-photo-hyein_04.png" />
<span class="imtext">
단무지가 취향이 아니라 냄새도 못 맡는다고 한다. 김밥 안에 들은 것 정도는 괜찮다고.
</span>
</div>
<div class="team-photo hyein-photo5">
<img class="team-photo-hyein-5" src="assets/images/member/hyein/team-photo-hyein_05.png" />
<span class="imtext">
가장 좋아하는 별명은 '혠이'. 자신의 이름에서 나온 별명이라 더 애정이 가기 때문이라고.
</span>
</div>
<div class="team-photo hyein-photo6">
<img class="team-photo-hyein-6" src="assets/images/member/hyein/team-photo-hyein_06.png" />
<span class="imtext">고기는 매우 좋아하지만 해산물은 싫어한다.</span>
</div>
<div class="team-photo hyein-photo7">
<img class="team-photo-hyein-7" src="assets/images/member/hyein/team-photo-hyein_07.png" />
<span class="imtext">
혜인
<br />
2008년 4월 21일
<br />
ISFP
</span>
</div>
</div>
</div>
<!--페이지네이션 -->
<div class="member-pagination">
<div class="mt-2 flex items-center justify-center">
<button class="p-3">
<img src="assets/images/member/photo-page-1.png" alt="민지 페이지 버튼" class="w-5" />
</button>
<button class="p-3">
<img src="assets/images/member/photo-page-none.png" alt="하니 페이지 버튼" class="w-5" />
</button>
<button class="p-3">
<img src="assets/images/member/photo-page-none.png" alt="다니엘 페이지 버튼" class="w-5" />
</button>
<button class="p-3">
<img src="assets/images/member/photo-page-none.png" alt="해린 페이지 버튼" class="w-5" />
</button>
<button class="p-3">
<img src="assets/images/member/photo-page-none.png" alt="혜인 페이지 버튼" class="w-5" />
</button>
</div>
</div>
</div>
<!-- e: 포토카드 -->
<!-- s: 응원 메세지 -->
<section class="message-wrap mt-20 w-full py-10 text-center">
<ul id="message-wrap-list" class="container relative mx-auto h-screen max-h-96 w-full max-w-[1240px] text-xl">
<li class="absolute left-14 top-4 inline-block rounded-full bg-red-500 px-5 py-3 opacity-80">
버니즈가 항상 옆에 있어줄게
</li>
<li class="absolute left-2 top-1/3 inline-block rounded-full bg-lime-500 px-5 py-3 opacity-45">
これは神回ですね🤭💙💛
</li>
<li class="absolute left-1/2 top-0 inline-block rounded-full bg-teal-500 px-5 py-3 opacity-65">
점점 Ditto의 계절이 되었다.
</li>
<li class="absolute left-2/3 top-[40%] inline-block rounded-full bg-amber-500 px-5 py-3 opacity-25">
뉴맛점🍚🩷
</li>
<li class="absolute left-0 top-3/4 inline-block rounded-full bg-rose-500 px-5 py-3 opacity-75">
민지💙하니🩷다니엘💛해린💚혜인💜
</li>
<li
class="absolute left-1/2 top-[85%] inline-block text-ellipsis rounded-full bg-yellow-500 px-5 py-3 opacity-70">
Have an amazing day!! Stay Healthy! Stay Safe!💜🫶🏽
</li>
<li class="absolute left-[65%] top-2/3 inline-block rounded-full bg-purple-500 px-5 py-3 opacity-35">
오늘 하루도 뉴이팅하세요🫶💝😍💙
</li>
<li class="absolute left-1/4 top-1/4 inline-block rounded-full bg-green-500 px-5 py-3 opacity-65">
MORNING BUNNIES AND NEW JEANS I MISS YOU GUYS 💙💚💛🧡🩷🐶🐱🐻🐇🐹
</li>
</ul>
<img src="./assets/images/member/character.png" alt="newjeans character" class="mx-auto w-full max-w-80" />
<h2 class="mb-5 text-4xl">🐰💕💌</h2>
<p class="text-xs opacity-40">
부담 없이 응원의 메세지들을 보내보세요!
<br />
필터링이 되어 배경으로 나오게 됩니다.
</p>
<input
id="message"
name="message"
type="text"
class="mx-auto my-14 mb-40 block w-1/2 rounded-2xl px-3 py-5 text-center text-xl text-black"
placeholder="멤버들에게 응원의 한마디 메세지를 보내보세요!"
autocomplete="off"
maxlength="80"
onkeypress="messageInit(event)" />
</section>
<!-- e: 응원 메세지 -->
<!-- s: 풋터 -->
<footer class="container mx-auto flex flex-wrap items-center justify-between py-10 font-cafe-fill text-4xl">
<a href="https://ador.world/" target="_blank">
<img src="/assets/images/header/logo-ador.svg" alt="ador" class="w-28" />
</a>
<a href="https://github.com/ormcamp-fe-3rd/bunnies-page" target="_blank">Hongdaeipgu</a>
</footer>
<!-- e: 풋터 -->
<script src="/assets/js/member/photo-page.js"></script>
<script src="/assets/js/member/message-board.js"></script>
</body>
</html>