송민겸 / EMOJI-HUMAN

Go to a project
Toggle navigation Toggle navigation pinning
송민겸
78b97ace 1 parent 04a4aef7

final merge

Inline Side-by-side
Showing 11 changed files with 1655 additions and 660 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 -
135 1
136 /*---------scroll snap 부분---------*/ 2 /*---------scroll snap 부분---------*/
137 body { 3 body {
...@@ -163,155 +29,501 @@ body { ...@@ -163,155 +29,501 @@ body {
163 background-position: center; 29 background-position: center;
164 } */ 30 } */
165 31
166 -.list:nth-child(1){ 32 +/* .list:nth-child(1){
167 - background-color: #25fdcb; 33 + background-image: url("/src/background-01.png");
168 - background-size: cover; 34 + background-repeat: no-repeat;
169 - background-attachment: fixed; 35 + background-size: cover;
170 - background-position: center; 36 + background-attachment: fixed;
171 -} 37 + background-position: center;
38 +}
172 39
173 .list:nth-child(2){ 40 .list:nth-child(2){
174 - background-color: #000000; 41 + background-color: #ffffff;
175 background-size: cover; 42 background-size: cover;
176 background-attachment: fixed; 43 background-attachment: fixed;
177 background-position: center; 44 background-position: center;
178 } 45 }
179 46
180 .list:nth-child(3){ 47 .list:nth-child(3){
181 - background-color: #eeff2e; 48 + background-color: #ffffff;
182 background-size: cover; 49 background-size: cover;
183 background-attachment: fixed; 50 background-attachment: fixed;
184 background-position: center; 51 background-position: center;
185 -} 52 +} */
53 +
54 +
186 /*---------scroll snap 부분---------*/ 55 /*---------scroll snap 부분---------*/
187 56
188 57
189 -/*---------프로필 부분---------*/ 58 +
190 -body, ul, h2, p { 59 +/* 그라디언트 배경 */
60 + * {
61 + box-sizing: border-box;
191 margin: 0; 62 margin: 0;
192 padding: 0; 63 padding: 0;
193 -} 64 + }
194 65
195 -li { 66 + body {
196 - list-style-type: none; 67 + width: 100vw;
197 -} 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 +/* 그라디언트 배경 */
198 79
199 -body {
200 - background-color: #111;
201 - color: #999;
202 -}
203 80
204 -.wrapper {
205 - display: flex;
206 - height: 100vh;
207 - justify-content: center;
208 - align-items: center;
209 -}
210 81
211 -.team {
212 - display: flex;
213 - justify-content: center;
214 - align-items: center;
215 -}
216 82
217 -.team-item {
218 - flex-basis: 100px;
219 - flex-shrink: 0;
220 - margin: 0 4px;
221 - opacity: 0.4;
222 - transition: all .4s;
223 -}
224 83
225 -.team-item:hover { 84 +/*---------요소들 부분---------*/
226 - opacity: 1; 85 + @import url("https://fonts.googleapis.com/css?family=Cardo:400i|Rubik:400,700&display=swap");
227 - flex-basis: 160px; 86 + :root {
228 - margin: 0 20px; 87 + --d: 700ms;
229 -} 88 + --e: cubic-bezier(0.19, 1, 0.22, 1);
89 + --font-sans: "Noto Sans KR";
90 + }
230 91
231 -.team-item img { 92 + * {
232 - width: 100%; 93 + box-sizing: border-box;
233 -} 94 + }
95 +
96 + html, body {
97 + height: 100%;
98 + }
234 99
235 -.profile { 100 + body {
236 - background-color: #222; 101 + display: grid;
102 + place-items: center;
103 + }
104 +
105 + .page-content {
106 + display: grid;
107 + grid-gap: 1rem;
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 +
124 + .card {
237 position: relative; 125 position: relative;
126 + display: flex;
127 + align-items: flex-end;
238 overflow: hidden; 128 overflow: hidden;
239 -} 129 + padding: 1rem;
240 - 130 + width: 100%;
241 -.profile:before { 131 + text-align: center;
242 - content: ' '; 132 + color: whitesmoke;
243 - /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.95+100 */ 133 + background-color: whitesmoke;
244 -background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.95) 100%); /* FF3.6-15 */ 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);
245 -background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.95) 100%); /* Chrome10-25,Safari5.1-6 */ 135 + }
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+ */ 136 + @media (min-width: 600px) {
247 -filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#f2000000',GradientType=0 ); /* IE6-9 */ 137 + .card {
138 + height: 350px;
139 + }
140 + }
141 + .card:before {
142 + content: "";
248 position: absolute; 143 position: absolute;
144 + top: 0;
249 left: 0; 145 left: 0;
250 - right: 0; 146 + width: 100%;
251 - bottom: 0; 147 + height: 110%;
252 - height: 200px; 148 + background-size: cover;
253 -} 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 + }
254 178
255 -.profile_red { 179 + .content {
256 - color: #ff4949; 180 + position: relative;
257 -} 181 + display: flex;
182 + flex-direction: column;
183 + align-items: 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 + }
258 192
259 -.profile_beige { 193 + .title {
260 - color: beige; 194 + font-size: 1.3rem;
261 -} 195 + font-weight: bold;
196 + line-height: 1.2;
197 + }
262 198
263 -.profile_green { 199 + .copy {
264 - color: darkseagreen; 200 + font-family: var(--font-serif);
265 -} 201 + font-size: 1.125rem;
202 + font-style: italic;
203 + line-height: 1.35;
204 + }
266 205
267 -.profile_pink {
268 - color: pink;
269 -}
270 206
271 -.profile_purple { 207 + @media (hover: hover) and (min-width: 600px) {
272 - color: violet; 208 + .card:after {
273 -} 209 + transform: translateY(0);
210 + }
274 211
275 -.profile-contents { 212 + .content {
276 - position: absolute; 213 + transform: translateY(calc(100% - 4.5rem));
277 - left: 0; 214 + }
278 - bottom: 0; 215 + .content > *:not(.title) {
279 - padding: 10px; 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;
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 + }
280 } 278 }
281 279
282 -.profile-contents h2 { 280 +.fadeOutUp {
283 - font-size: 17px; 281 + -webkit-animation-name: fadeOutUp;
282 + animation-name: fadeOutUp;
284 } 283 }
285 284
286 -.profile-contents h2 span { 285 +.fadeIn {
287 - display: block; 286 + -webkit-animation-name: fadeIn;
288 - font-size: 10px; 287 + animation-name: fadeIn;
289 } 288 }
290 289
291 -.profile-contents p { 290 +@-webkit-keyframes fadeIn {
292 - color: white; 291 + 0%{
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; 292 opacity: 0;
293 + -webkit-transform: translateY(1);
294 + -webkit-transform: translateY(40px);
295 + }
296 + 100% {
297 + opacity: 1;
298 + }
300 } 299 }
300 +/* text fade in */
301 +
302 +
303 +
304 +
301 305
302 -.team-item:hover .profile-contents p { 306 +
303 - opacity: 1; 307 +/* 텍스트 */
304 - transition-delay: .4s; 308 +#p1 {
305 - max-height: 6em; 309 + font-size: 50px;
306 - margin-top: 0.4em; 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;
307 } 331 }
308 -/*---------프로필 부분---------*/ 332 +/* 텍스트 */
309 333
310 334
311 335
312 336
313 337
314 338
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 +/* 손흔들 */
315 373
316 374
317 375
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 - <head> 3 +
4 - <title>EMOJI-HUMAN</title> 4 +<head>
5 - <link rel="stylesheet" href="https://odd-mune.github.io/EMOJI-HUMAN/About Us/About Us.css"> 5 + <meta charset="UTF-8">
6 - </head> 6 + <title>EMOJI-HUMAN</title>
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">
7 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 +
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>
8 196
197 + </div>
198 + </div>
199 + <!-- 3페이지 -->
9 200
10 - <body> 201 +</body>
11 - <div id="container"> 202 +</html>
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>
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -5,59 +5,3 @@ function createRipple(y, x) { ...@@ -5,59 +5,3 @@ 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
......
...@@ -36,14 +36,14 @@ ...@@ -36,14 +36,14 @@
36 여러분만의 이모지 편지를 적어보세요<br> </p2> 36 여러분만의 이모지 편지를 적어보세요<br> </p2>
37 </p> 37 </p>
38 </header> 38 </header>
39 - 39 +
40 <div> 40 <div>
41 <label class="desc" id="title1" for="Field1">Full Name</label> 41 <label class="desc" id="title1" for="Field1">Full Name</label>
42 <div> 42 <div>
43 <input id="Field1" name="Field1" type="text" class="field text fn" value="" size="8" tabindex="1"> 43 <input id="Field1" name="Field1" type="text" class="field text fn" value="" size="8" tabindex="1">
44 </div> 44 </div>
45 </div> 45 </div>
46 - 46 +
47 <div> 47 <div>
48 <label class="desc" id="title3" for="Field3"> 48 <label class="desc" id="title3" for="Field3">
49 Email 49 Email
...@@ -52,7 +52,7 @@ ...@@ -52,7 +52,7 @@
52 <input id="Field3" name="Field3" type="email" spellcheck="false" value="" maxlength="255" tabindex="3"> 52 <input id="Field3" name="Field3" type="email" spellcheck="false" value="" maxlength="255" tabindex="3">
53 </div> 53 </div>
54 </div> 54 </div>
55 - 55 +
56 <div> 56 <div>
57 <label class="desc" id="title4" for="Field4"> 57 <label class="desc" id="title4" for="Field4">
58 Message 58 Message
...@@ -65,10 +65,10 @@ ...@@ -65,10 +65,10 @@
65 <div> 65 <div>
66 <input id="saveForm" name="saveForm" type="submit" value="Submit"> 66 <input id="saveForm" name="saveForm" type="submit" value="Submit">
67 </div> 67 </div>
68 - </div> 68 + </div>
69 69
70 </form> 70 </form>
71 - 71 +
72 - 72 +
73 73
74 </body> 74 </body>
......
1 +/* 기존것 */
1 .audio { 2 .audio {
2 align-content: center; 3 align-content: center;
3 margin-right: auto; 4 margin-right: auto;
...@@ -5,229 +6,424 @@ ...@@ -5,229 +6,424 @@
5 } 6 }
6 7
7 .swiper-container { 8 .swiper-container {
8 - width: 100%; 9 + width: 100%;
9 - height: 70%; 10 + height: 70%;
10 } 11 }
11 12
12 .swiper-slide { 13 .swiper-slide {
13 - text-align: center; 14 + text-align: center;
14 - font-size: 18px; 15 + font-size: 18px;
15 - background: #fff; /* Center slide text vertically */ 16 + background: #fff; /* Center slide text vertically */
16 - display: -webkit-box; 17 + display: -webkit-box;
17 - display: -ms-flexbox; 18 + display: -ms-flexbox;
18 - display: -webkit-flex; 19 + display: -webkit-flex;
19 - display: flex; 20 + display: flex;
20 - -webkit-box-pack: center; 21 + -webkit-box-pack: center;
21 - -ms-flex-pack: center; 22 + -ms-flex-pack: center;
22 - -webkit-justify-content: center; 23 + -webkit-justify-content: center;
23 - justify-content: center; 24 + justify-content: center;
24 - -webkit-box-align: center; 25 + -webkit-box-align: center;
25 - -ms-flex-align: center; 26 + -ms-flex-align: center;
26 - -webkit-align-items: center; 27 + -webkit-align-items: center;
27 - align-items: center; 28 + align-items: center;
28 - box-shadow: 0px 2px 10px 0px #848484; 29 + box-shadow: 0px 5px 18px -7px #848484;
29 } 30 }
30 31
31 .swiper-slide img{ 32 .swiper-slide img{
32 - display: block; 33 + display: block;
33 - width: 100%; 34 + width: 100%;
34 - height: auto; 35 + height: auto;
35 - object-fit: cover; 36 + object-fit: cover;
36 } 37 }
37 38
38 .swiper-slide:nth-child(2n) { 39 .swiper-slide:nth-child(2n) {
39 - width: 20%; 40 + width: 20%;
40 } 41 }
41 42
42 .swiper-slide:nth-child(3n) { 43 .swiper-slide:nth-child(3n) {
43 - width: 40%; 44 + width: 40%;
44 } 45 }
45 46
46 img { 47 img {
47 - border: 0; 48 + border: 0;
48 - content: normal!important; 49 + content: normal!important;
49 - -webkit-user-select: none; 50 + -webkit-user-select: none;
50 - -moz-user-select: none; 51 + -moz-user-select: none;
51 - -ms-user-select: none; 52 + -ms-user-select: none;
52 - user-select: none 53 + user-select: none
53 } 54 }
54 55
55 *, 56 *,
56 :after, 57 :after,
57 :before { 58 :before {
58 - -webkit-box-sizing: border-box; 59 + -webkit-box-sizing: border-box;
59 - box-sizing: border-box 60 + box-sizing: border-box
60 } 61 }
61 62
62 63
63 /* swiper container and slider styles here */ 64 /* swiper container and slider styles here */
64 65
65 .swiper-container { 66 .swiper-container {
66 - margin-left: auto; 67 + margin-left: auto;
67 - margin-right: auto; 68 + margin-right: auto;
68 - position: relative; 69 + position: relative;
69 - overflow: hidden; 70 + overflow: hidden;
70 - z-index: 1 71 + z-index: 1
71 } 72 }
72 73
73 .swiper-wrapper { 74 .swiper-wrapper {
74 - position: relative; 75 + position: relative;
75 - width: 100%; 76 + width: 100%;
76 - height: 100%; 77 + height: 100%;
77 - z-index: 1; 78 + z-index: 1;
78 - display: -webkit-box; 79 + display: -webkit-box;
79 - display: -ms-flexbox; 80 + display: -ms-flexbox;
80 - display: -webkit-flex; 81 + display: -webkit-flex;
81 - display: flex; 82 + display: flex;
82 - -webkit-transition-property: -webkit-transform; 83 + -webkit-transition-property: -webkit-transform;
83 - -o-transition-property: transform; 84 + -o-transition-property: transform;
84 - transition-property: transform; 85 + transition-property: transform;
85 - transition-property: transform, -webkit-transform; 86 + transition-property: transform, -webkit-transform;
86 - -webkit-box-sizing: content-box; 87 + -webkit-box-sizing: content-box;
87 - box-sizing: content-box 88 + box-sizing: content-box
88 } 89 }
89 90
90 .swiper-slide { 91 .swiper-slide {
91 - -webkit-flex-shrink: 0; 92 + -webkit-flex-shrink: 0;
92 - -ms-flex: 0 0 auto; 93 + -ms-flex: 0 0 auto;
93 - -ms-flex-negative: 0; 94 + -ms-flex-negative: 0;
94 - flex-shrink: 0; 95 + flex-shrink: 0;
95 - width: 100%; 96 + width: 100%;
96 - height: 100%; 97 + height: 100%;
97 - position: relative 98 + position: relative
98 } 99 }
99 100
100 .slideshow { 101 .slideshow {
101 - height: 80vh; 102 + height: 80vh;
102 - display: -webkit-box; 103 + display: -webkit-box;
103 - display: -webkit-flex; 104 + display: -webkit-flex;
104 - display: -ms-flexbox; 105 + display: -ms-flexbox;
105 - display: flex; 106 + display: flex;
106 - -webkit-box-orient: vertical; 107 + -webkit-box-orient: vertical;
107 - -webkit-box-direction: normal; 108 + -webkit-box-direction: normal;
108 - -webkit-flex-direction: column; 109 + -webkit-flex-direction: column;
109 - -ms-flex-direction: column; 110 + -ms-flex-direction: column;
110 - flex-direction: column; 111 + flex-direction: column;
111 } 112 }
112 113
113 .slideshow__area { 114 .slideshow__area {
114 - background: var(--bg-color-2); 115 + background: var(--bg-color-2);
115 - position: relative; 116 + position: relative;
116 - -webkit-box-flex: 1; 117 + -webkit-box-flex: 1;
117 - -webkit-flex: 1 1 auto; 118 + -webkit-flex: 1 1 auto;
118 - -ms-flex: 1 1 auto; 119 + -ms-flex: 1 1 auto;
119 - flex: 1 1 auto 120 + flex: 1 1 auto
120 } 121 }
121 122
122 .slideshow__el { 123 .slideshow__el {
123 - position: absolute; 124 + position: absolute;
124 - top: 0; 125 + top: 0;
125 - left: 0; 126 + left: 0;
126 - height: 100%; 127 + height: 100%;
127 - width: 100% 128 + width: 100%
128 } 129 }
129 130
130 .slideshow__el[data-cursor=prev]:not([data-progress="0"]) { 131 .slideshow__el[data-cursor=prev]:not([data-progress="0"]) {
131 - cursor: w-resize 132 + cursor: w-resize
132 } 133 }
133 134
134 .slideshow__el[data-cursor=next]:not([data-progress="1"]) { 135 .slideshow__el[data-cursor=next]:not([data-progress="1"]) {
135 - cursor: e-resize 136 + cursor: e-resize
136 } 137 }
137 138
138 .slideshow__slide { 139 .slideshow__slide {
139 - width: auto; 140 + width: auto;
140 - max-width: 100%; 141 + max-width: 100%;
141 - display: -webkit-box; 142 + display: -webkit-box;
142 - display: -webkit-flex; 143 + display: -webkit-flex;
143 - display: -ms-flexbox; 144 + display: -ms-flexbox;
144 - display: flex; 145 + display: flex;
145 - padding: 0 var(--slide-padding-x); 146 + padding: 0 var(--slide-padding-x);
146 - -webkit-box-orient: vertical; 147 + -webkit-box-orient: vertical;
147 - -webkit-box-direction: normal; 148 + -webkit-box-direction: normal;
148 - -webkit-flex-direction: column; 149 + -webkit-flex-direction: column;
149 - -ms-flex-direction: column; 150 + -ms-flex-direction: column;
150 - flex-direction: column; 151 + flex-direction: column;
151 - -webkit-box-pack: center; 152 + -webkit-box-pack: center;
152 - -webkit-justify-content: center; 153 + -webkit-justify-content: center;
153 - -ms-flex-pack: center; 154 + -ms-flex-pack: center;
154 - justify-content: center; 155 + justify-content: center;
155 - -webkit-box-align: center; 156 + -webkit-box-align: center;
156 - -webkit-align-items: center; 157 + -webkit-align-items: center;
157 - -ms-flex-align: center; 158 + -ms-flex-align: center;
158 - align-items: center 159 + align-items: center
159 } 160 }
160 161
161 @media (max-width:767px) { 162 @media (max-width:767px) {
162 - .slideshow__slide { 163 +.slideshow__slide {
163 - padding: var(--slide-padding-y) var(--slide-padding-x); 164 + padding: var(--slide-padding-y) var(--slide-padding-x);
164 - } 165 +}
165 } 166 }
166 167
167 @media (min-width:768px) and (max-width:1023px) { 168 @media (min-width:768px) and (max-width:1023px) {
168 - .slideshow__slide { 169 + .slideshow__slide {
169 - padding: var(--slide-padding-y) var(--slide-padding-x); 170 + padding: var(--slide-padding-y) var(--slide-padding-x);
170 - } 171 + }
171 } 172 }
172 173
173 @media (min-width:1024px) { 174 @media (min-width:1024px) {
174 - .slideshow__slide { 175 + .slideshow__slide {
175 - padding: var(--slide-padding-y) var(--slide-padding-x); 176 + padding: var(--slide-padding-y) var(--slide-padding-x);
176 - } 177 + }
177 } 178 }
178 179
179 .slideshow__slide .caption, .slideshow__slide .caption2 { 180 .slideshow__slide .caption, .slideshow__slide .caption2 {
180 - display: none 181 + display: none
181 } 182 }
182 183
183 .slideshow__slide img { 184 .slideshow__slide img {
184 - width: auto; 185 + width: auto;
185 - height: auto; 186 + height: auto;
186 - max-height: 100%; 187 + max-height: 100%;
187 - max-width: 100%; 188 + max-width: 100%;
188 - display: block; 189 + display: block;
189 - opacity: 0; 190 + opacity: 0;
190 - -webkit-transition: none; 191 + -webkit-transition: none;
191 - -o-transition: none; 192 + -o-transition: none;
192 - transition: none 193 + transition: none
193 } 194 }
194 195
195 .slideshow__slide img.lazyloaded { 196 .slideshow__slide img.lazyloaded {
196 - opacity: 1 197 + opacity: 1
197 } 198 }
198 199
199 200
200 /* this is styling responsible responsive behavior for images in slide */ 201 /* this is styling responsible responsive behavior for images in slide */
201 202
202 .responsive-img { 203 .responsive-img {
203 - position: relative; 204 + position: relative;
204 - width: 100%; 205 + width: 100%;
205 - height: 100%; 206 + height: 100%;
206 - max-width: 100%; 207 + max-width: 100%;
207 - display: -webkit-box; 208 + display: -webkit-box;
208 - display: -webkit-flex; 209 + display: -webkit-flex;
209 - display: -ms-flexbox; 210 + display: -ms-flexbox;
210 - display: flex; 211 + display: flex;
211 - -webkit-box-pack: center; 212 + -webkit-box-pack: center;
212 - -webkit-justify-content: center; 213 + -webkit-justify-content: center;
213 - -ms-flex-pack: center; 214 + -ms-flex-pack: center;
214 - justify-content: center; 215 + justify-content: center;
215 - -webkit-box-align: center; 216 + -webkit-box-align: center;
216 - -webkit-align-items: center; 217 + -webkit-align-items: center;
217 - -ms-flex-align: center; 218 + -ms-flex-align: center;
218 - align-items: center 219 + align-items: center
219 } 220 }
220 221
221 .responsive-img img { 222 .responsive-img img {
222 - width: auto; 223 + width: auto;
223 - height: auto; 224 + height: auto;
224 - max-height: 100%; 225 + max-height: 100%;
225 - max-width: 100%; 226 + max-width: 100%;
226 - display: block; 227 + display: block;
227 - -webkit-box-flex: 0; 228 + -webkit-box-flex: 0;
228 - -webkit-flex: 0 0 auto; 229 + -webkit-flex: 0 0 auto;
229 - -ms-flex: 0 0 auto; 230 + -ms-flex: 0 0 auto;
230 - flex: 0 0 auto 231 + 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);
231 } 244 }
245 +/* 기존것 */
246 +
232 247
233 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
......
...@@ -29,8 +29,10 @@ ...@@ -29,8 +29,10 @@
29 29
30 </head> 30 </head>
31 31
32 + <!-- style="background-image: url(/src/background-01.png); background-position: center; background-size: cover;" -->
33 +
32 <body> 34 <body>
33 - 35 +
34 <h1>MBTI + EMOJI<span>= EMOTI</span></h1> 36 <h1>MBTI + EMOJI<span>= EMOTI</span></h1>
35 <p1>MBTI가 이모지라면? 그건 바로 EMOTI!</p1> 37 <p1>MBTI가 이모지라면? 그건 바로 EMOTI!</p1>
36 <br> 38 <br>
...@@ -38,74 +40,106 @@ ...@@ -38,74 +40,106 @@
38 <p class="small"> 당신의 mbti가 이모지로 어떻게 바뀌었을지,<br> 40 <p class="small"> 당신의 mbti가 이모지로 어떻게 바뀌었을지,<br>
39 아래의 카드에서 한 번 찾아보세요!<br> </p2> 41 아래의 카드에서 한 번 찾아보세요!<br> </p2>
40 </p> 42 </p>
41 - 43 +
42 - 44 + <body id="page-top">
43 - 45 + <!--creating a navigation bar-->
46 + <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-->
47 + <div class="container"><!--gives padding of 16px on LHS and RHS-->
48 + <div class="navbar-header page-scroll"><!--navigation bar header having proprty to scroll -->
49 + <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
50 + <span></span> Menu <i class="fa fa-bars"></i>
51 + </button>
52 + </div><!--end of button-->
53 + <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><!--to collapse-->
54 + <ul class="nav navbar-nav">
55 + <li><a href="/index.html">Home</a></li>
56 + </ul>
57 + <ul class="nav navbar-nav navbar-right page-scroll"><!--second UL to go to right having proprty to scroll page-->
58 + <li> <a href="/About Us/About Us.html">About Us</a></li>
59 + <li><a href="/EMOJI-HUMAN/EMOJI-HUMAN.html">EMOJI-HUMAN</a></li>
60 + <li><a href="/EMO-TI/EMO-TI.html">EMO-TI</a></li>
61 + <li><a href="/EMO-SSAGE/EMO-SSAGE.html">EMO-SSAGE</a></li>
62 + </ul>
63 + </div><!--end of collapse-->
64 + </div>
65 + </nav>
66 + <!-- 내비게이션 -->
67 +
68 + <br>
69 + <br>
70 + <br>
71 + <br>
72 + <br>
73 + <br>
74 + <br>
75 + <br>
76 + <br>
77 + <br>
78 + <br>
79 + <br>
80 + <br>
81 + <br>
82 + <br>
83 + <br>
84 + <br>
85 + <br>
86 + <br>
87 + <br>
88 + <br>
89 + <br>
90 + <br>
91 + <br>
44 92
45 <div class="swiper-container"> 93 <div class="swiper-container">
46 <div class="swiper-wrapper"> 94 <div class="swiper-wrapper">
47 - <div class="swiper-slide"><img src="https://odd-mune.github.io/EMOJI-HUMAN/src/ISTP.jpg"></div> <!-- 0 --> 95 + <div class="swiper-slide"><img src="/src/ISTP.jpg"></div>
48 - <div class="swiper-slide"><img src="https://odd-mune.github.io/EMOJI-HUMAN/src/ISTJ.jpg"></div> <!-- 1 --> 96 + <div class="swiper-slide"><img src="/src/ISTJ.jpg"></div>
49 - <div class="swiper-slide"><img src="https://odd-mune.github.io/EMOJI-HUMAN/src/ISFP.jpg"></div> <!-- 2 --> 97 + <div class="swiper-slide"><img src="/src/ISFP.jpg"></div>
50 - <div class="swiper-slide"><img src="https://odd-mune.github.io/EMOJI-HUMAN/src/ISFJ.jpg"></div> <!-- 3 --> 98 + <div class="swiper-slide"><img src="/src/ISFJ.jpg"></div>
51 - <div class="swiper-slide"><img src="https://odd-mune.github.io/EMOJI-HUMAN/src/INTP.jpg"></div> <!-- 4 --> 99 + <div class="swiper-slide"><img src="/src/INTP.jpg"></div>
52 - <div class="swiper-slide"><img src="https://odd-mune.github.io/EMOJI-HUMAN/src/INTJ.jpg"></div> <!-- 5 --> 100 + <div class="swiper-slide"><img src="/src/INTJ.jpg"></div>
53 - <div class="swiper-slide"><img src="https://odd-mune.github.io/EMOJI-HUMAN/src/INFP.jpg"></div> <!-- 6 --> 101 + <div class="swiper-slide"><img src="/src/INFP.jpg"></div>
54 - <div class="swiper-slide"><img src="https://odd-mune.github.io/EMOJI-HUMAN/src/INFJ.jpg"></div> <!-- 7 --> 102 + <div class="swiper-slide"><img src="/src/INFJ.jpg"></div>
55 - <div class="swiper-slide"><img src="https://odd-mune.github.io/EMOJI-HUMAN/src/ESTP.jpg"></div> <!-- 8 --> 103 + <div class="swiper-slide"><img src="/src/ESTP.jpg"></div>
56 - <div class="swiper-slide"><img src="https://odd-mune.github.io/EMOJI-HUMAN/src/ESTJ.jpg"></div> <!-- 9 --> 104 + <div class="swiper-slide"><img src="/src/ESTJ.jpg"></div>
57 - <div class="swiper-slide"><img src="https://odd-mune.github.io/EMOJI-HUMAN/src/ESFP.jpg"></div> <!-- 10 --> 105 + <div class="swiper-slide"><img src="/src/ESFP.jpg"></div>
58 - <div class="swiper-slide"><img src="https://odd-mune.github.io/EMOJI-HUMAN/src/ESFJ.jpg"></div> <!-- 11 --> 106 + <div class="swiper-slide"><img src="/src/ESFJ.jpg"></div>
59 - <div class="swiper-slide"><img src="https://odd-mune.github.io/EMOJI-HUMAN/src/ENTP.jpg"></div> <!-- 12 --> 107 + <div class="swiper-slide"><img src="/src/ENTP.jpg"></div>
60 - <div class="swiper-slide"><img src="https://odd-mune.github.io/EMOJI-HUMAN/src/ENTJ.jpg"></div> <!-- 13 --> 108 + <div class="swiper-slide"><img src="/src/ENTJ.jpg"></div>
61 - <div class="swiper-slide"><img src="https://odd-mune.github.io/EMOJI-HUMAN/src/ENFP.jpg"></div> <!-- 14 --> 109 + <div class="swiper-slide"><img src="/src/ENFP.jpg"></div>
62 - <div class="swiper-slide"><img src="https://odd-mune.github.io/EMOJI-HUMAN/src/ENFJ.jpg"></div> <!-- 15 --> 110 + <div class="swiper-slide"><img src="/src/ENFJ.jpg"></div>
63 </div> 111 </div>
64 <!-- If we need pagination --> 112 <!-- If we need pagination -->
113 + <br>
114 + <br>
115 + <br>
116 +
65 <div class="swiper-pagination"></div> 117 <div class="swiper-pagination"></div>
66 <!-- Add Arrows --> 118 <!-- Add Arrows -->
67 <div class="swiper-button-next"></div> 119 <div class="swiper-button-next"></div>
68 <div class="swiper-button-prev"></div> 120 <div class="swiper-button-prev"></div>
69 - </div> 121 + <!-- </div> -->
70 - <script src="https://odd-mune.github.io/EMOJI-HUMAN/EMO-TI/EMO-TI.js" type="module"></script> 122 + <script src="/EMO-TI/EMO-TI.js" type="module"></script>
71 <div style="align-content: center;"> 123 <div style="align-content: center;">
72 - <audio id="istp_audio" src="https://odd-mune.github.io/EMOJI-HUMAN/src/Burn The House Down.mp3" loop controls hidden></audio> 124 + <audio id="istp_audio" src="/src/Burn The House Down.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> 125 + <audio id="istj_audio" src="/src/Rise.mp3" loop controls hidden></audio>
74 - <audio id="isfp_audio" src="https://odd-mune.github.io/EMOJI-HUMAN/src/비밀의 화원.mp3" loop controls hidden></audio> 126 + <audio id="isfp_audio" src="/src/비밀의 화원.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> 127 + <audio id="isfj_audio" src="/src/always ill care.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> 128 + <audio id="intp_audio" src="/src/Like That.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> 129 + <audio id="intj_audio" src="/src/Va Va Vis.mp3" loop controls hidden></audio>
78 - <audio id="infp_audio" src="https://odd-mune.github.io/EMOJI-HUMAN/src/괜찮아도 괜찮아.mp3" loop controls hidden></audio> 130 + <audio id="infp_audio" src="/src/괜찮아도 괜찮아.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> 131 + <audio id="infj_audio" src="/src/Shining.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> 132 + <audio id="estp_audio" src="/src/Break The Rules.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> 133 + <audio id="estj_audio" src="/src/Kings Queens.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> 134 + <audio id="esfp_audio" src="/src/Beautiful Beautiful.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> 135 + <audio id="esfj_audio" src="/src/Slow Ride.mp3" loop controls hidden></audio>
84 - <audio id="entp_audio" src="https://odd-mune.github.io/EMOJI-HUMAN/src/불꽃놀이.mp3" loop controls hidden></audio> 136 + <audio id="entp_audio" src="/src/불꽃놀이.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> 137 + <audio id="entj_audio" src="/src/Boss Bitch.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> 138 + <audio id="enfp_audio" src="/src/Moonshot.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> 139 + <audio id="enfj_audio" src="/src/Island Island.mp3" loop controls hidden></audio>
88 </div> 140 </div>
89 -<br> 141 +
90 -<br> 142 +
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>
109 </body> 143 </body>
110 144
111 </html> 145 </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 -});
...\ No newline at end of file ...\ No newline at end of file
120 +});
......
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
2 <html lang="ko"> 2 <html lang="ko">
3 3
4 <head> 4 <head>
5 + <meta charset="UTF-8">
5 <title>EMOJI-HUMAN</title> 6 <title>EMOJI-HUMAN</title>
6 <link rel="stylesheet" href="="https://odd-mune.github.io/EMOJI-HUMAN//index.css"> 7 <link rel="stylesheet" href="="https://odd-mune.github.io/EMOJI-HUMAN//index.css">
7 <link rel="icon" type="image/x-icon" href="https://odd-mune.github.io/EMOJI-HUMAN/src/rainbow_1f308.png"> 8 <link rel="icon" type="image/x-icon" href="https://odd-mune.github.io/EMOJI-HUMAN/src/rainbow_1f308.png">
...@@ -36,6 +37,29 @@ ...@@ -36,6 +37,29 @@
36 <p class="small"> 이모지일까요, 인간일까요?<br> 37 <p class="small"> 이모지일까요, 인간일까요?<br>
37 직접 대화하면서<br> 차근차근 알아가봅시다! </p2> 38 직접 대화하면서<br> 차근차근 알아가봅시다! </p2>
38 </p> 39 </p>
39 - 40 +
40 - 41 + <body id="page-top">
42 + <!--creating a navigation bar-->
43 + <nav id="main-nav" class="navbar navbar-default navbar-fixed-top navbar-custom"><!--navigation bar with default view fixed on top specific class nav-bar custom-->
44 + <div class="container"><!--gives padding of 16px on LHS and RHS-->
45 + <div class="navbar-header page-scroll"><!--navigation bar header having proprty to scroll -->
46 + <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
47 + <span></span> Menu <i class="fa fa-bars"></i>
48 + </button>
49 + </div><!--end of button-->
50 + <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><!--to collapse-->
51 + <ul class="nav navbar-nav">
52 + <li><a href="/index.html">Home</a></li>
53 + </ul>
54 + <ul class="nav navbar-nav navbar-right page-scroll"><!--second UL to go to right having proprty to scroll page-->
55 + <li> <a href="/About Us/About Us.html">About Us</a></li>
56 + <li><a href="/EMOJI-HUMAN/EMOJI-HUMAN.html">EMOJI-HUMAN</a></li>
57 + <li><a href="/EMO-TI/EMO-TI.html">EMO-TI</a></li>
58 + <li><a href="/EMO-SSAGE/EMO-SSAGE.html">EMO-SSAGE</a></li>
59 + </ul>
60 + </div><!--end of collapse-->
61 + </div>
62 + </nav>
63 + <!-- 내비게이션 -->
64 +
41 </body> 65 </body>
......
1 +/*-----------배경 그라디언트-----------*/
1 #gradient-bg{ 2 #gradient-bg{
2 width: 100%; 3 width: 100%;
3 height: 100vh; 4 height: 100vh;
4 background: rgb(255, 255, 255); 5 background: rgb(255, 255, 255);
5 background-image: 6 background-image:
6 - radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 80%), 7 + radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(243, 97, 155, 0) 80%),
7 radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 40%), 8 radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 40%),
8 radial-gradient(circle farthest-corner at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 50%), 9 radial-gradient(circle farthest-corner at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 50%),
9 radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 100%); 10 radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 100%);
10 animation: colorChange 6s infinite alternate-reverse; 11 animation: colorChange 6s infinite alternate-reverse;
11 -
12 } 12 }
13 13
14 @keyframes colorChange { 14 @keyframes colorChange {
...@@ -113,4 +113,390 @@ ...@@ -113,4 +113,390 @@
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 -}
...\ No newline at end of file ...\ No newline at end of file
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
......
...@@ -2,26 +2,93 @@ ...@@ -2,26 +2,93 @@
2 <html lang="ko"> 2 <html lang="ko">
3 3
4 <head> 4 <head>
5 + <meta charset="UTF-8">
5 <title>EMOJI-HUMAN</title> 6 <title>EMOJI-HUMAN</title>
6 - <link rel="stylesheet" href="https://odd-mune.github.io/EMOJI-HUMAN/index.css"> 7 + <link rel="stylesheet" href="/index.css">
7 - <link rel="icon" type="image/x-icon" href="https://odd-mune.github.io/EMOJI-HUMAN/src/rainbow_1f308.png"> 8 + <link rel="icon" type="image/x-icon" href="/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">
8 </head> 10 </head>
9 11
10 -<body> 12 +<body style="margin: 0 auto">
11 - 13 +
12 - <!-- partial:index.partial.html --> 14 + <!-- 큰 묶음은 배경임 -->
13 <div id="gradient-bg"> 15 <div id="gradient-bg">
14 - </div>
15 - <!-- partial -->
16 - <script src="https://odd-mune.github.io/EMOJI-HUMAN/index.js"></script>
17 16
18 - <button id="button1" onclick="document.location='https://odd-mune.github.io/EMOJI-HUMAN/About Us/About Us.html'">About Us</button> 17 + <!-- 내비게이션 -->
19 - <button id="button2" onclick="document.location='https://odd-mune.github.io/EMOJI-HUMAN/EMOJI-HUMAN/EMOJI-HUMAN.html'">EMOJI-HUMAN</button> 18 + <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><!--bootstrap-->
20 - <button id="button3" onclick="document.location='https://odd-mune.github.io/EMOJI-HUMAN/EMO-TI/EMO-TI.html'">EMO-TI</button> 19 + <!--css link-->
21 - <button id="button4" onclick="document.location='https://odd-mune.github.io/EMOJI-HUMAN/EMO-SSAGE/EMO-SSAGE.html'">EMO-SSAGE</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 + <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 +
22 48
23 - <br /> 49 + <!-- 이모지 얼굴 -->
24 - <hr /> 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 + <!-- 이모지 얼굴 -->
25 72
26 - 73 + <!-- 이모지 레인 -->
27 -</body> 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>
...\ No newline at end of file ...\ No newline at end of file
......
1 -//the only purpose of this is to generate the CSS keyframes 1 +// 배경 그라디언트
2 -
3 var str = 0; 2 var str = 0;
4 var num = 100; 3 var num = 100;
5 var porcents = 100; 4 var porcents = 100;
...@@ -11,4 +10,76 @@ var str = 0; ...@@ -11,4 +10,76 @@ var str = 0;
11 str = str + i; 10 str = str + i;
12 num = num - 0.5; 11 num = num - 0.5;
13 porcents = porcents -1; 12 porcents = porcents -1;
14 - }
...\ No newline at end of file ...\ No newline at end of file
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
......