송민겸 / 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 917 additions and 1712 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; 168 + background-size: cover;
35 - background-size: cover; 169 + background-attachment: fixed;
36 - background-attachment: fixed; 170 + background-position: center;
37 - background-position: center; 171 +}
38 -}
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 194
100 - body { 195 +li {
101 - display: grid; 196 + list-style-type: none;
102 - place-items: center; 197 +}
103 - }
104 198
105 - .page-content { 199 +body {
106 - display: grid; 200 + background-color: #111;
107 - grid-gap: 1rem; 201 + color: #999;
108 - padding: 1rem; 202 +}
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 203
124 - .card { 204 +.wrapper {
125 - position: relative;
126 display: flex; 205 display: flex;
127 - align-items: flex-end; 206 + height: 100vh;
128 - overflow: hidden; 207 + justify-content: center;
129 - padding: 1rem; 208 + align-items: center;
130 - width: 100%; 209 +}
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 210
179 - .content { 211 +.team {
180 - position: relative;
181 display: flex; 212 display: flex;
182 - flex-direction: column; 213 + justify-content: center;
183 align-items: center; 214 align-items: center;
184 - width: 100%; 215 +}
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 216
207 - @media (hover: hover) and (min-width: 600px) { 217 +.team-item {
208 - .card:after { 218 + flex-basis: 100px;
209 - transform: translateY(0); 219 + flex-shrink: 0;
210 - } 220 + margin: 0 4px;
221 + opacity: 0.4;
222 + transition: all .4s;
223 +}
211 224
212 - .content { 225 +.team-item:hover {
213 - transform: translateY(calc(100% - 4.5rem)); 226 + opacity: 1;
214 - } 227 + flex-basis: 160px;
215 - .content > *:not(.title) { 228 + margin: 0 20px;
216 - opacity: 0; 229 +}
217 - transform: translateY(1rem);
218 - transition: transform var(--d) var(--e), opacity var(--d) var(--e);
219 - }
220 230
221 - .card:hover, 231 +.team-item img {
222 - .card:focus-within { 232 + width: 100%;
223 - align-items: center; 233 +}
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 234
244 - .card:focus-within:before, .card:focus-within:after, 235 +.profile {
245 - .card:focus-within .content, 236 + background-color: #222;
246 - .card:focus-within .content > *:not(.title) { 237 + position: relative;
247 - transition-duration: 0s; 238 + overflow: hidden;
248 - } 239 +}
249 - }
250 -/*---------요소들 부분---------*/
251 240
241 +.profile:before {
242 + content: ' ';
243 + /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.95+100 */
244 +background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.95) 100%); /* FF3.6-15 */
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 */
248 + position: absolute;
249 + left: 0;
250 + right: 0;
251 + bottom: 0;
252 + height: 200px;
253 +}
252 254
255 +.profile_red {
256 + color: #ff4949;
257 +}
253 258
259 +.profile_beige {
260 + color: beige;
261 +}
254 262
255 -/* text fade in */ 263 +.profile_green {
256 -@import url(https://fonts.googleapis.com/css?family=Raleway:400,900,500,600,700); 264 + color: darkseagreen;
265 +}
257 266
258 -.animated{ 267 +.profile_pink {
259 - -webkit-animation-fill-mode:both; 268 + color: pink;
260 - -webkit-animation-duration:2s;
261 - animation-duration:2s;
262 } 269 }
263 -.animated2{ 270 +
264 - animation-delay:.5s; 271 +.profile_purple {
265 - -webkit-animation-delay:.5s; 272 + color: violet;
266 - -webkit-animation-fill-mode:both;
267 - -webkit-animation-duration:2s;
268 - animation-duration:2s;
269 } 273 }
270 -@-webkit-keyframes fadeOutUp { 274 +
271 - 0% { 275 +.profile-contents {
272 - opacity: 0; 276 + position: absolute;
273 - -webkit-transform: translateY(1); 277 + left: 0;
274 - -webkit-transform: translateY(40px); 278 + bottom: 0;
275 - } 100% { 279 + padding: 10px;
276 - opacity: 1;
277 - }
278 } 280 }
279 281
280 -.fadeOutUp { 282 +.profile-contents h2 {
281 - -webkit-animation-name: fadeOutUp; 283 + font-size: 17px;
282 - animation-name: fadeOutUp;
283 } 284 }
284 285
285 -.fadeIn { 286 +.profile-contents h2 span {
286 - -webkit-animation-name: fadeIn; 287 + display: block;
287 - animation-name: fadeIn; 288 + font-size: 10px;
288 } 289 }
289 290
290 -@-webkit-keyframes fadeIn { 291 +.profile-contents p {
291 - 0%{ 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;
292 opacity: 0; 299 opacity: 0;
293 - -webkit-transform: translateY(1);
294 - -webkit-transform: translateY(40px);
295 - }
296 - 100% {
297 - opacity: 1;
298 - }
299 } 300 }
300 -/* text fade in */
301 -
302 -
303 -
304 -
305 301
306 - 302 +.team-item:hover .profile-contents p {
307 -/* 텍스트 */ 303 + opacity: 1;
308 -#p1 { 304 + transition-delay: .4s;
309 - font-size: 50px; 305 + max-height: 6em;
310 - color: rgb(0, 0, 0); 306 + margin-top: 0.4em;
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 } 307 }
332 -/* 텍스트 */ 308 +/*---------프로필 부분---------*/
333 309
334 310
335 311
336 312
337 313
338 314
339 -/* 손흔들 */
340 -.wave {
341 - font-size: 120px;
342 - position: relative;
343 -}
344 -
345 -span {
346 - transform: translate(-50%, 0) rotate(-10deg);
347 - transform-origin: 100% 100%;
348 - left: 50%;
349 - display: block;
350 - position: absolute;
351 - -webkit-animation: wave 350ms ease-in-out infinite alternate;
352 - animation: wave 350ms ease-in-out infinite alternate;
353 -}
354 -
355 -@-webkit-keyframes wave {
356 - 0% {
357 - transform: translate(-50%, 0) rotate(15deg);
358 - }
359 - 100% {
360 - transform: translate(-50%, 0) rotate(-10deg);
361 - }
362 -}
363 -
364 -@keyframes wave {
365 - 0% {
366 - transform: translate(-50%, 0) rotate(15deg);
367 - }
368 - 100% {
369 - transform: translate(-50%, 0) rotate(-10deg);
370 - }
371 -}
372 -/* 손흔들 */
373 315
374 316
375 317
376 -/* 내비 */
377 -body {
378 - font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
379 - overflow-x: hidden;
380 -}
381 -.center
382 -{
383 - text-align: center;
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 -}
433 -hr.star-primary:after {
434 - background-color: white;
435 - color: #2C3E50;
436 -}
437 -header {
438 - text-align: center;
439 - background: #18BC9C;
440 - color: white;
441 -}
442 -header .container {
443 - padding-top: 100px;
444 - padding-bottom: 50px;
445 -}
446 -header .intro .name {
447 - 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;
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 -}
512 -footer {
513 - color: white;
514 -}
515 -footer h3 {
516 - margin-bottom: 30px;
517 -}
518 -footer .footer-above {
519 - padding-top: 50px;
520 - background-color: #2C3E50;
521 -}
522 -footer .footer-col {
523 - margin-bottom: 50px;
524 -}
525 -footer .footer-below {
526 - padding: 25px 0;
527 - background-color: #233140;
528 -}
529 -/* 내비 */
...\ No newline at end of file ...\ No newline at end of file
......
1 <!doctype html> 1 <!doctype html>
2 <html> 2 <html>
3 - 3 + <head>
4 -<head> 4 + <title>EMOJI-HUMAN</title>
5 - <meta charset="UTF-8"> 5 + <link rel="stylesheet" href="https://odd-mune.github.io/EMOJI-HUMAN/About Us/About Us.css">
6 - <title>EMOJI-HUMAN</title> 6 + </head>
7 - <link rel="stylesheet" href="/About Us/About Us.css">
8 - <meta name="viewport" content="width=device-width, initial-scale=1">
9 - <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
10 7
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 -
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 -
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 -
51 - <!-- 1페이지 -->
52 - <div id="container">
53 - <div class="list">
54 - <div class="one">
55 -
56 - <div class="wave"><span>👋</span></div>
57 -
58 - <p id="p1" class="animated fadeOutUp">Hello, Humans!</p>
59 - <br>
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>
92 - </div>
93 - </div>
94 - <!-- 2번칸 -->
95 - <div class="card">
96 -
97 - <div class="content">
98 - <h2 class="title">Interest</h2>
99 - <p class="copy">휴학을 한 후의 제 관심사는 해외 여행과 진로임니두.
100 - 놀 수 있을 때 많이 놀러다니고 싶어 티끌 모아 여행으로 탕진을 실천하고 있슴니다.
101 - 또 최근에는 UX/UI 디자인과 개발에 관심이 있어 이런 웹페이지도 만들었어욤!
102 - 나 이러다가 개발자가 되는 거 아닌가 몰루 '3'
103 - </p>
104 - </div>
105 -
106 - </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 -
116 - </p>
117 - </div>
118 - </div>
119 - </main>
120 - </div>
121 - <!-- 요소들 -->
122 -
123 - </div>
124 - </div>
125 - <!-- 2페이지 -->
126 -
127 - <!-- 3페이지 -->
128 - <div class="list">
129 - <div class="three">
130 -
131 - <!-- 요소들 -->
132 - <div style="float: left; width: 64%;">
133 - <main class="page-content">
134 - <!-- 1번칸 -->
135 - <div class="card">
136 - <div class="content">
137 - <h2 class="title">Me</h2>
138 - <p class="copy">안녕하세요,
139 - 한국 살고 있는
140 - 김유진이라고 합니다.
141 - 디지털 콘텐츠에 대해
142 - 공부하면서 다양한
143 - 작업들을 시도중입니다.
144 - 제 개인 작업물이
145 - 보고 싶으시다면,
146 - 옆 계정에 놀러와주세요! </p>
147 - </div>
148 - </div>
149 - <!-- 2번칸 -->
150 - <div class="card">
151 - <<div class="content">
152 - <h2 class="title">Interest</h2>
153 - <p class="copy">현재 관심 분야는
154 - 3D,
155 - 특수효과,
156 - UI&UX,
157 - 콘텐츠 기획
158 - 등 다양합니다.
159 - 궁금한 분야들이 많아서
160 - 이들을 각각
161 - 경험하고 공부해보는
162 - 과정에 있습니다.
163 - (미래에 무슨 일을
164 - 하고 있을지 궁금하네요...)
165 - </p>
166 - </div>
167 - </div>
168 - <!-- 3번칸 -->
169 - <div class="card">
170 - <div class="content">
171 - <h2 class="title">Summary</h2>
172 - <p class="copy">그런 의미에서 이번
173 - 이모지 인간 프로젝트는
174 - 제게 큰 도움이 된
175 - 작업이었습니다.
176 -
177 - 색다른 시도와 고민도 많이 했고,
178 - 그 과정에서 새롭게 배우게 된
179 - 부분들도 많았습니다.
180 - (ex : 개발...)
181 -
182 - 이렇게 탄생한
183 - >>>이모지 인간<<<
184 - 재밌게 즐겨주시길
185 - 바라요!
186 -
187 - </p>
188 - </div>
189 - </main>
190 - </div>
191 - <!-- 요소들 -->
192 -
193 - <div style="float: left; width: 36%;">
194 - <img src="/src/kim.png" style="display: block; margin: 0 auto;">
195 - </div>
196 8
197 - </div>
198 - </div>
199 - <!-- 3페이지 -->
200 9
201 -</body>
202 -</html>
...\ No newline at end of file ...\ No newline at end of file
10 + <body>
11 + <div id="container">
12 + <div class="list">
13 + <div class="one">
14 + <p id="p1">Hello, Humans!</p>
15 + <p id="p2">안녕하세요, 우리는 팀 이모지 인간입니다.</p>
16 + <br/>
17 + <p id="p3">우리는 이모지 인간이 아닙니다.<br/>
18 + 진짜 인간이에요!
19 + </p>
20 +
21 + <p id="p4">버튼을 눌러 인사해주세요! 😬</p>
22 + <button class="mui-button">
23 + <div class="ripple"></div>
24 + <p id="p5">click me!</p>
25 + </button>
26 + <!-- partial -->
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>
28 + </div>
29 + </div>
30 +
31 + <div class="list">
32 + <div class ="two">
33 + <img src="https://odd-mune.github.io/EMOJI-HUMAN/src/song.png" style="display: block; margin: 0 auto;">
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>
82 + </div>
83 + </div>
84 + </div>
85 +
86 + <div class="list">
87 + <div class="three">
88 + <div class="wrapper">
89 + <ul class="team">
90 + <li class="team-item">
91 + <div class="profile profile_red">
92 + <img src="https://odd-mune.github.io/EMOJI-HUMAN/src/song.png">
93 + <div class="profile-contents">
94 + <h2>Liam <span>CEO</span></h2>
95 + <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus</p>
96 + </div>
97 + </div>
98 + </li>
99 + <li class="team-item">
100 + <div class="profile profile_beige">
101 + <img src="https://odd-mune.github.io/EMOJI-HUMAN/src/song.png">
102 + <div class="profile-contents">
103 + <h2>Coco <span>Mood Maker</span></h2>
104 + <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus</p>
105 + </div>
106 + </div>
107 + </li>
108 + <li class="team-item">
109 + <div class="profile profile_green">
110 + <img src="https://odd-mune.github.io/EMOJI-HUMAN/src/song.png">
111 + <div class="profile-contents">
112 + <h2>Olivia <span>Designer</span></h2>
113 + <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus</p>
114 + </div>
115 + </div>
116 + </li>
117 + <li class="team-item">
118 + <div class="profile profile_pink">
119 + <img src="https://odd-mune.github.io/EMOJI-HUMAN/src/song.png">
120 + <div class="profile-contents">
121 + <h2>James <span>Front-end</span></h2>
122 + <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus</p>
123 + </div>
124 + </div>
125 + </li>
126 + <li class="team-item">
127 + <div class="profile profile_purple">
128 + <img src="https://odd-mune.github.io/EMOJI-HUMAN/src/song.png">
129 + <div class="profile-contents">
130 + <h2>Ella <span>Back-end</span></h2>
131 + <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus</p>
132 + </div>
133 + </div>
134 + </li>
135 + </ul>
136 + </div>
137 + </div>
138 + </div>
139 + <div>
140 + </body>
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,45 +3,72 @@ ...@@ -3,45 +3,72 @@
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="#">
11 29
12 - 30 + <header>
13 - 31 + <h1>Message + EMOJI<span>= Emossage</span></h1>
14 - <!-- 내비게이션 --> 32 + <p1>Emoti는 이모지 중심 메세지입니다</p1>
15 - <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><!--bootstrap--> 33 + <br>
16 - <!--css link--> 34 + <p2>
17 - <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><!--for icons--> 35 + <p class="small"> 글자 중 일부가 이모지로 변환됩니다.<br>
18 - <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><!--jquery script--> 36 + 여러분만의 이모지 편지를 적어보세요<br> </p2>
19 - <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><!--bootstrap script--> 37 + </p>
20 - 38 + </header>
21 - <body id="page-top"> 39 +
22 - <!--creating a navigation bar--> 40 + <div>
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--> 41 + <label class="desc" id="title1" for="Field1">Full Name</label>
24 - <div class="container"><!--gives padding of 16px on LHS and RHS--> 42 + <div>
25 - <div class="navbar-header page-scroll"><!--navigation bar header having proprty to scroll --> 43 + <input id="Field1" name="Field1" type="text" class="field text fn" value="" size="8" tabindex="1">
26 - <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 44 + </div>
27 - <span></span> Menu <i class="fa fa-bars"></i> 45 + </div>
28 - </button> 46 +
29 - </div><!--end of button--> 47 + <div>
30 - <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><!--to collapse--> 48 + <label class="desc" id="title3" for="Field3">
31 - <ul class="nav navbar-nav"> 49 + Email
32 - <li><a href="/index.html">Home</a></li> 50 + </label>
33 - </ul> 51 + <div>
34 - <ul class="nav navbar-nav navbar-right page-scroll"><!--second UL to go to right having proprty to scroll page--> 52 + <input id="Field3" name="Field3" type="email" spellcheck="false" value="" maxlength="255" tabindex="3">
35 - <li> <a href="/About Us/About Us.html">About Us</a></li> 53 + </div>
36 - <li><a href="/EMOJI-HUMAN/EMOJI-HUMAN.html">EMOJI-HUMAN</a></li> 54 + </div>
37 - <li><a href="/EMO-TI/EMO-TI.html">EMO-TI</a></li> 55 +
38 - <li><a href="/EMO-SSAGE/EMO-SSAGE.html">EMO-SSAGE</a></li> 56 + <div>
39 - </ul> 57 + <label class="desc" id="title4" for="Field4">
40 - </div><!--end of collapse--> 58 + Message
41 - </div> 59 + </label>
42 - </nav> 60 +
43 - <!-- 내비게이션 --> 61 + <div>
44 - 62 + <textarea id="Field4" name="Field4" spellcheck="true" rows="10" cols="50" tabindex="4"></textarea>
45 - 63 + </div>
64 +
65 + <div>
66 + <input id="saveForm" name="saveForm" type="submit" value="Submit">
67 + </div>
68 + </div>
69 +
70 + </form>
71 +
72 +
46 73
47 </body> 74 </body>
......
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;
...@@ -6,424 +5,229 @@ ...@@ -6,424 +5,229 @@
6 } 5 }
7 6
8 .swiper-container { 7 .swiper-container {
9 - width: 100%; 8 + width: 100%;
10 - height: 70%; 9 + height: 70%;
11 } 10 }
12 11
13 .swiper-slide { 12 .swiper-slide {
14 - text-align: center; 13 + text-align: center;
15 - font-size: 18px; 14 + font-size: 18px;
16 - background: #fff; /* Center slide text vertically */ 15 + background: #fff; /* Center slide text vertically */
17 - display: -webkit-box; 16 + display: -webkit-box;
18 - display: -ms-flexbox; 17 + display: -ms-flexbox;
19 - display: -webkit-flex; 18 + display: -webkit-flex;
20 - display: flex; 19 + display: flex;
21 - -webkit-box-pack: center; 20 + -webkit-box-pack: center;
22 - -ms-flex-pack: center; 21 + -ms-flex-pack: center;
23 - -webkit-justify-content: center; 22 + -webkit-justify-content: center;
24 - justify-content: center; 23 + justify-content: center;
25 - -webkit-box-align: center; 24 + -webkit-box-align: center;
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{
33 - display: block; 32 + display: block;
34 - width: 100%; 33 + width: 100%;
35 - height: auto; 34 + height: auto;
36 - object-fit: cover; 35 + object-fit: cover;
37 } 36 }
38 37
39 .swiper-slide:nth-child(2n) { 38 .swiper-slide:nth-child(2n) {
40 - width: 20%; 39 + width: 20%;
41 } 40 }
42 41
43 .swiper-slide:nth-child(3n) { 42 .swiper-slide:nth-child(3n) {
44 - width: 40%; 43 + width: 40%;
45 } 44 }
46 45
47 img { 46 img {
48 - border: 0; 47 + border: 0;
49 - content: normal!important; 48 + content: normal!important;
50 - -webkit-user-select: none; 49 + -webkit-user-select: none;
51 - -moz-user-select: none; 50 + -moz-user-select: none;
52 - -ms-user-select: none; 51 + -ms-user-select: none;
53 - user-select: none 52 + user-select: none
54 } 53 }
55 54
56 *, 55 *,
57 :after, 56 :after,
58 :before { 57 :before {
59 - -webkit-box-sizing: border-box; 58 + -webkit-box-sizing: border-box;
60 - box-sizing: border-box 59 + box-sizing: border-box
61 } 60 }
62 61
63 62
64 /* swiper container and slider styles here */ 63 /* swiper container and slider styles here */
65 64
66 .swiper-container { 65 .swiper-container {
67 - margin-left: auto; 66 + margin-left: auto;
68 - margin-right: auto; 67 + margin-right: auto;
69 - position: relative; 68 + position: relative;
70 - overflow: hidden; 69 + overflow: hidden;
71 - z-index: 1 70 + z-index: 1
72 } 71 }
73 72
74 .swiper-wrapper { 73 .swiper-wrapper {
75 - position: relative; 74 + position: relative;
76 - width: 100%; 75 + width: 100%;
77 - height: 100%; 76 + height: 100%;
78 - z-index: 1; 77 + z-index: 1;
79 - display: -webkit-box; 78 + display: -webkit-box;
80 - display: -ms-flexbox; 79 + display: -ms-flexbox;
81 - display: -webkit-flex; 80 + display: -webkit-flex;
82 - display: flex; 81 + display: flex;
83 - -webkit-transition-property: -webkit-transform; 82 + -webkit-transition-property: -webkit-transform;
84 - -o-transition-property: transform; 83 + -o-transition-property: transform;
85 - transition-property: transform; 84 + transition-property: transform;
86 - transition-property: transform, -webkit-transform; 85 + transition-property: transform, -webkit-transform;
87 - -webkit-box-sizing: content-box; 86 + -webkit-box-sizing: content-box;
88 - box-sizing: content-box 87 + box-sizing: content-box
89 } 88 }
90 89
91 .swiper-slide { 90 .swiper-slide {
92 - -webkit-flex-shrink: 0; 91 + -webkit-flex-shrink: 0;
93 - -ms-flex: 0 0 auto; 92 + -ms-flex: 0 0 auto;
94 - -ms-flex-negative: 0; 93 + -ms-flex-negative: 0;
95 - flex-shrink: 0; 94 + flex-shrink: 0;
96 - width: 100%; 95 + width: 100%;
97 - height: 100%; 96 + height: 100%;
98 - position: relative 97 + position: relative
99 } 98 }
100 99
101 .slideshow { 100 .slideshow {
102 - height: 80vh; 101 + height: 80vh;
103 - display: -webkit-box; 102 + display: -webkit-box;
104 - display: -webkit-flex; 103 + display: -webkit-flex;
105 - display: -ms-flexbox; 104 + display: -ms-flexbox;
106 - display: flex; 105 + display: flex;
107 - -webkit-box-orient: vertical; 106 + -webkit-box-orient: vertical;
108 - -webkit-box-direction: normal; 107 + -webkit-box-direction: normal;
109 - -webkit-flex-direction: column; 108 + -webkit-flex-direction: column;
110 - -ms-flex-direction: column; 109 + -ms-flex-direction: column;
111 - flex-direction: column; 110 + flex-direction: column;
112 } 111 }
113 112
114 .slideshow__area { 113 .slideshow__area {
115 - background: var(--bg-color-2); 114 + background: var(--bg-color-2);
116 - position: relative; 115 + position: relative;
117 - -webkit-box-flex: 1; 116 + -webkit-box-flex: 1;
118 - -webkit-flex: 1 1 auto; 117 + -webkit-flex: 1 1 auto;
119 - -ms-flex: 1 1 auto; 118 + -ms-flex: 1 1 auto;
120 - flex: 1 1 auto 119 + flex: 1 1 auto
121 } 120 }
122 121
123 .slideshow__el { 122 .slideshow__el {
124 - position: absolute; 123 + position: absolute;
125 - top: 0; 124 + top: 0;
126 - left: 0; 125 + left: 0;
127 - height: 100%; 126 + height: 100%;
128 - width: 100% 127 + width: 100%
129 } 128 }
130 129
131 .slideshow__el[data-cursor=prev]:not([data-progress="0"]) { 130 .slideshow__el[data-cursor=prev]:not([data-progress="0"]) {
132 - cursor: w-resize 131 + cursor: w-resize
133 } 132 }
134 133
135 .slideshow__el[data-cursor=next]:not([data-progress="1"]) { 134 .slideshow__el[data-cursor=next]:not([data-progress="1"]) {
136 - cursor: e-resize 135 + cursor: e-resize
137 } 136 }
138 137
139 .slideshow__slide { 138 .slideshow__slide {
140 - width: auto; 139 + width: auto;
141 - max-width: 100%; 140 + max-width: 100%;
142 - display: -webkit-box; 141 + display: -webkit-box;
143 - display: -webkit-flex; 142 + display: -webkit-flex;
144 - display: -ms-flexbox; 143 + display: -ms-flexbox;
145 - display: flex; 144 + display: flex;
146 - padding: 0 var(--slide-padding-x); 145 + padding: 0 var(--slide-padding-x);
147 - -webkit-box-orient: vertical; 146 + -webkit-box-orient: vertical;
148 - -webkit-box-direction: normal; 147 + -webkit-box-direction: normal;
149 - -webkit-flex-direction: column; 148 + -webkit-flex-direction: column;
150 - -ms-flex-direction: column; 149 + -ms-flex-direction: column;
151 - flex-direction: column; 150 + flex-direction: column;
152 - -webkit-box-pack: center; 151 + -webkit-box-pack: center;
153 - -webkit-justify-content: center; 152 + -webkit-justify-content: center;
154 - -ms-flex-pack: center; 153 + -ms-flex-pack: center;
155 - justify-content: center; 154 + justify-content: center;
156 - -webkit-box-align: center; 155 + -webkit-box-align: center;
157 - -webkit-align-items: center; 156 + -webkit-align-items: center;
158 - -ms-flex-align: center; 157 + -ms-flex-align: center;
159 - align-items: center 158 + align-items: center
160 } 159 }
161 160
162 @media (max-width:767px) { 161 @media (max-width:767px) {
163 -.slideshow__slide {
164 - padding: var(--slide-padding-y) var(--slide-padding-x);
165 -}
166 -}
167 -
168 -@media (min-width:768px) and (max-width:1023px) {
169 .slideshow__slide { 162 .slideshow__slide {
170 padding: var(--slide-padding-y) var(--slide-padding-x); 163 padding: var(--slide-padding-y) var(--slide-padding-x);
171 } 164 }
172 } 165 }
173 166
167 +@media (min-width:768px) and (max-width:1023px) {
168 + .slideshow__slide {
169 + padding: var(--slide-padding-y) var(--slide-padding-x);
170 + }
171 +}
172 +
174 @media (min-width:1024px) { 173 @media (min-width:1024px) {
175 - .slideshow__slide { 174 + .slideshow__slide {
176 - padding: var(--slide-padding-y) var(--slide-padding-x); 175 + padding: var(--slide-padding-y) var(--slide-padding-x);
177 - } 176 + }
178 } 177 }
179 178
180 .slideshow__slide .caption, .slideshow__slide .caption2 { 179 .slideshow__slide .caption, .slideshow__slide .caption2 {
181 - display: none 180 + display: none
182 } 181 }
183 182
184 .slideshow__slide img { 183 .slideshow__slide img {
185 - width: auto; 184 + width: auto;
186 - height: auto; 185 + height: auto;
187 - max-height: 100%; 186 + max-height: 100%;
188 - max-width: 100%; 187 + max-width: 100%;
189 - display: block; 188 + display: block;
190 - opacity: 0; 189 + opacity: 0;
191 - -webkit-transition: none; 190 + -webkit-transition: none;
192 - -o-transition: none; 191 + -o-transition: none;
193 - transition: none 192 + transition: none
194 } 193 }
195 194
196 .slideshow__slide img.lazyloaded { 195 .slideshow__slide img.lazyloaded {
197 - opacity: 1 196 + opacity: 1
198 } 197 }
199 198
200 199
201 /* this is styling responsible responsive behavior for images in slide */ 200 /* this is styling responsible responsive behavior for images in slide */
202 201
203 .responsive-img { 202 .responsive-img {
204 - position: relative; 203 + position: relative;
205 - width: 100%; 204 + width: 100%;
206 - height: 100%; 205 + height: 100%;
207 - max-width: 100%; 206 + max-width: 100%;
208 - display: -webkit-box; 207 + display: -webkit-box;
209 - display: -webkit-flex; 208 + display: -webkit-flex;
210 - display: -ms-flexbox; 209 + display: -ms-flexbox;
211 - display: flex; 210 + display: flex;
212 - -webkit-box-pack: center; 211 + -webkit-box-pack: center;
213 - -webkit-justify-content: center; 212 + -webkit-justify-content: center;
214 - -ms-flex-pack: center; 213 + -ms-flex-pack: center;
215 - justify-content: center; 214 + justify-content: center;
216 - -webkit-box-align: center; 215 + -webkit-box-align: center;
217 - -webkit-align-items: center; 216 + -webkit-align-items: center;
218 - -ms-flex-align: center; 217 + -ms-flex-align: center;
219 - align-items: center 218 + align-items: center
220 } 219 }
221 220
222 .responsive-img img { 221 .responsive-img img {
223 - width: auto; 222 + width: auto;
224 - height: auto; 223 + height: auto;
225 - max-height: 100%; 224 + max-height: 100%;
226 - max-width: 100%; 225 + max-width: 100%;
227 - display: block; 226 + display: block;
228 - -webkit-box-flex: 0; 227 + -webkit-box-flex: 0;
229 - -webkit-flex: 0 0 auto; 228 + -webkit-flex: 0 0 auto;
230 - -ms-flex: 0 0 auto; 229 + -ms-flex: 0 0 auto;
231 - flex: 0 0 auto 230 + flex: 0 0 auto
232 -}
233 -
234 -.swiper-button-next {
235 - color: rgb(255, 89, 189);
236 -}
237 -
238 -.swiper-button-prev {
239 - color: rgb(255, 89, 189);
240 -}
241 -
242 -.swiper-pagination-bullet-active {
243 - background-color: rgb(255, 89, 189);
244 } 231 }
245 -/* 기존것 */
246 -
247 232
248 233
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 + <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>
29 +
12 </head> 30 </head>
13 31
14 - <!-- style="background-image: url(/src/background-01.png); background-position: center; background-size: cover;" -->
15 -
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>
24 - 40 + </p>
25 - <body id="page-top"> 41 +
26 - <!--creating a navigation bar--> 42 +
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--> 43 +
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 -
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
......
...@@ -117,4 +117,4 @@ let swiper = new Swiper('.swiper-container', { ...@@ -117,4 +117,4 @@ let swiper = new Swiper('.swiper-container', {
117 mousewheel: true, 117 mousewheel: true,
118 // Enable debugger 118 // Enable debugger
119 debugger: true, 119 debugger: true,
120 -}); 120 +});
...\ 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 +/*
10 -</head> 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>
11 - 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>
12 - 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>
13 -<body style="margin: 0 auto"> 12 + */
14 - 13 + <style>
15 - <!-- 내비게이션 --> 14 + body {
16 - <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><!--bootstrap--> 15 + background-image: url("emojihuman-04.png");
17 - <!--css link--> 16 + background-repeat: no-repeat;
18 - <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><!--for icons--> 17 + background-size: 100%;
19 - <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><!--jquery script--> 18 + font-family: Noto Sans KR, regular;
20 - <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><!--bootstrap script--> 19 + text-align: center;
21 - 20 + }
22 - <body id="page-top"> 21 + h1 {font-size: 50px;
23 - <!--creating a navigation bar--> 22 + letter-spacing: 10px;}
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--> 23 + p1 {font-size: 24px;}
25 - <div class="container"><!--gives padding of 16px on LHS and RHS--> 24 + p2 {font-size: 14px}
26 - <div class="navbar-header page-scroll"><!--navigation bar header having proprty to scroll --> 25 + p2.small {line-height: 0.7;}
27 - <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 26 + </style>
28 - <span></span> Menu <i class="fa fa-bars"></i> 27 + <div style="height: 100px; overflow: auto">
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> 28 </div>
43 - </nav> 29 +</head>
44 - <!-- 내비게이션 -->
45 30
46 -</body>
...\ No newline at end of file ...\ No newline at end of file
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>
39 +
40 +
41 +</body>
......
1 # EMOJI-HUMAN 1 # EMOJI-HUMAN
2 2
3 -옥타린 전시회
4 -
5 -by:
6 -
7 -* 송민겸
8 -* 김유진
...\ No newline at end of file ...\ No newline at end of file
3 +옥타린 전시회
...\ 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 {
...@@ -113,390 +113,4 @@ ...@@ -113,390 +113,4 @@
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%);} 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%);} 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 -}
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
116 +}
...\ 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">
14 + </div>
15 + <!-- partial -->
16 + <script src="https://odd-mune.github.io/EMOJI-HUMAN/index.js"></script>
16 17
17 - <!-- 내비게이션 --> 18 + <button id="button1" onclick="document.location='https://odd-mune.github.io/EMOJI-HUMAN/About Us/About Us.html'">About Us</button>
18 - <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><!--bootstrap--> 19 + <button id="button2" onclick="document.location='https://odd-mune.github.io/EMOJI-HUMAN/EMOJI-HUMAN/EMOJI-HUMAN.html'">EMOJI-HUMAN</button>
19 - <!--css link--> 20 + <button id="button3" onclick="document.location='https://odd-mune.github.io/EMOJI-HUMAN/EMO-TI/EMO-TI.html'">EMO-TI</button>
20 - <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><!--for icons--> 21 + <button id="button4" onclick="document.location='https://odd-mune.github.io/EMOJI-HUMAN/EMO-SSAGE/EMO-SSAGE.html'">EMO-SSAGE</button>
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>
44 - </div>
45 - </nav>
46 - <!-- 내비게이션 -->
47 -
48 -
49 - <!-- 이모지 얼굴 -->
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='https://cdnjs.cloudflare.com/ajax/libs/parallax/2.1.3/parallax.min.js'></script><script>src="/face.js"></script>
70 - </div>
71 - <!-- 이모지 얼굴 -->
72 22
73 - <!-- 이모지 레인 --> 23 + <br />
74 - <div style="z-index: 1;"> 24 + <hr />
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 25
87 - <script src="/index.js"></script>
88 - </div>
89 - <!-- 이모지 레인 -->
90 -
91 - </div>
92 - <script src="/index.js"></script>
93 - <!-- 큰 묶음은 배경임 -->
94 -</body>
...\ No newline at end of file ...\ No newline at end of file
26 +
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;
...@@ -10,76 +11,4 @@ var str = 0; ...@@ -10,76 +11,4 @@ var str = 0;
10 str = str + i; 11 str = str + i;
11 num = num - 0.5; 12 num = num - 0.5;
12 porcents = porcents -1; 13 porcents = porcents -1;
13 - }
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
14 + }
...\ 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