송민겸 / EMOJI-HUMAN

Go to a project
Toggle navigation Toggle navigation pinning
rtdtbb8
848b449d 1 parent 7024af1c

2/2

Inline Side-by-side
Showing 9 changed files with 35 additions and 62 deletions
...@@ -389,12 +389,13 @@ p ...@@ -389,12 +389,13 @@ p
389 a, 389 a,
390 a:hover, 390 a:hover,
391 a:focus, 391 a:focus,
392 -a:active,{ 392 +a:active,
393 +h2{
393 color: none;/*hover-highlight over,active-highlisht when clicked,focus-highlight when under use*/ 394 color: none;/*hover-highlight over,active-highlisht when clicked,focus-highlight when under use*/
394 outline: none; /*gives outline to an element*/ 395 outline: none; /*gives outline to an element*/
395 } 396 }
396 -h2, 397 +
397 -h3, 398 +h3
398 { 399 {
399 font-family: Noto Sans KR, Bold; 400 font-family: Noto Sans KR, Bold;
400 text-transform: uppercase; 401 text-transform: uppercase;
......
...@@ -262,12 +262,13 @@ p ...@@ -262,12 +262,13 @@ p
262 a, 262 a,
263 a:hover, 263 a:hover,
264 a:focus, 264 a:focus,
265 -a:active,{ 265 +a:active,
266 - color: #99CED4;/*hover-highlight over,active-highlisht when clicked,focus-highlight when under use*/ 266 +h2
267 +{color: #99CED4;/*hover-highlight over,active-highlisht when clicked,focus-highlight when under use*/
267 outline: none; /*gives outline to an element*/ 268 outline: none; /*gives outline to an element*/
268 } 269 }
269 -h2, 270 +
270 -h3, 271 +h3
271 { 272 {
272 font-family: Noto Sans Kr, Bold; 273 font-family: Noto Sans Kr, Bold;
273 text-transform: uppercase; 274 text-transform: uppercase;
...@@ -346,7 +347,7 @@ header .intro .skills { ...@@ -346,7 +347,7 @@ header .intro .skills {
346 font-weight: 700; 347 font-weight: 700;
347 border: none; 348 border: none;
348 } 349 }
349 -} 350 +
350 .navbar-custom .navbar-nav { 351 .navbar-custom .navbar-nav {
351 letter-spacing: 1px; 352 letter-spacing: 1px;
352 } 353 }
......
1 /* 내비 */ 1 /* 내비 */
2 body { 2 body {
3 - font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif; 3 + font-family: Noto Sans Kr, Bold;
4 overflow-x: hidden; 4 overflow-x: hidden;
5 } 5 }
6 .center 6 .center
...@@ -21,7 +21,7 @@ a:active { ...@@ -21,7 +21,7 @@ a:active {
21 h2, 21 h2,
22 h3 22 h3
23 { 23 {
24 - font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif; 24 + font-family: Noto Sans Kr, Bold;
25 text-transform: uppercase; 25 text-transform: uppercase;
26 font-weight: 700; 26 font-weight: 700;
27 font-size: 30px; 27 font-size: 30px;
...@@ -70,7 +70,7 @@ header .container { ...@@ -70,7 +70,7 @@ header .container {
70 } 70 }
71 header .intro .name { 71 header .intro .name {
72 display: block; 72 display: block;
73 - font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif; 73 + font-family: Noto Sans Kr, Bold;
74 text-transform: uppercase; 74 text-transform: uppercase;
75 font-weight: 700; 75 font-weight: 700;
76 font-size: 2em; 76 font-size: 2em;
...@@ -93,7 +93,7 @@ header .intro .skills { ...@@ -93,7 +93,7 @@ header .intro .skills {
93 } 93 }
94 .navbar-custom { 94 .navbar-custom {
95 background: #2C3E50; 95 background: #2C3E50;
96 - font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif; 96 + font-family: Noto Sans Kr, Bold;
97 text-transform: uppercase; 97 text-transform: uppercase;
98 font-weight: 700; 98 font-weight: 700;
99 border: none; 99 border: none;
...@@ -163,12 +163,15 @@ footer .footer-below { ...@@ -163,12 +163,15 @@ footer .footer-below {
163 padding: 0; 163 padding: 0;
164 } 164 }
165 html, body { 165 html, body {
166 - height: 100%; 166 +
167 + height: 200vh;
167 } 168 }
168 section { 169 section {
169 position: relative; 170 position: relative;
170 width: 100%; 171 width: 100%;
171 height: 50%; 172 height: 50%;
173 + background-size: 80vw 80vw;
174 + background-repeat: no-repeat;
172 } 175 }
173 section::after { 176 section::after {
174 position: absolute; 177 position: absolute;
...@@ -177,6 +180,7 @@ section::after { ...@@ -177,6 +180,7 @@ section::after {
177 content: ''; 180 content: '';
178 width: 100%; 181 width: 100%;
179 height: 80%; 182 height: 80%;
183 +
180 /* background: -webkit-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,.8) 80%,rgba(0,0,0,.8) 100%); */ 184 /* background: -webkit-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,.8) 80%,rgba(0,0,0,.8) 100%); */
181 /* background: linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,.8) 80%,rgba(0,0,0,.8) 100%); */ 185 /* background: linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,.8) 80%,rgba(0,0,0,.8) 100%); */
182 } 186 }
...@@ -309,7 +313,7 @@ section h3 { ...@@ -309,7 +313,7 @@ section h3 {
309 313
310 /* 메세지 버블 */ 314 /* 메세지 버블 */
311 /* body { 315 /* body {
312 - font-family: "Helvetica Neue"; 316 + font-family: "Noto Sans Kr, regular";
313 font-size: 20px; 317 font-size: 20px;
314 font-weight: normal; 318 font-weight: normal;
315 } */ 319 } */
......
...@@ -51,6 +51,8 @@ ...@@ -51,6 +51,8 @@
51 <!-- 내비게이션 --> 51 <!-- 내비게이션 -->
52 52
53 53
54 +
55 +
54 <!-- 배경 스크롤 --> 56 <!-- 배경 스크롤 -->
55 <section id="section01" class="demo"> 57 <section id="section01" class="demo">
56 <br> 58 <br>
...@@ -80,7 +82,6 @@ ...@@ -80,7 +82,6 @@
80 <a href="#section02"><span></span></a> 82 <a href="#section02"><span></span></a>
81 </section> 83 </section>
82 84
83 -
84 <section id="section02" class="demo"> 85 <section id="section02" class="demo">
85 <!-- 1번 대화 --> 86 <!-- 1번 대화 -->
86 <section> 87 <section>
...@@ -101,6 +102,7 @@ ...@@ -101,6 +102,7 @@
101 <br> 102 <br>
102 <br> 103 <br>
103 <br> 104 <br>
105 + <img src="emojihuman1-05.png" width="550px", height="500px">
104 <div class="from-them"> 106 <div class="from-them">
105 <p>안녕하세요!!<br> 107 <p>안녕하세요!!<br>
106 저는 이모지 인간이라고 해요 @.@ <br> 108 저는 이모지 인간이라고 해요 @.@ <br>
...@@ -109,10 +111,6 @@ ...@@ -109,10 +111,6 @@
109 </div> 111 </div>
110 <div class="clear"></div> 112 <div class="clear"></div>
111 113
112 - <br>
113 - <br>
114 - <br>
115 -
116 <div class="from-me slam"> 114 <div class="from-me slam">
117 <p>이모지 인간에게 인사하기</p> 115 <p>이모지 인간에게 인사하기</p>
118 </div> 116 </div>
...@@ -138,15 +136,20 @@ ...@@ -138,15 +136,20 @@
138 <br> 136 <br>
139 <br> 137 <br>
140 <br> 138 <br>
139 + <br>
140 + <br>
141 + <br>
142 + <br>
143 + <br>
144 + <br>
145 + <br>
141 146
142 <div class="from-me gentle"> 147 <div class="from-me gentle">
143 <p>이모지 인간은 뭔가요...?</p> 148 <p>이모지 인간은 뭔가요...?</p>
144 </div> 149 </div>
145 <div class="clear"></div> 150 <div class="clear"></div>
146 151
147 - <br> 152 + <img src="emojihuman2-05.png" width="550px", height="500px">
148 - <br>
149 - <br>
150 153
151 <div class="from-them"> 154 <div class="from-them">
152 <p>이모지 인간은 말그대로 155 <p>이모지 인간은 말그대로
...@@ -177,9 +180,7 @@ ...@@ -177,9 +180,7 @@
177 </div> 180 </div>
178 <div class="clear"></div> 181 <div class="clear"></div>
179 182
180 - <br> 183 + <img src="emojihuman3-05.png" width="550px", height="500px">
181 - <br>
182 - <br>
183 184
184 <div class="from-them"> 185 <div class="from-them">
185 <p>요즘 10대-20대들은 SNS 사용시, 186 <p>요즘 10대-20대들은 SNS 사용시,
...@@ -200,20 +201,13 @@ ...@@ -200,20 +201,13 @@
200 <section> 201 <section>
201 202
202 <br> 203 <br>
203 - <br>
204 - <br>
205 - <br>
206 - <br>
207 - <br>
208 204
209 <div class="from-me gentle"> 205 <div class="from-me gentle">
210 <p>그럼 이모지 인간은 뭘할 수 있나요?</p> 206 <p>그럼 이모지 인간은 뭘할 수 있나요?</p>
211 </div> 207 </div>
212 <div class="clear"></div> 208 <div class="clear"></div>
213 209
214 - <br> 210 + <img src="emojihuman4-05.png" width="550px", height="500px">
215 - <br>
216 - <br>
217 211
218 <div class="from-them"> 212 <div class="from-them">
219 <p>첫째, 저와의 간단한 대화! 213 <p>첫째, 저와의 간단한 대화!
...@@ -222,13 +216,7 @@ ...@@ -222,13 +216,7 @@
222 </div> 216 </div>
223 217
224 <br> 218 <br>
225 - <br> 219 +
226 - <br>
227 - <br>
228 - <br>
229 - <br>
230 - <br>
231 - <br>
232 220
233 <div class="from-them"> 221 <div class="from-them">
234 <p>첫번째...보다는 222 <p>첫번째...보다는
...@@ -253,13 +241,6 @@ ...@@ -253,13 +241,6 @@
253 <br> 241 <br>
254 <br> 242 <br>
255 <br> 243 <br>
256 - <br>
257 - <br>
258 - <br>
259 - <br>
260 - <br>
261 - <br>
262 -
263 <div class="from-them"> 244 <div class="from-them">
264 <p>이모지 MBTI 카드는 EMOTI라고 해요. 245 <p>이모지 MBTI 카드는 EMOTI라고 해요.
265 여러 이모지들을 활용해서 각 16개 mbti 246 여러 이모지들을 활용해서 각 16개 mbti
...@@ -290,17 +271,6 @@ ...@@ -290,17 +271,6 @@
290 <br> 271 <br>
291 <br> 272 <br>
292 <br> 273 <br>
293 - <br>
294 - <br>
295 - <br>
296 - <br>
297 - <br>
298 - <br>
299 - <br>
300 - <br>
301 - <br>
302 - <br>
303 - <br>
304 274
305 275
306 <div class="from-me gentle"> 276 <div class="from-me gentle">
...@@ -308,10 +278,7 @@ ...@@ -308,10 +278,7 @@
308 </div> 278 </div>
309 <div class="clear"></div> 279 <div class="clear"></div>
310 280
311 - <br> 281 + <img src="emojihuman5-05.png" width="550px", height="500px">
312 - <br>
313 - <br>
314 -
315 <div class="from-them"> 282 <div class="from-them">
316 <p>This page cannot be found</p> 283 <p>This page cannot be found</p>
317 </div> 284 </div>
......