송민겸 / EMOJI-HUMAN

Go to a project
Toggle navigation Toggle navigation pinning
rtdtbb8
5581ce21 2 parents e121f239 544f4c28

Merge branch 'temp1' of http://khuhub.khu.ac.kr/2020104743/EMOJI-HUMAN into temp1

Inline Side-by-side
Showing 9 changed files with 1281 additions and 312 deletions
1 +<!DOCTYPE html>
2 +<html lang="en" >
3 +<head>
4 + <meta charset="UTF-8">
5 + <title>CodePen - Demo: CSS scroll down button</title>
6 + <link rel="stylesheet" href="./style.css">
7 +
8 + <!-- 메세지 버블 -->
9 + <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
10 +
11 +</head>
12 +<body>
13 +<!-- partial:index.partial.html -->
14 +
15 +<!-- 배경 스크롤 -->
16 + <section id="section01" class="demo">
17 + <h1 class="animated fadeOutUp">Emoji Human, Who are you?</h1>
18 + <h2 class="animated fadeOutUp">이모지 인간의 정체가 궁금해요.</h2>
19 + <h3 class="animated2 fadeIn">이모지일까요, 인간일까요?<br>
20 + 직접 대화하면서 차근차근 알아가봅시다!</h3>
21 + <a href="#section02"><span></span></a>
22 + </section>
23 +
24 +
25 + <section id="section02" class="demo">
26 + <!-- 1번 대화 -->
27 + <section>
28 + <br>
29 + <br>
30 + <br>
31 + <br>
32 + <br>
33 + <br>
34 + <br>
35 + <br>
36 + <br>
37 + <br>
38 + <div class="from-them">
39 + <p>안녕하세요!!<br>
40 + 저는 이모지 인간이라고 해요 @.@ <br>
41 + 당신을 만나게 되어서 매우 반가워요 :)
42 + </p>
43 + </div>
44 + <div class="clear"></div>
45 +
46 + <div class="from-me slam">
47 + <p>말풍선을 눌러 이모지 인간에게 인사하기</p>
48 + </div>
49 + <div class="clear"></div>
50 + </section>
51 + <!-- 1번 대화 -->
52 + </section>
53 +
54 +
55 + <section id="section03" class="demo">
56 + <!-- 2번 대화 -->
57 + <section>
58 + <div class="from-me gentle">
59 + <p>이모지 인간은 뭔가요...?</p>
60 + </div>
61 + <div class="clear"></div>
62 +
63 + <div class="from-them">
64 + <p>이모지 인간은 말그대로
65 + “이모지”로 이루어진 인격체입니다.
66 + 여러분이 알고 계시는 다양한 이모지들이 있죠?
67 + 저는 그 어떤 모습의 이모지든 다 될 수 있어요.
68 + 이모지 자체가 저의 몸이라고 생각하시면 됩니다.
69 + 예를 들어, 옆의 태양이나 파라솔까지도요!
70 + (하지만, 저는 인격체이기 때문에 말도 할 수 있어요V) </p>
71 + </div>
72 + </section>
73 + <!-- 2번 대화 -->
74 + </section>
75 +
76 + <section id="section04" class="demo">
77 + <!-- 3번 대화 -->
78 + <section>
79 + <div class="from-me gentle">
80 + <p>어...이모지 인간은 어떻게 생겨났나요?</p>
81 + </div>
82 + <div class="clear"></div>
83 +
84 + <div class="from-them">
85 + <p>요즘 10대-20대들은 SNS 사용시,
86 + 주로 이모지를 사용하여 대화를 하곤 합니다.
87 + 문자로 길게 설명을 하는 것보다 표정이나 감정들을
88 + 직관적으로 전달할 수 있는 이모지가
89 + 더 간편하기에 그렇습니다.
90 + 이에 현대인들의 일상은 이모지로 가득 찬,
91 + “<이모지 인간>이 아닐까”
92 + 하는 발상에서 제가 생겨나게 되었답니다.</p>
93 + </div>
94 + </section>
95 + <!-- 3번 대화 -->
96 + </section>
97 +
98 + <section id="section05" class="demo">
99 + <!-- 4번 대화 -->
100 + <section>
101 + <div class="from-me gentle">
102 + <p>그럼 이모지 인간은 뭘할 수 있나요?</p>
103 + </div>
104 + <div class="clear"></div>
105 +
106 + <div class="from-them">
107 + <p>첫째, 저와의 간단한 대화!
108 + 둘째, 이모지로 보내는 문자!
109 + 셋째, 이모지 MBTI 카드!</p>
110 + </div>
111 + <br>
112 + <br>
113 + <br>
114 + <br>
115 + <br>
116 + <br>
117 + <br>
118 + <br>
119 + <br>
120 + <br>
121 + <br>
122 + <br>
123 + <div class="from-them">
124 + <p>첫번째...보다는
125 + 두번째와 세번째에 대한 설명을 더 해볼께요...
126 + 이모지로 보내는 문자는 Emo-ssage라고 해요.
127 + 아무에게나, 혹은 특정 상대에게 자유롭게 문자를 보내면,
128 + 대화 중 일부를 이모지로 채워줄 거랍니다.
129 + 작성이 완료되면 여러분만의 emo-ssage를
130 + 이미지로 저장할 수 있어요!</p>
131 + </div>
132 + <br>
133 + <br>
134 + <br>
135 + <br>
136 + <br>
137 + <br>
138 + <br>
139 + <br>
140 + <br>
141 + <br>
142 + <br>
143 + <br>
144 + <br>
145 + <br>
146 + <br>
147 + <br>
148 + <br>
149 + <br>
150 + <br>
151 + <br>
152 + <br>
153 + <br>
154 + <br>
155 + <br>
156 + <div class="from-them">
157 + <p>이모지 MBTI 카드는 EMOTI라고 해요.
158 + 여러 이모지들을 활용해서 각 16개 mbti
159 + 고유의 이모지들을 탄생시켰어요.
160 + 아, 그리고 각 mbti 카드를 넘길 때마다
161 + 어울리는 노래도 흘러나온답니다! </p>
162 + </div>
163 + </section>
164 + <!-- 4번 대화 -->
165 + </section>
166 +
167 + <section id="section06" class="demo">
168 + <!-- 5번 대화 -->
169 + <section>
170 + <div class="from-me gentle">
171 + <p>네...아, 아까 정의가 조금 헷갈리는데, 이모지 인간은 이모지인가요 인간인가요?</p>
172 + </div>
173 + <div class="clear"></div>
174 +
175 + <div class="from-them">
176 + <p>This page cannot be found</p>
177 + </div>
178 + </section>
179 + <!-- 5번 대화 -->
180 + </section>
181 +
182 + <!-- partial -->
183 + <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src="./script.js"></script>
184 +<!-- 배경 스크롤 -->
185 +
186 + <!-- 메세지 버블 -->
187 + <script src="./script.js"></script>
188 +
189 +</body>
190 +</html>
1 +$(function() {
2 + $('a[href*=#]').on('click', function(e) {
3 + e.preventDefault();
4 + $('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top}, 500, 'linear');
5 + });
6 +});
...\ No newline at end of file ...\ No newline at end of file
1 +/* 배경 스크롤 */
2 +@import url(https://fonts.googleapis.com/css?family=Josefin+Sans:300,400);
3 +* {
4 + margin: 0;
5 + padding: 0;
6 +}
7 +html, body {
8 + height: 100%;
9 +}
10 +section {
11 + position: relative;
12 + width: 100%;
13 + height: 100%;
14 +}
15 +section::after {
16 + position: absolute;
17 + bottom: 0;
18 + left: 0;
19 + content: '';
20 + width: 100%;
21 + height: 80%;
22 + /* background: -webkit-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,.8) 80%,rgba(0,0,0,.8) 100%); */
23 + /* background: linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,.8) 80%,rgba(0,0,0,.8) 100%); */
24 +}
25 +
26 +/* 글자 */
27 +section h1 {
28 + position: absolute;
29 + top: 38%;
30 + left: 50%;
31 + z-index: 2;
32 + -webkit-transform: translate(-50%, -50%);
33 + transform: translate(-50%, -50%);
34 + color: #fff;
35 + font : normal 300 64px/1 'Josefin Sans', sans-serif;
36 + text-align: center;
37 + white-space: nowrap;
38 +}
39 +section h2 {
40 + position: absolute;
41 + top: 48%;
42 + left: 50%;
43 + z-index: 2;
44 + -webkit-transform: translate(-50%, -50%);
45 + transform: translate(-50%, -50%);
46 + color: #fff;
47 + font : normal 300 23px/1 'Josefin Sans', sans-serif;
48 + text-align: center;
49 + white-space: nowrap;
50 +}
51 +section h3 {
52 + position: absolute;
53 + top: 54%;
54 + left: 50%;
55 + z-index: 2;
56 + -webkit-transform: translate(-50%, -50%);
57 + transform: translate(-50%, -50%);
58 + color: #fff;
59 + font : normal 300 13px/1 'Josefin Sans', sans-serif;
60 + text-align: center;
61 + white-space: nowrap;
62 + line-height: 16px;
63 +}
64 +
65 +#section01 { background: url(https://picsum.photos/1200/800?image=575) center center / cover no-repeat;}
66 +#section02 { background: url(https://picsum.photos/1200/800?image=1016) center center / cover no-repeat;}
67 +#section03 { background: url(https://picsum.photos/1200/800?image=869) center center / cover no-repeat;}
68 +#section04 { background: url(https://picsum.photos/1200/800?image=506) center center / cover no-repeat;}
69 +#section05 { background: url(https://picsum.photos/1200/800?image=1037) center center / cover no-repeat;}
70 +#section06 { background: url(https://picsum.photos/1200/800?image=901) center center / cover no-repeat;}
71 +
72 +
73 +/* 스크롤 글자 */
74 +.demo a {
75 + position: absolute;
76 + bottom: 20px;
77 + left: 50%;
78 + z-index: 2;
79 + display: inline-block;
80 + -webkit-transform: translate(0, -50%);
81 + transform: translate(0, -50%);
82 + color: rgb(255, 255, 255);
83 + font : normal 400 15px/1 'Josefin Sans', sans-serif;
84 + letter-spacing: .1em;
85 + text-decoration: none;
86 + transition: opacity .3s;
87 +}
88 +.demo a:hover {
89 + opacity: .5;
90 +}
91 +
92 +
93 +
94 +#section01 a {
95 + padding-top: 40px;
96 +}
97 +#section01 a span {
98 + position: absolute;
99 + top: 0;
100 + /* left: 50%; */
101 + width: 24px;
102 + height: 24px;
103 + /* margin-left: -12px; */
104 + border-left: 1px solid #fff;
105 + border-bottom: 1px solid #fff;
106 + -webkit-transform: rotate(-45deg);
107 + transform: rotate(-45deg);
108 + box-sizing: border-box;
109 +}
110 +
111 +
112 +/*
113 +#section02 a {
114 + padding-top: 60px;
115 +}
116 +#section02 a span {
117 + position: absolute;
118 + top: 0;
119 + left: 50%;
120 + width: 46px;
121 + height: 46px;
122 + margin-left: -23px;
123 + border: 1px solid #fff;
124 + border-radius: 100%;
125 + box-sizing: border-box;
126 +}
127 +#section02 a span::after {
128 + position: absolute;
129 + top: 50%;
130 + left: 50%;
131 + content: '';
132 + width: 16px;
133 + height: 16px;
134 + margin: -12px 0 0 -8px;
135 + border-left: 1px solid #fff;
136 + border-bottom: 1px solid #fff;
137 + -webkit-transform: rotate(-45deg);
138 + transform: rotate(-45deg);
139 + box-sizing: border-box;
140 +}
141 +
142 +
143 +
144 +#section03 a {
145 + padding-top: 60px;
146 +}
147 +#section03 a span {
148 + position: absolute;
149 + top: 0;
150 + left: 50%;
151 + width: 46px;
152 + height: 46px;
153 + margin-left: -23px;
154 + border: 1px solid #fff;
155 + border-radius: 100%;
156 + box-sizing: border-box;
157 +}
158 +#section03 a span::after {
159 + position: absolute;
160 + top: 50%;
161 + left: 50%;
162 + content: '';
163 + width: 16px;
164 + height: 16px;
165 + margin: -12px 0 0 -8px;
166 + border-left: 1px solid #fff;
167 + border-bottom: 1px solid #fff;
168 + -webkit-transform: rotate(-45deg);
169 + transform: rotate(-45deg);
170 + box-sizing: border-box;
171 +}
172 +#section03 a span::before {
173 + position: absolute;
174 + top: 0;
175 + left: 0;
176 + z-index: -1;
177 + content: '';
178 + width: 44px;
179 + height: 44px;
180 + box-shadow: 0 0 0 0 rgba(255,255,255,.1);
181 + border-radius: 100%;
182 + opacity: 0;
183 + -webkit-animation: sdb03 3s infinite;
184 + animation: sdb03 3s infinite;
185 + box-sizing: border-box;
186 +}
187 +@-webkit-keyframes sdb03 {
188 + 0% {
189 + opacity: 0;
190 + }
191 + 30% {
192 + opacity: 1;
193 + }
194 + 60% {
195 + box-shadow: 0 0 0 60px rgba(255,255,255,.1);
196 + opacity: 0;
197 + }
198 + 100% {
199 + opacity: 0;
200 + }
201 +}
202 +@keyframes sdb03 {
203 + 0% {
204 + opacity: 0;
205 + }
206 + 30% {
207 + opacity: 1;
208 + }
209 + 60% {
210 + box-shadow: 0 0 0 60px rgba(255,255,255,.1);
211 + opacity: 0;
212 + }
213 + 100% {
214 + opacity: 0;
215 + }
216 +}
217 +
218 +
219 +
220 +#section04 a {
221 + padding-top: 60px;
222 +}
223 +#section04 a span {
224 + position: absolute;
225 + top: 0;
226 + left: 50%;
227 + width: 24px;
228 + height: 24px;
229 + margin-left: -12px;
230 + border-left: 1px solid #fff;
231 + border-bottom: 1px solid #fff;
232 + -webkit-transform: rotate(-45deg);
233 + transform: rotate(-45deg);
234 + -webkit-animation: sdb04 2s infinite;
235 + animation: sdb04 2s infinite;
236 + box-sizing: border-box;
237 +}
238 +@-webkit-keyframes sdb04 {
239 + 0% {
240 + -webkit-transform: rotate(-45deg) translate(0, 0);
241 + }
242 + 20% {
243 + -webkit-transform: rotate(-45deg) translate(-10px, 10px);
244 + }
245 + 40% {
246 + -webkit-transform: rotate(-45deg) translate(0, 0);
247 + }
248 +}
249 +@keyframes sdb04 {
250 + 0% {
251 + transform: rotate(-45deg) translate(0, 0);
252 + }
253 + 20% {
254 + transform: rotate(-45deg) translate(-10px, 10px);
255 + }
256 + 40% {
257 + transform: rotate(-45deg) translate(0, 0);
258 + }
259 +}
260 +
261 +
262 +
263 +#section05 a {
264 + padding-top: 70px;
265 +}
266 +#section05 a span {
267 + position: absolute;
268 + top: 0;
269 + left: 50%;
270 + width: 24px;
271 + height: 24px;
272 + margin-left: -12px;
273 + border-left: 1px solid #fff;
274 + border-bottom: 1px solid #fff;
275 + -webkit-transform: rotate(-45deg);
276 + transform: rotate(-45deg);
277 + -webkit-animation: sdb05 1.5s infinite;
278 + animation: sdb05 1.5s infinite;
279 + box-sizing: border-box;
280 +}
281 +@-webkit-keyframes sdb05 {
282 + 0% {
283 + -webkit-transform: rotate(-45deg) translate(0, 0);
284 + opacity: 0;
285 + }
286 + 50% {
287 + opacity: 1;
288 + }
289 + 100% {
290 + -webkit-transform: rotate(-45deg) translate(-20px, 20px);
291 + opacity: 0;
292 + }
293 +}
294 +@keyframes sdb05 {
295 + 0% {
296 + transform: rotate(-45deg) translate(0, 0);
297 + opacity: 0;
298 + }
299 + 50% {
300 + opacity: 1;
301 + }
302 + 100% {
303 + transform: rotate(-45deg) translate(-20px, 20px);
304 + opacity: 0;
305 + }
306 +}
307 +
308 +
309 +
310 +#section06 a {
311 + padding-top: 70px;
312 +}
313 +#section06 a span {
314 + position: absolute;
315 + top: 0;
316 + left: 50%;
317 + width: 24px;
318 + height: 24px;
319 + margin-left: -12px;
320 + border-left: 1px solid #fff;
321 + border-bottom: 1px solid #fff;
322 + -webkit-transform: rotateZ(-45deg);
323 + transform: rotateZ(-45deg);
324 + -webkit-animation: sdb06 1.5s infinite;
325 + animation: sdb06 1.5s infinite;
326 + box-sizing: border-box;
327 +}
328 +@-webkit-keyframes sdb06 {
329 + 0% {
330 + -webkit-transform: rotateY(0) rotateZ(-45deg) translate(0, 0);
331 + opacity: 0;
332 + }
333 + 50% {
334 + opacity: 1;
335 + }
336 + 100% {
337 + -webkit-transform: rotateY(720deg) rotateZ(-45deg) translate(-20px, 20px);
338 + opacity: 0;
339 + }
340 +}
341 +@keyframes sdb06 {
342 + 0% {
343 + transform: rotateY(0) rotateZ(-45deg) translate(0, 0);
344 + opacity: 0;
345 + }
346 + 50% {
347 + opacity: 1;
348 + }
349 + 100% {
350 + transform: rotateY(720deg) rotateZ(-45deg) translate(-20px, 20px);
351 + opacity: 0;
352 + }
353 +}
354 +
355 +
356 +
357 +#section07 a {
358 + padding-top: 80px;
359 +}
360 +#section07 a span {
361 + position: absolute;
362 + top: 0;
363 + left: 50%;
364 + width: 24px;
365 + height: 24px;
366 + margin-left: -12px;
367 + border-left: 1px solid #fff;
368 + border-bottom: 1px solid #fff;
369 + -webkit-transform: rotate(-45deg);
370 + transform: rotate(-45deg);
371 + -webkit-animation: sdb07 2s infinite;
372 + animation: sdb07 2s infinite;
373 + opacity: 0;
374 + box-sizing: border-box;
375 +}
376 +#section07 a span:nth-of-type(1) {
377 + -webkit-animation-delay: 0s;
378 + animation-delay: 0s;
379 +}
380 +#section07 a span:nth-of-type(2) {
381 + top: 16px;
382 + -webkit-animation-delay: .15s;
383 + animation-delay: .15s;
384 +}
385 +#section07 a span:nth-of-type(3) {
386 + top: 32px;
387 + -webkit-animation-delay: .3s;
388 + animation-delay: .3s;
389 +}
390 +@-webkit-keyframes sdb07 {
391 + 0% {
392 + opacity: 0;
393 + }
394 + 50% {
395 + opacity: 1;
396 + }
397 + 100% {
398 + opacity: 0;
399 + }
400 +}
401 +@keyframes sdb07 {
402 + 0% {
403 + opacity: 0;
404 + }
405 + 50% {
406 + opacity: 1;
407 + }
408 + 100% {
409 + opacity: 0;
410 + }
411 +}
412 +
413 +
414 +
415 +#section08 a {
416 + padding-top: 60px;
417 +}
418 +#section08 a span {
419 + position: absolute;
420 + top: 0;
421 + left: 50%;
422 + width: 30px;
423 + height: 50px;
424 + margin-left: -15px;
425 + border: 2px solid #fff;
426 + border-radius: 50px;
427 + box-sizing: border-box;
428 +}
429 +#section08 a span::before {
430 + position: absolute;
431 + top: 10px;
432 + left: 50%;
433 + content: '';
434 + width: 6px;
435 + height: 6px;
436 + margin-left: -3px;
437 + background-color: #fff;
438 + border-radius: 100%;
439 + box-sizing: border-box;
440 +}
441 +
442 +
443 +
444 +#section09 a {
445 + padding-top: 80px;
446 +}
447 +#section09 a span {
448 + position: absolute;
449 + top: 0;
450 + left: 50%;
451 + width: 30px;
452 + height: 50px;
453 + margin-left: -15px;
454 + border: 2px solid #fff;
455 + border-radius: 50px;
456 + box-sizing: border-box;
457 +}
458 +#section09 a span::before {
459 + position: absolute;
460 + top: 10px;
461 + left: 50%;
462 + content: '';
463 + width: 6px;
464 + height: 6px;
465 + margin-left: -3px;
466 + background-color: #fff;
467 + border-radius: 100%;
468 + box-sizing: border-box;
469 +}
470 +#section09 a span::after {
471 + position: absolute;
472 + bottom: -18px;
473 + left: 50%;
474 + width: 18px;
475 + height: 18px;
476 + content: '';
477 + margin-left: -9px;
478 + border-left: 1px solid #fff;
479 + border-bottom: 1px solid #fff;
480 + -webkit-transform: rotate(-45deg);
481 + transform: rotate(-45deg);
482 + box-sizing: border-box;
483 +}
484 +
485 +
486 +
487 +#section10 a {
488 + padding-top: 60px;
489 +}
490 +#section10 a span {
491 + position: absolute;
492 + top: 0;
493 + left: 50%;
494 + width: 30px;
495 + height: 50px;
496 + margin-left: -15px;
497 + border: 2px solid #fff;
498 + border-radius: 50px;
499 + box-sizing: border-box;
500 +}
501 +#section10 a span::before {
502 + position: absolute;
503 + top: 10px;
504 + left: 50%;
505 + content: '';
506 + width: 6px;
507 + height: 6px;
508 + margin-left: -3px;
509 + background-color: #fff;
510 + border-radius: 100%;
511 + -webkit-animation: sdb10 2s infinite;
512 + animation: sdb10 2s infinite;
513 + box-sizing: border-box;
514 +}
515 +@-webkit-keyframes sdb10 {
516 + 0% {
517 + -webkit-transform: translate(0, 0);
518 + opacity: 0;
519 + }
520 + 40% {
521 + opacity: 1;
522 + }
523 + 80% {
524 + -webkit-transform: translate(0, 20px);
525 + opacity: 0;
526 + }
527 + 100% {
528 + opacity: 0;
529 + }
530 +}
531 +@keyframes sdb10 {
532 + 0% {
533 + transform: translate(0, 0);
534 + opacity: 0;
535 + }
536 + 40% {
537 + opacity: 1;
538 + }
539 + 80% {
540 + transform: translate(0, 20px);
541 + opacity: 0;
542 + }
543 + 100% {
544 + opacity: 0;
545 + }
546 +} */
547 +/* 배경스크롤 */
548 +
549 +
550 +
551 +
552 +
553 +
554 +
555 +/* 메세지 버블 */
556 +/* body {
557 + font-family: "Helvetica Neue";
558 + font-size: 20px;
559 + font-weight: normal;
560 +} */
561 +/*
562 +section {
563 + max-width: 450px;
564 + margin: 50px auto;
565 +} */
566 +section div {
567 + max-width: 255px;
568 + word-wrap: break-word;
569 + margin-bottom: 20px;
570 + line-height: 24px;
571 +}
572 +
573 +.clear {
574 + clear: both;
575 +}
576 +
577 +.from-me {
578 + position: relative;
579 + padding: 10px 20px;
580 + color: white;
581 + background: #0B93F6;
582 + border-radius: 25px;
583 + float: right;
584 + right: 400px;
585 +}
586 +.from-me:before {
587 + content: "";
588 + position: absolute;
589 + z-index: -1;
590 + bottom: -2px;
591 + right: -7px;
592 + height: 20px;
593 + border-right: 20px solid #0B93F6;
594 + border-bottom-left-radius: 16px 14px;
595 + -webkit-transform: translate(0, -2px);
596 +}
597 +.from-me:after {
598 + content: "";
599 + position: absolute;
600 + z-index: 1;
601 + bottom: -2px;
602 + right: -56px;
603 + width: 26px;
604 + height: 20px;
605 + background: white;
606 + border-bottom-left-radius: 10px;
607 + -webkit-transform: translate(-30px, -2px);
608 +}
609 +
610 +.from-them {
611 + position: relative;
612 + padding: 10px 20px;
613 + background: #E5E5EA;
614 + border-radius: 25px;
615 + color: black;
616 + float: left;
617 + left: 400px;
618 +}
619 +.from-them:before {
620 + content: "";
621 + position: absolute;
622 + z-index: 2;
623 + bottom: -2px;
624 + left: -7px;
625 + height: 20px;
626 + border-left: 20px solid #E5E5EA;
627 + border-bottom-right-radius: 16px 14px;
628 + -webkit-transform: translate(0, -2px);
629 +}
630 +.from-them:after {
631 + content: "";
632 + position: absolute;
633 + z-index: 3;
634 + bottom: -2px;
635 + left: 4px;
636 + width: 26px;
637 + height: 20px;
638 + background: white;
639 + border-bottom-right-radius: 10px;
640 + -webkit-transform: translate(-30px, -2px);
641 +}
642 +/* 메세지 버블 */
643 +
644 +
645 +
646 +
647 +/* text fade in */
648 +@import url(https://fonts.googleapis.com/css?family=Raleway:400,900,500,600,700);
649 +
650 +.animated{
651 + -webkit-animation-fill-mode:both;
652 + -webkit-animation-duration:2s;
653 + animation-duration:2s;
654 +}
655 +.animated2{
656 + animation-delay:.5s;
657 + -webkit-animation-delay:.5s;
658 + -webkit-animation-fill-mode:both;
659 + -webkit-animation-duration:2s;
660 + animation-duration:2s;
661 +}
662 +@-webkit-keyframes fadeOutUp {
663 + 0% {
664 + opacity: 0;
665 + -webkit-transform: translateY(1);
666 + -webkit-transform: translateY(40px);
667 + } 100% {
668 + opacity: 1;
669 + }
670 +}
671 +
672 +.fadeOutUp {
673 + -webkit-animation-name: fadeOutUp;
674 + animation-name: fadeOutUp;
675 +}
676 +
677 +.fadeIn {
678 + -webkit-animation-name: fadeIn;
679 + animation-name: fadeIn;
680 +}
681 +
682 +@-webkit-keyframes fadeIn {
683 + 0%{
684 + opacity: 0;
685 + -webkit-transform: translateY(1);
686 + -webkit-transform: translateY(40px);
687 + }
688 + 100% {
689 + opacity: 1;
690 + }
691 +}
692 +/* text fade in */
693 +
694 +
...@@ -4,127 +4,110 @@ ...@@ -4,127 +4,110 @@
4 <head> 4 <head>
5 <meta charset="UTF-8"> 5 <meta charset="UTF-8">
6 <title>EMOJI-HUMAN</title> 6 <title>EMOJI-HUMAN</title>
7 - <link rel="stylesheet" href="/EMO-SSAGE/EMO-SSAGE.css"> 7 + <link rel="stylesheet" href="/index.css">
8 + <!-- <link rel="stylesheet" href="/EMO-SSAGE/EMO-SSAGE.css"> -->
9 + <link rel="stylesheet" href="/EMO-SSAGE/emossage.css">
8 <script src="/EMO-SSAGE/emossage.js" type="text/javascript"></script> 10 <script src="/EMO-SSAGE/emossage.js" type="text/javascript"></script>
9 <link rel="icon" type="image/x-icon" href="/src/rainbow_1f308.png"> 11 <link rel="icon" type="image/x-icon" href="/src/rainbow_1f308.png">
12 + <meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
10 <style> 13 <style>
11 - /* body { 14 +
12 - background-image: url("emossage-03.png"); 15 +
13 - background-repeat: no-repeat; 16 + body {
14 - background-size: 100%;
15 font-family: Noto Sans KR, regular; 17 font-family: Noto Sans KR, regular;
16 text-align: center; 18 text-align: center;
17 } 19 }
18 - 20 + h1 {font-size: 50px;}
19 - h1 { 21 + p1 {font-size: 24px;}
20 - font-size: 50px; 22 + p2 {font-size: 14px}
21 - } 23 + p2.small {line-height: 0.7;}
22 - 24 + </style>
23 - p1 { 25 + <div style="height: 100px; overflow: auto">
24 - font-size: 24px; 26 + </div>
25 - } 27 +
26 - 28 +
27 - p2 {
28 - font-size: 14px
29 - }
30 -
31 - p2.small {
32 - line-height: 0.7;
33 - } */
34 - </style>
35 - <div style="height: 100px; overflow: auto">
36 - </div>
37 -
38 -
39 </head> 29 </head>
40 30
41 -<body> 31 +<body style="margin: 0 auto">
42 - 32 +<!-- 큰 묶음은 배경임 -->
43 - <!-- 내비게이션 --> 33 +<div id="gradient-bg">
44 - <link rel="stylesheet" href="/external/bootstrap.min.css"><!--bootstrap--> 34 + <!-- 내비게이션 -->
45 - <!--css link--> 35 + <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><!--bootstrap-->
46 - <link rel="stylesheet" href="/external/font-awesome.min.css"><!--for icons--> 36 + <!--css link-->
47 - <script src="/external/ajax/jquery.min.js"></script><!--jquery script--> 37 + <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><!--for icons-->
48 - <script src="/external/bootstrap/bootstrap.min.js"></script><!--bootstrap script--> 38 + <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><!--jquery script-->
49 - 39 + <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><!--bootstrap script-->
50 - <body id="page-top"> 40 +
51 - <!--creating a navigation bar--> 41 + <body id="page-top">
52 - <nav id="main-nav" class="navbar navbar-default navbar-fixed-top navbar-custom"><!--navigation bar with default view fixed on top specific class nav-bar custom--> 42 + <!--creating a navigation bar-->
53 - <div class="container"><!--gives padding of 16px on LHS and RHS--> 43 + <nav id="main-nav" class="navbar navbar-default navbar-fixed-top navbar-custom"><!--navigation bar with default view fixed on top specific class nav-bar custom-->
54 - <div class="navbar-header page-scroll"><!--navigation bar header having proprty to scroll --> 44 + <div class="container"><!--gives padding of 16px on LHS and RHS-->
55 - <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 45 + <div class="navbar-header page-scroll"><!--navigation bar header having proprty to scroll -->
56 - <span></span> Menu <i class="fa fa-bars"></i> 46 + <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
57 - </button> 47 + <span></span> Menu <i class="fa fa-bars"></i>
58 - </div><!--end of button--> 48 + </button>
59 - <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><!--to collapse--> 49 + </div><!--end of button-->
60 - <ul class="nav navbar-nav"> 50 + <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><!--to collapse-->
61 - <li><a href="/index.html">Home</a></li> 51 + <ul class="nav navbar-nav">
62 - </ul> 52 + <li><a href="/index.html">Home</a></li>
63 - <ul class="nav navbar-nav navbar-right page-scroll"><!--second UL to go to right having proprty to scroll page--> 53 + </ul>
64 - <li> <a href="/About Us/About Us.html">About Us</a></li> 54 + <ul class="nav navbar-nav navbar-right page-scroll"><!--second UL to go to right having proprty to scroll page-->
65 - <li><a href="/EMOJI-HUMAN/EMOJI-HUMAN.html">EMOJI-HUMAN</a></li> 55 + <li> <a href="/About Us/About Us.html">About Us</a></li>
66 - <li><a href="/EMO-TI/EMO-TI.html">EMO-TI</a></li> 56 + <li><a href="/EMOJI-HUMAN/EMOJI-HUMAN.html">EMOJI-HUMAN</a></li>
67 - <li><a href="/EMO-SSAGE/EMO-SSAGE.html">EMO-SSAGE</a></li> 57 + <li><a href="/EMO-TI/EMO-TI.html">EMO-TI</a></li>
68 - </ul> 58 + <li><a href="/EMO-SSAGE/EMO-SSAGE.html">EMO-SSAGE</a></li>
69 - </div><!--end of collapse--> 59 + </ul>
70 - </div> 60 + </div>
71 - </nav> 61 + </div>
72 - <!-- 내비게이션 --> 62 + </nav>
73 - 63 + <!-- 내비게이션 -->
74 - 64 +
75 -
76 65
77 - <form action="#"> 66 +<body>
78 - 67 + <form action="#">
79 - <!-- <header>
80 - <h1>Message + EMOJI<span>= Emossage</span></h1>
81 - <p1>Emoti는 이모지 중심 메세지입니다</p1>
82 - <br>
83 - <p2>
84 - <p class="small"> 글자 중 일부가 이모지로 변환됩니다.<br>
85 - 여러분만의 이모지 편지를 적어보세요<br>
86 - </p2>
87 - </p>
88 - </header> -->
89 68
90 - <p id="p1" class="animated fadeOutUp">Message + EMOJI<span>= Emossage</p> 69 + <header>
91 - <br> 70 + <h1>Message + EMOJI<span>= Emossage</span></h1>
92 - <p id="p2" class="animated fadeOutUp">Emoti는 이모지 중심 메세지입니다</p> 71 + <p1>Emoti는 이모지 중심 메세지입니다</p1>
93 -
94 - <br>
95 <br> 72 <br>
96 - <br> 73 + <p2>
97 - <p id="p3" class="animated2 fadeIn">글자 중 일부가 이모지로 변환됩니다.</p> 74 + <p class="small"> 글자 중 일부가 이모지로 변환됩니다.<br>
98 - <p id="p4" class="animated2 fadeIn">여러분만의 이모지 편지를 적어보세요</p> 75 + 여러분만의 이모지 편지를 적어보세요<br> </p2>
76 + </p>
77 + </header>
78 +
79 + <div>
80 + <label class="desc" id="title1" for="Field1">Full Name</label>
81 + <div>
82 + <input id="Field1" name="Field1" type="text" class="field text fn" value="" size="8" tabindex="1">
83 + </div>
84 + </div>
85 +
86 + <div>
87 + <label class="desc" id="title3" for="Field3">
88 + Email
89 + </label>
90 + <div>
91 + <input id="Field3" name="Field3" type="email" spellcheck="false" value="" maxlength="255" tabindex="3">
92 + </div>
93 + </div>
94 +
95 + <div>
96 + <label class="desc" id="title4" for="Field4">
97 + Message
98 + </label>
99 +
100 + <div>
101 + <textarea id="Field4" name="Field4" spellcheck="true" rows="10" cols="50" tabindex="4"></textarea>
102 + </div>
103 +
104 + <div>
105 + <input id="saveForm" name="saveForm" type="submit" value="Submit">
106 + </div>
107 + </div>
108 +
109 + </form>
110 +
111 +
99 112
100 -
101 - <br>
102 - <br>
103 - <br>
104 - <br>
105 - <div style="position: relative; left: 37.5%; top: 50%;">
106 - <label class="desc" id="title4" for="Field4">
107 - Message
108 - </label>
109 -
110 - <div>
111 - <textarea style="resize: none;" id="Field4" name="Field4" placeholder="이모지로 변환할 문장을 입력해보세요!" spellcheck="true" rows="10" cols="50" tabindex="4"></textarea>
112 - </div>
113 -
114 - <div>
115 - <button type="button" onclick="convertToEmoji()">Submit</button>
116 - </div>
117 - </div>
118 -
119 - <div style="position: relative; left: 37.5%; top: 50%;">
120 - <label class="desc" id="title5" for="Field5">
121 - Result
122 - </label>
123 -
124 - <div>
125 - <textarea style="resize: none;" id="Field5" name="Field5" readonly spellcheck="true" rows="10" cols="50" tabindex="4"></textarea>
126 - </div>
127 - </div>
128 -
129 - </form>
130 </body> 113 </body>
...\ No newline at end of file ...\ No newline at end of file
......
1 +/*-----------배경 그라디언트-----------*/
2 +#gradient-bg{
3 + width: 100%;
4 + height: 100vh;
5 + background: rgb(255, 255, 255);
6 + background-image:
7 + radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(243, 97, 155, 0) 80%),
8 + radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 40%),
9 + radial-gradient(circle farthest-corner at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 50%),
10 + radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 100%);
11 + animation: colorChange 6s infinite alternate-reverse;
12 +}
13 +
14 +@keyframes colorChange {
15 + 100% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 100%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 100%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 100%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 100%);}
16 + 99% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 99.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 99.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 99.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 99.5%);}
17 + 98% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 99%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 99%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 99%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 99%);}
18 + 97% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 98.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 98.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 98.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 98.5%);}
19 + 96% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 98%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 98%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 98%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 98%);}
20 + 95% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 97.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 97.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 97.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 97.5%);}
21 + 94% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 97%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 97%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 97%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 97%);}
22 + 93% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 96.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 96.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 96.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 96.5%);}
23 + 92% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 96%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 96%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 96%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 96%);}
24 + 91% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 95.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 95.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 95.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 95.5%);}
25 + 90% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 95%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 95%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 95%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 95%);}
26 + 89% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 94.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 94.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 94.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 94.5%);}
27 + 88% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 94%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 94%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 94%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 94%);}
28 + 87% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 93.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 93.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 93.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 93.5%);}
29 + 86% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 93%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 93%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 93%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 93%);}
30 + 85% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 92.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 92.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 92.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 92.5%);}
31 + 84% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 92%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 92%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 92%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 92%);}
32 + 83% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 91.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 91.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 91.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 91.5%);}
33 + 82% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 91%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 91%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 91%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 91%);}
34 + 81% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 90.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 90.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 90.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 90.5%);}
35 + 80% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 90%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 90%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 90%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 90%);}
36 + 79% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 89.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 89.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 89.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 89.5%);}
37 + 78% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 89%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 89%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 89%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 89%);}
38 + 77% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 88.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 88.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 88.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 88.5%);}
39 + 76% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 88%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 88%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 88%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 88%);}
40 + 75% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 87.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 87.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 87.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 87.5%);}
41 + 74% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 87%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 87%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 87%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 87%);}
42 + 73% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 86.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 86.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 86.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 86.5%);}
43 + 72% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 86%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 86%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 86%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 86%);}
44 + 71% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 85.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 85.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 85.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 85.5%);}
45 + 70% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 85%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 85%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 85%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 85%);}
46 + 69% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 84.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 84.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 84.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 84.5%);}
47 + 68% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 84%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 84%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 84%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 84%);}
48 + 67% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 83.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 83.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 83.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 83.5%);}
49 + 66% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 83%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 83%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 83%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 83%);}
50 + 65% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 82.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 82.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 82.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 82.5%);}
51 + 64% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 82%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 82%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 82%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 82%);}
52 + 63% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 81.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 81.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 81.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 81.5%);}
53 + 62% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 81%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 81%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 81%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 81%);}
54 + 61% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 80.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 80.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 80.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 80.5%);}
55 + 60% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 80%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 80%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 80%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 80%);}
56 + 59% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 79.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 79.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 79.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 79.5%);}
57 + 58% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 79%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 79%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 79%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 79%);}
58 + 57% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 78.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 78.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 78.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 78.5%);}
59 + 56% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 78%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 78%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 78%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 78%);}
60 + 55% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 77.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 77.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 77.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 77.5%);}
61 + 54% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 77%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 77%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 77%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 77%);}
62 + 53% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 76.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 76.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 76.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 76.5%);}
63 + 52% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 76%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 76%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 76%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 76%);}
64 + 51% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 75.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 75.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 75.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 75.5%);}
65 + 50% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 75%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 75%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 75%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 75%);}
66 + 49% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 74.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 74.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 74.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 74.5%);}
67 + 48% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 74%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 74%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 74%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 74%);}
68 + 47% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 73.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 73.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 73.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 73.5%);}
69 + 46% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 73%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 73%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 73%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 73%);}
70 + 45% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 72.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 72.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 72.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 72.5%);}
71 + 44% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 72%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 72%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 72%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 72%);}
72 + 43% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 71.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 71.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 71.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 71.5%);}
73 + 42% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 71%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 71%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 71%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 71%);}
74 + 41% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 70.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 70.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 70.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 70.5%);}
75 + 40% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 70%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 70%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 70%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 70%);}
76 + 39% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 69.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 69.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 69.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 69.5%);}
77 + 38% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 69%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 69%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 69%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 69%);}
78 + 37% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 68.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 68.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 68.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 68.5%);}
79 + 36% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 68%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 68%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 68%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 68%);}
80 + 35% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 67.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 67.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 67.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 67.5%);}
81 + 34% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 67%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 67%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 67%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 67%);}
82 + 33% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 66.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 66.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 66.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 66.5%);}
83 + 32% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 66%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 66%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 66%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 66%);}
84 + 31% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 65.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 65.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 65.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 65.5%);}
85 + 30% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 65%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 65%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 65%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 65%);}
86 + 29% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 64.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 64.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 64.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 64.5%);}
87 + 28% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 64%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 64%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 64%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 64%);}
88 + 27% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 63.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 63.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 63.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 63.5%);}
89 + 26% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 63%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 63%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 63%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 63%);}
90 + 25% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 62.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 62.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 62.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 62.5%);}
91 + 24% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 62%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 62%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 62%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 62%);}
92 + 23% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 61.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 61.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 61.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 61.5%);}
93 + 22% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 61%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 61%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 61%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 61%);}
94 + 21% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 60.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 60.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 60.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 60.5%);}
95 + 20% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 60%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 60%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 60%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 60%);}
96 + 19% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 59.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 59.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 59.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 59.5%);}
97 + 18% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 59%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 59%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 59%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 59%);}
98 + 17% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 58.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 58.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 58.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 58.5%);}
99 + 16% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 58%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 58%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 58%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 58%);}
100 + 15% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 57.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 57.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 57.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 57.5%);}
101 + 14% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 57%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 57%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 57%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 57%);}
102 + 13% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 56.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 56.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 56.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 56.5%);}
103 + 12% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 56%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 56%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 56%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 56%);}
104 + 11% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 55.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 55.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 55.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 55.5%);}
105 + 10% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 55%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 55%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 55%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 55%);}
106 + 9% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 54.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 54.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 54.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 54.5%);}
107 + 8% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 54%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 54%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 54%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 54%);}
108 + 7% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 53.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 53.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 53.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 53.5%);}
109 + 6% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 53%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 53%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 53%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 53%);}
110 + 5% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 52.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 52.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 52.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 52.5%);}
111 + 4% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 52%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 52%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 52%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 52%);}
112 + 3% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 51.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 51.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 51.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 51.5%);}
113 + 2% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 51%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 51%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 51%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 51%);}
114 + 1% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 50.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 50.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 50.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 50.5%);}
115 + 0% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 50%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 50%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 50%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 50%);}
116 +}
117 +/*-----------배경 그라디언트-----------*/
118 +
119 +
1 * { 120 * {
2 -webkit-box-sizing: border-box; 121 -webkit-box-sizing: border-box;
3 -moz-box-sizing: border-box; 122 -moz-box-sizing: border-box;
......
...@@ -248,7 +248,7 @@ img { ...@@ -248,7 +248,7 @@ img {
248 248
249 /* 내비 */ 249 /* 내비 */
250 body { 250 body {
251 - font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif; 251 + font-family: Noto Sans Kr, Bold;
252 overflow-x: hidden; 252 overflow-x: hidden;
253 } 253 }
254 .center 254 .center
...@@ -269,7 +269,7 @@ a:active,{ ...@@ -269,7 +269,7 @@ a:active,{
269 h2, 269 h2,
270 h3, 270 h3,
271 { 271 {
272 - font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif; 272 + font-family: Noto Sans Kr, Bold;
273 text-transform: uppercase; 273 text-transform: uppercase;
274 font-weight: 700; 274 font-weight: 700;
275 font-size: 30px; 275 font-size: 30px;
...@@ -318,7 +318,7 @@ header .container { ...@@ -318,7 +318,7 @@ header .container {
318 } 318 }
319 header .intro .name { 319 header .intro .name {
320 display: block; 320 display: block;
321 - font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif; 321 + font-family: Noto Sans Kr, Bold;
322 text-transform: uppercase; 322 text-transform: uppercase;
323 font-weight: 700; 323 font-weight: 700;
324 font-size: 2em; 324 font-size: 2em;
...@@ -341,7 +341,7 @@ header .intro .skills { ...@@ -341,7 +341,7 @@ header .intro .skills {
341 } 341 }
342 .navbar-custom { 342 .navbar-custom {
343 background: #2C3E50; 343 background: #2C3E50;
344 - font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif; 344 + font-family: Noto Sans Kr, Bold;
345 text-transform: uppercase; 345 text-transform: uppercase;
346 font-weight: 700; 346 font-weight: 700;
347 border: none; 347 border: none;
...@@ -433,7 +433,7 @@ body { ...@@ -433,7 +433,7 @@ body {
433 433
434 434
435 /* text fade in */ 435 /* text fade in */
436 -@import url(/external/raleway); 436 +@import url(https://fonts.googleapis.com/css?family=Raleway:400,900,500,600,700);
437 437
438 .animated{ 438 .animated{
439 -webkit-animation-fill-mode:both; 439 -webkit-animation-fill-mode:both;
...@@ -480,10 +480,6 @@ body { ...@@ -480,10 +480,6 @@ body {
480 /* text fade in */ 480 /* text fade in */
481 481
482 482
483 -
484 -
485 -
486 -
487 /* 텍스트 */ 483 /* 텍스트 */
488 #p1 { 484 #p1 {
489 font-size: 50px; 485 font-size: 50px;
......
1 +:root {
2 + --FACE_WIDTH: 450px;
3 + --FACE_HEIGHT: 450px;
4 + --SHINE_WIDTH: calc(calc(194/230) * var(--FACE_WIDTH));
5 + --SHINE_HEIGHT: calc(calc(206/230) * var(--FACE_HEIGHT));
6 + --EYE_WIDTH: calc(calc(24/230) * var(--FACE_WIDTH));
7 + --EYE_HEIGHT: calc(calc(38/230) * var(--FACE_HEIGHT));
8 + --EYE_LEFT_RIGHT: calc(calc(70/230) * var(--FACE_WIDTH));
9 + --EYE_LEFT_BOTTOM: calc(calc(40/230) * var(--FACE_HEIGHT));
10 + --EYE_RIGHT_BOTTOM: calc(calc(40/230) * var(--FACE_HEIGHT));
11 + --EYE_RIGHT_LEFT: calc(calc(70/230) * var(--FACE_WIDTH));
12 + --MOUTH_TOP: calc(calc(88/230) * var(--FACE_HEIGHT));
13 + --MOUTH_WIDTH: calc(calc(94/230) * var(--FACE_WIDTH));
14 + --MOUTH_HEIGHT: calc(calc(48/230) * var(--FACE_HEIGHT));
15 + --MOUTH_BEFORE_BOTTOM: calc(calc(10/230) * var(--FACE_HEIGHT));
16 + --MOUTH_AFTER_BOTTOM: calc(calc(26/230) * var(--FACE_HEIGHT));
17 +}
18 +
19 +/* 이모지 얼굴 */
20 +body {
21 + display: flex;
22 + align-items: center;
23 + justify-content: center;
24 + height: 100vh;
25 + }
26 +
27 + #emoji {
28 + position: relative;
29 + width: var(--FACE_WIDTH);
30 + height: var(--FACE_HEIGHT);
31 + transform: translate3d(0, 0, 0);
32 + }
33 +
34 + .layer {
35 + position: absolute;
36 + width: 100%;
37 + height: 100%;
38 + }
39 +
40 + .face {
41 + position: absolute;
42 + top: 0;
43 + right: 0;
44 + bottom: 0;
45 + left: 0;
46 + margin: auto;
47 + width: var(--FACE_WIDTH);
48 + height: var(--FACE_HEIGHT);
49 + background-color: #FECA32;
50 + border-radius: 100%;
51 + box-shadow: inset rgba(0, 0, 0, 0.4) 0 0 30px;
52 + }
53 +
54 + .shine {
55 + position: absolute;
56 + top: 0;
57 + right: 0;
58 + bottom: 0;
59 + left: 0;
60 + margin: auto;
61 + width: var(--SHINE_WIDTH);
62 + height: var(--SHINE_HEIGHT);
63 + background: linear-gradient(to bottom, #FFFFFF, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
64 + border-radius: 100%;
65 + opacity: 0.8;
66 + }
67 +
68 + .eye {
69 + width: var(--EYE_WIDTH);
70 + height: var(--EYE_HEIGHT);
71 + background-color: #A1620F;
72 + border-radius: 100%;
73 + box-shadow: inset rgba(0, 0, 0, 0.5) 0 6px 12px, rgba(255, 255, 255, 0.2) 0 2px 0 2px;
74 + -webkit-animation: blink 5s infinite;
75 + animation: blink 5s infinite;
76 + }
77 + .eye.left {
78 + position: absolute;
79 + top: 0;
80 + right: var(--EYE_LEFT_RIGHT);
81 + bottom: var(--EYE_LEFT_BOTTOM);
82 + left: 0;
83 + margin: auto;
84 + }
85 + .eye.right {
86 + position: absolute;
87 + top: 0;
88 + right: 0;
89 + bottom: var(--EYE_RIGHT_BOTTOM);
90 + left: var(--EYE_RIGHT_LEFT);
91 + margin: auto;
92 + }
93 +
94 + .mouth {
95 + position: absolute;
96 + top: var(--MOUTH_TOP);
97 + right: 0;
98 + bottom: 0;
99 + left: 0;
100 + margin: auto;
101 + overflow: hidden;
102 + width: var(--MOUTH_WIDTH);
103 + height: var(--MOUTH_HEIGHT);
104 + transform: translate3d(0, 0, 0);
105 + }
106 + .mouth:before {
107 + position: absolute;
108 + top: 0;
109 + right: 0;
110 + bottom: var(--MOUTH_BEFORE_BOTTOM);
111 + left: 0;
112 + margin: auto;
113 + content: "";
114 + width: 100%;
115 + height: 100%;
116 + background-color: #6E440B;
117 + border-radius: 100%;
118 + box-shadow: rgba(255, 255, 255, 0.25) 0 3px 0;
119 + transform: scale(1);
120 + }
121 + .mouth:after {
122 + position: absolute;
123 + top: 0;
124 + right: 0;
125 + bottom: var(--MOUTH_AFTER_BOTTOM);
126 + left: 0;
127 + margin: auto;
128 + content: "";
129 + width: calc(100% - 20px);
130 + height: 100%;
131 + background-color: #FECA32;
132 + border-radius: 100%;
133 + box-shadow: rgba(0, 0, 0, 0.8) 0 4px 4px -4px;
134 + transform-origin: 50% 100%;
135 + transform: scale(1.6);
136 + }
137 +
138 + @-webkit-keyframes blink {
139 + 0%, 96% {
140 + transform: scaleY(1);
141 + }
142 + 98% {
143 + transform: scaleY(0.1);
144 + }
145 + 100% {
146 + transform: scaleY(1);
147 + }
148 + }
149 +
150 + @keyframes blink {
151 + 0%, 96% {
152 + transform: scaleY(1);
153 + }
154 + 98% {
155 + transform: scaleY(0.1);
156 + }
157 + 100% {
158 + transform: scaleY(1);
159 + }
160 + }
161 + /* 이모지 얼굴 */
162 +
1 /* 내비 */ 163 /* 내비 */
2 body { 164 body {
3 - font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif; 165 + font-family: Noto Sans Kr, Bold;
4 overflow-x: hidden; 166 overflow-x: hidden;
5 } 167 }
6 .center 168 .center
...@@ -21,7 +183,7 @@ a:active { ...@@ -21,7 +183,7 @@ a:active {
21 h2, 183 h2,
22 h3 184 h3
23 { 185 {
24 - font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif; 186 + font-family: Noto Sans Kr, Bold;
25 text-transform: uppercase; 187 text-transform: uppercase;
26 font-weight: 700; 188 font-weight: 700;
27 font-size: 30px; 189 font-size: 30px;
...@@ -70,7 +232,7 @@ header .container { ...@@ -70,7 +232,7 @@ header .container {
70 } 232 }
71 header .intro .name { 233 header .intro .name {
72 display: block; 234 display: block;
73 - font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif; 235 + font-family: Noto Sans Kr, Bold;
74 text-transform: uppercase; 236 text-transform: uppercase;
75 font-weight: 700; 237 font-weight: 700;
76 font-size: 2em; 238 font-size: 2em;
...@@ -93,7 +255,7 @@ header .intro .skills { ...@@ -93,7 +255,7 @@ header .intro .skills {
93 } 255 }
94 .navbar-custom { 256 .navbar-custom {
95 background: #2C3E50; 257 background: #2C3E50;
96 - font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif; 258 + font-family: Noto Sans Kr, Bold;
97 text-transform: uppercase; 259 text-transform: uppercase;
98 font-weight: 700; 260 font-weight: 700;
99 border: none; 261 border: none;
......
...@@ -116,171 +116,11 @@ ...@@ -116,171 +116,11 @@
116 } 116 }
117 /*-----------배경 그라디언트-----------*/ 117 /*-----------배경 그라디언트-----------*/
118 118
119 -:root {
120 - --FACE_WIDTH: 450px;
121 - --FACE_HEIGHT: 450px;
122 - --SHINE_WIDTH: calc(calc(194/230) * var(--FACE_WIDTH));
123 - --SHINE_HEIGHT: calc(calc(206/230) * var(--FACE_HEIGHT));
124 - --EYE_WIDTH: calc(calc(24/230) * var(--FACE_WIDTH));
125 - --EYE_HEIGHT: calc(calc(38/230) * var(--FACE_HEIGHT));
126 - --EYE_LEFT_RIGHT: calc(calc(70/230) * var(--FACE_WIDTH));
127 - --EYE_LEFT_BOTTOM: calc(calc(40/230) * var(--FACE_HEIGHT));
128 - --EYE_RIGHT_BOTTOM: calc(calc(40/230) * var(--FACE_HEIGHT));
129 - --EYE_RIGHT_LEFT: calc(calc(70/230) * var(--FACE_WIDTH));
130 - --MOUTH_TOP: calc(calc(88/230) * var(--FACE_HEIGHT));
131 - --MOUTH_WIDTH: calc(calc(94/230) * var(--FACE_WIDTH));
132 - --MOUTH_HEIGHT: calc(calc(48/230) * var(--FACE_HEIGHT));
133 - --MOUTH_BEFORE_BOTTOM: calc(calc(10/230) * var(--FACE_HEIGHT));
134 - --MOUTH_AFTER_BOTTOM: calc(calc(26/230) * var(--FACE_HEIGHT));
135 -}
136 119
137 -/* 이모지 얼굴 */
138 -body {
139 - display: flex;
140 - align-items: center;
141 - justify-content: center;
142 - height: 100vh;
143 - }
144 -
145 - #emoji {
146 - position: relative;
147 - width: var(--FACE_WIDTH);
148 - height: var(--FACE_HEIGHT);
149 - transform: translate3d(0, 0, 0);
150 - }
151 -
152 - .layer {
153 - position: absolute;
154 - width: 100%;
155 - height: 100%;
156 - }
157 -
158 - .face {
159 - position: absolute;
160 - top: 0;
161 - right: 0;
162 - bottom: 0;
163 - left: 0;
164 - margin: auto;
165 - width: var(--FACE_WIDTH);
166 - height: var(--FACE_HEIGHT);
167 - background-color: #FECA32;
168 - border-radius: 100%;
169 - box-shadow: inset rgba(0, 0, 0, 0.4) 0 0 30px;
170 - }
171 -
172 - .shine {
173 - position: absolute;
174 - top: 0;
175 - right: 0;
176 - bottom: 0;
177 - left: 0;
178 - margin: auto;
179 - width: var(--SHINE_WIDTH);
180 - height: var(--SHINE_HEIGHT);
181 - background: linear-gradient(to bottom, #FFFFFF, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
182 - border-radius: 100%;
183 - opacity: 0.8;
184 - }
185 -
186 - .eye {
187 - width: var(--EYE_WIDTH);
188 - height: var(--EYE_HEIGHT);
189 - background-color: #A1620F;
190 - border-radius: 100%;
191 - box-shadow: inset rgba(0, 0, 0, 0.5) 0 6px 12px, rgba(255, 255, 255, 0.2) 0 2px 0 2px;
192 - -webkit-animation: blink 5s infinite;
193 - animation: blink 5s infinite;
194 - }
195 - .eye.left {
196 - position: absolute;
197 - top: 0;
198 - right: var(--EYE_LEFT_RIGHT);
199 - bottom: var(--EYE_LEFT_BOTTOM);
200 - left: 0;
201 - margin: auto;
202 - }
203 - .eye.right {
204 - position: absolute;
205 - top: 0;
206 - right: 0;
207 - bottom: var(--EYE_RIGHT_BOTTOM);
208 - left: var(--EYE_RIGHT_LEFT);
209 - margin: auto;
210 - }
211 -
212 - .mouth {
213 - position: absolute;
214 - top: var(--MOUTH_TOP);
215 - right: 0;
216 - bottom: 0;
217 - left: 0;
218 - margin: auto;
219 - overflow: hidden;
220 - width: var(--MOUTH_WIDTH);
221 - height: var(--MOUTH_HEIGHT);
222 - transform: translate3d(0, 0, 0);
223 - }
224 - .mouth:before {
225 - position: absolute;
226 - top: 0;
227 - right: 0;
228 - bottom: var(--MOUTH_BEFORE_BOTTOM);
229 - left: 0;
230 - margin: auto;
231 - content: "";
232 - width: 100%;
233 - height: 100%;
234 - background-color: #6E440B;
235 - border-radius: 100%;
236 - box-shadow: rgba(255, 255, 255, 0.25) 0 3px 0;
237 - transform: scale(1);
238 - }
239 - .mouth:after {
240 - position: absolute;
241 - top: 0;
242 - right: 0;
243 - bottom: var(--MOUTH_AFTER_BOTTOM);
244 - left: 0;
245 - margin: auto;
246 - content: "";
247 - width: calc(100% - 20px);
248 - height: 100%;
249 - background-color: #FECA32;
250 - border-radius: 100%;
251 - box-shadow: rgba(0, 0, 0, 0.8) 0 4px 4px -4px;
252 - transform-origin: 50% 100%;
253 - transform: scale(1.6);
254 - }
255 -
256 - @-webkit-keyframes blink {
257 - 0%, 96% {
258 - transform: scaleY(1);
259 - }
260 - 98% {
261 - transform: scaleY(0.1);
262 - }
263 - 100% {
264 - transform: scaleY(1);
265 - }
266 - }
267 -
268 - @keyframes blink {
269 - 0%, 96% {
270 - transform: scaleY(1);
271 - }
272 - 98% {
273 - transform: scaleY(0.1);
274 - }
275 - 100% {
276 - transform: scaleY(1);
277 - }
278 - }
279 - /* 이모지 얼굴 */
280 120
281 /* 내비 */ 121 /* 내비 */
282 body { 122 body {
283 - font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif; 123 + font-family: Noto Sans Kr, Bold;
284 overflow-x: hidden; 124 overflow-x: hidden;
285 } 125 }
286 .center 126 .center
...@@ -301,7 +141,7 @@ a:active,{ ...@@ -301,7 +141,7 @@ a:active,{
301 h2, 141 h2,
302 h3, 142 h3,
303 { 143 {
304 - font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif; 144 + font-family: Noto Sans Kr, Bold;
305 text-transform: uppercase; 145 text-transform: uppercase;
306 font-weight: 700; 146 font-weight: 700;
307 font-size: 30px; 147 font-size: 30px;
...@@ -350,7 +190,7 @@ header .container { ...@@ -350,7 +190,7 @@ header .container {
350 } 190 }
351 header .intro .name { 191 header .intro .name {
352 display: block; 192 display: block;
353 - font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif; 193 + font-family: Noto Sans Kr, Bold;
354 text-transform: uppercase; 194 text-transform: uppercase;
355 font-weight: 700; 195 font-weight: 700;
356 font-size: 2em; 196 font-size: 2em;
...@@ -373,7 +213,7 @@ header .intro .skills { ...@@ -373,7 +213,7 @@ header .intro .skills {
373 } 213 }
374 .navbar-custom { 214 .navbar-custom {
375 background: #2C3E50; 215 background: #2C3E50;
376 - font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif; 216 + font-family: Noto Sans Kr, Bold;
377 text-transform: uppercase; 217 text-transform: uppercase;
378 font-weight: 700; 218 font-weight: 700;
379 border: none; 219 border: none;
...@@ -444,7 +284,7 @@ body{ ...@@ -444,7 +284,7 @@ body{
444 width: 100%; 284 width: 100%;
445 height: 100vh; 285 height: 100vh;
446 background: #000; 286 background: #000;
447 - font-family: 'Oswald', sans-serif; 287 + font-family: Noto Sans Kr, Bold;
448 } 288 }
449 289
450 #text { 290 #text {
......
...@@ -45,30 +45,9 @@ ...@@ -45,30 +45,9 @@
45 </nav> 45 </nav>
46 <!-- 내비게이션 --> 46 <!-- 내비게이션 -->
47 47
48 - 48 + <div style="float: left; width: 100%;">
49 - <!-- 이모지 얼굴 --> 49 + <img src="/src/3d_crossword-01.png" style="display: block; margin: 0 auto; width: 750px; height:750px;">
50 - <div style="width: 100%; display: flex; justify-content: space-around; margin: 0; position: absolute; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: 2;">
51 - <ul id="emoji">
52 - <li class="layer" data-depth="0.2">
53 - <div class="face"></div>
54 - </li>
55 - <li class="layer" data-depth="0.3">
56 - <div class="shine"></div>
57 - </li>
58 - <li class="layer" data-depth="0.8">
59 - <div class="eye left"></div>
60 - </li>
61 - <li class="layer" data-depth="0.8">
62 - <div class="eye right"></div>
63 - </li>
64 - <li class="layer" data-depth="0.8">
65 - <div class="mouth"></div>
66 - </li>
67 - </ul>
68 -
69 - <script src='/external/ajax/parallax.min.js'></script><script src="/face.js"></script>
70 </div> 50 </div>
71 - <!-- 이모지 얼굴 -->
72 51
73 <!-- 이모지 레인 --> 52 <!-- 이모지 레인 -->
74 <div style="z-index: 1;"> 53 <div style="z-index: 1;">
......