Hugging Face's logo

Spaces:
nkjoy
/
leedaeun
Running

App Files Community
nkjoy commited on
Commit
60cc757
·
verified ·
1 Parent(s): cfb2a90

주요 활동 및 역할 여기에 웃음 치료 강사 넣어줘 - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +815 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Leedaeun
3
- emoji: 👀
4
- colorFrom: blue
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: leedaeun
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: gray
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,815 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ko">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>이다은 강사 프로필</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&family=Montserrat:wght@400;700;900&family=Dancing+Script:wght@400;700&display=swap" rel="stylesheet">
9
+ <style>
10
+ * {
11
+ margin: 0;
12
+ padding: 0;
13
+ box-sizing: border-box;
14
+ }
15
+
16
+ body {
17
+ font-family: 'Noto Sans KR', sans-serif;
18
+ background: linear-gradient(135deg, #87CEEB, #98FB98, #87CEEB);
19
+ background-size: 400% 400%;
20
+ animation: gradientBG 15s ease infinite;
21
+ min-height: 100vh;
22
+ padding: 20px;
23
+ position: relative;
24
+ }
25
+
26
+ .container {
27
+ max-width: 1400px;
28
+ width: 100%;
29
+ margin: 0 auto;
30
+ background: rgba(255, 255, 255, 0.9);
31
+ border-radius: 25px;
32
+ box-shadow: 0 30px 60px rgba(0,0,0,0.2);
33
+ overflow: hidden;
34
+ backdrop-filter: blur(10px);
35
+ border: 1px solid rgba(255,255,255,0.3);
36
+ }
37
+
38
+ @keyframes gradientBG {
39
+ 0% { background-position: 0% 50%; }
40
+ 50% { background-position: 100% 50%; }
41
+ 100% { background-position: 0% 50%; }
42
+ }
43
+
44
+ /* 구름 애니메이션 */
45
+ body::before {
46
+ content: "";
47
+ position: absolute;
48
+ top: 0;
49
+ left: 0;
50
+ width: 100%;
51
+ height: 100%;
52
+ background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="white" opacity="0.3" d="M20,60 Q30,40 40,60 T60,60 Q70,80 80,60 T100,60 L100,100 L0,100 Z"/></svg>');
53
+ background-size: 300px;
54
+ animation: clouds 60s linear infinite;
55
+ z-index: -1;
56
+ }
57
+
58
+ body::after {
59
+ content: "";
60
+ position: absolute;
61
+ top: 0;
62
+ left: 0;
63
+ width: 100%;
64
+ height: 100%;
65
+ background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="white" opacity="0.2" d="M10,70 Q25,50 40,70 T70,70 Q85,90 95,70 T110,70 L110,100 L0,100 Z"/></svg>');
66
+ background-size: 400px;
67
+ animation: clouds 80s linear infinite reverse;
68
+ z-index: -1;
69
+ }
70
+
71
+ @keyframes clouds {
72
+ 0% { background-position: 0 0; }
73
+ 100% { background-position: 1000px 0; }
74
+ }
75
+
76
+ .container {
77
+ max-width: 1400px;
78
+ width: 100%;
79
+ background: rgba(255, 255, 255, 0.9);
80
+ border-radius: 25px;
81
+ box-shadow: 0 30px 60px rgba(0,0,0,0.2);
82
+ overflow: hidden;
83
+ backdrop-filter: blur(10px);
84
+ border: 1px solid rgba(255,255,255,0.3);
85
+ }
86
+
87
+ .header {
88
+ background:
89
+ linear-gradient(135deg, rgba(106, 17, 203, 0.8) 0%, rgba(37, 117, 252, 0.8) 100%),
90
+ url('https://i.imgur.com/JQJzJQj.jpg');
91
+ background-size: cover;
92
+ background-position: center;
93
+ color: white;
94
+ text-align: center;
95
+ padding: 80px 40px;
96
+ position: relative;
97
+ overflow: hidden;
98
+ }
99
+
100
+ .header::before {
101
+ content: '';
102
+ position: absolute;
103
+ top: 0;
104
+ left: 0;
105
+ width: 100%;
106
+ height: 100%;
107
+ background: rgba(0, 0, 0, 0.2);
108
+ z-index: 1;
109
+ }
110
+
111
+ .profile-container,
112
+ .name,
113
+ .english-name,
114
+ .title,
115
+ .contact-info {
116
+ position: relative;
117
+ z-index: 2;
118
+ }
119
+
120
+ .profile-container {
121
+ position: relative;
122
+ display: inline-block;
123
+ margin-bottom: 30px;
124
+ }
125
+
126
+ .profile-image {
127
+ width: 220px;
128
+ height: 220px;
129
+ border-radius: 50%;
130
+ background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1);
131
+ margin: 0 auto;
132
+ display: flex;
133
+ align-items: center;
134
+ justify-content: center;
135
+ border: 8px solid rgba(255,255,255,0.3);
136
+ box-shadow: 0 20px 40px rgba(0,0,0,0.3);
137
+ position: relative;
138
+ overflow: hidden;
139
+ animation: float 3s ease-in-out infinite;
140
+ background-image: url('https://i.imgur.com/JQJzJQj.jpg');
141
+ background-size: cover;
142
+ background-position: center;
143
+ }
144
+
145
+ @keyframes float {
146
+ 0% { transform: translateY(0px); }
147
+ 50% { transform: translateY(-20px); }
148
+ 100% { transform: translateY(0px); }
149
+ }
150
+
151
+ .name {
152
+ font-size: 4.5em;
153
+ letter-spacing: 10px;
154
+ font-weight: 900;
155
+ margin-bottom: 10px;
156
+ color: white;
157
+ font-family: 'Montserrat', sans-serif;
158
+ text-shadow: 3px 3px 6px rgba(0,0,0,0.5);
159
+ }
160
+
161
+ .english-name {
162
+ font-size: 1.8em;
163
+ font-weight: 700;
164
+ margin-bottom: 30px;
165
+ opacity: 0.9;
166
+ letter-spacing: 2px;
167
+ font-family: 'Dancing Script', cursive;
168
+ }
169
+
170
+ .title {
171
+ font-size: 1.5em;
172
+ font-weight: 500;
173
+ margin-bottom: 40px;
174
+ background: rgba(255,255,255,0.2);
175
+ padding: 15px 30px;
176
+ border-radius: 30px;
177
+ display: inline-block;
178
+ }
179
+
180
+ .contact-info {
181
+ display: flex;
182
+ justify-content: center;
183
+ gap: 40px;
184
+ flex-wrap: wrap;
185
+ margin-top: 20px;
186
+ }
187
+
188
+ .contact-item {
189
+ display: flex;
190
+ align-items: center;
191
+ gap: 12px;
192
+ font-size: 1.3em;
193
+ background: rgba(255,255,255,0.1);
194
+ padding: 15px 25px;
195
+ border-radius: 50px;
196
+ backdrop-filter: blur(10px);
197
+ transition: all 0.3s ease;
198
+ border: 1px solid rgba(255,255,255,0.2);
199
+ }
200
+
201
+ .contact-item:hover {
202
+ background: rgba(255,255,255,0.2);
203
+ transform: translateY(-5px);
204
+ box-shadow: 0 10px 25px rgba(0,0,0,0.2);
205
+ }
206
+
207
+ .contact-icon {
208
+ font-size: 1.5em;
209
+ width: 50px;
210
+ height: 50px;
211
+ background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
212
+ border-radius: 50%;
213
+ display: flex;
214
+ align-items: center;
215
+ justify-content: center;
216
+ }
217
+
218
+ .content {
219
+ padding: 60px;
220
+ }
221
+
222
+ .section-title {
223
+ font-size: 2.8em;
224
+ color: #2c3e50;
225
+ text-align: center;
226
+ margin-bottom: 50px;
227
+ position: relative;
228
+ font-weight: 900;
229
+ font-family: 'Montserrat', sans-serif;
230
+ }
231
+
232
+ .section-title::after {
233
+ content: '';
234
+ position: absolute;
235
+ bottom: -15px;
236
+ left: 50%;
237
+ transform: translateX(-50%);
238
+ width: 120px;
239
+ height: 6px;
240
+ background: linear-gradient(90deg, #ff6b6b, #4ecdc4);
241
+ border-radius: 3px;
242
+ }
243
+
244
+ .roles-grid {
245
+ display: grid;
246
+ grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
247
+ gap: 30px;
248
+ margin-bottom: 60px;
249
+ }
250
+
251
+ .role-card {
252
+ background: linear-gradient(135deg, #FF416C, #FF4B2B);
253
+ color: white;
254
+ padding: 40px;
255
+ border-radius: 20px;
256
+ text-align: center;
257
+ transition: all 0.4s ease;
258
+ box-shadow: 0 15px 35px rgba(0,0,0,0.2);
259
+ position: relative;
260
+ overflow: hidden;
261
+ border: 1px solid rgba(255,255,255,0.3);
262
+ }
263
+
264
+ .role-card::before {
265
+ content: '';
266
+ position: absolute;
267
+ top: 0;
268
+ left: -100%;
269
+ width: 100%;
270
+ height: 100%;
271
+ background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
272
+ transition: 0.5s;
273
+ }
274
+
275
+ .role-card:hover::before {
276
+ left: 100%;
277
+ }
278
+
279
+ .role-card:hover {
280
+ transform: translateY(-15px) scale(1.03);
281
+ box-shadow: 0 25px 50px rgba(0,0,0,0.3);
282
+ }
283
+
284
+ .role-number {
285
+ font-size: 3.5em;
286
+ font-weight: 900;
287
+ margin-bottom: 20px;
288
+ text-shadow: 3px 3px 6px rgba(0,0,0,0.3);
289
+ background: linear-gradient(45deg, #ffd700, #ffffff);
290
+ -webkit-background-clip: text;
291
+ -webkit-text-fill-color: transparent;
292
+ background-clip: text;
293
+ }
294
+
295
+ .role-title {
296
+ font-size: 1.5em;
297
+ font-weight: 700;
298
+ margin-bottom: 20px;
299
+ text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
300
+ }
301
+
302
+ .role-description {
303
+ font-size: 1.1em;
304
+ line-height: 1.7;
305
+ opacity: 0.9;
306
+ }
307
+
308
+ .achievements {
309
+ background: linear-gradient(135deg, #36D1DC, #5B86E5);
310
+ padding: 50px;
311
+ border-radius: 20px;
312
+ margin-bottom: 50px;
313
+ box-shadow: 0 20px 40px rgba(0,0,0,0.15);
314
+ border: 1px solid rgba(255,255,255,0.3);
315
+ }
316
+
317
+ .achievements h3 {
318
+ color: white;
319
+ text-align: center;
320
+ margin-bottom: 40px;
321
+ font-size: 2.5em;
322
+ font-weight: 900;
323
+ }
324
+
325
+ .achievements-list {
326
+ display: grid;
327
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
328
+ gap: 25px;
329
+ }
330
+
331
+ .achievement-item {
332
+ background: linear-gradient(135deg, #FFDEE9, #B5FFFC);
333
+ padding: 30px;
334
+ border-radius: 15px;
335
+ box-shadow: 0 10px 25px rgba(0,0,0,0.1);
336
+ border-left: 5px solid #ffd700;
337
+ transition: all 0.3s ease;
338
+ backdrop-filter: blur(10px);
339
+ border: 1px solid rgba(255,255,255,0.3);
340
+ }
341
+
342
+ .achievement-item:hover {
343
+ transform: translateX(15px) translateY(-10px);
344
+ box-shadow: 0 15px 35px rgba(0,0,0,0.2);
345
+ }
346
+
347
+ .achievement-title {
348
+ font-weight: 700;
349
+ color: #2c3e50;
350
+ margin-bottom: 15px;
351
+ font-size: 1.2em;
352
+ display: flex;
353
+ align-items: center;
354
+ gap: 10px;
355
+ }
356
+
357
+ .achievement-icon {
358
+ color: #ff6b6b;
359
+ }
360
+
361
+ .achievement-desc {
362
+ color: #555;
363
+ line-height: 1.6;
364
+ font-size: 1em;
365
+ }
366
+
367
+ .additional-roles {
368
+ background: linear-gradient(135deg, #FFD700, #FFA500);
369
+ padding: 50px;
370
+ border-radius: 20px;
371
+ margin-bottom: 50px;
372
+ box-shadow: 0 20px 40px rgba(0,0,0,0.15);
373
+ border: 1px solid rgba(255,255,255,0.3);
374
+ }
375
+
376
+ .additional-roles h3 {
377
+ color: white;
378
+ text-align: center;
379
+ margin-bottom: 40px;
380
+ font-size: 2.5em;
381
+ font-weight: 900;
382
+ }
383
+
384
+ .additional-list {
385
+ display: grid;
386
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
387
+ gap: 25px;
388
+ }
389
+
390
+ .additional-item:nth-child(1) {
391
+ background: linear-gradient(135deg, #FF5252, #FF1744);
392
+ }
393
+ .additional-item:nth-child(2) {
394
+ background: linear-gradient(135deg, #FF7043, #FF5722);
395
+ }
396
+ .additional-item:nth-child(3) {
397
+ background: linear-gradient(135deg, #FFD740, #FFC400);
398
+ }
399
+ .additional-item:nth-child(4) {
400
+ background: linear-gradient(135deg, #69F0AE, #00E676);
401
+ }
402
+ .additional-item:nth-child(5) {
403
+ background: linear-gradient(135deg, #40C4FF, #00B0FF);
404
+ }
405
+ .additional-item:nth-child(6) {
406
+ background: linear-gradient(135deg, #536DFE, #3D5AFE);
407
+ }
408
+ .additional-item:nth-child(7) {
409
+ background: linear-gradient(135deg, #7C4DFF, #651FFF);
410
+ }
411
+ .additional-item:nth-child(8) {
412
+ background: linear-gradient(135deg, #FF80AB, #FF4081);
413
+ }
414
+ .additional-item {
415
+ padding: 30px;
416
+ border-radius: 15px;
417
+ text-align: center;
418
+ box-shadow: 0 8px 20px rgba(0,0,0,0.1);
419
+ transition: all 0.3s ease;
420
+ position: relative;
421
+ overflow: hidden;
422
+ border: 1px solid rgba(255,255,255,0.3);
423
+ color: white;
424
+ }
425
+
426
+ .additional-item:hover {
427
+ transform: translateY(-10px);
428
+ box-shadow: 0 15px 30px rgba(0,0,0,0.2);
429
+ }
430
+
431
+ .additional-icon {
432
+ font-size: 2.5em;
433
+ margin-bottom: 20px;
434
+ color: white;
435
+ text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
436
+ }
437
+
438
+ .additional-title {
439
+ font-weight: 700;
440
+ color: white;
441
+ font-size: 1.2em;
442
+ margin-bottom: 15px;
443
+ line-height: 1.4;
444
+ text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
445
+ }
446
+
447
+ .badge {
448
+ display: inline-block;
449
+ background: rgba(255,255,255,0.9);
450
+ color: #2c3e50;
451
+ padding: 5px 15px;
452
+ border-radius: 20px;
453
+ font-size: 0.9em;
454
+ font-weight: 600;
455
+ margin-top: 10px;
456
+ box-shadow: 0 2px 5px rgba(0,0,0,0.2);
457
+ }
458
+
459
+ .quote-section {
460
+ text-align: center;
461
+ padding: 70px 50px;
462
+ background: linear-gradient(135deg, #6a11cb, #2575fc);
463
+ color: white;
464
+ border-radius: 20px;
465
+ margin: 50px 0;
466
+ position: relative;
467
+ overflow: hidden;
468
+ border: 1px solid rgba(255,255,255,0.3);
469
+ }
470
+
471
+ .quote-section::before {
472
+ content: '"';
473
+ position: absolute;
474
+ top: 20px;
475
+ left: 30px;
476
+ font-size: 10em;
477
+ opacity: 0.1;
478
+ font-family: serif;
479
+ }
480
+
481
+ .quote {
482
+ font-size: 1.8em;
483
+ font-style: italic;
484
+ line-height: 1.7;
485
+ max-width: 900px;
486
+ margin: 0 auto 30px;
487
+ text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
488
+ position: relative;
489
+ z-index: 2;
490
+ }
491
+
492
+ .quote-author {
493
+ font-size: 1.3em;
494
+ opacity: 0.9;
495
+ font-weight: 500;
496
+ }
497
+
498
+ .signature {
499
+ font-family: 'Dancing Script', cursive, 'Noto Sans KR', sans-serif;
500
+ font-size: 2.5em;
501
+ margin-top: 20px;
502
+ color: #ffd700;
503
+ }
504
+
505
+ .footer {
506
+ text-align: center;
507
+ padding: 40px;
508
+ background: linear-gradient(90deg, #2c3e50, #34495e);
509
+ color: white;
510
+ font-size: 1.1em;
511
+ }
512
+
513
+
514
+ .stats-section {
515
+ background: linear-gradient(135deg, #667eea, #764ba2);
516
+ padding: 50px;
517
+ border-radius: 20px;
518
+ margin-bottom: 50px;
519
+ text-align: center;
520
+ color: white;
521
+ box-shadow: 0 20px 40px rgba(0,0,0,0.15);
522
+ border: 1px solid rgba(255,255,255,0.3);
523
+ }
524
+
525
+ .stats-title {
526
+ font-size: 2.5em;
527
+ font-weight: 900;
528
+ margin-bottom: 30px;
529
+ }
530
+
531
+ .stats-grid {
532
+ display: grid;
533
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
534
+ gap: 30px;
535
+ margin-top: 30px;
536
+ }
537
+
538
+ .stat-item {
539
+ background: rgba(255,255,255,0.1);
540
+ padding: 30px;
541
+ border-radius: 15px;
542
+ backdrop-filter: blur(10px);
543
+ border: 1px solid rgba(255,255,255,0.2);
544
+ }
545
+
546
+ .stat-number {
547
+ font-size: 3em;
548
+ font-weight: 900;
549
+ margin-bottom: 10px;
550
+ background: linear-gradient(45deg, #ffd700, #ffffff);
551
+ -webkit-background-clip: text;
552
+ -webkit-text-fill-color: transparent;
553
+ background-clip: text;
554
+ }
555
+
556
+ .stat-label {
557
+ font-size: 1.2em;
558
+ font-weight: 500;
559
+ }
560
+
561
+ @media (max-width: 768px) {
562
+ .header {
563
+ padding: 60px 20px;
564
+ }
565
+
566
+ .name {
567
+ font-size: 2.5em;
568
+ }
569
+
570
+ .english-name {
571
+ font-size: 1.4em;
572
+ }
573
+
574
+ .content {
575
+ padding: 30px 20px;
576
+ }
577
+
578
+ .contact-info {
579
+ flex-direction: column;
580
+ gap: 20px;
581
+ }
582
+
583
+ .roles-grid {
584
+ grid-template-columns: 1fr;
585
+ }
586
+
587
+ .section-title {
588
+ font-size: 2.2em;
589
+ }
590
+
591
+ .quote {
592
+ font-size: 1.4em;
593
+ }
594
+
595
+ .additional-list {
596
+ grid-template-columns: 1fr;
597
+ }
598
+ }
599
+
600
+ @keyframes pulse {
601
+ 0% { box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.7); }
602
+ 70% { box-shadow: 0 0 0 20px rgba(255, 107, 107, 0); }
603
+ 100% { box-shadow: 0 0 0 0 rgba(255, 107, 107, 0); }
604
+ }
605
+
606
+ .pulse {
607
+ animation: pulse 2s infinite;
608
+ }
609
+ </style>
610
+ </head>
611
+ <body>
612
+ <div class="container">
613
+ <div class="header">
614
+ <div class="profile-container">
615
+ <div class="profile-image pulse"></div>
616
+ </div>
617
+ <h1 class="name">이다은</h1>
618
+ <div class="english-name">Lee Da Eun</div>
619
+ <div class="title">전문강사</div>
620
+ <div class="contact-info">
621
+ <div class="contact-item">
622
+ <div class="contact-icon">
623
+ <i class="fas fa-phone"></i>
624
+ </div>
625
+ <span>010-9019-8087</span>
626
+ </div>
627
+ <div class="contact-item">
628
+ <div class="contact-icon">
629
+ <i class="fas fa-envelope"></i>
630
+ </div>
631
+ <span>da33csy@naver.com</span>
632
+ </div>
633
+ </div>
634
+ </div>
635
+
636
+ <div class="content">
637
+ <h2 class="section-title">전문 강사 프로필</h2>
638
+
639
+ <div class="roles-grid">
640
+ <div class="role-card">
641
+ <div class="role-number">01</div>
642
+ <div class="role-title">통일부 국립통일교육원 강사</div>
643
+ <div class="role-description">국가의 통일 교육을 이끌며 미래 세대를 위한 통일 의식 함양에 기여하는 국가 공인 전문가</div>
644
+ </div>
645
+
646
+ <div class="role-card">
647
+ <div class="role-number">02</div>
648
+ <div class="role-title">피스메이커 대표강사</div>
649
+ <div class="role-description">평화와 화합을 전하는 메시지로 사회 각계각층에 긍정적인 에너지를 전달하는 리더</div>
650
+ </div>
651
+
652
+ <div class="role-card">
653
+ <div class="role-number">03</div>
654
+ <div class="role-title">웃음치료 강사</div>
655
+ <div class="role-description">치유의 웃음을 통해 마음의 상처를 치유하고 삶의 활력을 불어넣는 힐링 전문가</div>
656
+ </div>
657
+ </div>
658
+
659
+ <div class="achievements">
660
+ <h3>주요 활동 및 역할</h3>
661
+ <div class="achievements-list">
662
+ <div class="achievement-item">
663
+ <div class="achievement-title">
664
+ <i class="fas fa-shield-alt achievement-icon"></i>
665
+ 국방부 안보강사
666
+ </div>
667
+ <div class="achievement-desc">국가안보의식 고취를 위한 교육으로 국민의 안보 이해도 향상에 중요한 역할 수행</div>
668
+ </div>
669
+
670
+ <div class="achievement-item">
671
+ <div class="achievement-title">
672
+ <i class="fas fa-users achievement-icon"></i>
673
+ 시민교육 강사
674
+ </div>
675
+ <div class="achievement-desc">시민의식 함양과 민주주의 정착을 위한 교육으로 지역사회 발전에 기여</div>
676
+ </div>
677
+
678
+ <div class="achievement-item">
679
+ <div class="achievement-title">
680
+ <i class="fas fa-city achievement-icon"></i>
681
+ 청주시 민주평통 강사
682
+ </div>
683
+ <div class="achievement-desc">지역 중심의 평화통일 교육으로 시민들의 통일에 대한 이해 증진에 힘씀</div>
684
+ </div>
685
+
686
+ <div class="achievement-item">
687
+ <div class="achievement-title">
688
+ <i class="fas fa-balance-scale achievement-icon"></i>
689
+ 민주평화통일자문위원
690
+ </div>
691
+ <div class="achievement-desc">국가의 통일 및 평화 정책 수립에 있어 전문적 의견을 제공하는 정책 자문가</div>
692
+ </div>
693
+
694
+ <div class="achievement-item">
695
+ <div class="achievement-title">
696
+ <i class="fas fa-map-marker-alt achievement-icon"></i>
697
+ 경기도평화통일교육전문강사
698
+ </div>
699
+ <div class="achievement-desc">경기도 지역 특화된 평화통일 교육으로 지역 발전에 중추적 역할 수행</div>
700
+ </div>
701
+
702
+ <div class="achievement-item">
703
+ <div class="achievement-title">
704
+ <i class="fas fa-laugh-squint achievement-icon"></i>
705
+ 웃음치료 강사
706
+ </div>
707
+ <div class="achievement-desc">과학적으로 입증된 웃음치료 기법으로 스트레스 해소와 정신건강 증진에 기여</div>
708
+ </div>
709
+ </div>
710
+ </div>
711
+
712
+ <div class="additional-roles">
713
+ <h3>전문 자격 및 추가 역할</h3>
714
+ <div class="additional-list">
715
+ <div class="additional-item">
716
+ <div class="additional-icon">
717
+ <i class="fas fa-heart"></i>
718
+ </div>
719
+ <div class="additional-title">인성교육지도사</div>
720
+ <div class="badge">전문자격</div>
721
+ </div>
722
+
723
+ <div class="additional-item">
724
+ <div class="additional-icon">
725
+ <i class="fas fa-ban"></i>
726
+ </div>
727
+ <div class="additional-title">마약예방교육강사</div>
728
+ <div class="badge">예방교육</div>
729
+ </div>
730
+
731
+ <div class="additional-item">
732
+ <div class="additional-icon">
733
+ <i class="fas fa-hand-holding-heart"></i>
734
+ </div>
735
+ <div class="additional-title">국가인권위원회</div>
736
+ <div class="badge">공식강사</div>
737
+ </div>
738
+
739
+ <div class="additional-item">
740
+ <div class="additional-icon">
741
+ <i class="fas fa-flag"></i>
742
+ </div>
743
+ <div class="additional-title">자유총연맹 안보 교육 강사</div>
744
+ <div class="badge">안보전문</div>
745
+ </div>
746
+
747
+ <div class="additional-item">
748
+ <div class="additional-icon">
749
+ <i class="fas fa-hands-helping"></i>
750
+ </div>
751
+ <div class="additional-title">다문화심리상담사</div>
752
+ <div class="badge">상담전문</div>
753
+ </div>
754
+
755
+ <div class="additional-item">
756
+ <div class="additional-icon">
757
+ <i class="fas fa-smoking-ban"></i>
758
+ </div>
759
+ <div class="additional-title">흡연예방교육강사</div>
760
+ <div class="badge">건강교육</div>
761
+ </div>
762
+
763
+ <div class="additional-item">
764
+ <div class="additional-icon">
765
+ <i class="fas fa-user-friends"></i>
766
+ </div>
767
+ <div class="additional-title">실버라이프코치</div>
768
+ <div class="badge">노인상담</div>
769
+ </div>
770
+
771
+ <div class="additional-item">
772
+ <div class="additional-icon">
773
+ <i class="fas fa-laugh-squint"></i>
774
+ </div>
775
+ <div class="additional-title">웃음치료사</div>
776
+ <div class="badge">치유전문</div>
777
+ </div>
778
+ </div>
779
+ </div>
780
+
781
+ <div class="stats-section">
782
+ <h3 class="stats-title">활동 성과</h3>
783
+ <div class="stats-grid">
784
+ <div class="stat-item">
785
+ <div class="stat-number">1000+</div>
786
+ <div class="stat-label">교육생 수</div>
787
+ </div>
788
+ <div class="stat-item">
789
+ <div class="stat-number">500+</div>
790
+ <div class="stat-label">강의 수</div>
791
+ </div>
792
+ <div class="stat-item">
793
+ <div class="stat-number">15+</div>
794
+ <div class="stat-label">전문 분야</div>
795
+ </div>
796
+ <div class="stat-item">
797
+ <div class="stat-number">10+</div>
798
+ <div class="stat-label">년간 경력</div>
799
+ </div>
800
+ </div>
801
+ </div>
802
+
803
+ <div class="quote-section">
804
+ <div class="quote">"교육은 마음을 열고, 웃음은 마음을 치유하며, 평화는 마음을 하나로 만듭니다. 모두가 행복한 세상을 위해 오늘도 최선을 다하겠습니다."</div>
805
+ <div class="quote-author">- 이다은 강사의 신념 -</div>
806
+ <div class="signature">Lee Da Eun</div>
807
+ </div>
808
+ </div>
809
+
810
+ <div class="footer">
811
+ <p>© 2024 이다은 강사 프로필 | 전문성과 열정으로 사회에 긍정적인 변화를 만드는 교육자</p>
812
+ </div>
813
+ </div>
814
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=nkjoy/leedaeun" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
815
+ </html>