송민겸 / EMOJI-HUMAN

Go to a project
Toggle navigation Toggle navigation pinning
rtdtbb8
bc5a7bc0 1 parent 4bf42aca

temp

Inline Side-by-side
Showing 21 changed files with 733 additions and 1528 deletions
1 +/*---------텍스트 부분---------*/
2 +#p1{
3 + font-size: 200%;
4 + color: rgb(235, 123, 123);
5 + font-family: Noto Sans KR;
6 + text-align: center;
7 +}
8 +#p2{
9 + font-size: 200%;
10 + color: rgb(235, 123, 123);
11 + font-family: Noto Sans KR;
12 + text-align: center;
13 +}
14 +#p3{
15 + font-size: 200%;
16 + color: rgb(235, 123, 123);
17 + font-family: Noto Sans KR;
18 + text-align: center;
19 +}
20 +#p4{
21 + font-size: 200%;
22 + color: rgb(235, 123, 123);
23 + font-family: Noto Sans KR;
24 + text-align: center;
25 +}
26 +#p5{
27 + font-size: 200%;
28 + color: rgb(235, 123, 123);
29 + font-family: Noto Sans KR;
30 + text-align: center;
31 +}
32 +/*---------텍스트 부분---------*/
33 +
34 +
35 +/*---------버튼 부분---------*/
36 +@keyframes fall {
37 + from {
38 + top: -10px;
39 + -webkit-transform: rotate(0);
40 + -moz-transform: rotate(0);
41 + -ms-transform: rotate(0);
42 + -o-transform: rotate(0);
43 + transform: rotate(0);
44 + }
45 + to {
46 + top: 110vh;
47 + -webkit-transform: rotate(360deg);
48 + -moz-transform: rotate(360deg);
49 + -ms-transform: rotate(360deg);
50 + -o-transform: rotate(360deg);
51 + transform: rotate(360deg);
52 + }
53 + }
54 + .confetti {
55 + position: absolute;
56 + -webkit-transition: all 0.1s ease;
57 + -moz-transition: all 0.1s ease;
58 + transition: all 0.1s ease;
59 + pointer-events: none;
60 + width: 10px;
61 + height: 10px;
62 + font-size: 25px;
63 + animation: fall 2s cubic-bezier(0.05, 0.46, 1, 1);
64 + }
65 +
66 + .mui-button {
67 + position: relative;
68 + padding: 0;
69 + margin: 0;
70 + width: 150px;
71 + height: 50px;
72 + border: none;
73 + background: #F85F73;
74 + color: #FBE8D3;
75 + box-shadow: 0 0 10px 0.5px rgba(0, 0, 0, 0);
76 + -webkit-transition: all 0.15s linear;
77 + -moz-transition: all 0.15s linear;
78 + transition: all 0.15s linear;
79 + }
80 + .mui-button:hover {
81 + box-shadow: 0 0 10px 0.5px rgba(0, 0, 0, 0.2);
82 + -webkit-transform: scale(0.98);
83 + -moz-transform: scale(0.98);
84 + -ms-transform: scale(0.98);
85 + -o-transform: scale(0.98);
86 + transform: scale(0.98);
87 + background: #ec5a6d;
88 + cursor: pointer;
89 + }
90 + .mui-button:active, .mui-button:focus {
91 + outline: none;
92 + }
93 + .mui-button .ripple {
94 + position: absolute;
95 + top: 0;
96 + left: 0;
97 + width: 100%;
98 + height: 100%;
99 + overflow: hidden;
100 + }
101 + @keyframes ripple {
102 + from {
103 + -webkit-transform: scale(0);
104 + -moz-transform: scale(0);
105 + -ms-transform: scale(0);
106 + -o-transform: scale(0);
107 + transform: scale(0);
108 + opacity: 1;
109 + }
110 + to {
111 + opacity: 0;
112 + -webkit-transform: scale(250);
113 + -moz-transform: scale(250);
114 + -ms-transform: scale(250);
115 + -o-transform: scale(250);
116 + transform: scale(250);
117 + }
118 + }
119 + .mui-button .ripple .circle {
120 + position: absolute;
121 + background: rgba(251, 232, 211, 0.2);
122 + border: 1px solid transparent;
123 + border-radius: 50%;
124 + pointer-events: none;
125 + animation: ripple 0.75s 1;
126 + top: 50%;
127 + left: 50%;
128 + }
129 + .mui-button p {
130 + z-index: 1;
131 + }
132 +/*---------버튼 부분---------*/
133 +
134 +
1 135
2 /*---------scroll snap 부분---------*/ 136 /*---------scroll snap 부분---------*/
3 body { 137 body {
4 overflow: hidden; 138 overflow: hidden;
5 - font-family: 'Roboto Slab', serif; 139 + font-family: Noto Sans KR, Bold;
6 } 140 }
7 /* Scroll down */ 141 /* Scroll down */
8 #container{ 142 #container{
...@@ -29,501 +163,155 @@ body { ...@@ -29,501 +163,155 @@ body {
29 background-position: center; 163 background-position: center;
30 } */ 164 } */
31 165
32 -/* .list:nth-child(1){ 166 +.list:nth-child(1){
33 - background-image: url("/src/background-01.png"); 167 + background-color: #25fdcb;
34 - background-repeat: no-repeat;
35 background-size: cover; 168 background-size: cover;
36 background-attachment: fixed; 169 background-attachment: fixed;
37 background-position: center; 170 background-position: center;
38 } 171 }
39 172
40 .list:nth-child(2){ 173 .list:nth-child(2){
41 - background-color: #ffffff; 174 + background-color: #000000;
42 background-size: cover; 175 background-size: cover;
43 background-attachment: fixed; 176 background-attachment: fixed;
44 background-position: center; 177 background-position: center;
45 } 178 }
46 179
47 .list:nth-child(3){ 180 .list:nth-child(3){
48 - background-color: #ffffff; 181 + background-color: #eeff2e;
49 background-size: cover; 182 background-size: cover;
50 background-attachment: fixed; 183 background-attachment: fixed;
51 background-position: center; 184 background-position: center;
52 -} */ 185 +}
53 -
54 -
55 /*---------scroll snap 부분---------*/ 186 /*---------scroll snap 부분---------*/
56 187
57 188
58 - 189 +/*---------프로필 부분---------*/
59 -/* 그라디언트 배경 */ 190 +body, ul, h2, p {
60 - * {
61 - box-sizing: border-box;
62 margin: 0; 191 margin: 0;
63 padding: 0; 192 padding: 0;
64 - } 193 +}
65 -
66 - body {
67 - width: 100vw;
68 - height: 200vh;
69 - padding: 1rem;
70 - font-family: Avenir, sans-serif;
71 - font-size: 112.5%;
72 - color: #124;
73 - background-image: radial-gradient(rgba(255, 185, 65, 0.7), rgba(255, 0, 0, 0) 40vw), radial-gradient(rgba(255, 186, 186, 0.7), rgba(0, 128, 0, 0) 40vw), radial-gradient(rgba(114, 215, 52, 0.7), rgba(0, 0, 255, 0) 40vw), radial-gradient(rgba(255, 255, 0, 0.7), rgba(255, 255, 0, 0) 40vw), radial-gradient(rgba(255, 0, 0, 0.7), rgba(255, 0, 0, 0) 40vw);
74 - background-position: -30vw 7rem, 50% 10rem, 60vw 14rem, -10vw calc(14rem + 20vw), 30vw calc(14rem + 20vw);
75 - background-size: 80vw 80vw;
76 - background-repeat: no-repeat;
77 - }
78 -/* 그라디언트 배경 */
79 -
80 -
81 -
82 -
83 -
84 -/*---------요소들 부분---------*/
85 - @import url("https://fonts.googleapis.com/css?family=Cardo:400i|Rubik:400,700&display=swap");
86 - :root {
87 - --d: 700ms;
88 - --e: cubic-bezier(0.19, 1, 0.22, 1);
89 - --font-sans: "Noto Sans KR";
90 - }
91 -
92 - * {
93 - box-sizing: border-box;
94 - }
95 -
96 - html, body {
97 - height: 100%;
98 - }
99 -
100 - body {
101 - display: grid;
102 - place-items: center;
103 - }
104 194
105 - .page-content { 195 +li {
106 - display: grid; 196 + list-style-type: none;
107 - grid-gap: 1rem; 197 +}
108 - padding: 1rem;
109 - max-width: 1024px;
110 - margin: 0 auto;
111 - font-family: var(--font-sans);
112 - }
113 - @media (min-width: 600px) {
114 - .page-content {
115 - grid-template-columns: repeat(2, 1fr);
116 - }
117 - }
118 - @media (min-width: 800px) {
119 - .page-content {
120 - grid-template-columns: repeat(4, 1fr);
121 - }
122 - }
123 198
124 - .card { 199 +body {
125 - position: relative; 200 + background-color: #111;
126 - display: flex; 201 + color: #999;
127 - align-items: flex-end; 202 +}
128 - overflow: hidden;
129 - padding: 1rem;
130 - width: 100%;
131 - text-align: center;
132 - color: whitesmoke;
133 - background-color: whitesmoke;
134 - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.1), 0 4px 4px rgba(0, 0, 0, 0.1), 0 8px 8px rgba(0, 0, 0, 0.1), 0 16px 16px rgba(0, 0, 0, 0.1);
135 - }
136 - @media (min-width: 600px) {
137 - .card {
138 - height: 350px;
139 - }
140 - }
141 - .card:before {
142 - content: "";
143 - position: absolute;
144 - top: 0;
145 - left: 0;
146 - width: 100%;
147 - height: 110%;
148 - background-size: cover;
149 - background-position: 0 0;
150 - transition: transform calc(var(--d) * 1.5) var(--e);
151 - pointer-events: none;
152 - }
153 - .card:after {
154 - content: "";
155 - display: block;
156 - position: absolute;
157 - top: 0;
158 - left: 0;
159 - width: 100%;
160 - height: 200%;
161 - pointer-events: none;
162 - background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.009) 11.7%, rgba(0, 0, 0, 0.034) 22.1%, rgba(0, 0, 0, 0.072) 31.2%, rgba(0, 0, 0, 0.123) 39.4%, rgba(0, 0, 0, 0.182) 46.6%, rgba(0, 0, 0, 0.249) 53.1%, rgba(0, 0, 0, 0.32) 58.9%, rgba(0, 0, 0, 0.394) 64.3%, rgba(0, 0, 0, 0.468) 69.3%, rgba(0, 0, 0, 0.54) 74.1%, rgba(0, 0, 0, 0.607) 78.8%, rgba(0, 0, 0, 0.668) 83.6%, rgba(0, 0, 0, 0.721) 88.7%, rgba(0, 0, 0, 0.762) 94.1%, rgba(0, 0, 0, 0.79) 100%);
163 - transform: translateY(-50%);
164 - transition: transform calc(var(--d) * 2) var(--e);
165 - }
166 - .card:nth-child(1):before {
167 - background-image: src="/src/song.png";
168 - }
169 - .card:nth-child(2):before {
170 - background-image: src="/src/song.png";
171 - }
172 - .card:nth-child(3):before {
173 - background-image: src="/src/song.png";
174 - }
175 - .card:nth-child(4):before {
176 - background-image: src="/src/song.png";
177 - }
178 203
179 - .content { 204 +.wrapper {
180 - position: relative;
181 display: flex; 205 display: flex;
182 - flex-direction: column; 206 + height: 100vh;
183 - align-items: center; 207 + justify-content: center;
184 - width: 100%;
185 - padding: 1rem;
186 - transition: transform var(--d) var(--e);
187 - z-index: 1;
188 - }
189 - .content > * + * {
190 - margin-top: 1rem;
191 - }
192 -
193 - .title {
194 - font-size: 1.3rem;
195 - font-weight: bold;
196 - line-height: 1.2;
197 - }
198 -
199 - .copy {
200 - font-family: var(--font-serif);
201 - font-size: 1.125rem;
202 - font-style: italic;
203 - line-height: 1.35;
204 - }
205 -
206 -
207 - @media (hover: hover) and (min-width: 600px) {
208 - .card:after {
209 - transform: translateY(0);
210 - }
211 -
212 - .content {
213 - transform: translateY(calc(100% - 4.5rem));
214 - }
215 - .content > *:not(.title) {
216 - opacity: 0;
217 - transform: translateY(1rem);
218 - transition: transform var(--d) var(--e), opacity var(--d) var(--e);
219 - }
220 -
221 - .card:hover,
222 - .card:focus-within {
223 align-items: center; 208 align-items: center;
224 - }
225 - .card:hover:before,
226 - .card:focus-within:before {
227 - transform: translateY(-4%);
228 - }
229 - .card:hover:after,
230 - .card:focus-within:after {
231 - transform: translateY(-50%);
232 - }
233 - .card:hover .content,
234 - .card:focus-within .content {
235 - transform: translateY(0);
236 - }
237 - .card:hover .content > *:not(.title),
238 - .card:focus-within .content > *:not(.title) {
239 - opacity: 1;
240 - transform: translateY(0);
241 - transition-delay: calc(var(--d) / 8);
242 - }
243 -
244 - .card:focus-within:before, .card:focus-within:after,
245 - .card:focus-within .content,
246 - .card:focus-within .content > *:not(.title) {
247 - transition-duration: 0s;
248 - }
249 - }
250 -/*---------요소들 부분---------*/
251 -
252 -
253 -
254 -
255 -/* text fade in */
256 -@import url(https://fonts.googleapis.com/css?family=Raleway:400,900,500,600,700);
257 -
258 -.animated{
259 - -webkit-animation-fill-mode:both;
260 - -webkit-animation-duration:2s;
261 - animation-duration:2s;
262 -}
263 -.animated2{
264 - animation-delay:.5s;
265 - -webkit-animation-delay:.5s;
266 - -webkit-animation-fill-mode:both;
267 - -webkit-animation-duration:2s;
268 - animation-duration:2s;
269 -}
270 -@-webkit-keyframes fadeOutUp {
271 - 0% {
272 - opacity: 0;
273 - -webkit-transform: translateY(1);
274 - -webkit-transform: translateY(40px);
275 - } 100% {
276 - opacity: 1;
277 - }
278 } 209 }
279 210
280 -.fadeOutUp { 211 +.team {
281 - -webkit-animation-name: fadeOutUp; 212 + display: flex;
282 - animation-name: fadeOutUp; 213 + justify-content: center;
214 + align-items: center;
283 } 215 }
284 216
285 -.fadeIn { 217 +.team-item {
286 - -webkit-animation-name: fadeIn; 218 + flex-basis: 100px;
287 - animation-name: fadeIn; 219 + flex-shrink: 0;
220 + margin: 0 4px;
221 + opacity: 0.4;
222 + transition: all .4s;
288 } 223 }
289 224
290 -@-webkit-keyframes fadeIn { 225 +.team-item:hover {
291 - 0%{
292 - opacity: 0;
293 - -webkit-transform: translateY(1);
294 - -webkit-transform: translateY(40px);
295 - }
296 - 100% {
297 opacity: 1; 226 opacity: 1;
298 - } 227 + flex-basis: 160px;
228 + margin: 0 20px;
299 } 229 }
300 -/* text fade in */
301 -
302 -
303 -
304 -
305 230
306 - 231 +.team-item img {
307 -/* 텍스트 */ 232 + width: 100%;
308 -#p1 {
309 - font-size: 50px;
310 - color: rgb(0, 0, 0);
311 - font-family: Noto Sans KR;
312 - text-align: center;
313 -}
314 -#p2{
315 - font-size: 20px;
316 - color: rgb(0, 0, 0);
317 - font-family: Noto Sans KR;
318 - text-align: center;
319 -}
320 -#p3{
321 - font-size: 15px;
322 - color: rgb(0, 0, 0);
323 - font-family: Noto Sans KR;
324 - text-align: center;
325 -}
326 -#p4{
327 - font-size: 15px;
328 - color: rgb(0, 0, 0);
329 - font-family: Noto Sans KR;
330 - text-align: center;
331 } 233 }
332 -/* 텍스트 */
333 234
334 - 235 +.profile {
335 - 236 + background-color: #222;
336 -
337 -
338 -
339 -/* 손흔들 */
340 -.wave {
341 - font-size: 120px;
342 position: relative; 237 position: relative;
238 + overflow: hidden;
343 } 239 }
344 240
345 -span { 241 +.profile:before {
346 - transform: translate(-50%, 0) rotate(-10deg); 242 + content: ' ';
347 - transform-origin: 100% 100%; 243 + /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.95+100 */
348 - left: 50%; 244 +background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.95) 100%); /* FF3.6-15 */
349 - display: block; 245 +background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.95) 100%); /* Chrome10-25,Safari5.1-6 */
246 +background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.95) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
247 +filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#f2000000',GradientType=0 ); /* IE6-9 */
350 position: absolute; 248 position: absolute;
351 - -webkit-animation: wave 350ms ease-in-out infinite alternate; 249 + left: 0;
352 - animation: wave 350ms ease-in-out infinite alternate; 250 + right: 0;
251 + bottom: 0;
252 + height: 200px;
353 } 253 }
354 254
355 -@-webkit-keyframes wave { 255 +.profile_red {
356 - 0% { 256 + color: #ff4949;
357 - transform: translate(-50%, 0) rotate(15deg);
358 - }
359 - 100% {
360 - transform: translate(-50%, 0) rotate(-10deg);
361 - }
362 } 257 }
363 258
364 -@keyframes wave { 259 +.profile_beige {
365 - 0% { 260 + color: beige;
366 - transform: translate(-50%, 0) rotate(15deg);
367 - }
368 - 100% {
369 - transform: translate(-50%, 0) rotate(-10deg);
370 - }
371 } 261 }
372 -/* 손흔들 */
373 -
374 262
375 - 263 +.profile_green {
376 -/* 내비 */ 264 + color: darkseagreen;
377 -body {
378 - font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
379 - overflow-x: hidden;
380 } 265 }
381 -.center 266 +
382 -{ 267 +.profile_pink {
383 - text-align: center; 268 + color: pink;
384 -}
385 -p
386 -{
387 - font-size: 20px;
388 -}
389 -a,
390 -a:hover,
391 -a:focus,
392 -a:active,{
393 - color: #99CED4;/*hover-highlight over,active-highlisht when clicked,focus-highlight when under use*/
394 - outline: none; /*gives outline to an element*/
395 -}
396 -h2,
397 -h3,
398 -{
399 - font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
400 - text-transform: uppercase;
401 - font-weight: 700;
402 - font-size: 30px;
403 -}
404 -hr.star-light,
405 -hr.star-primary {
406 - padding: 0; /*no padding,bordor upper 5px text to be avilable in center mac-width of 250 having margin t25 rauto b30 */
407 - border: none;
408 - border-top: solid 5px;
409 - text-align: center;
410 - max-width: 250px;
411 - margin: 25px auto 30px;
412 -}
413 -hr.star-light:after,
414 -hr.star-primary:after {
415 - content: "\f021"; /*give an icon FontAwesome helps to get desired font display inline within full span position*/
416 - font-family: FontAwesome;
417 - display: inline-block;
418 - position: relative;
419 - top: -0.8em;
420 - font-size: 2em;
421 - padding: 0 0.25em;
422 -}
423 -hr.star-light {
424 - border-color: white; /*gives border white*/
425 -}
426 -hr.star-light:after {
427 - background-color: #18BC9C;
428 - color: white;
429 -}
430 -hr.star-primary {
431 - border-color: #2C3E50;
432 } 269 }
433 -hr.star-primary:after { 270 +
434 - background-color: white; 271 +.profile_purple {
435 - color: #2C3E50; 272 + color: violet;
436 } 273 }
437 -header { 274 +
438 - text-align: center; 275 +.profile-contents {
439 - background: #18BC9C; 276 + position: absolute;
440 - color: white; 277 + left: 0;
278 + bottom: 0;
279 + padding: 10px;
441 } 280 }
442 -header .container { 281 +
443 - padding-top: 100px; 282 +.profile-contents h2 {
444 - padding-bottom: 50px; 283 + font-size: 17px;
445 } 284 }
446 -header .intro .name { 285 +
286 +.profile-contents h2 span {
447 display: block; 287 display: block;
448 - font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
449 - text-transform: uppercase;
450 - font-weight: 700;
451 - font-size: 2em;
452 -}
453 -header .intro .skills {
454 - font-size: 1.25em;
455 - font-weight: 300;/*how much bold*/
456 -}
457 -@media (min-width: 768px) {/* if minimum width exceeds then perform*/
458 - header .container {
459 - padding-top: 200px;
460 - padding-bottom: 100px;
461 - }
462 - header .intro .name {
463 - font-size: 4.75em;
464 - }
465 - header .intro .skills {
466 - font-size: 1.75em;
467 - }
468 -}
469 -.navbar-custom {
470 - background: #2C3E50;
471 - font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
472 - text-transform: uppercase;
473 - font-weight: 700;
474 - border: none;
475 -}
476 -.navbar-custom .navbar-nav {
477 - letter-spacing: 1px;
478 -}
479 -.navbar-custom .navbar-nav li a {
480 - color: white;
481 -}
482 -.navbar-custom .navbar-nav li a:hover {
483 - color: #18BC9C;
484 - outline: none;
485 -}
486 -.navbar-custom .navbar-nav li a:focus,
487 -.navbar-custom .navbar-nav li a:active {
488 - color: white;
489 -}
490 -.navbar-custom .navbar-nav li.active a {
491 - color: white;
492 - background: #18BC9C;
493 -}
494 -.navbar-custom .navbar-nav li.active a:hover,
495 -.navbar-custom .navbar-nav li.active a:focus,
496 -.navbar-custom .navbar-nav li.active a:active {
497 - color: white;
498 - background: #18BC9C;
499 -}
500 -.navbar-custom .navbar-toggle {
501 - color: white;
502 - text-transform: uppercase;
503 font-size: 10px; 288 font-size: 10px;
504 - border-color: white;
505 -}
506 -.navbar-custom .navbar-toggle:hover,
507 -.navbar-custom .navbar-toggle:focus {
508 - background-color: #18BC9C;
509 - color: white;
510 - border-color: #18BC9C;
511 } 289 }
512 -footer { 290 +
291 +.profile-contents p {
513 color: white; 292 color: white;
293 + font-size: 10px;
294 + min-width: 140px;
295 + max-height: 0;
296 + overflow: hidden;
297 + line-height: 1.2;
298 + transition: all 1s;
299 + opacity: 0;
514 } 300 }
515 -footer h3 { 301 +
516 - margin-bottom: 30px; 302 +.team-item:hover .profile-contents p {
517 -} 303 + opacity: 1;
518 -footer .footer-above { 304 + transition-delay: .4s;
519 - padding-top: 50px; 305 + max-height: 6em;
520 - background-color: #2C3E50; 306 + margin-top: 0.4em;
521 -}
522 -footer .footer-col {
523 - margin-bottom: 50px;
524 -}
525 -footer .footer-below {
526 - padding: 25px 0;
527 - background-color: #233140;
528 } 307 }
529 -/* 내비 */
...\ No newline at end of file ...\ No newline at end of file
308 +/*---------프로필 부분---------*/
309 +
310 +
311 +
312 +
313 +
314 +
315 +
316 +
317 +
......
1 <!doctype html> 1 <!doctype html>
2 <html> 2 <html>
3 - 3 + <head>
4 -<head>
5 - <meta charset="UTF-8">
6 <title>EMOJI-HUMAN</title> 4 <title>EMOJI-HUMAN</title>
7 - <link rel="stylesheet" href="/About Us/About Us.css"> 5 + <link rel="stylesheet" href="https://odd-mune.github.io/EMOJI-HUMAN/About Us/About Us.css">
8 - <meta name="viewport" content="width=device-width, initial-scale=1"> 6 + </head>
9 - <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
10 -
11 - <!-- 손흔들 -->
12 - <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
13 -
14 -</head>
15 -
16 -
17 -
18 -<body>
19 7
20 - <!-- 내비게이션 -->
21 - <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><!--bootstrap-->
22 - <!--css link-->
23 - <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><!--for icons-->
24 - <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><!--jquery script-->
25 - <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><!--bootstrap script-->
26 8
27 - <body id="page-top">
28 - <!--creating a navigation bar-->
29 - <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-->
30 - <div class="container"><!--gives padding of 16px on LHS and RHS-->
31 - <div class="navbar-header page-scroll"><!--navigation bar header having proprty to scroll -->
32 - <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
33 - <span></span> Menu <i class="fa fa-bars"></i>
34 - </button>
35 - </div><!--end of button-->
36 - <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><!--to collapse-->
37 - <ul class="nav navbar-nav">
38 - <li><a href="/index.html">Home</a></li>
39 - </ul>
40 - <ul class="nav navbar-nav navbar-right page-scroll"><!--second UL to go to right having proprty to scroll page-->
41 - <li> <a href="/About Us/About Us.html">About Us</a></li>
42 - <li><a href="/EMOJI-HUMAN/EMOJI-HUMAN.html">EMOJI-HUMAN</a></li>
43 - <li><a href="/EMO-TI/EMO-TI.html">EMO-TI</a></li>
44 - <li><a href="/EMO-SSAGE/EMO-SSAGE.html">EMO-SSAGE</a></li>
45 - </ul>
46 - </div>
47 - </div>
48 - </nav>
49 - <!-- 내비게이션 -->
50 9
51 - <!-- 1페이지 --> 10 + <body>
52 <div id="container"> 11 <div id="container">
53 <div class="list"> 12 <div class="list">
54 <div class="one"> 13 <div class="one">
55 - 14 + <p id="p1">Hello, Humans!</p>
56 - <div class="wave"><span>👋</span></div> 15 + <p id="p2">안녕하세요, 우리는 팀 이모지 인간입니다.</p>
57 - 16 + <br/>
58 - <p id="p1" class="animated fadeOutUp">Hello, Humans!</p> 17 + <p id="p3">우리는 이모지 인간이 아닙니다.<br/>
59 - <br> 18 + 진짜 인간이에요!
60 - <p id="p2" class="animated fadeOutUp">안녕하세요, 우리는 팀 이모지 인간입니다.</p>
61 -
62 - <br>
63 - <br>
64 - <br>
65 - <p id="p3" class="animated2 fadeIn">우리는 이모지 인간이 아닙니다.</p>
66 - <p id="p4" class="animated2 fadeIn">진짜 인간이에요!</p>
67 -
68 - </div>
69 - </div>
70 - <!-- 1페이지 -->
71 -
72 - <!-- 2페이지 -->
73 - <div class="list">
74 - <div class="two">
75 -
76 - <div style="float: left; width: 40%;">
77 - <img src="/src/song.png" style="display: block; margin: 0 auto;">
78 - </div>
79 -
80 - <!-- 요소들 -->
81 - <div style="float: left; width: 60%;">
82 - <main class="page-content">
83 - <!-- 1번칸 -->
84 - <div class="card">
85 - <div class="content">
86 - <h2 class="title">Me</h2>
87 - <p class="copy">안녕하세요 인간 흠터레스팅 송민겸입니다.
88 - 저는 경희대학교 디지털콘텐츠학과 휴학 중인 (현)백수입니다.
89 - 23년 새해를 맞아 갓-생을 살기 위해 노력하고 있지만...
90 - 네, 아무튼 열심히 노력해보았습니다. ^^
91 </p> 19 </p>
92 - </div>
93 - </div>
94 - <!-- 2번칸 -->
95 - <div class="card">
96 20
97 - <div class="content"> 21 + <p id="p4">버튼을 눌러 인사해주세요! 😬</p>
98 - <h2 class="title">Interest</h2> 22 + <button class="mui-button">
99 - <p class="copy">휴학을 한 후의 제 관심사는 해외 여행과 진로임니두. 23 + <div class="ripple"></div>
100 - 놀 수 있을 때 많이 놀러다니고 싶어 티끌 모아 여행으로 탕진을 실천하고 있슴니다. 24 + <p id="p5">click me!</p>
101 - 또 최근에는 UX/UI 디자인과 개발에 관심이 있어 이런 웹페이지도 만들었어욤! 25 + </button>
102 - 나 이러다가 개발자가 되는 거 아닌가 몰루 '3' 26 + <!-- partial -->
103 - </p> 27 + <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script><script src="https://odd-mune.github.io/EMOJI-HUMAN/About Us/About Us.js"></script>
104 </div> 28 </div>
105 -
106 </div> 29 </div>
107 - <!-- 3번칸 -->
108 - <div class="card">
109 - <div class="content">
110 - <h2 class="title">Summary</h2>
111 - <p class="copy">이번 전시 후기는...정말 발등에 불이 아니라 메테오가 떨어진 수준 ^^;;
112 - 비전공자로 코딩의 ㅋ도 모르는 제가 정말 맨땅에 헤딩 수준으로 개발을 하게 되어서 더 고생했던 것 같습니다.
113 - 근데 솔직히 벼락치기로 이정도면 잘했어요 칭찬 스티커 받아야 한다고 생각함ㄹㅇㅋㅋ.
114 - 반박시 내 마음 찢어짐 ㅠ
115 30
116 - </p> 31 + <div class="list">
117 - </div> 32 + <div class ="two">
118 - </div> 33 + <img src="https://odd-mune.github.io/EMOJI-HUMAN/src/song.png" style="display: block; margin: 0 auto;">
119 - </main> 34 + <div class="wrapper">
35 + <ul class="team">
36 + <li class="team-item">
37 + <div class="profile profile_red">
38 + <img src="https://odd-mune.github.io/EMOJI-HUMAN/src/song.png">
39 + <div class="profile-contents">
40 + <h2>Liam <span>CEO</span></h2>
41 + <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus</p>
42 + </div>
43 + </div>
44 + </li>
45 + <li class="team-item">
46 + <div class="profile profile_beige">
47 + <img src="https://odd-mune.github.io/EMOJI-HUMAN/src/song.png">
48 + <div class="profile-contents">
49 + <h2>Coco <span>Mood Maker</span></h2>
50 + <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus</p>
51 + </div>
52 + </div>
53 + </li>
54 + <li class="team-item">
55 + <div class="profile profile_green">
56 + <img src="https://odd-mune.github.io/EMOJI-HUMAN/src/song.png">
57 + <div class="profile-contents">
58 + <h2>Olivia <span>Designer</span></h2>
59 + <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus</p>
60 + </div>
61 + </div>
62 + </li>
63 + <li class="team-item">
64 + <div class="profile profile_pink">
65 + <img src="https://odd-mune.github.io/EMOJI-HUMAN/src/song.pngg">
66 + <div class="profile-contents">
67 + <h2>James <span>Front-end</span></h2>
68 + <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus</p>
69 + </div>
70 + </div>
71 + </li>
72 + <li class="team-item">
73 + <div class="profile profile_purple">
74 + <img src="https://odd-mune.github.io/EMOJI-HUMAN/src/song.png">
75 + <div class="profile-contents">
76 + <h2>Ella <span>Back-end</span></h2>
77 + <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus</p>
78 + </div>
79 + </div>
80 + </li>
81 + </ul>
120 </div> 82 </div>
121 - <!-- 요소들 -->
122 -
123 </div> 83 </div>
124 </div> 84 </div>
125 - <!-- 2페이지 -->
126 85
127 - <!-- 3페이지 -->
128 <div class="list"> 86 <div class="list">
129 <div class="three"> 87 <div class="three">
130 - 88 + <div class="wrapper">
131 - <!-- 요소들 --> 89 + <ul class="team">
132 - <div style="float: left; width: 64%;"> 90 + <li class="team-item">
133 - <main class="page-content"> 91 + <div class="profile profile_red">
134 - <!-- 1번칸 --> 92 + <img src="https://odd-mune.github.io/EMOJI-HUMAN/src/song.png">
135 - <div class="card"> 93 + <div class="profile-contents">
136 - <div class="content"> 94 + <h2>Liam <span>CEO</span></h2>
137 - <h2 class="title">Me</h2> 95 + <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus</p>
138 - <p class="copy">안녕하세요, 96 + </div>
139 - 한국 살고 있는 97 + </div>
140 - 김유진이라고 합니다. 98 + </li>
141 - 디지털 콘텐츠에 대해 99 + <li class="team-item">
142 - 공부하면서 다양한 100 + <div class="profile profile_beige">
143 - 작업들을 시도중입니다. 101 + <img src="https://odd-mune.github.io/EMOJI-HUMAN/src/song.png">
144 - 제 개인 작업물이 102 + <div class="profile-contents">
145 - 보고 싶으시다면, 103 + <h2>Coco <span>Mood Maker</span></h2>
146 - 옆 계정에 놀러와주세요! </p> 104 + <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus</p>
147 - </div> 105 + </div>
148 - </div> 106 + </div>
149 - <!-- 2번칸 --> 107 + </li>
150 - <div class="card"> 108 + <li class="team-item">
151 - <<div class="content"> 109 + <div class="profile profile_green">
152 - <h2 class="title">Interest</h2> 110 + <img src="https://odd-mune.github.io/EMOJI-HUMAN/src/song.png">
153 - <p class="copy">현재 관심 분야는 111 + <div class="profile-contents">
154 - 3D, 112 + <h2>Olivia <span>Designer</span></h2>
155 - 특수효과, 113 + <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus</p>
156 - UI&UX, 114 + </div>
157 - 콘텐츠 기획 115 + </div>
158 - 등 다양합니다. 116 + </li>
159 - 궁금한 분야들이 많아서 117 + <li class="team-item">
160 - 이들을 각각 118 + <div class="profile profile_pink">
161 - 경험하고 공부해보는 119 + <img src="https://odd-mune.github.io/EMOJI-HUMAN/src/song.png">
162 - 과정에 있습니다. 120 + <div class="profile-contents">
163 - (미래에 무슨 일을 121 + <h2>James <span>Front-end</span></h2>
164 - 하고 있을지 궁금하네요...) 122 + <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus</p>
165 - </p> 123 + </div>
166 - </div> 124 + </div>
167 - </div> 125 + </li>
168 - <!-- 3번칸 --> 126 + <li class="team-item">
169 - <div class="card"> 127 + <div class="profile profile_purple">
170 - <div class="content"> 128 + <img src="https://odd-mune.github.io/EMOJI-HUMAN/src/song.png">
171 - <h2 class="title">Summary</h2> 129 + <div class="profile-contents">
172 - <p class="copy">그런 의미에서 이번 130 + <h2>Ella <span>Back-end</span></h2>
173 - 이모지 인간 프로젝트는 131 + <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus</p>
174 - 제게 큰 도움이 된 132 + </div>
175 - 작업이었습니다. 133 + </div>
176 - 134 + </li>
177 - 색다른 시도와 고민도 많이 했고, 135 + </ul>
178 - 그 과정에서 새롭게 배우게 된
179 - 부분들도 많았습니다.
180 - (ex : 개발...)
181 -
182 - 이렇게 탄생한
183 - >>>이모지 인간<<<
184 - 재밌게 즐겨주시길
185 - 바라요!
186 -
187 - </p>
188 - </div>
189 - </main>
190 </div> 136 </div>
191 - <!-- 요소들 -->
192 -
193 - <div style="float: left; width: 36%;">
194 - <img src="/src/kim.png" style="display: block; margin: 0 auto;">
195 </div> 137 </div>
196 -
197 </div> 138 </div>
198 - </div> 139 + <div>
199 - <!-- 3페이지 --> 140 + </body>
200 -
201 -</body>
202 </html> 141 </html>
......
...@@ -5,3 +5,59 @@ function createRipple(y, x) { ...@@ -5,3 +5,59 @@ function createRipple(y, x) {
5 $('.ripple').append(_ripple); 5 $('.ripple').append(_ripple);
6 setTimeout(() => _ripple.remove(), 900); 6 setTimeout(() => _ripple.remove(), 900);
7 } 7 }
8 +
9 +function confetti() {
10 + [{
11 + bg: '#b00b00',
12 + position: Math.random() * $('html').width() },
13 + {
14 + bg: '#de1e7e',
15 + position: Math.random() * $('html').width() },
16 + {
17 + bg: '#BADA55',
18 + position: Math.random() * $('html').width() },
19 + {
20 + bg: '#F0FEAF',
21 + position: Math.random() * $('html').width() },
22 + {
23 + bg: '#ac1d1c',
24 + position: Math.random() * $('html').width() },
25 + {
26 + bg: '#facade',
27 + position: Math.random() * $('html').width() },
28 + {
29 + bg: 'transparent',
30 + position: Math.random() * $('html').width(),
31 + internal: '😜' },
32 + {
33 + bg: 'transparent',
34 + position: Math.random() * $('html').width(),
35 + internal: '🌵' },
36 + {
37 + bg: 'transparent',
38 + position: Math.random() * $('html').width(),
39 + internal: '🤑' },
40 + {
41 + bg: 'transparent',
42 + position: Math.random() * $('html').width(),
43 + internal: '🐻' },
44 + {
45 + bg: 'transparent',
46 + position: Math.random() * $('html').width(),
47 + internal: '💰' },
48 + {
49 + bg: 'transparent',
50 + position: Math.random() * $('html').width(),
51 + internal: '🍍' }].
52 + map(options => {
53 + const c = $(`<div class="confetti" style="background:${options.bg};left:${options.position}px;">${options.internal || ''}</div>`);
54 + $('body').append(c);
55 + setTimeout(() => c.remove(), 1900);
56 + });
57 +}
58 +
59 +$('.mui-button').mousedown(e => {
60 + const offset = $(e.target).offset();
61 + createRipple(e.pageY - offset.top, e.pageX - offset.left);
62 + confetti();
63 +});
...\ No newline at end of file ...\ No newline at end of file
......
1 +```
2 +Liam
3 +CEO
4 +Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus
5 +
6 +Coco
7 +Mood Maker
8 +
9 +Olivia
10 +Designer
11 +
12 +James
13 +Front-end
14 +
15 +Ella
16 +Back-end
17 +```
...\ No newline at end of file ...\ No newline at end of file
...@@ -3,44 +3,71 @@ ...@@ -3,44 +3,71 @@
3 3
4 <head> 4 <head>
5 <title>EMOJI-HUMAN</title> 5 <title>EMOJI-HUMAN</title>
6 - <link rel="stylesheet" href="/index.css"> 6 + <link rel="stylesheet" href="https://odd-mune.github.io/EMOJI-HUMAN/index.css">
7 - <link rel="icon" type="image/x-icon" href="/src/rainbow_1f308.png"> 7 + <link rel="icon" type="image/x-icon" href="https://odd-mune.github.io/EMOJI-HUMAN/src/rainbow_1f308.png">
8 + <style>
9 + body {
10 + background-image: url("emossage-03.png");
11 + background-repeat: no-repeat;
12 + background-size: 100%;
13 + font-family: Noto Sans KR, regular;
14 + text-align: center;
15 + }
16 + h1 {font-size: 50px;}
17 + p1 {font-size: 24px;}
18 + p2 {font-size: 14px}
19 + p2.small {line-height: 0.7;}
20 + </style>
21 + <div style="height: 100px; overflow: auto">
22 + </div>
23 +
24 +
8 </head> 25 </head>
9 26
10 <body> 27 <body>
28 + <form action="#">
29 +
30 + <header>
31 + <h1>Message + EMOJI<span>= Emossage</span></h1>
32 + <p1>Emoti는 이모지 중심 메세지입니다</p1>
33 + <br>
34 + <p2>
35 + <p class="small"> 글자 중 일부가 이모지로 변환됩니다.<br>
36 + 여러분만의 이모지 편지를 적어보세요<br> </p2>
37 + </p>
38 + </header>
39 +
40 + <div>
41 + <label class="desc" id="title1" for="Field1">Full Name</label>
42 + <div>
43 + <input id="Field1" name="Field1" type="text" class="field text fn" value="" size="8" tabindex="1">
44 + </div>
45 + </div>
11 46
47 + <div>
48 + <label class="desc" id="title3" for="Field3">
49 + Email
50 + </label>
51 + <div>
52 + <input id="Field3" name="Field3" type="email" spellcheck="false" value="" maxlength="255" tabindex="3">
53 + </div>
54 + </div>
12 55
56 + <div>
57 + <label class="desc" id="title4" for="Field4">
58 + Message
59 + </label>
60 +
61 + <div>
62 + <textarea id="Field4" name="Field4" spellcheck="true" rows="10" cols="50" tabindex="4"></textarea>
63 + </div>
64 +
65 + <div>
66 + <input id="saveForm" name="saveForm" type="submit" value="Submit">
67 + </div>
68 + </div>
13 69
14 - <!-- 내비게이션 --> 70 + </form>
15 - <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><!--bootstrap-->
16 - <!--css link-->
17 - <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><!--for icons-->
18 - <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><!--jquery script-->
19 - <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><!--bootstrap script-->
20 -
21 - <body id="page-top">
22 - <!--creating a navigation bar-->
23 - <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-->
24 - <div class="container"><!--gives padding of 16px on LHS and RHS-->
25 - <div class="navbar-header page-scroll"><!--navigation bar header having proprty to scroll -->
26 - <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
27 - <span></span> Menu <i class="fa fa-bars"></i>
28 - </button>
29 - </div><!--end of button-->
30 - <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><!--to collapse-->
31 - <ul class="nav navbar-nav">
32 - <li><a href="/index.html">Home</a></li>
33 - </ul>
34 - <ul class="nav navbar-nav navbar-right page-scroll"><!--second UL to go to right having proprty to scroll page-->
35 - <li> <a href="/About Us/About Us.html">About Us</a></li>
36 - <li><a href="/EMOJI-HUMAN/EMOJI-HUMAN.html">EMOJI-HUMAN</a></li>
37 - <li><a href="/EMO-TI/EMO-TI.html">EMO-TI</a></li>
38 - <li><a href="/EMO-SSAGE/EMO-SSAGE.html">EMO-SSAGE</a></li>
39 - </ul>
40 - </div><!--end of collapse-->
41 - </div>
42 - </nav>
43 - <!-- 내비게이션 -->
44 71
45 72
46 73
......
1 +* {
2 + -webkit-box-sizing: border-box;
3 + -moz-box-sizing: border-box;
4 + box-sizing: border-box;
5 + }
6 +
7 + body {
8 + padding: 20px 15%;
9 + }
10 + form header {
11 + margin: 0 0 20px 0;
12 + }
13 + form header div {
14 + font-size: 90%;
15 + color: #999;
16 + }
17 + form header h2 {
18 + margin: 0 0 5px 0;
19 + }
20 + form > div {
21 + clear: both;
22 + overflow: hidden;
23 + padding: 1px;
24 + margin: 0 0 10px 0;
25 + }
26 + form > div > fieldset > div > div {
27 + margin: 0 0 5px 0;
28 + }
29 + form > div > label,
30 + legend {
31 + width: 25%;
32 + float: left;
33 + padding-right: 10px;
34 + }
35 + form > div > div,
36 + form > div > fieldset > div {
37 + width: 75%;
38 + float: right;
39 + }
40 + form > div > fieldset label {
41 + font-size: 90%;
42 + }
43 + fieldset {
44 + border: 0;
45 + padding: 0;
46 + }
47 +
48 + input[type=text],
49 + input[type=email],
50 + input[type=url],
51 + input[type=password],
52 + textarea {
53 + width: 100%;
54 + border-top: 1px solid #ccc;
55 + border-left: 1px solid #ccc;
56 + border-right: 1px solid #eee;
57 + border-bottom: 1px solid #eee;
58 + }
59 + input[type=text],
60 + input[type=email],
61 + input[type=url],
62 + input[type=password] {
63 + width: 50%;
64 + }
65 + input[type=text]:focus,
66 + input[type=email]:focus,
67 + input[type=url]:focus,
68 + input[type=password]:focus,
69 + textarea:focus {
70 + outline: 0;
71 + border-color: #4697e4;
72 + }
73 +
74 + @media (max-width: 600px) {
75 + form > div {
76 + margin: 0 0 15px 0;
77 + }
78 + form > div > label,
79 + legend {
80 + width: 100%;
81 + float: none;
82 + margin: 0 0 5px 0;
83 + }
84 + form > div > div,
85 + form > div > fieldset > div {
86 + width: 100%;
87 + float: none;
88 + }
89 + input[type=text],
90 + input[type=email],
91 + input[type=url],
92 + input[type=password],
93 + textarea,
94 + select {
95 + width: 100%;
96 + }
97 + }
98 + @media (min-width: 1200px) {
99 + form > div > label,
100 + legend {
101 + text-align: right;
102 + }
103 + }
...\ No newline at end of file ...\ No newline at end of file
1 +window.onload = function() {
2 + // Get the window displayed in the iframe.
3 + var receiver = document.getElementById('receiver').contentWindow;
4 +
5 + // Get a reference to the 'Send Message' button.
6 + var btn = document.getElementById('send');
7 +
8 + // A function to handle sending messages.
9 + function sendMessage(e) {
10 + // Prevent any default browser behaviour.
11 + e.preventDefault();
12 +
13 + // Send a message with the text 'Hello Treehouse!' to the new window.
14 + receiver.postMessage('Hello Treehouse!', 'https://odd-mune.github.io');
15 + }
16 +
17 + // Add an event listener that will execute the sendMessage() function
18 + // when the send button is clicked.
19 + btn.addEventListener('click', sendMessage);
20 +}
1 -/* 기존것 */
2 .audio { 1 .audio {
3 align-content: center; 2 align-content: center;
4 margin-right: auto; 3 margin-right: auto;
...@@ -26,7 +25,7 @@ ...@@ -26,7 +25,7 @@
26 -ms-flex-align: center; 25 -ms-flex-align: center;
27 -webkit-align-items: center; 26 -webkit-align-items: center;
28 align-items: center; 27 align-items: center;
29 - box-shadow: 0px 5px 18px -7px #848484; 28 + box-shadow: 0px 2px 10px 0px #848484;
30 } 29 }
31 30
32 .swiper-slide img{ 31 .swiper-slide img{
...@@ -160,9 +159,9 @@ img { ...@@ -160,9 +159,9 @@ img {
160 } 159 }
161 160
162 @media (max-width:767px) { 161 @media (max-width:767px) {
163 -.slideshow__slide { 162 + .slideshow__slide {
164 padding: var(--slide-padding-y) var(--slide-padding-x); 163 padding: var(--slide-padding-y) var(--slide-padding-x);
165 -} 164 + }
166 } 165 }
167 166
168 @media (min-width:768px) and (max-width:1023px) { 167 @media (min-width:768px) and (max-width:1023px) {
...@@ -231,199 +230,4 @@ img { ...@@ -231,199 +230,4 @@ img {
231 flex: 0 0 auto 230 flex: 0 0 auto
232 } 231 }
233 232
234 -.swiper-button-next {
235 - color: rgb(255, 89, 189);
236 -}
237 -
238 -.swiper-button-prev {
239 - color: rgb(255, 89, 189);
240 -}
241 233
242 -.swiper-pagination-bullet-active {
243 - background-color: rgb(255, 89, 189);
244 -}
245 -/* 기존것 */
246 -
247 -
248 -
249 -/* 내비 */
250 -body {
251 - font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
252 - overflow-x: hidden;
253 -}
254 -.center
255 -{
256 - text-align: center;
257 -}
258 -p
259 -{
260 - font-size: 20px;
261 -}
262 -a,
263 -a:hover,
264 -a:focus,
265 -a:active,{
266 - color: #99CED4;/*hover-highlight over,active-highlisht when clicked,focus-highlight when under use*/
267 - outline: none; /*gives outline to an element*/
268 -}
269 -h2,
270 -h3,
271 -{
272 - font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
273 - text-transform: uppercase;
274 - font-weight: 700;
275 - font-size: 30px;
276 -}
277 -hr.star-light,
278 -hr.star-primary {
279 - padding: 0; /*no padding,bordor upper 5px text to be avilable in center mac-width of 250 having margin t25 rauto b30 */
280 - border: none;
281 - border-top: solid 5px;
282 - text-align: center;
283 - max-width: 250px;
284 - margin: 25px auto 30px;
285 -}
286 -hr.star-light:after,
287 -hr.star-primary:after {
288 - content: "\f021"; /*give an icon FontAwesome helps to get desired font display inline within full span position*/
289 - font-family: FontAwesome;
290 - display: inline-block;
291 - position: relative;
292 - top: -0.8em;
293 - font-size: 2em;
294 - padding: 0 0.25em;
295 -}
296 -hr.star-light {
297 - border-color: white; /*gives border white*/
298 -}
299 -hr.star-light:after {
300 - background-color: #18BC9C;
301 - color: white;
302 -}
303 -hr.star-primary {
304 - border-color: #2C3E50;
305 -}
306 -hr.star-primary:after {
307 - background-color: white;
308 - color: #2C3E50;
309 -}
310 -header {
311 - text-align: center;
312 - background: #18BC9C;
313 - color: white;
314 -}
315 -header .container {
316 - padding-top: 100px;
317 - padding-bottom: 50px;
318 -}
319 -header .intro .name {
320 - display: block;
321 - font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
322 - text-transform: uppercase;
323 - font-weight: 700;
324 - font-size: 2em;
325 -}
326 -header .intro .skills {
327 - font-size: 1.25em;
328 - font-weight: 300;/*how much bold*/
329 -}
330 -@media (min-width: 768px) {/* if minimum width exceeds then perform*/
331 - header .container {
332 - padding-top: 200px;
333 - padding-bottom: 100px;
334 - }
335 - header .intro .name {
336 - font-size: 4.75em;
337 - }
338 - header .intro .skills {
339 - font-size: 1.75em;
340 - }
341 -}
342 -.navbar-custom {
343 - background: #2C3E50;
344 - font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
345 - text-transform: uppercase;
346 - font-weight: 700;
347 - border: none;
348 -}
349 -}
350 -.navbar-custom .navbar-nav {
351 - letter-spacing: 1px;
352 -}
353 -.navbar-custom .navbar-nav li a {
354 - color: white;
355 -}
356 -.navbar-custom .navbar-nav li a:hover {
357 - color: #18BC9C;
358 - outline: none;
359 -}
360 -.navbar-custom .navbar-nav li a:focus,
361 -.navbar-custom .navbar-nav li a:active {
362 - color: white;
363 -}
364 -.navbar-custom .navbar-nav li.active a {
365 - color: white;
366 - background: #18BC9C;
367 -}
368 -.navbar-custom .navbar-nav li.active a:hover,
369 -.navbar-custom .navbar-nav li.active a:focus,
370 -.navbar-custom .navbar-nav li.active a:active {
371 - color: white;
372 - background: #18BC9C;
373 -}
374 -.navbar-custom .navbar-toggle {
375 - color: white;
376 - text-transform: uppercase;
377 - font-size: 10px;
378 - border-color: white;
379 -}
380 -.navbar-custom .navbar-toggle:hover,
381 -.navbar-custom .navbar-toggle:focus {
382 - background-color: #18BC9C;
383 - color: white;
384 - border-color: #18BC9C;
385 -}
386 -footer {
387 - color: white;
388 -}
389 -footer h3 {
390 - margin-bottom: 30px;
391 -}
392 -footer .footer-above {
393 - padding-top: 50px;
394 - background-color: #2C3E50;
395 -}
396 -footer .footer-col {
397 - margin-bottom: 50px;
398 -}
399 -footer .footer-below {
400 - padding: 25px 0;
401 - background-color: #233140;
402 -}
403 -/* 내비 */
404 -
405 -
406 -
407 -
408 -
409 -
410 -/* 그라디언트 배경 */
411 -* {
412 - box-sizing: border-box;
413 - margin: 0;
414 - padding: 0;
415 -}
416 -
417 -body {
418 - width: 100vw;
419 - height: 200vh;
420 - padding: 1rem;
421 - font-family: Avenir, sans-serif;
422 - font-size: 112.5%;
423 - color: #124;
424 - background-image: radial-gradient(rgba(255, 185, 65, 0.7), rgba(255, 0, 0, 0) 40vw), radial-gradient(rgba(255, 186, 186, 0.7), rgba(0, 128, 0, 0) 40vw), radial-gradient(rgba(114, 215, 52, 0.7), rgba(0, 0, 255, 0) 40vw), radial-gradient(rgba(255, 255, 0, 0.7), rgba(255, 255, 0, 0) 40vw), radial-gradient(rgba(255, 0, 0, 0.7), rgba(255, 0, 0, 0) 40vw);
425 - background-position: -30vw 7rem, 50% 10rem, 60vw 14rem, -10vw calc(14rem + 20vw), 30vw calc(14rem + 20vw);
426 - background-size: 80vw 80vw;
427 - background-repeat: no-repeat;
428 -}
429 -/* 그라디언트 배경 */
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -8,119 +8,104 @@ ...@@ -8,119 +8,104 @@
8 <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css"/> 8 <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css"/>
9 <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"/> 9 <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"/>
10 <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script> 10 <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
11 - <link rel="stylesheet" href="/EMO-TI/EMO-TI.css"> 11 + <link rel="stylesheet" href="https://odd-mune.github.io/EMOJI-HUMAN/EMO-TI/EMO-TI.css">
12 - </head> 12 + <style>
13 + body {
14 + background-image: url("shrink-05.png");
15 + background-repeat: no-repeat;
16 + background-size: 100%;
17 + font-family: Noto Sans KR, regular;
18 + font-size: 25pt;
19 + text-align: center;
20 + }
21 + h1 {font-size: 50px;}
22 + p1 {font-size: 24px;}
23 + p2 {font-size: 14px}
24 + p2.small {line-height: 0.7;}
25 + }
26 + </style>
27 + <div style="height: 100px; overflow: auto">
28 + </div>
13 29
14 - <!-- style="background-image: url(/src/background-01.png); background-position: center; background-size: cover;" --> 30 + </head>
15 31
16 <body> 32 <body>
17 33
18 - <!-- 내비게이션 --> 34 + <h1>MBTI + EMOJI<span>= EMOTI</span></h1>
19 - <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><!--bootstrap--> 35 + <p1>MBTI가 이모지라면? 그건 바로 EMOTI!</p1>
20 - <!--css link--> 36 + <br>
21 - <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><!--for icons--> 37 + <p2>
22 - <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><!--jquery script--> 38 + <p class="small"> 당신의 mbti가 이모지로 어떻게 바뀌었을지,<br>
23 - <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><!--bootstrap script--> 39 + 아래의 카드에서 한 번 찾아보세요!<br> </p2>
40 + </p>
41 +
24 42
25 - <body id="page-top">
26 - <!--creating a navigation bar-->
27 - <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-->
28 - <div class="container"><!--gives padding of 16px on LHS and RHS-->
29 - <div class="navbar-header page-scroll"><!--navigation bar header having proprty to scroll -->
30 - <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
31 - <span></span> Menu <i class="fa fa-bars"></i>
32 - </button>
33 - </div><!--end of button-->
34 - <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><!--to collapse-->
35 - <ul class="nav navbar-nav">
36 - <li><a href="/index.html">Home</a></li>
37 - </ul>
38 - <ul class="nav navbar-nav navbar-right page-scroll"><!--second UL to go to right having proprty to scroll page-->
39 - <li> <a href="/About Us/About Us.html">About Us</a></li>
40 - <li><a href="/EMOJI-HUMAN/EMOJI-HUMAN.html">EMOJI-HUMAN</a></li>
41 - <li><a href="/EMO-TI/EMO-TI.html">EMO-TI</a></li>
42 - <li><a href="/EMO-SSAGE/EMO-SSAGE.html">EMO-SSAGE</a></li>
43 - </ul>
44 - </div><!--end of collapse-->
45 - </div>
46 - </nav>
47 - <!-- 내비게이션 -->
48 43
49 - <br>
50 - <br>
51 - <br>
52 - <br>
53 - <br>
54 - <br>
55 - <br>
56 - <br>
57 - <br>
58 - <br>
59 - <br>
60 - <br>
61 - <br>
62 - <br>
63 - <br>
64 - <br>
65 - <br>
66 - <br>
67 - <br>
68 - <br>
69 - <br>
70 - <br>
71 - <br>
72 - <br>
73 44
74 <div class="swiper-container"> 45 <div class="swiper-container">
75 <div class="swiper-wrapper"> 46 <div class="swiper-wrapper">
76 - <div class="swiper-slide"><img src="/src/ISTP.jpg"></div> 47 + <div class="swiper-slide"><img src="https://odd-mune.github.io/EMOJI-HUMAN/src/ISTP.jpg"></div> <!-- 0 -->
77 - <div class="swiper-slide"><img src="/src/ISTJ.jpg"></div> 48 + <div class="swiper-slide"><img src="https://odd-mune.github.io/EMOJI-HUMAN/src/ISTJ.jpg"></div> <!-- 1 -->
78 - <div class="swiper-slide"><img src="/src/ISFP.jpg"></div> 49 + <div class="swiper-slide"><img src="https://odd-mune.github.io/EMOJI-HUMAN/src/ISFP.jpg"></div> <!-- 2 -->
79 - <div class="swiper-slide"><img src="/src/ISFJ.jpg"></div> 50 + <div class="swiper-slide"><img src="https://odd-mune.github.io/EMOJI-HUMAN/src/ISFJ.jpg"></div> <!-- 3 -->
80 - <div class="swiper-slide"><img src="/src/INTP.jpg"></div> 51 + <div class="swiper-slide"><img src="https://odd-mune.github.io/EMOJI-HUMAN/src/INTP.jpg"></div> <!-- 4 -->
81 - <div class="swiper-slide"><img src="/src/INTJ.jpg"></div> 52 + <div class="swiper-slide"><img src="https://odd-mune.github.io/EMOJI-HUMAN/src/INTJ.jpg"></div> <!-- 5 -->
82 - <div class="swiper-slide"><img src="/src/INFP.jpg"></div> 53 + <div class="swiper-slide"><img src="https://odd-mune.github.io/EMOJI-HUMAN/src/INFP.jpg"></div> <!-- 6 -->
83 - <div class="swiper-slide"><img src="/src/INFJ.jpg"></div> 54 + <div class="swiper-slide"><img src="https://odd-mune.github.io/EMOJI-HUMAN/src/INFJ.jpg"></div> <!-- 7 -->
84 - <div class="swiper-slide"><img src="/src/ESTP.jpg"></div> 55 + <div class="swiper-slide"><img src="https://odd-mune.github.io/EMOJI-HUMAN/src/ESTP.jpg"></div> <!-- 8 -->
85 - <div class="swiper-slide"><img src="/src/ESTJ.jpg"></div> 56 + <div class="swiper-slide"><img src="https://odd-mune.github.io/EMOJI-HUMAN/src/ESTJ.jpg"></div> <!-- 9 -->
86 - <div class="swiper-slide"><img src="/src/ESFP.jpg"></div> 57 + <div class="swiper-slide"><img src="https://odd-mune.github.io/EMOJI-HUMAN/src/ESFP.jpg"></div> <!-- 10 -->
87 - <div class="swiper-slide"><img src="/src/ESFJ.jpg"></div> 58 + <div class="swiper-slide"><img src="https://odd-mune.github.io/EMOJI-HUMAN/src/ESFJ.jpg"></div> <!-- 11 -->
88 - <div class="swiper-slide"><img src="/src/ENTP.jpg"></div> 59 + <div class="swiper-slide"><img src="https://odd-mune.github.io/EMOJI-HUMAN/src/ENTP.jpg"></div> <!-- 12 -->
89 - <div class="swiper-slide"><img src="/src/ENTJ.jpg"></div> 60 + <div class="swiper-slide"><img src="https://odd-mune.github.io/EMOJI-HUMAN/src/ENTJ.jpg"></div> <!-- 13 -->
90 - <div class="swiper-slide"><img src="/src/ENFP.jpg"></div> 61 + <div class="swiper-slide"><img src="https://odd-mune.github.io/EMOJI-HUMAN/src/ENFP.jpg"></div> <!-- 14 -->
91 - <div class="swiper-slide"><img src="/src/ENFJ.jpg"></div> 62 + <div class="swiper-slide"><img src="https://odd-mune.github.io/EMOJI-HUMAN/src/ENFJ.jpg"></div> <!-- 15 -->
92 </div> 63 </div>
93 <!-- If we need pagination --> 64 <!-- If we need pagination -->
94 - <br>
95 - <br>
96 - <br>
97 -
98 <div class="swiper-pagination"></div> 65 <div class="swiper-pagination"></div>
99 <!-- Add Arrows --> 66 <!-- Add Arrows -->
100 <div class="swiper-button-next"></div> 67 <div class="swiper-button-next"></div>
101 <div class="swiper-button-prev"></div> 68 <div class="swiper-button-prev"></div>
102 - <!-- </div> --> 69 + </div>
103 - <script src="/EMO-TI/EMO-TI.js" type="module"></script> 70 + <script src="https://odd-mune.github.io/EMOJI-HUMAN/EMO-TI/EMO-TI.js" type="module"></script>
104 <div style="align-content: center;"> 71 <div style="align-content: center;">
105 - <audio id="istp_audio" src="/src/Burn The House Down.mp3" loop controls hidden></audio> 72 + <audio id="istp_audio" src="https://odd-mune.github.io/EMOJI-HUMAN/src/Burn The House Down.mp3" loop controls hidden></audio>
106 - <audio id="istj_audio" src="/src/Rise.mp3" loop controls hidden></audio> 73 + <audio id="istj_audio" src="https://odd-mune.github.io/EMOJI-HUMAN/src/Rise.mp3" loop controls hidden></audio>
107 - <audio id="isfp_audio" src="/src/비밀의 화원.mp3" loop controls hidden></audio> 74 + <audio id="isfp_audio" src="https://odd-mune.github.io/EMOJI-HUMAN/src/비밀의 화원.mp3" loop controls hidden></audio>
108 - <audio id="isfj_audio" src="/src/always ill care.mp3" loop controls hidden></audio> 75 + <audio id="isfj_audio" src="https://odd-mune.github.io/EMOJI-HUMAN/src/always ill care.mp3" loop controls hidden></audio>
109 - <audio id="intp_audio" src="/src/Like That.mp3" loop controls hidden></audio> 76 + <audio id="intp_audio" src="https://odd-mune.github.io/EMOJI-HUMAN/src/Like That.mp3" loop controls hidden></audio>
110 - <audio id="intj_audio" src="/src/Va Va Vis.mp3" loop controls hidden></audio> 77 + <audio id="intj_audio" src="https://odd-mune.github.io/EMOJI-HUMAN/src/Va Va Vis.mp3" loop controls hidden></audio>
111 - <audio id="infp_audio" src="/src/괜찮아도 괜찮아.mp3" loop controls hidden></audio> 78 + <audio id="infp_audio" src="https://odd-mune.github.io/EMOJI-HUMAN/src/괜찮아도 괜찮아.mp3" loop controls hidden></audio>
112 - <audio id="infj_audio" src="/src/Shining.mp3" loop controls hidden></audio> 79 + <audio id="infj_audio" src="https://odd-mune.github.io/EMOJI-HUMAN/src/Shining.mp3" loop controls hidden></audio>
113 - <audio id="estp_audio" src="/src/Break The Rules.mp3" loop controls hidden></audio> 80 + <audio id="estp_audio" src="https://odd-mune.github.io/EMOJI-HUMAN/src/Break The Rules.mp3" loop controls hidden></audio>
114 - <audio id="estj_audio" src="/src/Kings Queens.mp3" loop controls hidden></audio> 81 + <audio id="estj_audio" src="https://odd-mune.github.io/EMOJI-HUMAN/src/Kings Queens.mp3" loop controls hidden></audio>
115 - <audio id="esfp_audio" src="/src/Beautiful Beautiful.mp3" loop controls hidden></audio> 82 + <audio id="esfp_audio" src="https://odd-mune.github.io/EMOJI-HUMAN/src/Beautiful Beautiful.mp3" loop controls hidden></audio>
116 - <audio id="esfj_audio" src="/src/Slow Ride.mp3" loop controls hidden></audio> 83 + <audio id="esfj_audio" src="https://odd-mune.github.io/EMOJI-HUMAN/src/Slow Ride.mp3" loop controls hidden></audio>
117 - <audio id="entp_audio" src="/src/불꽃놀이.mp3" loop controls hidden></audio> 84 + <audio id="entp_audio" src="https://odd-mune.github.io/EMOJI-HUMAN/src/불꽃놀이.mp3" loop controls hidden></audio>
118 - <audio id="entj_audio" src="/src/Boss Bitch.mp3" loop controls hidden></audio> 85 + <audio id="entj_audio" src="https://odd-mune.github.io/EMOJI-HUMAN/src/Boss Bitch.mp3" loop controls hidden></audio>
119 - <audio id="enfp_audio" src="/src/Moonshot.mp3" loop controls hidden></audio> 86 + <audio id="enfp_audio" src="https://odd-mune.github.io/EMOJI-HUMAN/src/Moonshot.mp3" loop controls hidden></audio>
120 - <audio id="enfj_audio" src="/src/Island Island.mp3" loop controls hidden></audio> 87 + <audio id="enfj_audio" src="https://odd-mune.github.io/EMOJI-HUMAN/src/Island Island.mp3" loop controls hidden></audio>
121 </div> 88 </div>
122 - 89 +<br>
123 - 90 +<br>
91 +<br>
92 +<br>
93 +<br>
94 +<br>
95 +<br>
96 +<br>
97 +<br>
98 +<br>
99 +<br>
100 +<br>
101 +<br>
102 +<br>
103 +<br>
104 +<br>
105 +<br>
106 +<br>
107 +<br>
108 +<br>
124 </body> 109 </body>
125 110
126 </html> 111 </html>
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -2,45 +2,40 @@ ...@@ -2,45 +2,40 @@
2 <html lang="ko"> 2 <html lang="ko">
3 3
4 <head> 4 <head>
5 - <meta charset="UTF-8">
6 <title>EMOJI-HUMAN</title> 5 <title>EMOJI-HUMAN</title>
7 - <link rel="stylesheet" href="/EMOJI-HUMAN.css"> 6 + <link rel="stylesheet" href="="https://odd-mune.github.io/EMOJI-HUMAN//index.css">
8 - <link rel="icon" type="image/x-icon" href="/src/rainbow_1f308.png"> 7 + <link rel="icon" type="image/x-icon" href="https://odd-mune.github.io/EMOJI-HUMAN/src/rainbow_1f308.png">
9 - 8 +/*
9 + <DIV style="position:absolute; left: 241px; top: 49px;"><A href="https://odd-mune.github.io/EMOJI-HUMAN/About Us/About Us.html"> About us? </A></div>
10 + <DIV style="position:absolute; left: 964px; top: 49px;"><A href="https://odd-mune.github.io/EMOJI-HUMAN/EMO-TI/EMO-TI.html"> Emoti</A></div>
11 + <DIV style="position:absolute; left: 1269px; top: 49px;"><A href="https://odd-mune.github.io/EMOJI-HUMAN/EMO-SSAGE/EMO-SSAGE.html"> Emossage</A></div>
12 + */
13 + <style>
14 + body {
15 + background-image: url("emojihuman-04.png");
16 + background-repeat: no-repeat;
17 + background-size: 100%;
18 + font-family: Noto Sans KR, regular;
19 + text-align: center;
20 + }
21 + h1 {font-size: 50px;
22 + letter-spacing: 10px;}
23 + p1 {font-size: 24px;}
24 + p2 {font-size: 14px}
25 + p2.small {line-height: 0.7;}
26 + </style>
27 + <div style="height: 100px; overflow: auto">
28 + </div>
10 </head> 29 </head>
11 30
31 +<body>
32 + <h1>Emoji Human,<span> Who are you?</span></h1>
33 + <p1>이모지 인간의 정체가 궁금해요.</p1>
34 + <br>
35 + <p2>
36 + <p class="small"> 이모지일까요, 인간일까요?<br>
37 + 직접 대화하면서<br> 차근차근 알아가봅시다! </p2>
38 + </p>
12 39
13 -<body style="margin: 0 auto">
14 -
15 - <!-- 내비게이션 -->
16 - <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><!--bootstrap-->
17 - <!--css link-->
18 - <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><!--for icons-->
19 - <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><!--jquery script-->
20 - <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><!--bootstrap script-->
21 -
22 - <body id="page-top">
23 - <!--creating a navigation bar-->
24 - <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-->
25 - <div class="container"><!--gives padding of 16px on LHS and RHS-->
26 - <div class="navbar-header page-scroll"><!--navigation bar header having proprty to scroll -->
27 - <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
28 - <span></span> Menu <i class="fa fa-bars"></i>
29 - </button>
30 - </div><!--end of button-->
31 - <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><!--to collapse-->
32 - <ul class="nav navbar-nav">
33 - <li><a href="/index.html">Home</a></li>
34 - </ul>
35 - <ul class="nav navbar-nav navbar-right page-scroll"><!--second UL to go to right having proprty to scroll page-->
36 - <li> <a href="/About Us/About Us.html">About Us</a></li>
37 - <li><a href="/EMOJI-HUMAN/EMOJI-HUMAN.html">EMOJI-HUMAN</a></li>
38 - <li><a href="/EMO-TI/EMO-TI.html">EMO-TI</a></li>
39 - <li><a href="/EMO-SSAGE/EMO-SSAGE.html">EMO-SSAGE</a></li>
40 - </ul>
41 - </div><!--end of collapse-->
42 - </div>
43 - </nav>
44 - <!-- 내비게이션 -->
45 40
46 </body> 41 </body>
......
1 # EMOJI-HUMAN 1 # EMOJI-HUMAN
2 2
3 옥타린 전시회 3 옥타린 전시회
...\ No newline at end of file ...\ No newline at end of file
4 -
5 -by:
6 -
7 -* 송민겸
8 -* 김유진
...\ No newline at end of file ...\ No newline at end of file
......
1 -/*-----------배경 그라디언트-----------*/
2 #gradient-bg{ 1 #gradient-bg{
3 width: 100%; 2 width: 100%;
4 height: 100vh; 3 height: 100vh;
5 background: rgb(255, 255, 255); 4 background: rgb(255, 255, 255);
6 background-image: 5 background-image:
7 - radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(243, 97, 155, 0) 80%), 6 + radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 80%),
8 radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 40%), 7 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%), 8 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%); 9 radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 100%);
11 animation: colorChange 6s infinite alternate-reverse; 10 animation: colorChange 6s infinite alternate-reverse;
11 +
12 } 12 }
13 13
14 @keyframes colorChange { 14 @keyframes colorChange {
...@@ -114,389 +114,3 @@ ...@@ -114,389 +114,3 @@
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%);} 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%);} 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 } 116 }
...\ No newline at end of file ...\ No newline at end of file
117 -/*-----------배경 그라디언트-----------*/
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 -
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 -
281 -/* 내비 */
282 -body {
283 - font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
284 - overflow-x: hidden;
285 -}
286 -.center
287 -{
288 - text-align: center;
289 -}
290 -p
291 -{
292 - font-size: 20px;
293 -}
294 -a,
295 -a:hover,
296 -a:focus,
297 -a:active,{
298 - color: #99CED4;/*hover-highlight over,active-highlisht when clicked,focus-highlight when under use*/
299 - outline: none; /*gives outline to an element*/
300 -}
301 -h2,
302 -h3,
303 -{
304 - font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
305 - text-transform: uppercase;
306 - font-weight: 700;
307 - font-size: 30px;
308 -}
309 -hr.star-light,
310 -hr.star-primary {
311 - padding: 0; /*no padding,bordor upper 5px text to be avilable in center mac-width of 250 having margin t25 rauto b30 */
312 - border: none;
313 - border-top: solid 5px;
314 - text-align: center;
315 - max-width: 250px;
316 - margin: 25px auto 30px;
317 -}
318 -hr.star-light:after,
319 -hr.star-primary:after {
320 - content: "\f021"; /*give an icon FontAwesome helps to get desired font display inline within full span position*/
321 - font-family: FontAwesome;
322 - display: inline-block;
323 - position: relative;
324 - top: -0.8em;
325 - font-size: 2em;
326 - padding: 0 0.25em;
327 -}
328 -hr.star-light {
329 - border-color: white; /*gives border white*/
330 -}
331 -hr.star-light:after {
332 - background-color: #18BC9C;
333 - color: white;
334 -}
335 -hr.star-primary {
336 - border-color: #2C3E50;
337 -}
338 -hr.star-primary:after {
339 - background-color: white;
340 - color: #2C3E50;
341 -}
342 -header {
343 - text-align: center;
344 - background: #18BC9C;
345 - color: white;
346 -}
347 -header .container {
348 - padding-top: 100px;
349 - padding-bottom: 50px;
350 -}
351 -header .intro .name {
352 - display: block;
353 - font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
354 - text-transform: uppercase;
355 - font-weight: 700;
356 - font-size: 2em;
357 -}
358 -header .intro .skills {
359 - font-size: 1.25em;
360 - font-weight: 300;/*how much bold*/
361 -}
362 -@media (min-width: 768px) {/* if minimum width exceeds then perform*/
363 - header .container {
364 - padding-top: 200px;
365 - padding-bottom: 100px;
366 - }
367 - header .intro .name {
368 - font-size: 4.75em;
369 - }
370 - header .intro .skills {
371 - font-size: 1.75em;
372 - }
373 -}
374 -.navbar-custom {
375 - background: #2C3E50;
376 - font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
377 - text-transform: uppercase;
378 - font-weight: 700;
379 - border: none;
380 -}
381 -}
382 -.navbar-custom .navbar-nav {
383 - letter-spacing: 1px;
384 -}
385 -.navbar-custom .navbar-nav li a {
386 - color: white;
387 -}
388 -.navbar-custom .navbar-nav li a:hover {
389 - color: #18BC9C;
390 - outline: none;
391 -}
392 -.navbar-custom .navbar-nav li a:focus,
393 -.navbar-custom .navbar-nav li a:active {
394 - color: white;
395 -}
396 -.navbar-custom .navbar-nav li.active a {
397 - color: white;
398 - background: #18BC9C;
399 -}
400 -.navbar-custom .navbar-nav li.active a:hover,
401 -.navbar-custom .navbar-nav li.active a:focus,
402 -.navbar-custom .navbar-nav li.active a:active {
403 - color: white;
404 - background: #18BC9C;
405 -}
406 -.navbar-custom .navbar-toggle {
407 - color: white;
408 - text-transform: uppercase;
409 - font-size: 10px;
410 - border-color: white;
411 -}
412 -.navbar-custom .navbar-toggle:hover,
413 -.navbar-custom .navbar-toggle:focus {
414 - background-color: #18BC9C;
415 - color: white;
416 - border-color: #18BC9C;
417 -}
418 -footer {
419 - color: white;
420 -}
421 -footer h3 {
422 - margin-bottom: 30px;
423 -}
424 -footer .footer-above {
425 - padding-top: 50px;
426 - background-color: #2C3E50;
427 -}
428 -footer .footer-col {
429 - margin-bottom: 50px;
430 -}
431 -footer .footer-below {
432 - padding: 25px 0;
433 - background-color: #233140;
434 -}
435 -/* 내비 */
436 -
437 -
438 -
439 -
440 -/* 이모지 레인 */
441 -body{
442 - margin: 0;
443 - padding: 0;
444 - width: 100%;
445 - height: 100vh;
446 - background: #000;
447 - font-family: 'Oswald', sans-serif;
448 -}
449 -
450 -#text {
451 - display: flex;
452 - height: 100vh;
453 - align-items: center;
454 - justify-content: center;
455 - text-align: center;
456 -}
457 -
458 -#container {
459 - left: 0px;
460 - top: -100px;
461 - height: calc(100vh + 100px);
462 - overflow: hidden;
463 - position: relative;
464 -}
465 -
466 -#animate{
467 - margin: 0 auto;
468 - width: 20px;
469 - overflow: visible;
470 - position: relative;
471 -}
472 -
473 -#all{
474 - overflow: hidden;
475 - height: 100vh;
476 - width: 100%;
477 - position: fixed;
478 -}
479 -
480 -#footer{
481 - color: #ffc0cb;
482 - text-decoration: none;
483 - position: fixed;
484 - width: 752px;
485 - bottom: 20px;
486 - align-content: center;
487 - float: none;
488 - margin-left: calc(50% - 376px);
489 -}
490 -
491 -#a, p{
492 - text-decoration: none;
493 - color: #FFFFFF;
494 - letter-spacing: 6px;
495 - transition: all 0.5s ease-in-out;
496 - width: auto;
497 - margin: 0 auto;
498 - text-align: center;
499 - align-items: center;
500 -}
501 -
502 -/* 이모지 레인 */
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -2,93 +2,26 @@ ...@@ -2,93 +2,26 @@
2 <html lang="ko"> 2 <html lang="ko">
3 3
4 <head> 4 <head>
5 - <meta charset="UTF-8">
6 <title>EMOJI-HUMAN</title> 5 <title>EMOJI-HUMAN</title>
7 - <link rel="stylesheet" href="/index.css"> 6 + <link rel="stylesheet" href="https://odd-mune.github.io/EMOJI-HUMAN/index.css">
8 - <link rel="icon" type="image/x-icon" href="/src/rainbow_1f308.png"> 7 + <link rel="icon" type="image/x-icon" href="https://odd-mune.github.io/EMOJI-HUMAN/src/rainbow_1f308.png">
9 - <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 </head> 8 </head>
11 9
12 -<body style="margin: 0 auto"> 10 +<body>
13 11
14 - <!-- 큰 묶음은 배경임 --> 12 + <!-- partial:index.partial.html -->
15 <div id="gradient-bg"> 13 <div id="gradient-bg">
16 -
17 - <!-- 내비게이션 -->
18 - <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><!--bootstrap-->
19 - <!--css link-->
20 - <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><!--for icons-->
21 - <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><!--jquery script-->
22 - <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><!--bootstrap script-->
23 -
24 - <body id="page-top">
25 - <!--creating a navigation bar-->
26 - <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-->
27 - <div class="container"><!--gives padding of 16px on LHS and RHS-->
28 - <div class="navbar-header page-scroll"><!--navigation bar header having proprty to scroll -->
29 - <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
30 - <span></span> Menu <i class="fa fa-bars"></i>
31 - </button>
32 - </div><!--end of button-->
33 - <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><!--to collapse-->
34 - <ul class="nav navbar-nav">
35 - <li><a href="/index.html">Home</a></li>
36 - </ul>
37 - <ul class="nav navbar-nav navbar-right page-scroll"><!--second UL to go to right having proprty to scroll page-->
38 - <li> <a href="/About Us/About Us.html">About Us</a></li>
39 - <li><a href="/EMOJI-HUMAN/EMOJI-HUMAN.html">EMOJI-HUMAN</a></li>
40 - <li><a href="/EMO-TI/EMO-TI.html">EMO-TI</a></li>
41 - <li><a href="/EMO-SSAGE/EMO-SSAGE.html">EMO-SSAGE</a></li>
42 - </ul>
43 </div> 14 </div>
44 - </div> 15 + <!-- partial -->
45 - </nav> 16 + <script src="https://odd-mune.github.io/EMOJI-HUMAN/index.js"></script>
46 - <!-- 내비게이션 -->
47 17
18 + <button id="button1" onclick="document.location='https://odd-mune.github.io/EMOJI-HUMAN/About Us/About Us.html'">About Us</button>
19 + <button id="button2" onclick="document.location='https://odd-mune.github.io/EMOJI-HUMAN/EMOJI-HUMAN/EMOJI-HUMAN.html'">EMOJI-HUMAN</button>
20 + <button id="button3" onclick="document.location='https://odd-mune.github.io/EMOJI-HUMAN/EMO-TI/EMO-TI.html'">EMO-TI</button>
21 + <button id="button4" onclick="document.location='https://odd-mune.github.io/EMOJI-HUMAN/EMO-SSAGE/EMO-SSAGE.html'">EMO-SSAGE</button>
48 22
49 - <!-- 이모지 얼굴 --> 23 + <br />
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;"> 24 + <hr />
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 25
69 - <script src='https://cdnjs.cloudflare.com/ajax/libs/parallax/2.1.3/parallax.min.js'></script><script>src="/face.js"></script>
70 - </div>
71 - <!-- 이모지 얼굴 -->
72 26
73 - <!-- 이모지 레인 -->
74 - <div style="z-index: 1;">
75 - <link href="https://fonts.googleapis.com/css?family=Oswald:600,700" rel="stylesheet">
76 - <div id="all">
77 - <div id="container">
78 - <div id="animate">
79 - </div>
80 - </div>
81 - </div>
82 -
83 - <div id="footer" style="">
84 - <p>W e l c o m e &nbsp;&nbsp;t o &nbsp;&nbsp;E M O J I &nbsp;&nbsp;H U M A N &nbsp;&nbsp;W o r l d</p>
85 - </div>
86 -
87 - <script src="/index.js"></script>
88 - </div>
89 - <!-- 이모지 레인 -->
90 -
91 - </div>
92 - <script src="/index.js"></script>
93 - <!-- 큰 묶음은 배경임 -->
94 </body> 27 </body>
......
1 -// 배경 그라디언트 1 +//the only purpose of this is to generate the CSS keyframes
2 +
2 var str = 0; 3 var str = 0;
3 var num = 100; 4 var num = 100;
4 var porcents = 100; 5 var porcents = 100;
...@@ -11,75 +12,3 @@ var str = 0; ...@@ -11,75 +12,3 @@ var str = 0;
11 num = num - 0.5; 12 num = num - 0.5;
12 porcents = porcents -1; 13 porcents = porcents -1;
13 } 14 }
...\ No newline at end of file ...\ No newline at end of file
14 -// 배경 그라디언트
15 -
16 -
17 -
18 -
19 -// 이모지 레인
20 - var container = document.getElementById('animate');
21 - var emoji = ['🍹', '🐻', '✌', '🍒', '🥕', '🎸', '🍭', '💖', '🥰', '🎵', '🌏', '🍰', '🎃', '🎅', '🌈', '🌷', '🥳', '🦄', '🍀', '👻', '🌴', '🐬', '🎁'];
22 - var circles = [];
23 -
24 - for (var i = 0; i < 15; i++) {
25 - addCircle(i * 150, [10 + 0, 300], emoji[Math.floor(Math.random() * emoji.length)]);
26 - addCircle(i * 150, [10 + 0, -300], emoji[Math.floor(Math.random() * emoji.length)]);
27 - addCircle(i * 150, [10 - 200, -300], emoji[Math.floor(Math.random() * emoji.length)]);
28 - addCircle(i * 150, [10 + 200, 300], emoji[Math.floor(Math.random() * emoji.length)]);
29 - addCircle(i * 150, [10 - 400, -300], emoji[Math.floor(Math.random() * emoji.length)]);
30 - addCircle(i * 150, [10 + 400, 300], emoji[Math.floor(Math.random() * emoji.length)]);
31 - addCircle(i * 150, [10 - 600, -300], emoji[Math.floor(Math.random() * emoji.length)]);
32 - addCircle(i * 150, [10 + 600, 300], emoji[Math.floor(Math.random() * emoji.length)]);
33 - }
34 -
35 -
36 -
37 - function addCircle(delay, range, color) {
38 - setTimeout(function() {
39 - var c = new Circle(range[0] + Math.random() * range[1], 80 + Math.random() * 4, color, {
40 - x: -0.15 + Math.random() * 0.3,
41 - y: 1 + Math.random() * 1
42 - }, range);
43 - circles.push(c);
44 - }, delay);
45 - }
46 -
47 - function Circle(x, y, c, v, range) {
48 - var _this = this;
49 - this.x = x;
50 - this.y = y;
51 - this.color = c;
52 - this.v = v;
53 - this.range = range;
54 - this.element = document.createElement('span');
55 - /*this.element.style.display = 'block';*/
56 - this.element.style.opacity = 0;
57 - this.element.style.position = 'absolute';
58 - this.element.style.fontSize = '26px';
59 - this.element.style.color = 'hsl('+(Math.random()*360|0)+',80%,50%)';
60 - this.element.innerHTML = c;
61 - container.appendChild(this.element);
62 -
63 - this.update = function() {
64 - if (_this.y > 800) {
65 - _this.y = 80 + Math.random() * 4;
66 - _this.x = _this.range[0] + Math.random() * _this.range[1];
67 - }
68 - _this.y += _this.v.y;
69 - _this.x += _this.v.x;
70 - this.element.style.opacity = 1;
71 - this.element.style.transform = 'translate3d(' + _this.x + 'px, ' + _this.y + 'px, 0px)';
72 - this.element.style.webkitTransform = 'translate3d(' + _this.x + 'px, ' + _this.y + 'px, 0px)';
73 - this.element.style.mozTransform = 'translate3d(' + _this.x + 'px, ' + _this.y + 'px, 0px)';
74 - };
75 - }
76 -
77 - function animate() {
78 - for (var i in circles) {
79 - circles[i].update();
80 - }
81 - requestAnimationFrame(animate);
82 - }
83 -
84 - animate();
85 -// 이모지 레인
...\ No newline at end of file ...\ No newline at end of file
......

135 KB | W: | H:

75.5 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

107 KB | W: | H:

59.9 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin