송민겸 / EMOJI-HUMAN

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

temp

Expand all
Inline Side-by-side
Showing 21 changed files with 317 additions and 628 deletions
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
...@@ -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 +}
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
...@@ -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