송민겸 / EMOJI-HUMAN

Go to a project
Toggle navigation Toggle navigation pinning
rtdtbb8
1e9fe00c 1 parent cdeb05a3

2/1트

Expand all
Inline Side-by-side
Showing 37 changed files with 1522 additions and 852 deletions
1 -<!DOCTYPE html>
2 -<html lang="en" >
3 -<head>
4 - <meta charset="UTF-8">
5 - <title>CodePen - iOS 10 chat bubbles Pure CSS</title>
6 - <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
7 -<link rel="stylesheet" href="./style.css">
8 -
9 -</head>
10 -<body>
11 -<!-- partial:index.partial.html -->
12 -
13 -
14 -
15 -
16 -<section>
17 -<!-- 1번 대화 -->
18 - <div class="from-them">
19 - <p>안녕하세요!!<br>
20 - 저는 이모지 인간이라고 해요 @.@ <br>
21 - 당신을 만나게 되어서 매우 반가워요 :)
22 - </p>
23 - </div>
24 - <div class="clear"></div>
25 -
26 - <div class="from-me slam">
27 - <p>말풍선을 눌러 이모지 인간에게 인사하기</p>
28 - </div>
29 - <div class="clear"></div>
30 -<!-- 1번 대화 -->
31 -
32 -<!-- 2번 대화 -->
33 - <div class="from-me gentle">
34 - <p>이모지 인간은 뭔가요...?</p>
35 - </div>
36 - <div class="clear"></div>
37 -
38 - <div class="from-them">
39 - <p>이모지 인간은 말그대로
40 - “이모지”로 이루어진 인격체입니다.
41 - 여러분이 알고 계시는 다양한 이모지들이 있죠?
42 - 저는 그 어떤 모습의 이모지든 다 될 수 있어요.
43 - 이모지 자체가 저의 몸이라고 생각하시면 됩니다.
44 - 예를 들어, 옆의 태양이나 파라솔까지도요!
45 - (하지만, 저는 인격체이기 때문에 말도 할 수 있어요V) </p>
46 - </div>
47 -<!-- 2번 대화 -->
48 -
49 -<!-- 3번 대화 -->
50 -<div class="from-me gentle">
51 - <p>어...이모지 인간은 어떻게 생겨났나요?</p>
52 -</div>
53 -<div class="clear"></div>
54 -
55 -<div class="from-them">
56 - <p>요즘 10대-20대들은 SNS 사용시,
57 - 주로 이모지를 사용하여 대화를 하곤 합니다.
58 - 문자로 길게 설명을 하는 것보다 표정이나 감정들을
59 - 직관적으로 전달할 수 있는 이모지가
60 - 더 간편하기에 그렇습니다.
61 - 이에 현대인들의 일상은 이모지로 가득 찬,
62 - “<이모지 인간>이 아닐까”
63 - 하는 발상에서 제가 생겨나게 되었답니다.</p>
64 -</div>
65 -<!-- 3번 대화 -->
66 -
67 -<!-- 4번 대화 -->
68 -<div class="from-me gentle">
69 - <p>그럼 이모지 인간은 뭘할 수 있나요?</p>
70 -</div>
71 -<div class="clear"></div>
72 -
73 -<div class="from-them">
74 - <p>첫째, 저와의 간단한 대화!
75 - 둘째, 이모지로 보내는 문자!
76 - 셋째, 이모지 MBTI 카드!</p>
77 -</div>
78 -
79 -<div class="from-them">
80 - <p>첫번째...보다는
81 - 두번째와 세번째에 대한 설명을 더 해볼께요...
82 - 이모지로 보내는 문자는 Emo-ssage라고 해요.
83 - 아무에게나, 혹은 특정 상대에게 자유롭게 문자를 보내면,
84 - 대화 중 일부를 이모지로 채워줄 거랍니다.
85 - 작성이 완료되면 여러분만의 emo-ssage를
86 - 이미지로 저장할 수 있어요!</p>
87 -</div>
88 -
89 -<div class="from-them">
90 - <p>이모지 MBTI 카드는 EMOTI라고 해요.
91 - 여러 이모지들을 활용해서 각 16개 mbti
92 - 고유의 이모지들을 탄생시켰어요.
93 - 아, 그리고 각 mbti 카드를 넘길 때마다
94 - 어울리는 노래도 흘러나온답니다! </p>
95 -</div>
96 -<!-- 4번 대화 -->
97 -
98 -<!-- 5번 대화 -->
99 -<div class="from-me gentle">
100 - <p>네...아, 아까 정의가 조금 헷갈리는데, 이모지 인간은 이모지인가요 인간인가요?</p>
101 -</div>
102 -<div class="clear"></div>
103 -
104 -<div class="from-them">
105 - <p>This page cannot be found</p>
106 -</div>
107 -<!-- 5번 대화 -->
108 -
109 -</section>
110 - <script src="./script.js"></script>
111 -
112 -
113 -
114 -
115 -</body>
116 -</html>
1 -//extends from ios 7 chat bubbles
2 -//https://codepen.io/samuelkraft/pen/Farhl
3 -
4 -//cmd/ctrl + shift + 5 rerun preview
...\ No newline at end of file ...\ No newline at end of file
1 -body {
2 - font-family: "Helvetica Neue";
3 - font-size: 20px;
4 - font-weight: normal;
5 -}
6 -
7 -section {
8 - max-width: 450px;
9 - margin: 50px auto;
10 -}
11 -section div {
12 - max-width: 255px;
13 - word-wrap: break-word;
14 - margin-bottom: 20px;
15 - line-height: 24px;
16 -}
17 -
18 -.clear {
19 - clear: both;
20 -}
21 -
22 -.from-me {
23 - position: relative;
24 - padding: 10px 20px;
25 - color: white;
26 - background: #0B93F6;
27 - border-radius: 25px;
28 - float: right;
29 -}
30 -.from-me:before {
31 - content: "";
32 - position: absolute;
33 - z-index: -1;
34 - bottom: -2px;
35 - right: -7px;
36 - height: 20px;
37 - border-right: 20px solid #0B93F6;
38 - border-bottom-left-radius: 16px 14px;
39 - -webkit-transform: translate(0, -2px);
40 -}
41 -.from-me:after {
42 - content: "";
43 - position: absolute;
44 - z-index: 1;
45 - bottom: -2px;
46 - right: -56px;
47 - width: 26px;
48 - height: 20px;
49 - background: white;
50 - border-bottom-left-radius: 10px;
51 - -webkit-transform: translate(-30px, -2px);
52 -}
53 -
54 -.from-them {
55 - position: relative;
56 - padding: 10px 20px;
57 - background: #E5E5EA;
58 - border-radius: 25px;
59 - color: black;
60 - float: left;
61 -}
62 -.from-them:before {
63 - content: "";
64 - position: absolute;
65 - z-index: 2;
66 - bottom: -2px;
67 - left: -7px;
68 - height: 20px;
69 - border-left: 20px solid #E5E5EA;
70 - border-bottom-right-radius: 16px 14px;
71 - -webkit-transform: translate(0, -2px);
72 -}
73 -.from-them:after {
74 - content: "";
75 - position: absolute;
76 - z-index: 3;
77 - bottom: -2px;
78 - left: 4px;
79 - width: 26px;
80 - height: 20px;
81 - background: white;
82 - border-bottom-right-radius: 10px;
83 - -webkit-transform: translate(-30px, -2px);
84 -}
1 -<!DOCTYPE html>
2 -<html lang="en" >
3 -<head>
4 - <meta charset="UTF-8">
5 - <title>CodePen - Fun with background gradients</title>
6 - <link rel="stylesheet" href="./style.css">
7 -
8 -</head>
9 -<body>
10 -<!-- partial:index.partial.html -->
11 -<nav>Global navigation</nav>
12 -<header>
13 - <h1>Fun with background gradients</h1>
14 - <p>Just a bit of fun while wondering about using simple and subtle CSS gradients for backgrounds...</p>
15 -</header>
16 -<main>
17 - <ul class="cards">
18 - <li class="card -red">
19 - <div class="card--image">✤</div><h2>Red</h2>
20 - <p>Red is the color at the long wavelength end of the visible spectrum of light, next to orange and opposite violet.</p>
21 - </li>
22 - <li class="card -green">
23 - <div class="card--image">✦</div>
24 - <h2>Green</h2>
25 - <p>Green is the color between blue and yellow on the visible spectrum. It is evoked by light which has a dominant wavelength of roughly 495–570 nm.</p>
26 - </li>
27 - <li class="card -blue">
28 - <div class="card--image">❖</div>
29 - <h2>Blue</h2>
30 - <p>Blue is one of the three primary colours of pigments in painting and traditional colour theory, as well as in the RGB colour model. It lies between violet and green on the spectrum of visible light.</p>
31 - </li>
32 - </ul>
33 -</main>
34 -<!-- partial -->
35 -
36 -</body>
37 -</html>
1 -* {
2 - box-sizing: border-box;
3 - margin: 0;
4 - padding: 0;
5 -}
6 -
7 -body {
8 - width: 100vw;
9 - height: 200vh;
10 - padding: 1rem;
11 - font-family: Avenir, sans-serif;
12 - font-size: 112.5%;
13 - color: #124;
14 - background-image: radial-gradient(rgba(255, 0, 0, 0.3), rgba(255, 0, 0, 0) 40vw), radial-gradient(rgba(0, 128, 0, 0.3), rgba(0, 128, 0, 0) 40vw), radial-gradient(rgba(0, 0, 255, 0.3), rgba(0, 0, 255, 0) 40vw), radial-gradient(rgba(255, 255, 0, 0.3), rgba(255, 255, 0, 0) 40vw), radial-gradient(rgba(255, 0, 0, 0.3), rgba(255, 0, 0, 0) 40vw);
15 - background-position: -40vw 14rem, 50% 10rem, 60vw 14rem, -10vw calc(14rem + 20vw), 30vw calc(14rem + 20vw);
16 - background-size: 80vw 80vw;
17 - background-repeat: no-repeat;
18 -}
19 -
20 -nav {
21 - position: fixed;
22 - top: 0;
23 - right: 0;
24 - left: 0;
25 - padding: 1.5rem 1rem;
26 - background-color: white;
27 - border-top: 4px solid #c080c0;
28 -}
29 -
30 -header {
31 - max-width: 600px;
32 - margin: 24vh auto;
33 -}
34 -
35 -h1 {
36 - font-size: 3.2rem;
37 - font-weight: 900;
38 - line-height: 1.1;
39 -}
40 -h1 + p {
41 - margin-top: 1rem;
42 -}
43 -
44 -main {
45 - max-width: 800px;
46 - margin-right: auto;
47 - margin-left: auto;
48 -}
49 -
50 -.cards {
51 - display: flex;
52 - flex-direction: column;
53 - margin: -1rem;
54 - list-style: none;
55 -}
56 -@media (min-width: 600px) {
57 - .cards {
58 - flex-direction: row;
59 - }
60 -}
61 -
62 -.card {
63 - flex: 1;
64 - margin: 1rem;
65 - padding: 1rem;
66 - background-color: white;
67 - border-radius: 0.5rem;
68 - box-shadow: 0 0 6rem rgba(0, 0, 0, 0.1);
69 -}
70 -.card * {
71 - margin-bottom: 1rem;
72 -}
73 -
74 -.card--image {
75 - font-size: 6rem;
76 - line-height: 1;
77 -}
78 -.card.-red .card--image {
79 - color: #ff8080;
80 -}
81 -.card.-green .card--image {
82 - color: #80c080;
83 -}
84 -.card.-blue .card--image {
85 - color: #8080ff;
86 -}
...\ No newline at end of file ...\ No newline at end of file
1 -<!DOCTYPE html>
2 -<html lang="en" >
3 -<head>
4 - <meta charset="UTF-8">
5 - <title>CodePen - Animated - SVG Scrolling Mouse Icon</title>
6 -
7 - <!-- 헤더, 콘텐츠 틀 -->
8 - <meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
9 -
10 - <!-- 메세지 버블 -->
11 - <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
12 -
13 -
14 -
15 -</head>
16 -<body>
17 -<!-- partial:index.partial.html -->
18 -
19 -
20 -
21 -
22 -<!-- 헤더 틀 -->
23 -<div class="hero">
24 -
25 - <h1>Emoji Human,<br>Who are you?</h1>
26 -
27 - <a class="scroll-link" href="#content">
28 - <svg class="mouse" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 76 130" preserveAspectRatio="xMidYMid meet">
29 - <g fill="none" fill-rule="evenodd">
30 - <rect width="70" height="118" x="1.5" y="1.5" stroke="#FFF" stroke-width="3" rx="36"/>
31 - <circle class="scroll" cx="36.5" cy="31.5" r="4.5" fill="#FFF"/>
32 - </g>
33 - </svg>
34 - </a>
35 -
36 -</div>
37 -<!-- 헤더 틀 -->
38 -
39 -<!-- 콘텐츠 틀 -->
40 -<div id="content" class="content">
41 -
42 - <!-- 메세지 버블 -->
43 - <section>
44 - <!-- 1번 대화 -->
45 - <div class="from-them">
46 - <p>안녕하세요!!<br>
47 - 저는 이모지 인간이라고 해요 @.@ <br>
48 - 당신을 만나게 되어서 매우 반가워요 :)
49 - </p>
50 - </div>
51 - <div class="clear"></div>
52 -
53 - <div class="from-me slam">
54 - <p>말풍선을 눌러 이모지 인간에게 인사하기</p>
55 - </div>
56 - <div class="clear"></div>
57 - <!-- 1번 대화 -->
58 -
59 - <!-- 2번 대화 -->
60 - <div class="from-me gentle">
61 - <p>이모지 인간은 뭔가요...?</p>
62 - </div>
63 - <div class="clear"></div>
64 -
65 - <div class="from-them">
66 - <p>이모지 인간은 말그대로
67 - “이모지”로 이루어진 인격체입니다.
68 - 여러분이 알고 계시는 다양한 이모지들이 있죠?
69 - 저는 그 어떤 모습의 이모지든 다 될 수 있어요.
70 - 이모지 자체가 저의 몸이라고 생각하시면 됩니다.
71 - 예를 들어, 옆의 태양이나 파라솔까지도요!
72 - (하지만, 저는 인격체이기 때문에 말도 할 수 있어요V) </p>
73 - </div>
74 - <!-- 2번 대화 -->
75 -
76 - <!-- 3번 대화 -->
77 - <div class="from-me gentle">
78 - <p>어...이모지 인간은 어떻게 생겨났나요?</p>
79 - </div>
80 - <div class="clear"></div>
81 -
82 - <div class="from-them">
83 - <p>요즘 10대-20대들은 SNS 사용시,
84 - 주로 이모지를 사용하여 대화를 하곤 합니다.
85 - 문자로 길게 설명을 하는 것보다 표정이나 감정들을
86 - 직관적으로 전달할 수 있는 이모지가
87 - 더 간편하기에 그렇습니다.
88 - 이에 현대인들의 일상은 이모지로 가득 찬,
89 - “<이모지 인간>이 아닐까”
90 - 하는 발상에서 제가 생겨나게 되었답니다.</p>
91 - </div>
92 - <!-- 3번 대화 -->
93 -
94 - <!-- 4번 대화 -->
95 - <div class="from-me gentle">
96 - <p>그럼 이모지 인간은 뭘할 수 있나요?</p>
97 - </div>
98 - <div class="clear"></div>
99 -
100 - <div class="from-them">
101 - <p>첫째, 저와의 간단한 대화!
102 - 둘째, 이모지로 보내는 문자!
103 - 셋째, 이모지 MBTI 카드!</p>
104 - </div>
105 -
106 - <div class="from-them">
107 - <p>첫번째...보다는
108 - 두번째와 세번째에 대한 설명을 더 해볼께요...
109 - 이모지로 보내는 문자는 Emo-ssage라고 해요.
110 - 아무에게나, 혹은 특정 상대에게 자유롭게 문자를 보내면,
111 - 대화 중 일부를 이모지로 채워줄 거랍니다.
112 - 작성이 완료되면 여러분만의 emo-ssage를
113 - 이미지로 저장할 수 있어요!</p>
114 - </div>
115 -
116 - <div class="from-them">
117 - <p>이모지 MBTI 카드는 EMOTI라고 해요.
118 - 여러 이모지들을 활용해서 각 16개 mbti
119 - 고유의 이모지들을 탄생시켰어요.
120 - 아, 그리고 각 mbti 카드를 넘길 때마다
121 - 어울리는 노래도 흘러나온답니다! </p>
122 - </div>
123 - <!-- 4번 대화 -->
124 -
125 - <!-- 5번 대화 -->
126 - <div class="from-me gentle">
127 - <p>네...아, 아까 정의가 조금 헷갈리는데, 이모지 인간은 이모지인가요 인간인가요?</p>
128 - </div>
129 - <div class="clear"></div>
130 -
131 - <div class="from-them">
132 - <p>This page cannot be found</p>
133 - </div>
134 - <!-- 5번 대화 -->
135 - </section>
136 - <script src="./script.js"></script>
137 - <!-- 메세지 버블 -->
138 -
139 -</div>
140 -
141 - <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script><script src="./script.js"></script>
142 -<!-- 콘텐츠 틀 -->
143 -
144 -
145 -
146 -
147 -</body>
148 -</html>
1 -jQuery(document).ready(function($){
2 -
3 - $('a.scroll-link').click(function(e){
4 - e.preventDefault();
5 - $id = $(this).attr('href');
6 - $('body,html').animate({
7 - scrollTop: $($id).offset().top -20
8 - }, 750);
9 - });
10 -
11 -});
...\ No newline at end of file ...\ No newline at end of file
1 -/* 헤더, 콘텐츠 틀 */
2 -@import url("https://fonts.googleapis.com/css?family=Playfair+Display:700|Source+Sans+Pro");
3 -*,
4 -*::before,
5 -*::after {
6 - box-sizing: border-box;
7 -}
8 -
9 -body {
10 - -webkit-font-smoothing: antialiased;
11 - -moz-osx-font-smoothing: grayscale;
12 - font-family: "Source Sans Pro", sans-serif;
13 - font-size: 16px;
14 - line-height: 1.618;
15 -}
16 -
17 -h1,
18 -h2 {
19 - font-family: "Playfair Display", serif;
20 - line-height: 1.2;
21 - margin-bottom: 1rem;
22 - letter-spacing: 1px;
23 -}
24 -
25 -h1 {
26 - font-size: 3rem;
27 - max-width: 35rem;
28 - text-align: center;
29 -}
30 -
31 -h2 {
32 - font-size: 2.5rem;
33 -}
34 -
35 -.hero {
36 - position: relative;
37 - min-height: 100vh;
38 - display: flex;
39 - align-items: center;
40 - justify-content: center;
41 - padding: 12rem 2rem;
42 - color: white;
43 - background-image: linear-gradient(to bottom, #45484d 0%, black 100%), url("https://source.unsplash.com/random/1920x1080/?sky");
44 - background-blend-mode: multiply;
45 - background-size: cover;
46 -}
47 -
48 -.mouse {
49 - max-width: 2.5rem;
50 - width: 100%;
51 - height: auto;
52 -}
53 -
54 -.scroll {
55 - -webkit-animation-name: scroll;
56 - animation-name: scroll;
57 - -webkit-animation-duration: 1.5s;
58 - animation-duration: 1.5s;
59 - -webkit-animation-timing-function: cubic-bezier(0.65, -0.55, 0.25, 1.5);
60 - animation-timing-function: cubic-bezier(0.65, -0.55, 0.25, 1.5);
61 - -webkit-animation-iteration-count: infinite;
62 - animation-iteration-count: infinite;
63 - transform-origin: 50% 20.5px;
64 - will-change: transform, opacity;
65 - opacity: 1;
66 -}
67 -
68 -.scroll-link {
69 - position: absolute;
70 - bottom: 1rem;
71 - left: 50%;
72 - transform: translateX(-50%);
73 -}
74 -
75 -@-webkit-keyframes scroll {
76 - 0%, 20% {
77 - transform: translateY(0) scaleY(1);
78 - }
79 - 100% {
80 - transform: translateY(36px) scaleY(2);
81 - opacity: 0;
82 - }
83 -}
84 -
85 -@keyframes scroll {
86 - 0%, 20% {
87 - transform: translateY(0) scaleY(1);
88 - }
89 - 100% {
90 - transform: translateY(36px) scaleY(2);
91 - opacity: 0;
92 - }
93 -}
94 -.content {
95 - min-height: 100vh;
96 - max-width: 28rem;
97 - margin: 0 auto;
98 - display: flex;
99 - flex-direction: column;
100 - align-items: center;
101 - justify-content: center;
102 - text-align: center;
103 -}
104 -/* 헤더, 콘텐츠 틀 */
105 -
106 -
107 -
108 -
109 -
110 -/* 메세지 버블 */
111 -body {
112 - font-family: "Helvetica Neue";
113 - font-size: 20px;
114 - font-weight: normal;
115 -}
116 -
117 -section {
118 - max-width: 450px;
119 - margin: 50px auto;
120 -}
121 -section div {
122 - max-width: 255px;
123 - word-wrap: break-word;
124 - margin-bottom: 20px;
125 - line-height: 24px;
126 -}
127 -
128 -.clear {
129 - clear: both;
130 -}
131 -
132 -.from-me {
133 - position: relative;
134 - padding: 10px 20px;
135 - color: white;
136 - background: #0B93F6;
137 - border-radius: 25px;
138 - float: right;
139 -}
140 -.from-me:before {
141 - content: "";
142 - position: absolute;
143 - z-index: -1;
144 - bottom: -2px;
145 - right: -7px;
146 - height: 20px;
147 - border-right: 20px solid #0B93F6;
148 - border-bottom-left-radius: 16px 14px;
149 - -webkit-transform: translate(0, -2px);
150 -}
151 -.from-me:after {
152 - content: "";
153 - position: absolute;
154 - z-index: 1;
155 - bottom: -2px;
156 - right: -56px;
157 - width: 26px;
158 - height: 20px;
159 - background: white;
160 - border-bottom-left-radius: 10px;
161 - -webkit-transform: translate(-30px, -2px);
162 -}
163 -
164 -.from-them {
165 - position: relative;
166 - padding: 10px 20px;
167 - background: #E5E5EA;
168 - border-radius: 25px;
169 - color: black;
170 - float: left;
171 -}
172 -.from-them:before {
173 - content: "";
174 - position: absolute;
175 - z-index: 2;
176 - bottom: -2px;
177 - left: -7px;
178 - height: 20px;
179 - border-left: 20px solid #E5E5EA;
180 - border-bottom-right-radius: 16px 14px;
181 - -webkit-transform: translate(0, -2px);
182 -}
183 -.from-them:after {
184 - content: "";
185 - position: absolute;
186 - z-index: 3;
187 - bottom: -2px;
188 - left: 4px;
189 - width: 26px;
190 - height: 20px;
191 - background: white;
192 - border-bottom-right-radius: 10px;
193 - -webkit-transform: translate(-30px, -2px);
194 -}
195 -/* 메세지 버블 */
...\ No newline at end of file ...\ No newline at end of file
1 +/* 내비 */
2 +body {
3 + font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
4 + overflow-x: hidden;
5 + }
6 + .center
7 + {
8 + text-align: center;
9 + }
10 + p
11 + {
12 + font-size: 20px;
13 + }
14 + a,
15 + a:hover,
16 + a:focus,
17 + a:active {
18 + color: #99CED4;/*hover-highlight over,active-highlisht when clicked,focus-highlight when under use*/
19 + outline: none; /*gives outline to an element*/
20 + }
21 + h2,
22 + h3
23 + {
24 + font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
25 + text-transform: uppercase;
26 + font-weight: 700;
27 + font-size: 30px;
28 + }
29 + hr.star-light,
30 + hr.star-primary {
31 + padding: 0; /*no padding,bordor upper 5px text to be avilable in center mac-width of 250 having margin t25 rauto b30 */
32 + border: none;
33 + border-top: solid 5px;
34 + text-align: center;
35 + max-width: 250px;
36 + margin: 25px auto 30px;
37 + }
38 + hr.star-light:after,
39 + hr.star-primary:after {
40 + content: "\f021"; /*give an icon FontAwesome helps to get desired font display inline within full span position*/
41 + font-family: FontAwesome;
42 + display: inline-block;
43 + position: relative;
44 + top: -0.8em;
45 + font-size: 2em;
46 + padding: 0 0.25em;
47 + }
48 + hr.star-light {
49 + border-color: white; /*gives border white*/
50 + }
51 + hr.star-light:after {
52 + background-color: #18BC9C;
53 + color: white;
54 + }
55 + hr.star-primary {
56 + border-color: #2C3E50;
57 + }
58 + hr.star-primary:after {
59 + background-color: white;
60 + color: #2C3E50;
61 + }
62 + header {
63 + text-align: center;
64 + background: #18BC9C;
65 + color: white;
66 + }
67 + header .container {
68 + padding-top: 100px;
69 + padding-bottom: 50px;
70 + }
71 + header .intro .name {
72 + display: block;
73 + font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
74 + text-transform: uppercase;
75 + font-weight: 700;
76 + font-size: 2em;
77 + }
78 + header .intro .skills {
79 + font-size: 1.25em;
80 + font-weight: 300;/*how much bold*/
81 + }
82 + @media (min-width: 768px) {/* if minimum width exceeds then perform*/
83 + header .container {
84 + padding-top: 200px;
85 + padding-bottom: 100px;
86 + }
87 + header .intro .name {
88 + font-size: 4.75em;
89 + }
90 + header .intro .skills {
91 + font-size: 1.75em;
92 + }
93 + }
94 + .navbar-custom {
95 + background: #2C3E50;
96 + font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
97 + text-transform: uppercase;
98 + font-weight: 700;
99 + border: none;
100 + }
101 +
102 + .navbar-custom .navbar-nav {
103 + letter-spacing: 1px;
104 + }
105 + .navbar-custom .navbar-nav li a {
106 + color: white;
107 + }
108 + .navbar-custom .navbar-nav li a:hover {
109 + color: #18BC9C;
110 + outline: none;
111 + }
112 + .navbar-custom .navbar-nav li a:focus,
113 + .navbar-custom .navbar-nav li a:active {
114 + color: white;
115 + }
116 + .navbar-custom .navbar-nav li.active a {
117 + color: white;
118 + background: #18BC9C;
119 + }
120 + .navbar-custom .navbar-nav li.active a:hover,
121 + .navbar-custom .navbar-nav li.active a:focus,
122 + .navbar-custom .navbar-nav li.active a:active {
123 + color: white;
124 + background: #18BC9C;
125 + }
126 + .navbar-custom .navbar-toggle {
127 + color: white;
128 + text-transform: uppercase;
129 + font-size: 10px;
130 + border-color: white;
131 + }
132 + .navbar-custom .navbar-toggle:hover,
133 + .navbar-custom .navbar-toggle:focus {
134 + background-color: #18BC9C;
135 + color: white;
136 + border-color: #18BC9C;
137 + }
138 + footer {
139 + color: white;
140 + }
141 + footer h3 {
142 + margin-bottom: 30px;
143 + }
144 + footer .footer-above {
145 + padding-top: 50px;
146 + background-color: #2C3E50;
147 + }
148 + footer .footer-col {
149 + margin-bottom: 50px;
150 + }
151 + footer .footer-below {
152 + padding: 25px 0;
153 + background-color: #233140;
154 + }
155 + /* 내비 */
156 +
157 +
158 +
159 +
160 + /* 그라디언트 배경 */
161 +* {
162 + box-sizing: border-box;
163 + margin: 0;
164 + padding: 0;
165 +}
166 +
167 +body {
168 + width: 100vw;
169 + height: 200vh;
170 + padding: 1rem;
171 + font-family: Avenir, sans-serif;
172 + font-size: 112.5%;
173 + color: #124;
174 + 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);
175 + background-position: -30vw 7rem, 50% 10rem, 60vw 14rem, -10vw calc(14rem + 20vw), 30vw calc(14rem + 20vw);
176 + background-size: 80vw 80vw;
177 + background-repeat: no-repeat;
178 +}
179 +/* 그라디언트 배경 */
180 +
...\ No newline at end of file ...\ No newline at end of file
1 +<!DOCTYPE html>
2 +<html lang="ko">
3 +
4 +<head>
5 + <meta charset="UTF-8">
6 + <title>EMOJI-HUMAN</title>
7 + <link rel="stylesheet" href="/index.css">
8 + <!-- <link rel="stylesheet" href="/EMO-SSAGE/EMO-SSAGE.css"> -->
9 + <link rel="stylesheet" href="/EMO-SSAGE/emossage.css">
10 + <script src="/EMO-SSAGE/emossage.js" type="text/javascript"></script>
11 + <link rel="icon" type="image/x-icon" href="/src/rainbow_1f308.png">
12 + <style>
13 + body {
14 + background-image: url("emossage-03.png");
15 + background-repeat: no-repeat;
16 + background-size: 100%;
17 + font-family: Noto Sans KR, regular;
18 + text-align: center;
19 + }
20 +
21 + h1 {
22 + font-size: 50px;
23 + }
24 +
25 + p1 {
26 + font-size: 24px;
27 + }
28 +
29 + p2 {
30 + font-size: 14px
31 + }
32 +
33 + p2.small {
34 + line-height: 0.7;
35 + }
36 + </style>
37 + <div style="height: 100px; overflow: auto">
38 + </div>
39 +
40 +
41 +</head>
42 +
43 +<body>
44 + <form action="#">
45 +
46 + <header>
47 + <h1>Message + EMOJI<span>= Emossage</span></h1>
48 + <p1>Emoti는 이모지 중심 메세지입니다</p1>
49 + <br>
50 + <p2>
51 + <p class="small"> 글자 중 일부가 이모지로 변환됩니다.<br>
52 + 여러분만의 이모지 편지를 적어보세요<br>
53 + </p2>
54 + </p>
55 + </header>
56 +
57 + <!-- <div>
58 + <label class="desc" id="title1" for="Field1">Full Name</label>
59 + <div>
60 + <input id="Field1" name="Field1" type="text" class="field text fn" value="" size="8" tabindex="1">
61 + </div>
62 + </div>
63 +
64 + <div>
65 + <label class="desc" id="title3" for="Field3">
66 + Email
67 + </label>
68 + <div>
69 + <input id="Field3" name="Field3" type="email" spellcheck="false" value="" maxlength="255" tabindex="3">
70 + </div>
71 + </div> -->
72 +
73 + <div>
74 + <label class="desc" id="title4" for="Field4">
75 + Message
76 + </label>
77 +
78 + <div>
79 + <textarea id="Field4" name="Field4" placeholder="이모지로 변환할 문장을 입력해보세요!" spellcheck="true" rows="10" cols="50" tabindex="4"></textarea>
80 + </div>
81 +
82 + <div>
83 + <button type="button" onclick="convertToEmoji()">Submit</button>
84 + </div>
85 + </div>
86 +
87 + <div>
88 + <label class="desc" id="title5" for="Field5">
89 + Result
90 + </label>
91 +
92 + <div>
93 + <textarea id="Field5" name="Field5" readonly spellcheck="true" style="height: fit-content;"></textarea>
94 + </div>
95 + </div>
96 +
97 + </form>
98 +</body>
...\ No newline at end of file ...\ No newline at end of file
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
This diff is collapsed. Click to expand it.
...@@ -82,7 +82,7 @@ body { ...@@ -82,7 +82,7 @@ body {
82 82
83 83
84 /*---------요소들 부분---------*/ 84 /*---------요소들 부분---------*/
85 - @import url("https://fonts.googleapis.com/css?family=Cardo:400i|Rubik:400,700&display=swap"); 85 + @import url("/external/cardo_rubik");
86 :root { 86 :root {
87 --d: 700ms; 87 --d: 700ms;
88 --e: cubic-bezier(0.19, 1, 0.22, 1); 88 --e: cubic-bezier(0.19, 1, 0.22, 1);
...@@ -117,7 +117,7 @@ body { ...@@ -117,7 +117,7 @@ body {
117 } 117 }
118 @media (min-width: 800px) { 118 @media (min-width: 800px) {
119 .page-content { 119 .page-content {
120 - grid-template-columns: repeat(4, 1fr); 120 + grid-template-columns: repeat(3, 1fr);
121 } 121 }
122 } 122 }
123 123
...@@ -191,14 +191,14 @@ body { ...@@ -191,14 +191,14 @@ body {
191 } 191 }
192 192
193 .title { 193 .title {
194 - font-size: 1.3rem; 194 + font-size: 30px;
195 font-weight: bold; 195 font-weight: bold;
196 - line-height: 1.2; 196 + font-family: Noto Sans KR;
197 } 197 }
198 198
199 .copy { 199 .copy {
200 font-family: var(--font-serif); 200 font-family: var(--font-serif);
201 - font-size: 1.125rem; 201 + font-size: 15px;
202 font-style: italic; 202 font-style: italic;
203 line-height: 1.35; 203 line-height: 1.35;
204 } 204 }
...@@ -210,7 +210,7 @@ body { ...@@ -210,7 +210,7 @@ body {
210 } 210 }
211 211
212 .content { 212 .content {
213 - transform: translateY(calc(100% - 4.5rem)); 213 + transform: translateY(calc(100% - 10rem));
214 } 214 }
215 .content > *:not(.title) { 215 .content > *:not(.title) {
216 opacity: 0; 216 opacity: 0;
...@@ -253,7 +253,7 @@ body { ...@@ -253,7 +253,7 @@ body {
253 253
254 254
255 /* text fade in */ 255 /* text fade in */
256 -@import url(https://fonts.googleapis.com/css?family=Raleway:400,900,500,600,700); 256 +@import url(/external/raleway);
257 257
258 .animated{ 258 .animated{
259 -webkit-animation-fill-mode:both; 259 -webkit-animation-fill-mode:both;
...@@ -322,6 +322,7 @@ body { ...@@ -322,6 +322,7 @@ body {
322 color: rgb(0, 0, 0); 322 color: rgb(0, 0, 0);
323 font-family: Noto Sans KR; 323 font-family: Noto Sans KR;
324 text-align: center; 324 text-align: center;
325 + line-height: 15px;
325 } 326 }
326 #p4{ 327 #p4{
327 font-size: 15px; 328 font-size: 15px;
......
...@@ -6,10 +6,10 @@ ...@@ -6,10 +6,10 @@
6 <title>EMOJI-HUMAN</title> 6 <title>EMOJI-HUMAN</title>
7 <link rel="stylesheet" href="/About Us/About Us.css"> 7 <link rel="stylesheet" href="/About Us/About Us.css">
8 <meta name="viewport" content="width=device-width, initial-scale=1"> 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"> 9 + <link rel="stylesheet" href="/external/reset.min.css">
10 10
11 <!-- 손흔들 --> 11 <!-- 손흔들 -->
12 - <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> 12 + <link rel="stylesheet" href="/external/ajax/normalize.min.css">
13 13
14 </head> 14 </head>
15 15
...@@ -18,18 +18,21 @@ ...@@ -18,18 +18,21 @@
18 <body> 18 <body>
19 19
20 <!-- 내비게이션 --> 20 <!-- 내비게이션 -->
21 - <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><!--bootstrap--> 21 + <link rel="stylesheet" href="/external/bootstrap.min.css"><!--bootstrap-->
22 <!--css link--> 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--> 23 + <link rel="stylesheet" href="/external/font-awesome.min.css">
24 - <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><!--jquery script--> 24 + <!--for icons-->
25 - <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><!--bootstrap script--> 25 + <script src="/external/ajax/jquery.min.js"></script><!--jquery script-->
26 + <script src="/external/bootstrap/bootstrap.min.js"></script><!--bootstrap script-->
26 27
27 <body id="page-top"> 28 <body id="page-top">
28 <!--creating a navigation bar--> 29 <!--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 + <nav id="main-nav" class="navbar navbar-default navbar-fixed-top navbar-custom">
31 + <!--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--> 32 <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 --> 33 <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"> 34 + <button type="button" class="navbar-toggle" data-toggle="collapse"
35 + data-target="#bs-example-navbar-collapse-1">
33 <span></span> Menu <i class="fa fa-bars"></i> 36 <span></span> Menu <i class="fa fa-bars"></i>
34 </button> 37 </button>
35 </div><!--end of button--> 38 </div><!--end of button-->
...@@ -37,7 +40,8 @@ ...@@ -37,7 +40,8 @@
37 <ul class="nav navbar-nav"> 40 <ul class="nav navbar-nav">
38 <li><a href="/index.html">Home</a></li> 41 <li><a href="/index.html">Home</a></li>
39 </ul> 42 </ul>
40 - <ul class="nav navbar-nav navbar-right page-scroll"><!--second UL to go to right having proprty to scroll page--> 43 + <ul class="nav navbar-nav navbar-right page-scroll">
44 + <!--second UL to go to right having proprty to scroll page-->
41 <li> <a href="/About Us/About Us.html">About Us</a></li> 45 <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> 46 <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> 47 <li><a href="/EMO-TI/EMO-TI.html">EMO-TI</a></li>
...@@ -54,14 +58,22 @@ ...@@ -54,14 +58,22 @@
54 <div class="one"> 58 <div class="one">
55 59
56 <div class="wave"><span>👋</span></div> 60 <div class="wave"><span>👋</span></div>
61 + <br>
62 + <br>
63 + <br>
64 + <br>
65 + <br>
66 + <br>
67 + <br>
68 + <br>
69 + <br>
57 70
58 <p id="p1" class="animated fadeOutUp">Hello, Humans!</p> 71 <p id="p1" class="animated fadeOutUp">Hello, Humans!</p>
59 - <br> 72 +
60 <p id="p2" class="animated fadeOutUp">안녕하세요, 우리는 팀 이모지 인간입니다.</p> 73 <p id="p2" class="animated fadeOutUp">안녕하세요, 우리는 팀 이모지 인간입니다.</p>
61 74
62 <br> 75 <br>
63 - <br> 76 +
64 - <br>
65 <p id="p3" class="animated2 fadeIn">우리는 이모지 인간이 아닙니다.</p> 77 <p id="p3" class="animated2 fadeIn">우리는 이모지 인간이 아닙니다.</p>
66 <p id="p4" class="animated2 fadeIn">진짜 인간이에요!</p> 78 <p id="p4" class="animated2 fadeIn">진짜 인간이에요!</p>
67 79
...@@ -73,21 +85,22 @@ ...@@ -73,21 +85,22 @@
73 <div class="list"> 85 <div class="list">
74 <div class="two"> 86 <div class="two">
75 87
76 - <div style="float: left; width: 40%;"> 88 + <div style="float: left; width: 30%;">
77 <img src="/src/song.png" style="display: block; margin: 0 auto;"> 89 <img src="/src/song.png" style="display: block; margin: 0 auto;">
78 </div> 90 </div>
79 91
80 <!-- 요소들 --> 92 <!-- 요소들 -->
81 - <div style="float: left; width: 60%;"> 93 + <div style="float: left; width: 70%;">
82 <main class="page-content"> 94 <main class="page-content">
83 <!-- 1번칸 --> 95 <!-- 1번칸 -->
84 <div class="card"> 96 <div class="card">
85 <div class="content"> 97 <div class="content">
86 <h2 class="title">Me</h2> 98 <h2 class="title">Me</h2>
87 - <p class="copy">안녕하세요 인간 흠터레스팅 송민겸입니다. 99 + <p class="copy">안녕하세요<br>인간 흠터레스팅 송민겸입니다.<br>
88 - 저는 경희대학교 디지털콘텐츠학과 휴학 중인 (현)백수입니다. 100 + 저는 현재 경희대학교 디지털콘텐츠학과<br> 휴학 중인 (현)백수입니다. ㅋㅋ
89 - 23년 새해를 맞아 갓-생을 살기 위해 노력하고 있지만... 101 + <br>23년 새해를 맞아 갓-생을<br>살기 위해 노력하고 있지만...<br>
90 - 네, 아무튼 열심히 노력해보았습니다. ^^ 102 + 네, 아무튼 열심히 노력하고 있습니다. ^^
103 + <br>저는 참고로 ENTJ입니다.<br>전국 모든 ENTJ 홧팅~
91 </p> 104 </p>
92 </div> 105 </div>
93 </div> 106 </div>
...@@ -96,10 +109,10 @@ ...@@ -96,10 +109,10 @@
96 109
97 <div class="content"> 110 <div class="content">
98 <h2 class="title">Interest</h2> 111 <h2 class="title">Interest</h2>
99 - <p class="copy">휴학을 한 후의 제 관심사는 해외 여행과 진로임니두. 112 + <p class="copy">휴학을 한 후의 제 관심사는<br>해외 여행과 진로 고민입니다.
100 - 놀 수 있을 때 많이 놀러다니고 싶어 티끌 모아 여행으로 탕진을 실천하고 있슴니다. 113 + <br>놀 수 있을 때 많이 놀러 다니고 싶어서<br>여행으로 탕진을 실천하고 있습니다.
101 - 또 최근에는 UX/UI 디자인과 개발에 관심이 있어 이런 웹페이지도 만들었어욤! 114 + <br>또 최근에는 UX/UI 디자인과 개발에<br>관심이 생겨서 이런 홈페이지도
102 - 나 이러다가 개발자가 되는 거 아닌가 몰루 '3' 115 + <br>만들게 되었어욤! 이러다가 개발의<br>길을 걷게 되고...
103 </p> 116 </p>
104 </div> 117 </div>
105 118
...@@ -110,8 +123,7 @@ ...@@ -110,8 +123,7 @@
110 <h2 class="title">Summary</h2> 123 <h2 class="title">Summary</h2>
111 <p class="copy">이번 전시 후기는...정말 발등에 불이 아니라 메테오가 떨어진 수준 ^^;; 124 <p class="copy">이번 전시 후기는...정말 발등에 불이 아니라 메테오가 떨어진 수준 ^^;;
112 비전공자로 코딩의 ㅋ도 모르는 제가 정말 맨땅에 헤딩 수준으로 개발을 하게 되어서 더 고생했던 것 같습니다. 125 비전공자로 코딩의 ㅋ도 모르는 제가 정말 맨땅에 헤딩 수준으로 개발을 하게 되어서 더 고생했던 것 같습니다.
113 - 근데 솔직히 벼락치기로 이정도면 잘했어요 칭찬 스티커 받아야 한다고 생각함ㄹㅇㅋㅋ. 126 + 첫 개발이라서 아직 많이 미숙하고 고치고 싶은 부분이 많지만, 모두들 재밌게 봐주셨으면 해요! 감사합니다!!
114 - 반박시 내 마음 찢어짐 ㅠ
115 127
116 </p> 128 </p>
117 </div> 129 </div>
...@@ -129,8 +141,8 @@ ...@@ -129,8 +141,8 @@
129 <div class="three"> 141 <div class="three">
130 142
131 <!-- 요소들 --> 143 <!-- 요소들 -->
132 - <div style="float: left; width: 64%;"> 144 + <div style="float: left; width: 70%;">
133 - <main class="page-content"> 145 + <main class="page-content" style="justify-content: end;">
134 <!-- 1번칸 --> 146 <!-- 1번칸 -->
135 <div class="card"> 147 <div class="card">
136 <div class="content"> 148 <div class="content">
...@@ -148,7 +160,7 @@ ...@@ -148,7 +160,7 @@
148 </div> 160 </div>
149 <!-- 2번칸 --> 161 <!-- 2번칸 -->
150 <div class="card"> 162 <div class="card">
151 - <<div class="content"> 163 + <div class="content">
152 <h2 class="title">Interest</h2> 164 <h2 class="title">Interest</h2>
153 <p class="copy">현재 관심 분야는 165 <p class="copy">현재 관심 분야는
154 3D, 166 3D,
...@@ -180,17 +192,15 @@ ...@@ -180,17 +192,15 @@
180 (ex : 개발...) 192 (ex : 개발...)
181 193
182 이렇게 탄생한 194 이렇게 탄생한
183 - >>>이모지 인간<<< 195 + >>>이모지 인간<<< 재밌게 즐겨주시길 바라요! </p>
184 - 재밌게 즐겨주시길 196 + </div>
185 - 바라요!
186 -
187 - </p>
188 </div> 197 </div>
189 </main> 198 </main>
190 </div> 199 </div>
200 +
191 <!-- 요소들 --> 201 <!-- 요소들 -->
192 202
193 - <div style="float: left; width: 36%;"> 203 + <div style="float: left; width: 30%;">
194 <img src="/src/kim.png" style="display: block; margin: 0 auto;"> 204 <img src="/src/kim.png" style="display: block; margin: 0 auto;">
195 </div> 205 </div>
196 206
...@@ -198,5 +208,6 @@ ...@@ -198,5 +208,6 @@
198 </div> 208 </div>
199 <!-- 3페이지 --> 209 <!-- 3페이지 -->
200 210
201 -</body> 211 + </body>
212 +
202 </html> 213 </html>
...\ No newline at end of file ...\ No newline at end of file
......
1 +/
1 /* 내비 */ 2 /* 내비 */
2 body { 3 body {
3 font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif; 4 font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
4 overflow-x: hidden; 5 overflow-x: hidden;
5 - } 6 +}
6 - .center 7 +.center
7 - { 8 +{
8 text-align: center; 9 text-align: center;
9 - } 10 +}
10 - p 11 +p
11 - { 12 +{
12 font-size: 20px; 13 font-size: 20px;
13 - } 14 +}
14 - a, 15 +a,
15 - a:hover, 16 +a:hover,
16 - a:focus, 17 +a:focus,
17 - a:active,{ 18 +a:active,{
18 color: #99CED4;/*hover-highlight over,active-highlisht when clicked,focus-highlight when under use*/ 19 color: #99CED4;/*hover-highlight over,active-highlisht when clicked,focus-highlight when under use*/
19 outline: none; /*gives outline to an element*/ 20 outline: none; /*gives outline to an element*/
20 - } 21 +}
21 - h2, 22 +h2,
22 - h3, 23 +h3,
23 - { 24 +{
24 font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif; 25 font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
25 text-transform: uppercase; 26 text-transform: uppercase;
26 font-weight: 700; 27 font-weight: 700;
27 font-size: 30px; 28 font-size: 30px;
28 - } 29 +}
29 - hr.star-light, 30 +hr.star-light,
30 - hr.star-primary { 31 +hr.star-primary {
31 padding: 0; /*no padding,bordor upper 5px text to be avilable in center mac-width of 250 having margin t25 rauto b30 */ 32 padding: 0; /*no padding,bordor upper 5px text to be avilable in center mac-width of 250 having margin t25 rauto b30 */
32 border: none; 33 border: none;
33 border-top: solid 5px; 34 border-top: solid 5px;
34 text-align: center; 35 text-align: center;
35 max-width: 250px; 36 max-width: 250px;
36 margin: 25px auto 30px; 37 margin: 25px auto 30px;
37 - } 38 +}
38 - hr.star-light:after, 39 +hr.star-light:after,
39 - hr.star-primary:after { 40 +hr.star-primary:after {
40 content: "\f021"; /*give an icon FontAwesome helps to get desired font display inline within full span position*/ 41 content: "\f021"; /*give an icon FontAwesome helps to get desired font display inline within full span position*/
41 font-family: FontAwesome; 42 font-family: FontAwesome;
42 display: inline-block; 43 display: inline-block;
...@@ -44,42 +45,42 @@ body { ...@@ -44,42 +45,42 @@ body {
44 top: -0.8em; 45 top: -0.8em;
45 font-size: 2em; 46 font-size: 2em;
46 padding: 0 0.25em; 47 padding: 0 0.25em;
47 - } 48 +}
48 - hr.star-light { 49 +hr.star-light {
49 border-color: white; /*gives border white*/ 50 border-color: white; /*gives border white*/
50 - } 51 +}
51 - hr.star-light:after { 52 +hr.star-light:after {
52 background-color: #18BC9C; 53 background-color: #18BC9C;
53 color: white; 54 color: white;
54 - } 55 +}
55 - hr.star-primary { 56 +hr.star-primary {
56 border-color: #2C3E50; 57 border-color: #2C3E50;
57 - } 58 +}
58 - hr.star-primary:after { 59 +hr.star-primary:after {
59 background-color: white; 60 background-color: white;
60 color: #2C3E50; 61 color: #2C3E50;
61 - } 62 +}
62 - header { 63 +header {
63 text-align: center; 64 text-align: center;
64 background: #18BC9C; 65 background: #18BC9C;
65 color: white; 66 color: white;
66 - } 67 +}
67 - header .container { 68 +header .container {
68 padding-top: 100px; 69 padding-top: 100px;
69 padding-bottom: 50px; 70 padding-bottom: 50px;
70 - } 71 +}
71 - header .intro .name { 72 +header .intro .name {
72 display: block; 73 display: block;
73 font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif; 74 font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
74 text-transform: uppercase; 75 text-transform: uppercase;
75 font-weight: 700; 76 font-weight: 700;
76 font-size: 2em; 77 font-size: 2em;
77 - } 78 +}
78 - header .intro .skills { 79 +header .intro .skills {
79 font-size: 1.25em; 80 font-size: 1.25em;
80 font-weight: 300;/*how much bold*/ 81 font-weight: 300;/*how much bold*/
81 - } 82 +}
82 - @media (min-width: 768px) {/* if minimum width exceeds then perform*/ 83 +@media (min-width: 768px) {/* if minimum width exceeds then perform*/
83 header .container { 84 header .container {
84 padding-top: 200px; 85 padding-top: 200px;
85 padding-bottom: 100px; 86 padding-bottom: 100px;
...@@ -90,74 +91,76 @@ body { ...@@ -90,74 +91,76 @@ body {
90 header .intro .skills { 91 header .intro .skills {
91 font-size: 1.75em; 92 font-size: 1.75em;
92 } 93 }
93 - } 94 +}
94 - .navbar-custom { 95 +.navbar-custom {
95 background: #2C3E50; 96 background: #2C3E50;
96 font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif; 97 font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
97 text-transform: uppercase; 98 text-transform: uppercase;
98 font-weight: 700; 99 font-weight: 700;
99 border: none; 100 border: none;
100 - } 101 +}
101 - 102 +}
102 - .navbar-custom .navbar-nav { 103 +.navbar-custom .navbar-nav {
103 letter-spacing: 1px; 104 letter-spacing: 1px;
104 - } 105 +}
105 - .navbar-custom .navbar-nav li a { 106 +.navbar-custom .navbar-nav li a {
106 color: white; 107 color: white;
107 - } 108 +}
108 - .navbar-custom .navbar-nav li a:hover { 109 +.navbar-custom .navbar-nav li a:hover {
109 color: #18BC9C; 110 color: #18BC9C;
110 outline: none; 111 outline: none;
111 - } 112 +}
112 - .navbar-custom .navbar-nav li a:focus, 113 +.navbar-custom .navbar-nav li a:focus,
113 - .navbar-custom .navbar-nav li a:active { 114 +.navbar-custom .navbar-nav li a:active {
114 color: white; 115 color: white;
115 - } 116 +}
116 - .navbar-custom .navbar-nav li.active a { 117 +.navbar-custom .navbar-nav li.active a {
117 color: white; 118 color: white;
118 background: #18BC9C; 119 background: #18BC9C;
119 - } 120 +}
120 - .navbar-custom .navbar-nav li.active a:hover, 121 +.navbar-custom .navbar-nav li.active a:hover,
121 - .navbar-custom .navbar-nav li.active a:focus, 122 +.navbar-custom .navbar-nav li.active a:focus,
122 - .navbar-custom .navbar-nav li.active a:active { 123 +.navbar-custom .navbar-nav li.active a:active {
123 color: white; 124 color: white;
124 background: #18BC9C; 125 background: #18BC9C;
125 - } 126 +}
126 - .navbar-custom .navbar-toggle { 127 +.navbar-custom .navbar-toggle {
127 color: white; 128 color: white;
128 text-transform: uppercase; 129 text-transform: uppercase;
129 font-size: 10px; 130 font-size: 10px;
130 border-color: white; 131 border-color: white;
131 - } 132 +}
132 - .navbar-custom .navbar-toggle:hover, 133 +.navbar-custom .navbar-toggle:hover,
133 - .navbar-custom .navbar-toggle:focus { 134 +.navbar-custom .navbar-toggle:focus {
134 background-color: #18BC9C; 135 background-color: #18BC9C;
135 color: white; 136 color: white;
136 border-color: #18BC9C; 137 border-color: #18BC9C;
137 - } 138 +}
138 - footer { 139 +footer {
139 color: white; 140 color: white;
140 - } 141 +}
141 - footer h3 { 142 +footer h3 {
142 margin-bottom: 30px; 143 margin-bottom: 30px;
143 - } 144 +}
144 - footer .footer-above { 145 +footer .footer-above {
145 padding-top: 50px; 146 padding-top: 50px;
146 background-color: #2C3E50; 147 background-color: #2C3E50;
147 - } 148 +}
148 - footer .footer-col { 149 +footer .footer-col {
149 margin-bottom: 50px; 150 margin-bottom: 50px;
150 - } 151 +}
151 - footer .footer-below { 152 +footer .footer-below {
152 padding: 25px 0; 153 padding: 25px 0;
153 background-color: #233140; 154 background-color: #233140;
154 - } 155 +}
155 - /* 내비 */ 156 +/* 내비 */
157 +
158 +
156 159
157 160
158 161
159 162
160 - /* 그라디언트 배경 */ 163 +/* 그라디언트 배경 */
161 * { 164 * {
162 box-sizing: border-box; 165 box-sizing: border-box;
163 margin: 0; 166 margin: 0;
...@@ -178,3 +181,86 @@ body { ...@@ -178,3 +181,86 @@ body {
178 } 181 }
179 /* 그라디언트 배경 */ 182 /* 그라디언트 배경 */
180 183
184 +
185 +
186 +
187 +
188 +/* text fade in */
189 +@import url(/external/raleway);
190 +
191 +.animated{
192 + -webkit-animation-fill-mode:both;
193 + -webkit-animation-duration:2s;
194 + animation-duration:2s;
195 +}
196 +.animated2{
197 + animation-delay:.5s;
198 + -webkit-animation-delay:.5s;
199 + -webkit-animation-fill-mode:both;
200 + -webkit-animation-duration:2s;
201 + animation-duration:2s;
202 +}
203 +@-webkit-keyframes fadeOutUp {
204 + 0% {
205 + opacity: 0;
206 + -webkit-transform: translateY(1);
207 + -webkit-transform: translateY(40px);
208 + } 100% {
209 + opacity: 1;
210 + }
211 +}
212 +
213 +.fadeOutUp {
214 + -webkit-animation-name: fadeOutUp;
215 + animation-name: fadeOutUp;
216 +}
217 +
218 +.fadeIn {
219 + -webkit-animation-name: fadeIn;
220 + animation-name: fadeIn;
221 +}
222 +
223 +@-webkit-keyframes fadeIn {
224 + 0%{
225 + opacity: 0;
226 + -webkit-transform: translateY(1);
227 + -webkit-transform: translateY(40px);
228 + }
229 + 100% {
230 + opacity: 1;
231 + }
232 +}
233 +/* text fade in */
234 +
235 +
236 +
237 +
238 +
239 +
240 +/* 텍스트 */
241 +#p1 {
242 + font-size: 50px;
243 + color: rgb(0, 0, 0);
244 + font-family: Noto Sans KR;
245 + text-align: center;
246 +}
247 +#p2{
248 + font-size: 20px;
249 + color: rgb(0, 0, 0);
250 + font-family: Noto Sans KR;
251 + text-align: center;
252 +}
253 +#p3{
254 + font-size: 15px;
255 + color: rgb(0, 0, 0);
256 + font-family: Noto Sans KR;
257 + text-align: center;
258 +}
259 +#p4{
260 + font-size: 15px;
261 + color: rgb(0, 0, 0);
262 + font-family: Noto Sans KR;
263 + text-align: center;
264 +}
265 +
266 +/* 텍스트 */
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -2,21 +2,35 @@ ...@@ -2,21 +2,35 @@
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="/EMO-SSAGE/EMO-SSAGE.css">
7 - <link rel="icon" type="image/x-icon" href="https://odd-mune.github.io/EMOJI-HUMAN/src/rainbow_1f308.png"> 8 + <script src="/EMO-SSAGE/emossage.js" type="text/javascript"></script>
9 + <link rel="icon" type="image/x-icon" href="/src/rainbow_1f308.png">
8 <style> 10 <style>
9 - body { 11 + /* body {
10 background-image: url("emossage-03.png"); 12 background-image: url("emossage-03.png");
11 background-repeat: no-repeat; 13 background-repeat: no-repeat;
12 background-size: 100%; 14 background-size: 100%;
13 font-family: Noto Sans KR, regular; 15 font-family: Noto Sans KR, regular;
14 text-align: center; 16 text-align: center;
15 } 17 }
16 - h1 {font-size: 50px;} 18 +
17 - p1 {font-size: 24px;} 19 + h1 {
18 - p2 {font-size: 14px} 20 + font-size: 50px;
19 - p2.small {line-height: 0.7;} 21 + }
22 +
23 + p1 {
24 + font-size: 24px;
25 + }
26 +
27 + p2 {
28 + font-size: 14px
29 + }
30 +
31 + p2.small {
32 + line-height: 0.7;
33 + } */
20 </style> 34 </style>
21 <div style="height: 100px; overflow: auto"> 35 <div style="height: 100px; overflow: auto">
22 </div> 36 </div>
...@@ -25,33 +39,64 @@ ...@@ -25,33 +39,64 @@
25 </head> 39 </head>
26 40
27 <body> 41 <body>
42 +
43 + <!-- 내비게이션 -->
44 + <link rel="stylesheet" href="/external/bootstrap.min.css"><!--bootstrap-->
45 + <!--css link-->
46 + <link rel="stylesheet" href="/external/font-awesome.min.css"><!--for icons-->
47 + <script src="/external/ajax/jquery.min.js"></script><!--jquery script-->
48 + <script src="/external/bootstrap/bootstrap.min.js"></script><!--bootstrap script-->
49 +
50 + <body id="page-top">
51 + <!--creating a navigation bar-->
52 + <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-->
53 + <div class="container"><!--gives padding of 16px on LHS and RHS-->
54 + <div class="navbar-header page-scroll"><!--navigation bar header having proprty to scroll -->
55 + <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
56 + <span></span> Menu <i class="fa fa-bars"></i>
57 + </button>
58 + </div><!--end of button-->
59 + <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><!--to collapse-->
60 + <ul class="nav navbar-nav">
61 + <li><a href="/index.html">Home</a></li>
62 + </ul>
63 + <ul class="nav navbar-nav navbar-right page-scroll"><!--second UL to go to right having proprty to scroll page-->
64 + <li> <a href="/About Us/About Us.html">About Us</a></li>
65 + <li><a href="/EMOJI-HUMAN/EMOJI-HUMAN.html">EMOJI-HUMAN</a></li>
66 + <li><a href="/EMO-TI/EMO-TI.html">EMO-TI</a></li>
67 + <li><a href="/EMO-SSAGE/EMO-SSAGE.html">EMO-SSAGE</a></li>
68 + </ul>
69 + </div><!--end of collapse-->
70 + </div>
71 + </nav>
72 + <!-- 내비게이션 -->
73 +
74 +
75 +
76 +
28 <form action="#"> 77 <form action="#">
29 78
30 - <header> 79 + <!-- <header>
31 <h1>Message + EMOJI<span>= Emossage</span></h1> 80 <h1>Message + EMOJI<span>= Emossage</span></h1>
32 <p1>Emoti는 이모지 중심 메세지입니다</p1> 81 <p1>Emoti는 이모지 중심 메세지입니다</p1>
33 <br> 82 <br>
34 <p2> 83 <p2>
35 <p class="small"> 글자 중 일부가 이모지로 변환됩니다.<br> 84 <p class="small"> 글자 중 일부가 이모지로 변환됩니다.<br>
36 - 여러분만의 이모지 편지를 적어보세요<br> </p2> 85 + 여러분만의 이모지 편지를 적어보세요<br>
86 + </p2>
37 </p> 87 </p>
38 - </header> 88 + </header> -->
39 89
40 - <div> 90 + <p id="p1" class="animated fadeOutUp">Message + EMOJI<span>= Emossage</p>
41 - <label class="desc" id="title1" for="Field1">Full Name</label> 91 + <br>
42 - <div> 92 + <p id="p2" class="animated fadeOutUp">Emoti는 이모지 중심 메세지입니다</p>
43 - <input id="Field1" name="Field1" type="text" class="field text fn" value="" size="8" tabindex="1"> 93 +
44 - </div> 94 + <br>
45 - </div> 95 + <br>
96 + <br>
97 + <p id="p3" class="animated2 fadeIn">글자 중 일부가 이모지로 변환됩니다.</p>
98 + <p id="p4" class="animated2 fadeIn">여러분만의 이모지 편지를 적어보세요</p>
46 99
47 - <div>
48 - <label class="desc" id="title3" for="Field3">
49 - Email
50 - </label>
51 - <div>
52 - <input id="Field3" name="Field3" type="email" spellcheck="false" value="" maxlength="255" tabindex="3">
53 - </div>
54 - </div>
55 100
56 <div> 101 <div>
57 <label class="desc" id="title4" for="Field4"> 102 <label class="desc" id="title4" for="Field4">
...@@ -59,16 +104,23 @@ ...@@ -59,16 +104,23 @@
59 </label> 104 </label>
60 105
61 <div> 106 <div>
62 - <textarea id="Field4" name="Field4" spellcheck="true" rows="10" cols="50" tabindex="4"></textarea> 107 + <textarea style="resize: none;" id="Field4" name="Field4" placeholder="이모지로 변환할 문장을 입력해보세요!" spellcheck="true" rows="10" cols="50" tabindex="4"></textarea>
63 </div> 108 </div>
64 109
65 <div> 110 <div>
66 - <input id="saveForm" name="saveForm" type="submit" value="Submit"> 111 + <button type="button" onclick="convertToEmoji()">Submit</button>
67 </div> 112 </div>
68 </div> 113 </div>
69 114
70 - </form> 115 + <div>
71 - 116 + <label class="desc" id="title5" for="Field5">
117 + Result
118 + </label>
72 119
120 + <div>
121 + <textarea style="resize: none;" id="Field5" name="Field5" readonly spellcheck="true" rows="10" cols="50" tabindex="4"></textarea>
122 + </div>
123 + </div>
73 124
125 + </form>
74 </body> 126 </body>
...\ No newline at end of file ...\ No newline at end of file
......
This diff is collapsed. Click to expand it.
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
7 7
8 .swiper-container { 8 .swiper-container {
9 width: 100%; 9 width: 100%;
10 - height: 70%; 10 + height: auto;
11 } 11 }
12 12
13 .swiper-slide { 13 .swiper-slide {
...@@ -427,3 +427,87 @@ body { ...@@ -427,3 +427,87 @@ body {
427 background-repeat: no-repeat; 427 background-repeat: no-repeat;
428 } 428 }
429 /* 그라디언트 배경 */ 429 /* 그라디언트 배경 */
430 +
431 +
432 +
433 +
434 +
435 +/* text fade in */
436 +@import url(/external/raleway);
437 +
438 +.animated{
439 + -webkit-animation-fill-mode:both;
440 + -webkit-animation-duration:2s;
441 + animation-duration:2s;
442 +}
443 +.animated2{
444 + animation-delay:.5s;
445 + -webkit-animation-delay:.5s;
446 + -webkit-animation-fill-mode:both;
447 + -webkit-animation-duration:2s;
448 + animation-duration:2s;
449 +}
450 +@-webkit-keyframes fadeOutUp {
451 + 0% {
452 + opacity: 0;
453 + -webkit-transform: translateY(1);
454 + -webkit-transform: translateY(40px);
455 + } 100% {
456 + opacity: 1;
457 + }
458 +}
459 +
460 +.fadeOutUp {
461 + -webkit-animation-name: fadeOutUp;
462 + animation-name: fadeOutUp;
463 +}
464 +
465 +.fadeIn {
466 + -webkit-animation-name: fadeIn;
467 + animation-name: fadeIn;
468 +}
469 +
470 +@-webkit-keyframes fadeIn {
471 + 0%{
472 + opacity: 0;
473 + -webkit-transform: translateY(1);
474 + -webkit-transform: translateY(40px);
475 + }
476 + 100% {
477 + opacity: 1;
478 + }
479 +}
480 +/* text fade in */
481 +
482 +
483 +
484 +
485 +
486 +
487 +/* 텍스트 */
488 +#p1 {
489 + font-size: 50px;
490 + color: rgb(0, 0, 0);
491 + font-family: Noto Sans KR;
492 + text-align: center;
493 +}
494 +#p2{
495 + font-size: 20px;
496 + color: rgb(0, 0, 0);
497 + font-family: Noto Sans KR;
498 + text-align: center;
499 +}
500 +#p3{
501 + font-size: 15px;
502 + color: rgb(0, 0, 0);
503 + font-family: Noto Sans KR;
504 + text-align: center;
505 +}
506 +#p4{
507 + font-size: 15px;
508 + color: rgb(0, 0, 0);
509 + font-family: Noto Sans KR;
510 + text-align: center;
511 +}
512 +
513 +/* 텍스트 */
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -16,11 +16,11 @@ ...@@ -16,11 +16,11 @@
16 <body> 16 <body>
17 17
18 <!-- 내비게이션 --> 18 <!-- 내비게이션 -->
19 - <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><!--bootstrap--> 19 + <link rel="stylesheet" href="/external/bootstrap.min.css"><!--bootstrap-->
20 <!--css link--> 20 <!--css link-->
21 - <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><!--for icons--> 21 + <link rel="stylesheet" href="/external/font-awesome.min.css"><!--for icons-->
22 - <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><!--jquery script--> 22 + <script src="/external/ajax/jquery.min.js"></script><!--jquery script-->
23 - <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><!--bootstrap script--> 23 + <script src="/external/bootstrap/bootstrap.min.js"></script><!--bootstrap script-->
24 24
25 <body id="page-top"> 25 <body id="page-top">
26 <!--creating a navigation bar--> 26 <!--creating a navigation bar-->
...@@ -46,6 +46,7 @@ ...@@ -46,6 +46,7 @@
46 </nav> 46 </nav>
47 <!-- 내비게이션 --> 47 <!-- 내비게이션 -->
48 48
49 +
49 <br> 50 <br>
50 <br> 51 <br>
51 <br> 52 <br>
...@@ -53,22 +54,19 @@ ...@@ -53,22 +54,19 @@
53 <br> 54 <br>
54 <br> 55 <br>
55 <br> 56 <br>
57 + <p id="p1" class="animated fadeOutUp">MBTI+EMOJI=EMOTI</p>
56 <br> 58 <br>
59 + <p id="p2" class="animated fadeOutUp">MBTI가 이모지라면? 그건 바로 EMOTI!</p>
60 +
57 <br> 61 <br>
58 <br> 62 <br>
59 <br> 63 <br>
64 + <p id="p3" class="animated2 fadeIn">당신의 MBTI가 이모지로 어떻게 바뀌었을지</p>
65 + <p id="p4" class="animated2 fadeIn">아래의 카드에서 한 번 찾아보세요!</p>
60 <br> 66 <br>
61 <br> 67 <br>
62 <br> 68 <br>
63 - <br> 69 +
64 - <br>
65 - <br>
66 - <br>
67 - <br>
68 - <br>
69 - <br>
70 - <br>
71 - <br>
72 <br> 70 <br>
73 71
74 <div class="swiper-container"> 72 <div class="swiper-container">
......
...@@ -18,6 +18,7 @@ const audios = [ ...@@ -18,6 +18,7 @@ const audios = [
18 document.getElementById("enfj_audio"), 18 document.getElementById("enfj_audio"),
19 ]; 19 ];
20 const numMbtis = 16; 20 const numMbtis = 16;
21 +const slidesPerView = 5;
21 22
22 /* ======== 23 /* ========
23 Debugger plugin, simple demo plugin to console.log some of callbacks 24 Debugger plugin, simple demo plugin to console.log some of callbacks
...@@ -48,9 +49,9 @@ function myPlugin({ swiper, extendParams, on }) { ...@@ -48,9 +49,9 @@ function myPlugin({ swiper, extendParams, on }) {
48 console.log('sliderMove'); 49 console.log('sliderMove');
49 }); 50 });
50 on('slideChange', () => { 51 on('slideChange', () => {
51 - audios[(swiper.previousIndex + numMbtis - 5) % numMbtis].pause(); 52 + audios[(swiper.previousIndex + numMbtis - slidesPerView) % numMbtis].pause();
52 - audios[(swiper.previousIndex + numMbtis - 5) % numMbtis].currentTime = 0; 53 + audios[(swiper.previousIndex + numMbtis - slidesPerView) % numMbtis].currentTime = 0;
53 - audios[(swiper.activeIndex + numMbtis - 5) % numMbtis].play(); 54 + audios[(swiper.activeIndex + numMbtis - slidesPerView) % numMbtis].play();
54 if (!swiper.params.debugger) return; 55 if (!swiper.params.debugger) return;
55 console.log('slideChange', swiper.previousIndex, '->', swiper.activeIndex); 56 console.log('slideChange', swiper.previousIndex, '->', swiper.activeIndex);
56 }); 57 });
...@@ -92,7 +93,7 @@ Swiper.use([myPlugin]); ...@@ -92,7 +93,7 @@ Swiper.use([myPlugin]);
92 let swiper = new Swiper('.swiper-container', { 93 let swiper = new Swiper('.swiper-container', {
93 loop: true, 94 loop: true,
94 centeredSlides: true, 95 centeredSlides: true,
95 - slidesPerView: '5', 96 + slidesPerView: slidesPerView,
96 navigation: { 97 navigation: {
97 nextEl: '.swiper-button-next', 98 nextEl: '.swiper-button-next',
98 prevEl: '.swiper-button-prev', 99 prevEl: '.swiper-button-prev',
......
...@@ -14,12 +14,12 @@ p ...@@ -14,12 +14,12 @@ p
14 a, 14 a,
15 a:hover, 15 a:hover,
16 a:focus, 16 a:focus,
17 -a:active,{ 17 +a:active {
18 color: #99CED4;/*hover-highlight over,active-highlisht when clicked,focus-highlight when under use*/ 18 color: #99CED4;/*hover-highlight over,active-highlisht when clicked,focus-highlight when under use*/
19 outline: none; /*gives outline to an element*/ 19 outline: none; /*gives outline to an element*/
20 } 20 }
21 h2, 21 h2,
22 -h3, 22 +h3
23 { 23 {
24 font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif; 24 font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
25 text-transform: uppercase; 25 text-transform: uppercase;
...@@ -153,3 +153,323 @@ footer .footer-below { ...@@ -153,3 +153,323 @@ footer .footer-below {
153 } 153 }
154 /* 내비 */ 154 /* 내비 */
155 155
156 +
157 +
158 +
159 +/* 배경 스크롤 */
160 +@import url(https://fonts.googleapis.com/css?family=Josefin+Sans:300,400);
161 +* {
162 + margin: 0;
163 + padding: 0;
164 +}
165 +html, body {
166 + height: 100%;
167 +}
168 +section {
169 + position: relative;
170 + width: 100%;
171 + height: 50%;
172 +}
173 +section::after {
174 + position: absolute;
175 + bottom: 0;
176 + left: 0;
177 + content: '';
178 + width: 100%;
179 + height: 80%;
180 + /* 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%); */
182 +}
183 +
184 +
185 +
186 +
187 +/* 글자 */
188 +#p1 {
189 + top: 38%;
190 + left: 50%;
191 + z-index: 2;
192 + font-size: 50px;
193 + color: rgb(0, 0, 0);
194 + font-family: Noto Sans KR;
195 + text-align: center;
196 + line-height: 50px;
197 +}
198 +#p2{
199 + top: 48%;
200 + left: 50%;
201 + z-index: 2;
202 + font-size: 20px;
203 + color: rgb(0, 0, 0);
204 + font-family: Noto Sans KR;
205 + text-align: center;
206 +}
207 +#p3{
208 + top: 54%;
209 + left: 50%;
210 + z-index: 2;
211 + font-size: 15px;
212 + color: rgb(0, 0, 0);
213 + font-family: Noto Sans KR;
214 + text-align: center;
215 + line-height: 23px;
216 +}
217 +#p4{
218 + top: 54%;
219 + left: 50%;
220 + z-index: 2;
221 + font-size: 15px;
222 + color: rgb(0, 0, 0);
223 + font-family: Noto Sans KR;
224 + text-align: center;
225 + line-height: 15px;
226 +}
227 +/*
228 +section h1 {
229 + position: absolute;
230 + top: 38%;
231 + left: 50%;
232 + z-index: 2;
233 + -webkit-transform: translate(-50%, -50%);
234 + transform: translate(-50%, -50%);
235 + color: rgb(0, 0, 0);
236 + font : 500px;
237 + font-family: Noto Sans KR;
238 + text-align: center;
239 + white-space: nowrap;
240 +}
241 +section h2 {
242 + position: absolute;
243 + top: 48%;
244 + left: 50%;
245 + z-index: 2;
246 + -webkit-transform: translate(-50%, -50%);
247 + transform: translate(-50%, -50%);
248 + color: #fff;
249 + font : normal 300 23px/1 'Josefin Sans', sans-serif;
250 + text-align: center;
251 + white-space: nowrap;
252 +}
253 +section h3 {
254 + position: absolute;
255 + top: 54%;
256 + left: 50%;
257 + z-index: 2;
258 + -webkit-transform: translate(-50%, -50%);
259 + transform: translate(-50%, -50%);
260 + color: #fff;
261 + font : normal 300 13px/1 'Josefin Sans', sans-serif;
262 + text-align: center;
263 + white-space: nowrap;
264 + line-height: 16px;
265 +} */
266 +
267 +/* 스크롤 글자 */
268 +.demo a {
269 + position: absolute;
270 + bottom: 20px;
271 + left: 50%;
272 + z-index: 2;
273 + display: inline-block;
274 + -webkit-transform: translate(0, -50%);
275 + transform: translate(0, -50%);
276 + color: rgb(255, 255, 255);
277 + font : normal 400 15px/1 'Josefin Sans', sans-serif;
278 + letter-spacing: .1em;
279 + text-decoration: none;
280 + /* transition: opacity .3s; */
281 +}
282 +.demo a:hover {
283 + opacity: .5;
284 +}
285 +
286 +
287 +
288 +#section01 a {
289 + padding-top: 40px;
290 +}
291 +#section01 a span {
292 + position: absolute;
293 + top: 0;
294 + /* left: 50%; */
295 + width: 24px;
296 + height: 24px;
297 + /* margin-left: -12px; */
298 + border-left: 1px solid #fff;
299 + border-bottom: 1px solid #fff;
300 + -webkit-transform: rotate(-45deg);
301 + transform: rotate(-45deg);
302 + box-sizing: border-box;
303 +}
304 +
305 +
306 +
307 +
308 +
309 +
310 +/* 메세지 버블 */
311 +/* body {
312 + font-family: "Helvetica Neue";
313 + font-size: 20px;
314 + font-weight: normal;
315 +} */
316 +/*
317 +section {
318 + max-width: 450px;
319 + margin: 50px auto;
320 +} */
321 +section div {
322 + max-width: 255px;
323 + word-wrap: break-word;
324 + margin-bottom: 20px;
325 + line-height: 24px;
326 +}
327 +
328 +.clear {
329 + clear: both;
330 +}
331 +
332 +.from-me {
333 + position: relative;
334 + padding: 10px 20px;
335 + color: white;
336 + background: #0B93F6;
337 + border-radius: 25px;
338 + float: right;
339 + right: 400px;
340 +}
341 +.from-me:before {
342 + content: "";
343 + position: absolute;
344 + z-index: -1;
345 + bottom: -2px;
346 + right: -7px;
347 + height: 20px;
348 + border-right: 20px solid #0B93F6;
349 + border-bottom-left-radius: 16px 14px;
350 + -webkit-transform: translate(0, -2px);
351 +}
352 +.from-me:after {
353 + content: "";
354 + position: absolute;
355 + z-index: 1;
356 + bottom: -2px;
357 + right: -56px;
358 + width: 26px;
359 + height: 20px;
360 + background: white;
361 + border-bottom-left-radius: 10px;
362 + -webkit-transform: translate(-30px, -2px);
363 +}
364 +
365 +.from-them {
366 + position: relative;
367 + padding: 10px 20px;
368 + background: #E5E5EA;
369 + border-radius: 25px;
370 + color: black;
371 + float: left;
372 + left: 400px;
373 +}
374 +.from-them:before {
375 + content: "";
376 + position: absolute;
377 + z-index: 2;
378 + bottom: -2px;
379 + left: -7px;
380 + height: 20px;
381 + border-left: 20px solid #E5E5EA;
382 + border-bottom-right-radius: 16px 14px;
383 + -webkit-transform: translate(0, -2px);
384 +}
385 +.from-them:after {
386 + content: "";
387 + position: absolute;
388 + z-index: 3;
389 + bottom: -2px;
390 + left: 4px;
391 + width: 26px;
392 + height: 20px;
393 + background: white;
394 + border-bottom-right-radius: 10px;
395 + -webkit-transform: translate(-30px, -2px);
396 +}
397 +/* 메세지 버블 */
398 +
399 +
400 +
401 +
402 +/* text fade in */
403 +@import url(/external/raleway);
404 +
405 +.animated{
406 + -webkit-animation-fill-mode:both;
407 + -webkit-animation-duration:2s;
408 + animation-duration:2s;
409 +}
410 +.animated2{
411 + animation-delay:.5s;
412 + -webkit-animation-delay:.5s;
413 + -webkit-animation-fill-mode:both;
414 + -webkit-animation-duration:2s;
415 + animation-duration:2s;
416 +}
417 +@-webkit-keyframes fadeOutUp {
418 + 0% {
419 + opacity: 0;
420 + -webkit-transform: translateY(1);
421 + -webkit-transform: translateY(40px);
422 + } 100% {
423 + opacity: 1;
424 + }
425 +}
426 +
427 +.fadeOutUp {
428 + -webkit-animation-name: fadeOutUp;
429 + animation-name: fadeOutUp;
430 +}
431 +
432 +.fadeIn {
433 + -webkit-animation-name: fadeIn;
434 + animation-name: fadeIn;
435 +}
436 +
437 +@-webkit-keyframes fadeIn {
438 + 0%{
439 + opacity: 0;
440 + -webkit-transform: translateY(1);
441 + -webkit-transform: translateY(40px);
442 + }
443 + 100% {
444 + opacity: 1;
445 + }
446 +}
447 +/* text fade in */
448 +
449 +
450 +
451 +
452 +/* 그라디언트 배경 */
453 + * {
454 + box-sizing: border-box;
455 + margin: 0;
456 + padding: 0;
457 + }
458 +
459 + body {
460 + width: 100vw;
461 + height: 200vh;
462 + padding: 1rem;
463 + font-family: Avenir, sans-serif;
464 + font-size: 112.5%;
465 + color: #124;
466 + 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);
467 + background-position: -30vw -30rem, 50% -20rem, 60vw -15rem, -10vw calc(-35rem + 20vw), 30vw calc(-40rem + 20vw);
468 + background-size: 80vw 80vw;
469 + background-repeat: no-repeat;
470 + }
471 +/* 그라디언트 배경 */
472 +
473 +div p {
474 + margin: 0 0 0px;
475 +}
...\ No newline at end of file ...\ No newline at end of file
......
This diff is collapsed. Click to expand it.
1 +// 배경 스크롤 스크립트
2 +$(function() {
3 + $('a[href*=#]').on('click', function(e) {
4 + e.preventDefault();
5 + $('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top}, 500, 'linear');
6 + });
7 + });
8 +// 배경 스크롤 스크립트
...\ No newline at end of file ...\ No newline at end of file
......
This diff is collapsed. Click to expand it.
1 +button,hr,input{overflow:visible}audio,canvas,progress,video{display:inline-block}progress,sub,sup{vertical-align:baseline}html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0} menu,article,aside,details,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{}button,select{text-transform:none}[type=submit], [type=reset],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}/*# sourceMappingURL=normalize.min.css.map */
...\ No newline at end of file ...\ No newline at end of file
1 +!function(t,i,e){"use strict";function s(t,i){this.element=t,this.layers=t.getElementsByClassName("layer");var e={calibrateX:this.data(this.element,"calibrate-x"),calibrateY:this.data(this.element,"calibrate-y"),invertX:this.data(this.element,"invert-x"),invertY:this.data(this.element,"invert-y"),limitX:this.data(this.element,"limit-x"),limitY:this.data(this.element,"limit-y"),scalarX:this.data(this.element,"scalar-x"),scalarY:this.data(this.element,"scalar-y"),frictionX:this.data(this.element,"friction-x"),frictionY:this.data(this.element,"friction-y"),originX:this.data(this.element,"origin-x"),originY:this.data(this.element,"origin-y")};for(var s in e)null===e[s]&&delete e[s];this.extend(this,r,i,e),this.calibrationTimer=null,this.calibrationFlag=!0,this.enabled=!1,this.depths=[],this.raf=null,this.bounds=null,this.ex=0,this.ey=0,this.ew=0,this.eh=0,this.ecx=0,this.ecy=0,this.erx=0,this.ery=0,this.cx=0,this.cy=0,this.ix=0,this.iy=0,this.mx=0,this.my=0,this.vx=0,this.vy=0,this.onMouseMove=this.onMouseMove.bind(this),this.onDeviceOrientation=this.onDeviceOrientation.bind(this),this.onOrientationTimer=this.onOrientationTimer.bind(this),this.onCalibrationTimer=this.onCalibrationTimer.bind(this),this.onAnimationFrame=this.onAnimationFrame.bind(this),this.onWindowResize=this.onWindowResize.bind(this),this.initialise()}var n="Parallax",o=30,r={relativeInput:!1,clipRelativeInput:!1,calibrationThreshold:100,calibrationDelay:500,supportDelay:500,calibrateX:!1,calibrateY:!0,invertX:!0,invertY:!0,limitX:!1,limitY:!1,scalarX:10,scalarY:10,frictionX:.1,frictionY:.1,originX:.5,originY:.5};s.prototype.extend=function(){if(arguments.length>1)for(var t=arguments[0],i=1,e=arguments.length;e>i;i++){var s=arguments[i];for(var n in s)t[n]=s[n]}},s.prototype.data=function(t,i){return this.deserialize(t.getAttribute("data-"+i))},s.prototype.deserialize=function(t){return"true"===t?!0:"false"===t?!1:"null"===t?null:!isNaN(parseFloat(t))&&isFinite(t)?parseFloat(t):t},s.prototype.camelCase=function(t){return t.replace(/-+(.)?/g,function(t,i){return i?i.toUpperCase():""})},s.prototype.transformSupport=function(s){for(var n=i.createElement("div"),o=!1,r=null,a=!1,h=null,l=null,p=0,c=this.vendors.length;c>p;p++)if(null!==this.vendors[p]?(h=this.vendors[p][0]+"transform",l=this.vendors[p][1]+"Transform"):(h="transform",l="transform"),n.style[l]!==e){o=!0;break}switch(s){case"2D":a=o;break;case"3D":if(o){var m=i.body||i.createElement("body"),u=i.documentElement,y=u.style.overflow;i.body||(u.style.overflow="hidden",u.appendChild(m),m.style.overflow="hidden",m.style.background=""),m.appendChild(n),n.style[l]="translate3d(1px,1px,1px)",r=t.getComputedStyle(n).getPropertyValue(h),a=r!==e&&r.length>0&&"none"!==r,u.style.overflow=y,m.removeChild(n)}}return a},s.prototype.ww=null,s.prototype.wh=null,s.prototype.wcx=null,s.prototype.wcy=null,s.prototype.wrx=null,s.prototype.wry=null,s.prototype.portrait=null,s.prototype.desktop=!navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|BB10|mobi|tablet|opera mini|nexus 7)/i),s.prototype.vendors=[null,["-webkit-","webkit"],["-moz-","Moz"],["-o-","O"],["-ms-","ms"]],s.prototype.motionSupport=!!t.DeviceMotionEvent,s.prototype.orientationSupport=!!t.DeviceOrientationEvent,s.prototype.orientationStatus=0,s.prototype.transform2DSupport=s.prototype.transformSupport("2D"),s.prototype.transform3DSupport=s.prototype.transformSupport("3D"),s.prototype.propertyCache={},s.prototype.initialise=function(){this.transform3DSupport&&this.accelerate(this.element);var i=t.getComputedStyle(this.element);"static"===i.getPropertyValue("position")&&(this.element.style.position="relative"),this.updateLayers(),this.updateDimensions(),this.enable(),this.queueCalibration(this.calibrationDelay)},s.prototype.updateLayers=function(){this.layers=this.element.getElementsByClassName("layer"),this.depths=[];for(var t=0,i=this.layers.length;i>t;t++){var e=this.layers[t];this.transform3DSupport&&this.accelerate(e),e.style.position=t?"absolute":"relative",e.style.display="block",e.style.left=0,e.style.top=0,this.depths.push(this.data(e,"depth")||0)}},s.prototype.updateDimensions=function(){this.ww=t.innerWidth,this.wh=t.innerHeight,this.wcx=this.ww*this.originX,this.wcy=this.wh*this.originY,this.wrx=Math.max(this.wcx,this.ww-this.wcx),this.wry=Math.max(this.wcy,this.wh-this.wcy)},s.prototype.updateBounds=function(){this.bounds=this.element.getBoundingClientRect(),this.ex=this.bounds.left,this.ey=this.bounds.top,this.ew=this.bounds.width,this.eh=this.bounds.height,this.ecx=this.ew*this.originX,this.ecy=this.eh*this.originY,this.erx=Math.max(this.ecx,this.ew-this.ecx),this.ery=Math.max(this.ecy,this.eh-this.ecy)},s.prototype.queueCalibration=function(t){clearTimeout(this.calibrationTimer),this.calibrationTimer=setTimeout(this.onCalibrationTimer,t)},s.prototype.enable=function(){this.enabled||(this.enabled=!0,this.orientationSupport?(this.portrait=null,t.addEventListener("deviceorientation",this.onDeviceOrientation),setTimeout(this.onOrientationTimer,this.supportDelay)):(this.cx=0,this.cy=0,this.portrait=!1,t.addEventListener("mousemove",this.onMouseMove)),t.addEventListener("resize",this.onWindowResize),this.raf=requestAnimationFrame(this.onAnimationFrame))},s.prototype.disable=function(){this.enabled&&(this.enabled=!1,this.orientationSupport?t.removeEventListener("deviceorientation",this.onDeviceOrientation):t.removeEventListener("mousemove",this.onMouseMove),t.removeEventListener("resize",this.onWindowResize),cancelAnimationFrame(this.raf))},s.prototype.calibrate=function(t,i){this.calibrateX=t===e?this.calibrateX:t,this.calibrateY=i===e?this.calibrateY:i},s.prototype.invert=function(t,i){this.invertX=t===e?this.invertX:t,this.invertY=i===e?this.invertY:i},s.prototype.friction=function(t,i){this.frictionX=t===e?this.frictionX:t,this.frictionY=i===e?this.frictionY:i},s.prototype.scalar=function(t,i){this.scalarX=t===e?this.scalarX:t,this.scalarY=i===e?this.scalarY:i},s.prototype.limit=function(t,i){this.limitX=t===e?this.limitX:t,this.limitY=i===e?this.limitY:i},s.prototype.origin=function(t,i){this.originX=t===e?this.originX:t,this.originY=i===e?this.originY:i},s.prototype.clamp=function(t,i,e){return t=Math.max(t,i),t=Math.min(t,e)},s.prototype.css=function(t,i,s){var n=this.propertyCache[i];if(!n)for(var o=0,r=this.vendors.length;r>o;o++)if(n=null!==this.vendors[o]?this.camelCase(this.vendors[o][1]+"-"+i):i,t.style[n]!==e){this.propertyCache[i]=n;break}t.style[n]=s},s.prototype.accelerate=function(t){this.css(t,"transform","translate3d(0,0,0)"),this.css(t,"transform-style","preserve-3d"),this.css(t,"backface-visibility","hidden")},s.prototype.setPosition=function(t,i,e){i+="px",e+="px",this.transform3DSupport?this.css(t,"transform","translate3d("+i+","+e+",0)"):this.transform2DSupport?this.css(t,"transform","translate("+i+","+e+")"):(t.style.left=i,t.style.top=e)},s.prototype.onOrientationTimer=function(){this.orientationSupport&&0===this.orientationStatus&&(this.disable(),this.orientationSupport=!1,this.enable())},s.prototype.onCalibrationTimer=function(){this.calibrationFlag=!0},s.prototype.onWindowResize=function(){this.updateDimensions()},s.prototype.onAnimationFrame=function(){this.updateBounds();var t=this.ix-this.cx,i=this.iy-this.cy;(Math.abs(t)>this.calibrationThreshold||Math.abs(i)>this.calibrationThreshold)&&this.queueCalibration(0),this.portrait?(this.mx=this.calibrateX?i:this.iy,this.my=this.calibrateY?t:this.ix):(this.mx=this.calibrateX?t:this.ix,this.my=this.calibrateY?i:this.iy),this.mx*=this.ew*(this.scalarX/100),this.my*=this.eh*(this.scalarY/100),isNaN(parseFloat(this.limitX))||(this.mx=this.clamp(this.mx,-this.limitX,this.limitX)),isNaN(parseFloat(this.limitY))||(this.my=this.clamp(this.my,-this.limitY,this.limitY)),this.vx+=(this.mx-this.vx)*this.frictionX,this.vy+=(this.my-this.vy)*this.frictionY;for(var e=0,s=this.layers.length;s>e;e++){var n=this.layers[e],o=this.depths[e],r=this.vx*o*(this.invertX?-1:1),a=this.vy*o*(this.invertY?-1:1);this.setPosition(n,r,a)}this.raf=requestAnimationFrame(this.onAnimationFrame)},s.prototype.onDeviceOrientation=function(t){if(!this.desktop&&null!==t.beta&&null!==t.gamma){this.orientationStatus=1;var i=(t.beta||0)/o,e=(t.gamma||0)/o,s=this.wh>this.ww;this.portrait!==s&&(this.portrait=s,this.calibrationFlag=!0),this.calibrationFlag&&(this.calibrationFlag=!1,this.cx=i,this.cy=e),this.ix=i,this.iy=e}},s.prototype.onMouseMove=function(t){var i=t.clientX,e=t.clientY;!this.orientationSupport&&this.relativeInput?(this.clipRelativeInput&&(i=Math.max(i,this.ex),i=Math.min(i,this.ex+this.ew),e=Math.max(e,this.ey),e=Math.min(e,this.ey+this.eh)),this.ix=(i-this.ex-this.ecx)/this.erx,this.iy=(e-this.ey-this.ecy)/this.ery):(this.ix=(i-this.wcx)/this.wrx,this.iy=(e-this.wcy)/this.wry)},t[n]=s}(window,document),function(){for(var t=0,i=["ms","moz","webkit","o"],e=0;e<i.length&&!window.requestAnimationFrame;++e)window.requestAnimationFrame=window[i[e]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[i[e]+"CancelAnimationFrame"]||window[i[e]+"CancelRequestAnimationFrame"];window.requestAnimationFrame||(window.requestAnimationFrame=function(i){var e=(new Date).getTime(),s=Math.max(0,16-(e-t)),n=window.setTimeout(function(){i(e+s)},s);return t=e+s,n}),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(t){clearTimeout(t)})}();
...\ No newline at end of file ...\ No newline at end of file
This diff could not be displayed because it is too large.
This diff is collapsed. Click to expand it.
1 +/* greek-ext */
2 +@font-face {
3 + font-family: 'Cardo';
4 + font-style: italic;
5 + font-weight: 400;
6 + font-display: swap;
7 + src: url(https://fonts.gstatic.com/s/cardo/v19/wlpxgwjKBV1pqhv97I8x3F5O.woff2) format('woff2');
8 + unicode-range: U+1F00-1FFF;
9 +}
10 +/* greek */
11 +@font-face {
12 + font-family: 'Cardo';
13 + font-style: italic;
14 + font-weight: 400;
15 + font-display: swap;
16 + src: url(https://fonts.gstatic.com/s/cardo/v19/wlpxgwjKBV1pqhv97IAx3F5O.woff2) format('woff2');
17 + unicode-range: U+0370-03FF;
18 +}
19 +/* latin-ext */
20 +@font-face {
21 + font-family: 'Cardo';
22 + font-style: italic;
23 + font-weight: 400;
24 + font-display: swap;
25 + src: url(https://fonts.gstatic.com/s/cardo/v19/wlpxgwjKBV1pqhv97I0x3F5O.woff2) format('woff2');
26 + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
27 +}
28 +/* latin */
29 +@font-face {
30 + font-family: 'Cardo';
31 + font-style: italic;
32 + font-weight: 400;
33 + font-display: swap;
34 + src: url(https://fonts.gstatic.com/s/cardo/v19/wlpxgwjKBV1pqhv97IMx3A.woff2) format('woff2');
35 + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
36 +}
37 +/* cyrillic-ext */
38 +@font-face {
39 + font-family: 'Rubik';
40 + font-style: normal;
41 + font-weight: 400;
42 + font-display: swap;
43 + src: url(https://fonts.gstatic.com/s/rubik/v23/iJWKBXyIfDnIV7nMrXyi0A.woff2) format('woff2');
44 + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
45 +}
46 +/* cyrillic */
47 +@font-face {
48 + font-family: 'Rubik';
49 + font-style: normal;
50 + font-weight: 400;
51 + font-display: swap;
52 + src: url(https://fonts.gstatic.com/s/rubik/v23/iJWKBXyIfDnIV7nFrXyi0A.woff2) format('woff2');
53 + unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
54 +}
55 +/* hebrew */
56 +@font-face {
57 + font-family: 'Rubik';
58 + font-style: normal;
59 + font-weight: 400;
60 + font-display: swap;
61 + src: url(https://fonts.gstatic.com/s/rubik/v23/iJWKBXyIfDnIV7nDrXyi0A.woff2) format('woff2');
62 + unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
63 +}
64 +/* latin-ext */
65 +@font-face {
66 + font-family: 'Rubik';
67 + font-style: normal;
68 + font-weight: 400;
69 + font-display: swap;
70 + src: url(https://fonts.gstatic.com/s/rubik/v23/iJWKBXyIfDnIV7nPrXyi0A.woff2) format('woff2');
71 + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
72 +}
73 +/* latin */
74 +@font-face {
75 + font-family: 'Rubik';
76 + font-style: normal;
77 + font-weight: 400;
78 + font-display: swap;
79 + src: url(https://fonts.gstatic.com/s/rubik/v23/iJWKBXyIfDnIV7nBrXw.woff2) format('woff2');
80 + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
81 +}
82 +/* cyrillic-ext */
83 +@font-face {
84 + font-family: 'Rubik';
85 + font-style: normal;
86 + font-weight: 700;
87 + font-display: swap;
88 + src: url(https://fonts.gstatic.com/s/rubik/v23/iJWKBXyIfDnIV7nMrXyi0A.woff2) format('woff2');
89 + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
90 +}
91 +/* cyrillic */
92 +@font-face {
93 + font-family: 'Rubik';
94 + font-style: normal;
95 + font-weight: 700;
96 + font-display: swap;
97 + src: url(https://fonts.gstatic.com/s/rubik/v23/iJWKBXyIfDnIV7nFrXyi0A.woff2) format('woff2');
98 + unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
99 +}
100 +/* hebrew */
101 +@font-face {
102 + font-family: 'Rubik';
103 + font-style: normal;
104 + font-weight: 700;
105 + font-display: swap;
106 + src: url(https://fonts.gstatic.com/s/rubik/v23/iJWKBXyIfDnIV7nDrXyi0A.woff2) format('woff2');
107 + unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
108 +}
109 +/* latin-ext */
110 +@font-face {
111 + font-family: 'Rubik';
112 + font-style: normal;
113 + font-weight: 700;
114 + font-display: swap;
115 + src: url(https://fonts.gstatic.com/s/rubik/v23/iJWKBXyIfDnIV7nPrXyi0A.woff2) format('woff2');
116 + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
117 +}
118 +/* latin */
119 +@font-face {
120 + font-family: 'Rubik';
121 + font-style: normal;
122 + font-weight: 700;
123 + font-display: swap;
124 + src: url(https://fonts.gstatic.com/s/rubik/v23/iJWKBXyIfDnIV7nBrXw.woff2) format('woff2');
125 + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
126 +}
...\ No newline at end of file ...\ No newline at end of file
This diff is collapsed. Click to expand it.
1 +/* cyrillic-ext */
2 +@font-face {
3 + font-family: 'Oswald';
4 + font-style: normal;
5 + font-weight: 600;
6 + src: url(https://fonts.gstatic.com/s/oswald/v49/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlbHYjedg.woff2) format('woff2');
7 + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
8 +}
9 +/* cyrillic */
10 +@font-face {
11 + font-family: 'Oswald';
12 + font-style: normal;
13 + font-weight: 600;
14 + src: url(https://fonts.gstatic.com/s/oswald/v49/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlSHYjedg.woff2) format('woff2');
15 + unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
16 +}
17 +/* vietnamese */
18 +@font-face {
19 + font-family: 'Oswald';
20 + font-style: normal;
21 + font-weight: 600;
22 + src: url(https://fonts.gstatic.com/s/oswald/v49/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlZHYjedg.woff2) format('woff2');
23 + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
24 +}
25 +/* latin-ext */
26 +@font-face {
27 + font-family: 'Oswald';
28 + font-style: normal;
29 + font-weight: 600;
30 + src: url(https://fonts.gstatic.com/s/oswald/v49/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlYHYjedg.woff2) format('woff2');
31 + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
32 +}
33 +/* latin */
34 +@font-face {
35 + font-family: 'Oswald';
36 + font-style: normal;
37 + font-weight: 600;
38 + src: url(https://fonts.gstatic.com/s/oswald/v49/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlWHYg.woff2) format('woff2');
39 + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
40 +}
41 +/* cyrillic-ext */
42 +@font-face {
43 + font-family: 'Oswald';
44 + font-style: normal;
45 + font-weight: 700;
46 + src: url(https://fonts.gstatic.com/s/oswald/v49/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlbHYjedg.woff2) format('woff2');
47 + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
48 +}
49 +/* cyrillic */
50 +@font-face {
51 + font-family: 'Oswald';
52 + font-style: normal;
53 + font-weight: 700;
54 + src: url(https://fonts.gstatic.com/s/oswald/v49/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlSHYjedg.woff2) format('woff2');
55 + unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
56 +}
57 +/* vietnamese */
58 +@font-face {
59 + font-family: 'Oswald';
60 + font-style: normal;
61 + font-weight: 700;
62 + src: url(https://fonts.gstatic.com/s/oswald/v49/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlZHYjedg.woff2) format('woff2');
63 + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
64 +}
65 +/* latin-ext */
66 +@font-face {
67 + font-family: 'Oswald';
68 + font-style: normal;
69 + font-weight: 700;
70 + src: url(https://fonts.gstatic.com/s/oswald/v49/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlYHYjedg.woff2) format('woff2');
71 + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
72 +}
73 +/* latin */
74 +@font-face {
75 + font-family: 'Oswald';
76 + font-style: normal;
77 + font-weight: 700;
78 + src: url(https://fonts.gstatic.com/s/oswald/v49/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlWHYg.woff2) format('woff2');
79 + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
80 +}
...\ No newline at end of file ...\ No newline at end of file
1 +/* cyrillic-ext */
2 +@font-face {
3 + font-family: 'Raleway';
4 + font-style: normal;
5 + font-weight: 400;
6 + src: url(https://fonts.gstatic.com/s/raleway/v28/1Ptug8zYS_SKggPNyCAIT5lu.woff2) format('woff2');
7 + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
8 +}
9 +/* cyrillic */
10 +@font-face {
11 + font-family: 'Raleway';
12 + font-style: normal;
13 + font-weight: 400;
14 + src: url(https://fonts.gstatic.com/s/raleway/v28/1Ptug8zYS_SKggPNyCkIT5lu.woff2) format('woff2');
15 + unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
16 +}
17 +/* vietnamese */
18 +@font-face {
19 + font-family: 'Raleway';
20 + font-style: normal;
21 + font-weight: 400;
22 + src: url(https://fonts.gstatic.com/s/raleway/v28/1Ptug8zYS_SKggPNyCIIT5lu.woff2) format('woff2');
23 + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
24 +}
25 +/* latin-ext */
26 +@font-face {
27 + font-family: 'Raleway';
28 + font-style: normal;
29 + font-weight: 400;
30 + src: url(https://fonts.gstatic.com/s/raleway/v28/1Ptug8zYS_SKggPNyCMIT5lu.woff2) format('woff2');
31 + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
32 +}
33 +/* latin */
34 +@font-face {
35 + font-family: 'Raleway';
36 + font-style: normal;
37 + font-weight: 400;
38 + src: url(https://fonts.gstatic.com/s/raleway/v28/1Ptug8zYS_SKggPNyC0ITw.woff2) format('woff2');
39 + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
40 +}
41 +/* cyrillic-ext */
42 +@font-face {
43 + font-family: 'Raleway';
44 + font-style: normal;
45 + font-weight: 500;
46 + src: url(https://fonts.gstatic.com/s/raleway/v28/1Ptug8zYS_SKggPNyCAIT5lu.woff2) format('woff2');
47 + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
48 +}
49 +/* cyrillic */
50 +@font-face {
51 + font-family: 'Raleway';
52 + font-style: normal;
53 + font-weight: 500;
54 + src: url(https://fonts.gstatic.com/s/raleway/v28/1Ptug8zYS_SKggPNyCkIT5lu.woff2) format('woff2');
55 + unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
56 +}
57 +/* vietnamese */
58 +@font-face {
59 + font-family: 'Raleway';
60 + font-style: normal;
61 + font-weight: 500;
62 + src: url(https://fonts.gstatic.com/s/raleway/v28/1Ptug8zYS_SKggPNyCIIT5lu.woff2) format('woff2');
63 + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
64 +}
65 +/* latin-ext */
66 +@font-face {
67 + font-family: 'Raleway';
68 + font-style: normal;
69 + font-weight: 500;
70 + src: url(https://fonts.gstatic.com/s/raleway/v28/1Ptug8zYS_SKggPNyCMIT5lu.woff2) format('woff2');
71 + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
72 +}
73 +/* latin */
74 +@font-face {
75 + font-family: 'Raleway';
76 + font-style: normal;
77 + font-weight: 500;
78 + src: url(https://fonts.gstatic.com/s/raleway/v28/1Ptug8zYS_SKggPNyC0ITw.woff2) format('woff2');
79 + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
80 +}
81 +/* cyrillic-ext */
82 +@font-face {
83 + font-family: 'Raleway';
84 + font-style: normal;
85 + font-weight: 600;
86 + src: url(https://fonts.gstatic.com/s/raleway/v28/1Ptug8zYS_SKggPNyCAIT5lu.woff2) format('woff2');
87 + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
88 +}
89 +/* cyrillic */
90 +@font-face {
91 + font-family: 'Raleway';
92 + font-style: normal;
93 + font-weight: 600;
94 + src: url(https://fonts.gstatic.com/s/raleway/v28/1Ptug8zYS_SKggPNyCkIT5lu.woff2) format('woff2');
95 + unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
96 +}
97 +/* vietnamese */
98 +@font-face {
99 + font-family: 'Raleway';
100 + font-style: normal;
101 + font-weight: 600;
102 + src: url(https://fonts.gstatic.com/s/raleway/v28/1Ptug8zYS_SKggPNyCIIT5lu.woff2) format('woff2');
103 + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
104 +}
105 +/* latin-ext */
106 +@font-face {
107 + font-family: 'Raleway';
108 + font-style: normal;
109 + font-weight: 600;
110 + src: url(https://fonts.gstatic.com/s/raleway/v28/1Ptug8zYS_SKggPNyCMIT5lu.woff2) format('woff2');
111 + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
112 +}
113 +/* latin */
114 +@font-face {
115 + font-family: 'Raleway';
116 + font-style: normal;
117 + font-weight: 600;
118 + src: url(https://fonts.gstatic.com/s/raleway/v28/1Ptug8zYS_SKggPNyC0ITw.woff2) format('woff2');
119 + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
120 +}
121 +/* cyrillic-ext */
122 +@font-face {
123 + font-family: 'Raleway';
124 + font-style: normal;
125 + font-weight: 700;
126 + src: url(https://fonts.gstatic.com/s/raleway/v28/1Ptug8zYS_SKggPNyCAIT5lu.woff2) format('woff2');
127 + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
128 +}
129 +/* cyrillic */
130 +@font-face {
131 + font-family: 'Raleway';
132 + font-style: normal;
133 + font-weight: 700;
134 + src: url(https://fonts.gstatic.com/s/raleway/v28/1Ptug8zYS_SKggPNyCkIT5lu.woff2) format('woff2');
135 + unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
136 +}
137 +/* vietnamese */
138 +@font-face {
139 + font-family: 'Raleway';
140 + font-style: normal;
141 + font-weight: 700;
142 + src: url(https://fonts.gstatic.com/s/raleway/v28/1Ptug8zYS_SKggPNyCIIT5lu.woff2) format('woff2');
143 + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
144 +}
145 +/* latin-ext */
146 +@font-face {
147 + font-family: 'Raleway';
148 + font-style: normal;
149 + font-weight: 700;
150 + src: url(https://fonts.gstatic.com/s/raleway/v28/1Ptug8zYS_SKggPNyCMIT5lu.woff2) format('woff2');
151 + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
152 +}
153 +/* latin */
154 +@font-face {
155 + font-family: 'Raleway';
156 + font-style: normal;
157 + font-weight: 700;
158 + src: url(https://fonts.gstatic.com/s/raleway/v28/1Ptug8zYS_SKggPNyC0ITw.woff2) format('woff2');
159 + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
160 +}
161 +/* cyrillic-ext */
162 +@font-face {
163 + font-family: 'Raleway';
164 + font-style: normal;
165 + font-weight: 900;
166 + src: url(https://fonts.gstatic.com/s/raleway/v28/1Ptug8zYS_SKggPNyCAIT5lu.woff2) format('woff2');
167 + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
168 +}
169 +/* cyrillic */
170 +@font-face {
171 + font-family: 'Raleway';
172 + font-style: normal;
173 + font-weight: 900;
174 + src: url(https://fonts.gstatic.com/s/raleway/v28/1Ptug8zYS_SKggPNyCkIT5lu.woff2) format('woff2');
175 + unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
176 +}
177 +/* vietnamese */
178 +@font-face {
179 + font-family: 'Raleway';
180 + font-style: normal;
181 + font-weight: 900;
182 + src: url(https://fonts.gstatic.com/s/raleway/v28/1Ptug8zYS_SKggPNyCIIT5lu.woff2) format('woff2');
183 + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
184 +}
185 +/* latin-ext */
186 +@font-face {
187 + font-family: 'Raleway';
188 + font-style: normal;
189 + font-weight: 900;
190 + src: url(https://fonts.gstatic.com/s/raleway/v28/1Ptug8zYS_SKggPNyCMIT5lu.woff2) format('woff2');
191 + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
192 +}
193 +/* latin */
194 +@font-face {
195 + font-family: 'Raleway';
196 + font-style: normal;
197 + font-weight: 900;
198 + src: url(https://fonts.gstatic.com/s/raleway/v28/1Ptug8zYS_SKggPNyC0ITw.woff2) format('woff2');
199 + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
200 +}
...\ No newline at end of file ...\ No newline at end of file
1 +html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
...\ No newline at end of file ...\ No newline at end of file
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
6 <title>EMOJI-HUMAN</title> 6 <title>EMOJI-HUMAN</title>
7 <link rel="stylesheet" href="/index.css"> 7 <link rel="stylesheet" href="/index.css">
8 <link rel="icon" type="image/x-icon" href="/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"> 9 + <meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="/external/reset.min.css">
10 </head> 10 </head>
11 11
12 <body style="margin: 0 auto"> 12 <body style="margin: 0 auto">
...@@ -15,11 +15,11 @@ ...@@ -15,11 +15,11 @@
15 <div id="gradient-bg"> 15 <div id="gradient-bg">
16 16
17 <!-- 내비게이션 --> 17 <!-- 내비게이션 -->
18 - <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><!--bootstrap--> 18 + <link rel="stylesheet" href="/external/bootstrap.min.css"><!--bootstrap-->
19 <!--css link--> 19 <!--css link-->
20 - <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><!--for icons--> 20 + <link rel="stylesheet" href="/external/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--> 21 + <script src="/external/ajax/jquery.min.js"></script><!--jquery script-->
22 - <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><!--bootstrap script--> 22 + <script src="/external/bootstrap/bootstrap.min.js"></script><!--bootstrap script-->
23 23
24 <body id="page-top"> 24 <body id="page-top">
25 <!--creating a navigation bar--> 25 <!--creating a navigation bar-->
...@@ -66,13 +66,13 @@ ...@@ -66,13 +66,13 @@
66 </li> 66 </li>
67 </ul> 67 </ul>
68 68
69 - <script src='https://cdnjs.cloudflare.com/ajax/libs/parallax/2.1.3/parallax.min.js'></script><script src="/face.js"></script> 69 + <script src='/external/ajax/parallax.min.js'></script><script src="/face.js"></script>
70 </div> 70 </div>
71 <!-- 이모지 얼굴 --> 71 <!-- 이모지 얼굴 -->
72 72
73 <!-- 이모지 레인 --> 73 <!-- 이모지 레인 -->
74 <div style="z-index: 1;"> 74 <div style="z-index: 1;">
75 - <link href="https://fonts.googleapis.com/css?family=Oswald:600,700" rel="stylesheet"> 75 + <link href="/external/oswald" rel="stylesheet">
76 <div id="all"> 76 <div id="all">
77 <div id="container"> 77 <div id="container">
78 <div id="animate"> 78 <div id="animate">
......